El documento describe las webapps, aplicaciones que se ejecutan en un navegador. Explica que las webapps móviles tienen ventajas como la compatibilidad entre dispositivos pero carecen de acceso a algunas capacidades del dispositivo. También cubre alternativas como aplicaciones híbridas y marcos que pueden generar aplicaciones nativas. Finalmente, concluye que las webapps permiten llegar a más dispositivos con menor costo de desarrollo.

1. WebApps
Jorge Santiago Cruz Lambert
Project Engineer
Internet & Mobility Division
© DEIMOS Space S.L.U. 1

2. Web Apps 2

3. • ¿Qué es una WebApp?
– Ejemplos
• Mobile WebApps
– Ventajas
– Inconvenientes
– Alternativa
• Desarrollando WebApps
– Mobile WebApps y Plataformas móviles
– Frameworks y plugins
• Conclusión
• Preguntas
© DEIMOS Space S.L.U.

4. ¿Qué es una Web App?
© DEIMOS Space S.L.U. 4

5. ¿Qué es una WebApp?
• Aplicación que se ejecuta y a la que se accede a través del
navegador
• Software as a Service (SaaS).
• Rich Internet Applications (RIA)
• WebApp “widget” que definen en W3C como Webapp
empaquetada/descargable/instalable.
• Basadas en tecnologías web principalmente HTML, Javascript, CSS,
pero también en otras tecnologías Flash, Java Applets, Silverlight …
© DEIMOS Space S.L.U. 5

6. Ejemplos
La mayoría de veces que se usa el navegador se está usando una
webapp
• Basecamp
• Google Products
• Office live
• Horde WebMail
• Gliffy
• Atlassian JIRA
• Alfresco
• Spotify
© DEIMOS Space S.L.U. 6

7. Mobile WebApp
© DEIMOS Space S.L.U. 7

8. Mobile WebApp
• Definiciones previas:
• Aplicación Nativa: Se diseña específicamente para ejecutarse en un
sistema operativo de dispositivo.
• Móviles con acceso a capacidad web -> WebApp
• Aplicación web con características propias para que sea accesible y
usable desde cualquier dispositivo.
© DEIMOS Space S.L.U. 8

9. Mobile WebApp:
Ventajas
© DEIMOS Space S.L.U. 9

10. Mobile WebApps: Ventajas
Minimizan el impacto de la fragmentación de dispositivos
© DEIMOS Space S.L.U. 10

11. Mobile WebApps: Ventajas
Sin control de tiendas de terceros
http://appadvice.com/appnn/2011/05/playboy-arrives-ipad-tomorrow-sorta
© DEIMOS Space S.L.U. 11

12. Mobile WebApps: Ventajas
Desarrollo con tecnología web
A
PI
s
© DEIMOS Space S.L.U. 12

13. Mobile WebApp:
Inconvenientes
© DEIMOS Space S.L.U. 13

14. Mobile WebApps: Inconvenientes
Aún con falta de APIs para sensores
GPS
Acelerómetro
Cámara/Micrófono
Capacidades PIM
NFC y otros
2010 2011 2012 2013
http://www.w3.org/2009/dap/
© DEIMOS Space S.L.U. 14

15. Mobile WebApps: Inconvenientes
Promoción y visibilidad de aplicación complejas en entorno móvil
© DEIMOS Space S.L.U. 15

16. Mobile WebApps: Inconvenientes
Seguridad
© DEIMOS Space S.L.U. 16

17. Mobile WebApp:
Transformar tu web en
aplicación
© DEIMOS Space S.L.U. 17

18. Mobile WebApps: Transformar en WebApp
Metadata al poder, el más completo y documentado Apple, algunas
características funcionan en Android:
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, user-
scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Recurso web
© DEIMOS Space S.L.U. 18

19. Mobile WebApp:
Alternativa
© DEIMOS Space S.L.U. 19

20. Mobile WebApps: Alternativa
© DEIMOS Space S.L.U. 20

21. Mobile WebApps: Alternativas
Mix
Everything
App Nativa + WebApp
• Conocida como aplicación híbrida.
• Soluciona parte de los inconvenientes de las webapps, como el
acceso a capacidades móviles o la promoción o visibilidad de la
aplicación.
© DEIMOS Space S.L.U. 21

22. Mobile WebApps y Plataformas móviles
© DEIMOS Space S.L.U. 22

23. Mobile WebApps y Plataformas móviles
6
© DEIMOS Space S.L.U. 23

24. Mobile WebApps y Plataformas móviles
Web Storage
Web Worker
Web Database
Offline Application
Geolocation
postMessage
Web Sockets
Better Forms
Better Semantics
Canvas
© DEIMOS Space S.L.U. 24

25. Mobile WebApps y Plataformas móviles
HSLA /RGBA
Multiple Background
Background-size
Border-radius
Shadow
Opacity
Text-overflow
Gradients
Transforms
Animations
© DEIMOS Space S.L.U. 25

26. Frameworks y plugins
© DEIMOS Space S.L.U. 26

27. Frameworks y plugins
Librerías de desarrollo de Mobile UI
xui
© DEIMOS Space S.L.U. 27

28. Frameworks y plugins
Frameworks javascript de desarrollo móvil
© DEIMOS Space S.L.U.

29. Frameworks y plugins
Frameworks que generan aplicaciones nativas
© DEIMOS Space S.L.U.

30. Frameworks y plugins
Requiere Mac/Xcode
Lenguaje Javascript
Layout HTML5/CSS3
Componentes HTML5 + Frameworks (Sencha, ...)
IDE Xcode Eclipse
Rendimiento Regular, Lento
Comunidad, Doc, Fiablidad Poca documentación
Precio Gratis
Motor físico Sop Juegos No
Se distribuye con el SC Sí
© DEIMOS Space S.L.U.

31. Frameworks y plugins
Requiere Mac/Xcode
Lenguaje Javascript
Layout -
Componentes Nativos
IDE Titanium Studio (basado en Eclipse)
Rendimiento Bueno, Rápido
Comunidad, Doc, Fiablidad Poca comunidad, documentación por videotutoriales
Precio Gratis
Motor físico Sop Juegos No
Se distribuye con el SC No
© DEIMOS Space S.L.U.

32. Frameworks y plugins
Requiere Mac/Xcode
Lenguaje Lua
Layout -
Componentes Nativos
IDE -
Rendimiento Muy bueno
Comunidad, Doc, Fiablidad Buena
Precio $199-$349 año
Motor físico Sop Juegos Sí
Se distribuye con el SC No
© DEIMOS Space S.L.U.

33. Frameworks y plugins
© DEIMOS Space S.L.U.

34. Conclusión
© DEIMOS Space S.L.U. 34

35. Conclusión
Las webapps pueden ser una buena solución para poder llegar a la mayoría de
dispositivos minimizando el coste de desarrollo.
Las librerías javascript ayudan al desarrollo de webapps móviles, pero si quieres algo
más fácil puedes optar por frameworks de desarrollo transformándolas incluso en
aplicaciones nativas en algunos casos.
Puedes optar por el acceso a capacidades completas usando una aplicación híbrida.
© DEIMOS Space S.L.U. 35

36. Entrevista a
Dominique Hazaël-Massieux, W3C Staff
One of the big strengths of Web apps over native apps is that they work
cross-devices and cross platforms; this is a direct benefits for users
since it means they can use the apps they care about independently of
the devices they choose to use.
Another way in which this is important is that it makes it much easier
to develop app that works by combining devices
© DEIMOS Space S.L.U. 36

37. Referencias
Referencias:
Ejemplos en HTML5
http://html5demos.com/
http://slides.html5rocks.com
Compatibilidad entre navegadores
http://caniuse.com/
Documentación
GIA: Native or WebApp? – PDF
W3C Device API
Consejos para el desarrollo de web
Apple:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Refere
nce/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP4000207
9-SW1
BlackBerry:
https://developer.blackberry.com/html5/apis
© DEIMOS Space S.L.U.