aníbal sánchez @anibal sanchez - ... · ¿qué suma la movilidad? enfoque "primero el...
TRANSCRIPT
![Page 1: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/1.jpg)
Una aplicación móvil por sitio Joomla!
Aníbal Sánchez
@anibal_sanchez - http://blog.anibalhsanchez.comJoomGap - http://www.joomgap.com
Extly Extensions - http://www.extly.com
JoomlaMadrid 2016
Miércoles, 20 Abril 2016 - Inscripciones Abiertas http://www.meetup.com/es-ES/joomlamadrid/events/229678003
![Page 2: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/2.jpg)
Acerca de ...
● Desarrollador líder de @extly y @joomgap
● 15+ años de experiencia en desarrollo en Internet
● Integrando Joomla! desde 2007
● Voluntario en Joomla!
○ Marketing Manager en Extensions Directory (JED)
○ Miembro del Joomla! Bug Squad
○ Voluntario en Joomla! StackExchange (6000+)
○ Autor para la Joomla! Community Magazine EN y ES
![Page 3: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/3.jpg)
Acerca de ...
● AutoTweetNG y Joocial
● XTDir for SobiPro
● XT Adaptive Images
● Starters
● Apps móviles
para Joomla!
![Page 4: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/4.jpg)
Una aplicación móvil por sitio Joomla!
El Cambio de
Paradigma
![Page 5: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/5.jpg)
Una aplicación móvil por sitio Joomla!
¿Cómo cambiar
nuestros proyectos?
![Page 6: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/6.jpg)
Una aplicación móvil por sitio Joomla!
Enfoque
"Primero el móvil"
![Page 7: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/7.jpg)
No va a suceder
Quiero que mi sitio
se vea en los móviles
y en una App.
![Page 8: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/8.jpg)
Enfoque "Primero el móvil"
… … ….
![Page 9: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/9.jpg)
Enfoque "Primero el móvil"
¿Qué suma la movilidad?
![Page 10: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/10.jpg)
Enfoque "Primero el móvil"
Una aplicación móvil por sitio Joomla!
● ¿Este proyecto necesita tener App?
● ¿Podemos incluir una App en la propuesta de proyecto ahora?
● Celulares? Tablets? Relojes? GPS? Cámara?
![Page 11: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/11.jpg)
Enfoque "Primero el móvil"
Una aplicación móvil por sitio Joomla!
● ¿Este proyecto sólo necesita un sitio con diseño responsive?
● ¿Alcanza con sólo tener un sitio responsive?
![Page 12: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/12.jpg)
Aplicaciones móviles Joomla!
● Oportunidades del cambio tecnológico
○ Navegación de contenido y búsquedas
○ Gestión del sitio
○ Comercio electrónico
○ Apps Corporativas
![Page 13: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/13.jpg)
Extly - Joocial Composer App case
App para Gestión,
basada en código abierto,
con tecnología Web,
para Android y Apple iOS,
con el mismo código fuente,
de nivel corporativo (seguridad OAuth).
![Page 14: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/14.jpg)
Extly - Caso Joocial Composer App
![Page 15: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/15.jpg)
Extly - Caso Joocial Composer App
Sinergia con el ecosistema móvil
Compartir contenido desde Joomla! a redes sociales móviles “puras”: Instagram, Pinterest, Whatsapp, SnapChat, etc.
![Page 16: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/16.jpg)
Presentando JoomGap
JoomGap es un SDK de código abierto para el desarrollo de aplicaciones móviles híbridos para Joomla! CMS, basado en tecnología web.
● Starters○ JG Boilerplate○ JG Boilerplate 2 Beta (Angular 2)○ JG Boilerplate Material
● Joocial Composer App ○ Production ready○ JoomGap SDK○ PhoneGap, AngularJS and Ionic
![Page 17: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/17.jpg)
Presentando JoomGap - JG Boilerplate Material
How to create a JoomGap mobile app based on JG Boilerplate Material Designhttp://www.joomgap.com/docs/how-tos/boilerplate-material
![Page 18: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/18.jpg)
Primicia JoomGap - XT Backup for Akeeba
XT Backup for Akeeba
![Page 19: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/19.jpg)
Resumen
Ya hay herramientas disponibles,
para desarrollar Apps Web,
para Android, Apple iOS y Win Phone
basadas en Html5 / CSS / JavaScript.
![Page 20: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/20.jpg)
Próximos pasos
Una aplicación móvil por sitio Joomla!
![Page 21: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/21.jpg)
Preguntas y feedback
Aníbal Sánchez
@anibal_sanchez http://blog.anibalhsanchez.com
JoomGaphttp://www.joomgap.com
Extly Extensions http://www.extly.com
![Page 22: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/22.jpg)
Tech Stuff - Paso 1 - Apps Web Híbridas
● Cordova - PhoneGap
○ Local Web Application
○ Html5 / CSS / JavaScript
○ Plugins
![Page 23: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/23.jpg)
Tech Stuff - Paso 1 - Apps Web Híbridas
● Opción A - Compilación Remota
○ PhoneGap Build
○ AppGyver, trigger.io, etc.
● Opción B - Compilación Local
○ Android
○ Apple iOS *
![Page 24: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/24.jpg)
Tech Stuff - Paso 2 - Nuevo cinturón de herramientas
● Html5 / CSS / Javascript Editor
● Local Debugging
○ Chrome DevTools
○ FireBug
● Remote Debugging
○ Chrome DevTools
○ GapDebug
● Version auto-installation
● Device simulation
![Page 25: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/25.jpg)
Tech Stuff - Paso 2 - Desarrollo con Angular e Ionic
● AngularJS / Ionic Framework
http://market.ionic.io/starters/multiplatform
![Page 26: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/26.jpg)
Tech Stuff - Paso 3 - Prueba de punta a punta
1. Desktop
2. Android 4, 5 y 6
3. Apple iOS 8 and 9
4. Cells
5. Tablets
6. Watches
![Page 27: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/27.jpg)
Tech Stuff - Hablando a Joomla!
● Full Html page load
● AJAX Communication
● Joomla Ajax Interface (docs.joomla)
● Others: WebServices, WebSockets, etc.
API
Note: Browser security - Cross-site scripting / Same-origin policy & JSONP
![Page 28: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/28.jpg)
Tech Stuff - Hablando a Joomla! - Composer App
● Joomla Backend access
● 2-legged OAuth authentication
Access token
![Page 29: Aníbal Sánchez @anibal sanchez - ... · ¿Qué suma la movilidad? Enfoque "Primero el móvil" Una aplicación móvil por sitio Joomla! ¿Este proyecto necesita tener App? ¿Podemos](https://reader030.vdocumento.com/reader030/viewer/2022041103/5f033ee47e708231d4084226/html5/thumbnails/29.jpg)
Tech Stuff - Hablando a Joomla! - Composer App
● Post Management