SlideShare una empresa de Scribd logo
1 de 42
Touch, Gestures,
        ´
y Acelerometro con
JavaScript para
aplicaciones web en iPad




@@pacocuevas
´         ´
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
No pierdas de
generado
              ´
vistapor smarthphones web
         el trafico
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
Web App´s
fuente (Sept 2011): StatCounter.com
Mobile Page Views
                             vs Desktop Page Views




Principales taréas que se
realizan en un smarthphone
No te quedes en
 ´
busqueda del
santo grial
...codifica una vez y crea apps para
todos los dispositivos ??
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 detalle
algunos aspectos relevantes
de las Web Apps
INMERSIÓN INMEDIATA
no se trata de engañar al usuario haciendolo creer
            que es una aplicación nativa
CONSIDERAR DOS VISTAS
      portrait y landscape
EXISTE UN WEB APP STORE
el modelo de negocio no queda en manos de Apple $
GO BACK & GO FORWARD
   “basadas en historial de navegación”
WEB APPS O APPS HIBRIDAS
   en realidad se necesita un marketplace ?
LOS GRANDES CONFIAN
YouTube, Google, Nike, Twitter, Amazon, Netflix, etc.
Touch y Gestures
con JavaScript
para iPad
pero si ya
     tengo
  instalado
JavaScript ?
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

   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
TouchEvent Object
tres dedos en contacto

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



TouchEvent
                                        Touch (contacto)
 TouchList touches
 TouchList changedTouches
 TouchList targetTouches
Touch Object
uno para cada dedo


Touch

 unsigned long identi er

 EventTarget target

 Long screenX
 Long screenY
 Long pageX
 Long pageY
Touch Object
ubicando el objeto


Touch

 unsigned long identi er

 EventTarget target
                           screenX
 Long screenX              screenY
 Long screenY
 Long pageX
 Long pageY
pageX
pageY
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
´
GPS y Acelerometro
con JavaScript
para iPad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
Usos del Shake!
Touch, gestures y acelerómetro con JavaScript en ipad
Touch, gestures y acelerómetro con JavaScript en ipad
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)
Gracias!
te esperamos en nuestro
stand para sortear tarjetas
del App Store.




@@pacocuevas
@@AppStudiosMX

Más contenido relacionado

Destacado

Yummy magazine N°14
Yummy magazine N°14Yummy magazine N°14
Yummy magazine N°14YummyMagazine
 
Mini présentation de l'évènement technorex
Mini présentation de l'évènement technorexMini présentation de l'évènement technorex
Mini présentation de l'évènement technorexDIASPOREX
 
Logiciel entreprises
Logiciel entreprisesLogiciel entreprises
Logiciel entreprisesYann Lucas
 
Présentation de Itescia - Accueil BAFS 2015
Présentation de Itescia - Accueil BAFS 2015Présentation de Itescia - Accueil BAFS 2015
Présentation de Itescia - Accueil BAFS 2015BAFS
 
TRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADO
TRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADOTRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADO
TRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADOmanusp14
 
Atelier numérique : Améliorez votre site internet - 03/12/2015
Atelier numérique : Améliorez votre site internet - 03/12/2015Atelier numérique : Améliorez votre site internet - 03/12/2015
Atelier numérique : Améliorez votre site internet - 03/12/2015Destination Brocéliande
 
Fonctionnalités du logiciel 1-One
Fonctionnalités du logiciel 1-OneFonctionnalités du logiciel 1-One
Fonctionnalités du logiciel 1-OneYann Lucas
 
BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...
BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...
BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...BAFS
 
Pres intro bafsgva2015v1
Pres intro bafsgva2015v1Pres intro bafsgva2015v1
Pres intro bafsgva2015v1BAFS
 
Diapo Dropbox
Diapo DropboxDiapo Dropbox
Diapo Dropboxceceguyo
 
Règlement du jeu concours Les 20 Jours Fous
Règlement du jeu concours Les 20 Jours FousRèglement du jeu concours Les 20 Jours Fous
Règlement du jeu concours Les 20 Jours FousFabweb1ere
 
Investir quand on est une association une fondation ou une autre institution...
Investir quand on est une association  une fondation ou une autre institution...Investir quand on est une association  une fondation ou une autre institution...
Investir quand on est une association une fondation ou une autre institution...Groupe SFC, cabinet d'expertise comptable
 
Tarea 1 outils de la classe
Tarea 1 outils  de la classeTarea 1 outils  de la classe
Tarea 1 outils de la classefrbejaranoq
 

Destacado (20)

Yummy magazine N°14
Yummy magazine N°14Yummy magazine N°14
Yummy magazine N°14
 
Listes fournitures collège 2015 2016
Listes fournitures collège 2015 2016Listes fournitures collège 2015 2016
Listes fournitures collège 2015 2016
 
