sitebuilder

     Con el inminente lanzamiento de Drupal 10, el próximo mes de diciembre, desde su comunidad se han lanzado varios cambios y recomendaciones, que deberíamos tener en cuenta, para evitar posibles fallos en cualquiera de nuestros proyectos.

     Si visitamos la página oficial relacionada con este asunto Deprecated and obsolete modules and themes, podremos comprobar que desde ahora: "Las extensiones ahora pueden definir explícitamente un ciclo de vida: valor en sus archivos de información para indicar si algo es experimental (nuevo e inestable), estable (predeterminado), obsoleto u obsoleto".

     Es decir, que al actualizar tus proyectos, siguiendo la recomendación de utilizar Composer, serán removidas o desactivadas, todas las funcionalidades, themes o módulos, marcados con la categoría Deprecated, esto podría suponer un gran impacto, sobretodo en aquellos proyectos, cuyo grado de personalización esté directamente relacionado con alguno de estos módulos.

     Es por esta razón, que vamos a explorar algunos de estos cambios y recomendaciones, para que podamos reaccionar a tiempo, antes de decirdirnos por una actualización a la versión más actual de Drupal.

   Deprecated Themes

     En esta primera parte, hablaremos sobre los nuevos Themes por defecto, para tus actualizaciones de Drupal 9 y 10. Ya que han sido sustituidos, tanto el tema de administración, cuyo puesto estaba consolidado para el Theme Seven y en lo que respecta a la parte frontal de tu web, estaba encargado el Theme Bartik.

   Nuevos themes por defecto

     A partir de ahora, siempre que realices una instalación nueva de Drupal 9, el Theme por defecto para la parte de administración será el llamado Theme Claro y para la parte frontal, el nuevo Theme Olivero, será el encargado de ello.

     Al igual que en versiones anteriores de Drupal, cuando seas el administrador del proyecto, verás ambos themes fusionados, para facilitarte las tareas de navegación, creación de contenidos o cualquier otro tipo de configuración

     El propósito fundamental de este nuevo cambio, es añadir un mejor aspecto, más visual y funcional, que sus antecesores, haciendo la interfaz más amigable y atractiva.

   Cómo se cambia un theme

     En Drupal, el aspecto de tus proyectos se define en el apartado de Apariencia, donde encontrarás el listado de Themes activados y desactivados.

     En la parte inferior, justo debajo del listado de los themes desactivados, entontrarás un selector, con los nombres de los temas "Instalados", es decir, disponibles para aplicarlos en tu proyecto, tanto a nivel del frontend como de la administración.

     Por lo tanto, para que un Theme aparezca dentro de este selector, deberás hacer clic en la parte inferior derecha del Theme, donde verás dos opciones: 

• Instalar
• Instalar y seleccionar de modo predeterminado

     Si sólo quieres que tu Theme se añada al listado, para que puedas aplicarlo a la administración del sitio, por ejemplo, deberás seleccionar la primera opción (Instalar), de esta forma, podrás activarlo y desactivarlo según tus necesidades.

     En cambio, si quieres hacer que tu Theme controle y cambie, el aspecto de tu proyecto de Drupal, deberás seleccionar la segunda opción, que además de activarlo, aplica el cambio de configuración directamente al aspecto del sitio.

   Theme Olivero (Frontend)

     El Theme Olivero, ofrece un aspecto mucho más elaborado que su antecesor, además de añadir una mejor adaptación con su diseño, en caso de ajustarse a cualquier tipo de dispositivo. (Full Responsive).

     Otra de las mejoras, con respecto a otros Themes, es que una vez instalado, muestra como será el aspecto de tu web, con relación a algunos textos que podrían aparecer en tu página principal.

   Olivero Mobile first

     La gran mejoría, con respecto a su antecesor, es que en su versión móvil, ofrece un diseño muy atractivo, que cuenta con la funcionlidad de ocultar el menú principal en la parte derecha del móvil.

     Llegados a este punto, hoy nos ocuparemos de cambiar el aspecto de nuestra Landing Page, para que comience a verse como nuestra propuesta gráfica. Para ello, lo primero que deberíamos hacer es asegurarnos de que estén todos lo elementos necesarios y los campos, con la información de prueba, que nos permitirá comprobar que todo funciona y se muestra, como esperamos.

    He aprovechado para añadir las imágenes correspondientes, para conseguir un resultado más acorde con el diseño y, si haz comenzado con una instalación desde cero, como hice yo, antes de pasar a la modificación de la plantilla, tu Landing Page, debería tener un aspecto como la siguiente imagen.

   Modificación de bloques

     Por defecto, cuando realizamos una instalación nueva de un theme en Drupal, es muy frecuente encontrarnos con varios elementos colocados en posiciones incorrectas o que simplemente no necesitamos, para nuestros contenidos. En este caso, tendremos que modificar los bloques, que son el equivalente a las "Areas", donde se colocan los contenidos.

     Si ya tienes experiencia previa con Drupal, sabrás como hacerlo, si no es así, tendrás que dirigirte a la página de configuración de los bloques, ubicada en "/admin/structure/block", reorganizar el contenido y desactivar aquellas funcionalidades o contenidos que no vayas a necesitar.

     El aspecto de la página de bloques, es el de la siguiente imagen.

     Una vez que hayamos terminado, con las correcciones relacionadas a los bloques, y antes de pasar a la fase de modificación de nuestra plantilla, el aspecto del tipo de contenido Landing Page, debería corresponder a la siguiente imagen:

   Activando el modo Debug o Depurador de Twig en Drupal.

     Ha llegado el momento de comenzar con la personalización de nuestra plantilla, para ello activaremos el modo debug o depurador de Drupal.

     Existen varias maneras de activarlo, pero yo prefiero seguir los pasos de esta guía. HAZ CLIC AQUÍ.

     Recuerda, que para que sean efectivos estos cambios, será necesario borrar la cache de Drupal y actualizar la base de datos. Puedes hacerlo por medio de la interfaz de usuario de Drupal, o como he hecho yo, utilizando los comando de "drush cr" y "drush updb"

     Si hemos realizado bien los pasos, para activar el modo Debug o Depurador de Twig, al hacer clic en la tecla F12 o seleccionar inspeccionar, haciendo clic derecho sobre la página, deberíamos ver las sugerencias que nos ofrece Drupal, para nombrar nuestra plantilla y poder comenzar con la realización de los cambios.

   Permisos y visualización de paragraphs

     Ahora podríamos decir que estamos verdaderamente, preparados para comenzar con las modificaciones de nuestra Landing Page, pero antes de "ponernos manos a la obra", tenemos que hacer una comprobación muy importante, ya que, hasta el momento, hemos estado trabajando dentro de la interfaz de Drupal, gracias a nuestro usuario administrador, pero los usuarios finales, no tendrán este tipo de acceso, es decir, que al visitar nuestra web, lo harán como usuarios anónimos. Por lo que será necesario comprobar si nuestra Landing Page está accesible y/o visible, para todos aquellos que la visiten.

     Sin cerrar nuestra sesión en el navegador en el que estamos, abriremos una ventana en "Modo Incógnito" y copiaremos la dirección de nuestra Landing Page, para ver el resultado... 

     Efectivamente, nos encontramos con el primer problema durante las tareas de desarrollo, ya que nuestro contenido no está visible para el resto de usuarios que visita nuestra web. Así que vamos a realizar varias comprobaciones, para solucionarlo.

   Causas y soluciones de Contenido no visible en Drupal

     Causa 1 - Contenido no publicado. 

     Aunque por defecto, en Drupal, todos los contenidos están publicados, siempre podremos modificar dicho comportamiento o estado del contenido, desde el listado dentro de administrar contenidos, en la url "/admin/content", o desde el mismo contenido afectado, desmarcando la opción Publicar, que se encuentra al final de este.

     Causa 2 - Permisos de acceso en los Paragraphs.

     Otra de las posibles causas, por las cuales no podemos ver nuestra Landing Page con un tipo de usuario anónimo, puede estar relacionada con los permisos de acceso relacionados específciamente con los Paragraphs, ya que la estructura principal de nuestro tipo de contenido, está formado por varios Tipos de Paragraphs.

     Para confirmar esta información, primero comprobaremos si está activado el módulo encargado de gestionar esta clase de permisos, para ello, volveremos a la página de administración de los módulos, "/admin/modules", y luego buscaremos los módulos relacionados, escribiendo paragraphs en el buscador.

     Ahora que hemos comprobado, que está activado el módulo "Paragraphs Type Permissions", encargado de gestionar los permisos de visualización, para los Paragraphs, la próxima comprobación para corregir el fallo, será dirigirnos a la pantalla de configuración de los permisos en Drupal, ubicada en la url " /admin/people/permissions", ahora, buscaremos el apartado donde están los paragraphs y sus permisos, podremos hacerlo con el buscador del navegador, presionando las teclas Ctrl + F

   A continuación, buscaremos los paragraphs que nos interesa mostrar para los usuarios anónimos y marcaremos la opción de "Ver contenido", en cada uno de ellos. Finalmente, guardaremos los cambios, borraremos la cache de Drupal y volveremos al navegador en Modo Incógnito, para comprobar si se ha corregido el fallo de visualización.

     A partir de este momento, seguiremos trabajando en el Modo Incógnito, para que sea vea todo más limpio. Así que seleccionaremos Inspeccionar, haciendo clic derecho en el ratón, y a continuación, buscaremos la sugerencia al nombre de plantilla, que mejor se ajuste a nuestras necesidades y a continuación, buscaremos la plantilla modelo y la renombraremos, dentro de la carpeta Templates, en nuestro Theme personalizado.

     Como podemos ver, en la sugerencia, buscaremos la plantilla modelo dentro de la carpeta Template del theme Bootstrap, y a continuación, copiaremos el archivo dentro de la carpeta Template, en nuestro Theme Personalizado, con el nombre elegido del grupo propuesto al hacer clic en inspeccionar.

     Debido a que nuestra plantilla está compuesta por un campo dentro del tipo Landing Page y varios Paragraphs, y para tener el mayor grado de control en todos sus elementos, vamos a necesitar de varias plantillas. 

     La que acabamos de crear, será la encargada de modificar el aspecto a nivel global o externo y, posteriormente, añadiremos una plantilla por cada uno de los paragraphs que forman la estructura, de esta manera, cada elemento será independiente a nivel gráfico y de comportamiento, en relación con la información que se muestra en cada uno de ellos.

   Comprobación de la plantilla

     Existe una forma muy simple para comprobar si hemos creado y nombrado bien, la plantilla con la que vamos a trabajar, para ello, solo hay que añadir cualquier palabra o símbolo, al lado de la variable {{ content }} de la plantilla, borrar la cache de drupal y comprobar si se imprime la palabra o símbolo que hemos añadido al visitar la página.

   Modificación de bloques

     Por defecto, cuando realizamos una instalación nueva de un theme en Drupal, es muy frecuente encontrarnos con varios elementos colocados en posiciones incorrectas o que simplemente no necesitamos, para nuestros contenidos. En este caso, tendremos que modificar los bloques, que son el equivalente a las "Areas", donde se colocan los contenidos.

     Si ya tienes experiencia previa con Drupal, sabrás como hacerlo, si no es así, tendrás que dirigirte a la página de configuración de los bloques, ubicada en "/admin/structure/block", reorganizar el contenido y desactivar aquellas funcionalidades o contenidos que no vayas a necesitar.

     El aspecto de la página de bloques, es el de la siguiente imagen.

     Una vez que hayamos terminado, con las correcciones relacionadas a los bloques, y antes de pasar a la fase de modificación de nuestra plantilla, el aspecto del tipo de contenido Landing Page, debería corresponder a la siguiente imagen:

   Activando el modo Debug o Depurador de Twig en Drupal.

     Ha llegado el momento de comenzar con la personalización de nuestra plantilla, para ello activaremos el modo debug o depurador de Drupal.

     Existen varias maneras de activarlo, pero yo prefiero seguir los pasos de esta guía. HAZ CLIC AQUÍ.

     Recuerda, que para que sean efectivos estos cambios, será necesario borrar la cache de Drupal y actualizar la base de datos. Puedes hacerlo por medio de la interfaz de usuario de Drupal, o como he hecho yo, utilizando los comando de "drush cr" y "drush updb"

     Si hemos realizado bien los pasos, para activar el modo Debug o Depurador de Twig, al hacer clic en la tecla F12 o seleccionar inspeccionar, haciendo clic derecho sobre la página, deberíamos ver las sugerencias que nos ofrece Drupal, para nombrar nuestra plantilla y poder comenzar con la realización de los cambios.

   Permisos y visualización de paragraphs

     Ahora podríamos decir que estamos verdaderamente, preparados para comenzar con las modificaciones de nuestra Landing Page, pero antes de "ponernos manos a la obra", tenemos que hacer una comprobación muy importante, ya que, hasta el momento, hemos estado trabajando dentro de la interfaz de Drupal, gracias a nuestro usuario administrador, pero los usuarios finales, no tendrán este tipo de acceso, es decir, que al visitar nuestra web, lo harán como usuarios anónimos. Por lo que será necesario comprobar si nuestra Landing Page está accesible y/o visible, para todos aquellos que la visiten.

     Sin cerrar nuestra sesión en el navegador en el que estamos, abriremos una ventana en "Modo Incógnito" y copiaremos la dirección de nuestra Landing Page, para ver el resultado... 

     Efectivamente, nos encontramos con el primer problema durante las tareas de desarrollo, ya que nuestro contenido no está visible para el resto de usuarios que visita nuestra web. Así que vamos a realizar varias comprobaciones, para solucionarlo.

   Causas y soluciones de Contenido no visible en Drupal

     Causa 1 - Contenido no publicado. 

     Aunque por defecto, en Drupal, todos los contenidos están publicados, siempre podremos modificar dicho comportamiento o estado del contenido, desde el listado dentro de administrar contenidos, en la url "/admin/content", o desde el mismo contenido afectado, desmarcando la opción Publicar, que se encuentra al final de este.

     Causa 2 - Permisos de acceso en los Paragraphs.

     Otra de las posibles causas, por las cuales no podemos ver nuestra Landing Page con un tipo de usuario anónimo, puede estar relacionada con los permisos de acceso relacionados específciamente con los Paragraphs, ya que la estructura principal de nuestro tipo de contenido, está formado por varios Tipos de Paragraphs.

     Para confirmar esta información, primero comprobaremos si está activado el módulo encargado de gestionar esta clase de permisos, para ello, volveremos a la página de administración de los módulos, "/admin/modules", y luego buscaremos los módulos relacionados, escribiendo paragraphs en el buscador.

     Ahora que hemos comprobado, que está activado el módulo "Paragraphs Type Permissions", encargado de gestionar los permisos de visualización, para los Paragraphs, la próxima comprobación para corregir el fallo, será dirigirnos a la pantalla de configuración de los permisos en Drupal, ubicada en la url " /admin/people/permissions", ahora, buscaremos el apartado donde están los paragraphs y sus permisos, podremos hacerlo con el buscador del navegador, presionando las teclas Ctrl + F

   A continuación, buscaremos los paragraphs que nos interesa mostrar para los usuarios anónimos y marcaremos la opción de "Ver contenido", en cada uno de ellos. Finalmente, guardaremos los cambios, borraremos la cache de Drupal y volveremos al navegador en Modo Incógnito, para comprobar si se ha corregido el fallo de visualización.

     A partir de este momento, seguiremos trabajando en el Modo Incógnito, para que sea vea todo más limpio. Así que seleccionaremos Inspeccionar, haciendo clic derecho en el ratón, y a continuación, buscaremos la sugerencia al nombre de plantilla, que mejor se ajuste a nuestras necesidades y a continuación, buscaremos la plantilla modelo y la renombraremos, dentro de la carpeta Templates, en nuestro Theme personalizado.

     Como podemos ver, en la sugerencia, buscaremos la plantilla modelo dentro de la carpeta Template del theme Bootstrap, y a continuación, copiaremos el archivo dentro de la carpeta Template, en nuestro Theme Personalizado, con el nombre elegido del grupo propuesto al hacer clic en inspeccionar.

     Debido a que nuestra plantilla está compuesta por un campo dentro del tipo Landing Page y varios Paragraphs, y para tener el mayor grado de control en todos sus elementos, vamos a necesitar de varias plantillas. 

     La que acabamos de crear, será la encargada de modificar el aspecto a nivel global o externo y, posteriormente, añadiremos una plantilla por cada uno de los paragraphs que forman la estructura, de esta manera, cada elemento será independiente a nivel gráfico y de comportamiento, en relación con la información que se muestra en cada uno de ellos.

   Comprobación de la plantilla

     Existe una forma muy simple para comprobar si hemos creado y nombrado bien, la plantilla con la que vamos a trabajar, para ello, solo hay que añadir cualquier palabra o símbolo, al lado de la variable {{ content }} de la plantilla, borrar la cache de drupal y comprobar si se imprime la palabra o símbolo que hemos añadido al visitar la página.

     Ahora que ya hemos creado nuestro tipo de contenido LandingPage, es el momento ideal, para comenzar a personalizar su aspecto, en Drupal, el responsable de la presentación gráfica de los contenidos es el Theme o el Subtheme que tengamos instalado. Por defecto, Drupal ya viene con varios themes, disponibles, que podríamos personalizar mediante la interfaz de usuario, pero en nuestro ejercicio, vamos a generar un Subtheme, basándonos en el theme Bootstrap barrio, que hemos descargado previamente, como parte de los requerimientos, que analizamos en el primer capítulo del curso.

   Diferencia entre Theme y Subtheme

     Como he mecionado antes, el theme es el encargado de la parte gráfica, entonces, ¿por qué no lo activamos y modificamos su código directamente?, es importante que sepas, que NUNCA DEBES MODIFICAR DIRECTAMENTE EL CÓDIGO DE UN THEME O DE UN MÓDULO EN DRUPAL, la razón, es que si haces eso, perderías todos los cambios al actualizar Drupal, ya que en cada actualización, suele repararse fucionalizades fallidas o se optimiza el código, eliminando aquellos fragmentos y funciones desactualizadas.

     Por esta razón, cuando quieras realizar personalizaciones en un Theme, debes generar un Subtheme, en el que podrás tener disponibles, la funcionalizades del theme o base theme, y al mismo tiempo, añadir tus propios cambios de CSS o del comportamiento de tus plantillas.

   Cómo generar un subtheme Bootstrap barrio desde consola

     Paso 1 - Permisos y posición

       Lo primero que necesitaremos hacer, antes de poder generar un subtheme, desde la consola, es colocarnos en la carpeta themes, de nuestra instalación de Drupal.

       Así, que arrancaremos nuestros contenedores de Docker, si estás siguiendo el curso exactamente como yo, y a continuación, te colocarás en la carpeta donde deberías tener bootstrap_barrio.

     Dentro de la carpeta bootstrap_barrio, existe un archivo, con el código que nos permitirá generar el subtheme, pero antes de poder ejecutarlo, debemos asegurarnos de que cuenta con los persmisos necesarios, así que el siguiente paso será añadirlo, utilizando el siguiente código:

chmod +x scripts/create_subtheme.sh

   Paso 2 - Generar el subtheme

     Una vez hayamos otorgado los permisos al archivo, podremos ejecutar el código que nos generará el subtheme, para ello, sin movernos de dónde estamos, escribiremos el comando:

./scripts/create_subtheme.sh

     A continuación, veremos en la consola, una serie de preguntas relacionada con los datos de nuestro subtheme, que deberemos ir completando hasta el final del proceso. 

     La primera de las preguntas, está relacionada con el nombre_maquina de nuestro subtheme o tema personalizado, tal y como podemos ver en el texto de ejemplo, el nombre puede estar compuesto por una o varias palabras, unidas por un guion bajo. En mi caso, utilizaré landing_theme como nombre para mi subtheme, pero tú puedes utilizar el que prefieras.

     Al contestar la primera pergunta, haremos clic y veremos en la pantalla, la siguiente, que está relacionada con el nombre que se añadirá en el archivo .info.yml, y que veremos al entrar al listado de themes disponibles en la url "/admin/appearance", esta vez, podremos escribirlo cómo queramos. 

     En mi caso, yo utilizaré Landing Page Theme

     Si abrimos nuestro proyecto en el navegador y buscamos en la url "/admin/appearance", encontraremos en el apartado de Themes desinstalados, el nuevo subtheme que acabamos de generar desde la consola.

   Activación y personalización de configuración

     Ahora es el momento de activar el sutheme, comprobar que no hay ningún error en nuestro Drupal, y por ahora, lo único que vamos a modificar de la configuración por defecto es el uso del Contenedor Fluido, para que la cabecera de nuestra LandingPage, ocupe todo el ancho de la pantalla, tal y como se define en la propuesta gráfica.

     Ahora que ya tenemos nuestro subtheme activado sin ningún error, es el momento de crear una LandingPage, con todos los datos de prueba, para comenzar con su personalización, una vez hayamos creado este primer contenido, activaremos el modo debug de Drupal, para saber el nombre de la plantilla correspodiente al tipo de contenido y a continuación, comenzaremos a modificarla e ir añadiendo los valores y campos correspondientes, siguiendo nuestra estructura inicial.

     Para conocer más acerca de cómo trabajar con Themes y plantillas en Drupal, HAZ CLIC AQUÍ

     Para conocer los pasos de activación del modo debug o depurador de Drupal HAZ CLIC AQUI

     Dentro de la carpeta bootstrap_barrio, existe un archivo, con el código que nos permitirá generar el subtheme, pero antes de poder ejecutarlo, debemos asegurarnos de que cuenta con los persmisos necesarios, así que el siguiente paso será añadirlo, utilizando el siguiente código:

chmod +x scripts/create_subtheme.sh

   Paso 2 - Generar el subtheme

     Una vez hayamos otorgado los permisos al archivo, podremos ejecutar el código que nos generará el subtheme, para ello, sin movernos de dónde estamos, escribiremos el comando:

./scripts/create_subtheme.sh

     A continuación, veremos en la consola, una serie de preguntas relacionada con los datos de nuestro subtheme, que deberemos ir completando hasta el final del proceso. 

     La primera de las preguntas, está relacionada con el nombre_maquina de nuestro subtheme o tema personalizado, tal y como podemos ver en el texto de ejemplo, el nombre puede estar compuesto por una o varias palabras, unidas por un guion bajo. En mi caso, utilizaré landing_theme como nombre para mi subtheme, pero tú puedes utilizar el que prefieras.

     Al contestar la primera pergunta, haremos clic y veremos en la pantalla, la siguiente, que está relacionada con el nombre que se añadirá en el archivo .info.yml, y que veremos al entrar al listado de themes disponibles en la url "/admin/appearance", esta vez, podremos escribirlo cómo queramos. 

     En mi caso, yo utilizaré Landing Page Theme

     Si abrimos nuestro proyecto en el navegador y buscamos en la url "/admin/appearance", encontraremos en el apartado de Themes desinstalados, el nuevo subtheme que acabamos de generar desde la consola.

   Activación y personalización de configuración

     Ahora es el momento de activar el sutheme, comprobar que no hay ningún error en nuestro Drupal, y por ahora, lo único que vamos a modificar de la configuración por defecto es el uso del Contenedor Fluido, para que la cabecera de nuestra LandingPage, ocupe todo el ancho de la pantalla, tal y como se define en la propuesta gráfica.

     Ahora que ya tenemos nuestro subtheme activado sin ningún error, es el momento de crear una LandingPage, con todos los datos de prueba, para comenzar con su personalización, una vez hayamos creado este primer contenido, activaremos el modo debug de Drupal, para saber el nombre de la plantilla correspodiente al tipo de contenido y a continuación, comenzaremos a modificarla e ir añadiendo los valores y campos correspondientes, siguiendo nuestra estructura inicial.

     Para conocer más acerca de cómo trabajar con Themes y plantillas en Drupal, HAZ CLIC AQUÍ

     Para conocer los pasos de activación del modo debug o depurador de Drupal HAZ CLIC AQUI

     Ahora que ya hemos activado algunos módulos, necesarios para este proyecto, es el momento de comenzar con la configuración del tipo de contenido Landing Page, para ello, nos dirigiremos a la url "/admin/structure/types/add", o seleccionaremos desde el menú administrador, gracias al módulo Admin Toolbar, la opción de Añadir nuevo tipo de contenido, que nos abrirá la página de configuración, donde podremos comenzar con la definición de todas las características y campos para nuestra LandingPage.

Imagen

     En la primera pantalla de configuración, escribiremos el nombre del nuevo tipo de contenido LandingPage, y a continuación seleccionaremos las opciones básicas, como son:

- Opciones de publicación: Publicado

-  Opciones del menú: Main Navigation o Menú principal

    Desmarcaremos el resto de las opciones, en todas las pestañas, y a continuación comenzaremos con la configuración, haremos clic en el botón inferior de Guardar y administrar campos, que nos llevará a la siguiente pantalla, donde podremos añadir todos los campos, para cumplir con todas las funcionalidades de la propuesta gráfica inicial.

Imagen

     En el capítulo de los requerimientos, llegamos a la conclusión de que, si queríamos ofrecer la usuario la flexibilidad suficiente para personalizar esta LandingPage, tendríamos que ayudarnos del módulo paragraphs, que nos permitirá cumplir con esta posibilidad, así que el primer cambio que haremos a nuestro tipo de contenido, será borrar el campo body, que viene por defecto y en su lugar añadiremos dos nuevos campos:

- CabeceraLanding: tipo Multimedia, gracias a los módulos Media y Media Library

- ContenidosLanding: tipo Paragraphs, en el que añadiremos el resto de componentes personalizables.

   Paso 1 - Configuración Cabecera Landing

     En el caso de la imagen de cabecera para nuestra landing, simplemente, una vez añadido el tipo de campo multimedia, gracias a la activación del módulo, procederemos a definir el resto de configuraciones relacionadas, como reorganizar los campos que se mostrarán en el formulario de creación de la cabecera, definir si queremos un valor por defecto para este campo y ocultar el modo de vista resumen y las etiquetas en la pestaña de gestionar presentación.

Imagen

   Paso 2 - Contenidos Landing

     En el caso de los paragraphs, que ocuparán el campo de ContenidosLanding, tendremos que hacer varios cambios, el primero de ellos será crear los Paragraphs que deberán estar disponibles, dentro del campo ContenidosLanding, y a continuación, los añadiremos al campo dentro del tipo de contenido LandingPage, para que el usuario pueda decidir cómo y cuándo añadirlos a su landing personalizada.

     Al igual que en el paso anterior, para poder trabajar con los paragraphs, es necesario asegurarnos de tener activados, al menos dos módulos esenciales, el Paragraphs y Paragraphs Type Permissions, una vez activados, podremos comenzar a añadir los paragraphs que vamos a implementar, desde al url "/admin/structure/paragraphs_type/add"

     El primer paragraphs que añadiremos será, el que permitirá añadir la imagen del producto, junto a los textos que se muestran en la propuesta gráfica.

     En este caso, ambos campos dentro del paragraph solo deberían permitir un valor, para cada uno, la imagen será del tipo Multimedia, para que pueda reutilizarse desde la libería y el campo de texto, será del tipo largo con formato, para que puedan editarse los textos, con varios estilos configurables desde el CKEditor.

Imagen

     Una vez añadidos los campos, dentro del paragraph, al que hemos llamado Bloque Imagen y textos, podremos configurar el campo correspondiente, dentro del tipo LandingPage, para que pueda ser seleccionado posteriormente.

Imagen

Imagen

     El siguiente paragraphs que vamos a añadir, será el que permita al usuario, escribir y/o editar, la frase que se mostrará junto al título de la página, en la parte superior de ésta. 

     Para ello, al igual que con el bloque anterior, crearemos el nuevo tipo de paragraphs y a continuación, lo marcaremos como disponible, dentro del campo Contenidos Landing.

Imagen

     Una vez configurado el nuevo campo, para la frase que se mostrará junto al título de la página, el campo ContenidosLanding, debería tener un aspecto como el siguiente, para que ambos bloques "paragraphs", estén disponibles al momento de generar un nuevo contenido de este tipo.

Imagen

     El tercer paragraphs que vamos a añadir, para que esté dentro de las opciones del contenido, será el relacionado con el fomulario de pedidos, desde la misma LandingPage, para ello, esta vez, añadiremos dos campos, uno de tipo texto simple, que permitirá agregar el título del bloque, que se mostrará sobre el formulario y a continuación un nuevo campo del tipo webform, que nos aparece, gracias a que hemos activado el los módulos webform y webform ui, previamente.

Imagen

     Aunque hemos añadido un campo del tipo webform, todavía no hemos configurado el fomulario que vamos a utilizar en nuestra LandingPage, siguiendo la propuesta de diseño, eso lo veremos en el próximo capítulo.

     Por ahora, añadiremos este nuevo paragraphs, al campo dentro de LandingPage, para que esté disponible, como el resto, dentro del campo ContenidosLanding.

     El Bloque formulario, que acabamos de crear, debería tener el siguiente aspecto por dentro.

Imagen

     Si repasamos un poco, el campo ContenidosLanding, debería tener en este momento, los tres paragraphs marcados como permitidos, para que el usuario pueda decidir cuáles activará y la posición para cada uno de ellos, al momento de crear una nueva LandingPage.

Imagen

     Por ahora, para organizar un poco la estructura, reorganizaremos los campos dentro de la pestaña Administrar visualización del formulario, dentro de LandingPage, para que los tres compontentes fundamentales Título, Cabecera Landing y Contenidos Landing, se muestren en primera posicíon al momento de crear una nueva LandingPage, el aspecto debería ser como la siguiente imagen. 

