$hide=/p/valores.html

Zen Coding: codificando HTML rapidamente

Indicar:

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

Comentários

BLOGGER: 2
Loading...

$hide=/p/valores.html

[/fa fa-cloud/ Nuvem de categorias]$hide=mobile

Nome

A divulgar Abelha Acessibilidade acessório Acidente Acidentes Acústica Adágios Adestramento Administração adulto Aerodinâmica Aeronáutica África Agência Brasil Agência Fiocruz Agência Porvir Agência Senado Agência USP Agricultura Agropecuária AIDS Alcoolismo Alemanha Alerta Algoritmo Alimento Alzheimer Amazon Amazônia América Latina Análise Combinatória Anatomia Android Animação Animais de Estimação Animal Antropologia Apicultura App Apple Apresentação aquário Argentina Arqueologia arquitetura Arte Astrobiologia Astrofísica Astronomia Ativismo Áudio Audio FX Áustria Autismo Auto-ajuda Automobilismo Automóvel aventura Aviação Aviônica Bahia Balonismo Banco de Dados Beber e Dirigir biblioteconomia Bicicleta Biografia Biologia Biologia Marinha bioquímica Biotecnologia Bitcoin Blog Blogger Boato Bomba borderô de desconto Botânica BRASA Leads Brasil Brasília BRIC Browser Bugs CAD Calor Câmera lenta Campanha cardiologia Carnaval carreira Cartografia Casemods Caso Isabella Nardoni Caso Snowden Ceará Celebridades celular Células-Tronco Cérebro Charge China Cibercultura Ciclovia Cidadania Ciência Cinema Clip Cliparts Cloud computing Coaching Comédia competência Complemento de dois Comportamento Computação Computação em grade Computação forense Computação Gráfica Computação Móvel Comunicação e Marketing Concurso Concurso Cultural de Natal Concursos Público Concursos Públicos Conectômica Conferência Congresso em Foco Conspiração Consumidor Consumismo contabilidade Contos Copa do Mundo Cordel Coreia do Norte Coreia do Sul Corpo Coruja cosmética Cosmologia Crash Course Criança Criatividade Crime Crime Digital crise crise econômica crônica crônicas Cronologia CSS Cuba Culinária Cultura Curiosidades custos fixo custos variáveis Dança DAO Darwin Davos Debate Decoração demência Demografia Denúncia Dermatologia Desastre Natural Descoberta desconto duplicatas Desenho instrucional Desenvolvimento de jogos Design Design Instrucional Destaque Dia das Mães Dia do professor diabetes Dicas Didática Dieta diplomacia Direito Direito Eleitoral Direito Internacional Direito Tributário Direitos Humanos Disney Distrito Federal Documentário Doutorado download Drogas Drone Dubai e-Book e-governo EBC Ecologia Economia Editoração Eletrônica Educação Educação a Distância Educação Corporativa educação física Educação sexual Efeitos Sonoros Egiptologia Eleições Eleições 2014 Eleições 2018 Eletricidade eletrônica Embrapa empreendedorismo enciclopédia endocrinologia Enem Energia Energia Alternativa Energia Nuclear Engenharia Engenharia Agrícola Engenharia Civil Engenharia de materiais Engenharia de Software Engenharia Genética Engenharia Mecânica Enretenimento Ensino a Distância Ensino Superior Entomologia Entretenimento Entrevista Entrevista. Epidemiologia Epistemologia Equador Escândalo Escritório Espaço Espanha Espanhol Espeleologia Espetáculo Espionagem Esporte Estação Estágio Estatísticas estrutura de dados Ética EUA Europa Evento Evolução Exercícios físicos Exobiologia experiência fábulas Facebook Farmacologia Favo Feminismo Férias Ferramentas FIFA Filantropia Filmes Filosofia Finlândia Firefox Física Física Quântica Fisiologia Fisioterapia Flagrante Flamengo Folclore Fome Fonética Fonoaudiologia Fotografia Fotos em 360 graus França Francês frases Fraude Freeware Futebol Futurologia gadget Gafe Gastroenterologia Gastronomia Geek Genética Geofísica Geografia Geologia Geometria geopolítica Gerenciamento do Tempo Geriatria Gestão de Competências Gestão de Configuração Gestão de Pessoas Gestão de Projetos Gestão do conhecimento Ginecologia Glass Google Governo GPS Gradiente gramática Gravidez Grécia Grécia Antiga Guerra Guerra Civil Guinness H2 Haiti hardware História HIV Hololens homenagem Horologia HPV HTML Humor Humor Negro IBGE IBM ICIJ Idioma IHC ilo ilusão ilusionismo Imagem 3D Imagens Imagine Cup Império Romano Imprensa Impressora 3D Imunologia Incêndio Inclusão digital Índia Índios Infectologia Infográfico Informática Inglaterra Inglês Inovação Inspiração Inteligência Artificial intercâmbio Interface Interfaces Hápticas Internacional Internacionalização da Amazônia Internet Internet das Coisas Inundação Invenção Inventos iPad IPEA iphone Irã Iraque Israel Japão Java Java. jogos Jogos educativos Jogos Olímpicos Jornalismo Justiça Kinect Le Monde Diplomatique Brasil Le Monde Diplomatique Brasil Letras Lexicografia Liderança Life Hacking Linguística Literatura Livro Lógica Logística Loterias Lua Maçonaria Malásia Malvinas Malware Mapa Mário Sérgio Conti Marte Mastologia Matemática Matemática Financeira maternidade Mecânica Mecânica dos Fluidos Mecatrônica Medicina Medicina Esportiva Medicina Veterinária Meio Ambiente Mel melanoma Memória memorização Mente Mercado de Trabalho mercosul Mestrado meteorologia Metodologia Científica México Microbiologia Microsoft Mídia Social Militar Mineralogia Mistério MIT Mitologia Mobilidade Mobilidade Urbana MonaVie Montanhismo Moodle Mossad Motivação Movimento Maker MSF Mudança Climática Mulher Multimídia museu Música MVC Nanotecnologia Nasa Natação Natal Natureza Negócios Netflix Neurociência Neurologia Nicolelis Nordeste Noruega notícias Novidades Novo Enem Números Nutrição Obama Obesidade Observatório da Imprensa Obstetrícia Oceanografia odontologia Offshore Leaks oftalmologia Olimpíadas oncologia ONU Opinião Óptica Oracle Oriente Médio Orkut Ornitologia ortografia Ortopedia Ótica Otorrinolaringologia Oxfam Pacifismo Paginadores paleontologia Paquistão Pará Paraguai parkinson Passeio virtual Patinação Pedagogia Pediatria Pensamentos performance Periférico Pesca Pesquisa Petição Petrobrás Petróleo Photoshop Pirataria planilha de custo Playstation 3 Plebiscito Pneumologia Podcast Poesia Poítica Politica Política Portugal português Pós-graduação prazo médio Pré-sal Prêmio Nobel primatologia Primeira Guerra Mundial privacidade produtividade professor Hamilton Alves Programa Gratuito Programação Projeção Mapeada Projeto Truco Promoção Propaganda Psicanálise Psicologia Psicologia Animal Psiquiatria Pública publicidade Publieditorial Quadrinhos Quads Qualidade Qualidade de Vida química realidade aumentada realidade diminuída Realidade Misturada Realidade Virtual Reconhecimento de imagem Reconhecimento de voz Recorde Redação redes Referência Referendo Reforma Política Reino Unido Relacionamento Relações Internacionais Religião Responsabilidade Social Retrospectiva Review Rio 2016 Rio de Janeiro Rio Grande do Norte Rio Grande do Sul robótica Roda Viva Roma roteiro RSA Rússia Samsung Sanitarismo Santa Catarina São Paulo Saúde Savant Segunda Guerra Mundial Segurança Segurança da Informação Seleção Natural Séries serviço Serviço Online Sexologia sexualidade Show SIGGRAPH Simulação Singularity University Síria Sismologia Sistema operacional Sistemas de Numeração Sites de Busca Sociedade Sociologia Software Software Livre Sol Sono Sony SOPA Star Wars Suécia Sugestão de presentes Sun supercomputadores Sustentabilidade Tabagismo Taiwan Talento precoce taxa de juros efetiva taxa de juros nominal Taxas Equivalentes Taxidermia Teatro Técnicas de Estudo Tecnologia Tecnologia da Informação TED TED-Ed TedMed TEDx TEDx Rio+20 TEDxAmazônia TEDxAsaSul Telefonia Televisão Temas Tempo Tendências Teologia teoria das supercordas Terremoto Terrorismo Testes Tipologia Tomada de Decisão tradução Trânsito transporte tributo Trigonometria Tubarão Tunísia Turismo Tutorial Twitter Uber UFC UFG ufologia UFRJ Unicamp UNIFESP universidade Universidade Corporativa Universidade de Cambridge Universidade de Michigan Urbanismo Urologia USP Utilidade Pública Utilitário Vale Vaticano Veículo Autônomo Ventriloquismo Verão vestibular Vestimenta Vida Digital Vida Moderna Vida Selvagem Videogame Vídeos Vídeos 360 Violência Vírus Visão Computacional Vôlei Vulcanologia Watergate Política WCIT 2016 WCIT 2017 Web 2.0 Web Application Web Semântica Web Seminar webdesign Webinar widget WikiLeaks Wikipedia Windows Xadrez YouTube Zika Zoologia
false
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
Nenhuma artigo encontrado. VER TODOS Leia mais Responder Cancelar resposta Apagar Por Início PÁGINAS POSTS Ver Todos Indicado para você CATEGORIA ARQUIVO BUSCA TODOS ARTIGOS Nenhum artigo corresponde ao critério procurado Ir para Início Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir Este conteúdo é PREMIUM Por favor, compartilhe para liberar Copiar todo o código Selecionar todo o código Todos os códigos foram copiados para o clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy