Lazo Plantillas HTML

Plantillas HTML de bucle para contenido repetitivo

Una plantilla HTML de bucle define una unidad repetitiva y la rellena con contenido dinámico de publicaciones, productos o registros de proyectos. Se selecciona un bloque de elemento prediseñado, se adapta a las entradas que se publican y el bucle genera ese marcado para cada registro. No se duplica nada manualmente, por lo que un solo bloque determina cómo se lee toda la cuadrícula.

Dónde termina la plantilla y comienza el contenido

La confusión habitual con los bucles es confundir la plantilla con el elemento. Una plantilla contiene espacios vacíos: generalmente un área de imagen, un encabezado y una línea de metadatos. Al editar el nombre de un producto, cambia un registro; al editar el marcado, toda la cuadrícula se desplaza a la vez.

Esta división deja el bucle con tres partes móviles:

1. El marcado del elemento, que fija la jerarquía y el orden de lectura;

2. Los campos dinámicos, que incorporan valores a ese marcado;

3. La cuadrícula externa, que decide cuántos elementos se muestran uno al lado del otro.

Estas tres partes determinan si una plantilla predefinida es utilizable. Un bloque de elementos con dos campos no admitirá entradas con cinco campos.

Los conjuntos de campos difieren entre bucles

No todos los bucles incluyen una imagen, un título y una descripción. El conjunto de campos depende del tipo de contenido y determina qué es lo primero que ve el lector.

Tres casos comunes muestran la gran diferencia entre estos conjuntos:

1. Un bucle de publicación vincula la fecha, el autor y el extracto al encabezado, por lo que el extracto nunca tiene mayor relevancia;

2. Un bucle de evento comienza con la fecha y la ubicación, por lo que el bloque de tiempo tiene más peso que la imagen;

3. Un bucle de directorio incluye la categoría, la dirección y los datos de contacto, con el botón de acción junto a ellos.

Los tres casos repiten una estructura básica, pero la importancia de los campos varía, y la selección de una plantilla que se ajuste a esa importancia es fundamental. Adaptar el diseño de una publicación para registros de eventos implica reorganizar los campos.

Manteniendo el orden en diferentes tamaños de pantalla

Los bloques repetidos se leen bien en un monitor ancho, pero se vuelven más difíciles de leer cuando las columnas se pliegan. Lo importante entonces es que cada registro se mantenga coherente: la imagen encima de su título, el precio junto a su nombre y la acción asociada a su entrada.

El contenido de ejemplo disimula esto, ya que los elementos de demostración suelen tener la misma altura. El problema surge cuando el título de un proyecto ocupa tres líneas y el siguiente casi no tiene descripción. Es recomendable cargar las entradas más largas y más cortas en una plantilla seleccionada antes de publicar a gran escala.

En Nicepage, el elemento Cuadrícula coloca los elementos repetidos en celdas adaptables; la Guía de Diseño Web Adaptable explica sus controles.

Una plantilla HTML de bucle resulta útil cuando la estructura, la legibilidad y el orden de los datos se mantienen en cualquier número de registros y ancho de pantalla.