Zen Coding: Como escrever html e css em alta qualidade
Veja neste artigo como você pode melhorar de forma considerável o tempo de desenvolvimento de seus projetos com a utilização do Zen Coding.
Salve, salve, galera do linha de código. Vamos imaginar o seu chefe ou coordenador todos os dias perguntando quando o projeto vai ser entregue e pedindo uma maneira rápida para você ganhar tempo no desenvolvimento front-end. Em resumo, pedindo o famoso "pastel client-side", rsrs. E aproveitando essa oportunidade lanço a campanha no twitter #ñSouPasteleiroDev.
O que é Zen Coding?
Zen Coding é um plugin para editores de html e css como o notepad++, sublime text 2, Aptana, Komodo Edit e muitos outros. No artigo de hoje, será explicado o funcionamento do plugin.
Através de abreviações simples, podemos criar expressões que são similares à CSS seletores e com uma linha de comando apenas, podemos criar uma estrutura para um menu com submenu em html, estruturar as novas tags do html5 dentro da página e muitos exemplos que acontece no dia-a-dia do front-end e back-end. Codificar diferentes linguagens nunca foi tão simples e rápido. Uma ferramenta importante para o desenvolvimento de aplicações web.
Atualmente o Zen Coding suporta as linguagens: CSS, HTML, XML / XSL e HAML via filtros. Com uma lista de editores que suporta o plugin Zen Coding: Aptana, Zend Studio, Eclipse, TextMate, Coda, Komodo Edit/IDE, Notepad++, Sublime Text 2, Dreamweaver e Netbeans.
IMPORTANTE: Todos os exemplos criados abaixo no Sublime Text 2. Para executar uma linha de expressão do plugin Zen Coding no editor, copie e cole no editor o exemplo, div>main>ul>li*3 e no final de cada linha um TAB para imprimir.
Com o conhecimento do Zen Coding você vai:
Codificar e editar linguagens mais simples;
Otimizar o tempo de realização da sua aplicação web;
Listagem 1: exemplo de abreviação em html, com expressão compilada.
//Expressão certa:
//Expressão errada:
/* Dica: Se existir espaços na sua expressão, não vai funcionar corretamente.
Nesse caso o plugin vai identificar separadamente cada elemento e compilar.
Lembre-se de olhar cada abreviação antes compilar. */
/* html compilado */
Abreviatura de #ninjaHTML
Listagem 2: exemplo com os atributos ID e CLASS.
Listagem 3: exemplo de atributos personalizados.
table#tabela[cellpadding="0" cellspacing="0"]>tr>td[colspan="2"]
<table id="tabela" cellpadding="0" cellspacing="0">
Listagem 4: exemplo de multiplicação de elemento.
Listagem 5.1: numeração com caractere $, será trocado pelo número especificado na multiplicação.
Listagem 5.2: caractere $ múltiplos na expressão são usados como zeros.
Listagem 6: exemplo de grupos de expressões ilimitado em uma única linha.
Listagem 7: exemplo de abreviatura com texto, declare {} e dentro coloque o texto.
a[title="Clique Aqui"]{clique aqui para avançar}
<a href="" title="Clique Aqui">clique aqui para avançar</a>
Abreviatura de #ninjaCSS
Dica: Baseado em especificação CSS nível 3.
Para um melhor entendimento das abreviaturas para css, acesse o link
Listagem 8: Exemplos de regras especiais e algumas propriedades que normalmente são usadas.
Listagem 9: Exemplo de funcionamento do HTML com Zen Coding
<a href="" title="logotipo"></a>
Assista o vídeo: Esse vídeo foi criado por Sergey Chikuyonok, um desenvolvedor front-end. Defensor da otimização de tempo no processo de trabalho com desenvolvimento web.
Concluo aqui este artigo cujo objetivo foi apresentar o plugin Zen Coding e mostrar exemplos do funcionamento do ZC, uma ferramenta para otimizar o desenvolvimento e tornar mais simples o trabalho do front-end.
Vinicius Moraes - Desenvolvedor Front-end. Conhecimentos em HTML5, Responsive Design, JavaScript, jQuery, CSS3, PHP, SEO e defensor dos padrões W3C. Trabalhou em projetos como: Kasinski e ThreeBond.