Touch,  Gestures  y  Acelerómetro  con  

JavaScript  para  aplicaciones  web  en  iPad.

@pacocuevas

@@pacocuevas

Touch, Gestures, y Acelerometro conJavaScript paraaplicaciones web en iPad

´

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

No pierdas devista el trafico web´generado por smarthphones

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

fuente (Sept 2011): StatCounter.comWeb App´s

Mobile Page Viewsvs Desktop Page Views

Principales taréas que serealizan en un smarthphone

No te quedes enbusqueda del´...codifica una vez y crea apps para todos los dispositivos ??

santo grial

CORONA

PhoneGap

Titanium

Sencha

al día de hoy la mejor plataforma para codificar aplicaciones móviles es...

la que conocemos.-el práctico

“

”

Analicemos a detallealgunos aspectos relevantesde las Web Apps

INMERSIÓN INMEDIATAno se trata de engañar al usuario haciendolo creer

que es una aplicación nativa

CONSIDERAR DOS VISTASportrait y landscape

EXISTE UN WEB APP STOREel modelo de negocio no queda en manos de Apple $

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

WEB APPS O APPS HIBRIDASen realidad se necesita un marketplace ?

LOS GRANDES CONFIANYouTube, Google, Nike, Twitter, Amazon, Netflix, etc.

Touch y Gestures con JavaScriptpara iPad

pero si ya tengo

instaladoJavaScript ?

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)

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

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

TouchEvent Object

element.addEventListener(‘touchstart’, handleTouchStart, false);

tres dedos en contacto

function handleTouchStart(touchEvent) { ...

TouchEvent

TouchList touchesTouchList changedTouchesTouchList targetTouches

Touch (contacto)

Touch Objectuno para cada dedo

Touch

unsigned long identi!er

EventTarget target

Long screenXLong screenY

Long pageXLong pageY

Touch Objectubicando el objeto

Touch

unsigned long identi!er

EventTarget target

Long screenXLong screenY

Long pageXLong pageY

screenXscreenY

pageXpageY

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

GPS y Acelerometro con JavaScriptpara iPad

´

Usos del Shake!

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

@@pacocuevas

Gracias!te esperamos en nuestrostand para sortear tarjetas del App Store.

@@AppStudiosMX