2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

Transcripción

1 CURSO DE HTML5 1. 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 recomendación de W3C Etiquetas que desaparecen Nuevas etiquetas que aparecen Explicación y ejemplos de las nuevas etiquetas Etiqueta bdi Etiqueta command Etiqueta summary Etiqueta details Etiqueta embed Etiqueta figcaption Etiqueta figure Etiqueta hgroup Ejemplo Etiqueta mark Etiqueta meter Etiqueta progress Etiquetas ruby, rt y rp Etiqueta time Etiqueta wbr Ejercicio 1: Crear una encuesta con las nuevas etiquetas de HTML5 Pasos a seguir Solución del Ejercicio

2 3. Nueva forma de estructurar una página Web Principales novedades Nuevas etiquetas Etiqueta article Etiqueta section Etiqueta aside Etiqueta nav Etiqueta header Etiqueta footer de estructuración de una página Web Ejercicio 1: Estructurar una página de noticias con las nuevas etiquetas de HTML5 Pasos a seguir Solución del Ejercicio 4. Nuevos campos de formulario Cambios en las etiquetas que ya existían Novedades en el elemento form Novedades en el elemento textarea Novedades en el elemento button 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 Etiqueta output Cambios en los controles que ya existían 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

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

4 5. Etiquetas multimedia de AUDIO y VIDEO Diferencias entre formatos y compatibilidades Conversores disponibles Colocar un archivo de VÍDEO en nuestra página La etiqueta VÍDEO La etiqueta SOURCE La etiqueta TRACK Colocar un archivo de AUDIO en nuestra página La etiqueta AUDIO Controlando el ERROR en los elementos de vídeo y audio creando nuestro propio reproductor de vídeo y audio Ejercicio 1: Crear un reproductor personalizado para VÍDEO y AUDIO Pasos a seguir Solución del Ejercicio 6. Aprender a trabajar con Canvas Antes de empezar a dibujar Dibujando rectángulos y triángulos Rectángulos Triángulos Dibujando arcos y curvas Arcos Curvas Creando textos Dibujando y modificando imágenes Creando gráficos Creando nuestros propios gráficos Utilizando librerías ya creadas para la generación de gráficos Creando gradientes de color Creando animaciones Interesantes opciones para crear contenido animado

5 Ejercicio 1: Crear un sistema de ZOOM al pasar el ratón sobre una imagen Lo necesario para comenzar Pasos a seguir Solución del Ejercicio Ejercicio 2: Crear un gráfico circular en función de los datos que introduce el usuario Pasos a seguir Solución del Ejercicio Ejercicio 3: Crear una animación aleatoria Lo necesario para comenzar Pasos a seguir Solución del Ejercicio 7. Nuevas opciones con CSS3 Transformaciones 2D en CSS3 Movimiento de traslación Movimiento de escalado Movimiento de rotación Movimiento de inclinación Cambiando el origen de la transformación Transformaciones 3D en CSS3 Definiendo la perspectiva para las transformaciones 3D Movimiento de traslación 3D Movimiento de rotación 3D Cambiando el estilo de la transformación Cambiando la forma de ver la parte trasera de nuestros elementos Animaciones en CSS3 de animación Transiciones en CSS3 de transición Ejercicio 1: Crear una galería de imágenes animada Pasos a seguir Solución del Ejercicio Ejercicio 2: Crear un menú desplegable animado Pasos a seguir Solución del Ejercicio

6 8. Drag and Drop Eventos y propiedades El objeto datatransfer Drag&Drop Drag&Drop entre navegador y escritorio Ejercicio 1: Crear un puzzle infantil Lo necesario para comenzar Pasos a seguir Solución del Ejercicio Ejercicio 2: Crear un sistema para arrastrar productos a un carrito de la compra Lo necesario para comenzar Pasos a seguir Solución del Ejercicio 9. Edición inline Opciones disponibles Creando un editor de texto Ejercicio 1: Crear un sistema para publicar mensajes con un editor para los mensajes a introducir Lo necesario para comenzar Pasos a seguir Solución del Ejercicio 10. Geolocalización Cómo detectar la ubicación Cómo diferenciar el error ocurrido Posicionarnos con Google Maps Ejercicio 1: Crear un sistema que nos vaya calculando la distancia que llevamos recorrida mientras nos desplazamos Lo necesario para comenzar Pasos a seguir Solución del Ejercicio

7 11. Almacenamiento Web Almacenamiento en sesión Almacenamiento en local Otras opciones de almacenamiento Almacenamiento en caché Ejercicio 1: Crear un carrito de la compra que vaya almacenando el listado de productos en local Lo necesario para comenzar Pasos a seguir Solución del Ejercicio 12. Comunicaciones en HTML5 Comunicaciones en HTML5 Mensajería Web La API de Web Messaging con Web Messaging Canales y puertos con Web Messaging WebSockets La API de WebSockets con WebSockets Servidores para WebSocket Ejercicio 1: Crear un sistema para gestionar una lista de reproducción de música Pasos a seguir Solución del Ejercicio