miki.samborskyWerkzeuge für Webdesigner
Ausgehend von den Arbeiten zu dieser Internetpräsenz möchte ich aufzeigen, welche Werkzeuge zum Einsatz kamen. Die oberste Prämisse war, das es möglichst wenig Geld kostet — nimmt es ja schon Unmengen von freier Zeit in Anspruch.
Wer bereits auf der Seitenleiste die empfohlenen Browser erblickt hat kann erkennen, daß meine Fenster ins Internet zwei kostenlose, Web Standards[1] respektierende und sehr komfortable Programme sind, mit deren Hilfe ich diese Seiten teste.
Ich brauche gute Werkzeuge für CSS, XHTML und Übersichtlichkeit, Lesbarkeit und Auffinden von Code. Mit Firefox und dem Web Developer Add-on ausgestattet eignet sich dieser Browser besonders gut. Eine Auflistung der Erweiterungen (Extensions) gibt es hier.
Safari 3 ist von Hause aus nicht so vielseitig in Bezug auf Erweiterungen, nichtsdestoweniger[2] bringt er ein exzellentes Werkzeug für Entwickler mit. Allerdings muß es erst zugänglich gemacht (aktiviert) werden. Dazu auf dem Mac im Programm Terminal folgenden Befehl ausführen:defaults write com.apple.Safari WebKitDeveloperExtras -bool trueAuf Windows müssen folgende Zeilen <key>WebKitDeveloperExtras</key> in der Datei C:\Documents and Settings\<USERNAME>\Application Data\Apple Computer\Safari\WebKitPreferences.plist enthalten sein. Nachzulesen ist das im WebKit Wiki.
<true/>
Zu erreichen ist es dann durch ctrl+Klick (rechts Klick) mit der Maus auf einen Bereich der Seite (idealerweise etwas, was auf der Seite genauer untersucht werden soll). Im Kontextmenü dann Element-Information wählen und es öffnet sich ein umfangreiches Inspektor Fenster.
Das Element wird auf der Seite hervorgehoben, indem alle anderen mit einem halbdurchsichtigen schwarzen Schleier verhüllt sind. Die Hervorhebung repräsentiert immer das Äquivalent der Auswahl im Inspektor.
Hintergrund Webseite mit hervorgehobenem Element, Vordergrund Element-Informationen.
Hintergrund Webseite mit hervorgehobenem Element, Vordergrund Element-Information.
Auf der linken Seite des Web Inspectors sind alle Dateien die zum Rendern[3] benötigt wurden aufgeführt. Auf der rechten Seite sind die für das ausgewählte Element relevanten CSS Attribute dargestellt. Wird der Haken bei Computed Style – Show implicit properties gesetzt erscheinen die gesamten CSS Attribute eines Elements (zusätzlich alle vererbten).
Im mittleren Bereich ist die DOM Struktur, mit dem ausgewählten Element.
Der unterste linke Schalter öffnet zwei zusätzliche Ansichten, die Console mit eventuellen Fehlermeldungen des Renderings und die Network Ansicht.
Network Ansicht mit Darstellung der einzelnen Ladezeiten der Dateien und zusammenfassend die Größen.
Inspektor schlägt Maßnahmen zu Optimierung vor; die Suche durchstöbert alle Dateien der Seite.
Letztere erweist sich als sehr nützlich weitere Optimierungen der Seite vornehmen zu können. Der rechte Bereich des Web Inspectors führt alle übertragenen Dateien der Seite mit ihrer Übertragungsdauer an. Im unteren Bereich erscheint eine schematische Übersicht darüber. Diese kann zwischen Transfer Größe und Zeit umgeschalten werden.
Zusätzlich werden noch Vorschläge zur Optimierung gemacht. Die Suche nach einem Bestandteil der Seite listet Ergebnisse aus allen Dateien (CSS, XHTML, JavaScript, PHP, Bilder et cetera) auf.
Wer es vorzieht alles in einem Fenster zu haben, der kann die Nutzung auch innerhalb des Browsers einstellen.
Inspektor innerhalb des Safari Fensters
Die Daten die der Web Inspector darstellt sind alle in Echtzeit. Dadurch können auch neue Elemente der Seite die beispielsweise durch einen Klick nachgeladen wurden (Stichwort: AJAX[4]) kontrolliert werden.
Die Element-Information sind auch im Safari für Windows enthalten.
Für den schnellen, leichten Kontrollblick über die Seite eignen sich folgende beiden Bookmarklets[5] besonders gut. Das erste ist Allan Jardine’s Design suite, welches vier Werkzeuge zur Verfügung stellt. Ein Raster, Lineal, Unit zum Messen von Längen von Punkt zu Punkt und Fadenkreuz.
Auswahlfenster der Design Werkzeuge
XRAY, die zweite Variante, liefert einen Inspektor, mit dem schnell einige CSS Eigenschaften des ausgewählten Elements angezeigt werden. Mittels der inheritance hierarchy kann die DOM Struktur nach oben (umliegend) navigiert werden. Die betroffenen Elemente sind ähnlich wie bei der Element-Information von Safari hervorgehoben beziehungsweise sind alle anderen semitransparent ausgeblendet.
XRAY, Dimensionen des Safari Links mit Hervorhebung des paddings
XRAY, Dimensionen des umliegenden div Elements „sidelist“ mit Hervorhebung der margin-bottom
Zum editieren von CSS, XHTML und PHP verwende ich Smultron, die FTP Verbindung gewährleistet Cyberduck. Für das Testen und validieren[6] der RSS Feeds nutze ich NetNewsWire.
Alle hier angesprochenen Werkzeuge sind kostenlos über die Links zu beziehen.
Fußnoten:
- Vom W3C (World Wide Web Consortium) entwickelte Technologien (Spezifikationen, Richtlinien u.a.) um die Interoperabilität von Internet-Geräten (Server, Browser u.a.) zu gewährleisten [↩]
- entgegen landläufiger Meinung heißt es nichtsdestoweniger und nicht nichtsdestotrotz. WP Link [↩]
- Das Aufbauen der Seite im Browserfenster mit allen benötigten Dateien, Funktionen und besonders der visuellen Anordnung. [↩]
- Asynchronous JavaScript and XML; WP Link [↩]
- Ein kleines in JavaScript geschriebenes Makro, das als Bookmark (Lesezeichen) abgespeichert wird und dadurch die Funktionen des Browsers erweitert. [↩]
- Überprüfen ob die Datei im Rahmen der vom W3C festgelegten Standards verfaßt ist [↩]
Externe Links des Artikels
