Este documento presenta una introducción a la web móvil. Explica que el tráfico de Internet móvil superará pronto al tráfico de escritorio y destaca la importancia creciente de los smartphones. Discute las diferentes categorías de dispositivos móviles y los métodos de interacción y renderizado en la web móvil. También señala que las versiones móviles especializadas de sitios web tienden a desaparecer a favor de diseños adaptables debido a las mejoras en navegadores y pantallas móviles.

1. http://www.w3.org/2008/Talks/www2008-mwi/#%2812%29 http://www.w3.org/2007/Talks/2007-10-MoMo/#%2811%29
Mobile web
Máster en Informática Móvil y Tarjetas Inteligentes (MIMO) - http://web.upsa.es/mimo

2. Presentaciones
José Manuel (JM) Navarro
@jmnavarro
jmnavarro@gmail.com
Unkasoft
Director Técnico
Iniciador Salamanca
Organizador

3. Objetivos
! Entender la
problemática del
desarrollo web para
móvil, sus variantes
y cómo se afronta
http://www.library.jhu.edu/bin/p/i/svMath_problem.jpg

4. Objetivos
! Entender la
arquitectura de los
sistemas web y
sistemas online en
general.
http://img.archiexpo.es/images_ae/photo-g/software-de-cad-2d-para-arquitectura-91443.jpg

5. Objetivos
! Practicar conceptos
básicos, para que
podáis profundizar
y continuar solos
http://fotos-bebes.net/2008/12/autoestimulacion-bebes.html

6. Objetivos
! Desarrollar un
ejemplo
completo, que os
de una visión real
(y que os quite el
miedo)

7. Por vuestra parte
! Conceptos y cierta práctica en web:
! XML, HTML, CSS, Javascript, etc.
! Programación + OO: Java (o mejor Grails)
! Un poco de bases de datos relacionales:
MySQL
! Curiosidad y vocación

8. Qué vais a aprender
! Día 1: un poco de historia, WML, XHTML y CSS
! Día 2: Javascript + AJAX
! Día 3: Arquitectura servidor. Desarrollo servidor
REAL
! Día 4: Detección de dispositivos y capacidades
(discovery)
! Práctica y evaluación: proyecto real

9. 3, 2, 1... despegamos!

10. ¿Qué nos espera?
En 2013, el tráfico de
Internet móvil será mayor
que el de Internet “fijo”
Gartner

11. ¿Qué nos espera?
La “web móvil” es una
parte muy pequeña del
Internet móvil

12. Sistemas online
Servidor
Web móvil Apps Otros sistemas

13. ¿Qué es un móvil?
Un cacharro
portátil
http://laughingsquid.com/the-portable-cell-phone-booth/

14. ¿Qué es un móvil?
Que siempre
te acompaña
http://alquicira.com

15. ¿Qué es un móvil?
Que es fácil y
rápido de
usar
http://commons.wikimedia.org/wiki/File:Easy_button.JPG

16. ¿Qué es un móvil?
y que me
permite
comunicar
con el mundo
http://www.flickr.com/photos/pshanks/411196422/

17. Categorías
! Teléfonos
! Low-end devices
! Medium-end devices
! High-end devices
! Smartphones
! Non-phones
! Tablets

18. Teléfonos

20. Low-end devices

23. Smartphones
Y por supuesto...

25. Pantallas
http://mobiforge.com/node/197

26. La importancia
de los
Smartphones

27. La importancia de los
smartphones
! Su usuario medio genera 10
veces el tráfico de un usuario
no-smart
! Y un usuario de iPhone general
30 veces más tráfico!

28. La importancia de los
smartphones
! 35% de los usuarios de
smartphone usan Internet a
diario.
! Sólo el 4% de los no-smart lo
usan todos los días

29. La importancia de los
smartphones
! 70% de los usuarios de
smartphone usan el e-mail
! Sólo el 12% de los no-smart
lo usan

30. Mobile Browsers

31. Interacción
! Focus based

32. Interacción
! Pointer based

33. Interacción
! Touch based

34. Interacción
! Multitouch & gestures based
http://embody3d.com/2010/01/14/intellectual-property-and-industrial-design-part-1/

35. Renderización
! Scroll
! Smart zoom
! Reflow
! Proxies
device <— protocolo optimizado —> proxy <— HTTP —> web

36. Y la realidad es que...
Cada vez se usa más el móvil
para navegar
http://mobileanalyticssimplified.com/post/790212999/11-of-web-traffic-worldwide-is-now-mobile

37. Y la realidad es que...
Cada vez se usa más el móvil
para navegar
http://mobileanalyticssimplified.com/post/790212999/11-of-web-traffic-worldwide-is-now-mobile

38. Y la realidad es que...
pero...

39. Y la realidad es que...
Cada vez se usan menos las
versiones "mobile"
de las webs

40. Y la realidad es que...
Así que las versiones "mobile"
tienden a desaparecer!

41. Y la realidad es que...

42. Y la realidad es que...
¿y eso?

43. Razones
! Se tiende a la simplicidad en
la versión estándar
! Maquetación adaptable
("fluid") que no requiere de
versiones especiales

44. Razones
! Navegadores móviles
renderizan igual o mejor que
los de escritorio (HTML 5)
! Interfaz multitouch hace
usables las webs normales

45. Razones
! Los usuarios no quieren dos
webs: quieren una que se vea
bien everywhere
! La apps mejoran la UX para
cada plataforma

46. MIMO: Mobile Web
Esta presentación forma parte del material de formación de la
asignatura “Mobile web” en el “Máster en Informática Móvil y Tarjetas
Inteligentes” de la Universidad Pontificia de Salamanca.
Todos los derechos reservados. Prohibida su reproducción total o
parcial.
Para más información, póngase en contacto con el profesor de la
asignatura (José Manuel Navarro) en la dirección de correo
jmnavarro@gmail.com o en una de las siguientes direcciones:
•http://www.web.upsa.es/mimo/
•mimo@upsa.es