Eine Browsererweiterung (Add-on, auch: Plug-in) ist ein optionales Modul, das Browserfunktionen ergänzt oder erweitert. Browserhersteller definieren Schnittstellen, mit deren Hilfe Erweiterungen Dritter eingebunden werden können. Plug-ins sind in der Regel ohne die Anwendung, für die sie geschrieben wurden, nicht funktionsfähig.
Auch Programme wie der Flash Player oder Shockwave sowie das Reader-Plug-in zur Anzeige von PDF-Dokumenten oder der SVG Viewer der Firma Adobe sind Browsererweiterungen. Im Folgenden geht es jedoch nicht um Programme, die zur Anzeige bestimmter Multimedia- oder Dokumentformate bestimmt sind, sondern um eine andere Art der Browsererweiterung: Es handelt sich hier um Erweiterungen, die den Browser um nützliche Funktionen für Webautoren ergänzen.
Erweiterungen gibt es für alle großen Browser, wirklich interessant sind jedoch nur die Erweiterungen für Browser der Mozilla-Familie, speziell für Firefox. Auf der Seite https://addons.mozilla.org finden Sie Hunderte von Erweiterungen aller Art. Auf Erweiterungen für andere Browser wird in diesem Abschnitt nicht eingegangen.
Firebug
Die Browsererweiterung Firebug von Joe Hewitt, einem der Firefox-Entwickler, ermöglicht Webautoren, Webseiten zu »debuggen«, das heißt nach Fehlern zu suchen und diese zu korrigieren. Firebug integriert sich in Form einer Konsole in der unteren Browserhälfte – links ist der Quelltext der Seite in Form einer auf- und zuklappbaren Baumstruktur zu sehen, rechts alle (auch die vererbten) CSS-Eigenschaften. Damit können Sie anfangen, den Code Ihrer Webseite zu inspizieren. Fahren Sie mit der Maus über die Seite, und Firebug markiert den dazugehörigen Code – oder umgekehrt. Das Besondere an Firebug ist, dass Sie den Quellcode nicht nur inspizieren, sondern auch ändern können. Dazu bietet das Werkzeug die Funktion »Edit«, über die Sie markierte Teile des Quelltext korrigieren, beispielsweise CSS per Inline-Style hinzufügen können. Die Auswirkungen der Änderungen sehen Sie – und nur Sie (das ist wichtig zu wissen) – direkt live auf der Seite.
Abb. 3.15: Mit Firebug können Webautoren live sehen, wie sich Änderungen am Quelltext auswirken
Web Developer Toolbar
Die Web Developer Toolbar von Chris Pederick gehört zu den Browsererweiterungen, auf die Sie bereits nach kurzer Zeit nicht mehr werden verzichten wollen. Für Webautoren ist ihre Installation Pflicht. Die Web Developer Toolbar basiert auf der PNH-Developer-Toolbar von Chris Casciano und verfügt über eine derartige Vielzahl von Diagnosewerkzeugen und nützlichen Hilfsmitteln, dass es eine Stunde dauern kann, jede einzelne Funktion an seiner Website auszuprobieren. Zu den interessantesten Funktionen gehören die Möglichkeiten,
- JavaScript, Java, Cookies, den Browsercache und vieles andere mit einem Mausklick aus- und wieder einzuschalten,
- Stylesheets vollständig oder teilweise auszuschalten sowie live zu editieren (Änderungen sind direkt auf der Webseite sichtbar, auch wenn es sich nicht um eine lokale Site handelt),
- das Verhalten von Formularen zu beeinflussen,
- Informationen zu allen Bildern auf der Webseite anzuzeigen sowie die Darstellung von Bildern zu unterbinden oder auf die Anzeige ihres alternativen Attributs zu beschränken,
- das zugrunde liegende (X)HTML beziehungsweise DOM zu manipulieren und so versteckte Elemente und Kommentare anzuzeigen oder ein Dokument zu linearisieren,
- Elemente zur Analyse sichtbar zu machen, etwa alle Tabellen, alle Blockelemente oder alle missbilligten Elemente, sowie
- das aktuelle Dokument – auch lokale Dokumente – direkt einer Vielzahl von Validatoren und Prüfwerkzeugen vorzulegen.
Abb. 3.16: Die Web Developer Toolbar in Aktion
Html Validator (based on Tidy)
Die Erweiterung Html Validator (based on Tidy) von Marc Gueury ergänzt die Quelltextanzeige des Firefox-Browsers um einige nützliche Funktionen. So lassen sich automatisch Fehler und Warnungen anzeigen und in einem weiteren Schritt korrigieren.
Lange Zeit als reine Implementation der TidyLib im Einsatz, beherbergt dieses Firefox-Plug-in neben der TidyLib zum Überprüfen der HTML-Syntax mittlerweile auch OpenSP, eine weitere Syntaxbibliothek aus dem Dunstkreis des W3C. OpenSP ist derselbe SGML-Parser, der im W3C Markup Validation Service zum Einsatz kommt. Dadurch dass dieses Firefox-Add-on nun zwei mächtige »Syntaxprüfer« an Bord hat, ist es zwar etwas größer als in der Vergangenheit, dafür aber doppelt so mächtig. Diese beiden Syntaxprüfer können, je nach Konfiguration, entweder einzeln verwendet oder sogar miteinander verkettet werden.
Abb. 3.17: Der Html Validator zeigt Fehler und Warnungen an
Fangs
Fangs ist ein Screenreader-Emulator von Peter Krantz, also eine Erweiterung, die eine Webseite so aufbereitet, wie ein Screenreader sie vorlesen würde. Nach dessen Installation steht ein neuer Eintrag View Fangs im Kontextmenü zur Verfügung, über den ein neues Fenster mit der aufbereiteten Ansicht geöffnet werden kann. Angezeigt wird unter anderem, wie viele Überschriften und Links auf einer Seite vorhanden sind und wie Links, Listen, Tabellen etc. angekündigt würden. Abbildung 3.18 zeigt die Darstellung der Google-Homepage im Fangs-Fenster.
Abb. 3.18: Der Screenreader-Emulator Fangs
MeasureIt
Die Erweiterung MeasureIt von Kevin A. Freitas ermöglicht es, Breite und Höhe eines Bereichs einer Webseite direkt auf dem Bildschirm nachzumessen. Die maßnehmende Box lässt sich pixelweise auf dem Bildschirm verschieben.
LinkChecker
Wenn es darum geht, alle Links einer Website zu überprüfen, sollten Webautoren auf Werkzeuge wie Xenu’s Link Sleuth (siehe Kapitel 3.4.3) zurückgreifen. Um sicherzustellen, dass alle Links auf einer einzigen Webseite gültig sind, reicht die Erweiterung LinkChecker, ebenfalls von Kevin A. Freitas, vollkommen aus. Über den Aufruf eines Eintrags im Kontextmenü werden alle Links auf der Seite durchlaufen und farbig markiert:
- Grün für gültige Links,
- Rot für ungültige,
- Gelb für Weiterleitungen oder geschützte Bereiche sowie
- Grau für Links, die nicht geprüft werden konnten und übersprungen wurden.
Right-Click Lynx viewer
Die Erweiterung Right-Click Lynx, bereitgestellt durch die Yellowpipe Internet Services, fügt einen Kontextmenüeintrag hinzu, über den ein neues Fenster geöffnet werden kann, in dem die aktuelle Webseite im Lynx viewer der Yellowpipe Internet Services angezeigt wird. Webautoren können so überprüfen, wie eine Website im Textbrowser Lynx aussieht (wobei es in den meisten Fällen besser ist, Lynx zu installieren und sich direkt anzuschauen, wie die Seite darin aussieht und ob sie sich gut bedienen lässt).
WAVE-Toolbar
Mit WAVE (Web Accessibility Evaluation Tool) stellt die WebAIM (Web Accessibility in Mind) Webentwicklern unter http://wave.webaim.org ein Onlinewerkzeug zur Verfügung, mit dem sie die Zugänglichkeit einer Webseite überprüfen können. Fehler oder mögliche Probleme zeigt WAVE direkt auf der zu überprüfenden Seite in Form grafischer Symbole an. Unter der Adresse http://wave.webaim.org/toolbar können Sie sich die WAVE-Toolbar installieren, die den Aufruf des Prüfwerkzeugs erleichtert und darüber hinaus einige weitere Funktionen bietet.
Abb. 3.20: Die WAVE-Toolbar zeigt mögliche Accessibility-Probleme auf Webseiten an