maquetación
CSS Media Queries para Desktop, Tablet, Mobile
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
@mediae@importde 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 */
}
Gutenberg
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.
Categoria
- administración
- apariencia
- backend
- bases de datos
- campos
- campos referenciados
- desarrollo
- design
- development
- diseño
- drupal 8
- drupal 9
- editor
- entidades
- entities
- estilos
- frontend
- image
- imagen
- interfaz
- maquetación
- media
- module
- módulos
- plantillas
- procedimientos
- responsive
- subtheme
- tema personalizado
- tipos de contenido
Drupal Frontend | Básicos
Imprime imagen en una views template
Este código te permite acceder a la url de la imagen e imprimirla desde una plantilla tipo views-field
Hover Effects
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