馃嚜馃嚫 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.

 

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