Aprender HTML5 sin dolor
Aprenda a la poderosa herramienta que ha revolucionado la Internet
Language: spanish
Note: 4.8/5 (15 notes) 2,753 students
Instructor(s): Francisco Javier Arce Anguiano
Last update: 2022-04-25
What you’ll learn
- Aprender las etiquetas estructurales, manejo de video, sonido y el manejo del canvas.
- Aprender la estructura principal de un documento HTML5
- Manejar las etiquetas estructurales como header, section, article, aside, footer o navegaci贸n
- Aplicar las etiquetas de formularios de HTML5 como validar Email, validar una direcci贸n web, validar un n煤mero, rangos, fechas, crear placeholder.
- Aprender las etiquetas HTML5 de video y de audio, manejar谩 los nuevos formatos de video, crear precarga de videos, ejecutar el video autom谩ticamente.
- Dibujar y animar谩 contenido en el canvas de HTML5, el estado del canvas, arcos, rect谩ngulos, c铆rculos, degradados y manejo de patrones.
- Crear una sencilla aplicaci贸n para dibujar en el canvas del HTML5.
Requirements
- Una comutadora, un navegador moderno y un edite de texto, de preferencia Dreamweaver, SublimeText, Aptana, etc.
Description
HTML5 es el lenguaje que ha revolucionado la Internet. Es sencillo de usar y extremadamente poderoso. En este curso aprender谩 los principios de las etiquetas estructurales, manejo de video, sonido y el manejo del canvas, asi como una breve introducci贸n al desarrollo de p谩ginas responsivas (para que se vena decuadamente en tel茅fonos inteligentes, tabletas y computadoras), el manejo de fuentes externas en diferentes formatos, como EOT,WOFF, TTF o SVG y la introducci贸n a animaciones, transiciones y transformaciones con CSS3.
Los objetivos de este curso son:
Aprender las etiquetas estructurales, manejo de video, sonido y el manejo del canvas.
Aprender la estructura principal de un documento HTML5
Manejar las etiquetas estructurales como header, section, article, aside, footer o navegaci贸n
Aplicar las etiquetas de formularios de HTML5 como validar Email, validar una direcci贸n web, validar un n煤mero, rangos, fechas, crear placeholder.
Aprender las etiquetas HTML5 de video y de audio, manejar谩 los nuevos formatos de video, crear precarga de videos, ejecutar el video autom谩ticamente.
Dibujar y animar谩 contenido en el canvas de HTML5, el estado del canvas, arcos, rect谩ngulos, c铆rculos, degradados y manejo de patrones.
Crear una sencilla aplicaci贸n para dibujar en el canvas del HTML5.
Este curso est谩 orientado a desarrolladores web que deseen profundizar sus conocimientos en la materia.
Who this course is for
- Desarrolladores y dise帽adores web.
Course content
- Introducci贸n a HTML
- Bienvenida al curso Aprende HTML5 sin dolor
- Historia de Internet
- Historia del HTML
- Qu茅 Necesito
- La directiva Doctype
- Los metadatos necesarios en HTML5
- Cuestionario Unidad 1: Introducci贸n a 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
- Cuestionario Unidad 2: Las etiquetas estructurales o sem谩nticas
- Los formularios HTML5
- Introducci贸n a los formularios con HTML5
- Validar un correo con Email
- Validar una direcci贸n web con URL
- Validaci贸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
- El atributo autocomplete
- El atributo datalist
- Las nuevas Pseudoclases para los formularios en HTML5
- Los formularios HTML5
- Manejo de video y audio en HTML5
- Introducci贸n al manejo de video y audio en 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
- Uso de video y de audio
- Introducci贸n al manejo del canvas
- Introducci贸n al CANVAS
- Crear rect谩ngulos en Canvas
- Dibujar l铆neas en el Canvas
- Propiedades de las l铆neas en el Canvas
- Creaci贸n de estados
- Dibujar trazos, caminos o “paths” en Canvas
- Dibujar Arcos en Canvas
- Dibujar curvas Bezier Cuadr谩ticas
- Dibujar curvas Bezier C煤bicas
- Introducci贸n al manejo de Canvas
- Manejar los gradientes y patrones de dise帽o
- Crear gradientes lineales
- Modificar las direcciones en los gradientes lineales
- Gradientes radiales
- Manejo de patrones en canvas
- Manejo de im谩genes en el canvas
- Transformar una imagen en blanco y negro
- Sombras en objetos y textos
- Gradientes y patrones
- 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
- Leer los datos de las cartas con el File API
- Modificar el c贸digo para adaptarlo a un arreglo de una dimensi贸n
- 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
- 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
- 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 l铆nea
- 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
- Crear p谩gina responsiva con @mediaquery
- 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
- Introducci贸n a CSS3
- Herramienta de desarrollo web
- Seleccionar un color en una p谩gina web con ColorZilla
- Archivos del curso
- HTML5
- Archivos del curso HTML5
Time remaining or 417 enrolls left
| Don’t miss any coupons by joining our Telegram group |
