Uso de Componentes

Introducción

Los componentes de Drupal son herramientas esenciales para la creación de contenido y la construcción de páginas. Estos componentes están diseñados para contextos específicos, lo que garantiza que los autores sigan las directrices de diseño y editoriales establecidas por la Universidad. De esta manera, se asegura que todo el contenido publicado mantenga una apariencia y calidad coherentes.

1. Para agregar componentes en el cuerpo de la página, simplemente haz clic en el icono “+”. Esto te permitirá seleccionar y añadir diferentes elementos que enriquecerán tu contenido.
2. Seleccionamos el componente de preferencia para ser utilizado.
3. En cada sección y componente permite cambiar el orden, editar, duplicar y eliminar. Pasando sobre el título de cada uno se despliegan las opciones.

Sección

La sección actúa como un bloque contenedor principal donde puedes almacenar diversos elementos como contenidos, medios, listas, diseños y plantillas. Este bloque te permite organizar y estructurar tu página de manera eficiente, asegurando que todo esté en su lugar y sea fácil de encontrar con el ancho del body.

Sección a una columna

1. Seleccione la diagramación de una columna de contenido.
2. Selector de fondo entre Claro y Oscuro.

   Nota: La alineación vertical de elementos es exclusiva para diseños con más de una columna.

3. Nombre de clase personalizada para estilos CSS o funciones en escala. Importante nombre único sin espacios.

Sección a dos columnas

1. Seleccione la diagramación de dos columnas de contenido.
   
2. Selector de fondo entre Claro y Oscuro.
   
3. Alineación vertical de elementos, exclusivo para diseños con más de una columna, alineará la columna donde se encuentre texto.
   
4. Anchos de columna, donde se podrá escoger variedad de anchos. Por ejemplo: 30%/70% dejará la primera columna con un ancho de 30% y la segunda columna de 70%.
   
5. Nombre de clase personalizada para estilos CSS o funciones en escala. Importante nombre único sin espacios.
   

Párrafo

Crear y gestionar contenido es muy sencillo y flexible gracias al editor de texto abierto. Este editor te permite estructurar tu contenido de manera eficiente, siguiendo las configuraciones establecidas por la Universidad.

1. Opciones para editar texto, alinear, viñeta número, viñeta símbolo, hipervínculo, negrita, itálica y subrayado.
2. Para crear un hipervínculo primero debemos seleccionar el fragmento del texto, colocar la URL y aceptar.

   La opción downloable, aplica para documentos que descargue de forma automática (Debe estar en la multimedia de Drupal).

3. En las opciones de diseño, puedes ajustar el tamaño y la fuente. Hay tres formatos preestablecidos de tamaño: S, M y L, y puedes elegir entre los tipos de fuente Serif y Sans Serif.
   Tamaños M = 1rem L = 1.25rem S = .875rem

Párrafo citado

Este párrafo está diseñado específicamente para citas textuales o citas directas, lo cual es muy útil cuando necesitas estructurar contenido académico o artículos que requieren referencias precisas. Utilizar este formato te ayudará a mantener la claridad y la exactitud de tus citas, asegurando que tus fuentes estén correctamente representadas y sean fáciles de identificar para tus lectores.

1. Editor de texto simple con opción texto cita y referencia.

Body

Esta opción te permite agregar el campo 'Body' con datos básicos directamente en el cuerpo de la página.

1. Agregue la información en el campo body el cual cuenta con un editor de texto abierto donde se permite alinear, viñeta número, viñeta símbolo, hipervínculo, negrita, itálica y subrayado.
2. Colocamos el componente tipo Body

Título

El título se utiliza como una abreviatura del contenido de una página o nodo. Esto ayuda a resumir de manera clara y concisa el tema principal, facilitando a los lectores identificar rápidamente de qué trata el contenido.

1. Título estándar para encabezados de secciones (Hasta 255 caracteres).
2. Diseño permite ajustar las jerarquías de título mediante H1, H2 y H3. 3 tipos de grosor para textos como:
   • Subtitle Bold
   • Subtitle Light
   • Sub-subtitle semibold
   

