Zen-HTML/CSS/Coding: Schneller, besser, cooler!

Zen-Coding ist der neuste Trend in Bezug auf effektives und schnelles HTML- und CSS Markup. Mittels Online-Editoren oder Plugins für bekannte Programme wie Coda, Textmate, Espresso oder Dreamweaver wird eine Kurzform für HTML und CSS geschrieben die anschließend automatisch in das gewünschte Markup umgewandelt wird.

Zen-Coding

Zen-Coding ist der Überbegriff für die beiden Bestandteile Zen-Html und Zen-CSS. Beide Teile greifen auf die neusten Versionen von HTML (HTML5) und CSS (CSS3) zurück und ermöglichen mittels deutlich kürzerer Eigenschaften sowie der Vergabe von Variablen einen deutlich beschleunigten Workflow.
Momentan ist Zen-Coding in Form von Plugins für folgende Online-Editoren verfügbar:

TextMate, Mac
Aptana, crossplatform
Coda, Mac
NetBeans, crossplatform
Espresso, Mac
Web IDE, crossplatform
TopStyle, Windows
Sublime Text, Windows
Dreamweaver, crossplatform

Quelle: Google Code

Zen-HTML

Damit Ihr einen besseren Eindruck bekommt wovon ich hier die ganze Zeit spreche, ein paar Beispiele für HTML-Markup mittels Zen Coding.

Zen-HTML:

Generiertes HTML-Markup:

<a href=""></a>

Zen-HTML:

li.classname-$*5>a

Generiertes HTML-Markup:

<li class="classname-1"></li>
<li class="classname-2"></li>
<li class="classname-3"></li>
<li class="classname-4"></li>
<li class="classname-5"></li>

Zen-HTML:

html:xt

Generiertes HTML-Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
 
</body>
</html>

Eine komplette Auflistung aller Zen-HTML-Eigenschaften findet sich auf Google Code.

Link: Zen-HTML-Properties

Zen-CSS

Ebenso wie für HTML funkionieren auch die CSS-Zen-Eigenschaften.

Zen-CSS:

fl

Generierter CSS-Code:

float:;

Zen-CSS:

bdt+

Generierter CSS-Code:

border-top:1px solid #000;

Zen-CSS:

op:ie

Generierter CSS-Code:

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

Eine komplette Auflistung aller Zen-CSS-Eigenschaften findet sich ebenfalls auf Google Code.

Link: Zen-CSS-Properties

Fazit und Online-Editor

Was hält man nun von sowas?! Für mich keine Frage: Es ist geil! Klar, man muss beide Coding-Sprachen quasi neu erlernen, aber wenn die neuen Begriffe einmal sitzen, dann dürfte alles deutlich schneller von der Hand gehen.
Wenn Ihr einmal ausprobieren wollt wie das Ganze in etwa funktioniert, dann schaut Euch einfach mal folgenden Online-Editor an bevor Ihr das Plugin installiert. Viel Spass!

Link: Zen-HTML Online Editor

Eine Referenz über alle verfügbaren Plugins etc. findet Ihr direkt bei Google

Link: Google Code – Zen Coding

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.

Dieser Beitrag wurde am 29. November 2009 in der Kategorie Coding, Scene-News, Web Trends, Webdesign veröffentlicht. Es wurden folgende Tags vergeben: Coda, CSS, Dreamweaver, Espresso, HTML, Textmate

5 Reaktionen auf diesen Beitrag

Thomas Borowski
29. November 2009, 21:24 Uhr
Von Zen Coding habe ich auch gerade letzte Woche zum ersten Mal erfahren. Mein erster Eindruck war auch: geil. Nur muss man sich nach jahrelangem Handcoding erstmal auf das neue System umstellen, und das dauert.

Etwas irritiert war ich zunächst von den Bundles für TextMate. Da Zen HTML z.B. die gleichen Trigger bzw. Shortcuts verwendet, wie das Original-HTML-Bundle, muss man sich für das eine oder andere entscheiden, da ansonsten bei jedem mehrdeutigen Shortcut ein Auswahl-Menü erscheint und das bremst den Arbeitsfluss zu stark.
Friedrich Schultheiß
1. Dezember 2009, 18:48 Uhr
Zen-Coding hört sich wirklich gut und v.a. zeitsparend an! Habe mir das Plugin sofort heruntergeladen.
Doch was mich noch interessieren würde… wie wandelt man nun eigtl. diese Kürzel in Code um? Bei diesem Punkt bin ich leider nicht ganz mitgekommen!
ta2edchimp
2. Dezember 2009, 17:10 Uhr
@Friedrich Schultheiß:
In der Regel gibt’s dann irgendwo (bspw. unter einem Menü namens “Commands” o.ä. – je nach verwendetem Editor) nen Befehl “Expand Abbreviations”, den du dir ggf. auf ein Tastenkürzel packen kannst.
Friedrich Schultheiß
4. Dezember 2009, 18:38 Uhr
Danke ta2edchimp, hat geklappt! ;-)
Zen-Coding – Cooler, schneller, besser? - Netzlogbuch
22. Dezember 2009, 16:10 Uhr
[...] Mehr Beispiele und Online-QUellen zum Thema Zen-Coding gibt es auf kulturbanause.de. [...]

Bitte kommentiere diesen Eintrag!

Dir hat dieser Eintrag gefallen, du hast Fragen, Anregungen oder Kritik? Hier ist Platz dafür. Jeder Kommentar wird ernst genommen und trägt zum Informationsgehalt meiner Seite bei. Also los!

kulturbanause blog