Este documento describe cómo usar JavaScript en aplicaciones web para iPad para incorporar funcionalidades de touch, gestos y acelerómetro. Explica eventos de touch como tap y swipe y cómo rastrear múltiples dedos. También cubre cómo agregar contexto geográfico usando GPS y detección de movimiento con el acelerómetro para mejorar la interactividad. Alienta a desarrollar aplicaciones web que aprovechen estas capacidades para ofrecer una experiencia de usuario nativa.

1. Touch,
Gestures
y
Acelerómetro
con
JavaScript
para
aplicaciones
web
en
iPad.
@pacocuevas

2. Touch, Gestures,
´
y Acelerometro con
JavaScript para
aplicaciones web en iPad
@@pacocuevas

3. ´ ´
Que aprenderan en 50 mins ?
cuál es la justificación para apostar en las web app´s
que necesito saber y que herramientas tener
para desarrollar mi primer gran web app
conocer los detalles de web app´s en iPhone y iPad
Multi-touch, Gestures, GPS, Acelerómetro todo con
HTML5, CSS3 y JavaScript

4. No pierdas de
generado
´
vistapor smarthphones web
el trafico

5. el número de
búsquedas locales
esta creciendo
exponencialmente !
a un ritmo de 50% anual
Desktop
Mobile 50%
50%
la mitad de las conexiones
a internet son realizadas
desde móviles

6. Web App´s
fuente (Sept 2011): StatCounter.com

7. Mobile Page Views
vs Desktop Page Views
Principales taréas que se
realizan en un smarthphone

8. No te quedes en
´
busqueda del
santo grial
...codifica una vez y crea apps para
todos los dispositivos ??

9. CORONA
PhoneGap
Titanium
Sencha

10. “ al día de hoy la mejor plataforma
para codificar aplicaciones móviles es...
la que conocemos. ”
-el práctico

11. Analicemos a detalle
algunos aspectos relevantes
de las Web Apps

12. INMERSIÓN INMEDIATA
no se trata de engañar al usuario haciendolo creer
que es una aplicación nativa

13. CONSIDERAR DOS VISTAS
portrait y landscape

14. EXISTE UN WEB APP STORE
el modelo de negocio no queda en manos de Apple $

15. GO BACK & GO FORWARD
“basadas en historial de navegación”

16. WEB APPS O APPS HIBRIDAS
en realidad se necesita un marketplace ?

17. LOS GRANDES CONFIAN
YouTube, Google, Nike, Twitter, Amazon, Netflix, etc.

18. Touch y Gestures
con JavaScript
para iPad

19. pero si ya
tengo
instalado
JavaScript ?

20. Touch y Gestures
-Tap, Touch, Swipe, Pan, Pinch, Flick, Spread
aquí en México
-picale
-pellizcale pa´adentro
-avientale
-tócale y arrastralo
(...nos son albures)

21. Demo:
Touch, Gestures y Acelerómetro
con Java Script

22. JavaScript Touch Event Model
touchstart El dedo hace contacto en la pantalla
touchmove El dedo se mueve en la pantalla
touchend El dedo es retirado de la pantalla
touchcancel El contacto ha sido interrumpido

23. TouchEvent Object
tres dedos en contacto
element.addEventListener(‘touchstart’, handleTouchStart, false);
function handleTouchStart(touchEvent) { ...
TouchEvent
Touch (contacto)
TouchList touches
TouchList changedTouches
TouchList targetTouches

24. Touch Object
uno para cada dedo
Touch
unsigned long identi er
EventTarget target
Long screenX
Long screenY
Long pageX
Long pageY

25. Touch Object
ubicando el objeto
Touch
unsigned long identi er
EventTarget target
screenX
Long screenX screenY
Long screenY
Long pageX
Long pageY

26. pageX
pageY

27. Usos del Touch Object
- crear gestures a la medida
- rastrear múltiples dedos
- utilizar GestureEvent (pinch / zoom / rotate)
float scale
float rotation
- deshabilitar comportamientos
por default
event.preventDefault();
- cancelar eventos (handler)
touchcancel

28. ´
GPS y Acelerometro
con JavaScript
para iPad

38. Usos del Shake!

41. Recapitulando
desarrolla Web Apps tomando ventaja de una UX
con eventos touch y gestures
agrega contexto geográfico a las funcionalidades
incorpora detección de movimiento para más
interactividad
continua confiando en los estándares (HTML5, CSS3,
JavaScript)

42. Gracias!
te esperamos en nuestro
stand para sortear tarjetas
del App Store.
@@pacocuevas

43. @@AppStudiosMX