View
1.463
Download
0
Embed Size (px)
DESCRIPTION
Desde la versión 3, Joomla incorpora a Bootstrap para poder crear sitios responsive (compatibles con varios tipos de dispositivos incluyendo móviles) Esta presentación indica los lineamientos básicos del Responsive Web Design y muestra cómo se utilizan en Joomla!
Citation preview
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