Webwork-Tools - Dem Webworker seine Werkzeugkiste

XRAY: das Webwork-Bookmarklet

Von Valentin wurde ich auf ein interessantes Bookmarklet hingewiesen. Es handelt sich um XRAY und das bietet ein paar ganz nette Informationen für Leute, die Informationen zu bestimmten Abschnitten einer Website brauchen.

Das Bookmarklet zieht man oder legt es einfach in die Lesezeichen- bzw. Favoriten-Liste und von da an braucht man das Lesezeichen oder besser gesagt das Bookmarklet anzuklicken um es zu aktivieren. Mit einem weiteren Klick auf einen Bereich der Website wird der selbige hervorgehoben und man erfährt die Ausmaße und die Positionoerung der Box und eine Reihe von weiteren Informationen: um welches Element es sich handelt, eingesetzte IDs und Klassen, die Position im DOM-Baum, die Art der Positionierung, ob das Element floatet und einiges mehr.

Nichts verstanden? Vielleicht hilft dir der XRAY-Screencast weiter.

Nachtrag: ich habe das Bookmarklet auf mehreren Browsern getestet und in Firefox, SeaMonkey und IE7 funktioniert es. In Opera 9.52 und Safari für Windows nicht.

HTML-Validator für Mozilla

Neben der Web Developer Toolbar ist der HTML-Validator die Erweiterung für Firefox bzw. SeaMonkey, die ich am häufigsten verwende. Die Erweiterung gibt es in zwei Geschmacksrichtungen: der Versionsstrang 0.7x läuft unter SeaMonkey und den älteren Firefox-Versionen. Der Versionsstrang 0.8x hat eine erweiterte Funktionspalette.

Nach der Installation integriert sich die Erweiterung in der Statusleiste des Browsers (siehe Abbildung) und zeigt, je nach Einstellung, bei allen oder nur bei ausgewählten Seiten den Status an: Grün für alles in Ordnung, Gelb für Warnungen und Rot für Fehler. Die Erweiterung gibt noch eine Reihe an weiteren Statusmeldungen aus, die man auf der Anleitungs-Seite finden kann. Kurz gesagt: die Erweiterung ist ein Html-Validator welcher ständig im Hintergrund die Websites überprüft.

Die Erweiterung bietet eine Reihe an Einstellungen: man kann wählen ob der SGML-Parser, HTML-Tidy oder beide Algorithmen die Website prüfen. Dann kann man einstellen ob alle oder nur bestimmte Websites geprüft werden und ob bei der Quelltextanzeige im Browser, die Funktionalität von HTML-Validator aktiviert werden soll. Darüber hinaus kann man einige weitere Einstellungen de- oder aktivieren, wie z.B. die Anzeige der Zeilennummern oder die Hervorhebung der fehlerhaften Zeilen.

Alles in allem ist das imho eine sehr nützliche Browser-Erweiterung, die einem einiges an verlorener Zeit und Nerven ersparen kann.

Textbausteine

Wenn man viele standardisierte Sachen im Web schreibt, unabhängig davon ob per Mail oder in Formularen ist das Firefox-Addon Clippings eine wahre Wohltat.

Mit diesem Addon kann man sich beliebige Textbausteine erstellen, entweder "von Hand" oder aber man übernimmt eine markierte Textpassage in das Tool. Diesen Textbausteinen kann man dann aussagekräftige Namen geben und ihnen auch eine Tastenkombination zuweisen.

Einmal als «Clipping» abgelegt können diese Textbausteine einfach über das Kontextmenü in ein Formular oder eine E-Mail eingefügt werden.

Die Organisation der Clippings erfolgt über den Clippings-Manager. Hier können einzelne Einträge noch einmal bearbeitet werden. Verschiedene Clippings können in übergeordneten Ordnern zusammengefasst werden und man hat sogar die Möglichkeit seine Clippings zu exportieren bzw. welche zu importieren.

Blindtext per Javascript

