JavaScript: Bookmarklets -- Favorisierte Helfer

Der folgende Text ist die unredigierte und erweiterte Fassung eines Artikels für die eMarket/Screen Business Online 24/2001.
Man nehme die Bookmark-Funktionalität gängiger Browser, gibt ein bißchen Javascript-Funktionalität hinzu, rühre das ganze gut um, und fertig ist ein Web-Producer-Werkzeug.
Welcher Webdesigner kennt das Problem nicht: ein Screendesign wurde wunderschön mit Hilfe von unsichtbaren Tabellen in HTML umgesetzt. Doch irgendein Browser zeigt die Tabelle nicht so an, wie gedacht. Irgendwo läßt der Browser eine unsichtbare Spalte kollabieren, oder eine Zelle den Platz sprengen. Nur, wo läuft die Tabelle aus dem Ruder? Bookmarklets helfen einem die Problemzelle aufzuspüren.

"Bookmarklets"?

"Bookmarklets" sind im Browser abgelegte Bookmarks (bzw. "Favoriten") hinter denen sich keine Internet-Adresse sondern kleine Javascript-Programme verbergen. Diese können dank des DOMs (Document Object Model) des Browsers die Anzeige der im Browserfenster geladenen Seite verändern. Und das kann man sich als Web-Producer zu nutze machen um Probleme auf der Seite auf der Spur zu kommen, oder die Tricks und Kniffe anderer Websites zu ergründen.
Bookmarklets beruhen auf dem Prinzip das sich Javascripts in den meisten Browsern in einer URL "verpacken" und ausführen lassen. Das kann man durch eine Eingabe in der URL-Zeile ausprobieren. Einfach eingeben: "javascript:alert('Doh!');". Das Schlüsselwort "javascript", gefolgt vom Doppelpunkt ist die Angabe eines Pseudo-Protokoll und weist den Browser darauf hin daß der folgende Text nicht als Internetadresse, sondern als Javascript-Befehl zu interpretieren ist. Der Javascript-Befehl "alert" öffnet ein kleines Fenster mit einer Meldung.
Test von javascript:alert('Doh!');
Diese Zeile wird also vom Browser wie eine URL behandelt, und läßt sich folglich genauso in einem HTML-Dokument als Link unterbringen oder als Bookmark abspeichern. Das bedingt übrigens auch einen Nachteil der meisten Bookmarklets: sie kommen nur mit HTML-Dokumenten klar, die nicht in einem Frameset liegen.
Auf der Site www.bookmarklets.com finden Sie eine erste Sammlung von Bookmarklets. So zum Beispiel ein Bookmarklet welches im Browserfenster alle 216 sogenannten "websafe" Farben ausgibt.
Auf http://cleverchimp.com/dev_utilities/macie5lets/ sind einige interessante Bookmarklets von Tantek Çelik, einem der Entwickler der Mac-Version des Microsoft Internet Explorers 5 und Microsoft-Representant im W3C. Mit diesen Bookmarklets lassen sich Cascading Style Sheets (CSS) ein- und ausschalten, oder in einem neuen Browserfenster auflisten. Darüberhinaus kann man die sich gerade im Browserfenster befindliche HTML-Seite per Bookmarklet zur Überprüfung an die entsprechenden HTML- und CSS-Validatoren des W3C schicken.
Umfangreicher sind die Validatoren-Bookmarklets auf http://www.gazingus.org/weblog/2001/03/#bookmarklets die auch die Online-Überprüfung auf Accessibility durch Bobby beinhalten (die Gazingus-Site scheint momentan down zu sein (Okt. 2003)).

Selbst ist der/die Mann/Frau

Bookmarklets sind eigentlich normale Javascripts, mit der Einschränkung das alles in nur einer Zeile programmiert werden muss, weswegen man sich teilweise schwer lesbarer Javascript-Konstrukte bedienen muß. Wenn man aber einmal hinter bestimmte Mechanismen gekommen ist, fällt es leicht diese für andere Bookmarklets zu benützen.

BorderToggle

BorderToggle ist ein Bookmarklet daß den Browser veranlaßt bei allen Tabellen der aktuell geladenen Seite den Rahmen auf 1 Pixel Breite zu setzen und dadurch sichtbar zu machen. Wenn wie im eingangs erwähnten Beispiel ein Tabellenlayout verrückt spielt, kann man Hilfe von BorderToggle die problematische Zelle aufspüren und erkennen das z.B. eine Spalte breiter läuft als eigentlich vorgesehen.
Ich bin vor über einem Jahr auf einer mir nicht mehr bekannten Site über dieses Bookmarklet gestolpert und habe es nun für den DOM-Standard angepasst, so daß es sowohl im Internet Explorer als auch Netscape 6-Browser läuft.
Das dem Bookmarklet zugrundeliegende Javascript geht sämtliche Tabellen des HTML-Dokumentes durch, und setzt das Attribut "border" auf "1", also 1 Pixel Breite.
  Test von BorderToggle  
