HTML Tooltipps
HTML Tooltipps - Nützliche Werkzeuge
Im vorherigen Abschnitt habe ich bereits ein paar Editoren vorgestellt, mit denen man leichter Webseiten erstellen kann. In diesem Abschnitt möchte ich weitere Tools vorstellen, die die Erstellung von HTML Seiten erleichtern.
Der Focus liegt hierbei zunächst auf Freeware Tools.
Der W3C Validator
Valides HTML ist sexy ;) und erhöht die Chancen in allen Browser gut dargestellt zu werden. Ausserdem erleichtern wir Suchmaschinen das durchsuchen von Websites.
Der Validator ist zu finden unter validator.w3.org
Den Firefox aufboren für HTML Entwicklung
Der Mozilla Firefox Browser bietet durch eine Vielzahl an Plugins die Möglichkeit den Browser für Entwickler so zu erweitern, dass eine Fehlersuche und Optimierung von HTML Seiten sehr viel leichter ist.
Zentrale Anlaufstelle für Firefox Plugins ist addons.mozilla.org
Die folgenden Erweiterungen möchte ich hier kurz vorstellen:
Wenn du Firefox noch nicht kennst und noch nicht installiert hast kannst du ihn über den Banner unten installieren. Dadurch profitieren auch wir davon:
Die Webdevelopertoolbar von Chris Pederick
Unter der Projektseite (http://chrispederick.com/work/web-developer/) ist ein Link zum Download und weitere Informationen zu finden.
Die Webdevelopertoolbar bietet viele Funktionen, die die tägliche Arbeit erleichtern. Dazu gehört unter anderem:
- Umstellung auf verschiedene Bildschirmgrössen
- Anzeige von ALT Tags / Größe für Bilder
- CSS deaktivieren, editieren, ansehen der CSS Definitionen
- Validierung der Seiten über den W3C Validator Service
Die Toolbar bietet alle Funktionen leicht zugänglich. Hier findest du einen Screenshot zur Toolbar.
Firebug - Debugging mit Firefox
Eine weitere sehr schöne Extension ist Firebug. Mehr Informationen zu Firebug und den Download gibst unter www.getfirebug.com.
Im Screenshot ist zu sehen wie man mit Firebug in der Baumansicht des Quelltextes Knoten auf und zu klappen kann.
Wenn man mit der Maus über einen Knoten im Quelltext geht wird dieser im Browserfenster farblich markiert. Dadurch kann man sich schnell in der Struktur einer unbekannten Webseite zurechtfinden.
Im rechten Bereich sind Kontextinformationen zum aktuell ausgewählten Knoten zu finden.
Unter Layout werden alle Css Klassen angezeigt die Einfluss auf das ausgewählte Element haben. Hier können live Änderungen getestet werden und einezelne Zeile im CSS Code durch klick deaktiviert werden.
Im Bereich Layout findet man eine Schematische Layoutansicht des aktuell ausgewählten Elements. Auch hier lassen sich direkt Änderungen testen.
Der Bereich DOM gibt die DOM Informationen des ausgewählten Elemnts aus.
Ladezeiten mit Firebug messen
Firebug bietet ebefalls die Möglicheit an sehr komfortabel die Ladezeit einer Webseite zu analysieren.
Im Menüpunkt "Net" findet man eine Visualisierung der Ladezeit, der aktuellen Webseite.
Durch überfahren eines Items mit der Maus sieht man z.b. bei Bildern eine vorschau um das Element leichter zuordnen zu können. Durch ausklappen eines Items kann man sich den HTTP Request und Repsonse Header ansehen. Dadurch kann man Informationen über Caching etc. bekommen.
CSS und JavaScript Dateien werden hier ebefalls berücksichtigt. Bei einem weiteren Aufruf kann man ausserdem sehen, wieviel der Daten zwischengespeichert wurden und somit nicht nochmal geladen werden mussten.
