ejemplos reales tpw

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.

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

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