maquetación

Gutenberg | Módulo Drupal

Video de Youtube
URL de Video remoto
Texto

      Aunque en mi opinión, una de las cosas que me enamoró de Drupal en cuanto lo conocí, es la posibilidad de manipular, personalizar y saber encontrar, prácticamente dónde y cuando ocurren la mayoría de sus funcionalidades, entiendo que el objetivo principal de cualquier herramienta de desarrollo, debería ser facilitarnos la vida, además de ofrecernos grandes posibilidades a nuestro alcance.

     Como cada proyecto requiere de diferentes requisitos para llevarse a cabo, y por lo general, uno de los más importantes, es el tiempo que tendremos que invertir hasta su puesta en producción, muchos desarrolladores web prefieren apostar por otros CMS o construir desde cero proyectos enteros, para sentir que tienen mayor control sobre sus creaciones.

     No obstante, creo que con un pequeño conocimiento sobre cómo instalar Drupal 9 usando Composer y un breve vistazo a cómo gestionar usuarios y permisos, complementado con la ayuda del Módulo Gutenberg, conocido mayormente por usuarios de Wordpress, podrías llegar a tener lo que haz estado buscando hace tiempo, una plataforma simple de manipular, pero potente, con posibilidad de adaptación a la mayoría de webs sencillas.

     Es por esta razón que a continuación, te voy a mostrar cómo puedes utilizar las opciones que integra este módulo a la interfaz de usuario, facilitándote de forma notable, la creación de nuevos contenidos en Drupal 9.

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/gutenberg

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Gutenberg 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 gutenberg -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.

 

gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony

 

Cómo utilizar Gutenberg

     Una vez activado el Módulo Gutenberg, veremos que se ha añadido una nueva opción, en la parte inferior izquierda de todos los contenidos, llamada Gutenberg Experience y que al activarla podremos ver dos listados con todos los nuevos bloques, tanto del propio módulo como de el núcleo de Drupal, que podremos activar o no, para que estén disponibles como parte de las opciones del tipo de contenido en que se han activado, modificando inmediatamente la interfaz de creación de dicho contenido.

 

Gutenberg Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     La idea principal de Gutenberg, es que convierte todos los elementos que podamos añadir, en bloques individuales, con sus propias opciones, disponibles en el momento en que seleccionamos dicho bloque o elemento, haciéndolo mucho más gráfico el método para añadir, modificar o reutilizar dicho elemento.

     Para comenzar a añadir contenidos o "Bloques" en nuestro tipo de contenido, veremos un símbolo de más dentro de un círculo y al hacer clic sobre éste, se desplegarán las diferentes opciones disponibles para agregar y una vez seleccionado el elemento que deseamos añadir y se añade, inmediatamente cambiará el panel de la derecha de la pantalla, adaptándose a las opciones disponibles para él.

 

gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony

     De entre sus opciones más llamativas, está la posibilidad de arrastrar directamente los elementos hasta la posición deseada desde el escritorio de tu ordenador, la integración con módulos como Media o Imagen, insertar directamente elementos embebidos como vídeos, sonidos, etc, o la posibilidad de crear "Bloques" de contenido reutilizables en cualquier otro lugar de la web.

     El objetivo de utilizar Gutenberg, es que todos tus tipos de contenido, sólo tengan el campo "Body" y dentro de este campo se podrán añadir, editar o eliminar el resto de elementos que se mostrará en tus páginas, incluyendo imágenes o incluso bloques del núcleo de Drupal.

Gutenberg Cloud

     Una de las opciones más novedosas de este módulo, es la posibilidad de añadir "bloques" de contenido, directamente desde su repositorio en la web Gutenbergcloud.org, mediante el sistema de CDN, por lo que dichos bloques, con características, estilos y funcionalidades prediseñados, no se guardan como el resto de contenidos en la base de datos de Drupal. Por el contrario, se añaden como etiquetas dentro del campo "BODY", que añade Drupal por defecto cada vez que creamos un nuevo tipo de contenido.

     Para añadir esta funcionalidad, sólo habría que activarla como cualquier otro módulo y una vez hecho esto, se añadirá como una de las opciones disponibles para agregar en el listado de bloques cuando hagamos clic en el selector.

 

gutenberg - www.drupaladicto.com - formacion especializada en drupal y symfony

     Por desgracia, esta funcionalidad no es compatible para todas las versiones de Drupal 9, por lo menos al momento de escribir este artículo. Pero sí podrás utilizarla en cualquier instalación de Drupal 8 o menor que la 9.1.

 

Gutenberg Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Media Queries | Diseño responsivo