Während meiner Recherche nach Blindtextgeneratoren bin ich auch über zwei Lösungen zum Generieren von Blindtext gestolpert, die auf jeweils einem Javascript basieren. Beide scheinen von befreundeten Programmierern erstellt worden zu sein und das eine Skript (filler_text.js von Silus Grok) sieht sich als Weiterentwicklung des anderen Skripts (ftod.js von Alessandro). Ich denke, dass die Benutzung beider Skripte sinnvoll ist (natürlich nur immer jeweils eins ) und so möchte ich hier beide vorstellen. weiterlesen…

Suchen in Tabs

Folgendes Szenario habe ich relativ häufig. Ich habe bei Google nach etwas bestimmten gesucht und bin auch (vermeintlich) fündig geworden. Die Suchergebnisse, die mir interessant erschienen habe ich mir alle im Hintergrund in neuen Tabs öffnen lassen. Nun möchte ich die einzelnen Seiten durchgehen und sehen, ob sie für meine Suche wirklich relevant sind.

Das Problem ist allerdings, dass sich auch unübersichtliche Seiten geöffnet haben, Seiten, die sehr umfangreich sind, so dass ich auf den ersten Blick das Gesuchte nicht finde. Oft gebe ich dann mein Suchwort noch einmal in die Browser-Suche (Bearbeiten » Suchen bzw. Strg+F) ein, um schneller zum "Ziel" zu kommen. Dies muss ich aber in jedem Tab wiederholen bzw. wenigstens erneuern/aktualisieren.

Das Firefox-Addon Find In Tabs 0.3.2 leistet da einen wertvollen Dienst. Wenn man es installiert hat, kann man nicht nur im aktuellen Tab nach etwas suchen, sondern in allen geöffneten Tabs gleichzeitig. Und man bekommt eine übersichtliche Liste mit allen Suchergebnissen präsentiert. Dabei ist es sogar möglich die Ergebnisliste zum Navigieren zu nutzen – einfach auf ein Ergebnis klicken und schon springt die Ansicht in den betreffenden Tab zur angezeigten Fundstelle.

FireShot – Screenshots erstellen und bearbeiten

Das Firefox-Addon FireShot 0.58 ist wirklich eine besonders hilfreiche Browser-Erweiterung. Mit ihm kann man Screenshots machen (auch von kompletten Seiten, nicht nur von am Monitor sichtbaren Teil) und diese anschließend nach herzenslust bearbeiten.

Nach der Installation sollte man als erstes die umfangreichen Einstellungen (Preferences) des Programms anpassen.

Einstellungsmöglichkeiten

Bei den generellen Einstellungen erkennt man schon die Möglichkeiten, die einem FireShot bietet. Man kann (wie bereits oben erwähnt) zuerst einmal wählen wovon genau ein Screenshot gemacht werden soll: sichtbarer Bereich (Visible Area) oder die komplette Seite (Entire Page). Und man kann entscheiden, wo sich FireShot integrieren soll: weiterlesen…

PSPad: der vielseitige Texteditor

Texteditoren sind wichtige Werkzeuge, nicht nur für Webworker, die mit HTML- und CSS-Dateien hantieren sondern auch z.B. für andere Leute wenn es darum geht Dateien auf der Code-Ebene oder im reinen Textmodus (engl: plain Text) zu bearbeiten. Im Gegensatz zu den spezialisierten HTML-Editoren (z. B. Bluefish für Linux) haben sie weniger oder kaum übliche "HTML-Funktionen", wie z.B. vordefinierte Buttons für HTML-Tags.

Einer dieser vielseitigen Editoren ist PSPad. Das Programm ist Freeware und wird von dem Tschechen Jan Fiala entwickelt, allerdings ist im Programmpaket die deutsche Sprachdatei integriert.

Gewiss, das Programm würde mit seinem Interface bei einem Schönheitswettbewerb keinen Blumentopf gewinnen. Aber mittlerweile lasse ich mich eher von den inneren Qualitäten überzeugen, das gilt sowohl für Websites wie für Programme. Zumal man in den "Einstellungen" » "Programm einstellen…", die Programm-Oberfläche anpassen kann. Das Skin "Silk" verpasst dem Editor ein recht modernes und ansehnliches Äußeres. weiterlesen…

Farbkombinationen

Bei der Erstellung einer Website hat man oft eine bestimmte Farbe im Kopf oder vorgegeben, die man verwenden möchte/muss. Da eine Farbe aber nicht reicht, braucht man noch mehr – und die sollten passen. Eine Möglichkeit dafür bietet Adobe® Kuler™.

