sitebuilder

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 este curso acelerado de Drupal 9, te enseñaré lo fácil que resultará crear una web básica, con todas las funcionalidades que podrás emplear en la mayoría de tus proyectos y con los principales módulos y configuraciones necesarios, para que entiendas el procedimiento, a pesar de que no tengas conocimientos previos de programación o diseño web.

     La idea es demostrarte por qué deberías trabajar con Drupal, en lugar de explorar otras opciones, que a pesar de ofrecer un arranque más rápido, a largo plazo sólo te traerán inconvenientes y pérdida de tiempo en tus desarrollos.

Módulos Utilizados:

Admin Toolbar

Devel Generate

Media y Media Library ( Incluidos en el Core de Drupal)

Asset Injector

Pathauto

Smart Trim

Theme:

Olivero (Incluido en 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

     Además de crear contenidos y mostrarlos, en nuestros proyectos es muy importante conocer, la manera en que podamos clasificar dichos contenidos, para sacar provecho posteriormente, en la creación de filtros o buscadores, que devolverán contenidos específicos, de acuerdo con las necesidades del usuario y la interacción que tenga con nuestra web.

     En Drupal, se utilizan las taxonomías para definir estos vocabularios, que nos permiten clasificar los contenidos dentro de nuestro proyecto de Drupal, y con estas taxonomías, podremos definir, por ejemplo, las categorías de un producto o el país de origen de una información y de esta forma, al configurar posteriormente los filtros dentro de nuestras vistas, podremos mostrar sólo los contenidos que cumplan con esta condición, ofreciendo mucho mayor capacidad, para incentivar al usuario en la interacción con nuestra web.

     Para acceder a las taxonomías, nos iremos a la url "/admin/structure/taxonomy", si tienes instalado el módulo Admin Toolbar, podrás llegar a la misma pantalla haciendo clic en los botones del menú superior, tal y como te muestro en la imagen:

     Una vez dentro de la pantalla de Taxonomías, podremos comenzar a añadir Vocabularios, o si lo prefieres también podrías usar el que nos viene por defecto llamado etiquetas o tags, si tu instalación está en inglés.

     El proceso es muy simple, haces clic en el botón "Agregar vocabulario", que será el conjunto de todos los términos que irás añadiendo posteriormente. En el vocabulario puedes añadir una descripción que te podría ayudar a ti o a otros miembros del equipo sobre su propósito. Además podrás activar la traducción para instalaciones multi-idioma.

     Tan pronto como hayas guardado tu vocabulario, podrás comenzar a añadir los términos que colgarán de este.

     La pantalla de creación del término, es parecida a la del Vocabulario, con la diferencia de que podrás añadir, además de la descripción del término, si depende de uno o varios términos padre o sólo del Vocabulario y también la url una vez haya sido guardado. La gestión automática de las urls se podría configurar utilizando el módulo Pathauto, aprende cómo hacerlo aquí

     Al terminar de configurar tus vocabularios y términos, el próximo paso a seguir sería añadir un campo del tipo referencia a término, dentro de tu tipo de contenido, que utilice tus términos y vocabularios para puedas utilizarlos posteriormente con el propósito inicial de clasificarlos.

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

      Con la aparición de Drupal 8 se han aplicado grandes cambios en el código que implican mejoras considerables en cuanto a gestión, seguridad, estructura, escalabilidad, entre otras.

     Uno de estos cambios significativos, lo supone la implementación de Twig para las plantillas, sustituyendo a las antiguas plantillas php de versiones anteriores, ofreciendo un gran conjunto de posibilidades que vale la pena explorar, conocer y probar en nuestros proyectos.

     En esta parte de los ejercicio, nos dedicaremos a trabajar con la personalización de nuestros contenidos, a través de las plantillas Twig y la aplicación de estilos css; de esta forma entenderás más fácilmente como mejorar y controlar la apariencia de tus proyectos.

     Hasta este momento hemos trabajado con nuestros contenidos a través de la interfaz, así que ahora es el momento de activar el modo depurador de Drupal para que podamos utilizar las plantillas, con los nombres sugeridos por Drupal e ir avanzando poco a poco hasta lograr nuestro objetivo.

     Nuestro contenido, sin ningún estilo aplicado se ve de esta forma. El primer paso que debemos realizar para poder comenzar a trabajar con las plantillas dentro de nuestro proyecto web, es activar el modo Debug o depurador de Drupal.

     Cómo activar el modo debug de drupal

     Una vez hayamos activado el modo Debug, tendremos que Vaciar las cachés de Drupal para que veamos los cambios aplicados. Entonces, si hacemos clic en la tecla F12 o seleccionamos con el ratón, clic derecho "Inspeccionar", podremos ver la ubicación de las plantillas que afectan al contenido que tengamos seleccionado, además de los nombres sugeridos para que dichas plantillas puedan modificar, exclusivamente a tal contenido.

     Dependiendo de la plantilla sugerida por Drupal, tendremos que ir hasta la ubicación de ésta, en nuestro caso, como hemos optado por usar el Bootstrap, como tema base, nos iremos a la carpeta Templates y copiaremos las que nos hagan falta para cambiarles, primero el nombre y luego comenzar a realizar las personalizaciones.

     Podremos comprobar si el contenido está utilizando la plantilla a la que hemos realizado los cambios, si al refrescar el navegador y volver a ver el código con F12 o Inspeccionar, aparece el nombre que hemos puesto a la plantilla con una x al lado izquierdo de ella, indicando que está siendo utilizada.

     Si el resultado es correcto, todos los cambios ejecutados en la plantilla se verán reflejados posteriormente en el contenido y/o campos a los que afecta la misma.

     La estructura de la plantilla para un nodo por defecto, llamada node.html.twig, tiene una estructura compuesta por varios condicionales, que están definidos entre el {% if CONDICIÓN %} y el {% endif %}.

     Como resultado, los campos que cumplan con estas condiciones serán mostrados o no dentro de la plantilla. El comportamiento es el mismo para el resto de plantillas de Drupal, por lo cual, una vez comprendas este principio, el resto será bastante sencillo de aplicar.

     Recuerda Vaciar cachés siempre que ejecutes cambios importantes, sobre todo si están relacionados con las plantillas, para que puedas ver en pantallas todas las modificaciones que hayas realizado. 

     Cuando hayas terminado de realizar todos los cambios en tu plantilla, podrás ver el resultado y comprobar si hace falta algún otro cambio antes de pasar al siguiente contenido.

     Las plantillas te permitirán modificar el aspecto de cualquier campo o contenido dentro de Drupa

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 realizado con Drupal, es muy importante que entendamos cómo instalar e implementar nuevos módulos, que harán nuestros proyectos más funcionales y/o atractivos a clientes y usuarios; además, que esté a nuestro alcance el conocimiento necesario, para mostrar los contenidos utilizando el módulo Views, que ahora está integrado en el núcleo de Drupal y que ofrece la posibilidad, entre otras, de mostrar contenidos en diferente forma y con varias opciones, cuya configuración puede hacerse utilizando su interfaz, sin que exista la necesidad de conocer cómo funcionan las consultas de bases de datos.

     En Drupal existen dos tipos de módulos, los contribuidos y los personalizados. Los módulos contribuidos o Contrib, son aquellos que podemos descargar desde la página oficial de Drupal y al igual que los Themes, se deberán colocar en su carpeta específica. 

     En el caso de utilizar el gestor de paquetes Composer, éste se encargará automáticamente, al igual que con los Themes, de crear una carpeta llamada Contrib, que estará ubicada dentro de la carpeta modules, que trae la instalación de Drupal por defecto.

     Si vamos a trabajar con módulos personalizados, lo recomendable sería crear otra carpeta con el nombre Custom, al mismo nivel de la carpeta Contrib y así obtendríamos una mayor organización del código que facilitará las tareas de mantenimiento.

     Al igual que haríamos para instalar los Themes, con los módulos tenemos tres maneras de descargarlos, las dos primeras ya las vimos en el capítulo de Themes, que consistían en copiar el enlace del módulo en este caso y luego pegarlo en el campo correspondiente a instalar módulo, dentro de la url "/admin/modules/install" y una vez pegado el enlace, hacíamos clic en el botón Instalar Módulo.

     Otra de las maneras que existe para instalar un Módulo, es la de descargar el archivo comprimido directamente desde la página oficial correspondiente, y luego desde esta misma ventana cargar el archivo descargado usando el botón Seleccionar archivo y a continuación hacer clic en el mismo botón instalar.

     Pero al tercera forma es la recomendada a partir de la versión 8, se trata de utilizar el gestor de paquetes Composer, eso nos reduce considerablemente las preocupaciones sobre las dependencias de los módulos descargados y nos facilitará las tareas de actualizaciones, tanto si se trata de los módulos, themes o el mismo núcleo de Drupal.

     Módulo Views o Vistas:

          Este es uno de los módulos más importantes que tiene Drupal y que fue integrado en el núcleo, a partir de la versión 8. El módulo Views nos permite crear consultas a la base de datos de Drupal, utilizando la interfaz de usuario, lo que significa es que no es un requisito contar con conocimientos avanzados sobre administración de bases de datos, cración de tablas, etc.

          A grandes rasgos, el concepto de crear una vista sería, piensa en el o los tipos de contenidos que quieres mostrar, luego si necesitas filtrar de algún modo esos contenidos, para que cumplan con unas condiciones específicas y a continuación, dónde y cómo lo quieres presentar.

          Para crear una vista, tendremos que ir a la url "/admin/structure/views", o si ya tienes instalado el módulo Admin Toolbar, entonces sólo necesitarás acceder a los botones del menú superior tal y como te muestro en la imagen.

          Como en nuestro proyecto Drupal estamos implementando un Subtheme basado en Bootstrap Barrio, podremos descargar y activar un módulo que aumentará nuestras opciones con las vistas, se trata del módulo contribuido Views Bootstrap, lo utilizaremos para crear un carrusel y unas cuadrículas, sin complicarnos la vida con grandes horas buscando el código necesario.

     Así que si volvemos a la pantalla de las vistas, ahora podremos elegir entre varias nuevas opciones como el carrusel de Bootstrap que no vienen por defecto en el módulo Views y que nos facilitarán enormemente cualquier tarea como esa.

     Para este ejercicio, nuestro propósito será lograr construir un carrusel tal y como se presenta en la Página Oficial, como ya hemos creado en nuestro proyecto, todos los elementos que necesitaremos, lo que nos faltará será construir la estructura utilizando Views y el Módulo Views Bootstrap que hemos activado

     Tras añadir todos los campos necesarios y hacer algunos ajustes en la configuración de nuestra vista, tanto en los campos como en la configuración del propio carrusel que nos ofrece el módulo...

     Ya tendremos nuestro carrusel funcionando, listo para mostrarlo en la página principal. Para ello nos iremos a la administración de bloques, en la url "/admin/structure/block" o utilizando el menú superior en el caso de que tengas instalado en módulo Admin Toolbar, y una vez allí, seleccionaremos el área dónde queremos que se muestre nuestra Vista tipo Bloque... y a disfrutarlo!!!

     El siguiente proceso consistirá en crear otro bloque, del tipo Cuadrícula, donde mostraremos los servicios destacados, aprovechando, al igual que en el ejemplo anterior, que ya tenemos creados dichos servicios con todos los campos que vamos a necesitar.