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):
Dica: Control + E para expandir o código HTML
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
Abaixo, um exemplo de uso do Zen em um campo do tipo Textarea (selecione a linha de exemplo e tecle Control + E):
| Sintaxe do Zen Coding (coisas para experimentar) |
|
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
