CONFERENCIA MAGISTRAL 2      Joomla Mobile       Javier Gómez
Estrategias “mobile” para proyectos Joomla                   Presentación basada en:            Mobile Joomla Strategies &...
¿A quién va dirigida esta presentación?  - diseñador@s  - programador@s  - director@s de proyecto  - otros
¿¡Movilidad!?¿Para qué?...
¡Mostrad vuestros smartphones y tablets!- En el mundo hay 1,2 billones de usuarios web móviles- Uso de Internet móvil en C...
¿¿¿Movilidad???- Distintas dimensiones de pantalla
¿¿¿Movilidad???- Distintas dimensiones de pantalla- Distinta interacción
¿¿¿Movilidad???- Distintas dimensiones de pantalla- Distinta interacción- ¿Distinta finalidad?
- 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 ...
¿ Java, Objective C, .NET,... ?- ¡No existe una web móvil!: ¡no existe una web para  iPad, una para iPhone, una para Andro...
- Movilidad ¿para quién? y ¿para qué?- Estrategias de movilidad ¿Qué? ¿Cómo?  –   Estrategia 1: No hacer nada  –   Estrate...
Estrategia 1: No hacer nada...- ¡Eiiii! ¡Que bien! No hay que hacer nada ^_^- Tu web podrá verse en dispositivos móviles, ...
Estrategia 1: No hacer nada...PROS:               CONTRAS:- Es fácil          - La experiencia de usuario- Es gratis      ...
Estrategia 2: Crear una plantilla distinta para             smartphones y tablets
Estrategia 2: Crear una plantilla distinta para                 smartphones y tablets- TapTheme.com- MobileJoomla.com (per...
Estrategia 2: Crear una plantilla distinta para                 smartphones y tabletsY... ¿cómo sabemos que se ve bien en ...
Estrategia 2: Crear una plantilla distinta para              smartphones y tabletsPROS:                 CONTRAS:- Es fácil...
¿Cuál es la mejor estratégia?Depende:     • de la misión de su website     • de los hábitos de sus usuarios      •    de l...
Estrategia 3: Aplicación móvil nativa
Estrategia 3: Aplicación móvil nativa- Sí, Joomla puede servir contenido a una aplicación móvil- Requiere desarrollo espec...
Estrategia 3: Aplicación móvil nativaPROS:                      CONTRAS:- Posibilidad de           - Caro   acceder a las ...
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design
Estrategia 4: Responsive Web design- Usa 1 solo template- El marcado HTML es el mismo para todos los   dispositivos- Usa M...
Estrategia 4: Responsive Web design                    /* Ventana Modal en                       smartphone */ Media Queri...
Estrategia 4: Responsive Web designY... ¿Cómo sabemos que se ve bien en todos los  dispositivos?- Muy fácil, tan solo tien...
Estrategia 4: Responsive Web designFrameworks:- Skeleton (http://www.getskeleton.com/)- Foundation (http://foundation.zurb...
Estrategia 4: Responsive Web design- Usa 1 solo template- El marcado HTML es el mismo para todos los   dispositivos- Usa M...
Estrategia 4: Responsive Web designPROS:                            CONTRAS:- Consistencia entre todas las  - Probablement...
¿Dudas?
Joomla mobile
Upcoming SlideShare
Loading in …5
×

Joomla mobile

725 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
725
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Joomla mobile

  1. 1. CONFERENCIA MAGISTRAL 2 Joomla Mobile Javier Gómez
  2. 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. 3. ¿A quién va dirigida esta presentación? - diseñador@s - programador@s - director@s de proyecto - otros
  4. 4. ¿¡Movilidad!?¿Para qué?...
  5. 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!
  6. 6. ¿¿¿Movilidad???- Distintas dimensiones de pantalla
  7. 7. ¿¿¿Movilidad???- Distintas dimensiones de pantalla- Distinta interacción
  8. 8. ¿¿¿Movilidad???- Distintas dimensiones de pantalla- Distinta interacción- ¿Distinta finalidad?
  9. 9. - 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.
  10. 10. ¿ 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/
  11. 11. - 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)
  12. 12. 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!
  13. 13. 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
  14. 14. Estrategia 2: Crear una plantilla distinta para smartphones y tablets
  15. 15. 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.
  16. 16. Estrategia 2: Crear una plantilla distinta para smartphones y tabletsY... ¿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
  17. 17. Estrategia 2: Crear una plantilla distinta para smartphones y tabletsPROS: 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
  18. 18. ¿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 presupuestoEl responsive design o diseño adaptativo es probablemente la mejor estrategia, pero eso depende de cada circunstancia
  19. 19. Estrategia 3: Aplicación móvil nativa
  20. 20. 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
  21. 21. Estrategia 3: Aplicación móvil nativaPROS: 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
  22. 22. Estrategia 4: Responsive Web design
  23. 23. Estrategia 4: Responsive Web design
  24. 24. Estrategia 4: Responsive Web design
  25. 25. Estrategia 4: Responsive Web design
  26. 26. Estrategia 4: Responsive Web design
  27. 27. Estrategia 4: Responsive Web design
  28. 28. Estrategia 4: Responsive Web design
  29. 29. Estrategia 4: Responsive Web design
  30. 30. 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...
  31. 31. Estrategia 4: Responsive Web design /* Ventana Modal en smartphone */ Media Queries => @media (max-width: 480px) { .modal { position: absolute; top: 10px; left: 10px;
  32. 32. Estrategia 4: Responsive Web designY... ¿Cómo sabemos que se ve bien en todos los dispositivos?- Muy fácil, tan solo tienes que cambiar el ancho del navegador...
  33. 33. Estrategia 4: Responsive Web designFrameworks:- Skeleton (http://www.getskeleton.com/)- Foundation (http://foundation.zurb.com/)- Less Framework (http://lessframework.com/)Y... el maravilloso Bootstrap http://twitter.github.com/bootstrap/
  34. 34. 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
  35. 35. Estrategia 4: Responsive Web designPROS: 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
  36. 36. ¿Dudas?

×