Webwork-Tools - Dem Webworker seine Werkzeugkiste

CSS3-Generator

Unter CSS3Generator.com findet man einen kleinen, aber feinen Generator, der verschiedene CSS3-Eigenschaften komfortabel erstellen kann.

Folgende Funktionen stehen zur Auswahl: Border Radius (abgerundete Ecken), Box und Text Shadow (Schlagschatten), RGBA, Multiple Columns (mehrspaltiger Text) und ein paar mehr. Bei allen Eigenschaften wird auch angezeigt, welche Browser dies auch unterstützen.

Wählt man Selectors aus, dann wird der Link zur CSS 3 selectors explained gezeigt, dort werden die neuen CSS3-Selektoren aufgelistet. Wählt man die Funktion Gradients aus, dann bekommt man einen Link zu einem anderen Generator wo man mit Hilfe von CSS3 Verläufe (engl. Gradients) erstellen kann.

Der Autor von CSS3Generator.com ist der Meinung das man das Rad nicht neu erfinden muss:

I was going to write a CSS gradient generator but then I found the CSS3 Gradient Generator which is does the job quite well.

Gefunden via @macx.

Generator für Platzhaltergrafiken

Erstellt man ein neues Layout oder will man Änderungen im selbigen testen, dann ist man oft auf Blindtext und Platzhaltergrafiken angewiesen. Um einen Platzhaltertext zu erstellen, kann man zwischen sehr vielen Blindtext-Generatoren wählen.

Bis vor Kurzem musste man sich mit den Grafiken selber helfen. Doch auch hier gibt es mittlerweile eine komfortable Lösungen: Dynamic Dummy Image Generator. In den letzten 1-2 Wochen habe ich in meinem Twitter-Account mehrmals über diesen Dienst lesen können, habe es aber immer vergessen ihn hier kurz zu erwähnen.

Die Bedienung ist Kinderleicht: Größe angeben, Text- und Hintergrundfarbe angeben, Format bestimmen und evtl. etwas Text eintippen. Das war's. Nun kann man entweder den generierten Pfad nutzen (z. B. http://dummyimage.com/600×400/000/fff.png) oder die Grafik auf den eigenen Rechner speichern.

Via Peter Kröner.

Neues Layout und neue Funktionen

Dieses Weblog existiert seit dem August 2008 und seit dem Zeitpunkt hatte es ein Provisorium als Layout. Daher wurde es an der Zeit, dieser Website ein ordentliches Design zu spendieren.

Mit der Ausarbeitung einer grafischen Vorlage habe ich Christina von Poser beauftragt und ich bin mit der Arbeit sehr zufrieden. Die Photoshop-Datei lag schon seit November auf meiner Festplatte und erst in den letzten Tagen hatte ich Zeit das Layout auch umzusetzen. Schande über mich. Aber so ist das halt, wenn am Ende des Monats noch so viel Arbeit übrig bleibt.

Nicht nur neues Aussehen, auch neue Funktionen

Die Gelegenheit habe ich dann auch gleichzeitig genutzt um den Weblog auch neue Funktionen zu spendieren. Im Zuge des Redesigns habe ich den Kommentar-Bereich modernisiert bzw. auf den Kommentar-Loop umgestellt, der mit WordPress 2.7 eingeführt wurde.

Dadurch ist es unter anderem möglich Kommentare zu verschachteln bzw. die Antworten auf Kommentare auch visuell zu hervorheben. Zudem gibt es unter jedem Kommentar einen Antwort-Link, mit dem man Bezug zu dem jeweiligen Kommentar nimmt.

Firebug: dem Webworker seine liebste Feuerwanze

Neben der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze und die mir unschätzbar wertvolle Dienste erweist, wenn es darum geht eine Website unter die Lupe zu nehmen und auf "Herz und Nieren" zu prüfen.

Auch wenn den allermeisten Webworkern die Erweiterung bekannt sein durfte, werde ich sie hier dennoch aus zwei Gründen beschreiben. Es gibt noch erstaunlich viele Webdesigner, die das Firefox-Addon nicht kennen und zudem wollte ich in Zukunft einige Erweiterungen (Extensions) für Firebug vorstellen und mich dann auf diesen Artikel beziehen. weiterlesen…