Acordeón

El contenido interactivo está organizado de manera plegable, lo que facilita la navegación y hace que la página sea más dinámica. Cada módulo plegable te permite agregar una descripción y un hipervínculo, proporcionando información adicional de manera clara y accesible.

1. Campo de texto abierto para título y subtítulo de la cabecera (Hasta 450 caracteres).
2. Cada ítem se agrega manualmente y puede incluir una descripción (Hasta 1000 caracteres). También tienes la opción de añadir botones de acceso directo con hipervínculos y títulos personalizados para los enlaces.
3. Atributos para URL _self = Misma ventana | _blank = Nueva pestaña.
4. Elige el tema que prefieras: Primario o Secundario.

Animación

Bloque de animación que permite seleccionar animación uno (dos imágenes) o animación dos (tres imágenes). Una vez configurado se muestra de la siguiente forma:

• Animación dos imágenes
• Animación tres imágenes

  La opción de animación (tres imágenes) no está habilitado para configurarlo, es un componente que tiene tres tarjetas específicas para la página TU+.

  

1. Seleccionamos animación con una o dos imágenes.
2. Abrimos la biblioteca de imágenes para seleccionar la imagen. Créditos (Hasta 150 caracteres) y pie de foto (Hasta 240 caracteres) si aplica.
3. Es obligatorio seleccionar el aspecto relación de la imagen. Se puede cambiar la ubicación del caption.
4. Más de una imagen seleccionamos “Añadir imagen”. Permite hasta dos imágenes.

Banner Interno

Este componente permite agregar enunciados, texto e hipervínculos, siendo una herramienta esencial para resaltar información importante en páginas básicas y secciones de noticias. Ofrece la flexibilidad de utilizar fondos de color plano o imágenes, asegurando que el contenido destaque visualmente y sea fácilmente accesible para los usuarios.

1. Coloca el título (Hasta 50 caracteres) y descripción (Hasta 250 caracteres).
2. Carga de la imagen (1400x700 px) o fondo de color amarillo, claro y oscuro. Configuraciones para el enlace tipo banner interno, link y botón.
3. Opción de dos botones para enlace URL completa o path, texto de enlace (Hasta 35 caracteres), atributos URL _self = Misma ventana | _blank = Nueva pestaña y contenido relacionado por búsqueda.

Listado de enlaces

Esta herramienta te permite gestionar listas de enlaces de manera eficiente y organizada. Con ella, puedes mantener todos tus enlaces bien estructurados y fáciles de acceder, lo que mejora la navegación y la experiencia del usuario.

1. Lista de enlaces de forma modular que permite agregar url path o completa. Y nombre personalizado para cada enlace.
2. Atributos para URL _self = Misma ventana | _blank = Nueva pestaña.
3. Diseño > Alineación horizontal de texto: Izquierda, Centro y Derecha.

Listado de tarjetas

Esta lista de secciones con hipervínculo se presenta en un formato vertical. Cada sección incluye una imagen representativa, una breve descripción y un enlace que lleva a la sección correspondiente. Además, es compatible con fondos claros y oscuros.

Esta lista de secciones con hipervínculo se presenta en formato de parrilla de 1, 2, 3 o 4 columnas. Cada sección puede incluir un logo, breve descripción, título y enlace (descargable, interno o externo). Permite añadir un antetítulo y disponer el contenido de forma horizontal o vertical. Compatible con fondos claros, oscuros y con imágenes personalizadas.

1. Agregamos el título del ítem (Hasta 50 caracteres).
2. Subimos la imagen correspondiente, asegurándonos de que esté optimizada y mantenga una relación de aspecto 1:1.
3. Permite agregar la descripción del ítem, no es obligatorio. (Hasta 360 caracteres).
4. Es importante incluir la URL completa del enlace, ya sea en formato de ruta o utilizando el buscador de páginas. Atributos para URL _self = Misma ventana | _blank = Nueva pestaña.

