Aprender HTML5 sin dolor

Aprenda a la poderosa herramienta que ha revolucionado la Internet

4.65 (30 reviews)
Udemy
platform
Español
language
Web Development
category
3,206
students
23 hours
content
May 2022
last update
$64.99
regular price

What you will 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.

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.

Content

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

Screenshots

Aprender HTML5 sin dolor - Screenshot_01Aprender HTML5 sin dolor - Screenshot_02Aprender HTML5 sin dolor - Screenshot_03Aprender HTML5 sin dolor - Screenshot_04

Reviews

Andrés
July 25, 2022
A pesar de que apenas estoy empezando, se me a quedado todo claro muy bueno el cuso la explicación 10/10 Muchas Gracias!!!!
John
March 4, 2022
Me gusta mucho la explicación que hace el profesor Francisco, es muy claro a la hora de abordar los temas.

Coupons

DateDiscountStatus
4/5/2022100% OFF
expired
4/27/2022100% OFF
expired

Charts

Price

Aprender HTML5 sin dolor - Price chart

Rating

Aprender HTML5 sin dolor - Ratings chart

Enrollment distribution

Aprender HTML5 sin dolor - Distribution chart

Related Topics

24171
udemy ID
9/4/2012
course created date
11/22/2019
course indexed date
Bot
course submited by