Losas Plantillas HTML

Plantillas HTML de Tiles Limpias con Marcado de Código Fuente Editable

Cuando un desarrollador hereda una plantilla HTML de Tiles, recibe un conjunto de archivos, y la fluidez del mes siguiente depende de cómo estén organizados. Este patrón se repite en todas partes: un índice de portafolio, una cuadrícula de productos o la portada de una revista. El marcado que se muestra a continuación determina si agregar doscientas entradas es una tarea de una tarde o requiere una reescritura completa.

Patrones de Marcado que Copiarás con Frecuentemente

La repetición es la clave de un diseño de Tiles, y lo primero que se debe inspeccionar. Una tarjeta generalmente incluye una imagen, un título y un enlace, y su forma debe permanecer idéntica desde la primera hasta la última entrada. Abre el código fuente y busca lo siguiente:

1. Secciones semánticas alrededor de cada grupo de Tiles en lugar de un contenedor infinito.

2. Encabezados que se organizan en orden descendente, con una entrada destacada sobre los elementos que presentan.

3. Un patrón de tarjeta repetido textualmente, con ganchos de clase que se mantienen para futuras modificaciones.

4. Enlaces escritos en los elementos en los que el visitante hace clic.

El orden de lectura se mantiene incluso después de un colapso

Una disposición de mosaicos que se lee bien en una pantalla ancha puede aparecer en un orden extraño en un teléfono, ya que la posición visual de un panel y su ubicación en el código fuente difieren. El elemento destacado en la esquina superior izquierda no debe aparecer debajo de tres tarjetas secundarias. Una comprobación rápida en cualquier bloque repetido:

1. El elemento que el visitante necesita primero aparece primero en el código fuente.

2. El texto de apoyo permanece unido a la imagen que describe.

3. El enlace cierra el bloque en lugar de flotar sobre el contenido sobre el que actúa.

Si se hace bien una vez dentro de una tarjeta, la siguiente heredará la misma configuración. Si se hace mal, un cliente que esté usando un teléfono lo notificará.

Después de exportar, compruebe primero los enlaces

Nicepage exporta el proyecto desde la aplicación de escritorio, y la guía de exportación explica este proceso. Lo que se guarda en el disco es un conjunto de archivos que puedes alojar en cualquier lugar, por lo que nada está vinculado al alojamiento de Nicepage y el código fuente permanece abierto para futuras ediciones.

La primera revisión tras la exportación es breve y merece la pena. Comprueba que los enlaces relativos y las rutas de los recursos sigan funcionando una vez que los archivos estén en un servidor, que los atributos alt de las imágenes describan con precisión el contenido y que los encabezados se hayan mantenido en orden tras el cambio de contenido. Las tarjetas repetidas merecen una segunda revisión una vez que se les haya añadido contenido real, ya que un título que se ajusta a la demo en cuatro palabras rara vez se ajusta a la realidad en doce.

Lo que debes evaluar es la facilidad de uso del código fuente. Un marcado que puedas leer, editar y ampliar sin problemas seguirá siendo útil mucho después de que cambie la disposición en pantalla.