Video de Youtube
URL de Video remoto

     Si piensas dedicarte a la maquetación web, es necesario que conozcas y entiendas bien, lo que en CSS se denomina como Media Queries.

     Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Se utilizan para:

     Si quieres conocer más a fondo, acerca del uso e implementación de las Media queries, puedes consultar la Página de Mozilla Developers

   CÓMO UTILIZAR MEDIA QUERIES EN TUS DESARROLLOS CON DRUPAL

     En Drupal, como ya sabrás, siempre encontraremos varias maneras de implementar soluciones a nuestros problemas. En esta ocasion, explicaré las opciones más comunes para aplicar Media queries, en tus proyectos.

     APLICANDO MEDIA QUERIES USANDO INTERFAZ DE USUARIO DRUPAL

     Si no tienes demasiado experiencia utilizando Drupal, la mejor forma de comenzar a experimentar sería mediante la interfaz de usuario. Para trabajar con CSS y Javascript, podrás hacerlo al instalar el módulo llamado Asset Injector, que te permitirá crear hojas de estilos personalizables, sin la necesidad de salir de la interfaz de usuario.

     Para aprende a instalar y trabajar con Asset Injector Haz clic aquí

     APLICANDO MEDIA QUERIES EN UN SUBTHEME DRUPAL

     Quiénes tienen algo más de experiencia en maquetación, podrán aplicar sus estilos, a través de las hojas de estilo CSS dentro del subtheme o tema personalizado, que hayan configurado para su proyecto de Drupal.

     Si quieres aprender, acerca de la creación y configuración de tus temas personalizados para Drupal, te dejo un par de enlaces, donde encontrarás documentación y videos, explicándote todos los pasos necesarios:

   Cómo crear un tema personalizado con Bootstrap 3 En Drupal 9     

   Trabajando con Subteme Bootstrap Barrio, Plantillas, Paragraphs y Permisos

   Añadir CSS Personalizado en tu Sutheme Drupal 8/9

   EJEMPLO COMPLETO DE MEDIA QUERIES

     Ahora que ya conoces un poco más, acerca del uso e implementación de los Media queries, aquí te dejo un ejemplo completo de un archivo con las diferentes variaciones, para que puedas crear tus estilos personalizados a cada dispositvo. Sólo tendrás que ir añadiendo tu código, aplicado a la clase o Id del elemento, en las líneas que están marcadas como /* CSS */.

/* 
  ##Device = Desktops (Escritorio)
  ##Screen = 1281px pantallas de escritorio de alta resolución
*/

@media (min-width: 1281px) {
  
  /* CSS */
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (portrait/Vertical)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (landscape/horizontal)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

/* 
  ##Device = Baja resolución Tablets, Mobiles (Landscape/horizontal)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  
}

/* 
  ##Device = La mayoría de los Smartphones Móviles (Portrait/Vertical)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
  
}

Básicos Frontend Drupal | Introducción

Texto

     En Drupal, la parte responsable de todo lo relacionado con el aspecto gráfico de un proyecto, se conoce como Theme o Tema. La parte más importante de un Theme la componen las plantillas, con las que podremos modificar o alterar cualquier elemento o componente dentro de Drupal.

     Por defecto, Drupal viene con varios Themes, que podremos activar directamente desde la interfaz de usuario, accediendo a la url "/admin/appearance", donde veremos el listado de Themes activados o desactivados.

Drupal 9 Frontend basico | www.drupaladicto.com - Consultor especializado en drupal y symfony

     El listado de Themes desactivados está ubicado en la parte inferior de la pantalla de configuración. En cada Theme veremos dos opciones disponibles, podremos activarlo y utilizarlo para la parte de cara al usuario final o para la administración del proyecto o podremos activarlo y utilizarlo como Theme por defecto en el frontend.

Drupal 9 Frontend basico | www.drupaladicto.com - Consultor especializado en drupal y symfony

     En la parte final de la página de configuración, econtraremos un selector, donde podremos activar el Theme específico para la interfaz de administrador del proyecto, hasta Drupal 9, por defecto el Theme que se utiliza es Seven, pero existen otros Themes disponibles para la administración, algunos son Gin Admin ThemeAdminimal y Material Admin

Drupal 9 Frontend basico | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Podremos modificar algunos de los elementos, aspecto o comportamientos del Theme activado, desde la pantalla de configuración. Para ello, haremos clic sobre en enlace Configuración, que encontraremos a la derecha del Theme activado en el proyecto.

Drupal 9 Frontend basico | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Las opciones disponibles, al acceder a la configuración del Theme, podrían variar en función del Theme que hayamos activado. Por defecto, en todos los Themes podremos cambiar el logo y el favicon, pero en otros casos, tendremos acceso casi total de su configuración y podremos modificar colores y hasta generar un Subtheme sin salir de esta pantalla.

Drupal 9 Frontend basico | www.drupaladicto.com - Consultor especializado en drupal y symfony