Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=5c85265e-c9b3-46ae-8bd0-9ff411f00d35

VÍDEO: Utiliza ZenCoding para escribir HTML a toda velocidad

ZenCoding-HTML-CSS

Escribir HTML para dar forma a un documento Web es un absoluto aburrimiento. Por ello todo lo que nos ayude al máximo posible a reducir el tiempo que pasamos haciéndolo nos resultará de mucha ayuda. Además, si podemos escribir menos código y más rápido seremos más productivos y tendremos más tiempo para hacer otras cosas o, si tenemos suerte, para salir a nuestra hora de vez en cuando :-)

Gracias a entornos avanzados de edición de código como WebStorm, Sublime o el propio Visual Studio, la velocidad puede aumentar mucho ya que éstos se encargan automáticamente de cerrar etiquetas, indentar el código, etc...

Sin embargo, aún es posible acelerar mucho más.

Lo interesante sería reducir al máximo el código que debemos escribir. Y es ahí precisamente en donde entra en juego el método conocido como Zen-Coding, una gran idea que cada vez se utiliza más.

Zen-Coding es un tipo de sintaxis especial para generar HTML y otros lenguajes estructurados (XML y similares) que es muy similar a los selectores que usamos para CSS, pero que nos permite generar de manera rápida y concisa código HTML.

Gracias a Zen-Coding podrás crear complejas estructuras HTML con una sola línea de código y sin tener que preocuparte de generar correctamente el código, indentarlo, ordenarlo, etc...

Por ejemplo, una expresión como esta en Zen-Coding:

#content>#header.Main>ul>li*3>a.menu{Menu $$}

Nos generaría este código HTML automáticamente:

<div id="content">
    <div id="header" class="Main">
       <ul>
            <li><a href="" class="menu">Menu 01</a></li>
            <li><a href="" class="menu">Menu 02</a></li>
            <li><a href="" class="menu">Menu 03</a></li>
        </ul>
    </div>
</div>

La sintaxis de Zen-Coding, aunque pueda parecer compleja a simple vista, es realmente sencilla y la podemos aprender en unos pocos minutos, ganando mucha productividad en el futuro.

La sintaxis de Zen-Coding está soportada por multitud de editores de HTML y si no, existen plugins para la mayor parte de los editores del mercado. En su página puedes encontrarlos.

En el siguiente vídeo práctico nuestro tutor José M. Alarcón nos explica cómo sacar partido a Zen-Coding con Visual Studio, el cual nos resultará útil para cualquier otro editor que soporte este estilo de escritura de código.

Antes de nada conviene tener presente esta tabla resumen que muestra los diferentes caracteres utilizados en Zen-Coding y su significado:

Carácter Propósito
#
Atributo "id"
. Atributo "class"
> Elemento hijo
+ Elemento hermano (mismo nivel)
[] Atributo personalizado
{} Texto personalizado en el elemento
* Múltiples elementos
$ Numeración incremental
$$$ Numeración incremental con relleno
^ Subir en la jerarquía de elementos
() Agrupación de elementos
lorem Generador de textos "Lorem ipsum"
html Genera etiquetas y cabeceras HTML, como por ejemplo: html:5 para generar todas las cabeceras de HTML5, o html:xml para XHTML.

Con esta tabla delante y el vídeo que encontrarás a continuación, podrás estar generando código HTML a toda velocidad dentro de 15 minutos :-)

Este vídeo está extraído de nuestro curso HTML(5) y CSS(3), la mejor manera de aprender HTML y CSS a fondo, incluso si ya lo estás usando.

Nota: Por cierto, existe una evolución de Zen-Coding, llamada a sustituirlo, llamada Emmet que se usa de la misma manera pero añade algunas características más. De momento no tiene soporte explícito en Visual Studio, pero la extensión de Zen-Coding de Web Essentials que se muestra en el vídeo en realidad soporta ya la mayoría de las mejoras de Emmet para HTML, como el poder subir niveles con ^, la generación de “Lorem Ipsum” o diversos tipos de HTML. Otros editores, como Sublime, Notepad++ o WebStorm, por citar unos pocos, tienen soporte para Emmet. Si utilizas Resharper también tienes soporte de Emmet en Visual Studio sin necesidad de implementar el plugin del vídeo.

Fecha de publicación:
campusMVP campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP
Archivado en: Desarrollo Web | Herramientas

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.