SlideShare una empresa de Scribd logo
1 de 45
Descargar para leer sin conexión
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ón
3. 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á en
http
://twitter.github.io/bootstrap/components.html
Bootstrap y Joomla
Uso de clases en los módulos
Vista 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.org
www.jugmexico.org
www.joomla.cl

Más contenido relacionado

Destacado

Diapositivas joomla
Diapositivas joomlaDiapositivas joomla
Diapositivas joomlaBruja Loca
 
Presentacion de joomla_completa
Presentacion de joomla_completaPresentacion de joomla_completa
Presentacion de joomla_completaMjP86
 
Joomla cms primeros pasos para administrar contenidos en la web
Joomla cms primeros pasos para administrar contenidos en la webJoomla cms primeros pasos para administrar contenidos en la web
Joomla cms primeros pasos para administrar contenidos en la webxsolca
 

Destacado (6)

Diapositivas joomla
Diapositivas joomlaDiapositivas joomla
Diapositivas joomla
 
Presentacion Joomla
Presentacion JoomlaPresentacion Joomla
Presentacion Joomla
 
Joomla Basico
Joomla BasicoJoomla Basico
Joomla Basico
 
Presentacion de joomla_completa
Presentacion de joomla_completaPresentacion de joomla_completa
Presentacion de joomla_completa
 
Joomla cms primeros pasos para administrar contenidos en la web
Joomla cms primeros pasos para administrar contenidos en la webJoomla cms primeros pasos para administrar contenidos en la web
Joomla cms primeros pasos para administrar contenidos en la web
 
Curso Joomla
Curso JoomlaCurso Joomla
Curso Joomla
 

Similar a Sitios web responsive con Joomla!

Diseño y animación en la web movil
Diseño y animación en la web movilDiseño y animación en la web movil
Diseño y animación en la web movilMejorandola
 
Smad IT - Responsive Web Design
Smad IT - Responsive Web DesignSmad IT - Responsive Web Design
Smad IT - Responsive Web DesignSmad IT
 
Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2Juan Eladio Sánchez Rosas
 
JQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil LambertJQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil LambertYamil Lambert
 
App inventor Flisol 2015
App inventor Flisol 2015App inventor Flisol 2015
App inventor Flisol 2015Marco Avendaño
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesJuan Paulo Madriaza
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
 
"Moodle Mobile: situación actual y nuevos desarrollos" - Jordi Vila
"Moodle	Mobile:	situación	actual	y	nuevos	desarrollos" - Jordi Vila"Moodle	Mobile:	situación	actual	y	nuevos	desarrollos" - Jordi Vila
"Moodle Mobile: situación actual y nuevos desarrollos" - Jordi VilaNivel 7
 
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsFrameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsMario Jose Villamizar Cano
 
Introducción a App Inventor
Introducción a App InventorIntroducción a App Inventor
Introducción a App InventorMarco Avendaño
 
Caso practico....venta de tickets
Caso practico....venta de ticketsCaso practico....venta de tickets
Caso practico....venta de ticketsmagnesol7
 
Presente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearablePresente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearableSoftware Guru
 
Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)
Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)
Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)Jorge Rubiano
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensibleCarlos Zapata
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaJano Garcia
 

Similar a Sitios web responsive con Joomla! (20)

Diseño y animación en la web movil
Diseño y animación en la web movilDiseño y animación en la web movil
Diseño y animación en la web movil
 
Smad IT - Responsive Web Design
Smad IT - Responsive Web DesignSmad IT - Responsive Web Design
Smad IT - Responsive Web Design
 
Phonegap
PhonegapPhonegap
Phonegap
 
S6-DS2.pptx
S6-DS2.pptxS6-DS2.pptx
S6-DS2.pptx
 
Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2Curso: Diseño de apps y webs móviles - Parte 2
Curso: Diseño de apps y webs móviles - Parte 2
 
JQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil LambertJQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil Lambert
 
Joomla mobile
Joomla mobileJoomla mobile
Joomla mobile
 
App inventor Flisol 2015
App inventor Flisol 2015App inventor Flisol 2015
App inventor Flisol 2015
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.
 
"Moodle Mobile: situación actual y nuevos desarrollos" - Jordi Vila
"Moodle	Mobile:	situación	actual	y	nuevos	desarrollos" - Jordi Vila"Moodle	Mobile:	situación	actual	y	nuevos	desarrollos" - Jordi Vila
"Moodle Mobile: situación actual y nuevos desarrollos" - Jordi Vila
 
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsFrameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
 
