Webstammtisch Oldenburg

Das Thema "CSS-Umsetzung" wurde kurzfristig auf "Zen Coding" geändert (mit Berücksichtigung von CSS bzw XHTML).

In diesem Artikel noch einmal eine kurze Zusammenfassung.

Zen Coding ist eine "Erweiterung" für Editoren die sogenanntes "High-Speed" Programmieren bzw. Editieren erlaubt. Es ist eine umfangreiche Abkürzungsroutine die es dem Programmierer erlaubt Ausdrücke - ähnlich CSS Selektoren - in HTML Code zu erweitern.

Beispiel:

div#page>div#wrapper>div#header+div#left#div#content>img+h1+p.bodycontent

kann erweitert werden zu:

<div id="page">
	<div id="wrapper">
		<div id="header"></div>
		<div id="left"></div>
		<div id="content">
			<img src="" alt="" />
			<h1></h1>
			<p></p>
		</div>
	</div>
</div>

Zen Coding hat eine modulare Struktur welche eine Erweiterung auf andere Sprachen erlaubt. Im Augenblick unterstützt Zen Coding CSS, HTML, XML,XSL und HAML über sogenannte Filter.

Folgende Editoren werden zur Zeit offiziell unterstützt:

• Aptana/Eclipse (Crossplatform)
• TextMate (Mac)
• Coda (Mac)
• Espresso (Mac)
• Komodo (Crossplatform)
• Notepad++ (Windows)
• PSPad (Windows)
• <textarea>
• editArea (Browser)
• CodeMirror (Browser)

Über Dritthersteller-Plugins unterstützt werden

• Dreamweaver
• Sublime Text
• Sublime Text 2
• UltraEidt
• TopStyle
• GEdit
• BBEdit/Textwrangler
• Visual Studio
• EmEditor
• Sakura Editor
• NetBeans
• Chrome Extensions
• Userscript for Greasemonkey
• Geany
• RJ TextEd
• AkelPakd
• WIODE web-based IDE
• BlueFish

Inoffizielle Implementierungen:

• IntelliJ IDEA/Webstorm/PHPStorm
• Emacs
• Vim
• ReSharper

Hier noch ein paar Links zur Vertiefung des Themas:

ZenCodingCheatSheet.pdf
Wiki Seite
Coding Smashing Magazine mit Video

Espresso mit Zen CodeErweiterung um AuswahlEspresso Menü