Touch, gestures y acelerómetro con JavaScript en ipad

2,379 views

Published on

Esta plática fué impartida por Paco Cuevas durante el evento Software Guru Conference and Expo 2011, donde se explica la forma de tomar ventaja de los sensores en un iPad a través de JavaScript para Web Apps.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,379
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Touch, gestures y acelerómetro con JavaScript en ipad

  1. 1. Touch, Gestures, ´y Acelerometro conJavaScript paraaplicaciones web en iPad@@pacocuevas
  2. 2. ´ ´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
  3. 3. No pierdas degenerado ´vistapor smarthphones web el trafico
  4. 4. el número debúsquedas localesesta creciendoexponencialmente ! a un ritmo de 50% anual Desktop Mobile 50% 50% la mitad de las conexiones a internet son realizadas desde móviles
  5. 5. Web App´sfuente (Sept 2011): StatCounter.com
  6. 6. Mobile Page Views vs Desktop Page ViewsPrincipales taréas que serealizan en un smarthphone
  7. 7. No te quedes en ´busqueda delsanto grial...codifica una vez y crea apps paratodos los dispositivos ??
  8. 8. CORONAPhoneGapTitaniumSencha
  9. 9. “ al día de hoy la mejor plataformapara codificar aplicaciones móviles es... la que conocemos. ” -el práctico
  10. 10. Analicemos a detallealgunos aspectos relevantesde las Web Apps
  11. 11. INMERSIÓN INMEDIATAno se trata de engañar al usuario haciendolo creer que es una aplicación nativa
  12. 12. CONSIDERAR DOS VISTAS portrait y landscape
  13. 13. EXISTE UN WEB APP STOREel modelo de negocio no queda en manos de Apple $
  14. 14. GO BACK & GO FORWARD “basadas en historial de navegación”
  15. 15. WEB APPS O APPS HIBRIDAS en realidad se necesita un marketplace ?
  16. 16. LOS GRANDES CONFIANYouTube, Google, Nike, Twitter, Amazon, Netflix, etc.
  17. 17. Touch y Gesturescon JavaScriptpara iPad
  18. 18. pero si ya tengo instaladoJavaScript ?
  19. 19. Touch y Gestures-Tap, Touch, Swipe, Pan, Pinch, Flick, Spreadaquí en México-picale-pellizcale pa´adentro-avientale-tócale y arrastralo(...nos son albures)
  20. 20. Demo:Touch, Gestures y Acelerómetrocon Java Script
  21. 21. 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
  22. 22. TouchEvent Objecttres dedos en contactoelement.addEventListener(‘touchstart’, handleTouchStart, false);function handleTouchStart(touchEvent) { ...TouchEvent Touch (contacto) TouchList touches TouchList changedTouches TouchList targetTouches
  23. 23. Touch Objectuno para cada dedoTouch unsigned long identi er EventTarget target Long screenX Long screenY Long pageX Long pageY
  24. 24. Touch Objectubicando el objetoTouch unsigned long identi er EventTarget target screenX Long screenX screenY Long screenY Long pageX Long pageY
  25. 25. pageXpageY
  26. 26. Usos del Touch Object- crear gestures a la medida- rastrear múltiples dedos- utilizar GestureEvent (pinch / zoom / rotate) float scale float rotation- deshabilitar comportamientospor defaultevent.preventDefault();- cancelar eventos (handler) touchcancel
  27. 27. ´GPS y Acelerometrocon JavaScriptpara iPad
  28. 28. Usos del Shake!
  29. 29. 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)
  30. 30. Gracias!te esperamos en nuestrostand para sortear tarjetasdel App Store.@@pacocuevas
  31. 31. @@AppStudiosMX

×