Bookmarklets

Bookmarklets, Favelets und Snippets

18. Oktober 2006
von

Wer sie schon mal benutzt hat, wird ohne sie nicht mehr auskommen können. Bookmarklets, auch Favelets genannt,
sind Javascript-Snippets, die als Lesezeichen in einem Browser abgelegt werden
und zu einem effizienteren Webworking und erhöhter Produktivität beitragen. Doch wer sich im Netz
umschaut, wird schnell feststellen, dass es Tausende verschiedener Bookmarklets gibt, die
für verschiedene Zwecke in verschiedenen Browsern eingesetzt werden. Wir haben die nützlichsten
ausgesucht, neue geschrieben und in einer Liste zusammengestellt. In den eckigen Klammern findet man die Quelle,
auf der das Bookmarklet und seine Beschreibung zu finden sind.

Um ein Bookmarklet zu installieren, genügt es, den Link mit dem jeweiligen Javascript in das Lesezeichen-Toolbar des Browsers
herüber zuziehen. Es ist zu beachten, dass es nicht immer klappt, ein neues Lesezeichen im Browser anzulegen und
erst dann den Javascript-Code in das Adressfeld zu kopieren. Um den Snippet zu benutzen,
markieren Sie ein Wort bzw. eine Adresse auf einer beliebigen Web-Seite und rufen Sie anschließend
das Lesezeichen auf. Klicken Sie auf den Snippet, ohne zuvor einen Textausschnitt markiert zu haben,
so werden Sie in der Regel gefragt, wonach gesucht werden soll.

Wer sich von der Fülle der Favelets in diesem Beitrag überfordert fühlt, wird mit Blummy (The Bookmarklet Management Bookmarklet) ein praktisches Bookmarklet gefunden haben,
mit dem sich die Verwaltung von Hunderten von Favelets zum Kinderspiel wird. (Autor: Vitaly Friedman)

Zum Nachschlagen:

Soziale Netzwerke, Web 2.0, Online-Dienste

  • BugMeNot liefert Login- und Passwort-Daten zu Diensten, die von Besuchern aufdringliche Registrierung erfordern.
  • Check PageRank liefert PageRank der Seite, auf der Sie sich gerade befinden.
  • Delicious: Super Fast Bookmarklet, Lazy Sheep For Del.icio.us sowie
    posticious sollen ein schnelles Ablegen der Favelets in del.icio.us ermöglichen.
  • Filext.com informiert über unbekannte Dateitypen und Dateiendungen [wb].
  • Flickr.com: automatisierte Suche in Flickr.
  • Microformats Bookmarklet hilft, vorhandene hCards und hCalendars zu extrahieren und lässt somit Kontakte und Events von der Seite bequem anzeigen und abspeichern.
  • MultiSubmit legt ein Lesezeichen mit einem einzelnen Klick in 19 sozialen Netzwerken ab – vorausgesetzt, der Benutzer verfügt über entsprechende Accounts.
  • Send To Flickr [vh]:
    um ein Bild aus einer Seite in das eigene Flickr-Fotostream hinzufügen, genügt es, den Snippet anzuklicken, das Bild auszuwählen und seinen Wunsch zu bestätigen.
  • Similicious listet ähnliche Seiten auf,
    die mit der, auf der Sie gerade sind, verwandt sind oder themenrelevant erscheinen.
  • Technorati: mit einem Klick lässt sich erfahren, was zu einem Thema bzw. über eine Seite in der Blogosphäre geschrieben wird.
  • TinyURL verkürzt die URL-Adresse einer Seite. [el]
  • Video Bookmarklets erlauben dem Benutzer, YouTube- und Google-Video-Dateien automatisch herunterzuladen.