Der erste Teil des Javascript-Konstrukts durchwandert in einer Schleife alle TABLE-Elemente: for(i=0;i<document.getElementsByTagName('TABLE').length;i++)
Durch document.getElementsByTagName('TABLE').length wird die Anzahl der im Dokument vorhandenen TABLE-Elemente bestimmt und in der FOR-Schleife einzelnd abgearbeitet. Für jedes TABLE-Element wird dann mit einer abgekürzten Form des Javascript-Konstrukts IF-THEN-ELSE der Zustand des Tabellenrahmen überprüft: document.getElementsByTagName('TABLE')[i].border=='0')?'1':'0'
Die Bedingung (wenn border-Attribut gleich Null) steht vor dem Fragezeichen. Wenn diese Bedingung zutrifft, wird der Teil vor dem Doppelpunkt "ausgeführt" (hier: '1'), wenn die Bedingung nicht zutrifft, der Teil hinter dem Doppelpunkt (hier: '0'). Wenn also das border-Attribut gleich Null ist, bekommt das border-Attribut die eins, also ein Pixel Breite, zugewiesen, in allen anderen Fällen wird das border-Attribut auf Null gesetzt.
Diese ganze Zuweisung ist in dem Javascript-Befehl "void" eingepackt, um zu vermeiden daß der Browser das Resultat der Zuweisung ('1' oder '0') im Browserfenster ausgibt.
Durch einfachen Austauch des zu suchenden Elementennamens kann man statt Tabellen z.B. alternativ allen Bildern einen Rahmen geben.

Addentum

Bookmarklets haben sich seitdem der Artikel erschienen ist, zu einem beliebten Entwickler- und Komfort-Werkzeug entwickelt. Entsprechend weiter gediehen sind die Techniken um Bookmarklets zu Programmieren.
So ist zum Beispiel ein neuer Typus von Bookmarklets aufgetaucht, der mit externen, auf einer Website abgelegten Dateien arbeitet. Sei es das ein externes Stylesheet an die aktuelle Browserseite angehängt wird, um bestimmte HTML-Elemente sichtbar zu machen. Oder um via externen JavaScript-Dateien die Funktionalität der Bookmarklets zu erweitern.
Leider hat sich der Microsoft Internet Explorer 6 für Windows in eine negative Richtung weiterentwickelt. Er gestattet nur noch Bookmarks von einer Länge von bis zu 508 Zeichen, und schafft damit ein Größemlimit für Bookmarklets. Einige Bookmarklets sind fast doppelt so groß und funktionieren dadurch in IE6/Win nicht mehr korrekt.

#: Links

Programmierung von Bookmarklets

Einführung von Gazingus anhand eines Google-Bookmarklets: http://www.gazingus.org/js/?id=105 (die Gazingus-Site scheint momentan (Okt. 2003) down zu sein)
Jesse Ruderman liefert zur Programmierung "begleitende" Informationen wie z.B. ein FAQ und ein Browser-Support-Charts.

Bookmarklets und CSS

Man kann Bookmarklets aber auch mit Ideen von Eric Meyer und Andrew Wooldridge verknüpfen und im Zusammenspiel mit Cascading Stylesheets noch ausgefuchstere Seitenanalyse-Werkzeuge basteln.
Andrew Wooldridge "Tap the Power of Mozilla's user Stylesheets":
www.oreillynet.com/pub/a/network/2000/06/30/magazine/mozilla_stylesheets.html
Eric Meyer "Using CSS as a Diagnostic Tool":
www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_tool.html
Eric Meyer "The CSS Anarchist's Cookbook":
www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html
Eric Meyer "The CSS Anarchist Strikes Again!":
www.oreillynet.com/pub/a/network/2001/03/09/magazine/anarchist_2.html

#: Weitere Bookmarklets

Tantek Çelik: CSS, JavaScript

http://cleverchimp.com/dev_utilities/macie5lets/ und http://www.favelets.com.

Gazingus

(die Gazingus-Site scheint momentan, Okt. 2003, down zu sein)
Gazingus fing mit einigen Bookmarklets an die die aktuelle Browserseite an verschiedene Validatoren (HTML, CSS, Bobby) geschickt haben. Inzwischen hat er noch einige mehr entwickelt. Links auf neue Bookmarklets sind bei Gazingus auf der Homepage.
Validatoren: Validate Markup, Validate Markup (W3C Beta), Validate Stylesheets, Validate Accessibility: http://www.gazingus.org/weblog/2001/03/#bookmarklets
Einführung in die Programmierung von Bookmarklets anhand eines Google-Bookmarklets: http://www.gazingus.org/js/?id=105
Berechnung der Größe der HTML-Seite, inkl. Bilder (IE/Win only): Page Weight & Speed -- http://www.gazingus.org/js/?id=108

Jesse Ruderman