Yummy magazine N°7
Yummy magazine N°7Yummy magazine N°7
Yummy magazine N°7
 
Actualités en droit social conférence du 2 juillet 2015
Actualités en droit social conférence du 2 juillet 2015Actualités en droit social conférence du 2 juillet 2015
Actualités en droit social conférence du 2 juillet 2015
 
Chocolate
ChocolateChocolate
Chocolate
 
Mini présentation de l'évènement technorex
Mini présentation de l'évènement technorexMini présentation de l'évènement technorex
Mini présentation de l'évènement technorex
 
Yummy magazine N°6
Yummy magazine N°6Yummy magazine N°6
Yummy magazine N°6
 
Logiciel entreprises
Logiciel entreprisesLogiciel entreprises
Logiciel entreprises
 
Présentation de Itescia - Accueil BAFS 2015
Présentation de Itescia - Accueil BAFS 2015Présentation de Itescia - Accueil BAFS 2015
Présentation de Itescia - Accueil BAFS 2015
 
TRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADO
TRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADOTRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADO
TRAVAIL DE JAIME VELÁZQUEZ ÍSCAR ET LORENZO LÓPEZ PEINADO
 
Atelier numérique : Améliorez votre site internet - 03/12/2015
Atelier numérique : Améliorez votre site internet - 03/12/2015Atelier numérique : Améliorez votre site internet - 03/12/2015
Atelier numérique : Améliorez votre site internet - 03/12/2015
 
Fonctionnalités du logiciel 1-One
Fonctionnalités du logiciel 1-OneFonctionnalités du logiciel 1-One
Fonctionnalités du logiciel 1-One
 
BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...
BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...
BAFS 2015 : Jean Marc De Jonghe - Comment devenir une entreprise branchée, in...
 
Pres intro bafsgva2015v1
Pres intro bafsgva2015v1Pres intro bafsgva2015v1
Pres intro bafsgva2015v1
 
30 jours 2015 comp
30 jours 2015 comp30 jours 2015 comp
30 jours 2015 comp
 
Diapo Dropbox
Diapo DropboxDiapo Dropbox
Diapo Dropbox
 
Règlement du jeu concours Les 20 Jours Fous
Règlement du jeu concours Les 20 Jours FousRèglement du jeu concours Les 20 Jours Fous
Règlement du jeu concours Les 20 Jours Fous
 
Un jour près de Sofia
Un jour près de SofiaUn jour près de Sofia
Un jour près de Sofia
 
Investir quand on est une association une fondation ou une autre institution...
Investir quand on est une association  une fondation ou une autre institution...Investir quand on est une association  une fondation ou une autre institution...
Investir quand on est une association une fondation ou une autre institution...
 
Tarea 1 outils de la classe
Tarea 1 outils  de la classeTarea 1 outils  de la classe
Tarea 1 outils de la classe
 

Similar a Touch, gestures y acelerómetro con JavaScript en ipad

Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesXavi Cardet
 
Implementacion de six sigma
Implementacion de six sigmaImplementacion de six sigma
Implementacion de six sigmairma quishpe
 
EXITO CON EL SIX SIGMA Irma Quishpe
EXITO CON EL SIX SIGMA  Irma QuishpeEXITO CON EL SIX SIGMA  Irma Quishpe
EXITO CON EL SIX SIGMA Irma Quishpeirma quishpe
 
Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...
Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...
Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...COIICV
 
Apps móviles - ONO Meeting Point
Apps móviles - ONO Meeting PointApps móviles - ONO Meeting Point
Apps móviles - ONO Meeting Pointbetabeers
 
Introducción a App Inventor
Introducción a App InventorIntroducción a App Inventor
Introducción a App InventorMarco Avendaño
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesJuan Paulo Madriaza
 
App inventor Flisol 2015
App inventor Flisol 2015App inventor Flisol 2015
App inventor Flisol 2015Marco Avendaño
 
0032 aplicaciones para_dispositivos_ios
0032 aplicaciones para_dispositivos_ios0032 aplicaciones para_dispositivos_ios
0032 aplicaciones para_dispositivos_iosGeneXus
 
Historia de las aplicaciones móviles
Historia de las aplicaciones móvilesHistoria de las aplicaciones móviles
Historia de las aplicaciones móvilesdarklolj
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
 
WebMob: cómo crear webs móviles y códigos QR fácilmente por Javier Loriente...
WebMob: cómo crear webs móviles y códigos QR fácilmente por   Javier Loriente...WebMob: cómo crear webs móviles y códigos QR fácilmente por   Javier Loriente...
WebMob: cómo crear webs móviles y códigos QR fácilmente por Javier Loriente...gomovil
 

Similar a Touch, gestures y acelerómetro con JavaScript en ipad (20)

E book
E bookE book
E book
 
Alejandro
AlejandroAlejandro
Alejandro
 
Marketing apps
Marketing appsMarketing apps
Marketing apps
 
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendaciones
 
Lupita
LupitaLupita
Lupita
 
Implementacion de six sigma
Implementacion de six sigmaImplementacion de six sigma
Implementacion de six sigma
 
EXITO CON EL SIX SIGMA Irma Quishpe
EXITO CON EL SIX SIGMA  Irma QuishpeEXITO CON EL SIX SIGMA  Irma Quishpe
EXITO CON EL SIX SIGMA Irma Quishpe
 
Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...
Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...
Javier Campos - Casos de éxito de apps en empresas para aumentar la productiv...
 
Karla
KarlaKarla
Karla
 
Apps móviles - ONO Meeting Point
Apps móviles - ONO Meeting PointApps móviles - ONO Meeting Point
Apps móviles - ONO Meeting Point
 
Introducción a App Inventor
Introducción a App InventorIntroducción a App Inventor
Introducción a App Inventor
 
Marketing movil 2014
Marketing movil 2014Marketing movil 2014
Marketing movil 2014
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
 
App inventor Flisol 2015
App inventor Flisol 2015App inventor Flisol 2015
App inventor Flisol 2015
 
¿Qué es una Estrategia Móvil?
¿Qué es una Estrategia Móvil?¿Qué es una Estrategia Móvil?
¿Qué es una Estrategia Móvil?
 
0032 aplicaciones para_dispositivos_ios
0032 aplicaciones para_dispositivos_ios0032 aplicaciones para_dispositivos_ios
0032 aplicaciones para_dispositivos_ios
 
Historia de las aplicaciones móviles
Historia de las aplicaciones móvilesHistoria de las aplicaciones móviles
Historia de las aplicaciones móviles
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.
 
Mercadotecnia movil
Mercadotecnia movilMercadotecnia movil
Mercadotecnia movil
 
WebMob: cómo crear webs móviles y códigos QR fácilmente por Javier Loriente...
WebMob: cómo crear webs móviles y códigos QR fácilmente por   Javier Loriente...WebMob: cómo crear webs móviles y códigos QR fácilmente por   Javier Loriente...
WebMob: cómo crear webs móviles y códigos QR fácilmente por Javier Loriente...
 

Último

VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 

Último (20)

VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 

Touch, gestures y acelerómetro con JavaScript en ipad

  • 1. Touch, Gestures, ´ y Acelerometro con JavaScript para aplicaciones web en iPad @@pacocuevas
  • 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. No pierdas de generado ´ vistapor smarthphones web el trafico
  • 4. 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
  • 5. Web App´s fuente (Sept 2011): StatCounter.com
  • 6. Mobile Page Views vs Desktop Page Views Principales taréas que se realizan en un smarthphone
  • 7. No te quedes en ´ busqueda del santo grial ...codifica una vez y crea apps para todos los dispositivos ??
  • 9. “ al día de hoy la mejor plataforma para codificar aplicaciones móviles es... la que conocemos. ” -el práctico
  • 10. Analicemos a detalle algunos aspectos relevantes de las Web Apps
  • 11. INMERSIÓN INMEDIATA no se trata de engañar al usuario haciendolo creer que es una aplicación nativa
  • 12. CONSIDERAR DOS VISTAS portrait y landscape
  • 13. EXISTE UN WEB APP STORE el modelo de negocio no queda en manos de Apple $
  • 14. GO BACK & GO FORWARD “basadas en historial de navegación”
  • 15. WEB APPS O APPS HIBRIDAS en realidad se necesita un marketplace ?
  • 16. LOS GRANDES CONFIAN YouTube, Google, Nike, Twitter, Amazon, Netflix, etc.
  • 17. Touch y Gestures con JavaScript para iPad
  • 18. pero si ya tengo instalado JavaScript ?
  • 19. 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)
  • 20. Demo: Touch, Gestures y Acelerómetro con Java Script
  • 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. TouchEvent Object tres dedos en contacto element.addEventListener(‘touchstart’, handleTouchStart, false); function handleTouchStart(touchEvent) { ... TouchEvent Touch (contacto) TouchList touches TouchList changedTouches TouchList targetTouches
  • 23. Touch Object uno para cada dedo Touch unsigned long identi er EventTarget target Long screenX Long screenY Long pageX Long pageY
  • 24. Touch Object ubicando el objeto Touch unsigned long identi er EventTarget target screenX Long screenX screenY Long screenY Long pageX Long pageY
  • 26. 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
  • 27. ´ GPS y Acelerometro con JavaScript para iPad
  • 40. 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)
  • 41. Gracias! te esperamos en nuestro stand para sortear tarjetas del App Store. @@pacocuevas