Introducción a HTML5
- Historia
- Qué Necesito
- La directiva Doctype
- Los metadatos necesarios en HTML5
LAS ETIQUETAS ESTRUCTURALES O SEMÁNTICAS
- Etiquetas Estructurales
- El encabezado de una página: Header
- Agrupar el contenido: Section
- El contenido principal de una página: Article
- Contenido lateral: Aside
- El pie de página: Footer
- Delimitar el área de navegación: Nav
- Realizar un layout con las etiquetas de HTML5
LOS FORMULARIOS EN HTML5
- Introducción a los formularios con HTML5
- Validar un correo con Email
- Validar una dirección web con URL
- Vaidación de un teléfono con Tel
- Validar un número con Number
- Validar un rango con Range
- Formas Date
- Seleccionar un color por medio de CSS3
- El atributo Autofocus
- El atributo Placeholder
- Validar un campo con el atributo Pattern
- El atributo Required
- Las nuevas Pseudoclases para los formularios en HTML5
MANEJO DE VIDEO Y SONIDO CON HTML5
- Las nuevas Etiquetas para manejar video y audio con HTML5
- Los nuevos formatos de video en HTML5
- Precargar el video en HTML5
- Ejecutar el Video automáticamente con Autoplay
- Hacer que se repita el video con Loop
- Cambiar la imagen de inicio de un video con el atributo Poster
- Cambiar las dimensiones de un video con los atributos Width Height
- Solucionar algunos inconvenientes con diversos Navegadores
EL MANEJO DEL CANVAS
- Introducción al CANVAS
- Manejo del CANVAS, segunda parte
- El contexto en canvas
- El relleno y el contorno en canvas
- Crear líneas en canvas
- Estados en canvas
- Arcos y caminos
- Curvas en canvas
- Gradientes lineales
- Dirección de gradientes lineales
- Gradientes radiales
- Manejo de patrones en canvas
- Sombras en objetos y textos
Crear una sencilla aplicación de dibujo con canvas
- Creación de un grid
- Dibujar los dos ejes en el grid
- Dibujar ejes en un grid, segunda parte
- Finalizar los ejes y organizar el código
- Eventos del ratón dentro del canvas
- Ajustar las coordenadas del ratón en el canvas
- Dibujar una línea en forma dinámica con los eventos del ratón
- DIbujar en forma continua con el apuntador del ratón
- Controles para el programa de dibujo
Animación básica con el Canvas
- Revisar la animación básica con CANVAS-HTML5
- Animación de una pelotilla con Canvas
- Borrar y re-dibujar la pelotita
- Detectar las colisiones en el eje X
- Terminar la animación básica con canvas
CANVAS: crear un juego de memoria
- Revisar el juego de memoria terminado
- Crear el objeto JavaScript para almacenar la información del juego
- Pintamos el tablero del juego
- Barajar las cartas del juego de memoria
- Ajustar las coordenadas del canvas
- Detectar la carta seleccionada con el apuntador del ratón
- Seleccionar la primer carta del juego de memoria
- Selecciona la segunda carta del juego de memoria
- Comparar las cartas seleccionadas en la mano del juego de memoria
- Crear un contador en el juego y finalizarlo
CANVAS: Crear un juego de memoria con imágenes
- Revisar el juego de memoria con imágenes
- Crear los arreglos de dos dimensiones con JavaScript
- Modificar el barajeo y terminar el juego de memoria
CANVAS: Crear un juego de ahorcado
- Revisar el juego de ahorcados
- Las variables y objetos para el juego de ahorcado
- Crear el tablero QWERTY para el juego
- Desplegar la palabra letra por letra en el canvas
- Colocar el cadalso del ahorcado en el canvas
- Detectar la tecla seleccionada por el usuario
- Empatar la tecla seleccionada con la palabra
- Verificar le fin del juego: Game Over
Los microdatos, microformatos y RDFa en HTML5
- Los atributos "data-" en HTML5
- Los microdatos para guardar información en HTML5
El API-File
- Introducción al API File de HTML5
- Utilizar la etiqueta para leer un archivo con el API File
- Leer los datos de un archivo con el API File de HTML5
- Leer varios archivos con File-API de HTML5
- Detectar un archivo en una zona Drag&Drop con el file API de HTML5
