Hoy en día la mayor parte del tráfico de internet ya no tiene lugar en un ordenador sino en los dispositivos móviles, es muy importante que nuestra web se adapte a estos, de manera que el usuario pueda navegar fácilmente y acceder a la información que desea. Por esta razón, aumenta la importancia de tener un site responsive ya que, ¿de qué sirve tener un site si el usuario no puede acceder a el y a su información?
Uno de los métodos utilizados en el equipo de Drupal de Hiberus para conseguir un site que se adapte a los distintos dispositivos se basa en Context Module.
Introducción a Context Module
Context Module permite controlar el site a partir de la gestión de unas condiciones combinadas con una serie de reacciones. Antes de continuar recalcar que las posibilidades de Context Module no se limitan a hacer un site responsive, sino que permite gestionar el site en función de muchas otras condiciones.
Algunas de las condiciones y reacciones que presenta el módulo son:
Destacadas en negrita las utilizadas para el responsive.
Cómo funciona Context Module
Lo primero que debemos hacer es definir un contexto. Cuando definimos un contexto estamos creando una o varias condiciones (breakpoints, lenguagues, roles…) que activarán unas reacciones (mostrar bloques en región, activar menú, título de la página, …). De esta manera podemos ir creando contextos no solo para diferentes secciones, sino también para situaciones variables: usuario anónimo o loggeado, idioma, término de taxonomía, etc.
Ampliando la funcionalidad de Context Module
Para conseguir nuestro objetivo ampliamos la funcionalidad del módulo a través de otros módulos:
- Breakpoint. Permite definir breakpoints o puntos de ruptura personalizados usando media queries.
- Context breakpoint. Proporciona un condición en el que tiene lugar el reacción.
- Context view mode (módulo customizado). Define una reacción que te permite cambiar el view mode del tipo de contenido en base una condición.
- Context breakpoint caché (modulo customizado). Te permite, para una misma url, cachear en base al view mode en el que se está pintando según el contexto definido, reduciendo la carga de php.
Ejemplo de desarrollo utilizando Context Module
Proyecto: SimplySano, un portal de Supermercados Simply en el que cada semana encontrarás un nuevo menú compuesto por recetas inspiradoras, sencillas, sanas, equilibradas y fáciles de preparar. Todas supervisadas por un experto nutricionista, Javier Tenas, y realizadas por Maria del Carmen Valerdi Quiroz, Profesora de ESAH de Cocina Profesional e Historia de la Gastronomía.
Estos serían los pasos a realizar para utilizar Context Module:
- Definir BREAKPOINTS en el que queremos que ocurra una reacción.
- Definir CONDICIONES. Seleccionamos el tipo de condición en la que queremos que tenga lugar la reacción. Puesto que estamos trabajando de cara a hacer nuestro site responsive la condición que nos interesa es BREAKPOINT o PUNTO DE INTERRUPCIÓN. Se puede seleccionar una o varias condiciones por contexto y definir si será suficiente que se cumpla una de ellas para que tenga lugar la reacción o si tienen que cumplirse todas para que ésta se ejecute.
- Definir REACCIONES. Para cada una de las condiciones debemos definir que reacción o reacciones queremos que tengan lugar. A continuación se presenta cómo trabajar para definir qué view modes se utilizan según el dispositivo en el que se trabaja.
Para trabajar con view modes seleccionamos la reacción SWITCH VIEW MODE:
Definimos que view mode queremos que se visualice al cumplirse la condición del contexto definido.
Como hemos visto Context module te ayuda a hacer de tu desarrollo Drupal un site responsive de una forma fácil y cómoda. Trabajando con este módulo podemos:
- Seleccionar qué contenidos mostrar dependiendo la resolución del dispositivo, evitando la carga de código que nos interese.
- Cargar diferentes tamaños de imágenes según la resolución del dispositivo.
- Organizar el contenido en función de la resolución del dispositivo.
Todo esto permite menos tiempos de carga y una mayor accesibilidad a tu web, lo que lleva a mejorar las conversiones y ventas.
Drupal constituye actualmente la mejor opción para desarrollar su portal en Internet con tecnología opensource. ¿Estás pensando en llevar a cabo un proyecto en Drupal? Contacta con nuestro equipo experto en Drupal. Te ayudaremos en todo lo que sea necesario para que tu proyecto sea un éxito.
¿Quieres más información sobre nuestros servicios de Drupal?
Contacta con nuestro equipo de Drupal
Claro, sencillo y muy útil, gracias!
Buenos días,
la verdad es que me ha resultado muy útil este artículo. He desarrollado ya varias webs con Drupal, pero siempre hacia el responsive mediante media queries directamente en CSS. Y quería probar este método.
Pero me ha surgido un problema, tras instalar todos los módulos necesarios y darle permisos y configurar, en la pestaña de Reactions no me aparece SWITCH VIEW MODE. He estado dandole muchas vueltas y no se porque. ¿Alguna idea?
Muchas gracias de antemano.
Hola Alberto que tal tengo una duda soy un poco nuevo usando drupal mi duda es como haces las media queries en el css ya que tengo un tema que no es responsive y este me genera varios css y no se que parte modificar para hacer el tema responsive.
Nota: No puedo cambiar el tema que uso ya que no me lo permiten por ese motivo quisiera hacer ese tema responsive.
Muchas gracias de antemano.
Hola Alberto,
Las ‘media queries’ se utilizan del mismo modo que si maquetares un WordPress, Joomla o cualquier otro CMS o HTML.
La sintaxis básica es esta:
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Te copio una url del w3c por si te puede ser útil como base: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Por otro lado, ya que el tema no es tuyo te aconsejo que, en lugar editar las CSS del tema te crees una nueva y sobreescribas lo que te interese desde esta, de esta manera te aseguras de no ‘romper’ nada en el tema.
Un saludo,
Alba
Hola Alberto,
Es normal que no te salga la opción.
El módulo que nos permite jugar con el ‘view mode’ en la gestión del ‘Context’ no es un módulo contrib, lo hemos desarrollado nosotros.
Un saludo,
Alba