Webwork-Tools - Dem Webworker seine Werkzeugkiste

CodeBurner: eine HTML- und CSS-Referenz

Eigentlich wollte ich über CodeBurner als Erweiterung von Firebug schreiben. Den Firebug habe ich bereits in einem anderen Artikel hier im Weblog beschrieben. Für diejenigen, die es nicht kennen: es handelt sich um ein sehr wichtiges Werkzeug für Webworker, welches vor allem bei der Suche nach Fehlern auf Websites (Debugging) hilfreich ist. weiterlesen…

PrimerCSS: IDs und Klassen aus HTML rauspicken

PimerCSS ist eine kleine webbasierte CSS-Anwendung, die aus HTML die ID- und Klassen-Attribute rauspicken kann und anschließend eine CSS-Datei mit den entsprechenden Selektoren generiert:

Nicht revolutionäres, aber dennoch sehr hilfreich.

CSS Usage: welche CSS-Regeln kommen zum Einsatz?

Ich habe gestern Firebug beschrieben: das Firefox-Addon, wenn es darum geht Fehler auf Websites zu finden und zu beheben. In dem gleichen Artikel habe ich auch erwähnt, dass Firebug auch Erweiterungen anzubieten hat. Eine davon mit dem Namen CSS Usage will ich jetzt kurz vorstellen.

Nach der Installation bindet sich die Erweiterung im Firebug-Menü ein. Wenn man dann auf einer Website den Knopf "CSS Usage" betätigt, dann listet die Erweiterung sämtliche CSS-Regeln auf.

Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden, werden in dunkelgrüner Schriftfarbe ausgegeben und rot sind die Regeln, die gar nicht zum Einsatz kommen. Um ein aussagekräftiges Ergebnis zu bekommen, muss man daher mehrere Unterseiten ansteuern.

Anschließend kann man die nicht eingesetzten CSS-Regeln manuell löschen oder sich mit einem Klick auf "export cleaned css" eine automatisch bereinigte CSS-Datei ausliefern lassen.

CSS-Prism: Farbwerte aus einer CSS-Datei rauslesen

CSS-Prism ist ein Online-Dienst welcher die Farben bzw. die Farbwerte aus einer CSS-Datei herauslesen kann:

Die herausgelesenen Farbwerte werden als anklickbare Farbbalken inkl. Farbwert aufgelistet. Klickt man auf so einen Farbbalken, dann gelangt man zu den einzelnen Farbwert mit zusätzlichen Infos ("in welcher Code-Zeile befindet sich der Farbwert?") und der Möglichkeit den Farbwert zu bearbeiten.

Das Tool liest automatisch die Farbwerte aus einer CSS-Datei und zwar entweder in dem man den vollständigen Pfad der Datei auf der Website eingibt oder in dem man das Bookmarklet benutzt welches auf der Website von CSS-Prism angeboten wird. Beim Benutzen des Bookmarklets reicht es, dass selbige zu benutzen wenn man sich auf der jeweiligen Website befindet. Das Bookmarklet präsentiert dann die Verweise zu den einzelnen CSS-Dateien, die im Quelltext referenziert wurden d. h. man muss den Pfad der CSS-Datei nicht kennen.

Hilfe bei CSS

Auch wenn man kein CSS-Profi ist, benötigt man vielleicht ab und zu Hilfe bei der Gestaltung von Texten. Ideal ist da die Seite CSS Type Set. Hier gibt man einfach einen Text ein und kann diesen dann mit Hilfe von Buttons und Eingabefeldern "verschönern". Und während dessen wird ("live") der benötigte CSS-Code ausgegeben, denn man im Anschluss per Copy & Paste in sein eigenes Dokument übertragen kann.

Ein Anfänger-Tool, aber ich denke es könnte dem ein oder anderen auf die CSSprünge helfen

Via Notizblog.de

BuzzBoost: Feed zu HTML von Feedburner

Der RSS-Dienst Feedburner bietet eine sehr interessante Funktion an, die sich BuzzBoost nennt. Diese Funktion findet man im Bereich "Publizieren" des eigenen Accounts. Diese Funktion "wandelt" das Feed (RSS, Atom etc.) der eingetragenen Website in HTML-Format um. Es stehen folgende Einstellungen zur Auswahl:

Die Optionen sind für alle Blog-Betreiber selbsterklärend und deswegen werde ich hier nicht näher eingehen. Wenn man die gewünschten Einstellungen getätigt und gespeichert hat, dann kann man sich entscheiden wie man das ganze auch einbindet. weiterlesen…

Codepad: ein schlanker Code- bzw. Texteditor

Bei Codepad handelt sich um einen schlanken, vielseitig einsetzbaren Codeeditor. Der Editor ist Freeware und es handelt sich um ein heimisches Produkt welches für Windows (98 bis Vista) verfügbar ist.

Der Editor ist ganze 1mb groß, belegt nach der Installation nicht viel mehr als 1mb auf der Festplatte und geht auch mit dem Arbeitsspeicher recht sparsam um so das der Editor, auch beim Bearbeiten von größeren Dateien, keine Probleme auf älteren oder kleineren Rechnern (z. B. Netbooks) machen sollte.

Was kann Codepad?

• Syntaxhervorhebung (Syntaxhihglightning) für 30 Skript- und Programmiersprachen
• Bindet sich in das Kontextmenü ein
• Beherrscht UTF (utf-8 und utf-16)
• Man kann auch selber Highlighter für Sprachen erstellen in dem man im Profilordner bestehende Dateien kopiert und umbennent
• Der Editor bietet auch ein Vorlagen-System
• und einiges mehr

Auf der Website des Autors wird auch darauf hingewiesen, dass man Codepad auch auf einem USB-Stick installieren und betreiben kann und dass er Codevervollständigung beherrscht. Was man genau machen muss um es auf dem USB-Stick zu betreiben und wie man die Codevervollständigung nutzt, konnte ich bis jetzt noch nicht herausfinden.

Bin wie üblich für Hinweise und Tipps dankbar.

Nachtrag: Danke an die Kommentatoren (Matthias und Mr. Test). Um Codepad auf dem USB-Stick zu betreiben muss man es einfach dort installieren und die Codevervollständigung bekommt man in dem man strg + Leertaste drückt.

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…

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.