Las tarjetas se añaden manualmente al final de cada ítem y se pueden reordenar fácilmente usando la función de arrastrar y soltar.

Iframe

Permite incrustar contenido embebido tales como: Facebook, Twitter, Instagram, Tiktok, spriker, genially y LinkedIn. Es como tener una ventana dentro de tu página que muestra contenido de la red social.

1. Pegamos el enlace de la página externa para incrustarla.

   Este contenedor NO permite subir etiquetas HTML de tipo iframe.

2. En diseño se puede ajustar el ancho y alto superior al que viene por defecto de la plataforma origen. Si es menor no va a tomar el tamaño de la plataforma. *TikTok no permite ajustar tamaños de forma manual.

Listado con contador

Lista de elementos de manera clara y organizada de forma enumerada. Contiene hasta 10 ítems.

1. Crear la sección con el color selector TU+. *Importante para mantener los estilos de la lista numerada TU+.
2. Coloca la información de cada ítem (Hasta 150 caracteres). También se puede cambiar la ubicación con un arrastre y soltar del elemento.

Galería videos

Permite cargar de forma ilimitada y ordenada material audiovisual.

1. Al cargar el componente en una sección, podemos agregar un título que describa su contenido. (Hasta 50 caracteres).
2. Para subir el video, simplemente añade el contenido multimedia. Puedes buscarlo en línea o cargarlo de forma local, y quedará embebido en la plataforma. El texto del video servirá como título del ítem (Hasta 100 caracteres).
3. En la pestaña de diseño podemos reproducir el video en forma de pop up al habilitarlo.
4. Añade la portada como una imagen tipo thumbnail con dimensiones de 1400 x 787 px. Si no tienes una imagen disponible, el sistema utilizará automáticamente la imagen predeterminada de YouTube.
5. Créditos y pie de video si aplica.
6. Para agregar más ítems de video, simplemente selecciona "añadir video". Si deseas cambiar el orden de los videos, puedes hacerlo fácilmente utilizando la función de arrastrar y soltar.

Párrafo estructurado

El párrafo estructurado te permitirá disponer de un área para título, subtítulo y cuerpo de texto, todo con un estilo coherente y alineado con los estándares de la Universidad.

1. Opciones para agregar título y subtítulo. En párrafo permite editar texto alinear, viñeta número, viñeta símbolo, hipervínculo, negrita, itálica y subrayado.

Línea de tabs

La Línea de tabs te permite crear botones alineados horizontalmente. Cada botón puede incluir un título, un subtítulo y un ícono, haciendo que la navegación sea clara y visualmente atractiva.

1. Al seleccionar el componente, lo primero que debemos hacer es colocar el texto correspondiente al segundo nivel. Luego, añadimos el ID del ícono que deseamos utilizar.
2. Nos dirigimos a la página de Google Material Icons. Al seleccionar el ícono de nuestra preferencia, ubicamos el "Icon name" en el panel derecho y copiamos el ID para usarlo en la página.
3. En el apartado enlace vamos a buscar entre el listado de páginas internas y lo seleccionamos.
4. Texto como enlace funcionara como título de la sección.
5. Para agregar más botones, simplemente selecciona "añadir Tab". Si deseas cambiar el orden de los videos, puedes hacerlo fácilmente utilizando la función de arrastrar y soltar.

Marquesina

La Marquesina te permite crear contenido destacado en un formato dinámico de deslizamiento horizontal.

1. Al seleccionar el componente, lo primero que debemos hacer es colocar el texto correspondiente al título, el cual será el que se mostrará en pantalla. Luego, seleccionaremos el color de fondo; dentro de las opciones tenemos Claro y Oscuro.

2. En la sección “Animación” seleccionaremos si el texto tendrá desplazamiento animado o estará fijo.

Componente Iniciativas

Esta opción permite configurar las iniciativas para su visualización en el sitio TU+. Ofreciendo así un acceso rápido y sencillo al contenido de todas las iniciativas del sitio TU+.

1. Para configurar una iniciativa, hay dos formas de hacerlo. La primera es mediante la opción 'Agregar contenido' del tipo 'Iniciativa', siguiendo los pasos para completar cada campo con la información requerida. La segunda opción, y la recomendada, es utilizar la plantilla prediseñada, ya que facilita considerablemente la creación del contenido tipo 'Iniciativa'. Para ello, ve a 'Contenido > Agregar contenido > Iniciativa', selecciona 'Mercury= +' y luego elige 'Template Initiative'.
2. Diligencia las pestañas 'Datos básicos', 'Multimedia' y 'Categorización' con la información correspondiente a cada campo del encabezado de la iniciativa.
3. Edita cada sección de la plantilla con la información correspondiente a la iniciativa.
4. Finalmente, una vez se hayan diligenciado y editado todas las secciones con la información correspondiente a la iniciativa, haz clic en la opción 'Guardar'.

Tarjetas Iniciativas

Esta opción permite configurar las tarjetas de iniciativas para su visualización en ciertos contenidos del sitio TU+. Se pueden aplicar filtros en distintas secciones para facilitar la búsqueda por fecha o fundamentos relacionados, ofreciendo así un acceso rápido y sencillo al contenido filtrado de todas las iniciativas de TU+.

1. Para acceder al componente de Iniciativas, primero se debe invocar el bloque Drupal Uniandes Taxonomy Filter Block en el campo Bloque Drupal.
2. Al seleccionar el check de título, se mostrará un valor por defecto. Si no se selecciona, se visualizará el valor ingresado en el campo.
3. En la lista desplegable, seleccione:
   • Vista: initiative - Presentación: block_home_initiative si es para la página de inicio con tipo de contenido "página básica".
   • Vista: initiative - Presentación: block_home_fundamentals si es para el tipo de contenido "iniciativa".
   
4. Diligenciar los campos de la siguiente manera:
   • Display Mode: Tarjeta iniciativa
   • Select Layout Mode: Grid-Row-1-Col-3
   
5. Para agregar un botón de enlace:
   • Marca la casilla.
   • En el campo "Select button location", selecciona "bottom button".
   • Ingresa el texto deseado en el campo "Button text".
   • Ingresa la URL de la página de filtros y resultados que muestra todas las iniciativas. Finalmente se debe hacer click en las opciones de Guardar para poder visualizar los cambios.
   

Filtros y resultados iniciativas

Esta opción permite configurar los filtros y resultados para la visualización en el sitio TU+ de las tarjetas de iniciativas, filtradas según los fundamentos deseados, ofreciendo así un acceso rápido y sencillo al contenido de todas las iniciativas del sitio TU+. Para configurar el componente Vista de Iniciativas, se deben seguir los siguientes pasos:

1. Acceder al nodo a editar:
   • Dirígete a Administración → Contenidos o accede directamente a /admin/content.
   • Crea una Página básica y asígnale el título Iniciativas.
   • En la sección Alias de URL, desactiva la opción Generar alias de URL automáticos y asigna manualmente la siguiente URL: /transformacion-uniandes/iniciativas
   
2. Administración del nodo:
   • En la sección donde deseas insertar el bloque, haz clic en el botón +.
   • Selecciona Uniandes Breadcrumbs.
   • Agrega un título en la opción Título.
   • Agrega una descripción en la opción Párrafo.
   
3. Agregar el bloque de la vista. Fuera de la sección anterior, inserta el componente Vista Drupal para la vista de iniciativas:
   • Haz clic en el botón +.
   • Selecciona Vista Drupal.
   • En el campo Vista referenciada, busca Iniciativas.
   • En la sección Presentación, selecciona Bloque Iniciativas con filtros.
   
4. Guardar la configuración:
   • Haz clic en Guardar para aplicar los cambios.
   • Finalmente, guarda el nodo. Este contenido podrá ser accedido desde las diferentes secciones donde se muestran las tarjetas de iniciativas, como el home, o si el usuario se encuentra en una iniciativa, podrá acceder a través del botón Explorar más iniciativas.
