ejemplos reales tpw
DESCRIPTION
TRANSCRIPT
Ejemplos Reales
Abraham Daniel Lopez Molina -10410582Yesenia Vasquez Melendez-10410552
03-09-2014
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.
Formularios HTML5
• Formularios HTML se utilizan para pasar datos a un servidor.• La etiqueta <form> se utiliza para crear un formulario
HTML:<form></form>
• 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.
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
Ejemplos de paginas con Formularios HTML5
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/
2-Manejo avanzado de audio y video en HTML5
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.
• 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.
Tipos de formato soportados• MP4• WebM• Ogg
Etiquetas utilizadas:• <video>• <source>• <track>
Ejemplo de sintaxis• <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"></video>
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>.
Etiquetas que se utilizan• <audio>• <source>
• En la etiqueta audio se puede utilizar el atributo controls para que se anadan controles de reproduccion.
Tipos de archivo que soportan• MP3• Ogg• Wav
Sintaxis:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"></audio>
Ejemplos de paginas con Audio y Video
Links de ejemplos
Video:• http://download.blender.org/peach/trailer/trailer_400p.oggAudio:http://sonidosmp3gratis.com/animal
3-Geolocalización
• 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.
Ejemplos de paginas con Geolocalización
Links de ejemplos • https://www.google.com.mx/maps• http://blog.atrioweb.com/demos/geolocation-html5/
4-Aplicaciones Web offline
• 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.
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.
Links de ejemplos• http://slides.html5rocks.com/#app-cache• http://www.w3schools.com/html/tryhtml5_html_manifest.ht
m
5-Almacenamiento Web.
Links de ejemplos• http://jonathanmelgoza.com/lab/almacenamiento-web-con-h
tml5/
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.
Ejemplos de paginas con Canvas
Links de ejemplos• http://labs.dinahmoe.com/plink/
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.
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.
Ejemplos de paginas con WebSocket
Links de ejemplos• http://labs.dinahmoe.com/plink/• https://www.google.com.mx• http://browserquest.mozilla.org/
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.
Links de ejemplo• http://www.webkit.org/demos/calendar/Calendar.html
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
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