Ebben a bejegyzésben megismerkedünk egy olyan megoldással, ami hihetetlenül felgyorsítja a HTML és CSS programozást. Akár egyetlen sor “Zen Code“-al leprogramozhatunk egy egész layoutot. Érdekes nemde? A cikkben láthattok egy videót is, amely tökéletesen szemlélteti a plugin képességeit.
Cikkünk a hirdetés után folytatódik!
Lényegében a program lerövidíti az eredeti HTML és CSS kódokat. Tehát, elég csak a rövidített kódot beírni, lenyomni a megfelelő gyorsbillentyűt (alapértelmezetten: Ctrl+,) és megkapjuk a kívánt eredményt. Mutatok egy példát:
A következő eredményt szeretnénk kapni,
1 2 3 4 | <div id="content"> <h1></h1> <p></p> </div> |
ehhez elég csak ezt a rövid kódot beírni,
div#content>h1+p
A következő videó tökéletesen szemlélteti a Zen Coding képességeit.
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.
Demo és Letöltés
Demo
- Online Demo (használd a Ctrl + , billentyűkombinációt az érvényesítéshez, JavaScript szükséges)
Letöltés
A Zen Coding csak bizonyos programok alá érhető el, név szerint a következőkre:
- NetBeans Zen HTML 1.2
- SlickEdit Zen Coding 1.0
- Sublime Zen Coding 1.1.4
- TextMate Zen CSS 1.3.1
- TextMate Zen HTML 1.3.1
- TopStyle Zen Coding 1.1
- UltraEdit Zen Code 1.0
- WebIDE and IntelliJ IDEA Zen CSS 1.0
- WebIDE and IntelliJ IDEA Zen Coding 1.0
- WebIDE and IntelliJ IDEA Zen HTML 1.0
- Zen Coding for TextMate v0.3.1 (windows alatt az E-Texteditorral is használható)
- Zen Coding for Dreamweaver v0.5
- Zen Coding for Aptana v0.5.1
- Zen Coding for textarea
Én a Dreamweaver verziót használom és tökéletesen működik. A .mxp kiterjesztésű fájlt könnyen telepíthetjük az Extension Manager programmal. A következő Dreamweaver indítás után már használhatjuk is.
Billentyűparancsok és a Rövid Kódok
Billentyűparancsok
Ezek az alapértelmezett parancsok, programtól függően meg tudjuk őket változtatni. Dreamweaverben például az Edit / Keyboard Shortcuts menüben.
gyorsbillentyűk beállítása
- Ctrl+, – a rövid kód futtatása
- Ctrl+M – elemek kijelölése (belülről kifelé)
- Ctrl+H – rövid kód beviteli mező megnyitása
- Shift+Ctrl+M – sorok egyesítése
- Ctrl+Shift+Balra – előző szerkesztési pont
- Ctrl+Shift+Jobbra – következő szerkesztési pont
Rövid Kódok
A rövidített kódok listái, itt megtalálhatjátok az összes használható parancsot.
- HTML elements and its aliases for Zen HTML plugins
- Selectors and aliases for Zen HTML plugins
- CSS-properties and its aliases for Zen CSS plugins
Zárszó
Ha kipróbáljátok szerintem tetszeni fog mindenkinek. Én nagyon szeretem használni. Ráadásul ingyenes is, hát kell ennél több? :)
Szólj hozzá!