¿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