Download - Sitios web responsive con Joomla!
![Page 1: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/1.jpg)
Sitios web responsive con Joomla!
Un enfoque práctico
Tito Alvarez
@jaTITOam
![Page 2: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/2.jpg)
¿En pleno 2013?
“Yo aún no desarrollo para móvil”
![Page 3: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/3.jpg)
Estadística de uso de móvil
Fuente: www.statcounter.com
![Page 4: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/4.jpg)
Muestra en Guatemala
Fuente: www.caminoalajornada.org durante los últimos meses
![Page 5: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/5.jpg)
Joomla 3 incorpora a Bootstrap, de Twitter (http://twitter.github.io/) para poder hacer plantillas responsive
¿Joomla es responsive?
![Page 6: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/6.jpg)
Plantilla Protostar de Joomla 3
![Page 7: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/7.jpg)
Administración de Joomla 3
![Page 8: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/8.jpg)
Respuesta: Responsive Web Design
Pensar en móvil ya es un estándar
![Page 9: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/9.jpg)
Elementos del Responsive Web Design
1. Planos responsive (responsive layouts)2. Ocultar información3. Pensar en dedos gordos
![Page 10: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/10.jpg)
1. Planos (layouts) responsive
![Page 11: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/11.jpg)
Vista en desktop
![Page 12: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/12.jpg)
Vista en tablet
![Page 13: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/13.jpg)
Vista en móvil
Inicio de la página Continuación
![Page 14: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/14.jpg)
Uso de columnas en responsive
![Page 15: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/15.jpg)
Distribución de columnas en Bootstrap
![Page 16: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/16.jpg)
Columnas Bootstrap en móvil
![Page 17: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/17.jpg)
Posiciones en la plantilla Protostar
![Page 18: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/18.jpg)
Móvil no es siempre “más pequeño”Ancho del video en Desktop: 570px
Ancho del video en móvil: 700px
![Page 19: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/19.jpg)
Planos responsive en Bootstrap
![Page 20: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/20.jpg)
No todo tiene que estar disponible en todos los dispositivos, ésto es parte de la optimización para móviles
2. Ocultar información
![Page 21: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/21.jpg)
Funciones limitadas en móvil
Vista Desktop Vista Móvil
![Page 22: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/22.jpg)
Haciéndolo en Bootstrap
![Page 23: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/23.jpg)
Haciéndolo en Joomla
En módulos En elementos del menú
![Page 24: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/24.jpg)
Viéndolo en Joomla
Vista Desktop Vista móvil
![Page 25: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/25.jpg)
O resoluciones pequeñas
3. Pensar en dedos gordos
![Page 26: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/26.jpg)
Sitios no-responsive
Vista Desktop Vista Móvil
![Page 27: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/27.jpg)
Al volverlo responsive
Vista Desktop Vista móvil
![Page 28: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/28.jpg)
O también puede hacerse así
Menú oculto (default) Menú desplegado
![Page 29: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/29.jpg)
Ventajas adquiridas
Todo lo que está enhttp://twitter.github.io/bootstrap/components.html
Bootstrap y Joomla
![Page 30: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/30.jpg)
Uso de clases en los módulosVista normal del módulo en posición “banner” Agregando hero-unit
![Page 31: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/31.jpg)
Clase Hero-Unit en Bootstrap
![Page 32: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/32.jpg)
Aquí agregamos la clase
![Page 33: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/33.jpg)
Clase “well” en Bootstrap
![Page 34: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/34.jpg)
Agregando la clase “well”
![Page 35: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/35.jpg)
Menús con “nav-pills” en Bootstrap
![Page 36: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/36.jpg)
Menús agregando “nav-pills”
Menú en position-1 Agregando “nav-pills”
![Page 37: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/37.jpg)
Dónde agregarles clases a los menús
![Page 38: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/38.jpg)
Utilizando Bootstrap
Agregando estructuras, botones y tablas
Creando estructuras “custom”
![Page 39: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/39.jpg)
Estructuras fluidas con columnas (span)
![Page 40: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/40.jpg)
Uso de botones
![Page 41: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/41.jpg)
Uso de tablas
![Page 42: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/42.jpg)
Las plantillas son responsive, Joomla provee Bootstrap para que éstas lo utilicen
Plantillas Joomla! responsive
![Page 43: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/43.jpg)
Plantillas Responsive
www.joomlashack.com www.joomlart.com www.yootheme.com www.rockettheme.com www.gavick.com Y muchos más
![Page 44: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/44.jpg)
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/
![Page 45: Sitios web responsive con Joomla!](https://reader038.vdocuments.net/reader038/viewer/2022102814/548fdb6fb4795985208b4a38/html5/thumbnails/45.jpg)
Gracias
¿Preguntas?
Tito Alvarez
@jaTITOam
www.joomlagt.orgwww.jugmexico.o
rg www.joomla.cl