Zen Coding- HTML кодинг со скоростью света.



Zen Coding - HTML-кодинг со скоростью света


Веб‐страницы содержат множество повторяющихся атрибутов и тегов. Хотя объем набираемых символов можно частично сократить за счет виртуозного владения техникой копипастинга, или автодополнения в вашей любимой среде разработки, все равно при верстке придется на славу поработать руками. Zen Coding же позволит свести стук пальцев по клавиатуре к абсолютному минимуму и на порядок увеличить скорость кодинга.

Zen Coding представляет собой набор плагинов, подключаемых к популярным текстовым редакторам и средам разработки. Скорость верстки растет за счет того, что он умеет разворачивать небольшие выражения в готовые HTML‐конструкции.
Например, строку «div#page>div.logo+ul#navigation>li*5>a» Zen Coding превратит в

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Можно даже получить целую страницу из нескольких десятков символов: «html:xt>div#header>h1#logo+ul#nav>li.item-$*5>a» станет

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
<h1 id="logo"></h1>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</body>
</html>

На первый взгляд кажется, что для применения Zen Coding придется изучать еще один язык разметки, но это не так: синтаксис используемых выражений напоминает css‐селекторы, с которыми должно быть знакомо большинство вебмастеров.
Zen Coding официально поддерживает следующие продукты:

  • Aptana/Eclipse
  • TextMate
  • Coda
  • Espresso
  • Komodo Edit/IDE
  • Notepad++
  • PSPad
  • Браузерные редакторы textarea и editArea

Плагины от сторонних разработчиков существуют для:

  • Dreamweaver
  • Sublime Text
  • UltraEdit
  • TopStyle
  • GEdit
  • BBEdit/TextWrangler
  • Visual Studio

С полным списком возможностей Zen Coding можно ознакомиться, посмотрев следующее видео:






Bookmark and Share
Поделиться В Моем Мире Поделиться ВКонтакте

Понравилась эта запись? Подпишитесь на обновления NuffStuff по RSS, следите за блогом в Twitter, присоединяйтесь к нам на Facebook или получайте новые материалы на e‐mail.


Похожие записи

Вы можете оставить комментарий или трекбек со своего сайта.

Ответить

Получайте обновления по email Следите за блогом в Twitter Подпишитесь на RSS




Понравилась эта запись? Подпишитесь на обновления NuffStuff по