Todo HTML5 y CSS3, de novato a experto

HTML5 y CSS3 son las tecnologías más innovadoras en el ámbito del desarrollo web moderno. La revolución apenas inicia!

4.14 (319 reviews)
Udemy
platform
Español
language
Web Development
category
14,526
students
46 hours
content
Aug 2023
last update
$74.99
regular price

What you will learn

Crear páginas basadas en las mejores prácticas con HTML

Diseñar páginas web con los estilos en cascada

Aplicar las etiquetas estructurales de HTML5 en las páginas web

Crear formas de entrada utilizando los nuevos atributos y pseudoclases de HTML5

Agregar video y audio a las páginas web

Crear animaciones con los APIS Canvas y SVG

Convertir sus aplicaciones web en aplicaciones fuera de línea

Introducir mapas de Google a las páginas con HTML5

Manejar animaciones con los estilos en cascada nivel 3

Description

HTML5 y CSS3 son las tecnologías que han revolucionado la Internet. No sólo podemos hacer animaciones y reproducir video sin necesidad de plug-ins de terceros, sino que podemos hacer páginas que se reproduzcan adecuadamente (o que "respondan") al dispositivo donde se visualizan.

En este curso iniciaremos desde conocer qué es una etiqueta y una regla de estilo, hasta aplicar aspectos más avanzados como la realización de páginas "responsivas" hasta aplicaciones fuera de línea.

Todos los vídeos son descargables y cuentas con apuntes de la mayoría de las secciones en formato pdf, así como los ejercicios resueltos de todas las lecciones.

Es deseable que contengas conocimientos de JavaScript para el desarrollo de aplicaciones con los API's de HTML5.

Revisaremos los APIS de desarrollo como el CANVAS, para hacer dibujos en tiempo de ejecución, y realizaremos un par de juegos con esta tecnología. También revisaremos el SVG para la realización de dibujos vectoriales.

Por medio del API LocalStrorage realizaremos un sencillo sistema de altas, bajas y cambios (ABC) de un catálogo de libros.

Manejaremos los archivos del disco del usuario con el API File,así como agregaremos mapas de Google por medio del API de Geolocalización.

Si ponemos todos estos elementos tendremos un poderoso coctel para nuestros desarrollos Web… y es tan sólo el inicio. ¡Únete a la revolución!

Content

¿De qué está hecha la web?

Introducción al curso
Breve historia de Internet
Breve historia del HTML

Principios de HTML

¿Qué es una etiqueta?
La directiva DOCTYPE
Los metadatos
Comentarios en HTML

Las principales etiquetas de HTML

El manejo de párrafos con la etiqueta de párrafo < p >
Los encabezados, etiquetas h1, h2, h3, h4, h5 y h6
Enfatizar un enunciado: strong y em
Listas ordenadas y sin orden
Listas de definición
Hipervínculos
Navegar dentro de la misma página: anclas
Manejo de imágenes, etiqueta img
Tablas en HTML
Otras etiquetas
Divisiones, la etiqueta < div >

Formatos y colores con los estilos en cascada

Principios de los estilos es cascada
Manejo de colores con Estilos en cascada
Manejo de fuentes con CSS
Modificar los links o hipertextos
Lugares donde se pueden escribir estilos y sus reglas

Selectores y unidades de los estilos en cascada

Los selectores básicos
Selectores compuestos, el !important y el selector global
Unidades flexibles y fijas en CSS
Validar estilos en cascada

El modelo de caja

Los márgenes
Los bordes
El padding
La propiedad auto
El fondo de la caja: la propiedad background

Navegación e impresión con Estilos en cascada

Crear un menú de navegación con CSS
Simular tabuladores con CSS
Modo de impresión

Posicionamiento y flujo

El flujo natural de las cajas
Hacer que las cajas floten
Posicionamiento absoluto
Posición fija:fixed

Formato de páginas con CSS

Formatos de páginas fijos
Introducir los contenidos y los estilos en formato fijos
Formatos flexibles
Tamaños máximos y mínimos
Formatos responsivos para teléfonos inteligentes y tabletas

HTML5: Introducción

Introducción a HTML5
¿Qué necesito para el curso?
La etiqueta DOCTYPE en HTML5
Los metadatos necesarios en HTML5

HTML5: Las etiquetas estructurales o semánticas

Etiquetas Estructurales en HTML5
La etiqueta HEADER
La etiqueta SECTION
La etiqueta ARTICLE
La etiqueta ASIDE
La etiqueta FOOTER
La etiqueta NAV
Realizar la estructura de una página

HTML5: Manejo de forrmularios

Introducción al manejo de formularios con HTML5
El nuevo tipo email para validar correos
El nuevo tipo URL para validar direcciones de internet
El nuevo tipo tel para validar teléfonos
El nuevo tipo number para validar datos numéricos
El nuevo tipo range para validar rangos numéricos
El nuevo tipo date para validar fechas
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

HTML5: MANEJO DE VIDEO Y SONIDO

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

API Canvas HTML5

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 sessionStorage
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

HTML5: 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)

Introduccion CSS3

Introduccion a los estilos en cascada Nivel 3
Modernizr o cómo detectar a IE6-9
Los prefijos de los navegadores modernos

