SlideShare a Scribd company logo
1 of 32
NUEVAS API'S
       DE HTLM5
                  "la frontera final"




Thursday, January 12, 12
Browser estatico

                           Imagenes
                           Texto


                           Los plugins se
                           encargan de lo
                           dinamico




Thursday, January 12, 12
Plugins




                           Browser estatico

Thursday, January 12, 12
LIKE A BOSS      HTML5




Thursday, January 12, 12
API's
                           HTML5




                                       •Animacion
                                       •Multimedia
                                       •Bases de datos
                                       •Conexiones RT
                                       •Manejo de archivos
Thursday, January 12, 12
Thursday, January 12, 12
Thursday, January 12, 12
JAVASCRIPT
                           INTRO EXPRESS



Thursday, January 12, 12
JAVASCRIPT
                           NO es JAVA
                           Es un lenguaje que corre en el browser
                           Primo de Flash
                           Es la base de jQuery, Spry,Dojo,YUI




Thursday, January 12, 12
JAVASCRIPT
            Variable:

                 almacena un valor

                  var nombre = "carlos"
                  var telefono = 555555




Thursday, January 12, 12
JAVASCRIPT
            Funcion:

                 ejecuta comandos
                 function sumar(){
                   var cantidad1 = 10
                   var cantidad2 = 20

                           alert( cantidad1 + cantidad2)
                 }

Thursday, January 12, 12
JAVASCRIPT

                 function cuandoNaci(actual,edad){

                           alert( actual - edad)
                 }




Thursday, January 12, 12
JAVASCRIPT
            Objeto:

                 almacena variables y funciones

                 var prueba = new Object()

                 prueba.hora = "5:30pm"
                 prueba.muestra = function()
                 {alert(prueba.hora)}


Thursday, January 12, 12
GEOLOCACION
Thursday, January 12, 12
JAVASCRIPT

            Llamadas al GPS


               GPS( siFunciona , Error , parametros)




Thursday, January 12, 12
JAVASCRIPT

            Metodos GPS

                 •geolocation.getCurrentPosition
                 •geolocation.watchPosition
                 •geolocation.clearWatch




Thursday, January 12, 12
JAVASCRIPT

                 •   timestamp muestra cuando fue detectada la ubicación.
                 •   coords.latitude devuelve la latitud de la ubicación, en grados.
                 •   coords.longitude devuelve la longitud de la ubicación, en grados.
                 •   coords.accuracy indica que tan acertada es la lectura de coordenadas con un
                     margen de error en metros.
                 •   coords.altitude muestra la altitud cuando esta disponible.
                 •   coords.altitudeAccuracy indica que tan acertada es la lectura de altitud con un
                     margen de error en metros.
                 •   coords.speed devuelve la velocidad basado en la lectura anterior, en metros por
                     segundo.
                 •   coords.heading regresa el ángulo en grados a partir del norte.




Thursday, January 12, 12
DEMO




Thursday, January 12, 12
WEB SOCKETS




Thursday, January 12, 12
WEB SOCKETS

                           Crean una conexion binaria
                           Permiten escuchar en tiempo real
                           Eliminan la latencia
                           Push Calls




Thursday, January 12, 12
WEB SOCKETS




Thursday, January 12, 12
DEMO




Thursday, January 12, 12
DEMO
                                http://websocket.org/echo.html

                           http://mrdoob.com/projects/multiuserpad/


Thursday, January 12, 12
WEB SOCKETS

                           Soporte inconsistente
                           Necesita un socket server
                           Usar con precaución




Thursday, January 12, 12
WEB WORKERS




Thursday, January 12, 12
WEB WORKERS


                           http://html5demos.com/worker


Thursday, January 12, 12
DRAG AND DROP




Thursday, January 12, 12
DRAG AND DROP
                           Permite arrastrar elementos
                           Lee informacion de todos los elementos
                           Especialmente util para web apps




Thursday, January 12, 12
DEMO


                           http://html5demos.com/drag


Thursday, January 12, 12
Offline Storage




Thursday, January 12, 12
Offline Storage
                           Detecta status de la conexion
                           Permite almacenar archivos
                           Muestra contenido offline




Thursday, January 12, 12
DEMO



                           http://html5demos.com/offlineapp

Thursday, January 12, 12

More Related Content

Viewers also liked

Les Médias Sociaux, moi et mon employeur!
Les Médias Sociaux, moi et mon employeur!Les Médias Sociaux, moi et mon employeur!
Les Médias Sociaux, moi et mon employeur!Audrée Longtin
 
Harmoliege
HarmoliegeHarmoliege
Harmoliegeptiloup
 
Prison Break
Prison BreakPrison Break
Prison Breakcuririn
 
Information overloading
Information overloadingInformation overloading
Information overloadingzhangjufu
 
Html5 Audio & video
Html5 Audio & videoHtml5 Audio & video
Html5 Audio & videoCarlos Solis
 
final ppt
final pptfinal ppt
final pptcuririn
 
Preson break
Preson breakPreson break
Preson breakcuririn
 
OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....
OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....
OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....Paco Valverde
 
St aignan sur cher
St aignan sur cherSt aignan sur cher
St aignan sur cherptiloup
 
The essentials of teamwork
The essentials of teamworkThe essentials of teamwork
The essentials of teamworklizzyjones
 
Soham Dave Spring Summer 2011
Soham  Dave  Spring  Summer 2011Soham  Dave  Spring  Summer 2011
Soham Dave Spring Summer 2011Soham Dave
 