Web-Design, Web-Entwicklung:

  • computed_styles listet Unterschiede zwischen der Darstellung eines Knotens und seines Eltern-Elements auf. [sf]
  • list_classes listet sämtliche Klassen, die in Cascading Stylesheets einer Seite verwendet werden. [sf]
  • show_blocks zeichnet Ränder von Paragraphen, Div-Containers und Tabellen und zeigt somit die innere Struktur einer Seiten an
    [sf].
  • test_styles lässt mit CSS einer Seite mithilfe einer temporären Datei experimentieren; einzelne eingegebenen Änderungen werden sofort angewendet [sf]. Alternativ kann man auch
    edit_styles verwenden [sf].
  • Color List Favelet
    erstellt eine Liste von Farben, die auf einer Seite verwendet werden; dafür werden CSS-Dateien analysiert.
  • Elements inspector liefert dieselbe Funktionalität wie Aardvark Firefox Extension und zeigt die Information über Div-Containers, Headers,
    Paragraphen etc. [Favlets.com]
  • Favelet Suite ist eine Package von 16 Bookmarklets, dir sich an Web-Entwickler richten und
    unter anderem Document Tree Chart, Javascript Object Tree, Mouseover DOM Inspector, Ruler und Style Sheet Viewer zur Verfügung stellen.
  • Layout Grid Bookmarklet erstellt ein
    Grid-Overlay für die Web-Seite, von dem sich u.a. die Größe des Layouts schnell bestimmen lässt.
  • SEO Bookmarklets stellt 22 Favelets für die SEO-Analyse zusammen. Es werden sowohl Suchdienste
    als auch soziale Netzwerke und weitere Analyse-Dienste abgefragt.
  • Web Developer Favelets: 9 simple Favelets für den Alltag eines Web-Entwicklers.
  • string2html wandelt strings in HTML-Entities um [wzb].

Umgang mit Links

Bessere Navigation

Tools für Blogger

Nützliche Tools:

  • Bookmarklet Crunchinator minimiert die Grösse von Bookmarklets und erstellt Einzeiler-Links, die praktisch und für Favelets typisch sind.
  • Bookmarklets Builder tut das, was sein Name aussagt. Der Online-Editor erleichtert das Schreiben der Javascript-Snippets, z.B. durch integrierten Formatter oder DOM Browser.
  • The Bookmarklet management bookmarklet ist ein praktisches Bookmarklet,
    mit dem sich die Verwaltung von Hunderten von Favelets zum Kinderspiel wird.

Weitere Sammlungen

  • All the Bookmarklets!: eine enorme Linkliste, in der man alles finden kann, was man jemals gebrauchen könnte.
  • Andy Budd’s Bookmarklets: persönliche Auswahl von Andy Budd.
  • JavaScript: Bookmarklets – Favorisierte Helfer: was Bookmarklets sind, wie man sie erstellt und weitere Links zum Thema auf Deutsch.
  • Francois Jordaan’s Bookmarklets: eine populäre Sammlung mit zahlreichen weiterführenden Links.
  • Opera Bookmarklets und eine alternative Sammlung von Phil Burns stellen Favelets für Opera Browser vor.
  • Pixy: Let’s Favelets: eine Sammlung verschiedener Snippets für Web-Entwicklung, Seitendarstellung und Umgang mit Links. Erwähnenswert sind
    List computed (cascaded) styles,
    Create comparing Windows und Window Resize Bookmarklets.
  • Squarefree Bookmarklets: ein Verzeichnis mit Hunderten von Favelets, die ausführlich beschrieben und in 16 Kategorien unterteilt sind.
  • Tantek Favelets: eine Sammlung von Web-Design-Bookmarklets von Web-Guru Tantek Celik. Dabei sind Multivalidator und Microformats Bookmaklets.
  • XHTMLed Bookmarklets: eine umfangreiche Sammlung, die durch eine gute
    Auswahl nützlicher Favelets zu beeindrucken weiß.

 foto

Sven Lennartz

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.

4 Kommentare zu „Bookmarklets, Favelets und Snippets

  1. [...] Viele Bookmarklets stellen dabei Funktionen zu einem im Text markierten Wort bereit – man markiert also mit der Maus ein Wort im Text und kann dann mit einem Klick zB die englische Übersetzung nachschlagen oder nach diesem begriff bei verschiedenen Suchmaschinen suchen. Eine schöne Übersicht über verschiedene Bookmarks findet sich aktuell bei Dr.Web. [...]

  2. [...] Bookmarklets, Favelets und Snippets von marcel am Donnerstag, 19. Oktober um 09:11 – 0 aufgerufen Dr. Web hat eine Zusammenstellung verschiedener Bookmarklets veröffentlicht, bei denen einige recht baruchbar zu sein scheinen… [...]

  3. links for 2008-01-18 « lieblinks am 19. Januar 2008 um 00:43

    [...] Bookmarklets Wer sie schon mal benutzt hat, wird ohne sie nicht mehr auskommen. Bookmarklets werden als Lesezeichen abgelegt werden tragen zur Produktivitaet bei (tags: tools javascript) [...]

  4. [...] Allan Jardine stammt das Bookmarklet mit der Bezeichnung Design. Nicht gerade das, was man einen einprägsamen Namen nennt, aber [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!

*