5. 

Configurar componente Podcast TU+

Esta opción permite configurar el componente Listado de episodios por serie para su visualización en el sitio TU+, facilitando un acceso rápido y sencillo a los episodios de una temporada relacionados con una serie. Para configurar el componente Podcast, se deben seguir los siguientes pasos:

1. Acceder al nodo a editar
   • Dirígete a Administración → Contenidos o accede directamente a /admin/content.
   • Localiza el nodo que deseas modificar y haz clic en "Editar".
2. Administración del nodo:
   • En la sección donde deseas insertar el bloque, haz clic en el botón +.
   • Selecciona Componente Podcast Listado Serie
   
3. Agregar el Componente Podcast Listado Serie
   • En el campo Listado de series selecciona la Serie que desea renderizar
   • En el campo Listado de temporadas selecciona la temporada a renderizar
   
4. Guardar la configuración:
   • Haz clic en Guardar para aplicar los cambios.
   • Finalmente, guarda el nodo.

Imagen

La carga de imágenes en la sección de contenidos es muy sencilla y te permite enriquecer tu página con elementos visuales.

1. Abrir directorio multimedia.
2. Opción de añadir o seleccionar imágenes del directorio. Filtros por nombre y orden alfabético.

   Formatos permitidos: png, gif, jpg, jpeg y webp. - Peso máximo 1MB.

3. Créditos y pie de foto si aplica.
4. En diseño selecciona el aspecto relación y alineación para el bloque de imagen.Es posible modificar la ubicación del pie de la imagen.

Video

Puedes añadir contenido audiovisual de manera directa o a través de plataformas como YouTube y Vimeo. Esto te permite integrar videos fácilmente en tu página, enriqueciendo tu contenido y haciéndolo más atractivo para los visitantes.

1. Añadir contenido, ubicaremos un repositorio de videos local o en la nube.
2. Para colocar un video de Youtube o Vimeo, pega el enlace completo.
3. Opciones de caption para video (Texto descriptivo) - Miniatura del video 1400 x 787 px - Créditos y pie de video.

Galería

La galería es un método interactivo para agrupar fotografías, ya sea en un formato normal o deslizable. Puedes añadir títulos y descripciones a cada imagen, lo que facilita la organización y proporciona contexto adicional para los visitantes.

1. Selecciona 'Añadir contenido multimedia' y elige la imagen desde nuestro repositorio multimedia. También puedes agregar créditos y un pie de foto como opciones adicionales.
2. Es obligatorio colocar el aspecto relación de la imagen. Se puede personalizar la ubicación caption de la imagen.Aspecto de relación: 1:1, 5:4, 4:3, 3:2, 16:9, 2:1, 4:5, 3:4, 2:3, 9:16 y 1:2
3. Para cambiar el orden de cada ítem, simplemente arrástralo y suéltalo en la posición deseada.

Espaciador

Para mejorar la legibilidad y organización de tu documento, es recomendable agregar espacios entre los bloques horizontales. Esto no solo hace que el contenido sea más fácil de seguir.

Espacios entre 0 a 240 px

Divisor

Organiza mejor tu contenido y hacerlo más legible, es una excelente idea dividir los contenidos a través de una línea horizontal. Esta técnica no solo ayuda a separar secciones de manera clara.

Bloques Drupal para contenidos

Son utilizados para crear contenidos personalizados, permitiendo ser reutilizado entre páginas desde los componentes. Existen 4 tipos de bloques banner, banner interno, bloque listado enlaces y bloque tarjetas. Para ingresar en el menú busca Contenidos > Bloques.

