Zen Coding — метод быстрого написания кода. Установка Zen Coding в Notepad++ и NetBeans
+6

В этой статье я расскажу об одном замечательном «инструменте», который окажется очень полезным как веб-программисту, так и верстальщику — Zen Coding. Zen Coding — это способ ускоренного написания кода HTML, XML, CSS и др. Zen Coding разрабатывается нашими соотечественниками, что не может не радовать. Zen Coding написана на Java и распространяется по лицензии MIT.

Простой пример использования Zen Coding при написании кода HTML:

пишем

div#menu>ul.menu>li.item*5>a

получаем

</pre>
<div id="menu"></div>
<pre>

Для использования Zen Coding разработчиками и участниками сообщества создано множество плагинов к известным текстовым редакторам.
На момент написания статьи доступны следующие плагины:

  • Zen Coding for Notepad++
  • Zen Coding for NetBeans
  • Zen Coding for Dreamveaver
  • Zen Coding for CodeMirror
  • Zen Coding for Coda
  • Zen Coding for Espresso
  • Zen Coding for TextMate
  • Zen Coding for PSPad
  • Zen Coding for e2 editor
  • Zen Coding for TopStyle
  • Zen Coding for UltraEdit
  • Zen Coding for Komodo
  • Zen Coding for Aptana
  • Zen Coding for SlickEdit
  • Zen Coding for Sublime
  • Zen Coding for WebIDE

Скачать плагин для любимого текстового редактора можно по ссылке.

Я опишу процесс установки плагинов Zen Coding for Notepad++ и Zen Coding for NetBeans. Это те инструменты, которые я использую в своей повседневной деятельности.

Установка плагина Zen Coding в Notepad++

Установка плагина Zen Coding в Notepad++ не сложнее, чем установка самого Notepad++:

  1. Переходим в меню Плагины > Plugin Manager > Show Plugin Manager
    Zen Coding для Notepad++
  2. В списке доступных плагинов отмечаем Zen CodingPhyton и жмем Install
    Zen Coding для Notepad++
  3. Если у вас еще не был установлен компонент Phyton Script, появится окно с информацией о том, что он будет установлен автоматически
    Zen Coding для Notepad++
  4. Дождитесь окончания загрузки и установки плагина
    Zen Coding для Notepad++
  5. Перезагрузите Notepad++ (OK)
    Zen Coding для Notepad++

Все, можно кодить! Быстро кодить!!!

Как использовать Zen Coding?

  1. пишем код с использованием синтаксиса Zen Coding
  2. жмем Ctrl+Alt+Enter (курсор должен находиться в конце строки)

Zen Coding для Notepad++

Установка плагина Zen Coding в Netbeans

  1. Скачать плагин Zen Coding для Netbeans от разработчика Lorenzos
  2. Перейти в меню Сервис > Подключаемые модули
    Zen Coding для Netbeans
  3. Перейти на вкладку Загружено и нажать Добавить подключаемые модули
    Zen Coding для Netbeans
  4. Выбрать в проводнике файл плагина и подтвердить выбор (ОК)
    Zen Coding для Netbeans

    Zen Coding для Netbeans

    Zen Coding для Netbeans

    Zen Coding для Netbeans

  5. Перезагрузить NetBeans
    Zen Coding для Netbeans

Все готово для продуктивной работы.

Как использовать?

  1. пишем код с использованием синтаксиса Zen Coding
  2. жмем Ctrl+Alt+N (курсор должен находиться в конце строки) или жмем кнопку «Z» на панели инструментов

Zen Coding для Netbeans

А теперь некоторые приемы работы с Zen Coding

Приемы работы с Zen Coding в HTML

  1. Шаблоны HTML

    html

    <html></html>

    html:4t

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title></title>
    </head>
    <body>
    	
    </body>
    </html>

    html:xs

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

    html:5

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	
    </body>
    </html>
  2. Мета

    head

    <head></head>

    title

    <title></title>

    style

    <style type="text/css"></style>
  3. Теги

    body

    <body></body>

    h1

    <h1></h1>

    a

    <a href=""></a>

    span

    <span></span>

    img

    <img src="" alt=""/>
  4. Селекторы Zen

    div#id

    <div id="id"></div>

    p.class

    <p class="class"></p>

    a.class.one

    <a href="" class="class one"></a>

    ul>li

    <ul>
    	<li></li>
    </ul>

    a+p

    <a href=""></a>
    <p></p>
    

    li*3

    <li></li>
    <li></li>
    <li></li>

    li.item-$*4

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

    ul>li.name-$*5

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

    ul+

    <ul>
    	<li></li>
    </ul>

Приемы работы в Zen Coding с CSS

На мой взгляд работа с использованием Zen Coding с HTML выглядит более впечетляющее чем работа с CSS. И с HTML легче все запомнить — как тег пишется, так и «произносится».
А в CSS сколько свойств — столько сокращений. Но если есть желание — это не помеха. Все равно, в конечном итоге процесс написания стилей будет быстрее с использованием Zen Coding, нежели метод полного ввода свойств и значений.

fl:l

float:left;

m:a

margin:auto;

bd+

border:1px solid #000;

Если вы заинтересовались, можете скачать полный CheatSheet по Zen Coding.

Хороший настроенный редактор — это хорошо! Но хорошее железо также имеет очень большое значение для удобства работы. Поэтому желательно временами обновлять комплектующие своей системы. В подборе оптимальной конфигурации компьютера вам поможет форум Pc-Forums.RU — ваш гид по ПО и компьютерным комплектующим.

+6
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: HTML, WEB-разработка теги: , , . Прямая ссылка на запись.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *