Conferencia dictada por Javier Gómez Corio sobre el tema de la movilidad y cómo Joomla! lo ha asumido. Participación de alto interés, para quienes se orientan al mercado de los teléfonos celulares.

1. CONFERENCIA MAGISTRAL 2
Joomla Mobile
Javier Gómez

2. Estrategias “mobile” para proyectos Joomla
Presentación basada en:
Mobile Joomla Strategies & Techniques
Joomla Day Chicago August 11, 2012
Autor: Cory Webb corywebbmedia.com

3. ¿A quién va dirigida esta presentación?
- diseñador@s
- programador@s
- director@s de proyecto
- otros

4. ¿¡Movilidad!?
¿Para qué?...

5. ¡Mostrad vuestros smartphones y tablets!
- En el mundo hay 1,2 billones de usuarios web móviles
- Uso de Internet móvil en Colombia subió el 69% en
2011
- 208 million US mobile 3G subscribers in Q4 2011
LA MOVILIDAD NO ES EL FUTURO... ES ¡YA!

7. ¿¿¿Movilidad???
- Distintas dimensiones de pantalla

8. ¿¿¿Movilidad???
- Distintas dimensiones de pantalla
- Distinta interacción

9. ¿¿¿Movilidad???
- Distintas dimensiones de pantalla
- Distinta interacción
- ¿Distinta finalidad?

10. - Movilidad ¿para quién? y ¿para qué?
- Diseñar para terminales móviles es mucho más que
ajustar unos css y el tamaño de unas imágenes...
requiere estructurar el contenido para que sea
accesible con independencia del dispositivo.

11. ¿ Java, Objective C, .NET,... ?
- ¡No existe una web móvil!: ¡no existe una web para
iPad, una para iPhone, una para Android y otra para
escritorio... ¿y los navegadores textuales? ¿y la
versión impresa? la Web es un estándar accesible
para el acceso universal a contenidos estructurados.
Fuente: http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/

12. - Movilidad ¿para quién? y ¿para qué?
- Estrategias de movilidad ¿Qué? ¿Cómo?
– Estrategia 1: No hacer nada
– Estrategia 2: Crear una plantilla distinta para
smartphones y tablets
– Estrategia 3: Aplicación móvil nativa
– Estrategia 4: Responsive Web design (diseño
responsivo o adaptable)

13. Estrategia 1: No hacer nada...
- ¡Eiiii! ¡Que bien! No hay que hacer nada ^_^
- Tu web podrá verse en dispositivos móviles, pero ¡NO
USES flash!.
- Apple ganó la batalla a Adobe
- Flash está muerto.
- ¡Larga vida a HTML5!

14. Estrategia 1: No hacer nada...
PROS: CONTRAS:
- Es fácil - La experiencia de usuario
- Es gratis no es óptima en
celulares
- Posible percepción
negativa de la marca

15. Estrategia 2: Crear una plantilla distinta para
smartphones y tablets

16. Estrategia 2: Crear una plantilla distinta para
smartphones y tablets
- TapTheme.com
- MobileJoomla.com (permite añadir un subdomino móvil)
- RocketTheme.com – Gantry Framework
- Usar un plugin para detectar el dispositivo y navegador
con el que se conectan a mi página. Cambiando la
plantilla en función del dispositivo.

17. Estrategia 2: Crear una plantilla distinta para
smartphones y tablets
Y... ¿cómo sabemos que se ve bien en todo los
dispositivos?
- Compra todos y cada uno de los dispositivos móviles del
mercado
- Safari for Mac – User Agent Setting
- BrowserStack.com

18. Estrategia 2: Crear una plantilla distinta para
smartphones y tablets
PROS: CONTRAS:
- Es fácil - Más trabajo para gestionar para
- No es la web
excesivamente - Multitud de posiciones de los
caro módulos
- Hay bastantes - Las plantillas existentes se ven
plantillas “muy estándares”
comerciales - Más trabajo para hacer una
imagen unificada de marca

19. ¿Cuál es la mejor estratégia?
Depende:
• de la misión de su website
• de los hábitos de sus usuarios
• de los requisitos de su site
• del presupuesto
El responsive design o diseño adaptativo es
probablemente la mejor estrategia, pero eso depende
de cada circunstancia

20. Estrategia 3: Aplicación móvil nativa

21. Estrategia 3: Aplicación móvil nativa
- Sí, Joomla puede servir contenido a una aplicación móvil
- Requiere desarrollo específico de una API
- http://relaxapi.com/ - REST API para J! 1.5
- Herramientas de desarrollo:
– Appcelerator Titanium
– PhoneGap

22. Estrategia 3: Aplicación móvil nativa
PROS: CONTRAS:
- Posibilidad de - Caro
acceder a las - Raramente necesario
herramientas del
- Existen demasiados
dispositivo: brújula,
dispositivos en el mercado
acelerómetro...
- Buena percepción
de marca

23. Estrategia 4: Responsive Web design

24. Estrategia 4: Responsive Web design

25. Estrategia 4: Responsive Web design

26. Estrategia 4: Responsive Web design

27. Estrategia 4: Responsive Web design

28. Estrategia 4: Responsive Web design

29. Estrategia 4: Responsive Web design

30. Estrategia 4: Responsive Web design

31. Estrategia 4: Responsive Web design
- Usa 1 solo template
- El marcado HTML es el mismo para todos los
dispositivos
- Usa Media Queries para identificar y adaptarse a las
dimensiones...

32. Estrategia 4: Responsive Web design
/* Ventana Modal en
smartphone */
Media Queries =>
@media (max-width:
480px) {
.modal {
position: absolute;
top: 10px;
left: 10px;

33. Estrategia 4: Responsive Web design
Y... ¿Cómo sabemos que se ve bien en todos los
dispositivos?
- Muy fácil, tan solo tienes que cambiar el ancho del
navegador...

34. Estrategia 4: Responsive Web design
Frameworks:
- Skeleton (http://www.getskeleton.com/)
- Foundation (http://foundation.zurb.com/)
- Less Framework (http://lessframework.com/)
Y... el maravilloso Bootstrap
http://twitter.github.com/bootstrap/

35. Estrategia 4: Responsive Web design
- Usa 1 solo template
- El marcado HTML es el mismo para todos los
dispositivos
- Usa Media Queries para identificar y adaptarse a las
dimensiones

36. Estrategia 4: Responsive Web design
PROS: CONTRAS:
- Consistencia entre todas las - Probablemente
vistas requiere un rediseñar
- Sólo 1 código que gestionar y la web en cuanto a la
fácil de testear estructura del
contenido y a la
- Enfocado a estructurar
apariencia de la web
contenido universalmente
accesible
- Multitud de templates y

37. ¿Dudas?