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:
a
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.
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.
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!
Eine Referenz über alle verfügbaren Plugins etc. findet Ihr direkt bei Google