SlideShare una empresa de Scribd logo
Una aplicación móvil por sitio Joomla!
Aníbal Sánchez
@anibal_sanchez - http://blog.anibalhsanchez.com
JoomGap - 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
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
Acerca de ...
● AutoTweetNG y Joocial
● XTDir for SobiPro
● XT Adaptive Images
● Starters
● Apps móviles
para Joomla!
Una aplicación móvil por sitio Joomla!
El Cambio de
Paradigma
Una aplicación móvil por sitio Joomla!
¿Cómo cambiar
nuestros proyectos?
Una aplicación móvil por sitio Joomla!
Enfoque
"Primero el móvil"
No va a suceder
Quiero que mi sitio
se vea en los móviles
y en una App.
Enfoque "Primero el móvil"
… … ….
Enfoque "Primero el móvil"
¿Qué suma la movilidad?
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?
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?
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
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).
Extly - Caso Joocial Composer App
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.
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
Presentando JoomGap - JG Boilerplate Material
How to create a JoomGap mobile app based on
JG Boilerplate Material Design
http://www.joomgap.com/docs/how-tos/boilerplate-material
Primicia JoomGap - XT Backup for Akeeba
XT Backup
for Akeeba
Resumen
Ya hay herramientas disponibles,
para desarrollar Apps Web,
para Android, Apple iOS y Win Phone
basadas en Html5 / CSS / JavaScript.
Próximos pasos
Una
aplicación
móvil por
sitio Joomla!
Preguntas y feedback
Aníbal Sánchez
@anibal_sanchez
http://blog.anibalhsanchez.com
JoomGap
http://www.joomgap.com
Extly Extensions
http://www.extly.com
Tech Stuff - Paso 1 - Apps Web Híbridas
● Cordova - PhoneGap
○ Local Web Application
○ Html5 / CSS / JavaScript
○ Plugins
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 *
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
Tech Stuff - Paso 2 - Desarrollo con Angular e Ionic
● AngularJS / Ionic Framework
http://market.ionic.io/starters/multiplatform
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
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
Tech Stuff - Hablando a Joomla! - Composer App
● Joomla Backend access
● 2-legged OAuth authentication
Access
token
Tech Stuff - Hablando a Joomla! - Composer App
● Post Management

Más contenido relacionado

PDF
Angular, ionic y Django amigos con derecho a roce - Pycon 2017
ODP
Slideshare presentacion
PDF
Optimización en motores de búsqueda
PDF
Uso de tecnologías modernas en joomla
PPT
Feria De Proyectos (Diseño Multimedia) Complementacion Pedagógica (URP) Lima ...
PDF
PhoneGap !Qué bueno que viniste¡
PPTX
(PA2) Clase 5 - como grabarte para tu intro
PDF
Joomla!madrid - Presentación y Charla Técnica
Angular, ionic y Django amigos con derecho a roce - Pycon 2017
Slideshare presentacion
Optimización en motores de búsqueda
Uso de tecnologías modernas en joomla
Feria De Proyectos (Diseño Multimedia) Complementacion Pedagógica (URP) Lima ...
PhoneGap !Qué bueno que viniste¡
(PA2) Clase 5 - como grabarte para tu intro
Joomla!madrid - Presentación y Charla Técnica

Similar a JoomlaMadrid - Una aplicación móvil por sitio Joomla! (20)

PDF
Desarrollo de aplicaciones web móviles
PDF
Introducción al desarrollo de aplicaciones para dispositivos móviles
PDF
Aplicaciones moviles en mozilla
PDF
Curso: Diseño de apps y webs móviles - Parte 2
PDF
Desarrollo de aplicaciones web móviles
PPTX
Phonegap
PPTX
PPT
Biblioapps, o cómo crear aplicaciones móviles para bibliotecas
PPTX
Aplicaciones moviles
PPTX
Desarrollo de aplicaciones moviles
DOC
GUIA DE LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
PPT
Web móvil. Desarrollo de Apps y Aplicación en Bibliotecas
PPTX
Aplicaciones Moviles
PDF
Clase mobile marketing
PDF
Desarrollo móvil con Titanium, PhoneGap y otros
PPTX
Historia de las aplicaciones moviles jojo
PPTX
PLATCOM Apps : Desarrollo de aplicaciones móviles en Colombia
PPTX
Christopher torres
ZIP
Desarrollo Móvil y Tecnologías web - Jasson Cascante
Desarrollo de aplicaciones web móviles
Introducción al desarrollo de aplicaciones para dispositivos móviles
Aplicaciones moviles en mozilla
Curso: Diseño de apps y webs móviles - Parte 2
Desarrollo de aplicaciones web móviles
Phonegap
Biblioapps, o cómo crear aplicaciones móviles para bibliotecas
Aplicaciones moviles
Desarrollo de aplicaciones moviles
GUIA DE LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
Web móvil. Desarrollo de Apps y Aplicación en Bibliotecas
Aplicaciones Moviles
Clase mobile marketing
Desarrollo móvil con Titanium, PhoneGap y otros
Historia de las aplicaciones moviles jojo
PLATCOM Apps : Desarrollo de aplicaciones móviles en Colombia
Christopher torres
Desarrollo Móvil y Tecnologías web - Jasson Cascante
Publicidad

Más de Extly Extensions - JoomGap (16)

