maquetación

Gutenberg | Módulo Drupal

webmaster — Wed, 19 Apr 2023 14:33:36 +0000

Gutenberg | Módulo Drupal

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.

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.

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.

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.

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.

webmaster Mié, 19/04/2023 - 16:33

Media Queries | Diseño responsivo

webmaster — Sat, 18 Mar 2023 17:27:40 +0000

Media Queries | Diseño responsivo

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:

Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML.

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 */
  
}

webmaster Sáb, 18/03/2023 - 18:27

Básicos Frontend Drupal | Introducción

webmaster — Sat, 04 Mar 2023 10:06:56 +0000

Básicos Frontend Drupal | Introducción

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.

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.

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 Theme, Adminimal y Material Admin

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.

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.

webmaster Sáb, 04/03/2023 - 11:06

Drupal Frontend | Básicos

webmaster — Sat, 04 Mar 2023 10:02:43 +0000

Drupal Frontend | Básicos

webmaster Sáb, 04/03/2023 - 11:02

En este curso, aprenderás los conocimientos básicos para trabajar con los Themes o temas de Drupal, que son los encargados de modificar el aspecto de tu proyecto, mediante el uso de plantillas. Al final del curso aprenderás dónde se encuentran los themes en la interfaz del usuario, cómo descargar y activar un theme, como crear un subtheme, entre otros.

Curso Gratuito

/curso/drupal-frontend-basicos

Imprime imagen en una views template

webmaster — Wed, 01 Mar 2023 09:41:05 +0000

Imprime imagen en una views template

Descripción

Este código te permite acceder a la url de la imagen e imprimirla desde una plantilla tipo views-field

webmaster Mié, 01/03/2023 - 10:41

Instrucciones

Crea una vista del tipo fields (Campos)
Activa el modo debug o depurador para conocer las sugerencias sobre nombres para tus plantillas
Añade todos los campos que quieres que aparezcan en tu plantilla de la vista para que puedas acceder.
Para el campo imagen, dentro de la configuración de la vista, selecciona imprimir url de la imagen, como se muestra más abajo

* De esta manera podrás añadir clases a tu campo imagen directamente desde la plantilla.

<img class="img-responsive" src="{{ fields.field_portada_articulo_guia.content|striptags }}" alt="">

Paginador

Categoría

Portada

Habilitar node ID dentro de la etiqueta Drupal

webmaster — Tue, 28 Feb 2023 19:21:39 +0000

Habilitar node ID dentro de la etiqueta <body> Drupal webmaster Mar, 28/02/2023 - 20:21

Instrucciones

PARA HABILITAR LAS CLASES DEL NODE DENTRO DE LA ETIQUETA <BODY>, SIGUE LOS SIGUIENTES PASOS:

Abrir el archivo .THEME dentro de tu tema personalizado y agregar las siguientes líneas, actualizando el nombre correspondiente al de tu SUBTHEME
Borra el caché de Drupal.Puedes hacerlo por medio de la interfaz o ejecutando el comando:
```
drush cr
```
Confirmar que ahora puedes ver el id dentro de la etiqueta <body> de tus contenidos:

/**
 * Implements hook_preprocess_HOOK().
 *
 */
function SUBTHEME_preprocess_html(&$variables) {
  $path = \Drupal::service('path.current')->getPath();
  $path_args = explode('/', $path);
  if (isset($path_args[1]) && isset($path_args[2]) && ($path_args[1] == 'node') && (is_numeric($path_args[2]))) {
    $variables['attributes']['class'][] = 'page-node-' . $path_args[2];
  }
}

Paginador

Categoría

Portada

Hover Effects

webmaster — Sun, 26 Feb 2023 15:27:27 +0000

Hover Effects webmaster Dom, 26/02/2023 - 16:27

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

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

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

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Paso 1 Descargar el módulo:

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

Paso 2 Activación del módulo :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Personzalizando Vistas Parte 1: HAZ CLIC AQUÍ

Personalinzando Vistas Parte 2: HAZ CLIC AQUI

Categoría