Webwork-Tools - Dem Webworker seine Werkzeugkiste

Kostenlos: HTML- und Grafikeditor von Microsoft

Microsoft hat die Entwicklung des Programmpakets Microsoft Expression eingestellt und gleichzeitig zwei wichtige Komponenten aus diesem Paket zum kostenlosen Download bereitgestellt:

• Expression Web: ein Editor für HTML-, CSS-, PHP- und ASP-Dateien
• Expression Design: ein Programm um Grafiken zu bearbeiten

Über Expression Design kann ich nicht viel sagen außer, dass man Dateien aus Photoshop, Illustrator und PostScript-Dateien importieren kann.

Expression Web ist auf jeden Fall einen Blick wert und zwar nicht nur für leute, die auf der Suche nach einem neuen oder einem kostenlosen Editor sind.

Dadurch dass man eine ordentliche WYSIWYG-Ansicht hat, die über eine Rechtschreibprüfung verfügt und sonst den Quelltext in Ruhe lässt, eignet sich dieser Editor auch hervorragend, wenn man HTML-Dateien bearbeiten muss, die über viel Inhalt verfügen.

Das wären nicht nur lange Texte sondern auch E-Books. Schließlich basieren sowohl die EPUBs als auch das Kindle-Format auf (X)HTML. Siehe dazu auch meine Anleitung: E-Books für Amazon Kindle erstellen und veröffentlichen.

Auf jeden Fall ist das ein sehr netter Schritt von Microsoft.

Mit ProCSSor den CSS-Code übersichtlicher darstellen

ProCSSor ist ein Online-Tool mit dem man den CSS-Code übersichtlicher darstellen kann … oder es mal einfacher auszudrücken: damit kann man den Code "hübscher" machen.

Den CSS-Code kann man auf drei Arten angeben: direkt per Copy & Paste, in dem man eine Datei hochlädt oder in dem man auf eine URL verweist. Anschließend kann man nach mehreren Kriterien die Ausgabe sortieren. weiterlesen…

Zwei CSS3-Generatoren für Vendor-Präfixe

Wer häufiger CSS3-Eigenschaften wie zum Beispiel border-radius nutzt, der muss neben den originalen Angaben auch die Angaben der einzelnen Browser-Hersteller kennen, die durch einen Präfix eingeleitet werden. Aus border-radius wird dann -webkit-border-radius für Webkit-Browser (Safari, Google Chrome) und -moz-border-radius für Mozilla- bzw- Gecko-Browser (Firefox, SeaMonkey).

Wer sich die die Vendor-Präfixe nicht merken kann oder nicht merken möchte, der kann auf mindestens zwei Online-Generatoren zurückgreifen: CSSPrefixer und prefixMyCSS.

Beide Tools ergänzen CSS3-Eigenschaften um solche mit Vendor-Präfixen. Das prefixMyCSS bietet allerdings einen kleinen Vorteil: aktiviert man die Checkbox All in 1 line in der Mitte, dann wird der CSS-Code in einer Zeile ausgegeben, was für die Performance-Optimierung interessant ist, da es sich günstig auf die Größe der CSS-Datei auswirkt.

CSS 3.0 Maker: ein weiterer Generator

Ich habe im April einen CSS3-Generator beschrieben. Hier eine weitere Alternative: CSS 3.0 Maker.

Und was kann dieser CSS3-Generator?

• Border Radius: abgerundete Ecken
• CSS Transform
• Box Shadow: Box-Schatten
• Text Shadow: Text-Schatten
• Text Rotation
• RGBA
• @Font Face
• Outline Offset
• Transition
• CSS Gradient: Verläufe mit CSS

Mittlerweile zeigt auch dieser Generator nicht nur, welcher Browser was kann, sondern auch seit welcher bzw. in welcher zukünftiger Version er etwas können wird.

WeBuilder: leistungsfähiger XHTML- und CSS-Editor

Der WeBuilder * ist der Code-Editor, der mir schon seit fast fünf Jahren treue Dienste bei der Bearbeitung von XHTML-, CSS-, Javascript-, XML- und .htaccess-Dateien leistet. Bevor ich auf diesen Editor gestoßen bin, habe ich mehrere Wochen intensiv gesucht, getestet und recherchiert. Deswegen war ich sehr froh, als ich diesen Editor seinerzeit gefunden habe.

Auf der Website des Autors * gibt es neben dem WeBuilder auch die Geschwisterprodukte PHP Rapid *, HTMLPad * und CSS Rapid * zu kaufen. Die Produkte bauen aufeinander auf, wobei CSS Rapid das vom Funktionsumfang her kleinste Produkt ist. Es folgt der HTMLPad, dann PHP Rapid und schließlich der WeBuilder.

Letzterer bietet das Maximum an Funktionen. Die Preise sind vergleichsweise günstig und bewegen sich je nach Produkt und nach Lizenz zwischen knapp 20 und knapp 50 Euro. Auf der Vergleichstabelle * kann man schnell erfahren, welches Programm was kann und somit welche Anwendung für einen geeignet ist.

Der WeBuilder bietet eine Reihe von sehr nützlichen Funktionen und ein paar davon werde ich im Folgenden näher erklären: weiterlesen…

CSSDesk: Sandkastenspielchen mit CSS und HTML

CSSDesk ist ein Online-Tool und genauer gesagt ein "Sandkasten" wo man auf die Schnelle HTML und CSS-Regeln testen kann:

Zu dem Dienst gibt es nicht viel zu sagen. Links oben kommt das HTML, darunter die CSS-Angaben und rechts sieht man dann das Ergebnis.

Ganz oben kann man die Syntaxhervorhebung de-/aktivieren, Hintergrund auswählen, einen Permalink zu dem Kunstwerk generieren lassen oder man kann das ganze dann auch auf den eigenen Rechner herunterladen.

Das ganze ist zumindest in Firefox nicht sonderlich schnell und auch die Bearbeitung der einzelnen Codezeilen gestaltet sich sehr zäh, aber um ganz schnell etwas zu testen ist das Tool optimal.

Ach ja, wie erwartet funktioniert das Tool weder in Internet Explorer 6-8.

CSS3-Generator

Unter CSS3Generator.com findet man einen kleinen, aber feinen Generator, der verschiedene CSS3-Eigenschaften komfortabel erstellen kann.

Folgende Funktionen stehen zur Auswahl: Border Radius (abgerundete Ecken), Box und Text Shadow (Schlagschatten), RGBA, Multiple Columns (mehrspaltiger Text) und ein paar mehr. Bei allen Eigenschaften wird auch angezeigt, welche Browser dies auch unterstützen.

Wählt man Selectors aus, dann wird der Link zur CSS 3 selectors explained gezeigt, dort werden die neuen CSS3-Selektoren aufgelistet. Wählt man die Funktion Gradients aus, dann bekommt man einen Link zu einem anderen Generator wo man mit Hilfe von CSS3 Verläufe (engl. Gradients) erstellen kann.

Der Autor von CSS3Generator.com ist der Meinung das man das Rad nicht neu erfinden muss:

I was going to write a CSS gradient generator but then I found the CSS3 Gradient Generator which is does the job quite well.

Gefunden via @macx.

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.