frontend

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

 

     Aunque existe un módulo bastante completo llamado webform, Drupal ha mejorado considerablemente el Formulario de contacto que trae por defecto, ofreciendo una alternativa más fácil y práctica, si lo que necesitas es ofrecer esta posibilidad de contactar en tu sitio web.

     Para hacerlo aún más funcional, podremos imprimir este formulario de contacto, dentro de varios contenidos o incluso, dentro de contenedores del tipo Paragraphs, para ello nos ayudaremos de las preprocess_functons(), con las que podremos pasar toda clase de valores, como variables y posteriormente utilizarlas donde nos hagan falta.

     Cómo imprimir el formulario de contacto en un Paragraphs utilizando Preprocess Functions

          Como hemos dicho al principio de este artículo, las Preprocess functions(), nos permitirán pasar como parámetros toda clase de valores, mediante el uso de variables que podremos reutilizar cuando sea requerido, en este ejemplo en particular vamos a utilizarlas para imprimir nuestro formulario de contacto dentro de un elemento Paragraphs, pero tienes otros ejemplos para emplearlas aquí: Ejemplos de uso Preprocess functions 

          Para que podamos imprimir el formulario de contacto, como hemos decidido crear un Subtheme, sólo tendremos que añadir el código dentro del archivo de funciones de nuestro subtheme, tal y como te muestro en la imagen siguiente:

          Si quieres mostrar el formulario en un contenido normal de Drupal, tipo página por ejemplo: hook_preprocess_node()   

          En este ejemplo en particular, aprovechando que, dentro de un elemento Paragraphs podremos incluir cualquier tipo de campo, nodo o incluso otos Paragraphs, vamos a utilizar la Preprocess function para pasarle como parámetro en formulario a un nodo y posteriormente llamaremos a este nodo desde el Paragraphs.

          Si lo que quisieras lograr es pasar directamente el formulario dentro de la plantilla del Paragraphs, también podrías lograrlo con esta otra función:

          Cómo imprimir un formulario contacto dentro de un Paragraphs Drupal 9

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 todo proyecto web, es necesario que existan usuarios a los que no podemos dar permisos de administrador, para evitar que borren algún contenido o cambien alguna configuración importante dentro del proyecto, por eso, resulta muy interesante poder ofrecerles una interfaz de usuario amigable, para que dichos usuarios no tengan miedo de realizar cambios en el contenido al que tienen acceso.

     En el siguiente ejemplo, utilizaremos los módulos Color Field y Paragraphs, combinándolos con la definición de roles y permisos de Drupal, para ofrecer a los usuarios editores del proyecto, la posibilidad de realizar modificaciones, como por ejemplo, el color de fondo de un bloque, sin tener que otorgarles los permisos como administradores de Drupal, evitando así posibles errores irremediables.

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 Slick Paragraphs, 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 paragraphs -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.    

 Trabajando con Paragraphs, Imágenes y Color Field usando Plantillas:

          Antes de comenzar a realizar modificaciones en las plantillas, para obtener los resultados que esperamos conseguir, es necesario que actives el Modo Depurador o Modo Debug de Drupal, para que puedas copiar y renombrar las plantillas que afectarán tus contenidos, si todavía no sabes cómo hacerlo, echa un vistazo al artículo en el que lo explico detalladamente: Imágenes y color por interfaz con Paragraphs.

          Ahora que ya sabes cómo crear tus plantillas personalizadas, utilizando el Modo Depurador de Drupal, es el momento de configurarla para que el usuario pueda modificar a su antojo el color que quiere ver en cada elemento.

          Para ello, una vez descargado y activado el módulo Color Field, el siguiente paso será añadir un campo de ese tipo, con las configuraciones adicionales, necesarias para que se muestre en la interfaz de usuario como esperamos.

          Así que añadiremos el nuevo campo, dentro del elemento Paragarphs que hemos definido para este ejemplo, (Imagen con Texto) y luego aplicaremos los cambios necesarios en la configuración del campo.

     La siguiente configuración del campo de tipo color, permitirá al usuario, entre otras opciones, añadir o no un color específico que afectará a varios elementos, o dejar sin ningún color el campo, para que muestre el color que trae por defecto.

           Además de estas configuraciones, seleccionaremos la rueda de configuración, que aparece en la parte derecha de todos los campos, para asegurarnos que el valor de los colores sea el exagesimal.

          Una vez hemos terminado con la configuración del campo color, lo siguiente que tendremos que hacer es imprimir el valor del campo dentro de nuestra plantilla Twig, para ello, seleccionaremos el nombre del campo y luego, como ya hemos explicado anteriormente, haremos que se imprima como fondo de un contenedor cuando tenga valor, utilizando el condicional "if".

          En la siguiente imagen, podrás ver el resultado final aplicado en la plantilla, donde estamos condicionando el contenedor para que muestre como color de fondo el valor del campo que hemos definido previamente.

          Para que el módulo Field Color funcione correctamente, en este caso, que buscamos ofrecer al usuario una interfaz de administración visualmente intuitiva, hemos optado por utilizar el Spectrum, para que se muestre el selector de colores, para ello hemos añadido en las librerías de Drupal, según la documentación oficial del módulo, las dependencias necesarias para que esto ocurrra.

          Recuerda, que si no existe la carpeta libraries, tendrás que crearla antes de añadir estas librerías en la carpeta raíz de tu instalación Drupal.

     Ahora que tenemos todo configurado correctamente, podremos abrir nuestro contenido para seleccionar el color que deseamos aplicar, como fondo de nuestro contenedor y veremos un aspecto parecido al que te muestro a continuación:

Imagen

     Una vez guardados los cambios, si refrescamos caché de Drupal, podremos ver que efectivamente se ha cambiado el color en el contenedor, tal y como habíamos previsto.

Imagen

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 quieres aprender a manipular código en tus plantillas Twig, para realizar operaciones del tipo, ocultar un campo dependiente de otro o imprimir valores directamente en la plantilla de cualquier contenido, ya no tendrás que recurrir a las preprocess_functions(), porque, además de esta opción, a partir de Drupal 8, tienes la posibilidad de ejecutar código, aplicar css condicional y otras muchas opciones, con el empleo de Twig el sistema en que se han diseñado las plantillas a partir de Drupal 8

Cómo personalizar las plantillas Twig en Drupal 9:

     A partir de Drupal 8, se sustituyeron las Plantillas php con la extensión .tpl por otras mejoradas, que incluyen el lenguaje Twig. Esta nueva adaptación permite la ejecución de código de forma más ordenada y limpia en nuestras plantillas de Drupal, para modificar el aspecto de nuestros contenidos.

     También tenemos la posibilidad de activar el Modo Depurador o Modo Debug, que nos permite conocer los "Nombres sugeridos" para que nuestras plantillas afecten a tipos de contenido específicos, facilitando considerablemente la maquetación del proyecto.

     Te dejo las instrucciones para que puedas activarlo: Configuración Desarrollo Local Drupal 8

     Una vez tengas activado el Modo Depurador de Drupal y refrescado Caché de Drupal, podrás comenzar a explorar tus contenidos y confirmar las "Sugerencias" para las plantillas personalizadas, que te permitirán realizar las modificaciones necesarias en cada caso. 

     Además de las "Sugerencias", para que puedas nombrar tus plantillas según el contenido al que quieres aplicarle los cambios, Drupal te mostrará la ubicación de la plantilla original, para que la puedas copiar y renombrar adecuadamente.

     Una vez hayas copiado y renombrado, según la sugerencias de Drupal, la Plantilla original, podrás comenzar a realizar todo tipo de modificaciones, que podrás comprobar a medida que vayas avanzando para realizar ajustes y mejoras.

     Cómo imprimir campos dentro de una plantilla twig:

          Por defecto, todas las plantillas del tipo Twig, en Drupal, nos vienen con la variable {{ content }}, esta se encargará de imprimir todos los que se hayan definido previamente. 

          Pero si lo que queremos es tener el control, e imprimir, sólo algunos campos específicos o poder añadir etiquetas de forma individual en cada campo, lo que necesitaremos es añadir, dentro de esta misma variable, un punto y a continuación el nombre de máquina que tiene nuestro campo. De esta forma obtendremos en pantalla el campo específico que hayamos colocado, envuelto en sus etiquetas html.

          Si lo que buscamos es imprimir el valor del campo, sin las etiquetas html que nos añade Drupal por defecto, sólo tendremos que añadir un punto seguido de cero (0), al final del nombre del campo, tal y como te muestro en la imagen.

          Si deseas conocer otras formas de extraer valores de campos, dentro de las plantillas Twig, por ejemplo, la url de un campo imagen o el valor de un campo enlace, separado del título, te dejo aquí varios ejemplos:

          Cómo extraer valores de campos dentro de una plantilla Twig en Drupal

          En la siguiente imagen, he modificado la plantilla de un elemento Paragraphs, formado por dos campos de tipo Texto y he añadido las etiquetas correspondiente a cada campo por separado, para obtener un estructura a medida, utilizando clases de Bootstrap y etiquetas HTML.

     Cómo añadir condicionales en Twig:

          Para añadir condicionales, dentro de tu plantilla Twig, y lograr, por ejemplo, que un campo sólo se muestre cuando tiene contenido relacionado dentro de Drupal, lo que necesitarás es declarar el inicio y final de tu condicional, encerrándolo dentro de una estructura como esta {% if CONDICIÓN %} CAMPO {% endif %}.

          En la siguiente imagen, el campo field_titular_principal, sólo se mostrará en el caso de que tenga contenido asociado. Para obtener este resultado, dentro de la declaración de la condición IF, he añadido el filtro de Twig " |render ", que comprueba el valor del campo una vez renderizado por Drupal.

     Puedes conocer más opciones disponibles, para trabajar con tus plantilla Twig en Drupal, visitando la Página Oficial de Twig

 

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

 

Como ya sabrás, hoy en día, si quieres dedicarte a la creación de páginas web, pero no puedes crear una con diseño "responsivo", o sea, que pueda adaptarse a todos los dispositivos, entonces deberías plantearte otro tipo de ocupación o buscarte algún compañero especializado en diseño y maquetación.

     Afortunadamente, ahora es mucho más sencillo aplicar este tipo de diseños en Drupal, mediante el uso de Bootstrap, que consiste en un conjunto de librerías y etiquetas que te permitirán, crear fantásticos diseños adaptables a cualquier dispositivo, sin que tengas la necesidad de profundizar en el aprendizaje de javascript o css.

     Adicionalmente, contamos con un módulo mejorado que, además de integrar las últimas opciones disponibles de Bootstrap, añade otras funcionalidades que podremos configurar desde la interfaz de usuario de Drupal, en el apartado de Apariencia, como son colores de textos, enlaces o incluso de las barras de navegación.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

 

composer require drupal/bootstrap_barrio

 

Imagen

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Barrio y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

 

drush en bootstrap_barrio -y

 

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Cómo crear un Subtheme utilizando Bootstrap Barrio:

     Drupal no recomienda siempre, que no modifiquemos el código incluido directamente en sus módulos o Themes, por esta razón, siempre que nuestros proyectos requieran cambios específicos, que no nos permiten las versiones por defecto, tendremos que realizar modificaciones a través de módulos personalizados o, en este caso, creando nuestro propio Subtheme, que heredará las funcionalidades del Theme Bootstrap Barrio, pero al que podremos añadir tantos cambios como nos hagan falta.

     Para crear un Subtheme a partir de Bootstrap Barrio, tendremos que ir a la Página oficial y seguir las instrucciones. Creating a custom Barrio sub-theme.

     En resumen, se trata de crear una carpeta llamada "Custom", dentro de la carpeta de Themes que nos trae por defecto Drupal y luego añadir el código que podremos copiar, desde la página oficial, dentro de un archivo ejecutable llamado: create_subtheme.sh

    Por último, utilizando nuestra consola, nos colocaremos dentro de la carpeta donde se ubica este archivo que hemos creado y luego lo ejecutaremos con el comando ./create_subtheme.sh, esto nos generará un nuevo Subtheme, que heredará las propiedades y funcionalidades del Bootstrap Barrio y que podremos instalar en nuestro proyecto para comenzar a personalizarlo de acuerdo con nuestras necesidades.

     Si quieres ver las instrucciones en español: Crear tema personalizado Drupal 8/9 con Bootstrap Barrio

Cómo personalizar las plantillas Twig en Drupal 9:

     A partir de Drupal 8, se sustituyeron las Plantillas php con la extensión .tpl por otras mejoradas, que incluyen el lenguaje Twig. Esta nueva adaptación permite la ejecución de código de forma más ordenada y limpia en nuestras plantillas de Drupal, para modificar el aspecto de nuestros contenidos.

     También tenemos la posibilidad de activar el Modo Depurador o Modo Debug, que nos permite conocer los "Nombres sugeridos" para que nuestras plantillas afecten a tipos de contenido específicos, facilitando considerablemente la maquetación del proyecto.

     Te dejo las instrucciones para que puedas activarlo: Configuración Desarrollo Local Drupal 8

     Una vez tengas activado el Modo Depurador de Drupal y refrescado Caché de Drupal, podrás comenzar a explorar tus contenidos y confirmar las "Sugerencias" para las plantillas personalizadas, que te permitirán realizar las modificaciones necesarias en cada caso. 

     Además de las "Sugerencias", para que puedas nombrar tus plantillas según el contenido al que quieres aplicarle los cambios, Drupal te mostrará la ubicación de la plantilla original, para que la puedas copiar y renombrar adecuadamente.

     Una vez hayas copiado y renombrado, según la sugerencias de Drupal, la Plantilla original, podrás comenzar a realizar todo tipo de modificaciones, que podrás comprobar a medida que vayas avanzando para realizar ajustes y mejoras.

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 ya has trabajando con Drupal 7 u 8, te habrás topado con la necesidad de crear campos que te permitieran modificar su posición con respecto a los demás para ofrecer mayor flexibilidad en la construcción de tus contenidos. 

     Uno de los módulos más populares para realizar esta tarea era Fielgroup, no obstante, los desarrolladores de Drupal apostaron por algo todavía más flexible y que se pudiera combinar con otros módulos para dar paso a una gran cantidad de nuevas posibilidades.

     Este nuevo módulo se llama Paragraphs, que además de permitir la agrupación de campos, como su predecesor, ofrece múltiples opciones para anidar estructuras de contenido mucho más complejas y gráficas para que los usuarios del tipo gestor de contenidos, tengas más flexibilidad y mejor percepción al momento de crear o editar en Drupal.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/paragraphs

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Paragraphs y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en paragrphs -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Creación de contenidos con Paragraphs:

     Una vez tenemos descargado y activado el módulo Paragraphs y sus dependencias, ya podremos empezar a crear nuestros Paragrphs, en la url: /admin/structure/paragraphs_type o, si ya hemos instalado el módulo Admin Toolbar, podremos ir desde el menú superior a la opción Estructura/Tipos de Paragraphs/ Agregar tipo de Paragraphs, como te muestro en la siguiente imagen:

     Un elemento Paragraphs, sería el equivalente al Fieldgroup, o sea, un contenedor donde podremos añadir todo tipo de campos, o inclusive, otros paragraphs, creando estructura reutilizables y muy versátiles.

     En este ejemplo, he creado un elemento Paragraphs, que contiene dos campos del tipo "Texto Simple", que me permite añadir uno o varios "Bloques" con dos tipos de Titulares, a diferentes tamaños y formatos, que a su vez podré implementar en varias páginas si fuera necesario, teniendo que definir sus características una sola vez.

     Una vez tengo creados los elementos del tipo Paragraphs, que quiero utilizar dentro de mis contenidos, podré añadirlos como si se tratara de cualquier otro tipo de campo, para que esté disponible, por ejemplo, dentro de mi página inicio.

Además, puedo configurarlo como ilimitado, para poder añadir tantos como necesite y cambiar el orden de aparición según mis necesidades.

     Para añadir los elementos del tipo Paragraphs, una vez configurado nuestro tipo de contenido, podremos hacerlo de la forma habitual, como lo haríamos con otros campos, o de una forma más avanzada, que podremos configurar desde el formulario de creación del Paragraphs:

     Además, si hemos optado por la configuración por defecto, para añadir los elementos Paragraphs en nuestro contenido, veremos que al hacer clic en el botón de añadir, que aparecerá en la parte inferior, podremos agregar todos los Paragraphs y sus elementos, muy fácilmente:

     Al igual que con cualquier otro tipo de campo, podremos modificar el modo de presentación de los elementos Paragraphs, además de sus respectivos campos. Para ello, tendremos que ir a Estructura/Tipo de Paragraphs/Gestionar Presentación:

     Cuando hayamos realizado los cambios en la presentación de nuestros elementos Paragraphs y sus campos, podremos comenzar a aplicarles los estilos, según las necesidades de nuestro proyecto:

     Si hemos decidido crear varios tipos de Paragraphs y, además, los hemos añadido para que estén disponibles dentro de nuestro tipo de contenido, en lugar de ver un botón de añadir, en la parte inferior, veremos que se despliega un selector, con los nombres de los diferentes Paragraphs que hayamos configurado para este tipo de contenido:

     Como mencioné anteriormente, una vez añadidos los elementos Paragraphs, dentro de nuestro contenido, podremos modificar el orden de aparición, dependiendo de cómo los hayamos creado, para logar mucho mayor flexibilidad que la que podremos obtener si utilizáramos los tradicionales "Bloques", que nos ofrece Drupal por defecto:

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 versiones anteriores de Drupal, la instalación de nuevos módulos o el traspaso de proyectos entre diferentes entornos, podrían provocarnos grandes dolores de cabeza, ya fuera porque nos faltaba alguna librería o módulos dependientes, o por que nos olvidáramos de arrastrar algún archivo y no sabíamos cuál o dónde estaba el mismo.

     Estas son sólo algunas de las razones por las que a partir de Drupal 8, se comenzó a utilizar el gestor de paquetes Composer y, de echo, está altamente recomendado, para facilitar todo el proceso de instalación o actualización del proyecto o de sus módulos, ya que en pocas líneas de ejecución del código, podremos descargar todas las dependencias, sin tener que preocuparnos de buscarlas una a una, descargarlas y ubicarlas en su lugar correspondiente.

     Composer puede añadirse a un proyecto ya existente, pero en esta ocasión, voy a ensañarte cómo instalar un nuevo proyecto Drupal 9 utilizando este gestor de paquetes.

Instalación de Drupal 9 utilizando Composer

     Paso 1 instalación del gestor de paquetes Composer:

     Hoy en día, una de las modalidades más extendidas para desarrollar cualquier proyecto, es el uso de los conocidos como "Gestores de paquetes", estos nos permitirán descargar, "paquetes de código", con apenas un par de líneas de comandos de consola, de esta forma se colocarán dentro de estructuras preconfiguradas, toda clase de librerías, módulos o herramientas, dependiendo del tipo de proyectos con los que estemos trabajando.

     En el caso de Drupal, el gestor de paquetes con el que se trabaja es Composer, que nos permite descargar directamente, desde toda la estructura necesaria para iniciar un proyecto web en Drupal, hasta las posteriores actualizaciones de seguridad o dependencias para nuestros módulos.

     Según tu sistema operativo, existen varias formas de descargar e instalar Composer en tu ordenador, para ello puedes dirigirte a su Página Oficial y seguir las instrucciones que correspondan a tu caso en particular.

 

Si utilizas Windows como sistema operativo, entonces te será tan fácil como descargar el archivo instalador, hacer clic como la mayoría de los programas que instalamos en Windows y luego clic en el botón siguiente hasta que termine.

     Ten en cuenta de que Composer necesitará que tengas instalado Php en tu ordenador previamente o no podrás instalarlo.

 

No importa si tienes instalado el php dentro de un servidor local tipo Xampp, Wampp o si lo haz instalado descargándolo directamente desde la página php, al inicializar el instalador Composer encontrará el archivo Php que necesita para continuar con el proceso de instalación.

 

Al finalizar el proceso de instalación de Composer, si escribes en tu consola composer, deberías ver en tu pantalla un mensaje parecido al que te muestro a continuación.

 

Paso 2 Configurar tu Servidor local Php + MySql + Apache:

          Drupal está desarrollado utilizando el lenguaje Php combinado con base de datos, que por defecto suele ser MySql o MariaDb y para que funcione en tu servidor local, necesitarás tener Apache instalado.

          Como hemos dicho anteriormente, puedes descargar e instalar un Servidor Local Xampp, si no sabes cómo hacerlo, tienes toda la información necesaria paso a paso en el artículo Instalación servidor local Xampp para Drupal.

          Además, en el caso de Drupal 8 y 9, deberías realizar algunos cambios en la configuración por defecto de tu servidor local, para evitar errores tanto durante el proceso de instalación inicial, como una vez hayas comenzado a trabajar con tus contenidos, tienes las configuraciones disponibles en este Snippet, para que puedas confirmar los cambios antes de continuar:

         Configuración Servidor Local Drupal 9

    Paso 3 Configurar tu dominio virtual:   

          Una vez instalado tu servidor Apache, para poder acceder a la url que activará el instalador de Drupal, será necesario que configures el dominio o nombre que usarás para conectar a tu web, ej.: drupal.localhost.

 

    Paso 4 Descargar el esqueleto o estructura de Drupal:

          Ahora que ya tenemos todos los pasos anteriores comprobados, nuestro servidor funciona correctamente y podemos acceder a la carpeta en la que vamos a colocar todos los archivos relacionados con nuestro proyecto Drupal, podremos comenzar con el proceso de descarga, para ello, tenemos disponible toda la información necesaria en la Página Oficial de Drupal.

 

Tan pronto como hagamos clic en la tecla Enter, comenzará la descarga de todos los archivos necesarios para nuestra instalación, desde el repositorio de Drupal.

 

Una vez haya finalizado el proceso de descarga, podremos abrir nuestro explorador de archivos para analizar la estructura que nos ha creado Composer.

 

A continuación, deberías subir todos los archivos de tu instalación a un repositorio, para que puedas controlar en todo momento la evolución del mismo desde el principio, además de practicar los comandos relacionados con el control de versiones, aunque no estés dentro de un proyecto para algún cliente o empresa.

 

Descarga de módulos usando Composer:

          Una de las mayores ventajas añadidas, a partir de la integración de Composer en el proceso de instalación de proyectos Drupal, es que podremos descargar módulos adicionales, utilizando a penas, un par de líneas de código, sin tener que preocuparnos por los módulos dependientes como en versiones anteriores.

 

Cada vez que descargues un módulo utilizando Composer, será añadido en el archivo composer.json, en él podrás ver, además, la versión específica del módulo en el momento de la descarga, entre otras informaciones.

 

Si quisiéramos instalar los mimos módulos en otro proyecto Drupal, sólo tendríamos que copiar el archivo composer.json y ejecutar en la consola el comando composer install, dentro de nuestro proyecto Drupal, e inmediatamente comenzaría la descarga de todos los módulos declarados en el apartado "require" 

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

 Drupal ofrece varias formas de instalación para que puedas comenzar de acuerdo a tus necesidades de forma rápida y sencilla.

     Lo principal es que tengas un servidor con Apache, Mysql y Php; puedes utilizar el paquete XAMPP, para conseguir todo esto en una sola instalación, puedes aprender cómo configurar un servidor local Xampp y los requisitos de un servidor local necesarios para drupal. 

     Si eres más aventurero, también podrías probar con un servidor local, utilizando el sistema de contenedores de Docker, aquí tienes las instrucciones para Instalar Docker en Windows 10 Home.

Configuraciones previas

1.- Dominio Virtual

     Aunque por defecto, el dominio "http://localhost" apuntará a la carpeta pública del servidor, generalmente llamada "htdocs", o "public", para que se iniciara el instalador de Drupal, tendríamos que descomprimir los archivos que hemos descargado desde la web oficial de Drupal , y una vez hecho esto, colocarlos directamente dentro de esta carpeta, como uno de los archivos es el "index.php", será sustituido por el que trae la instalación del Xampp y entonces arrancará el instalador.

Pero la mejor forma de realizar cualquier instalación de una web en tu ordenador, es que configures un dominio virtual, ej.: drupal.localhost, de esta manera podrás acceder exclusivamente a esta instalación y además alojar otras webs aunque no estén creadas con Drupal, con el dominio específico en cada caso.

Para configurar este dominio virtual, tendrás que modificar dos archivos: host, que en windows lo encontrarás en "C:\Windows\System32\drivers\etc" y luego el archivo "httpd-vhosts.conf", que estará en Xampp, si ha sido tu decisión, dentro de la ruta "C:\\xampp\apache\conf\extra".

A continuación te enseño el aspecto que deberían tener estos dos archivos con el dominio virtual "drupal.localhost", una vez cambiados los datos, deberás reiniciar el servidor XAMPP para que los reconoza.

Imagen

Cambios en el archivo host de windows para configurar tu dominio virtual

Imagen

2.- La Base de datos

     Drupal, además de un servidor en el que pueda ejecutar código PHP, necesitará de una base de datos, donde se guardarán todas las configuraciones y rutas necesarios, durante su instalación y posteriormente.

     Si haz decidido utilizar el servidor Xampp, verás que tienes un panel de control desde el que podrás arrancar y administrar los servicios muy fácilmente, en el caso de la base de datos, vamos a presionar el botón administrar para que se abra el gestor de base de datos PhpMyAdmin.

Imagen

Una vez abierto el PhpMyAdmin, te recomiendo que selecciones la pestaña "Cuentas de usuario" y a continuación crear un nuevo usuario con todos los privilegios específicos para la tabla que utilizará esta instalación de Drupal.

Imagen

3.- La instalación

     Ahora que ya tenemos la base de datos creada y el servidor local funcionando correctamente, si escribes en el navegador, el dominio que hemos configurado anteriormente, verás que se iniciará el instalador de Drupal y sólo deberás hacer clic en continuar cuando te lo pida, hazta que finalice el proceso.

Imagen

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

      Llegados a este punto, nos toca ocuparnos del aspecto de nuestro proyecto, para ofrecer una presentación de acuerdo a nuestras expectativas, debemos tomar en cuenta que esta web deberá verse en diferentes dispositivos y que es muy importante prestar atención en todos los detalles para que nada "se rompa" a nivel gráfico cuando el usuario la visite, por ejemplo desde un Ipod. 

     En Drupal, la parte que controla es aspecto de nuestra web está a cargo de los "Temas" o "Themes", que son el conjunto de archivos necesarios para realizar este tipo de configuración.

Imagen

     Drupal ofrece desde su Página Oficial, la posibilidad de descargar toda clase de Temas, para que podamos utilizarlos y modificarlos, según las necesidades del proyecto. Hoy en día, debido al aumento del uso de dispositivos móviles, es prácticamente obligatorio, diseñar webs que sean adaptables a cualquiera de estos dispositivos, esto es conocido como diseño "Responsivo" o "Responsive".

     Dentro de las alternativas gratuitas, disponibles para Drupal, está el Theme Mayo, que ofrece una alternativa relativamente muy sencilla, de implementar una web con diseño responsivo, sin la necesidad de manipular nada de código.

     Su configuración al completo se hace a través de la interfaz de Drupal, donde una vez descargado e instalado, sólo nos faltará personalizarlo mediante unos cuantos clics, hasta obtener el resultado que andamos buscando o al menos el más aproximado a éste.

Imagen

     Para trabajar con módulos o temas en Drupal, pueden emplearse varios métodos, aunque a partir de la versión 8, se recomienda el uso del gestor de paquetes Composer, porque nos facilitará todos los procesos de instalación, descarga y dependencias; en este caso, voy a enseñarte la forma tradicional, hacemos clic derecho sobre el en enlace comprimido del archivo y seleccionaremos copiar enlace.

Imagen

     Luego nos iremos a Drupal, en la url "/admin/appearance", donde seleccionaremos la opción Instalar nuevo tema. Si ya tienes instalado el módulo Admin Toolbar, podrás hacerlo tal y como se muestra en la imagen.

Imagen

     A continuación, pegaremos en la siguiente pantalla, la url que hemos copiado y haremos clic en el botón Instalar.

Imagen

     Una vez terminado el proceso de instalación del Theme, podremos activarlo llendo a la url "/admin/appearance", donde se muestran todos los Themes disponibles para su activación, además de los que están activados actualmente y el Theme que utiliza drupal para su interfaz de administración.

     Si nos desplazamos a la parte inferior de esta pantalla, encontraremos el Theme Mayo, dentro del listado de Themes Desinstalados, y podremos Instalarlo como Theme principal haciendo clic en el enlace debajo de su imagen.

Imagen

     Después de activar el Theme, es recomendable que Vaciemos la Cache de Drupal para que podamos ver todos los cambios ejecutados en nuestro proyecto.

     Si nos vamos a la página principal de nuestro proyecto, podremos comprobar el cambio inmediatamente, además de validar el aspecto que se mostrará en dispositivos de varios tamaños.

Imagen

     Otra opción con la que contamos para personalizar el aspecto de nuestras webs de Drupal, es el Theme Bootstrap, en este caso, específicamente hemos optado por, crear nuestro propio tema personalizado o Subtheme, tomando como base, el Theme Bootstrap Barrio, ya que además de heredar las características del Bootstrap 4 original, permite la aplicación de varias configuraciones mediante la interfaz, como hicimos con el Theme Barrio.

Imagen

     Esta vez, para trabajar con la creación y configuración de nuestro Subtheme, utilizaremos el gestor de paquetes Composer, que comentábamos al principio de este artículo.

     Para realizar esta clase de operaciones, abriremos la consola y, una vez colocados dentro de la carpeta de nuestro proyecto, podremos ejecutar el siguiente comando para que comience la descarga de los archivos que vamos a utilizar:

Imagen

     Siempre que utilicemos el gestor de paquetes Composer para descargar nuestros Themes o Módulos, creará automáticamente, si no existe, una carpeta llamada Contrib, referente a módulos o Themes contribuidos de Drupal. De esta forma mantiene separados los módulos y Themes, cuyo contenido no deberíamos modificar nunca directamente, del resto de módulos y Themes creados a partir de ellos y modificados por nosotros.

Imagen

     A continuación, nos dirigiremos a la Página Oficial de Bootstrap Barrio, para leer y seguir los pasos necesarios en la creación del Subtheme.

Imagen

     Después de copiar los datos en el archivo create_subtheme.sh y seguir el resto de los pasos descritos en su página oficial, tendremos que llamar al archivo desde nuestra consola para que genere todos los demás componentes necesarios en nuestro nuevo Subtheme.

Imagen

     En el momento en que termina la ejecución del archivo llamado desde nuestra consola, si volvemos a las carpetas de Drupal, dentro de la Carpeta "themes/contrib", podremos ver nuestro Subtheme listo para ser activado, desde url "/admin/appearance", tal y como hicimos anteriormente con el Theme Mayo.

     Encontraremos en la parte inferior de la pantalla, todos los themes disponibles para ser utilizados en nuestro proyecto y, dentro del listado de Themes desinstalados, estará, si todo ha ido bien, nuestro Theme personalizado.

Imagen

     Ahora podrás comprobar que tu nuevo Subtheme, además de tener diseño Responsivo, te brinda la posibilidad de personalizarlo al completo, para darle un aspecto funcional, práctico y novedoso a tus proyectos en Drupal.

Imagen