Gavick

Google+

BuyBitcoinFiveMinute

Layout Responsivo

A mediados del 2012 GavickPro ha comenzado a liberar las plantillas llamadas de “diseño sensible” o de “diseño responsivo”. En este artículo se explican las características de estas plantillas.

Traducido por Nibaldo Barrera de la documentación de GavickPro. Algunos términos técnicos no se tradujeron y se dejaron en inglés para conservar la jerga habitualmente utilizada en los templates Gavick y en Joomla.

La nuevo sección “Layout” de los templates responsivos de Gavick administra el diseño de página. Esto se relaciona con el nuevo enfoque de diseño de la plantilla por lo que las páginas tienen ahora la capacidad de escalar hacia arriba o hacia abajo con el fin de coincidir con los tamaños de pantalla de distintos dispositivos: desde la pantalla completa de un equipo de escritorio hacia tablets y hacia pequeños pantallas táctiles que se encuentran en los teléfonos inteligentes.

Los siguientes cambios fueron necesarios para implementar el soporte para diseño web responsivo:

  • nuevos layout para posiciones de módulos
  • nuevos sufijos para posiciones de módulos alteradas
  • nuevos sufijos específicos para despliegue en dispositivos móviles
  • sección móvil removida desde la configuración del template

Nuevo layout para posiciones de módulos

Cada template de layout responsivo contiene 3 variantes de layout. Estas variantes de layout son:

  • desktop – un layout diseñado para soportar grandes pantallas de ancho estandar, con el menú normal y el formato de múltiples columnas;
  • tablet – un layout para su visualización en dispositivos de tamaño de tableta, con ciertos elementos trasladados a nuevas posiciones y el uso de un formato de dos columnas, y,
  • mobile – un layout para soporte de las pantallas más pequeñas disponibles en la actualidad, con la que a un visitante del sitio se le presenta con un diseño de una sola columna.

Comparación Layout Responsivo

Comparemos estos layout en más detalle.

La imagen de más abajo demuestra que la sección principal del template consiste de 3 columnas a saber:

  • inset
  • mainbody
  • sidebar

Inset MainBody SideBar

La columna mainbody está parcialmente combinada con el sidebar porque los módulos del sidebar en pequeñas pantallas deberías localizarse debajo del mainbody. Así, en esta instancia el bloque Mainbody es tratado como un simple bloque movible de módulos sidebar. El módulo sidebar usa Moomasonry para llenar el espacio disponible: Un poco más adelante, en este artículo, se discute este mecanismo.

Cuatro elementos básicos han sido cambiados en la variación Tablet del layout estandar:

  • el menu está posicionado debajo del logo.
  • la columna Inset ha sido movida  la esquina superior derecha como un botón.
  • Los módulos desde la posicion Sidebar crean 2 columnas bajo el bloque Mainbody
  • El pie de página (footer) está ahora desplegado al fin de la página y no en la columna Inset

El layout para dispositivos móviles ha recibido tratamiento similar:

  • El menú ahora crea la barra ubicada arriba.
  • el botón de la columna Inset va a la barre de Menú.
  • Los módulos desde posición de módulo Sidebar ahora crean un layot de una columna bajo el cuerpo del bloque Mainbody.
  • el pie de página es más pequeño y se ajusta a la anchura del dispositivo móvil.

¿Cómo funciona todo esto?

GavickPro ha incrustado unos pocos media queris en cada template:

  • al final del archivo css/menu/menu.css, ha colocado un código al que nos referimos como “media queris”, el que, basándose en el tipo de tipo de pantalla detectada para el dispositivo actual, seleccionará y mostrará el correspondiente diseño de menú.
  • Las reglas para las pantallas más pequeñas se encuentran en el archivo css/tablet.css
  • Las reglas CSS responsibles para el diseño de la página en las pantallas más pequeñas se encuentran en el archivo css/mobile.css

Media queries para el archivo tablet.css están calculadas automáticamente dependiendo de la configuración de la sección layout del template.

En general, el layout Tablet se activa cuando el tamaño de pantalla es más pequeño que la suma de los anchos de las columnas Mainbody e Inset.

Layout para Tablet

El contenido del archivo mobile.css  se habilitado para smartphones con una pantalla menor a 640 pixeles (por supuesto, con un razón de 2.0).

Para resoluciones más alta, el layout predeterminado normalmente será un ajuste automático usando la grilla del template.

Grilla Completa (Full Grid)

Como se configura la grilla del layout del template?

Echemos un vistazo a la nueva sección Layout en la configuración del Template:

Configuración de Templates Responsivos de Gavick

