custom theme

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     En el desarrollo de páginas web, existen múltiples escenarios y posibilidades, que nos permiten especializarnos en determinadas herramientas o procedimientos, de acuerdo con nuestras destrezas y/o formación. De ahí que, es cada vez más habitual, encontrar algunos profesionales, que aunque inicialmente se habían formado o especializado en el Diseño Gráfico, hayan decidido experimentar o reinventarse, dedicándose a la maquetación web o Diseño Frontend, como se conoce hoy en día.

     Uno de los problemas más frecuentes, al inicio de esta nueva experiencia, es la rapidez con la que puede cambiar, todo lo relacionado con la apariencia y funcionalidades de la web, ya que intervienen factores como la experiencia de usuiaro (UX), la velocidad de respuesta de la web al conectarse al servidor, o la posilidad de adaptarse a múltiples dispositivos.

     De ahí que resulte casi imposible, mantenerse al día en una herramienta específica o procedimiento, pensado para facilitar o mejorar el diseño Frontend, ya que constantemente se efectúan cambios y mejoras, que nos pueden crear una sensación de frustración, a pesar de que hayan pasado a penas, un par de años desde que aprendimos, por ejemplo, un framework como angular, react, vue.js, next, nuxt o cualquier otro.

     Por suerte, hace ya varios años, a un señor de nombre Brad Frost, se le ocurrió una idea revolucionaria, que todavía se aplica a día de hoy, y que nos facilitará mantener el ritmo de evolución, acorde con cualquier herramienta o procedimiento relacionado con la maquetación o Frontend. Se trata de la metodología llamada Diseño Atómico o Atomic Design, cuyo propósito fundamental es, según sus propias palabras:

"Atomic Design detalla todo lo que se necesita para crear y mantener sistemas de diseño sólidos, lo que le permite implementar interfaces de usuario más consistentes y de mayor calidad más rápido que nunca. " 

     ¿Qué es el Diseño Atómico?

        En resumen, el objetivo de esta metodología es establecer una jerarquía, que nos permita analizar y dividir,  nuestros proyectos web, en varios elementos y/o estructuras, comenzando por el más sencillo, al que llamaremos átomo, ejemplo un icono, hasta ir al más complejo que sería la unión de todos en un Sistema, ejemplo una página completa.

       La siguiente imagen muestra de forma más gráfica el conjunto de fases, o elementos que forman esta metodología:

     Nuestro proyecto web es un proyecto de piezas Lego

        Todos conocemos el famoso juego para niños, conocido como Lego, formado por varias piezas que permiten crear, prácticamente toda clase de estructuras complejas, a partir de la unión de éstas. Si comparamos el juego con un proyecto web en este caso, podríamos entender, más fácilmente, de qué se trata esta metodología y lo mucho que puede aportarnos ante cualquier reto de desarrollo.

        A continuación te cuento en qué consiste cada una de las "Piezas" con las que deberíamos trabajar a partir de ahora, para sacar el mayor provecho de este nuevo enfoque. 

        Recuerda que esto es sólo una guía, para simplificar la categorización de tu proyecto, no obstante, puedes añadir tanto como necesites de acuerdo a tus propias necesidades de análisis y estructura.

      Atomo

         Son aquellos elementos más pequeños o con una jerarquía menor. Un átomo es aquel elemento que por sí mismo no significa nada y necesitará ser acompañado por otros átomos para tener sentido. Un ejemplo de un átomo podría ser un título, un texto, un área, un icono, una línea. El átomo debe ser nombrado, definido y acotado con márgenes para conocer cómo se comporta al ser juntado con otros átomos y no crear una lucha entre ellos.

     Moléculas

        Cuando dos o más átomos se juntan, crean moléculas. Las moléculas es el mínimo elemento que empieza a poder ser usado de manera aislada. Una molécula ofrece información suficiente como para guiar una acción dentro de la interfaz. Se debe evitar sobrecargar la molécula de átomos. Éstas son secciones en nuestra interfaz una cabecera, un footer, un post, etcétera. Como ocurre con los átomos, la molécula debe ser definida y acotada de nuevo para poder saber como se comporta en convivencia con sus semejantes.

    Organismos

        Formados por dos o mas moléculas, los organismos forman una sección o parte de nuestro producto. Los organismos ofrecen una experiencia completa al usuario. En productos digitales sencillos como una web, organismos serían todas aquellas páginas (home, contact, about, etc.) que la forman.

     Sistema

        El sistema, por lo tanto, sería el todo. La web, aplicación, software o cualquier producto digital que estemos construyendo.

     Aplicado a un entorno web, en la siguiente imagen podrás ver la diferencia entre átomo y molécula, en el caso de un carrusel de imágenes, que a su vez, forma parte de un organismo mayor, que sería la página Home o principal del proyecto.

     El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan juntas para crear sistemas de diseño de interfaces de una manera más deliberada y jerárquica. Las cinco etapas del diseño atómico son:

1. Átomos
2. Moléculas
3. Organismos
4. Plantillas
5. Paginas

     El diseño atómico no es un proceso lineal , sino un modelo mental que nos ayuda a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo . Cada una de las cinco etapas juega un papel clave en la jerarquía de nuestros sistemas de diseño de interfaces. Vamos a sumergirnos en cada etapa con un poco más de detalle.

     Si a partir de ahora, en cada nuevo proyecto o renovación de algún proyecto existene, aplicamos y manteneos este tipo de organización de elementos en nuestro trabajo de diseño, ahorraremos esfuerzo y malentendidos entre nuestro diseño y el departamento de programación. Además, facilitará su trabajo, haciendo que puedan visualizar y traducir el diseño a código de una manera más directa.

     Si quieres aprende más sobre el Diseño Atómico visita la Web Oficial de su creador

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

    Si te apasionan las animaciones y los efectos, pero no tienes demasiada experiencia en el diseño frontend para tus web con Drupal, aquí tienes un módulo que te facilitará este proceso. Se trata del módulo contribuido Hover Effects, que una vez instalado, te permitirá aplicar una gran cantidad de efectos en tus contenidos, modificando ligeramente tus plantillas twig, obteniendo un aspecto más atractivo en tus diseños.

     El módulo no tiene página de configuración, así que lo único que necesitarás, una vez lo hayas instalado y activado, es visitar la página de muestra, que está en su página oficial, para que puedas ver y compiar en tus plantillas y elegir la combinación de efectos que más te convenga.

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Paso 1 Descargar el módulo:

     Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

     Para activar el módulo Hover Effects, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en hover_effects -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.    

Paso 3 - Visitar y elegir el efecto y estructura que quieres:

     Tan pronto como tengas activado el módulo hover effects, sólo tendrás que visitar la página de demostración, el enlace lo tienes en su página oficial: http://gudh.github.io/ihover/dist/index.html

     Una vez sepas cuál es el efecto que deseas añadir a tus contenidos, tendrás que activar el modo debug, para conocer los nombres de las plantillas sugeridas por drupal, y de esta forma modificar sólamente el o los contenidos que te interesen. 

     Hay varias formas de activar el modo debug, puedes hacerlo según la Página oficial de Drupal, pero yo suelo recomendar esta manera: HAZ CLIC AQUI .

   CÓMO APLICAR LOS EFECTOS DEL MÓDULO HOVER EFFECTS

        En este caso, ya hemos activado el modo debug, para conocer los nombres sugeridos por drupal, y así afectar al contenido que nos interesa, en este ejemplo, serán los artículos, así que he creado dos artículos, que es uno de los tipos de contenido que nos viene con Drupal por defecto, y lo único que he añadido es una imagen a cada uno y un poco de texto.

        No he modificado nada más de los artículos, ni del drupal, así que si hacemos clic en el logo o vamos a nuestra página principal de Drupal, deberíamos ver los dos artículos en modo de vista resumido o teaser, con un aspecto parecido a la siguiente imagen.