Selectores en CSS3

Selectores tradicionales en CSS 2.1.
Selectores de tipo Sibling-Children
Selector Atributos
Selectores Nth

CSS3: Trabajo con colores

Conceptos generales de los colores en web
Manejo de la transparencia en los colores
Principios generales para los Gradientes
Crear un Gradientes Lineal
Crear un Gradient Radial

CSS3: Tipografia Web

Conceptos generales en el manejo de Fuentes
La poderosa etiqueta Font Face
Bajar y manipular fuentes externas de la web
Manejo de sombras con shadow
Crear dos o más columnas de texto con CSS3

CSS3: Maquetación de páginas con CSS3

El nuevo esquema Flex Box
Orientación de las cajas: Box Orient
Alineación de las cajas: Box Align
Ordenación de las cajas con Box Ordinal
Manejar el tamaño de las cajas con Box Sizing

CSS3: Nuevo modelado de las cajas

Crear esquinas redondeadas en el modelo de caja
Añadir una imagen al borde del modelo de caja (primera parte)
Añadir una imagen al borde del modelo de caja (segunda parte)
Crear sombras a las cajas
Nuevos parámetros en la regla Background en CSS3
La propiedad background-size
Hacer una composición de imágenes con background

CSS3: Transiciones y transformaciones

Introducción a las transformaciones en CSS3
Modificar el origen de la transformación con CSS3
Las transiciones en CSS3
Las animaciones en CSS3
Las animaciones 3D en CSS3
Aplicar filtros a la imagen con CSS3

Creación de páginas responsivas con los Media Queries

Introducción a los Media Query
Realizar una página responsiva con Media Query
Media Query Externa

Ejercicios del curso Todo HTML5 y CSS3

Hasta pronto...
Ejercicios del curso Todo HTML5 y CSS3

Screenshots

Todo HTML5 y CSS3, de novato a experto - Screenshot_01Todo HTML5 y CSS3, de novato a experto - Screenshot_02Todo HTML5 y CSS3, de novato a experto - Screenshot_03Todo HTML5 y CSS3, de novato a experto - Screenshot_04

Reviews

Oswaldo
July 20, 2023
Bastante bien explicado, me ha gustado mucho hasta los momentos y si todo sigue así compraré otros cursos de este mismo preparador. Gracias
John
April 8, 2023
me aparecido que el curso va al ritmo de uno, explicado paso a paso las herramientas, su contenido y el simulador de texto.
Jose
March 23, 2023
Muy buen curso. Para que los que aprendemos lento y necesitamos que nos enseñen despacito para no perder el hilo. Bien explicado.
Cristian
October 27, 2022
Me parece muy bien que al termino de cada capitulo haya un cuestionario, para forzarnos a poner atencion. Y el que ya tengamos conocimientos de html no significa que ese cuestionario este al 100 aprobado.
Gabriela
October 20, 2022
ME GUSTA COMO EXPLICA. YO NO TENIA CONOCIMIENTO DE HTML PERO HE ENTENDIDO TODO MUY BIEN,ES MAS AHORA ME FASCINA. MUCHAS GRACIAS!!!!
Franklin
July 29, 2022
Hasta ahora explica bien detallado. Pese a que algunas etiquetas ya están en desuso el curso logra su cometido.
Gustavo
June 10, 2022
Muy detallado y con explicaciones paso a paso que ayudan a darle solides al conocimiento adquirido. El desglose de contenido permite en caso de olvido retornar y refrescar la idea con claridad.
Dana
May 24, 2022
Algunas cosas que explica son antiguas y ya no se utilizan. Debería estar más optimizado y eliminar las cosas que ya quedaron atrás. A mi parecer se vuelve tedioso y aburrido. El profesor sabe, pero no lo volvería a elegir. Elegiría algo mas actualizado y no tan repetitivo.
Carlos
November 12, 2021
Pues el curso pare ser ya viejo, recomendaría uno mas actual, pero es útil si no sabes nada de css y html
Maria
May 9, 2021
me gusta, lo explica muy bien aunque los videos mas adelantados no vienen los ejercicios y otro pequeño fallo es que los subtítulos no coincide
Braulio
September 13, 2019
Es una buena elección. Viene muy completo pero sí hay pequeñas cosas que podrían tener más explicación.
Eric
September 4, 2019
muy buen curso explica muy bien y con los ejemplos de las modificaciones que ase cada intruccion es una exelente forma de enseñar
Luis
June 26, 2019
Es un buen curso para verdaderos principiantes, si tienes algo de conocimiento en el tema te recomiendo leer los tutoriales de W3C y después tomar un curso intermedio.

Coupons

DateDiscountStatus
5/6/2021100% OFF
expired
3/19/2024100% OFF
expired

Charts

Price

Todo HTML5 y CSS3, de novato a experto - Price chart

Rating

Todo HTML5 y CSS3, de novato a experto - Ratings chart

Enrollment distribution

Todo HTML5 y CSS3, de novato a experto - Distribution chart

Related Topics

364022
udemy ID
12/5/2014
course created date
11/22/2019
course indexed date
Bot
course submited by