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 Scrrenshot ist die Firefox Extension Firebug in Action zu sehen während der HTML Code von admin-wissen.de analysiert wird.
Firebug in Action

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.

Im Screenshot ist die Analyse der Ladezeit einer Webseite mit Firebug zu sehen.
Ladezeiten mit Firebug analysieren

Navigation