Webwork-Tools - Dem Webworker seine Werkzeugkiste



Kostenlos: HTML- und Grafikeditor von Microsoft

Von Vladimir am 02. Januar 2013 um 17:23

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

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

Expression Web im Einsatz

Expression Web im Einsatz

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

Von Vladimir am 11. Dezember 2012 um 14:32

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.

CSS-Code übersichtlicher darstellen

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

Von Vladimir am 06. April 2011 um 10:12

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.

prefixMyCSS

prefixMyCSS im Einsatz

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.

Kommentare deaktiviert

CSS 3.0 Maker: ein weiterer Generator

Von Vladimir am 28. August 2010 um 09:55

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

CSS 3.0 Maker

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.

Kommentare deaktiviert

WeBuilder: leistungsfähiger XHTML- und CSS-Editor

Von Vladimir am 19. Mai 2010 um 09:15

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.

WeBuilder im Einsatz

Die Drei-Fenster-Ansicht vom WeBuilder *

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

Von Vladimir am 30. April 2010 um 13:28

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

CSSDesk

CSSDesk im Einsatz

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

Von Vladimir am 12. April 2010 um 15:49

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

CSS3-Generator im Einsatz

CSS3-Generator: abgerundete Eckene erstellen

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

Von Vladimir am 09. Februar 2010 um 00:27

CodeBurner-Logo 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

Von Vladimir am 22. Januar 2010 um 15:05

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:

PrimerCSS im Einsatz

PrimerCSS generiert eine CSS-Datei

Nicht revolutionäres, aber dennoch sehr hilfreich.

CSS Usage: welche CSS-Regeln kommen zum Einsatz?

Von Vladimir am 17. Dezember 2009 um 14:14

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.

Firebug: CSS Usage im Einsatz

Firebug: CSS Usage im Einsatz

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.

Archiv: 1 2 »»