em
Zen Coding: Como escrever HTML/CSS mais rápido

Zen Coding: Como escrever HTML/CSS mais rápido

Zen Coding é um plugin, criado por Sergey Chikuyonok para Aptana, TextMate, Coda e Espresso, baseado em JavaScript (para o Aptana) ou Python (restante dos Scripts) que utiliza uma lógica avançada para a construção do HTML e CSS.

Vídeo (Objeto multimídia)

A idéia deste projeto é usar a lógica da sintaxe do CSS para escrever gandes blocos de código:

div#content.wide.column>h1+ul#nav>li.item$*5>a

O resultado da declaração acima você vê abaixo:

Para criar um novo documento XHTML Strict, basta digitar o seguinte código:

html:xs

Ele irá gerar o seguinte código:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    
    





Basta conferir a lista de elementos Zen dedicados a HTML, e também a lista Zen de seletores HTML.

Download

Comentários

  1. Estou planejando usar outras ferramentas de desenvolvimento (hj uso quase sempre o DW). Quem sabe esta seja uma boa alternativa…

    por Jônatan Fróes Responder
  2. Fala Pedro, blz?
    Ótima dica, realmente muito produtiva.

    Já baixei a versão para CODA e já estou estudando.

    Abraço.

    por Walter Vieira Responder
  3. Isso é demais, HTML já é simples o suficiente pra não precisar de ajuda pra escrever. Pra quem usa textmate tem os bundles nele que já ajudam no que precisa.

    por Guilherme Rambo Responder
    1. Ispertaummmm, pensa bem no que você falo…

      por Eric — Responder
  4. não entendi como faço a utilização dele… adorei a forma de escrever o html, mais como usa-lo não entendi! baixei e veio arquivos que fique perdido!

    por Evandro Ribeiro Responder
    1. Evandro,

      Após instalado o plugin, crie o bloco de código e de um Ctrl + , para que ele crie o bloco de código HTML final.

      por Pedro Rogério Responder
  5. putz, vão acabar me fazendo comprar um mac, ai meu bolso, po só funfiona no aptana pra ruinDOWS…

    por Renie Responder
    1. Renie,

      Descobri que existe também uma versão para o Dreamweaver CS4, você pode baixá-la aqui:

      http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.4.zip&can=2&q=

      por Pedro Rogério Responder
      1. boooooa vo testar a noite ( o coisa de nerd, ao inves de sair beber vai testar plugin hahaha )

        por Renie
  6. Baixei a versão para Dreamweaver e também Aptana para windows e não funcionou por aqui, se alguem tiver um resultado positivo no windows comenta aí…

    por tony kaique — Responder
    1. 1. Instalar a extensão no Dreamweaver,
      2. Reiniciar o Dreamweaver,
      3. Use: Commands>Expand Abbreviation. para ver funcionar a conversão da linka de codigo

      Como criar atalho do ZenCoding para Dreamweaver:
      Para criar o atalho Ctrl +,
      1. Edit > Keyboard Shortcuts
      2. Duplicar o atual conjunto de atalhos de teclado (o primeiro mini-ícone da esquerda no topo da caixa de diálogo)
      3. Expanda “Commands”
      4. Role para baixo para Expand Abbreviation
      5. Em “Press Key” selecione o ‘CTRL’, ‘. mas alguma tecla que queira usar como atalho, caso já exista alguma utilizada clique em ‘Change’ e de OK

      Eu preferi usar a tecla “CTRL + \” , pois além de próximas não estão sendo usadas em outro atalho

      por Fábio Sardinha — Responder
    2. e este é para o Aptana

      http://jyoseph.com/zen-coding-how-to-install-Aptana-Eclipse/

      por Fábio Sardinha — Responder
  7. Pois é Pedro, você pegou o Plugin, mas não ensinou como utiliza-lo. :(

    Abraços,

    por Alex Batista Responder
    1. ow nem precisa ensinar, o video eh auto explicativo ;)

      por Renie Responder
  8. como eu instalo ele no aptana?

    por Carlos Alan — Responder
    1. Carlos,

      Nesse link você pode ver um tutorial de como instalar o Zen Conding no Aptana: http://jyoseph.com/zen-coding-how-to-install-Aptana-Eclipse/

      por Pedro Rogério Responder
  9. Descobri: http://www.hallofbrightcarvings.com/install-zen-coding-snippets-for-aptana/

    por Carlos Alan — Responder
  10. Pedro.. em todo projeto.. vou ter que usar essa pasta?

    por Carlos Alan — Responder
  11. Bakana!
    alguem sabe na onde tem “coda” versão windowns?

    por Mario Sérgio — Responder
  12. @Mario Sérgio

    Coda é apenas para MAC.

    por Miquéias — Responder
  13. Muito bacana este plugin em…. gostei demais.

    por Alexsandro Responder
  14. Sai a versão nova para Dreamweaver, mas ainda assim não estou conseguindo fazer funcionar, será que é pq estou utilizando a versão CS4?

    por tony kaique — Responder
    1. Tony,

      Utilizo o mesmo no Dreamweaver CS4 e funciona perfeitamente.

      por Pedro Rogério Responder
      1. Cara, depois de uma certa briga com o Dreamweaver, funcionou legal. Valeu a dica Pedro e também o Fábio Sardinha.

        por tony kaique —
  15. Cara, no meu DW CS4 não aparece a opção “Expand Abbreviation”. Já instalei várias vezes e reiniciei e nada aparece.
    Alguém sabe se tem algo que possa ser feito ?

    Valeu!

    por Felipe Brito Responder
  16. Só uma duvida… alguem teve o seguinte problema no aptana:

    Instalo e funciona normalmente no entanto algumas das letras que são utilizadas pelo script, scripts > zen coding, não funcionam na hora de escrever o codigo para isso tive que mudar a chave http://docs.aptana.com/docs/index.php/Eclipse_Monkey_scripting_with_Ruby#Adding_metadata_to_your_script apenas para saber se alguem passou por isso.

    por Mauro George — Responder
  17. Esse tal de Aptana é o que? Um plugin para o Eclipse? No site deles http://www.aptana.org/php esta falando que o Aptana PHP não esta mais incluído no Aptana Studio 2.0 e agora só esta disponível o Eclipse PDT (PHP Development Tools) , tem como eu instalar o plugin Zen Coding no eclipse usando o PHPDT?

    por Jonnathan — Responder
  18. Consegui fazer funcionar no DW 8.

    por Julio Fagundes Responder
  19. Para este plugin funcionar, e aparecer as opções no dreamweaver cs4, não é só instalar, é tambem necessario ativa-lo no gerenciador de extenções, basta “ticar” o zen coding instalado. flws.

    por Temístocles — Responder
  20. Pra quem for fã do notepad++ tbm existe esse plugin pra ele agora \o/

    por Renie Responder
  21. Muito bom cara, já estou usando…

    Valeu pela dica!

    Absss

    por Diego — Responder
  22. Produtividade a mil! :)

    por Pedro Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>