Webwork-Tools - Dem Webworker seine Werkzeugkiste



Web Developer Toolbar 2

Von Vladimir am 09. September 2008 um 09:00

Das hier ist der zweite Teil der Artikel-Serie, in der ich einen meiner Lieblingstools, die "Web Developer Toolbar vorstelle. Hier geht es zum ersten Teil und zum dritten Teil der Serie.

Der Hauptpunkt "Images"

Bilder einsehen, visualisieren udn manipulieren

Bilder einsehen, visualisieren und manipulieren

Dieser Hauptpunkt verbirgt einige sehr interessante Funktionen. Alle hier untergebrachte Funktionen haben etwas mit Bildern und Grafiken zu tun. Man kann die Grafiken ausblenden, die Pfade, Ausmaße, Dateigröße und die Inhalte der alt-Attribute ausgeben lassen. weiterlesen…

Web Developer Toolbar 1

Von Vladimir am 08. September 2008 um 21:27

Das hier wird der Start einer dreiteiligen Serie sein, in der ich die sehr mächtige und umfangreiche "Web Developer Toolbar" vorstelle. Hier geht es weiter zum zweiten und zum dritten Teil der Serie.

Web Developer Toolbar

Web Developer Toolbar

Die Web Developer Toolbar von Chris Pederick ist die Mozilla-Erweiterung und das Webwork-Tool welches ich am meisten nutze und ohne welches ich mir meine tägliche Arbeit als Webworker nicht vorstellen kann und auch nicht mehr vorstellen möchte.

Bei der Web Developer Toolbar handelt es sich um eine Erweiterung für die Browser der Gecko-Familie und zwar für Mozilla Firefox, für SeaMonkey und für Flock. Chris arbeitet schon seit 2003 an dieser Erweiterung und momentan ist die Version 1.1.6 aktuell. weiterlesen…

Passwort-Generator

Von Thordis am 03. September 2008 um 11:46
sicheres Passwort erstellen

sicheres Passwort erstellen

Nicht nur online kann man sich ein Passwort generieren lassen, auch ein Firefox-Addon hilft dabei. Das Addon mit dem Namen SecurePassword Generator ist nach der Installation über das Extra-Menü im Browser aufrufbar.

Dort kann man sich mit einem Klick ein Passwort generieren lassen und dies in die Zwischenablage kopieren. Witzig ist dabei, dass man bestimmen kann, ob man das Passwort beim späteren Tippen mit dem 10-Finger-System mit beiden Händen oder nur mit einer Hand eingeben kann bzw. möchte – allerdings scheint hier die US-amerikanische Tastaturbelegung zu Grunde zu liegen, ist also für "deutsche" Tastaturen nur bedingt richtig. Außerdem kann man sich hier für ein Passwort entscheiden, dass nur aus Buchstaben besteht, also keine Sonder- oder Satzzeichen beinhaltet.

Einstellungen: sicheres Passwort

Einstellungen: sicheres Passwort

Bei den Einstellungsmöglichkeiten auf dem Register «Character» kann man grundsätzliche Einstellungen machen. Wieviele Zeichen soll das Passwort haben und wie soll die Gewichtung zwischen Buchstaben, Zahlen und sonstigen Zeichen verteilt sein. Man hat sogar die Möglichkeit bestimmte Zeichen auszuschließen.

Einziges Manko: wie merkt man sich das so erstellte Passwort?

XRAY: das Webwork-Bookmarklet

Von Vladimir am 03. September 2008 um 01:31
XRAY im Einsatz (Vorschaubild)

XRAY im Einsatz (Vorschaubild)

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

Von Vladimir am 02. September 2008 um 13:40
HTML-Validator in der Statusleiste

HTML-Validator in der Statusleiste

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.

HTML-Validator: Einstellungen

HTML-Validator: Einstellungen

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

Von Thordis am 02. September 2008 um 12:02
Clippings einfügen

Clippings einfügen

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.

Clippings organisieren

Clippings organisieren

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.

Suchen in Tabs

Von Thordis am 26. August 2008 um 16:40

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.

Standardsuche im Browser

Standardsuche im Browser

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.

Suchergebnisse in allen Tabs

Suchergebnisse in allen Tabs

FireShot – Screenshots erstellen und bearbeiten

Von Thordis am 25. August 2008 um 09:00

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

Generelle Einstellungen

Generelle Einstellungen

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…

Was sind Bookmarklets bzw. Favlets?

Von Vladimir am 20. August 2008 um 20:35

Meine erste Begegnung mit browserbasierten Webwork-Tools passierte vor gut 6-7 Jahren in Form von Bookmarklets oder Favlets, wie manche sie damals auch nannten. Doch was sind Bookmarklets? Im Grunde genommen handelt es sich hierbei um Browser-Lesezeichen die nicht eine Website aufrufen sondern eine Aktion starten. Diese Aktion ist in Javascript geschrieben und man könnte die Bookmarklets auch als Browser-Makros titulieren (siehe auch Wikipedia).

Ich kann mich noch erinnern, damals waren die Bookmarklets großes Kino und schon bald gab es Sammlungen, die jede Menge von solchen angeboten haben.

Auch wenn die Bookmarklets ihre Stellung im Bereich Webdeveloping zu Gunsten von ausgewachsenen Tools (Firebug, Web Developer Toolbar etc.) eingebüßt haben, finden sich heute dennoch sehr viele von denen im Einsatz, z.B. um Lesezeichen in del.icio.us oder bei Mister Wong abzulegen, schnell einen Artikel in WordPress zu schreiben u.v.m.

Und warum schreibe ich jetzt diesen kurzen Anfänger-Beitrag? Ich habe vor, einige interessante Bookmarklets vorzustellen und da möchte ich nicht in jedem Beitrag, die Bookmarklets neu erklären müssen.

Blindtext-Generatoren

Von Thordis am 19. August 2008 um 12:00

Unter einem Blindtext versteht man einen Text, der als Platzhalter auf einer Seite (Print oder Online) eingefügt wird, um das Layout besser beurteilen zu können, bevor der eigentliche Text eingefügt wird. Er kann auch zur Überprüfung der Lesbarkeit einer Schriftart dienen oder zum Vergleich von mehreren Schriftarten.

Liegt das hauptsächliche Ziel bei der Benutzung eines Blindtextes auf der oben angesprochenen Lesbarkeit einer Schriftart, so empfiehlt es sich einen Blindtext mit Panagrammen zu benutzen. Bei einem Panagramm handelt es sich um einen Satz, der alle Buchstaben des Alphabets enthält.

Der bekannteste Blindtext "Lorem ipsum" ist gleichzeitig ein lateinisches Panagagramm.

Im Internet sind eine Reihe von Blindtextgeneratoren zu finden, die zwei (in meinen Augen) schönsten und auch funktionell die Besten sind die folgenden: weiterlesen…

Archiv: «« 1 2 3 4 5 6 7 8 »»