Introducción a App Inventor
Introducción a App InventorIntroducción a App Inventor
Introducción a App Inventor
 
Caso practico....venta de tickets
Caso practico....venta de ticketsCaso practico....venta de tickets
Caso practico....venta de tickets
 
Presente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearablePresente y futuro del desarrollo de apps mobile y wearable
Presente y futuro del desarrollo de apps mobile y wearable
 
Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)
Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)
Tecnologías Web al servicio del desarrollo Móvil (WebSockets, WebRTC)
 
Responsive web design - diseño sensible
Responsive web design - diseño sensibleResponsive web design - diseño sensible
Responsive web design - diseño sensible
 
Responsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarciaResponsive Web Design - Diseño Sensible by @janogarcia
Responsive Web Design - Diseño Sensible by @janogarcia
 
Introducción a la web móvil
Introducción a la web móvilIntroducción a la web móvil
Introducción a la web móvil
 
Responsive design
Responsive design Responsive design
Responsive design
 

Más de Grupo de Usuarios de Joomla! Guatemala

Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...Grupo de Usuarios de Joomla! Guatemala
 

Más de Grupo de Usuarios de Joomla! Guatemala (20)

Overrides intecap-leo canton
Overrides intecap-leo cantonOverrides intecap-leo canton
Overrides intecap-leo canton
 
Sitios Multi Idiomas, por Leonel Cantón
Sitios Multi Idiomas, por Leonel CantónSitios Multi Idiomas, por Leonel Cantón
Sitios Multi Idiomas, por Leonel Cantón
 
Joomla Platform, por David Hurley
Joomla Platform, por David HurleyJoomla Platform, por David Hurley
Joomla Platform, por David Hurley
 
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
 
Creando un mundo mejor con Joomla, por Paul Orwig
Creando un mundo mejor con Joomla, por Paul OrwigCreando un mundo mejor con Joomla, por Paul Orwig
Creando un mundo mejor con Joomla, por Paul Orwig
 
SEO en Joomla
SEO en JoomlaSEO en Joomla
SEO en Joomla
 
Frameworks para Plantillas, por Tito Alvarez
Frameworks para Plantillas, por Tito AlvarezFrameworks para Plantillas, por Tito Alvarez
Frameworks para Plantillas, por Tito Alvarez
 
Creando plantillas responsive para Joomla, por David Hurley
Creando plantillas responsive para Joomla, por David HurleyCreando plantillas responsive para Joomla, por David Hurley
Creando plantillas responsive para Joomla, por David Hurley
 
Responsive Web Design, por Víctor López
Responsive Web Design, por Víctor LópezResponsive Web Design, por Víctor López
Responsive Web Design, por Víctor López
 
Un recorrido por Joomla 3
Un recorrido por Joomla 3Un recorrido por Joomla 3
Un recorrido por Joomla 3
 
Introducción a Joomla, por Gretel Gutiérrez
Introducción a Joomla, por Gretel GutiérrezIntroducción a Joomla, por Gretel Gutiérrez
Introducción a Joomla, por Gretel Gutiérrez
 
Conferencia Inicial del Joomla Day Guatemala 2013. Paul Orwig
Conferencia Inicial del Joomla Day Guatemala 2013.  Paul OrwigConferencia Inicial del Joomla Day Guatemala 2013.  Paul Orwig
Conferencia Inicial del Joomla Day Guatemala 2013. Paul Orwig
 
Joomla! sitio web en 30 minutos (Flisol GT 2011)
Joomla! sitio web en 30 minutos (Flisol GT 2011)Joomla! sitio web en 30 minutos (Flisol GT 2011)
Joomla! sitio web en 30 minutos (Flisol GT 2011)
 
Crear modulos
Crear modulosCrear modulos
Crear modulos
 
Api joomla!.key
Api joomla!.keyApi joomla!.key
Api joomla!.key
 
Diseñar en joomla!.key
Diseñar en joomla!.keyDiseñar en joomla!.key
Diseñar en joomla!.key
 
Qué es joomla
Qué es joomlaQué es joomla
Qué es joomla
 
Template overrides
Template overridesTemplate overrides
Template overrides
 
Qué más podemos hacer admin joomla
Qué más podemos hacer  admin joomlaQué más podemos hacer  admin joomla
Qué más podemos hacer admin joomla
 
Estructura básicas de plantillas en joomla!
Estructura básicas de plantillas en joomla!Estructura básicas de plantillas en joomla!
Estructura básicas de plantillas en joomla!
 

Sitios web responsive con Joomla!