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
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.
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>.
22.
23. Etiquetas que se utilizan
• <audio>
• <source>
• En la etiqueta audio se puede utilizar el atributo controls para
que se anadan controles de reproduccion.
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.
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.
40.
41.
42.
43. Links de ejemplos
• http://slides.html5rocks.com/#app-cache
• http://www.w3schools.com/html/tryhtml5_html_manifest.ht
m
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.
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.
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.
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.
61.
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