Arbol de contenidos web

Plantilla del árbol de contenidos

En el árbol del sitio que aparece en el panel izquierdo del cliente CMS, las cosas son diferentes. Aquí puede crear una jerarquía virtual de páginas, componentes y carpetas. Las navegaciones del sitio toman su contenido y organización del árbol del sitio, y las URL del sitio en tiempo de ejecución también siguen la jerarquía del árbol del sitio.

Trabajar en el árbol de sitios es similar a trabajar con la estructura de archivos de un disco duro. Cada elemento del árbol de sitios se conoce como un nodo. Se utiliza un modelo genealógico para describir las relaciones entre los nodos.

El árbol del sitio puede expandirse y colapsarse haciendo clic en los botones + y – a la izquierda de cada nodo. Un botón + indica que hay páginas secundarias; al hacer clic en él se expande ese nodo. Al hacer clic en el botón – se cierra el nodo.

La estructura del contenido que se muestra en el árbol del sitio define la estructura y la navegación del sitio web. La navegación que se muestra en una página se nutre dinámicamente de las relaciones definidas en el árbol del sitio.

Cuando las páginas se reordenan en el árbol del sitio, la navegación izquierda que se muestra en la página suele reflejar también el cambio. Es decir, si se cambia la Central de Blogs y el Índice de Noticias en el árbol del sitio, la navegación de la página también reordenaría la Central de Blogs y el Índice de Noticias.

Estructura de árbol del sitio web

Acciones del artículoUsando shadow DOMUn aspecto importante de los componentes web es la encapsulación – ser capaz de mantener la estructura de marcado, el estilo y el comportamiento ocultos y separados de otro código en la página para que las diferentes partes no choquen, y el código pueda mantenerse agradable y limpio. La API Shadow DOM es una parte clave de esto, proporcionando una forma de adjuntar un DOM separado y oculto a un elemento. Este artículo cubre los fundamentos del uso del Shadow DOM.

Visión de alto nivelEste artículo asume que ya estás familiarizado con el concepto de DOM (Document Object Model) – una estructura en forma de árbol de nodos conectados que representa los diferentes elementos y cadenas de texto que aparecen en un documento de marcado (normalmente un documento HTML en el caso de los documentos web). Como ejemplo, considere el siguiente fragmento de HTML:

Shadow DOM permite adjuntar árboles DOM ocultos a los elementos del árbol DOM normal: este árbol DOM en la sombra comienza con una raíz en la sombra, debajo de la cual se pueden adjuntar los elementos que se desee, del mismo modo que en el DOM normal.

Escanear la estructura del sitio web

Un CMS con un árbol de contenidos proporciona a los editores una mejor experiencia de usuarioMark Marsiglio1498255200Un importante diferenciador entre las miles de plataformas de gestión de contenidos disponibles es la organización de las páginas mediante un árbol de contenidos.

A menudo, un CMS genera automáticamente una URL que incluye un módulo y un ID de nodo. Por ejemplo: http://www.site.com/node/16.  Normalmente, un editor puede anular la URL generada con una que sea amigable para el usuario y para el SEO, pero una mejor opción es la de las URLs automáticas agradables para cada página basadas en la ubicación.Dado que las URLs a menudo se forman a partir del título de la página, la ubicación de la página en el árbol crea automáticamente el contexto para los usuarios que previsualizan un enlace antes de hacer clic.  Las páginas organizadas en un árbol de contenidos pueden derivar un contexto adicional de los objetos padre, lo que ayuda a los usuarios a navegar por el sitio con más confianza. Los gestores de contenidos obtienen esto de forma gratuita ya que las URLs pueden ser generadas de forma semánticamente útil sin tener que hacer nada especial, la URL se crea de forma programada. Por supuesto, la creación de alias de URL alternativos es siempre una opción cuando el generado no cumple su propósito.Permite una vista previa más precisa del contenido antes de la publicaciónCuando un editor crea un nuevo contenido en una ubicación específica, el motor de plantillas del CMS previsualizará con mayor precisión el contenido en el contexto en el que aparecerá a los visitantes del sitio.Las plantillas a menudo varían en diferentes secciones de un sitio, por lo que la vista previa con la navegación contextual adecuada es posible si el editor comenzó seleccionando un contenedor de contenido, o Padre, del árbol.  La arquitectura multisitio es más fácil de ver cuando cada página principal tiene subpáginas

Estructura del sitio web

Una vez expandida, puede hacer clic en los iconos de las carpetas para obtener una vista previa rápida del contenido dentro de la carpeta sin tener que desplazarse realmente a la carpeta. También puede hacer clic con el botón derecho en los elementos del árbol de contenido del sitio para acceder a un menú rápido de opciones para ese elemento. Y si quieres acceder al contenido de una carpeta específica, haz clic en la marca > junto a la carpeta.

Bloques: Contienen trozos de información. Algunos afectan al funcionamiento de tu sitio, así que NUNCA toques el que está etiquetado como “navegación”. Sin embargo, a veces encontrarás y utilizarás tanto “bloques de contenido compartido” como “bloques de configuración”. Hablaremos de ellos cuando corresponda