1. Ejemplos Reales
Abraham Daniel Lopez Molina -10410582
Yesenia Vasquez Melendez-10410552
03-09-2014

2. Agenda
• Formularios HTML5
• Manejo avanzado de audio y video en HTML5
• Geolocalización.
• Aplicaciones Web offline.
• Almacenamiento Web.
• Canvas.
• Web Workers.
• Web Sockets.
• Web SQL.

3. FormulariosHTML5
• Formularios HTML se utilizan para pasar datos a un servidor.
• La etiqueta <form> se utiliza para crear un formulario
HTML:<form></form>

4. • El elemento más importante de un formulario es el elemento
o etiqueta <input>.
• El atributo type especifica el tipo de entrada que se va a
mostrar.
• El atributo action sirve para especificar a que pagina será
mandada la información del formulario.

5. Principales tipos de entrada de un
formulario
• Button
• Checkbox
• Color
• Date
• Datetime
• Datetime-local
• Email
• File
• Hidden
• image
• Month
• Number
• Password
• Radio
• Range
• Reset
• Search
• Submit
• Tel
• Text
• Time
• url
• Week

6. Ejemplos de paginas con
Formularios HTML5

14. Links de ejemplos
• http://24timezones.com/reloj_hora_exacta.php
• https://www.facebook.com/
• https://canvas.instructure.com/courses/874515/assignments/2992
987
• https://registration.mercadolibre.com.mx/registration/
• http://www.mercadolibre.com.mx/vehiculos/

15. 2-Manejo avanzado de audio y
video en HTML5

16. Video
• La etiqueta de HTML5 <video>,especifica un método estándar
para incrustar un vídeo en una página web.
• Su sintaxis es: <video></video>.
• Los atributos mas utilizados son: controls y autoplay.

17. • El atributo controls añade controles de vídeo, como
reproducción, pausa y volumen.
• El atributo autoplay se utiliza para que el video se reproduzca
automáticamente.

18. Tipos de formato soportados
• MP4
• WebM
• Ogg

19. Etiquetas utilizadas:
• <video>
• <source>
• <track>

20. Ejemplo de sintaxis
• <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

21. Audio
• HTML5 define un nuevo elemento que especifica un método
estándar para incrustar un archivo de audio en una página
web: la etiqueta <audio>.

23. Etiquetas que se utilizan
• <audio>
• <source>
• En la etiqueta audio se puede utilizar el atributo controls para
que se anadan controles de reproduccion.

24. Tipos de archivo que soportan
• MP3
• Ogg
• Wav

25. Sintaxis:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

26. Ejemplos de paginas con Audio
y Video

29. Links de ejemplos
Video:
• http://download.blender.org/peach/trailer/trailer_400p.ogg
Audio:
http://sonidosmp3gratis.com/animal

30. 3-Geolocalización

31. • Geolocalización se utiliza para localizar la posición de un
usuario.
• Dado que esto puede comprometer la privacidad del usuario,
la posición no está disponible a menos que el usuario lo
aprueba.

33. Ejemplos de paginas con
Geolocalización

36. Links de ejemplos
• https://www.google.com.mx/maps
• http://blog.atrioweb.com/demos/geolocation-html5/

37. 4-Aplicaciones Web offline

38. • HTML5 introduce la aplicación de caché, lo que significa que
una aplicación web se almacena en caché, y es accesible sin
conexión a Internet.

39. Ventajas
• Navegación fuera de línea - los usuarios pueden utilizar la
aplicación cuando están fuera de línea.
• Velocidad - recursos en caché se cargan más rápido.
• Reducción de la carga del servidor - el navegador sólo
descargará los recursos actualizados.

43. Links de ejemplos
• http://slides.html5rocks.com/#app-cache
• http://www.w3schools.com/html/tryhtml5_html_manifest.ht
m

44. 5-Almacenamiento Web.

46. Links de ejemplos
• http://jonathanmelgoza.com/lab/almacenamiento-web-con-html5/

47. 6-Canvas
• Se utiliza para dibujar gráficos, sobre la marcha, a través de
secuencias de comandos (normalmente JavaScript).
• Es sólo un contenedor para gráficos. Se debe utilizar una
secuencia de comandos para dibujar en realidad los gráficos.
• Canvas tiene varios métodos para dibujar trazados, cajas,
círculos, texto y agregar imágenes.

48. Ejemplos de paginas con
Canvas

50. Links de ejemplos
• http://labs.dinahmoe.com/plink/

51. 7-Web Workers.
• Los Workers no son más que una API que permite a los
desarrolladores web ejecutar procesos en segundo plano, son
totalmente independientemente a los procesos de la interfaz
de usuario.

53. Links de ejemplo
• http://nerget.com/rayjs-mt/rayjs.html

54. 8-Web Sockets.
• WebSocket define una API para establecer conexiones de tipo
“socket” entre un navegador y el servidor. Por tanto existe una
conexión persistente entre el cliente y el servidor y ambas
partes pueden enviar datos en cualquier momento.

55. Ejemplos de paginas con
WebSocket

59. Links de ejemplos
• http://labs.dinahmoe.com/plink/
• https://www.google.com.mx
• http://browserquest.mozilla.org/

60. 9-Web SQL.
• HTML5 nos introduce la posibilidad de disponer de un base de
datos local almacenada en el navegador del usuario.
• Mediante Web SQL Database , la W3C ofrece una API estándar
destinada a manipular bases de datos en el lado del cliente
mediante peticiones SQL de forma asíncrona.

62. Links de ejemplo
• http://www.webkit.org/demos/calendar/Calendar.html

63. Conclusiones
A traves de esta actividad se aprendio la manera en que funcionan
las diferentes herramientas en html5.
Tambien se aprendio como y en donde se emplean las diferentes
etiquetas de entrada en los formularios.
• Contratiempos.
-El no haber tantos ejemplos.
• Dificultad de la actividad y el tiempo y formato de entrega.
• -Dificil debido a que no habia o es muy dificil encontrar ejemplos
reales de algunos temas.
• Tiempo de realización
• -15 horas

64. Referencias
• http://www.w3schools.com/html/html5_webstorage.asp
• http://www.webkit.org/demos
• http://24timezones.com/reloj_hora_exacta.php
• https://www.facebook.com/
• https://canvas.instructure.com/courses/874515/assignments/29929
87
• https://registration.mercadolibre.com.mx/registration/
• http://www.mercadolibre.com.mx/vehiculos/
• http://download.blender.org/peach/trailer/trailer_400p.ogg
• http://sonidosmp3gratis.com/animal
• https://www.google.com.mx/maps
• http://blog.atrioweb.com/demos/geolocation-html5/
• http://slides.html5rocks.com/#app-cache
• http://www.w3schools.com/html/tryhtml5_html_manifest.htm