Joomla mobile

of 37/37
CONFERENCIA MAGISTRAL 2 Joomla Mobile Javier Gómez
  • date post

    16-Dec-2014
  • Category

    Technology

  • view

    572
  • download

    0

Embed Size (px)

description

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.

Transcript of Joomla mobile

  • 1. CONFERENCIA MAGISTRAL 2Joomla Mobile Javier Gmez

2. Estrategias mobile para proyectos Joomla Presentacin basada en:Mobile Joomla Strategies & TechniquesJoomla Day Chicago August 11, 2012Autor: Cory Webb corywebbmedia.com 3. A quin va dirigida esta presentacin?- [email protected] [email protected] [email protected] de proyecto- otros 4. Movilidad!?Para qu?... 5. Mostrad vuestros smartphones y tablets!- En el mundo hay 1,2 billones de usuarios web mviles- Uso de Internet mvil en Colombia subi el 69% en 2011- 208 million US mobile 3G subscribers in Q4 2011LA MOVILIDAD NO ES EL FUTURO... ES YA! 6. Movilidad???- Distintas dimensiones de pantalla 7. Movilidad???- Distintas dimensiones de pantalla- Distinta interaccin 8. Movilidad???- Distintas dimensiones de pantalla- Distinta interaccin- Distinta finalidad? 9. - Movilidad para quin? y para qu?- Disear para terminales mviles es mucho ms que ajustar unos css y el tamao de unas imgenes... requiere estructurar el contenido para que sea accesible con independencia del dispositivo. 10. Java, Objective C, .NET,... ?- No existe una web mvil!: no existe una web paraiPad, una para iPhone, una para Android y otra paraescritorio... y los navegadores textuales? y laversin impresa? la Web es un estndar accesiblepara el acceso universal a contenidos estructurados.Fuente: http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/ 11. - Movilidad para quin? y para qu?- Estrategias de movilidad Qu? Cmo? Estrategia 1: No hacer nada Estrategia 2: Crear una plantilla distinta parasmartphones y tablets Estrategia 3: Aplicacin mvil nativa Estrategia 4: Responsive Web design (diseoresponsivo o adaptable) 12. Estrategia 1: No hacer nada...- Eiiii! Que bien! No hay que hacer nada ^_^- Tu web podr verse en dispositivos mviles, pero NO USES flash!.- Apple gan la batalla a Adobe- Flash est muerto.- Larga vida a HTML5! 13. Estrategia 1: No hacer nada...PROS: CONTRAS:- Es fcil- La experiencia de usuario- Es gratisno es ptima en celulares- Posible percepcin negativa de la marca 14. Estrategia 2: Crear una plantilla distinta para smartphones y tablets 15. Estrategia 2: Crear una plantilla distinta para smartphones y tablets- TapTheme.com- MobileJoomla.com (permite aadir un subdomino mvil)- RocketTheme.com Gantry Framework- Usar un plugin para detectar el dispositivo y navegador con el que se conectan a mi pgina. Cambiando la plantilla en funcin del dispositivo. 16. Estrategia 2: Crear una plantilla distinta para smartphones y tabletsY... cmo sabemos que se ve bien en todo losdispositivos?- Compra todos y cada uno de los dispositivos mviles del mercado- Safari for Mac User Agent Setting- BrowserStack.com 17. Estrategia 2: Crear una plantilla distinta parasmartphones y tabletsPROS: CONTRAS:- Es fcil- Ms trabajo para gestionar para- No esla web excesivamente- Multitud de posiciones de los caromdulos- Hay bastantes - Las plantillas existentes se ven plantillasmuy estndares comerciales- Ms trabajo para hacer una imagen unificada de marca 18. Cul es la mejor estratgia?Depende: de la misin de su website de los hbitos de sus usuariosde los requisitos de su sitedel presupuestoEl responsive design o diseo adaptativo es probablemente la mejor estrategia, pero eso depende de cada circunstancia 19. Estrategia 3: Aplicacin mvil nativa 20. Estrategia 3: Aplicacin mvil nativa- S, Joomla puede servir contenido a una aplicacin mvil- Requiere desarrollo especfico de una API- http://relaxapi.com/ - REST API para J! 1.5- Herramientas de desarrollo: Appcelerator Titanium PhoneGap 21. Estrategia 3: Aplicacin mvil nativaPROS:CONTRAS:- Posibilidad de - Caro acceder a las - Raramente necesario herramientas del - Existen demasiados dispositivo: brjula,dispositivos en el mercado acelermetro...- Buena percepcin de marca 22. Estrategia 4: Responsive Web design 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- 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. Estrategia 4: Responsive Web design/* Ventana Modal en smartphone */ Media Queries =>@media (max-width: 480px) { .modal {position: absolute;top: 10px;left: 10px; 32. Estrategia 4: Responsive Web designY... Cmo sabemos que se ve bien en todos losdispositivos?- Muy fcil, tan solo tienes que cambiar el ancho del navegador... 33. Estrategia 4: Responsive Web designFrameworks:- Skeleton (http://www.getskeleton.com/)- Foundation (http://foundation.zurb.com/)- Less Framework (http://lessframework.com/)Y... el maravilloso Bootstraphttp://twitter.github.com/bootstrap/ 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. Estrategia 4: Responsive Web designPROS:CONTRAS:- Consistencia entre todas las- Probablemente vistasrequiere un redisear- Slo 1 cdigo que gestionar yla web en cuanto a la fcil de testearestructura del contenido y a la- Enfocado a estructurar apariencia de la web contenido universalmente accesible- Multitud de templates y 36. Dudas?