Wie sieht die Website auf dem iPhone aus?

Wie sieht die erstellte Website in den gängigen Auflösungen aus und was für eine Figur macht sie auf dem iPhone oder der Wii? Einfach anschauen bei: ViewLikeUs

Symbolfarben

Welche Farbe weckt welche Assoziation bzw. umgekehrt welche Farbe wird mit einem bestimmten Begriff assoziiert? Die Liebe ist rot, der Tod schwarz. Das sind noch herkömmliche Assoziaitonen, die jedem geläufig sind. Aber was ist mit dem Wort "Regierung"? Mit welcher Farbe wird das von den meisten Menschen in Verbindung gebracht? weiterlesen…

Web Developer Toolbar 3

Das hier ist der dritte Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum zweiten Teil der Serie.

Der Hauptpunkt "Resize"

Dieser Bereich ist sehr wichtig wenn es darum geht das Layout bzw, die Website unter verschiedenen Fenstergrößen zu testen … es geht darum die verschiedenen Monitorgrößen mit unterschiedlichen Abmessungen zu simulieren. Hier ein paar Beispiele: 1280×1024 Pixel ist die Standardauflösung eines 19" LCD-Monitors, 1024×768 ist die Standardauflösung eines 17" Röhrenmonitors und 1280×800 ist eine sehr häufige Auflösung bei den 15,4" und den 14,1" Laptops.

Neben den bereits eingestellten Größen kann man beliebig weitere Größen einfügen. Dabei kann man entscheiden ob die Ausmaße sich auf das komplette Browserfenster oder auf den Viewport – den sichtbaren Bereich – beziehen. weiterlesen…

Web Developer Toolbar 2

Das hier ist der zweite Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum dritten Teil der Serie.

Der Hauptpunkt "Images"

Dieser Hauptpunkt verbirgt einige sehr interessante Funktionen. Alle hier untergebrachte Funktionen haben etwas mit Bildern und Grafiken zu tun. Man kann die Grafiken ausblenden, die Pfade, Ausmaße, Dateigröße und die Inhalte der alt-Attribute ausgeben lassen. weiterlesen…

Web Developer Toolbar 1

Das hier wird der Start einer dreiteiligen Serie sein, in der ich die sehr mächtige und umfangreiche "Web Developer Toolbar" vorstelle. Hier geht es weiter zum zweiten und zum dritten Teil der Serie.

Die Web Developer Toolbar von Chris Pederick ist die Mozilla-Erweiterung und das Webwork-Tool welches ich am meisten nutze und ohne welches ich mir meine tägliche Arbeit als Webworker nicht vorstellen kann und auch nicht mehr vorstellen möchte.

Bei der Web Developer Toolbar handelt es sich um eine Erweiterung für die Browser der Gecko-Familie und zwar für Mozilla Firefox, für SeaMonkey und für Flock. Chris arbeitet schon seit 2003 an dieser Erweiterung und momentan ist die Version 1.1.6 aktuell. weiterlesen…

XRAY: das Webwork-Bookmarklet

Von Valentin wurde ich auf ein interessantes Bookmarklet hingewiesen. Es handelt sich um XRAY und das bietet ein paar ganz nette Informationen für Leute, die Informationen zu bestimmten Abschnitten einer Website brauchen.

Das Bookmarklet zieht man oder legt es einfach in die Lesezeichen- bzw. Favoriten-Liste und von da an braucht man das Lesezeichen oder besser gesagt das Bookmarklet anzuklicken um es zu aktivieren. Mit einem weiteren Klick auf einen Bereich der Website wird der selbige hervorgehoben und man erfährt die Ausmaße und die Positionoerung der Box und eine Reihe von weiteren Informationen: um welches Element es sich handelt, eingesetzte IDs und Klassen, die Position im DOM-Baum, die Art der Positionierung, ob das Element floatet und einiges mehr.

Nichts verstanden? Vielleicht hilft dir der XRAY-Screencast weiter.

Nachtrag: ich habe das Bookmarklet auf mehreren Browsern getestet und in Firefox, SeaMonkey und IE7 funktioniert es. In Opera 9.52 und Safari für Windows nicht.