Jesse Ruderman stellt auf seiner Site Bookmarklets für eine ganze Reihe von Kategorien zur Verfügung. Darüberhinaus stellt er eine Reihe weitergehende Informationen zur Verfügung wie z.B. ein FAQ (http://www.squarefree.com/bookmarklets/faq.html) und Browser-Support-Charts (http://www.squarefree.com/bookmarklets/browsers.html)
Links -- Bookmarklets zur Darstellung von Links oder Bilder: http://www.squarefree.com/bookmarklets/pagelinks.html
Forms -- Bookmarklets zum Handling von Formularen: http://www.squarefree.com/bookmarklets/forms.html
Text & Data -- Bookmarklets um Texte zu suchen, die Anzeige von Tabellen zu verändern oder Bilder zu vergrößern: http://www.squarefree.com/bookmarklets/pagedata.html
Zap -- Entfernt überflüssige Sachen von der Seite, wie z.B. Farben, Bilder, iFrames etc...: http://www.squarefree.com/bookmarklets/zap.html
Web Development -- Bookmarklets um sich Code oder HTML-Strukturen (DOM) anzusehen: http://www.squarefree.com/bookmarklets/webdevel.html
Validation -- Bookmarklets um bestimmte Aspekte zu testen: Validiert die Seite? Werden korrekte HTTP-Header gesandt? Sind überall ALT-Attribute gesetzt? http://www.squarefree.com/bookmarklets/validation.html
Misc -- Bookmarklets die sich mit der Navigation innerhalb einer Site, bzw. der History befassen: http://www.squarefree.com/bookmarklets/misc.html
Browsertest -- Testet die Implementierung von Code in den Browsern durch Resets von Elementen, oder dadurch dass um jedes HTML-Element ein grüner Rahmen erzeugt wird: http://www.squarefree.com/bookmarklets/testbrowsers.html
Rudermans Links-Seite mit Verweisen auf noch mehr Bookmarklets von anderen Leuten: http://www.squarefree.com/bookmarklets/links.html

Web-Graphics.com: CSS-Bookmarklets

Verschiedene Bookmarklets zur Anzeige von HTML-Elementen wie DIVs oder SPANs von Nathan Steiner.

trylookinghere.com

Sammlung von versch. Bookmarklets: http://www.trylookinghere.com/bookmarklets/bookmarkletintro.shtml

Sam-I-Am: Web-Development

Bookmarklets zu verschiedenen Themen wie DOM, Tables etc... Eine eher Windows-Internet Explorer-lastige Sammlung von Sam-I-Am (Sam Foster).

Ian Lloyd: Accessify

Sammlung von Bookmarklets zum Sichtbarmachen von Seitenstrukturen.

IMDB

Von Steven Champeon, veröffentlicht am 13.6.2001 in der WebDesign-L. Wenn dieses Bookmarklet angeklickt wird, wird nach dem per Cursor ausgewähltem Wort/Satz in der Filmdatenbank IMDB gesucht und eine Filmkritik ausgespuckt.

Christopher.org

Highlight Word schlägt ein im Browser markiertes Wort nach und liefert in einem neuen Fenster eine Erklärung.

Liorean

Einige Webdesigner-Tools von Liorean auf seinen Seiten bei eVolt: Bookmarklets

Bookmarklet.com

Die vermutlich älteste Site mit Bookmarklets. Leider auch die schlechteste. Recht unstrukturiert, überweigend belanglose Bookmarklets und zudem recht plattformspezifisch: http://www.bookmarklets.com/

Francis Uy, Web Coordinator http://cty.jhu.edu/cde/

Franciy Uy steuerte am 25.9.2002 in der BBEdit-Mailingliste "Web-Authoring List" drei Bookmarklets bei (Original-Mail)

Toggle CSS (Mozilla-kompatible)

Schaltet CSS ein/aus. [Test]

Draw Block Structure (Mozilla-kompatible)

Zeichnet mit Hilfe einer externen(!) CSS-Datei um die wichtigsten HTML-Elemente farbige Rahmen. [Test].

AutoGoogler (Mozilla-kompatible)

Einfach ein Wort mit der Maus auswählen und Bookmarklet anklicken. Schon wird die ausgewählte Passage in Google gesucht. [Test]

Quelle des Quellcodes

Wie bereits oben erwähnt: Ich kann mich leider nicht erinnern von wessen Site ich das Bookmarklet habe.
Ich meine ich hätte es damals auf der Site von Jason Kottke http://www.kottke.org entdeckt. Aber eine Suche in seinem Archiv hat leider nichts ergeben.
Eine weitere Quelle könnte http://www.bookmarklets.com sein, aber auch hier habe ich dieses Border-Toggle nicht gefunden.
Auch eine Suche per Google war erfolglos. Dieses Script geistert in dieser oder ähnlicher Form auch von Zeit zu Zeit in diversen Mailinglisten. Also: Mea Culpa daß ich leider den Autor dieses Bookmarklet nicht finden konnte.
Die Bookmarklets auf der Gazingus und Çelik-Seiten habe ich dank Hinweisen von Jeffrey Zeldman gefunden.
[010305]
Update [011011]
weitere Links [020211]
weitere Bookmarklets [020925]
Addentum und weitere Links mit Hilfe von LANtastic [021115]
 
 
Kai Logo