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 <input> 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
Realizar un filtro de imágenes con el API de archivos de HTML5
Leer un archivo de texto plano con el API File de HTML5
Leer un archivo binario con el API File de HTML5
Introducción al manejo de los eventos en el File-API de HTML5
Los eventos onprogress y onerror en el file-API de HTML5
Apuntes del API File
El API localStorage y sessionStorage
El API localStorage y sessionStrage
Ejemplo de una sencilla aplicación con localStorage
Manejar la información de localStorage con JSON
Crear la rutina de alta con JSON y localStorage
Crear la rutina de baja con JSON y localStorage
Crear la rutina de edición con JSON y localStorage
Apuntes del API LocalStorage y SessionStorage
El API de Geolocalización
Introducción a la Geolocalización
Obtener las coordenadas por medio del API de geolocalización de HTML5
Manejo de errores y excepciones con el API Geolocation de HTML5
Generar un mapa de Google con las coordenadas
Apuntes del API Geolocalización
HTML5: API Drag & Drop
Introducción al API Drag & Drop de HTML5
Los eventos del API arrastrar y soltar en HTML5
Apuntes API Drag & Drop
HTML5: API Web worker
Introducción al API Web Worker
Realizar un contador con el API Web Worker de HTML5
Apuntes del API Web Workers
HTML5: API Offline web application
Introducción a las aplicaciones fuera de linea
Conceptos fundamentales sobre el manifiesto
Crear una aplicación sencilla fuera de línea con el API de HTML5
Apuntes del API Web Offline Application
El API SVG
Introducción al API SVG, Scalable Vector Graphics
Crear círculos con el API SVG de HTML5
Crear rectángulos con el API SVG de HTML5
Crear una elipse con el API SVG de HTML5
Dibujar una línea con el API SVG de HTML5
Crear un polígono con el API SVG de HTML5
Crear una línea compuesta con el API SVG de HTML5
Crear un path (camino o recorrido) con el API SVG de HTML5
Crear una curva bézier con el API SVG de HTML5
Manejar texto en el API SVG de HTML5
Apuntes API SVG (Scalable Vector Graphics)
HTML5: Introducción al API WebSQL Database
Las principales funciones del API WebSQL Database
Verificar el API WebSQL Database en los navegadores
El SQL de SQLite
¿Qué es SQLite?
Abrir o crear una base de datos
HTML5: DDL, Lenguaje de definición de datos o Data Definition Language
Tipos de columnas en SQLite
Crear una tabla con WebSQL
Crear una tabla con WebSQL
Los modificadores de las columnas o constraints
Modificar una tabla con ALTER TABLE
Las llaves principales o PRIMARY KEY
Crear y eliminar índices secundarios
HTML5: DML: Data Manipulation Language
Los elementos del DML: Insert, Update y Delete
Insertar registros a la tabla (primera sintaxis)
Introducción a la sentencia SELECT
Segunda sintaxis de la sentencia INSERT
Tercera sintaxis de la sentencia INSERT
Poblar una tabla desde otra tabla con INSERT
Modificar un registro con UPDATE
Borrar un registro con DELETE
HTML5: Altas, bajas y cambios de una tabla
Crear la tabla y las etiquetas html
Desplegar el contenido de la tabla con SELECT
Agregar un elemento a la tabla con INSERT
Modificar un registro con UPDATE
Borrar un registro de la tabla "libros" con DELETE
Formatear los datos con JavaScript
HTML5: Data Query Language o lenguaje de consulta de datos
Las bases de la sentencia SELECT
La cláusula DISTINCT de la sentencia SELECT
Los operadores de comparación en WebSQL database
Los operadores matemáticos en WebSQL Database
Los operadores lógicos: LIKE
Los operadores lógicos: GLOB
Introducción a CSS3
Introducción a las páginas responsivas con media-querys
Introducción a las transformaciones de CSS3
Introducción a las fuentes web en CSS3
Introducción a las transiciones en CSS3
Introducción a las animaciones con CSS3
Archivos del curso
Archivos del curso HTML5