Ahora, para hacerlo más interesante, crearemos una vista en formato bloque, donde mostraremos la imagen y el título de cada artículo. De esta manera, podremos apreciar mejor, la potencia de este módulo.

     Paso 1 - Creación de la vista tipo bloque: Lo primero que tendremos que hacer, será crear una vista, tipo bloque, en la que mostraremos la imagen y el título para los artículos, así que nos iremos a la url "/admin/structure/views/add", o navegaremos por el menú superior, en caso de tener el módulo Admin_toolbar instalado.

     Paso 2 - Configuración de la vista: Una vez creada nuestra vista, nos aseguraremos de haber seleccionado Campos, y añadiremos, para este ejemplo, el campo imagen, ya que, por defecto, se ha añadido ya el campo título.

     Paso 3 - Ajustes en el campo imagen: Si volvemos a la página de muestas para los efectos, notaremos que utilizan la url de las imágenes, en lugar de la imagen propiamente dicha, por esta razón, modificaremos el campo imagen, para que muestre la url con su ubicación. Para ello, haremos clic en el botón editar a la dercha del campo y a continuación, cambiaremos en el selector, por el valor url.

     Paso 4 - Activación de la vista Bloque: Ahora que tenemos los cambios necesarios, nos dirigiremos a la página de configuración para los bloques, ubicada en "/admin/structure/block", y activaremos nuestro bloque, para que se muestre en la página principal.

     Paso 6 - Primera comprobación de resultados: Lo próximo que tendremos que hacer, será dirigirnos a nuestra página principal, para ver el resultado que hemos obtenido. Por ahora, deberíamos ver, los títulos de los artículos, acompañados por las urls de cada imagen principal.

     Paso 7 -  Reescribir la vista: Si todo lo anterior ha funcionado según lo que esperábamos, entonces es el momento de aplicar el código que asociado al efecto que más nos guste y a continuación, pegarlo en la plantilla sugerida por Drupal, sustituyendo los valores que hagan falta.

     Si no sabes cómo se reescribe una vista, Te lo explico en estos dos artículos:

     Personzalizando Vistas Parte 1: HAZ CLIC AQUÍ

     Personalinzando Vistas Parte 2: HAZ CLIC AQUI

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Bootstrap sigue siendo una de las mejores alternativas, al momento de maquetar webs responsivas, ya que no necesitas tener conocimientos avanzados, para lograr maquetar de manera rápida, atractiva y funcional cualquier proyecto web.

     Al combinar las características y funcionalidades con Drupal, con Bootstrap, podrás realizar casi cualquier tipo de proyecto web, sin invertir demasiado tiempo, en añadirle una apariencia que cumpla con todos los estándares necesarios actualmente, para que obtengas los mejores resultados a nivel de la experiencia de usuario, posicionamiento, etc.

     En este tutorial, te explicaré todo lo que necesitarás acerca de la instalación del tema Bootstrap 5 y de cómo puedes generar, un subtema o tema personalizado para tus proyectos de Drupal 9 o superiores, sin tener que avandonar la interfaz de usuario de Drupal.

   Requerimientos:

• Tener un proyecto de Drupal 9 o superior funcionando.
• Tener acceso a la consola.
• Tener la posibilidad de ejecutar Composer, para la descarga e instalación de temas y módulos.

   Descarga e instalación de Bootstrap 5 para Drupal.

     Paso 1 - Descarga del Theme Bootstrap 5

        Una vez tengamos nuestro proyecto de Drupal 9 en funcionamiento, lo próximo será visitar la Página Oficial de Bootstrap 5, y a continuación, copiaremos el comando de instalación, para pegarlo y ejecutarlo en nuestra consola.     

      Una vez terminada la descarga, podrás comprobar que se han descargado todos los archivos necesarios, visitando en tu proyecto Drupal 9, la carpeta ubicada en "/web/themes/contrib", con el nombre bootstrap5.

   Paso 2 - Instalación del tema base

     Para poder generar el subtheme basado en Bootstrap 5, primero tendremos que activarlo. Para ello, nos dirigiremos a la página de configuración de los Themes en Drupal, ubicada en la url "/admin/appearance", donde veremos el listado de los módulos descargados, instalados y no instalados.

     Como sólo queremos instalar el Theme Bootstrap 5, porque lo necesitamos para generar el Subtheme, nos desplazaremos en la misma pantalla, hasta encontrarlo en el listado de módulos desinstalados y haremos clic en la opción Activar.

   Paso 3 - Generar el Subtheme o Tema personalizado

     La mayor ventaja, con respecto a otras versiones anteriores de Bootstrap para Drupal, es la opción de generar el Subtheme, sin la necesidad de avandonar la interfaz de usuario, ni ejecutar código a nivel de la consola, como require cuando trabajamos con Bootstrap Barrio.

     Para generar un Subtheme, haremos clic en el enlace de configuración, de Bootstrap 5, nos desplazaremos hasta el final de la página y buscaremos la pestaña llamada Subtheme, una vez desplegada la pestaña, podremos ver las opciones relacionadas con la ubicación, el nombre del subtheme y el nombre del sistema o nombre máquina.

   Paso - Comprobación

     Tan pronto como hayamos hecho clic en el botón Crear, se generarán los archivos de nuestro Subtheme, en la ubicación detallada al principio de la pestaña, es decir, dentro de "themes/custom"; si abrimos los archivos del proyecto, podremos verificar, que efectivamente, tendremos una carpeta con el nombre del subtheme y todos los archivos para su funcionamiento, una vez se haya activado.

     Para activar el nuevo Subtheme, solo tendremos que volver a la página de configuración, ubicada en "/admin/appearance", donde esta vez, encontraremos el recién generado subtheme, con todas las opciones de su tema base, donde podremos configurarlo y, además, añadir otras opciones específicas, disponibles en la pantalla de configuración de éste.

     Una vez tengamos añadidas todas las personalizaciones adicionales, podremos volver a nuestra página principal y comprobaremos dichos cambios.

     También podremos agregar más cambios, a través de los archivos CSS o Sass, que se han generado durante el proceso.

     Si quieres saber cómo trabajar con los Themes y Subthemes en Drupal, tienes disponbile este curso gratuito, donde he recopilado los principales videos y documentación relacionada, para que puedas profundizar, de forma rápida y aplicar lo aprendido en tus proyectos:

     Para acceder al curso, HAZ CLIC AQUI

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Ahora que ya hemos aprendido Cómo crear breakpoints y habilitarlos usando nuestro tema personalizado, el siguiente paso consistirá en crear y configurar, los estilos que se aplicarán en nuestras imágenes responsivas, para que Drupal pueda seleccionar y mostrar el tamaño adecuado en cada uno de los dispositivos.

     Los estilos permitirán reducir considerablemente el tiempo de descarga, tanto de las imágenes de nuestra web, como de la web misma, haciéndola más atractiva y útil para todos los usuarios, y lo más importante, sin perder el impacto que nos añaden unas buenas imágenes, a nivel gráfico, de cara al público que nos visita.

     Cuando trabajamos con Drupal, tenemos la posibilidad de crear estilos personalizados, para todas nuestras imágenes, que serán aplicados una vez las hayamos subido al servidor utilizando la interfaz de usuario, esto significa que, aunque nuestra imagen original fuera, por ejemplo, más ancha que alta, podríamos redimensionarla o recortarla, para que se ajustara a nuestras necesidades, sin la necesidad de utilizar ningún programa de retoque fotográfico.

     Además, los estilos de imágenes podrán ser reutilizados, manipulando la interfaz de usuario, en todo tipo de contenidos, vistas, bloques u otros elementos como paragraphs.

     Un ejemplo práctico en el que podríamos utilizar los estilos personalizados, sería una página web en la que los usuarios pudieran subir productos, o sus propias imágenes para un blog interactivo de cocina. Si dejáramos en manos de los usuarios el tamaño de las imágenes, podríamos arriesgarnos a romper la estética general de la web; pero si definimos las dimensiones exactas para las imágenes, siempre conservaremos la misma apariencia, ya que cada imagen subida se adaptaría automáticamente, una vez hayan sido guardados los cambios en el contenido recién creado por el usuario.

     Para definir los estilos que aplicaremos en nuestras imágenes dentro de Drupal, nos iremos a la url "/admin/config/media/image-styles", y desde allí podremos crear nuevos estilos, o reutilizar algunos de los que vienen creados por defecto, en todas las instalaciones de Drupal.

     Al definir estilos personalizados, es recomendable que utilicemos las medidas que vamos a aplicar, como parte del nombre del estilo, de esta forma será más fácil de identificarlos cuando los necesites.

     Aunque los estilos nos permiten modificar varias de las características, como la dimensión o la proporción de la imagen, entre otras, no nos convierten dichas imágenes en responsivas o adaptables, automáticamente. Es por esta razón que hemos habilitado el módulo Responsive Image, que está integrado como parte de los módulos del núcleo de Drupal, a partir de la versión 8, aunque no viene activado por defecto.

     Una vez hayamos activado dicho módulo, veremos que se añade otra opción relacionada con los archivos del tipo MEDIA, llamado Estilos adaptables de la imagen. Podremos comprobarlo desde la url "/admin/config/media", y si hacemos clic sobre el enlace, veremos una ventana parecida a la de los estilos de imagen, pero con dos nuevos tipos de estilo preconfigurados.

     Si luego hacemos clic en el botón editar del primero de los estilos, y luego desplegamos el selector llamado Grupo de salto de pantalla, veremos el listado de los temas disponibles en nuestro proyecto, y uno de ellos será nuestro tema personalizado, ya que lo hemos configurado previamente.

     Cómo crear estilos y aplicarlos a imágenes en cada Breakpoint o punto de quiebra.

             Ahora que ya conoces dónde y cómo se crean los estilos de imágenes, si queremos aplicarlos en nuestras imágenes responsivas, tendremos que hacerlo en dos fases:

     1.- Crear el estilo en los estilos de imágenes, para después añadirlos a nuestros estilos responsivos.
     Para ello, iremos a la url "/admin/config/media/image-styles", que mencionamos al principio de este artículo y crearemos varios estilos con el propósito de redimensionar nuestras imágenes proporcionalmente, equivalente a las medidas de cada uno de los Breakpoints o puntos de quiebra que hemos configurado.

2.- Crear nuestros estilos resposivos y configurarlos con sus respectivos Breakpoints o puntos de quiebra.
     Una vez hayamos creado todos los estilos de imagen, en nuestro caso, los seis estilos equivalentes a cada uno de los Breakpoints o puntos de quiebra, podremos, añadir nuestro primer Estilo adaptable a la imagen, por ejemplo Estilos Imagen Artículo y a continuación añadir en la siguiente pantalla, cada estilo asociado a cada Breakpoint.
 

     3.- Añadir el estilo que acabamos de configurar al campo imagen de nuestro contenido.
     Los estilos de las imágenes se aplicarán para la presentación del contenido, por lo tanto, seleccionaremos la pestaña "Gestionar Presentación", y a continuación, seleccionaremos "Imagen adaptable", en el selector para poder seleccionar luego el nombre del estilo que acabamos de crear.

     4.- Una vez guardados los cambios podremos comprobar, si exploramos el elemento en el navegador. Veremos que se ha añadido la etiqueta <picture> y que se mostrarán varias opciones en función del dispositivo en el que se esté mostrando nuestra web.