1. Banner: Use Banner para configurar imagen y contenido relacionado que se quiera destacar en el sitio. Coloca los datos básicos título (Hasta 80 caracteres), descripción del bloque muy breve y descripción (Hasta 150 caracteres).En multimedia es importante tener la versión escritorio (1400x787 px) y mobile (600x1066 px). En ambas opciones de agregar créditos y pie de foto. También agregar contenido audiovisual.Opción de dos botones para enlace URL completa o path, texto de enlace (Hasta 35 caracteres), atributos URL _self = Misma ventana | _blank = Nueva pestaña y contenido relacionado por búsqueda.
2. Banner Interno: Use este bloque para configurar el componente de banner interno. Coloca el título (Hasta 50 caracteres), descripción del bloque muy breve y descripción (Hasta 250 caracteres).Carga de la imagen (1400x700 px) o fondo de color amarillo, claro y oscuro. Configuraciones para el enlace tipo banner interno, link y botón.Opción de dos botones para enlace URL completa o path, texto de enlace (Hasta 35 caracteres), atributos URL _self = Misma ventana | _blank = Nueva pestaña y contenido relacionado por búsqueda.
3. Bloque listado Enlaces: Use este bloque para configurar 3 tarjetas que pueda añadirse en páginas básicas. Coloca Descripción del bloque muy breve y título sección.Listado de enlaces tipo “Outward Link” pegar enlace path o completo. Título del ítem (hasta 80 caracteres).Los atributos indica que la página de destino hacia la que apunta y nombre ID único. Atributos para _self = Misma ventana | _blank = Nueva pestaña.

Vistas - Bloques Drupal automáticos

Lista de bloques creados desde desarrollo para usos exclusivos dentro de la plataforma. Esta divido en dos grupos Social media Share y Uniandes DS Blocks.

Bloque de compartir en redes sociales

Sistema para compartir la página del sitio en tus redes sociales para que tus amigos y seguidores puedan descubrir y disfrutar del contenido.

Block form iframe

Enlaza el formulario que esta embebido que va en la página de transparencia.

Block resulst count

Complemento para mostrar en la página de resultados la búsqueda por palabra clave.

Block view tabs

Bloque utilizado en la página de resultados. Carga por medio de tablas según tipo de noticias y eventos.

Bloque autor y coautor Uniandes

Llamado del nombre autor o coautor de la noticia. Que es agregado en la parte de datos básicos. *Aplica para noticias.

Bloque contenido destacado

Permite cargar contenido destacado de forma manual para noticias y eventos TU+. Hasta 5 destacados.

Bloque de encabezado de noticia

Encabezado con título e imagen de la noticia. Carga los datos de imagen de encabezado, formato, título, texto descriptivo y taxonomías. *Aplica para noticias. Tenemos 8 header disponibles por cada tipo de formato de noticia.

Bloque personas relacionadas con la noticia

Se pueden agregar hasta 4 personas se cargan de forma directa. Usando el buscador y atributos para URL _self = Misma ventana | _blank = Nueva pestaña.

Uniandes Breadcrumbs

Añade la miga de pan en el cuerpo del sitio. Dependiendo de la página de enlace padre, se mostrará toda la ruta jerárquica para facilitar la navegación.

Uniandes Eventtia - Eventos

Componente permite seleccionar el listado de eventos a través del ID.

El ID genérico para eventos es “events”. Para eventos destacados, utiliza “block_featured”, y para otros eventos en la lista, usa “block_other_featured”.

Uniandes taxonomy filter block

Este componente te permite seleccionar y organizar el listado de noticias según el tipo de noticia y el formato que prefieras.

1. Selecciona el tipo de vista que deseas usar. Ver guía.
2. Tipos de formatos de noticias para filtrar.
3. Tipo de display y diseño por grillas. Ver guía.

Insertar bloque Drupal

Es utilizado para colocar bloques de contenido en forma predeterminada, con toda una serie de directorios libres para usar según cada situación. Importante revisar el detalle de cada función.

1. Listas > Bloque Drupal aparecerán la lista completa de bloques para usar.
2. Luego de seleccionarlo esta la opción de colocar un título y mostrarlo. Según el tipo de vista importante ocultar el título.