Marcado, secciones, bloques y bloqueo automático
Para diseñar sitios web y crear funcionalidad, los desarrolladores utilizan el marcado y el DOM que se representan dinámicamente a partir del contenido. El marcado y el DOM se construyen de una manera que permite una manipulación y un estilo flexibles. Al mismo tiempo, proporciona una funcionalidad predeterminada para que el desarrollador no tenga que preocuparse por algunos de los aspectos de los sitios web modernos.
Estructura de un documento
El aspecto más importante a la hora de estructurar un documento es hacerlo sencillo e intuitivo para los autores que aportarán el contenido.
Esto significa que es muy recomendable involucrar a los autores muy temprano en el proceso. En muchos casos, es recomendable dejar que los autores coloquen el contenido que necesita para pasar a una página en un documento de Google Doc o Word sin tener ninguna noción de bloques y secciones, y luego intentar realizar pequeños cambios estructurales e introducir secciones y bloques solo cuando sea necesario.
Un documento sigue la siguiente estructura en abstracto.
Una página creada en Word o un documento de Google Doc utiliza un modelo semántico bien entendido como encabezados, texto principal, listas, imágenes, vínculos, etc. que se comparte entre HTML, markdown y Google Doc/Word. A esto le llamamos contenido predeterminado. En una situación ideal, se dejaría la mayor cantidad posible de contenido creado como contenido predeterminado, ya que esta es la manera natural de que los autores traten los documentos.
Además del contenido predeterminado, tenemos un concepto de página secciones, separados por reglas horizontales o --- para agrupar ciertos elementos de una página. Puede haber motivos semánticos y de diseño para agrupar el contenido. Un caso simple podría ser que una sección de una página tiene un color de fondo diferente.
Además de eso hay concepto de bloques que se crean como una tabla con un encabezado como la primera fila que identifica el tipo de bloque. Este concepto es el método más sencillo para componentizar el código.
Las secciones pueden contener varios bloques. Los bloques nunca deben anidarse, ya que hace que las cosas sean muy difíciles de usar para los autores.
DOM frente a marcado
AEM produce un marcado semántico limpio y fácilmente legible a partir del contenido que se le proporciona. Puede acceder fácilmente a él mediante el ver origen y echar un vistazo al marcado de la página que está leyendo.
La biblioteca JavaScript utilizada en scripts.js toma el marcado y lo mejora en un DOM que luego se utiliza para la mayoría de las tareas de desarrollo, específicamente para crear bloques. Para crear un DOM fácil de usar para el código de proyecto personalizado, es mejor verlo como un proceso de dos pasos.
En el primer paso, creamos el marcado con secciones, bloques y contenido predeterminado que tendrán un aspecto similar a este.
En el segundo paso, el marcado anterior se aumenta en el siguiente DOM de ejemplo, que luego se puede utilizar para aplicar estilo y agregar funcionalidad. A continuación se destacan las diferencias entre el marcado que se entrega desde el servidor y el DOM ampliado que se utiliza para la mayoría de las tareas de desarrollo.
Consiste principalmente en introducir un envoltorio <div> AEM para bloques y contenido predeterminado, y para agregar dinámicamente clases CSS y atributos de datos útiles adicionales que utiliza el cargador de bloques de.
Secciones
Las secciones son una forma de agrupar el contenido predeterminado y los bloques por el autor. La mayoría de los saltos de sección se introducen en función de las diferencias visuales entre secciones, como un color de fondo diferente para una parte de una página.
Desde la perspectiva del desarrollo, normalmente no hay mucha interacción con secciones más allá del estilo CSS.
Las secciones pueden contener un bloque especial denominado Section Metadata, que da como resultado atributos de datos en una sección. Los autores pueden elegir los nombres de los atributos de datos y la única propiedad de metadatos de sección conocida es Style que se convertirá en clases CSS adicionales añadidas al elemento de sección contenedor.
Los bloques y el contenido predeterminado siempre se incluyen en una sección, aunque el autor no introduzca específicamente saltos de sección.
Contenido predeterminado
Existe una amplia gama de aspectos semánticos que se comparten entre documentos de Word, documentos de Google, markdown y HTML. Por ejemplo, hay encabezados de diferentes niveles (p. ej., <h1> - <h6>), imágenes, vínculos, listas (<ul>, <ol>), énfasis (<em>, <strong>), etc.
Aprovechamos la comprensión intuitiva que tienen los autores de cómo utilizar esta semántica en las herramientas con las que están familiarizados (p. ej. documentos de Word/Google) y los asigna a Markdown y, a continuación, los procesa en el marcado del HTML.
Todas las asignaciones deben ser relativamente sencillas e intuitivas para el desarrollador. Un área en la que vamos un poco más allá de la traducción más simple posible es en el manejo de imágenes. En lugar de un simple <img> etiqueta, un <picture> la etiqueta se representa con una serie de resoluciones diferentes necesarias para su visualización en dispositivos de escritorio y móviles, así como con diferentes formatos para exploradores modernos compatibles con webp y exploradores más antiguos que no lo admiten.
Bloques
La mayoría de CSS y JavaScript específicos del proyecto se encuentran en bloques. Los autores crean bloques en sus documentos y los desarrolladores escriben el código correspondiente que aplica estilo a los bloques con CSS o decora el DOM para tomar el marcado de un bloque y transformarlo a la estructura que sea necesaria o conveniente para el estilo y la funcionalidad deseados.
El nombre del bloque se utiliza como nombre de carpeta de un bloque, así como el nombre de archivo para los archivos CSS y JavaScript que carga el cargador de bloques cuando se utiliza un bloque en una página. El nombre del bloque también se utiliza como nombre de clase CSS en el bloque para permitir un estilo intuitivo.
El JavaScript se carga como un módulo (ESM) y exporta una función predeterminada que se ejecuta como parte de la carga del bloque.
Todos los CSS de nivel de bloque deben vincularse al bloque para asegurarse de que no haya efectos secundarios para otras partes del proyecto, lo que significa que todos los selectores de un bloque deben tener el prefijo de la clase de bloque correspondiente. En algunos casos, tiene sentido utilizar también el envoltorio del bloque o la sección contenedora para el selector.
Hay un equilibrio entre la manipulación de DOM en JavaScript y la complejidad de los selectores CSS. No se recomiendan selectores CSS complejos y frágiles, y al mismo tiempo agregar clases a cada elemento hace que el código sea más complejo e ignora la semántica de los elementos.
Uno de los principios más importantes de un proyecto es mantener las cosas simples e intuitivas para los autores. Los bloques complicados dificultan la creación de contenido, por lo que es importante que los desarrolladores absorban la complejidad de traducir una experiencia de creación intuitiva al DOM necesario para la lógica del diseño o la aplicación. A menudo es tentador delegar la complejidad al autor. En su lugar, los desarrolladores deben asegurarse de que los bloques no sean difíciles de crear para los autores. Un autor siempre debe poder copiar/pegar un bloque y comprender intuitivamente de qué se trata.
Un ejemplo sencillo es el Bloque de columnas. Añade clases adicionales en JavaScript en función de cuántas columnas haya en la instancia respectiva creada por el autor. Esto le permite utilizar un estilo flexible de contenido que se divide en dos columnas en lugar de tres.
Los bloques pueden ser muy sencillos o contener componentes o widgets de aplicación completos y proporcionan una forma de que el desarrollador integre su código base en pequeños fragmentos de código que se pueden administrar fácilmente y se pueden cargar en las páginas web según sea necesario.
El contenido de un bloque se procesa en el marcado como anidado <div> etiquetas para las filas y columnas introducidas por el autor. En el caso más simple, un bloque tiene una sola celda.
<div class=”blockname”>
<div>
<div>
<p>Hello, World.</p>
</div>
</div>
</div>
Los autores pueden agregar bloques a sus páginas de forma ad hoc simplemente agregando una tabla con el nombre del bloque en la primera fila o encabezado de tabla. Algunos bloques también se cargan automáticamente. header y footer los bloques que deben estar presentes en todas las páginas de un sitio son un buen ejemplo de ello.
Opciones de bloque
Si necesita que un bloque tenga un aspecto o un comportamiento ligeramente diferente según determinadas circunstancias, pero no lo suficientemente diferente como para convertirse en un nuevo bloque en sí mismo, puede permitir que los autores agreguen bloquear opciones a bloques entre paréntesis. Estas opciones añaden clases modificadas al bloque. Por ejemplo Columns (wide) en un encabezado de tabla generará el siguiente marcado.
<div class=”columns wide”>
Las opciones de bloqueo también pueden contener varias palabras. Por ejemplo Columns (super wide) se concatenarán mediante guiones.
<div class=”columns super-wide”>
Si las opciones de bloque están separadas por comas, como Columns (dark, wide), se añadirán como clases independientes.
<div class=”columns dark wide”>
Bloqueo automático
En un escenario ideal, la mayoría del contenido se crea fuera de los bloques, ya que la introducción de tablas en un documento dificulta su lectura y edición. Por el contrario, los bloques proporcionan un buen mecanismo para que los desarrolladores mantengan su código organizado.
Se llama a un mecanismo usado con frecuencia para obtener lo mejor de ambos mundos bloqueo automático. El bloqueo automático convierte el contenido y los metadatos predeterminados en bloques sin que el autor tenga que crearlos físicamente. El bloqueo automático se produce muy pronto en el proceso de decoración de páginas antes de que se carguen los bloques y es una práctica que crea mediante programación la estructura DOM de un bloque tal como aparecería como marcado desde el servidor.
El bloqueo automático suele utilizarse en combinación con metadatos, especialmente template propiedad. Si las páginas tienen una plantilla común, lo que significa que comparten un determinado diseño o funcionalidad de página, normalmente es una buena oportunidad para el bloqueo automático.
Un buen ejemplo es el encabezado de un artículo de una publicación de blog. Puede contener información sobre el autor, el título de la publicación del blog, una imagen a pantalla completa y la fecha de publicación. En lugar de que el autor cree un bloque que contenga toda esa información, se agregaría automáticamente un bloque automático (por ejemplo, un bloque de encabezado de artículo) a la página en función de <h1>, la primera imagen, el autor del blog y los metadatos de la fecha de publicación.
Esto permite al autor del contenido mantener la información en su lugar natural, la estructura del documento fuera de un bloque. Al mismo tiempo, el desarrollador puede mantener toda la información de diseño y estilo en un bloque.
Otro caso de uso muy común es envolver bloques alrededor de los vínculos en un documento. Un buen ejemplo es un autor que vincula un vídeo de YouTube simplemente incluyendo un vínculo, mientras que el desarrollador desea mantener todo el código del vídeo incrustado en una embed Bloque.
Este mecanismo también se puede utilizar de forma flexible para incluir aplicaciones externas y referencias internas a vídeo, fragmentos de contenido, modelos, formularios y otros elementos de aplicación.
El código del bloqueo automático de sus proyectos se encuentra en buildAutoBlocks() en su scripts.js.
Consulte los siguientes ejemplos de bloqueo automático.