Sitios web responsive con Joomla!

1,890 views
1,758 views

Published on

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!

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,890
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Sitios web responsive con Joomla!

  1. 1. Sitios web responsivecon Joomla!Un enfoque prácticoTito Alvarez@jaTITOam
  2. 2. ¿En pleno 2013?“Yo aún no desarrollo paramóvil”
  3. 3. Estadística de uso de móvilFuente: www.statcounter.com
  4. 4. Muestra en GuatemalaFuente: www.caminoalajornada.org durante los últimos meses
  5. 5. Joomla 3 incorpora a Bootstrap, de Twitter (http://twitter.github.io/) para poder hacerplantillas responsive¿Joomla es responsive?
  6. 6. Plantilla Protostar de Joomla 3
  7. 7. Administración de Joomla 3
  8. 8. Respuesta: Responsive Web DesignPensar en móvil ya es unestándar
  9. 9. Elementos del Responsive WebDesign1. Planos responsive (responsive layouts)2. Ocultar información3. Pensar en dedos gordos
  10. 10. 1. Planos (layouts)responsive
  11. 11. Vista en desktop
  12. 12. Vista en tablet
  13. 13. Vista en móvilInicio de la página Continuación
  14. 14. Uso de columnas en responsive
  15. 15. Distribución de columnas enBootstrap
  16. 16. Columnas Bootstrap en móvil
  17. 17. Posiciones en la plantillaProtostar
  18. 18. Móvil no es siempre “máspequeño”Ancho del video en Desktop:570pxAncho del video en móvil:700px
  19. 19. Planos responsive en Bootstrap
  20. 20. No todo tiene que estar disponible en todoslos dispositivos, ésto es parte de laoptimización para móviles2. Ocultar información
  21. 21. Funciones limitadas en móvilVista Desktop Vista Móvil
  22. 22. Haciéndolo en Bootstrap
  23. 23. Haciéndolo en JoomlaEn módulos En elementos del menú
  24. 24. Viéndolo en JoomlaVista Desktop Vista móvil
  25. 25. O resoluciones pequeñas3. Pensar en dedos gordos
  26. 26. Sitios no-responsiveVista Desktop Vista Móvil
  27. 27. Al volverlo responsiveVista Desktop Vista móvil
  28. 28. O también puede hacerse asíMenú oculto (default) Menú desplegado
  29. 29. Ventajas adquiridasTodo lo que está enhttp://twitter.github.io/bootstrap/components.htmlBootstrap y Joomla
  30. 30. Uso de clases en los módulosVista normal del módulo enposición “banner” Agregando hero-unit
  31. 31. Clase Hero-Unit en Bootstrap
  32. 32. Aquí agregamos la clase
  33. 33. Clase “well” en Bootstrap
  34. 34. Agregando la clase “well”
  35. 35. Menús con “nav-pills” enBootstrap
  36. 36. Menús agregando “nav-pills”Menú en position-1 Agregando “nav-pills”
  37. 37. Dónde agregarles clases a losmenús
  38. 38. Utilizando BootstrapAgregando estructuras, botones y tablasCreando estructuras “custom”
  39. 39. Estructuras fluidas con columnas(span)
  40. 40. Uso de botones
  41. 41. Uso de tablas
  42. 42. Las plantillas son responsive, Joomlaprovee Bootstrap para que éstas lo utilicenPlantillas Joomla! responsive
  43. 43. Plantillas Responsive www.joomlashack.com www.joomlart.com www.yootheme.com www.rockettheme.com www.gavick.com Y muchos más
  44. 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. 45. Gracias¿Preguntas?Tito Alvarez@jaTITOamwww.joomlagt.orgwww.jugmexico.orgwww.joomla.cl

×