Imagen

     Antes de comenzar a desarrollar un proyecto, ya sea con Drupal o con cualquier otra herramienta, es muy recomendable, establecer desde el inicio, cuáles serán las posibles necesidades o requerimientos, con el fin de poder alcanzar nuestro objetivo final.

   Requermientos a nivel de entornos

     En nuestro caso, trabajaremos en un proyecto Drupal 9, así que algunos de los requemientos fundamentales, que deberíamos tener disponibles, tanto en el entorno de desarrollo como en el de producción, para poder publicar la web, son los siguientes:

• Servidor Apache o Ngnix
• Servidor MySql
• Php 8.1 o superior
• Posibilidad de ejecutar comando de Composer, que es un manejador de librerías Php

     Recomendación:

• Uso de Docker (Para evitar problemas de compatibilidad entre entornos)

   Requerimientos a nivel de Drupal

• Conocimientos sobre Drupal 9 o superior
• Conocimientos sobre instalación y configuración de módulos y themes
• Conocimientos sobre uso de Drush
• Conocimientos sobre uso de Composer
• Conocimientos sobre la creación de subthemes o themes personalizados
• Conocimientos sobre el manejo de plantillas Twig
• Conocimientos sobre contenedores Docker

   Requerimientos basados en la propuesta gráfica

     Ahora que ya nos hemos asegurado de cumplir todos los requerimientos anteriores y que podremos instalar nuestro proyecto Drupal 9, para comenzar a desarrollar nuestra Landing Page o página de aterrizaje, basándonos en una propuesta gráfica, es el momento de analizar, dicha propuesta, para identificar las mejores opciones, relacionadas con los módulos y themes de Drupal, que necesitaremos, para lograr la realización de proyecto.

   Módulos requeridos

     Partiendo de esta propuesta gráfica, comenzaremos con algunos módulos que nos facilitarán las tareas de desarrollo, así como las relacionadas con las funcionalidades del proyecto una vez terminado.

     A continuación, vamos a nombrar los módulos que utlizaremos durante todo el proyecto:

• Admin Toolbar: Nos ayudará a navegar a través de la web, usando la interfaz de Drupal
• Pathauto: Nos permitirá configurar las urls amigables, de forma automática para nuestra landing page.
• Paragraphs: Nos permitirá crear una estructura personalizable para los elementos de la landing page.
• Webform: Nos permitirá configurar un formulario, con su propia bandeja de entrada y otras funcionalidades.
• Twig Teak: Nos permitirá añadir en la plantilla, bloques y otros elementos, sin la necesidad de utilizar funciones Preprocess
• Social Media Links Block and Field: Nos permitirá añadir un bloque para las redes sociales, fácil de configurar
• Boostrap Barrio: Para crear un subtheme personalizado
• Media y Media Library: Para gestionar las imágenes, con posiblidad de reutilizarlas
• Color field: Nos permitirá añadir un selector de colores, para que usuario pueda personalizar algunos elementos

   Creación de Landing Page o página de aterrizaje

     Paso 1 - Creación del tipo de contenido

       Para nuestro ejemplo, trabajaremos con un tipo de contenido nuevo, al que llamaremos landing_page, de esta manera, tendremos control total sobre sus componentes, campos, modo de visualización, etc.

       Ya que hemos activado todos los módulos, podremos comenzar a utilizarlos a medida que vayamos avanzando. Para ofrecer una mejor experiencia de usuario, es decir, que nuestro cliente tenga la posibilidad de crear, editar o publicar fácilmente su continido, dividiremos en dos partes sus componentes.

     Campo cabeceraLanding: Este campo, de tipo Media estará en la raíz del contenido y será el encargado de cargar la imagen de cabecera, para nuestra landing page. Al ser de tipo Media, ofrecerá la posibilidad de reutilizar imágenes existentes, desde la librería de imágenes, evitando sobrecarga de archivos y ahorro de tiempo en su implementación.

     Campo contenidosPágina: Este campos de tipo Paragraphs, llevará, en tu interior, el resto de elementos que se podrán añadir en la página, para que el cliente, pueda decirdir cuántos elementos necesitará, así como el ubicación de cada elemento y algunas personalizaciones, como, por ejemplo, el color de fondo.