Webdesign

Xray ist ein kleiner, praktischer Web-Röntgen-Knopf: Einfach das Xray-Bookmarklet in die Lesezeichenleiste des Browsers ziehen, und ab sofort auf Knopfdruck den angesurften Webseiten „unter die Haube“ schauen. Sprich: Interessiert man sich für ein Weblayout, braucht man nur ein Element der Website anzuklicken und ein schickes graues Kästchen liefert Infos über Div-Maße, Float-Eigenschaften, eingestelltes Padding usw. . Natürlich ist das kein Ersatz für die in den Handwerkskasten jedes guten Webworkers gehörende Web-Developer-Extension, aber für den schnellen Röntgen-Klick zwischendurch ’ne prima Sache.
[via del.icio.us/moe]

Weil ich in letzter Zeit so viele Bookmarklets empfehle, hier noch ein Tipp, der hilft mit Favicons in der Lesezeichenleiste Platz zu sparen: Erstmal spart man natürlich Platz, indem man den Text eines in der Leiste abgelegten Lesezeichens entfernt oder auf das Wesentliche reduziert (Klick auf das Lesezeichen mit der rechten Maustaste | Eigenschaften | Text im Feld „Name“ löschen). Denn man erkennt die Websites ja über ihr Favicon (so sie denn eines haben – professionelle Sites haben eins). Doch wie kann man nun Platz sparen bei Bookmarklets, die kein Favicon haben?

Ein kleiner Trick löst das Problem: Zusätzlich zum Bookmarklet einfach die Seite, die das Bookmarklet anbietet, in die Lesezeichenleiste ziehen. So hat man schon mal ein schickes Lesezeichen mit Favicon. Den Text aus dem Feld „Name“ über das Kontextmenü löschen. Dann das JavaScript aus dem faviconlosen Bookmarklet durch copy and paste in das Lesezeichen mit dem Favicon übertragen (rechter Mausklick ins Feld Adresse des Bookmarklets, Strg a, um die gesamte Adresse zu markieren, Strg c zum Kopieren und Strg v zum Einfügen in das faviconisierte Lesezeichen. Altes Bookmarklet (das ohne buntes Bildchen) löschen und fertig!

Wie man auf diesem Screenshot sehen kann, gibt es in meiner Lesezeichenleiste so gut wie keinen Text mehr. Das ist platzsparend, ästhetisch ansprechend und hoch funktional.

Stefan Münz hat sein Tutorial zu Mikroformaten nun in einem PDF (25 Seiten, 418kb) zusammengefasst und bietet es seit heute im Webkompetenz-Blog unter einer Creative-Commons-Lizenz zum Download an.

Mikroformate sind auf Konvention beruhende, HTML-basierte Beschreibungen bestimmter Daten, zum Beispiel von Kontaktdaten. Mikroformate sind vor allem für Webanwendungen wie etwa Suchmaschinen interessant, die aus den Mikroformaten datenfeldorientierte Informationen ziehen können. Das vorliegende Dokument erklärt die grundsätzliche Funktionsweise von Mikroformaten und stellt die wichtigsten Formate an Hand von Beispielen vor.

So hat man die seriell angebotenen Informationen zum immer wichtiger werdenden Thema der Mikroformate gebündelt in einem Dokument zusammen. Mein herzlichster Dank an Stefan Münz für die großartige Arbeit.

Im gleichen Beitrag kündigt der Autor des Webkompetenz-Blogs neue Serien an, die nicht minder interessant sind und für die ich nur hoffen kann, die dazu nötige Zeit aus dem engen Zeithaushalt, der mir bei meinen zig Beschäftigungen zur Verfügung steht, herauszuschlagen: Die angekündigte Serie über AJAX findet mein besonderes Interesse, weil ich denke, dass ich da genau zum angesprochenen Interessentenkreis gehöre, den Stefan mit folgenden Worten umreißt:

Bei den Tutorials steht als nächstes eine Einführung in Ajax an. Dieses Thema ist um einiges komplexer als das über Mikroformate. Über Ajax gibt es dicke Fachbücher. Ein Tutorial in diesem Rahmen kann kein solches Fachbuch ersetzen. Es möchte einfach nur all jenen, die mit HTML/CSS vertraut sind und mit JavaScript und PHP oder Ähnlichem schon mal herumgespielt haben, einen ballastfreien Einstieg in die Materie vermitteln.