touch, gestures y acelerometro con javascript para aplicaciones web en ipad
TRANSCRIPT
![Page 1: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/1.jpg)
Touch, Gestures y Acelerómetro con
JavaScript para aplicaciones web en iPad.
@pacocuevas
![Page 2: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/2.jpg)
@@pacocuevas
Touch, Gestures, y Acelerometro conJavaScript paraaplicaciones web en iPad
´
![Page 3: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/3.jpg)
Que aprenderan en 50 mins ?´ ´
que necesito saber y que herramientas tenerpara 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
cuál es la justificación para apostar en las web app´s
![Page 4: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/4.jpg)
No pierdas devista el trafico web´generado por smarthphones
![Page 5: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/5.jpg)
exponencialmente !esta creciendoel número debúsquedas locales
a un ritmo de 50% anual
Desktop50%Mobile
50%
la mitad de las conexionesa internet son realizadas desde móviles
![Page 6: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/6.jpg)
fuente (Sept 2011): StatCounter.comWeb App´s
![Page 7: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/7.jpg)
Mobile Page Viewsvs Desktop Page Views
Principales taréas que serealizan en un smarthphone
![Page 8: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/8.jpg)
No te quedes enbusqueda del´...codifica una vez y crea apps para todos los dispositivos ??
santo grial
![Page 9: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/9.jpg)
CORONA
PhoneGap
Titanium
Sencha
![Page 10: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/10.jpg)
al día de hoy la mejor plataforma para codificar aplicaciones móviles es...
la que conocemos.-el práctico
“
”
![Page 11: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/11.jpg)
Analicemos a detallealgunos aspectos relevantesde las Web Apps
![Page 12: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/12.jpg)
INMERSIÓN INMEDIATAno se trata de engañar al usuario haciendolo creer
que es una aplicación nativa
![Page 13: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/13.jpg)
CONSIDERAR DOS VISTASportrait y landscape
![Page 14: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/14.jpg)
EXISTE UN WEB APP STOREel modelo de negocio no queda en manos de Apple $
![Page 15: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/15.jpg)
GO BACK & GO FORWARD“basadas en historial de navegación”
![Page 16: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/16.jpg)
WEB APPS O APPS HIBRIDASen realidad se necesita un marketplace ?
![Page 17: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/17.jpg)
LOS GRANDES CONFIANYouTube, Google, Nike, Twitter, Amazon, Netflix, etc.
![Page 18: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/18.jpg)
Touch y Gestures con JavaScriptpara iPad
![Page 19: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/19.jpg)
pero si ya tengo
instaladoJavaScript ?
![Page 20: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/20.jpg)
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)
![Page 21: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/21.jpg)
Demo: Touch, Gestures y Acelerómetro con Java Script
![Page 22: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/22.jpg)
JavaScript Touch Event Model
El dedo se mueve en la pantallatouchmove
El dedo es retirado de la pantallatouchend
El contacto ha sido interrumpidotouchcancel
El dedo hace contacto en la pantallatouchstart
![Page 23: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/23.jpg)
TouchEvent Object
element.addEventListener(‘touchstart’, handleTouchStart, false);
tres dedos en contacto
function handleTouchStart(touchEvent) { ...
TouchEvent
TouchList touchesTouchList changedTouchesTouchList targetTouches
Touch (contacto)
![Page 24: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/24.jpg)
Touch Objectuno para cada dedo
Touch
unsigned long identi!er
EventTarget target
Long screenXLong screenY
Long pageXLong pageY
![Page 25: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/25.jpg)
Touch Objectubicando el objeto
Touch
unsigned long identi!er
EventTarget target
Long screenXLong screenY
Long pageXLong pageY
screenXscreenY
![Page 26: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/26.jpg)
pageXpageY
![Page 27: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/27.jpg)
Usos del Touch Object- crear gestures a la medida- rastrear múltiples dedos- utilizar GestureEvent (pinch / zoom / rotate)
float scalefloat rotation
- deshabilitar comportamientospor defaultevent.preventDefault();- cancelar eventos (handler)touchcancel
![Page 28: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/28.jpg)
GPS y Acelerometro con JavaScriptpara iPad
´
![Page 29: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/29.jpg)
![Page 30: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/30.jpg)
![Page 31: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/31.jpg)
![Page 32: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/32.jpg)
![Page 33: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/33.jpg)
![Page 34: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/34.jpg)
![Page 35: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/35.jpg)
![Page 36: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/36.jpg)
![Page 37: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/37.jpg)
![Page 38: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/38.jpg)
Usos del Shake!
![Page 39: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/39.jpg)
![Page 40: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/40.jpg)
![Page 41: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/41.jpg)
Recapitulando
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)
desarrolla Web Apps tomando ventaja de una UXcon eventos touch y gestures
![Page 42: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/42.jpg)
@@pacocuevas
Gracias!te esperamos en nuestrostand para sortear tarjetas del App Store.
![Page 43: Touch, Gestures y Acelerometro con JavaScript para aplicaciones web en iPad](https://reader033.vdocuments.site/reader033/viewer/2022060200/559960b61a28ab4e538b4732/html5/thumbnails/43.jpg)
@@AppStudiosMX