Banner Top 2

Banner Top 1

Template Responsivos de Gavick Template Responsivos de Gavick Gavick

Diseño Responsivo en Joomla - Cómo lo simplificó Gavick?

Diseño Responsivo en Joomla - Cómo lo simplificó Gavick? - 5.0 out of 5 based on 4 votes

Google+

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.

Valora este artículo
(4 votos)

6 comentarios

  • Nibaldo Barrera
    Nibaldo Barrera Jueves, 18 Diciembre 2014 21:27 Enlace al Comentario

    El módulo "Grid GK5" de Gavick no obtiene contenidos directamente, en su lugar, se sirve de otros módulos para esto.

    Supongamos que desea hacer una Grilla de 2 filas y 3 columnas,

    11 12 13
    21 22 23

    entonces primero debe publicar 6 módulos (de cualquier tipo, pueden ser propios del core de joomla, NSP (News Show Pro también de Gavick), de K2 o bien HTML personalizado, que son los que finalmente llenarán las celdas de la Grilla, por lo tanto todo el sistema consistirá de 7 módulos, 6 que obtienen datos y uno que los presenta.

    Publicamos cada uno de los 6 módulos que obtienen datos en una posición ficticia (por ejemplo GRID1), sugerimos una posición ficticia para que los datos solo sean presentados en la grilla.

    Posteriormente una vez publicados los 6 módulos, debe proceder a crear el módulo Grid Gk5 que es el que finalmente mostrará en sus celdas el contenido de cada uno de los otros módulos ya creados.

    Entonces, cree una instancia del módulo Grid GK5, ya adentro, una vez que le dio el nombre a este módulo y la posición en que finalmente se mostrará (preferentemente en mainbody), ud. establece el llenado de las cedas en la pestaña [Grid Setup].

    En esta opción pincha el botón [+] y en ese momento en el campo [position] ingresa la posición en la que está el módulo que desea presentar en la primera celda (la primera de arriba a la izquierda), en este caso la posición es la posición ficticia en la que publicó los 6 módulos, tomará el primero de los módulos que está en dicha posición.

    La grilla soporta hasta 6 bloques hacia el lado, en este caso, como dejaremos 3 módulos hacia el lado, los dejaremos todos de 2 x 1. (cada módulo ocupará 2 celdas de ancho)
    - Desktop Size 2x1 (indica que esta sera de 2x1)
    - Tablet Size 2x1 (indica que esta celda sera de 2x1)
    - Mobile Size 2x1 (indica que esta celda sera de 2x1)

    Termina de ingresar el bloque con el botón [Save Block], entonces Grid GK5 tomará el primero de los módulos que esté publicado en la posición GRID1 y lo pondrá en la primera celda.
    (en el diagrama de la derecha ve como va quedando), si desea cambiar solo debe pinchar una de las celdas de la derecha y se abrirá nuevamente los parámetros de la celda.

    Luego presiona nuevamente el botón [+] y continúa con la segunda celda y así sucesivamente hasta completar las 6 celdas.

    Una de las ventajas de este módulo, ademas de que permite una presentación muy vistosa, es su responsividad, esto es, las celdas se re-acomodan cuando la página se visualiza en un dispositivo con una pantalla menor (Tablet o smartphone).

    Vea un ejemplo en que http://www.kazeta.cl aplicó esto módulo en http://www.alljoy.cl y http://www.cabanastamarugos.cl

  • Marco Uribe Bazalar
    Marco Uribe Bazalar Miércoles, 03 Diciembre 2014 03:41 Enlace al Comentario

    Saludos digame el gk5 grid de donde jala la data? no encuentro dentro del setting ninguna pestaña que indique de donde obtendra la info. gracias de antemano x la ayuda.

  • Marco Uribe Bazalar
    Marco Uribe Bazalar Miércoles, 03 Diciembre 2014 03:41 Enlace al Comentario

    Saludos digame el gk5 grid de donde jala la data? no encuentro dentro del setting ninguna pestaña que indique de donde obtendra la info. gracias de antemano x la ayuda.

  • LEandro Jiménez Sánchez
    LEandro Jiménez Sánchez Martes, 25 Noviembre 2014 06:14 Enlace al Comentario

    Hola
    Muy interesante el artículo. Tengo una pregunta para usted. Estoy utilizando la plantilla Meet Garvenr para mis proyectos. Puedo cambiarle es aspecto a cualquier módulo menos al menú. Sería tan amable de decir como hacerlo? He cambiado estilos en template.css y me los borra en cuanto recargo la página. Los he cambiado en bootstrap.css y nada de nada. También he intentado el los ficheros .less. Qué es lo que puede ocurrir? Donde puedo cambiar los estilos para que me sean permanentes?

    Muchas gracias, un saludo

  • Nibaldo Barrera
    Nibaldo Barrera Martes, 29 Julio 2014 01:24 Enlace al Comentario

    La mayoría de las plantillas Gavick trae una sección específica destinada a la configuración de la integración con algunas redes sociales (no todas).

    - Botón "Me gusta" de Facebook.
    - Botón +1 de Google+
    - Botón "Compatir" de Google+
    - Botón Twitter
    - Botón "Pin It" de Pinterest

    Cabe destacar que esta integración, es mucho más que un simple enlace a la Pagina de Inicio de la red social en cuestión, en su lugar levanta una ventana emergente (popup) con un resumen de la página que se está viendo (imagen incluida) y permite incrustar un post en la cuenta personal de la red social de la persona que está visitando la página en ese momento (se requiere que la persona esté conectada a la red social en cuestión).
    Para la integración Facebook se requiere obtener anticipadamente una Facebook API ID.
    No está incluida Instagram en esta solución y no se puede agregar en la solución de la plantilla Gavick.
    Una alternativa es prescindir de la solución que trae incorporada la plantilla Gavick e instalar otra extensión para este fin.

  • diego
    diego Viernes, 25 Julio 2014 23:24 Enlace al Comentario

    tengo una cosulta yo estoy utilizando una platilla de gavickpro al momento de editar los iconos de las redes sociales no encuentro donde .. se donde esta el codigo y demas pero no se como agregar otro icono (instagram) ya que al parcer no utliza imagens incrustadas para estos iconos... me pueden ayudar con eso...

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

volver arriba

Agreganos en G+

 

 

 

Gavick Magazine

Joomla & WordPress Tutorials, Info, Discussion, Tips | GavickPro Blog