Una pocas opciones importantes se encuentran aquí:

  • Body left/right padding – Esta opción es usada para configurar el espacio left/right en el layout de la página. Esto es necesario para establecer el valor propio para evitar problemas relacionados a los bloques que están siendo ubicados sobre el borde de la pantalla.
  • Grid base width – La más importante configuración, es usada para especificar el ancho de la columna de la grilla del layout. Describe cuan ancha será cada columna y está estrechamente vinculado a las opciones siguientes.
  • Grid spaces – Una muy importante opción también, esta especifica los espacios entre entre bloques en el Layout:
    • mainbody width – Esta opción está relacionada al ancho de la base de la grilla (‘grid base width’). Aquí, puede especificar el ancho de la columna mainbody usando el ancho de la columna base (e.g., si el ancho de la columna fue establecido a 200 pixeles y el ancho del mainbody fue establecido a 2, entonces el ancho del mainbody sería igual a 200 * 2 = 400 pixeles. El espacio real en la columna mainbody será más pequeño porque todos los bloques usan la propiedad CSS box-sising con el valor border-box establecido, así el espacio final será más pequeño que el valor del espacio de la grilla multiplicado por 2.
  • content width – Esta opción opera como las otras opciones usadas para anular ciertos valores de opciones específicas o ItemId. Aquí, la anchura de mainbody para páginas específicas puede ser anulado, por ejemplo, si necesita una columna mainbody más amplia para el componente K2.
  • Inset column width – Especifica el ancho de la columna inset en pixeles.
  • Maximal amount of columns – Especifica el ancho máximo de la página. Este es útil con pantallas muy grandes, por ejemplo, para anchos de columna establecidos en 200 pixeles con máximo de 10 columnas, el layout de la página detendrá la expansión en pantallas de más de 2000 pixeles.

Espacios de la Grilla

Las últimas 2 opciones son de menos importancia para el layout

  • footer position – usada para definir donde aparecerá el footer (pié de página). El footer normalmente aparecerá sobre la columna inset; en un tablet y vistas móviles esta va en la parte inferior de la pagina, pero también puedes desplegar un footer duplicado (en inset y en la parte  de abajo) o mostrar solo el footer en la parte de abajo.
  • Blocks animation – Esta opción activa/desactiva la animación usada cuando MooMasonry ordena los bloques.

MooMasonry es una parte increíble y muy importante de las plantillas responsivas de GavickPro. Han mejorado el script original con sus propios ajustes.

¿Como es usado MooMasonry en los Templates Gavick?

MooMasonry es usado en tres posiciones de módulo en cada plantilla GavickPro de diseño responsivo para Joomla:

  • sidebar
  • top
  • bottom

En general, MooMasonry corrige las posiciones de los bloques para evitar problemas debidos a los espacios en blanco resultantes de los elementos flotantes.

En la imagen siguiente se compara el diseño tradicional con elementos flotantes versus el diseño generado por MooMasonry:

Moomasonry

En pantallas más anchas, MooMasonry utiliza el ancho base de la columna para generar el diseño de módulos. En las pantallas más pequeñas (tablets/teléfonos móviles), utiliza un porcentaje del ancho para las columnas dobles o individuales de los módulos.

Nuevos sufijos para posiciones de módulos modificadas

En pantallas anchas los siguientes sufíjos de módulos especiales pueden ser aplicados:

  • half
  • one
  • double
  • triple
  • fourfold

Sufijos especiales

Nota Importante!

El módulo no puede ser más ancho que la columna mainbody. Por lo tanto, si se establece el ancho del mainbody a 3 entonces el sufijo fourfold tendrán la misma anchura que el sufijo triple. Con el ancho del mainbody establecido en 2, el sufijo doble será igual al máximo y los sufijos fourfold y triple serán igual a la anchura de módulo de sufijo doble. Este límite es necesario para situaciones donde los módulos está situados bajo la columna mainbody, pero el tablet.css todavía no está cargado. Recuerde que se recomienda utilizar el sufijo full, que genera 100% del ancho de módulo, sólo para los módulos que son últimos en cualquier posición de módulo en particular. Aplicando full en otras situaciones dará lugar a problemas con el posicionamiento de otros bloques.

En general, puede utilizar los sufijos de módulos especiales para controlar el layout de los módulos. GavickPro también ha actualizado algunos otros elementos importantes – siendo el más importante el hecho de que el script ahora controla la altura del bloque; si cambia, entonces el layout será re-ordenado con un pequeño retardo para ajustarse para las nuevas dimensiones.

Nuevos Sufijos para Dispositivos Móviles

En la preparación de una página web para la visualización en un amplio espectro de tipos de dispositivos, se debe considerar que cierta información sólo puede ser absolutamente necesario en dispositivos específicos. Es por eso que hemos elaborado cuatro sufijos especiales:

  • onlytablet – el bloque solo será visible cuabdi tablet.css sea cargado
  • onlymobile – el bloque solo será visible cuando mobile.css sea cargado
  • notablet – el bloque no será visible cuando table.css sea cargado
  • nomobile – el bloque no será visible cuando mobile.css sea cargado

Para suprimir un módulo de visualización tanto que los tablet como en los dispositivos móviles, se aplican ambos sufijos simultáneamente, tales como: “notablet nomobile” (y recuerde que debe colocar un espacio al principio de cada sufijo!).

Sección Mobile removida de la configuración del template

Este cambio era necesario, evidentemente, como un resultado de la naturaleza dinámica de la nueva composición de plantilla basándose en el tamaño de pantalla de dispositivo. Los cambios adicionales eran necesarios para preparar la página para dispositivos táctiles. Es por eso que Gavick ha preparado un script especial que cambia la forma en que funciona el menú principal en tablets: el uso de un clic para abrir un submenú y un doble clic para abrir el enlace.

Resumen

GavickPro ha implementado el diseño web responsivo en la preparación de las plantillas nuevas en una era post-PC. Va a seguir para mejorar la configuración de plantilla y añadir nuevas opciones, la creación de nuevas posibilidades.

Por favor, recuerde que cuando se utiliza una plantilla responsiva para un proyecto Web, sólo deben ser seleccionados módulos desarrollados para trabajar con el diseño responsivo. Por ejemplo, el módulo Tabs GK5 es totalmente compatible con el diseño responsivo en el modo horizontal. También se ha  añadido nuevas opciones para el módulo News Show Pro GK4 para que sea más responsivo, y que pronto se liberará estilos responsivos para el módulo Image Show GK4.

Únase Al Boletín de KaZeta

Únase Al Boletín de KaZeta

Descubra los últimas secretos del Marketing digital y reciba de regalo un ebook con una recopilación de 10 herramientas gratuitas de productividad que nosotros mismos usamos a diario. Y de paso mantengase al día con las últimas tendencias del mundo internet.

Se ha suscrito con éxito