29
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

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

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tech Stuff - Hablando a Joomla! - Composer App

● Post Management