Ejemplos reales TPW
-
Upload
yesenia1226 -
Category
Education
-
view
66 -
download
0
description
Transcript of Ejemplos reales TPW
![Page 1: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/1.jpg)
Ejemplos Reales
Abraham Daniel Lopez Molina -10410582Yesenia Vasquez Melendez-10410552
03-09-2014
![Page 2: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/2.jpg)
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.
![Page 3: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/3.jpg)
Formularios HTML5
• Formularios HTML se utilizan para pasar datos a un servidor.• La etiqueta <form> se utiliza para crear un formulario
HTML:<form></form>
![Page 4: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/4.jpg)
• 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.
![Page 5: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/5.jpg)
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
![Page 6: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/6.jpg)
Ejemplos de paginas con Formularios HTML5
![Page 7: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/7.jpg)
![Page 8: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/8.jpg)
![Page 9: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/9.jpg)
![Page 10: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/10.jpg)
![Page 11: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/11.jpg)
![Page 12: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/12.jpg)
![Page 13: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/13.jpg)
![Page 14: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/14.jpg)
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/
![Page 15: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/15.jpg)
2-Manejo avanzado de audio y video en HTML5
![Page 16: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/16.jpg)
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.
![Page 17: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/17.jpg)
• 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.
![Page 18: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/18.jpg)
Tipos de formato soportados• MP4• WebM• Ogg
![Page 19: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/19.jpg)
Etiquetas utilizadas:• <video>• <source>• <track>
![Page 20: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/20.jpg)
Ejemplo de sintaxis• <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"></video>
![Page 21: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/21.jpg)
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>.
![Page 22: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/22.jpg)
![Page 23: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/23.jpg)
Etiquetas que se utilizan• <audio>• <source>
• En la etiqueta audio se puede utilizar el atributo controls para que se anadan controles de reproduccion.
![Page 24: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/24.jpg)
Tipos de archivo que soportan• MP3• Ogg• Wav
![Page 25: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/25.jpg)
Sintaxis:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"></audio>
![Page 26: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/26.jpg)
Ejemplos de paginas con Audio y Video
![Page 27: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/27.jpg)
![Page 28: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/28.jpg)
![Page 29: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/29.jpg)
Links de ejemplos
Video:• http://download.blender.org/peach/trailer/trailer_400p.oggAudio:http://sonidosmp3gratis.com/animal
![Page 30: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/30.jpg)
3-Geolocalización
![Page 31: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/31.jpg)
• 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.
![Page 32: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/32.jpg)
![Page 33: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/33.jpg)
Ejemplos de paginas con Geolocalización
![Page 34: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/34.jpg)
![Page 35: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/35.jpg)
![Page 36: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/36.jpg)
Links de ejemplos • https://www.google.com.mx/maps• http://blog.atrioweb.com/demos/geolocation-html5/
![Page 37: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/37.jpg)
4-Aplicaciones Web offline
![Page 38: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/38.jpg)
• 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.
![Page 39: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/39.jpg)
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.
![Page 40: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/40.jpg)
![Page 41: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/41.jpg)
![Page 42: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/42.jpg)
![Page 43: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/43.jpg)
Links de ejemplos• http://slides.html5rocks.com/#app-cache• http://www.w3schools.com/html/tryhtml5_html_manifest.ht
m
![Page 44: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/44.jpg)
5-Almacenamiento Web.
![Page 45: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/45.jpg)
![Page 46: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/46.jpg)
Links de ejemplos• http://jonathanmelgoza.com/lab/almacenamiento-web-con-h
tml5/
![Page 47: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/47.jpg)
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.
![Page 48: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/48.jpg)
Ejemplos de paginas con Canvas
![Page 49: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/49.jpg)
![Page 50: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/50.jpg)
Links de ejemplos• http://labs.dinahmoe.com/plink/
![Page 51: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/51.jpg)
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.
![Page 52: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/52.jpg)
![Page 54: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/54.jpg)
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.
![Page 55: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/55.jpg)
Ejemplos de paginas con WebSocket
![Page 56: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/56.jpg)
![Page 57: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/57.jpg)
![Page 58: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/58.jpg)
![Page 59: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/59.jpg)
Links de ejemplos• http://labs.dinahmoe.com/plink/• https://www.google.com.mx• http://browserquest.mozilla.org/
![Page 60: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/60.jpg)
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.
![Page 61: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/61.jpg)
![Page 62: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/62.jpg)
Links de ejemplo• http://www.webkit.org/demos/calendar/Calendar.html
![Page 63: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/63.jpg)
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
![Page 64: Ejemplos reales TPW](https://reader031.fdocumento.com/reader031/viewer/2022013011/54954576b47959e6278b4594/html5/thumbnails/64.jpg)
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