Sitios web responsive con Joomla!

Un enfoque práctico

Tito Alvarez

@jaTITOam

¿En pleno 2013?

“Yo aún no desarrollo para móvil”

Estadística de uso de móvil

Fuente: www.statcounter.com

Muestra en Guatemala

Fuente: www.caminoalajornada.org durante los últimos meses

Joomla 3 incorpora a Bootstrap, de Twitter (http://twitter.github.io/) para poder hacer plantillas responsive

¿Joomla es responsive?

Plantilla Protostar de Joomla 3

Administración de Joomla 3

Respuesta: Responsive Web Design

Pensar en móvil ya es un estándar

Elementos del Responsive Web Design

1. Planos responsive (responsive layouts)2. Ocultar información3. Pensar en dedos gordos

1. Planos (layouts) responsive

Vista en desktop

Vista en tablet

Vista en móvil

Inicio de la página Continuación

Uso de columnas en responsive

Distribución de columnas en Bootstrap

Columnas Bootstrap en móvil

Posiciones en la plantilla Protostar

Móvil no es siempre “más pequeño”Ancho del video en Desktop: 570px

Ancho del video en móvil: 700px

Planos responsive en Bootstrap

No todo tiene que estar disponible en todos los dispositivos, ésto es parte de la optimización para móviles

2. Ocultar información

Funciones limitadas en móvil

Vista Desktop Vista Móvil

Haciéndolo en Bootstrap

Haciéndolo en Joomla

En módulos En elementos del menú

Viéndolo en Joomla

Vista Desktop Vista móvil

O resoluciones pequeñas

3. Pensar en dedos gordos

Sitios no-responsive

Vista Desktop Vista Móvil

Al volverlo responsive

Vista Desktop Vista móvil

O también puede hacerse así

Menú oculto (default) Menú desplegado

Ventajas adquiridas

Todo lo que está enhttp://twitter.github.io/bootstrap/components.html

Bootstrap y Joomla

Uso de clases en los módulosVista normal del módulo en posición “banner” Agregando hero-unit

Clase Hero-Unit en Bootstrap

Aquí agregamos la clase

Clase “well” en Bootstrap

Agregando la clase “well”

Menús con “nav-pills” en Bootstrap

Menús agregando “nav-pills”

Menú en position-1 Agregando “nav-pills”

Dónde agregarles clases a los menús

Utilizando Bootstrap

Agregando estructuras, botones y tablas

Creando estructuras “custom”

Estructuras fluidas con columnas (span)

Uso de botones

Uso de tablas

Las plantillas son responsive, Joomla provee Bootstrap para que éstas lo utilicen

Plantillas Joomla! responsive

Plantillas Responsive

www.joomlashack.com www.joomlart.com www.yootheme.com www.rockettheme.com www.gavick.com Y muchos más

Frameworks Responsive

Wright Framework: http://wright.joomlashack.com/

T3: http://t3-framework.org/ Warp Framework:

http://www.yootheme.com/themes/warp-framework

Gantry Framework: http://www.gantry-framework.org/

Gracias

¿Preguntas?

Tito Alvarez

@jaTITOam

www.joomlagt.orgwww.jugmexico.o

rg www.joomla.cl