El documento aborda el desarrollo de sitios web responsive utilizando Joomla!, destacando la incorporación de Bootstrap en Joomla 3 para facilitar el diseño adaptable. Se presentan conceptos clave del responsive web design, como el uso de planos responsive, la ocultación de información y la consideración del tamaño de los dedos al diseñar para dispositivos móviles. Además, se mencionan diversas plantillas y frameworks que permiten lograr un diseño responsive efectivo en Joomla.

1. Sitios web responsive
con Joomla!
Un enfoque práctico
Tito Alvarez
@jaTITOam

2. ¿En pleno 2013?
“Yo aún no desarrollo para
móvil”

3. Estadística de uso de móvil
Fuente: www.statcounter.com

4. Muestra en Guatemala
Fuente: www.caminoalajornada.org durante los últimos meses

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

6. Plantilla Protostar de Joomla 3

7. Administración de Joomla 3

8. Respuesta: Responsive Web Design
Pensar en móvil ya es un
estándar

9. Elementos del Responsive Web
Design
1. Planos responsive (responsive layouts)
2. Ocultar información
3. Pensar en dedos gordos

10. 1. Planos (layouts)
responsive

11. Vista en desktop

12. Vista en tablet

13. Vista en móvil
Inicio de la página Continuación

14. Uso de columnas en responsive

15. Distribución de columnas en
Bootstrap

16. Columnas Bootstrap en móvil

17. Posiciones en la plantilla
Protostar

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

19. Planos responsive en Bootstrap

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

21. Funciones limitadas en móvil
Vista Desktop Vista Móvil

22. Haciéndolo en Bootstrap

23. Haciéndolo en Joomla
En módulos En elementos del menú

24. Viéndolo en Joomla
Vista Desktop Vista móvil

25. O resoluciones pequeñas
3. Pensar en dedos gordos

26. Sitios no-responsive
Vista Desktop Vista Móvil

27. Al volverlo responsive
Vista Desktop Vista móvil

28. O también puede hacerse así
Menú oculto (default) Menú desplegado

29. Ventajas adquiridas
Todo lo que está en
http
://twitter.github.io/bootstrap/components.html
Bootstrap y Joomla

30. Uso de clases en los módulos
Vista normal del módulo en
posición “banner” Agregando hero-unit

31. Clase Hero-Unit en Bootstrap

32. Aquí agregamos la clase

33. Clase “well” en Bootstrap

34. Agregando la clase “well”

35. Menús con “nav-pills” en
Bootstrap

36. Menús agregando “nav-pills”
Menú en position-1 Agregando “nav-pills”

37. Dónde agregarles clases a los
menús

38. Utilizando Bootstrap
Agregando estructuras, botones y tablas
Creando estructuras “custom”

39. Estructuras fluidas con columnas
(span)

40. Uso de botones

41. Uso de tablas

42. Las plantillas son responsive, Joomla
provee Bootstrap para que éstas lo utilicen
Plantillas Joomla! responsive

43. Plantillas Responsive
 www.joomlashack.com
 www.joomlart.com
 www.yootheme.com
 www.rockettheme.com
 www.gavick.com
 Y muchos más

44. 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/

45. Gracias
¿Preguntas?
Tito Alvarez
@jaTITOam
www.joomlagt.org
www.jugmexico.org
www.joomla.cl