Kuler ist ist eine webbasierte Anwendung aus dem Hause Adobe, die es einem erlaubt mit Farben zu "spielen". Und das meine ich wörtlich. Es macht nämlich unheimlich viel Spaß mit den Farbpaletten zu experimentieren. Um eine gute Ausgangsbasis zu haben, kann man ein eigenes Bild hochladen oder eine bestimmte Farbe als Basis bestimmen.

Ist man bei Adobe registriert, kann man seine Farbkombinationen auch speichern, downloaden (leider nur im Adobe Swatch Exchange-Format *.ase) oder die Farbkombinationen von anderen bewerten und kommentieren.

Umrechner: Pixel zu em

Neben Pixel (px) ist em eine weitere häufig eingesetzte Einheit wenn es darum geht in CSS die Schriftgröße zu definieren, aber auch die Dimensionen einer Fläche zu bestimmen. Pixel ist relativ zu dem Ausgabegerät (Monitor) und em ist relativ zu den Einstellungen des Benutzers.

Standardmäßig ist in allen gängigen Browsern die Standardgröße der Schriften mit 16 Pixel angegeben, was in dem Fall 100% bzw. 1em entspricht. Nun gibt es zwei Vorgehensweisen, wie man jetzt mit em hier weiter arbeiten kann:

1. Man setzt im body (quasi die oberste Ebene) die Schriftgröße auf 100% und "sagt" noch einmal explizit, das 16 Pixel die Bezugsgröße ist. Wenn man dann die Maße und die Größen benennt muss man sich immer entweder auf die 16 Pixel oder auf die Angabe des Elternelementes beziehen, weil die Angabe zu Schriftgröße vererbt wird. Hier muss man auf jeden Fall sehr häufig entweder einen Taschenrechner oder Stift und Papier griffbereit haben.
2. Man setzt in body als Bezugsgröße 62.5% ein, was dann einer Größe von 10 Pixeln entspricht. Hier liegt der Vorteil darin, dass man zumindest auf den ersten Verschachtelungsebenen weniger umrechnen muss, wenn man pixelgenaue Layouts umsetzen muss.

Gut, jetzt kann man diskutieren ob pixelgenaue Layouts wirklich sein müssen, aber das soll nicht der Gegenstand dieses Beitrages sein. Egal welche von beiden oben vorgestellten Vorgehensweisen man einschlägt, so kommt man früher oder später dazu umrechnen zu müssen. Auch dazu gibt es feine Helferlein:

• em Calculator
• Pixel in EM umrechnen (via Markus Kurde)
• Nachtrag: Vertical rhythm calculator (via Jens Grochtdreis)

Das zweite Tool kann nur basierend auf der Standardgröße von 16px rechnen, was für viele Anwendungsfälle ausreicht. Bei dem ersten Tool kann man nicht nur die Ausgangsgröße anpassen sondern man kann die Elemente verschachteln und dadurch die Veerbung der Schriftgröße visualisieren. Sehr fein.

Dateien verschicken

Ausgangslage:

• kein Speicherplatz auf einem Server bzw. Zugriff darauf
• ein E-Mail-Programm, das das Versenden von Dateien nicht zulässt

Problemfall: man möchte eine Datei verschicken.

Für viele scheint das vielleicht kein realistisches Szenario, aber ich habe es (in einer Firma) selbst schon erlebt und da wird das Versenden von Dateien zu einer echten Herausforderung bzw. schlichtweg unmöglich.

Durch Zufall bin ich allerdings vor einigen Tagen über die Seite blindcode.com gestolpert. Dort kann man bis zu 100 MB große Dateien hochladen und erhält dann einen Link. Diesen kann man verschicken und der Empfänger kann so die Datei bequem herunterladen.

Leider kann ich nichts über Datensicherheit oder die Beständigkeit der gespeicherten Daten sagen, da die Seite eher minimalistisch in ihren Angaben ist.

Nachtrag
Tobias hat sich mit dem Thema Große Dateien versenden schon länger beschäftigt und dazu mehrere Dienste im Medienpädagogik Praxis-Blog vorgestellt.