Zen Coding: codificando HTML rapidamente

Comentar

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.
Zen Coding


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

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.

Tatuagem HTML

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.

Camiseta com HTML falso

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

COMMENTS

BLOGGER: 2
  1. Muito boa as informações.
    Abraços forte

    ResponderExcluir
  2. Puxa, adorei! Já estou instalando no meu Notepad++...
    Seu blog tem muita coisa interessante, vou passar aqui mais vezes,com certeza!!!

    []s

    ResponderExcluir
Deixe suas impressões digitais aqui...

$show=mobile

Nome

#existepesquisanobrasil,1,A divulgar,2,Abelha,3,Acessibilidade,20,acessório,2,Acidente,48,Acidentes,2,Acústica,16,Adágios,1,Adestramento,5,Administração,26,adulto,1,Aerodinâmica,4,Aeronáutica,8,África,6,Agência Brasil,19,Agência Fiocruz,1,Agência Porvir,1,Agência Senado,1,Agência USP,4,Agricultura,4,Agropecuária,2,AIDS,1,AirBNB,1,Alcoolismo,7,Alemanha,3,Alerta,1,Algoritmo,8,Alimento,1,Alzheimer,4,Amazon,2,Amazônia,4,América Latina,1,Análise Combinatória,1,Anatomia,6,Android,3,Animação,47,Animais de Estimação,6,Animal,2,Antropologia,14,Apicultura,8,App,9,Apple,5,Apresentação,4,aquário,1,Argentina,4,Arqueologia,5,arquitetura,29,Arte,149,Astrobiologia,2,Astrofísica,3,Astronomia,24,Ativismo,26,Áudio,3,Audio FX,2,Áustria,1,Autismo,2,Auto-ajuda,10,Automobilismo,14,Automóvel,19,aventura,3,Aviação,5,Aviônica,8,Bahia,2,Balonismo,3,Banco Central,1,Banco de Dados,5,Beber e Dirigir,1,biblioteconomia,3,Bicicleta,1,Biografia,16,Biologia,157,Biologia Marinha,15,bioquímica,6,Biotecnologia,25,Bitcoin,2,Blog,29,Blogger,32,Boato,5,Bomba,1,borderô de desconto,1,Botânica,5,BRASA,1,BRASA Leads,1,Brasil,34,Brasília,14,BRIC,1,Browser,10,Bugs,3,CAD,3,Calor,2,Câmera lenta,1,Campanha,44,cardiologia,14,Carnaval,2,carreira,2,Cartografia,3,Casemods,1,Caso Isabella Nardoni,1,Caso Snowden,1,Ceará,1,Celebridades,6,celular,24,Células-Tronco,3,Cérebro,2,Charge,22,China,16,Cibercultura,2,Ciclovia,1,Cidadania,39,Ciência,183,Cinema,63,Clip,1,Cliparts,1,Cloud computing,4,Coaching,12,Comédia,2,competência,1,Complemento de dois,1,Comportamento,250,Computação,81,Computação em grade,5,Computação forense,3,Computação Gráfica,135,Computação Móvel,1,Comunicação e Marketing,131,Concurso,1,Concurso Cultural de Natal,1,Concursos Público,2,Concursos Públicos,3,Conectômica,1,Conferência,1,Congresso em Foco,1,Conspiração,2,Consumidor,7,Consumismo,3,contabilidade,2,Contos,46,Copa do Mundo,27,Cordel,3,Coreia do Norte,1,Coreia do Sul,1,Corpo,2,Coruja,1,cosmética,3,Cosmologia,21,Crash Course,1,Criança,1,Criatividade,3,Crime,46,Crime Digital,7,crise,11,crise econômica,8,crônica,5,crônicas,5,Cronologia,1,CSS,3,Cuba,4,Culinária,8,Cultura,9,Curiosidades,112,custos fixo,1,custos variáveis,1,Dança,6,DAO,1,Darwin,9,Davos,1,Debate,1,Decoração,1,demência,1,Demografia,3,Denúncia,10,Dermatologia,7,Desastre Natural,13,Descoberta,2,desconto duplicatas,1,Desenho instrucional,11,Desenvolvimento de jogos,8,Design,25,Design Instrucional,6,Destaque,25,Dia das Mães,1,Dia do professor,1,diabetes,6,Dicas,66,Didática,1,Dieta,3,diplomacia,3,Direito,174,Direito Eleitoral,1,Direito Internacional,28,Direito Trabalhista,1,Direito Tributário,2,Direitos Autorais,1,Direitos Humanos,37,Disney,5,Distrito Federal,2,Documentário,60,Doutorado,1,download,3,Drogas,7,Drone,3,Dubai,1,e-Book,2,e-governo,2,EBC,1,Ecologia,81,Economia,107,Editoração Eletrônica,1,Educação,332,Educação a Distância,143,Educação Corporativa,4,educação física,19,Educação sexual,6,Efeitos Sonoros,4,Egiptologia,1,Eleições,23,Eleições 2014,12,Eleições 2018,5,Eletricidade,9,eletrônica,3,Em Operários,1,Embrapa,1,empreendedorismo,6,enciclopédia,1,endocrinologia,5,Enem,3,Energia,14,Energia Alternativa,16,Energia Nuclear,11,Engenharia,62,Engenharia Agrícola,1,Engenharia Civil,4,Engenharia de materiais,13,Engenharia de Software,4,Engenharia Genética,30,Engenharia Mecânica,1,Enretenimento,1,Ensino a Distância,9,Ensino Superior,3,Entomologia,7,Entretenimento,41,Entrevista,85,Entrevista.,1,Epidemiologia,21,Epistemologia,1,Equador,1,Escândalo,5,Escritório,1,Espaço,65,Espanha,1,Espanhol,2,Espeleologia,1,Espetáculo,8,Espionagem,20,Esporte,39,Estação,1,Estágio,2,Estatísticas,32,estrutura de dados,1,Ética,23,EUA,14,Europa,2,Evento,37,Evolução,4,Exercícios físicos,2,Exobiologia,2,experiência,42,fábulas,3,Facebook,17,Farmacologia,8,Favo,1,Feminismo,1,Férias,1,Ferramentas,6,FIFA,2,Filantropia,4,Filmes,16,Filosofia,47,Finlândia,1,Fintech,1,Firefox,1,Física,103,Física Quântica,3,Fisiologia,7,Fisioterapia,6,Flagrante,2,Flamengo,1,Folclore,3,Fome,1,Fonética,1,Fonoaudiologia,6,Fotografia,40,Fotos em 360 graus,6,França,6,Francês,2,frases,2,Fraude,4,Freeware,67,Futebol,38,Futurologia,80,gadget,88,Gafe,2,Gamificação,5,Gastroenterologia,5,Gastronomia,2,Geek,1,Genética,38,Geofísica,1,Geografia,52,Geologia,10,Geometria,6,geopolítica,20,Gerenciamento do Tempo,1,Geriatria,10,Gestão de Competências,2,Gestão de Configuração,2,Gestão de Pessoas,3,Gestão de Projetos,17,Gestão do conhecimento,6,Ginecologia,3,Glass,1,Google,78,Governo,4,GPS,1,Gradiente,1,gramática,13,Gravidez,1,Grécia,1,Grécia Antiga,1,Guerra,35,Guerra Civil,2,Guinness,1,H2,2,Haiti,3,hardware,35,História,188,HIV,1,Hololens,2,homenagem,45,Horologia,1,HPV,1,HTML,6,Humor,209,Humor Negro,8,IBGE,2,IBM,4,ICIJ,2,Idioma,43,IHC,8,ilo,29,ilusão,34,ilusionismo,5,Imagem 3D,16,Imagens,6,Imagine Cup,1,Império Romano,5,Imprensa,33,Impressora 3D,16,Imunologia,2,Incêndio,2,Inclusão digital,8,Índia,3,Índios,1,Infectologia,16,Infográfico,47,Informática,38,Inglaterra,3,Inglês,22,Inovação,180,Inspiração,1,Inteligência Artificial,98,intercâmbio,1,Interface,188,Interfaces Hápticas,20,Internacional,22,Internacionalização da Amazônia,3,Internet,160,Internet das Coisas,2,Inundação,2,Invenção,20,Inventos,6,iPad,1,IPEA,1,iphone,3,Irã,3,Iraque,1,Israel,6,Japão,2,Java,2,Java.,2,jogos,9,Jogos educativos,13,Jogos Olímpicos,10,Jornalismo,69,Justiça,4,Kinect,10,Le Monde Diplomatique Brasil,9,Le Monde Diplomatique Brasil,1,Letras,1,Lexicografia,5,Liderança,3,Life Hacking,20,Linguística,9,Literatura,54,Livro,57,Lógica,25,Logística,4,Loterias,4,Lua,1,Maçonaria,4,Malásia,2,Malvinas,2,Malware,1,Mapa,68,Mário Sérgio Conti,1,Marte,2,Mastologia,1,Matemática,76,Matemática Financeira,1,maternidade,1,Mecânica,8,Mecânica dos Fluidos,2,Mecatrônica,46,Medicina,470,Medicina Esportiva,1,Medicina Veterinária,4,Meio Ambiente,104,Mel,1,melanoma,1,Memória,5,memorização,4,Mente,4,Mercado de Trabalho,70,mercosul,1,Mestrado,1,meteorologia,11,Metodologia Científica,44,México,1,Microbiologia,4,Microsoft,14,Mídia Social,54,Militar,14,Mineralogia,1,Mistério,2,MIT,12,Mitologia,2,Mobilidade,1,Mobilidade Urbana,9,MonaVie,1,Montanhismo,1,Moodle,7,Mossad,1,Motivação,1,Movimento Maker,1,MSF,1,Mudança Climática,20,Mulher,4,Multimídia,14,museu,10,Música,82,MVC,1,Nanotecnologia,33,Nasa,15,Natação,2,Natal,17,Natureza,1,Negócios,25,Netflix,1,Neurociência,83,Neurologia,77,Nicolelis,1,Nordeste,2,Noruega,1,notícias,8,Novidades,18,Novo Enem,2,Números,1,Nutrição,63,Obama,1,Obesidade,10,Observatório da Imprensa,26,Obstetrícia,3,Oceanografia,7,odontologia,7,Offshore Leaks,2,oftalmologia,11,Olimpíadas,7,oncologia,45,ONU,8,Opinião,92,Óptica,17,Oracle,1,Oriente Médio,5,Orkut,2,Ornitologia,1,ortografia,3,Ortopedia,3,Ótica,8,Otorrinolaringologia,1,Oxfam,2,Pacifismo,1,Paginadores,1,paleontologia,3,Paquistão,1,Pará,2,Paraguai,2,parkinson,2,Passeio virtual,1,Patinação,1,Pedagogia,1,Pediatria,6,Pensamentos,2,performance,2,Periférico,1,Pesca,2,Pesquisa,198,Petição,1,Petrobrás,9,Petróleo,12,Photoshop,5,Pirataria,7,planilha de custo,1,Playstation 3,2,Plebiscito,3,Pneumologia,1,Podcast,4,Poesia,28,Poítica,1,Politica,5,Política,288,Portugal,6,português,18,Pós-graduação,1,prazo médio,1,Pré-sal,5,Prêmio Nobel,6,primatologia,1,Primeira Guerra Mundial,1,privacidade,18,produtividade,3,professor Hamilton Alves,2,Programa Gratuito,4,Programação,51,Projeção Mapeada,1,Projeto Truco,2,Promoção,1,Propaganda,5,Psicanálise,1,Psicologia,265,Psicologia Animal,23,Psiquiatria,13,Pública,12,publicidade,19,Publieditorial,4,Quadrinhos,10,Quads,5,Qualidade,3,Qualidade de Vida,11,química,32,REA,2,realidade aumentada,44,realidade diminuída,2,Realidade Misturada,2,Realidade Virtual,37,Reconhecimento de imagem,12,Reconhecimento de voz,3,Recorde,1,Recoverit,1,Recuperar vídeos,1,Redação,1,redes,10,Referência,2,Referendo,1,Reforma Política,3,Reino Unido,1,Relacionamento,2,Relações Internacionais,40,Religião,39,Responsabilidade Social,4,Retrospectiva,1,Review,4,Rio 2016,6,Rio de Janeiro,1,Rio Grande do Norte,1,Rio Grande do Sul,1,robótica,97,Roda Viva,45,Roma,4,roteiro,1,RSA,1,Rússia,1,Samsung,1,Sanitarismo,5,Santa Catarina,1,São Paulo,4,Saúde,485,Savant,1,Segunda Guerra Mundial,21,Segurança,116,Segurança da Informação,60,Seleção Natural,2,Séries,2,serviço,1,Serviço Online,1,Sexologia,2,sexualidade,5,Show,7,SIGGRAPH,1,Simulação,28,Singularity University,1,Síria,3,Sismologia,2,Sistema operacional,4,Sistemas de Numeração,1,Sites de Busca,14,Sociedade,4,Sociologia,52,Software,32,Software Livre,25,Sol,2,Sono,4,Sony,2,SOPA,2,Star Wars,1,Suécia,3,Sugestão de presentes,61,Sun,1,supercomputadores,2,Sustentabilidade,5,Tabagismo,6,Taiwan,1,Talento precoce,1,taxa de juros efetiva,1,taxa de juros nominal,1,Taxas Equivalentes,1,Taxidermia,1,Teatro,26,Técnicas de Estudo,2,Tecnologia,539,Tecnologia da Informação,28,TED,389,TED-Ed,40,TedMed,2,TEDx,1,TEDx Rio+20,1,TEDxAmazônia,1,TEDxAsaSul,1,Telefonia,59,Televisão,43,Temas,1,Tempo,1,Tendências,10,Teologia,5,teoria das supercordas,1,Terremoto,7,Terrorismo,15,Tesla,1,Testes,17,Tipologia,8,Tomada de Decisão,1,tradução,5,Trânsito,11,transporte,55,tributo,3,Trigonometria,1,Tubarão,2,Tunísia,1,Turismo,21,Tutorial,20,Twitter,8,Uber,4,UFC,1,UFG,1,ufologia,5,UFRJ,1,Unicamp,1,UNIFESP,1,universidade,5,Universidade Corporativa,1,Universidade de Cambridge,2,Universidade de Michigan,1,Urbanismo,23,Urologia,1,User Experience,1,USP,6,Utilidade Pública,3,Utilitário,3,Vale,1,Vaticano,1,Veículo Autônomo,7,Ventriloquismo,3,Verão,1,vestibular,3,Vestimenta,1,Vida Digital,7,Vida Moderna,18,Vida Selvagem,10,Videogame,114,Vídeos,929,Vídeos 360,1,Violência,4,Vírus,2,Visão Computacional,9,Vôlei,1,Vulcanologia,6,Watergate Política,1,WCIT 2016,2,WCIT 2017,1,Web 2.0,29,Web Application,134,Web Semântica,2,Web Seminar,1,webdesign,11,Webinar,2,widget,2,WikiLeaks,37,Wikipedia,4,Windows,5,Xadrez,1,YouTube,6,Zika,1,Zoologia,56,
ltr
item
Brasil Acadêmico: Zen Coding: codificando HTML rapidamente
Zen Coding: codificando HTML rapidamente
http://4.bp.blogspot.com/_cM2l6Y3Ulgg/S-Aj3RY09SI/AAAAAAAADx8/sIPikwgiWXY/s400/zenCoding.jpg
http://4.bp.blogspot.com/_cM2l6Y3Ulgg/S-Aj3RY09SI/AAAAAAAADx8/sIPikwgiWXY/s72-c/zenCoding.jpg
Brasil Acadêmico
http://blog.brasilacademico.com/2010/05/zen-coding-codificando-html-rapidamente.html
http://blog.brasilacademico.com/
http://blog.brasilacademico.com/
http://blog.brasilacademico.com/2010/05/zen-coding-codificando-html-rapidamente.html
true
3049085869098582068
UTF-8
Todos os posts carregados Nenhumpost encontrado VER TODOS Leia mais Responder Cancelar resposta Deletar Por Home Páginas POSTS Ver Todos Recomendado para você CATEGORIA ARQUIVO BUSCA TODOS POSTS Não encontrado nehum post de acordo com o seu critério Voltar para Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Fev Mar Abr Mai Jun Jul Ago Set Out Nov Dez agorinha 1 minuto atrás $$1$$ minutos atrás 1 hora atrás $$1$$ horas atrás Ontem $$1$$ dias atrás $$1$$ semanas atrás mais que 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy