Zen Coding: Agilizando o desenvolvimento de interfaces

Posted by Gilson Filho on Qui 20 janeiro 2011

Olá pessoal,

Desenvolver páginas HTML e folhas de estilo é um saco, principalmente quando você precisa desenvolver o front-end de um módulo para ontem. Com isso, o Sergey Chikuyonok criou o que chamamos de Zen Coding, que são scripts que a partir de abreviações, automaticamente ele gera tags HTML (e também os seletores dentro dessas tags), XML e XSL.

Nesse post de hoje, irei mostrar como fazer para usar essa ferramenta e suas abreviações usadas.

Instalação

O Zen Coding tem vários scripts para vários editores, como:

  • TextMate;

  • Coda;

  • Espressos;

  • Notepad++;

  • Dreamweaver;

  • Sublime;

  • UltraEdit;

  • Netbeans;

  • Gedit;

  • Vim;

  • e outros.

Para isso você vai neste site, e lá terá vários pacotes, e com isso faça o download conforme a IDE que você usa. Em relação ao VIm e ao Gedit, os plugins são esses:

Plugin Zen Coding Gedit: https://github.com/mikecrittenden/zen-coding-gedit

Plugin Zen Coding Vim: http://www.vim.org/scripts/script.php?script_id=2981

Abreviações

Com o plugin instalado na sua IDE ou editor, você terá que inserir abreviações que representam as tags que deseja inserir no seu documento (X)HTML, XML ou XSL.

Lembrando que foco desse post é ensinar a usar as abreviações do HTML.

No (X)HTML você tem dois tipos de abreviações: Elementos e Seletores. Vamos detalhar cada uma delas.

Abreviações de Elementos

Essas abreviações representam as próprias tags do (X)HTML. Por exemplo, eu quero criar a tag html de forma mais rápida:

html

E então, o Zen Coding vai gerar isso:

<html></html>

A ferramenta verificou a abreviação que você inseriu era para gerar as tags html. Mas como fez isso? Aí depende do plugin que você instalou, ou seja, cada IDE tem seu respectivo atalho. Você insere a abreviação e depois clica na ação do Zen Coding ou então invoca o atalho desta.

Abaixo estão outros exemplos:

  • Criar uma tag html, inserir o head e do body dentro:

    html>head+body

Analisando essa expressão você vai ver que tem mais de uma abreviação. O caracter ">" é usado para gerar uma tag, que seria o head, dentro de html. O caracter "+" server para inserir uma tag do lado da outra. Com isso a tag head, estará do lado da tag body.

Feito isso ele irá gerar essas tags:

<html>
    <head></head>
    <body>
    </body>
</html>

Agora eu quero inserir o cabeçalho de um documento XHTML por exemplo. Eu insiro a seguinte abreviação:

html:xml

E então ela vai me gerar isso:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>

Tudo bem, isso não agiliza muito as coisas. Mas se fizer isso, já economizaria um tempinho ;)

html:xs

Depois de inserir a abreviação acima, clique no item do menu da ferramenta da sua IDE (ou pelo atalho) para o Zen Coding verificar a expressão e gerar isso:

<!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>

E finalmente, para HTML 5:

html:5




<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>

</body>
</html>

Nesse link possui todas as tags existentes.

Abreviação de Seletores

Essas abreviações são usadas para você inserir seletores CSS nas tags como também atributos. Veja os exemplos:

  • Inserir uma id na tag div:

    div#name

  • Inserir uma classe na tag p:

    p.classe

  • Inserindo um id e uma classe na tag div:

    div#nome.classe01

  • Inserindo um id e duas classes na tag ul:

    ul#menu.classe01.classe02

  • Inserindo um atributo na tag p:

    p[title]

Nesse link possui todos os seletores usados.

Abaixo possui um vídeo do próprio criador, mostrando como usar o Zen Coding:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Então é isso pessoal. Até mais!



Comments !