Opn final 10 19-10
Opn final 10 19-10Opn final 10 19-10
Opn final 10 19-10klapointe
 

Viewers also liked (20)

Uba ar2012 fr
Uba ar2012 frUba ar2012 fr
Uba ar2012 fr
 
Les Médias Sociaux, moi et mon employeur!
Les Médias Sociaux, moi et mon employeur!Les Médias Sociaux, moi et mon employeur!
Les Médias Sociaux, moi et mon employeur!
 
Tag questions
Tag questionsTag questions
Tag questions
 
ASPHALTICA
ASPHALTICAASPHALTICA
ASPHALTICA
 
Harmoliege
HarmoliegeHarmoliege
Harmoliege
 
Cv
CvCv
Cv
 
Prison Break
Prison BreakPrison Break
Prison Break
 
Pre
PrePre
Pre
 
Information overloading
Information overloadingInformation overloading
Information overloading
 
Html5 Audio & video
Html5 Audio & videoHtml5 Audio & video
Html5 Audio & video
 
final ppt
final pptfinal ppt
final ppt
 
Preson break
Preson breakPreson break
Preson break
 
Pre
PrePre
Pre
 
OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....
OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....
OOWS 2.0: A Model-driven Web Engineering Method for the Development of Web 2....
 
St aignan sur cher
St aignan sur cherSt aignan sur cher
St aignan sur cher
 
The essentials of teamwork
The essentials of teamworkThe essentials of teamwork
The essentials of teamwork
 
Dl alumno
Dl alumnoDl alumno
Dl alumno
 
Soham Dave Spring Summer 2011
Soham  Dave  Spring  Summer 2011Soham  Dave  Spring  Summer 2011
Soham Dave Spring Summer 2011
 
Opn final 10 19-10
Opn final 10 19-10Opn final 10 19-10
Opn final 10 19-10
 
180 hybrid-coupler
180 hybrid-coupler180 hybrid-coupler
180 hybrid-coupler
 

HTML5 nuevas capacidades

  • 1. NUEVAS API'S DE HTLM5 "la frontera final" Thursday, January 12, 12
  • 2. Browser estatico Imagenes Texto Los plugins se encargan de lo dinamico Thursday, January 12, 12
  • 3. Plugins Browser estatico Thursday, January 12, 12
  • 4. LIKE A BOSS HTML5 Thursday, January 12, 12
  • 5. API's HTML5 •Animacion •Multimedia •Bases de datos •Conexiones RT •Manejo de archivos Thursday, January 12, 12
  • 8. JAVASCRIPT INTRO EXPRESS Thursday, January 12, 12
  • 9. JAVASCRIPT NO es JAVA Es un lenguaje que corre en el browser Primo de Flash Es la base de jQuery, Spry,Dojo,YUI Thursday, January 12, 12
  • 10. JAVASCRIPT Variable: almacena un valor var nombre = "carlos" var telefono = 555555 Thursday, January 12, 12
  • 11. JAVASCRIPT Funcion: ejecuta comandos function sumar(){ var cantidad1 = 10 var cantidad2 = 20 alert( cantidad1 + cantidad2) } Thursday, January 12, 12
  • 12. JAVASCRIPT function cuandoNaci(actual,edad){ alert( actual - edad) } Thursday, January 12, 12
  • 13. JAVASCRIPT Objeto: almacena variables y funciones var prueba = new Object() prueba.hora = "5:30pm" prueba.muestra = function() {alert(prueba.hora)} Thursday, January 12, 12
  • 15. JAVASCRIPT Llamadas al GPS GPS( siFunciona , Error , parametros) Thursday, January 12, 12
  • 16. JAVASCRIPT Metodos GPS •geolocation.getCurrentPosition •geolocation.watchPosition •geolocation.clearWatch Thursday, January 12, 12
  • 17. JAVASCRIPT • timestamp muestra cuando fue detectada la ubicación. • coords.latitude devuelve la latitud de la ubicación, en grados. • coords.longitude devuelve la longitud de la ubicación, en grados. • coords.accuracy indica que tan acertada es la lectura de coordenadas con un margen de error en metros. • coords.altitude muestra la altitud cuando esta disponible. • coords.altitudeAccuracy indica que tan acertada es la lectura de altitud con un margen de error en metros. • coords.speed devuelve la velocidad basado en la lectura anterior, en metros por segundo. • coords.heading regresa el ángulo en grados a partir del norte. Thursday, January 12, 12
  • 20. WEB SOCKETS Crean una conexion binaria Permiten escuchar en tiempo real Eliminan la latencia Push Calls Thursday, January 12, 12
  • 23. DEMO http://websocket.org/echo.html http://mrdoob.com/projects/multiuserpad/ Thursday, January 12, 12
  • 24. WEB SOCKETS Soporte inconsistente Necesita un socket server Usar con precaución Thursday, January 12, 12
  • 26. WEB WORKERS http://html5demos.com/worker Thursday, January 12, 12
  • 27. DRAG AND DROP Thursday, January 12, 12
  • 28. DRAG AND DROP Permite arrastrar elementos Lee informacion de todos los elementos Especialmente util para web apps Thursday, January 12, 12
  • 29. DEMO http://html5demos.com/drag Thursday, January 12, 12
  • 31. Offline Storage Detecta status de la conexion Permite almacenar archivos Muestra contenido offline Thursday, January 12, 12
  • 32. DEMO http://html5demos.com/offlineapp Thursday, January 12, 12