diciembre 15, 2020

C贸mo escribir c贸digo HTML m谩s r谩pido

Presentamos los factores clave para saber c贸mo escribir c贸digo HTML m谩s r谩pido y de esta forma crear proyectos con m谩s profesionales y de mayor calidad.

Los sitios web modernos requieren mucho c贸digo HTML, algunos dise帽os complejos con m煤ltiples vistas y estados diferentes pueden ser dif铆ciles de crear con un simple editor de texto. Sin embargo, hay herramientas de generaci贸n de HTML con las que se puede trabajar como es: Emmet y Pug.

Antes de utilizar estas armas, es importante conocer el HTML, por lo tanto, hay que asegurarse de que est谩 utilizando las etiquetas HTML sem谩nticas populares de la manera correcta.

Generar HTML sobre la marcha

Escribir grandes cantidades de HTML y plasmar cada etiqueta a mano puede volverse muy tedioso. Por ejemplo, al escribir una lista de enlaces, debemos asegurarnos de que las etiquetas <ul>, <li> y <a> se abran y cierren en el lugar correcto.

De lo contrario, es posible que los enlaces no funcionen y el dise帽o de la p谩gina no sea del todo funcional.

Usar Emmet

Para asegurarse de reducir las posibilidades de que suceda lo anterior, se puede emplear Emmet, que es una herramienta que ahorrar谩 la escritura y mejorar谩 el flujo de trabajo de HTML y CSS.

Emmet permite crear elementos escribiendo un selector similar a CSS. Luego analizar谩 y expandir谩 ese elemento en HTML normal. A continuaci贸n, se muestra el elemento original creado en Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet detectar谩 este elemento, lo analizar谩 y luego lo transformar谩 en HTML est谩ndar como se muestra a continuaci贸n. Reconocer el elemento Emmet sugiere que <li> se multiplica por (* 3 ) y cada instancia de <li> se llamar谩 Cap铆tulo seguido del n煤mero apropiado (hasta 3).

Hay que tener en cuenta cu谩ntos caracteres contiene el elemento Emmet y cu谩ntos contiene el HTML est谩ndar. Incluso este fragmento de c贸digo demuestra cu谩nto tiempo se puede ahorrar utilizando la abreviatura de Emmet.

<nav>

  <ul>

    <li><a href=鈥濃 class=鈥漜hapter鈥>Chapter 1

 of 3</a></li>

    <li><a href=鈥濃 class=鈥漜hapter鈥>Chapter 2

 of 3</a></li>

    <li><a href=鈥濃 class=鈥漜hapter鈥>Chapter 3

 of 3</a></li>

  </ul>

</nav>

Emmet tambi茅n se adec煤a al contexto. Por ejemplo, si estamos editando una <table>, es probable que se desee que algunos elementos <tr> (como estas filas) la llenen, s贸lo se debe especificar cu谩ntos necesitamos.

Este es solo un ejemplo de lo que puede hacer Emmet, pero hay muchas m谩s opciones de configuraci贸n disponibles que incluyen la edici贸n de CSS, la creaci贸n de clases BEM (Block Element Modifier) 鈥嬧媏 incluso hay un generador Lorem Ipsum.

Es importante se帽alar que la mayor铆a de los editores de c贸digo tienen Emmet integrado o lo admiten a trav茅s de complementos.

Pug ideal para contenido din谩mico

Es posible que necesitemos generar p谩ginas de inicio personalizadas, tablas de orden complejas o repetir bloques comunes de HTML. Todo esto es posible en JavaScript, pero al renderizar previamente este contenido podemos obtener un aumento de velocidad adicional sin depender del navegador del usuario.

Si hay una p谩gina con muchos medios, se querr谩 hacer una copia de seguridad con un almacenamiento confiable en la nube.

Pug

Esta es una herramienta de creaci贸n de plantillas para HTML, con la que se puede escribir p谩ginas en formato 芦.pug禄. Posteriormente la herramienta leer谩 ese archivo, inyectar谩 algunos datos din谩micos en 茅l y devolver谩 HTML est谩ndar.

El siguiente ejemplo muestra c贸mo escribir铆a el c贸digo en Pug para crear el mismo HTML que el ejemplo de Emmet.

ul

  each val in [1, 2, 3]

    li

      a(href=鈥濃, class=鈥漜hapter鈥) Chapter

#{val} of 3

Un archivo Pug usa sangr铆a solo para indicar anidaci贸n, se puede iterar sobre valores para generar grandes cantidades de HTML en una sola pasada. Estos archivos 芦.pug禄 est谩n dise帽ados para ser reutilizados muchas veces en un proyecto.

Le铆ste: C贸mo escribir c贸digo HTML m谩s r谩pido, te recomendamos: T茅cnicas PHP para escribir c贸digo limpio y legible

Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:聽@tortugacode