PDF
JWC 2015 - Mobile apps development for Joomla!
PDF
JDay Sevilla 2015 - Mobile app development for Joomla
PDF
JomSocial Comienzo Rápido / Formación Joomla
PDF
How to AutoTweet from Joomla in 5 minutes
PDF
Oquma - Gestión de Calidad y Medio Ambiente en 5 minutos
PDF
How to manage your own quality docs
PDF
Como gestionar sus documentos propios de calidad
PDF
Oquma.com para Google Docs como Sistema de Gestión
PDF
Quality Management Records and Dashboards
PDF
Registros y Tableros para Gestión de Calidad
PDF
Casos De Estudio En Gestión De Calidad
PDF
Como tener su agenda de calidad al día - parte 2
PDF
Como tener su Agenda de Calidad al día
PDF
5 Pasos para su Manual de Calidad
PDF
5 Steps to your Quality Manual
PDF
Introducción a OQUMA gestión de calidad en línea
JWC 2015 - Mobile apps development for Joomla!
JDay Sevilla 2015 - Mobile app development for Joomla
JomSocial Comienzo Rápido / Formación Joomla
How to AutoTweet from Joomla in 5 minutes
Oquma - Gestión de Calidad y Medio Ambiente en 5 minutos
How to manage your own quality docs
Como gestionar sus documentos propios de calidad
Oquma.com para Google Docs como Sistema de Gestión
Quality Management Records and Dashboards
Registros y Tableros para Gestión de Calidad
Casos De Estudio En Gestión De Calidad
Como tener su agenda de calidad al día - parte 2
Como tener su Agenda de Calidad al día
5 Pasos para su Manual de Calidad
5 Steps to your Quality Manual
Introducción a OQUMA gestión de calidad en línea
Publicidad

Último (10)

PPTX
ORIGEN DE LA IA - GRADO 1102 INTELIGENCIA
PPTX
presentación de introducción a las metodologías agiles .pptx
PDF
DNS_SERVIDORES PARA ASER PRACTICAS EN REDES
PPTX
hojas_de_calculo_aplicado para microsoft office
PDF
Clase 3 - Presentación visual (Insertando objetos visuales) POWER POINT.pdf
PPTX
Implementación equipo monitor12.08.25.pptx
PDF
Presentacion de compiladores e interpretes
PPTX
Control de seguridad en los sitios web.pptx
PPTX
PROPIEDADES Y METODOS DE PrOO CON PYTHON
PPTX
ANALOGÍA 6.pptx9191911818181119111162363733839292
ORIGEN DE LA IA - GRADO 1102 INTELIGENCIA
presentación de introducción a las metodologías agiles .pptx
DNS_SERVIDORES PARA ASER PRACTICAS EN REDES
hojas_de_calculo_aplicado para microsoft office
Clase 3 - Presentación visual (Insertando objetos visuales) POWER POINT.pdf
Implementación equipo monitor12.08.25.pptx
Presentacion de compiladores e interpretes
Control de seguridad en los sitios web.pptx
PROPIEDADES Y METODOS DE PrOO CON PYTHON
ANALOGÍA 6.pptx9191911818181119111162363733839292

JoomlaMadrid - Una aplicación móvil por sitio Joomla!

  • 1. Una aplicación móvil por sitio Joomla! Aníbal Sánchez @anibal_sanchez - http://blog.anibalhsanchez.com JoomGap - 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
  • 2. 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
  • 3. Acerca de ... ● AutoTweetNG y Joocial ● XTDir for SobiPro ● XT Adaptive Images ● Starters ● Apps móviles para Joomla!
  • 4. Una aplicación móvil por sitio Joomla! El Cambio de Paradigma
  • 5. Una aplicación móvil por sitio Joomla! ¿Cómo cambiar nuestros proyectos?
  • 6. Una aplicación móvil por sitio Joomla! Enfoque "Primero el móvil"
  • 7. No va a suceder Quiero que mi sitio se vea en los móviles y en una App.
  • 8. Enfoque "Primero el móvil" … … ….
  • 9. Enfoque "Primero el móvil" ¿Qué suma la movilidad?
  • 10. 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?
  • 11. 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?
  • 12. 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
  • 13. 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).
  • 14. Extly - Caso Joocial Composer App
  • 15. 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.
  • 16. 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
  • 17. Presentando JoomGap - JG Boilerplate Material How to create a JoomGap mobile app based on JG Boilerplate Material Design http://www.joomgap.com/docs/how-tos/boilerplate-material
  • 18. Primicia JoomGap - XT Backup for Akeeba XT Backup for Akeeba
  • 19. Resumen Ya hay herramientas disponibles, para desarrollar Apps Web, para Android, Apple iOS y Win Phone basadas en Html5 / CSS / JavaScript.
  • 21. Preguntas y feedback Aníbal Sánchez @anibal_sanchez http://blog.anibalhsanchez.com JoomGap http://www.joomgap.com Extly Extensions http://www.extly.com
  • 22. Tech Stuff - Paso 1 - Apps Web Híbridas ● Cordova - PhoneGap ○ Local Web Application ○ Html5 / CSS / JavaScript ○ Plugins
  • 23. 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 *
  • 24. 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
  • 25. Tech Stuff - Paso 2 - Desarrollo con Angular e Ionic ● AngularJS / Ionic Framework http://market.ionic.io/starters/multiplatform
  • 26. 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
  • 27. 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
  • 28. Tech Stuff - Hablando a Joomla! - Composer App ● Joomla Backend access ● 2-legged OAuth authentication Access token
  • 29. Tech Stuff - Hablando a Joomla! - Composer App ● Post Management