CURSO DE HTML5

1. Introduccin
Introduccin Historia de HTML Potencial de HTML5 Principales novedades de HTML5 Elementos necesarios para trabajar con HTML5 Editor Navegador

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

Un vistazo a la recomendacin de W3C Etiquetas que desaparecen Nuevas etiquetas que aparecen Explicacin y ejemplos de las nuevas etiquetas Etiqueta bdi Ejemplo Etiqueta command Etiqueta summary Etiqueta details Ejemplo Etiqueta embed Ejemplo Etiqueta figcaption Etiqueta figure Ejemplo Etiqueta hgroup Ejemplo Etiqueta mark Ejemplo Etiqueta meter Ejemplo Etiqueta progress Ejemplo Etiquetas ruby, rt y rp Ejemplo Etiqueta time Etiqueta wbr Ejercicios Ejercicio 1: Crear una encuesta con las nuevas etiquetas de HTML5 Pasos a seguir Solucin del Ejercicio
http://www.aprendeo.com/cursos-online-html5-css3

3. Nueva forma de estructurar una pgina Web

Principales novedades Nuevas etiquetas Etiqueta article Etiqueta section Etiqueta aside Etiqueta nav Etiqueta header Etiqueta footer Ejemplo de estructuracin de una pgina Web Ejercicios Ejercicio 1: Estructurar una pgina de noticias con las nuevas etiquetas de HTML5 Pasos a seguir Solucin del Ejercicio

4. Nuevos campos de formulario

Cambios en las etiquetas que ya existan Novedades en el elemento form Novedades en el elemento textarea Novedades en el elemento button Ejemplo Novedades en el elemento select Novedades en el elemento option Novedades en el elemento optgroup Novedades en el elemento fieldset Novedades en el elemento label Nuevas etiquetas Etiqueta datalist Ejemplo Etiqueta keygen Ejemplo Etiqueta output Ejemplo Cambios en los controles que ya existan Novedades en los controles text y password Novedades en los controles checkbox y radio Novedades en el control file Novedades en el control submit Novedades en el control image

http://www.aprendeo.com/cursos-online-html5-css3

Nuevos tipos de controles Elemento de entrada date Ejemplo Elemento de entrada datetime Elemento de entrada datetime-local Ejemplo Elemento de entrada time Ejemplo Elemento de entrada week Elemento de entrada month Ejemplo Elemento de entrada number Elemento de entrada range Ejemplo Elemento de entrada tel Elemento de entrada email Ejemplo Elemento de entrada url Ejemplo Elemento de entrada color Ejemplo Elemento de entrada search Ejemplo Ejercicios Ejercicio 1: Crear un formulario completo con los nuevos controles de HTML5 Pasos a seguir Solucin del Ejercicio

http://www.aprendeo.com/cursos-online-html5-css3

5. Etiquetas multimedia de AUDIO y VIDEO

Introduccin Diferencias entre formatos y compatibilidades Conversores disponibles Colocar un archivo de VDEO en nuestra pgina La etiqueta VDEO Ejemplo La etiqueta SOURCE Ejemplo La etiqueta TRACK Ejemplo Colocar un archivo de AUDIO en nuestra pgina La etiqueta AUDIO Ejemplo Ejemplo Controlando el ERROR en los elementos de vdeo y audio creando nuestro propio reproductor de vdeo y audio Ejemplo Ejemplo Ejercicios Ejercicio 1: Crear un reproductor personalizado para VDEO y AUDIO Pasos a seguir Solucin del Ejercicio

6. Aprender a trabajar con Canvas

Introduccin Antes de empezar a dibujar Dibujando rectngulos y tringulos Rectngulos Tringulos Dibujando arcos y curvas Arcos Curvas Creando textos Dibujando y modificando imgenes Creando grficos Creando nuestros propios grficos Utilizando libreras ya creadas para la generacin de grficos Creando gradientes de color Creando animaciones Ejemplo Interesantes opciones para crear contenido animado

http://www.aprendeo.com/cursos-online-html5-css3

 usuario

Ejercicios Ejercicio 1: Crear un sistema de ZOOM al pasar el ratn sobre una imagen Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio Ejercicio 2: Crear un grfico circular en funcin de los datos que introduce el Pasos a seguir Solucin del Ejercicio Ejercicio 3: Crear una animacin aleatoria Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio

7. Nuevas opciones con CSS3

Introduccin Transformaciones 2D en CSS3 Movimiento de traslacin Movimiento de escalado Movimiento de rotacin Movimiento de inclinacin Cambiando el origen de la transformacin Transformaciones 3D en CSS3 Definiendo la perspectiva para las transformaciones 3D Movimiento de traslacin 3D Movimiento de rotacin 3D Cambiando el estilo de la transformacin Cambiando la forma de ver la parte trasera de nuestros elementos Animaciones en CSS3 Ejemplo de animacin Transiciones en CSS3 Ejemplo de transicin Ejercicios Ejercicio 1: Crear una galera de imgenes animada Pasos a seguir Solucin del Ejercicio Ejercicio 2: Crear un men desplegable animado Pasos a seguir Solucin del Ejercicio

http://www.aprendeo.com/cursos-online-html5-css3

8. Drag and Drop

Ejercicios Ejercicio 1: Crear un puzzle infantil Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio Ejercicio 2: Crear un sistema para arrastrar productos a un carrito de la compra Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio Introduccin Eventos y propiedades El objeto dataTransfer Ejemplo Drag&Drop Ejemplo Drag&Drop entre navegador y escritorio

9. Edicin inline
Introduccin Opciones disponibles Creando un editor de texto Ejercicios Ejercicio 1: Crear un sistema para publicar mensajes con un editor para los mensajes a introducir Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio

10. Geolocalizacin
Introduccin Cmo detectar la ubicacin Ejemplo Cmo diferenciar el error ocurrido Posicionarnos con Google Maps Ejercicios Ejercicio 1: Crear un sistema que nos vaya calculando la distancia que llevamos recorrida mientras nos desplazamos Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio
http://www.aprendeo.com/cursos-online-html5-css3

11. Almacenamiento Web

Introduccin Almacenamiento en sesin Ejemplo Almacenamiento en local Ejemplo Otras opciones de almacenamiento Almacenamiento en cach

Ejercicios Ejercicio 1: Crear un carrito de la compra que vaya almacenando el listado de productos en local Lo necesario para comenzar Pasos a seguir Solucin del Ejercicio

12. Comunicaciones en HTML5

Ejercicios Ejercicio 1: Crear un sistema para gestionar una lista de reproduccin de msica Pasos a seguir Solucin del Ejercicio Comunicaciones en HTML5 Introduccin Mensajera Web La API de Web Messaging Ejemplo con Web Messaging Canales y puertos con Web Messaging WebSockets La API de WebSockets Ejemplo con WebSockets Servidores para WebSocket

http://www.aprendeo.com/cursos-online-html5-css3