Zen Coding: codificando HTML rapidamente

Há algo de novo em termos de programação HTML. O Zen Coding promete ser um modo bem rápido de criar código HTML. E apesar de se mostrar um ...

Há algo de novo em termos de programação HTML. O Zen Coding promete ser um modo bem rápido de criar código HTML. E apesar de se mostrar um pouco estranho no começo. É bem rápido de se aprender.



Vídeo demonstrando as potencialidades do Zen Coding

Abaixo, um exemplo de uso do Zen em um campo do tipo Textarea (selecione a linha de exemplo e tecle Control + E):

div#pagina>div.logo+(ul#navegacao>li*5)+a[href=http://blog.brasilacademico.com]
Dica: Control + E para expandir o código HTML

Sintaxe do Zen Coding (coisas para experimentar)

E Nome do elemento (div, p); E#id Elemento com identificador (div#content, p#intro, span#error); E.class Elemento com classes (div.header, p.error.critial). Você pode combinar classes e IDs, também: div#content.column.width; E>N Elemento filho (div>p, div#footer>p>span); E+N Elemento em sequência (h1+p, div#header+div#content+div#footer); E*N Multiplicação de elementos (ul#nav>li*5>a); E$*N Numeração de itens (ul#nav>li.item-$*5);

Desde que foi criada, a linguagem HTML sofreu poucas alterações na forma de se implementar páginas de hipertexto.
Ou o usuário edita as tags "na raça", através de editores de textos como o "visual" Notepad. Ou há alguma forma de interação "WYSIWYG", onde o usuário desenha a tela e o software converte o desenho nos comandos HTML correspondentes (ou um mix das duas formas).

Como professor, procuro fazer com que os discentes se ocupem da primeira forma. A fim de desenvolverem um senso técnico apurado, em que eles sintam que colocaram a "mão na massa" em laboratório e com isso internalizem os comandos de modo profundo.
Mesmo que venham a utilizar softwares geradores de código no futuro, o conhecimento do que ocorre no código gerado será permanente. A ponto de ser possível fazer uma análise e se determinar se é melhor utilizar esse ou aquele editor. Ou mesmo se um determinado produto embute lixo no código-fonte.



Dessa forma, ao descobrir o projeto Zen Coding, percebi uma alternativa que poderá acelerar o processo de codificação da linguagem, mas sem dispensar um conhecimento de HTML mais rebuscado. Sem acrescentar no aprendizado os vícios do uso de wizards e outras ferramentas facilitadoras.

Como pode ser visto no exemplo no vídeo, o Zen é uma forma de se escrever código HTML através de uma linguagem feita para ser compacta. Ele é configurada através de um plugin inserido em um editor de texto que se encarrega de descompactar os comandos convertendo-os em código HTML tradicional.

Contudo, o Zen nos dá apenas a estrutura básica da página, dependendo do programador para configurar cada tag, com suas propriedades e valores, e inserir os dados para preencher os blocos de texto.

O Zen Coding está disponível para vários editores de HTML, ainda que parcialmente por alguns. Sendo suportado plenamente no Notepad++ existindo até mesmo uma versão para o Dreamweaver.



A ideia de usar abreviações similares àquelas usadas nos seletores CSS foi proposta por Vadim Makeev (artigo em russo) em abril de 2009. Daí nasceu o Zen Coding que vem sido desenvolvido desde então por um grupo de programadores e agora atingiu um patamar mais estável.

Para experimentar, digite um código Zen no campo acima (simplesmente tecle Control + E ao final da linha para expandir o código de exemplo) ou vá até a página oficial do Zen Coding e baixe os plugins para seu editor de HTML (caso seja suportado) e acesse os demos. Lá você terá mais informações sobre o projeto, dicas de como implementar seus próprios comandos na linguagem e acesso às novas versões.

Para conhecer os comando suportados veja a lista completa aqui.

Fonte: Smashing Magazine