馃嚜馃嚫 Aprender HTML5 sin dolor

馃嚜馃嚫 Aprender HTML5 sin dolor

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.

 

馃嚜馃嚫 Aprender HTML5 sin dolor馃嚜馃嚫 Aprender HTML5 sin dolor

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.

 

馃嚜馃嚫 Aprender HTML5 sin dolor馃嚜馃嚫 Aprender HTML5 sin dolor

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 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate