Curso de Diseño Web con HTML5, CSS3 y JavaScript

01 CONTENIDO, ESTRUCTURA Y APARIENCIA

Introducción y herramientas

• Introducción al desarrollo web integral
• El diseñador web como programador creativo, el lenguaje de la web
• Herramientas de apoyo
• Elección de un editor de texto, factores a tomar en cuenta
• Todo diseño web debe ser responsive

HTML, primera parte: introducción

• Introducción a los lenguajes de etiquetas
• Elementos, etiquetas y atributos
• HTML semántico, el contenido como guía
• Elementos semánticos y elementos estructurales
• Títulos, párrafos, listas, tablas, enlaces e imágenes... el contenido es el rey
• Flujo normal (normal flow), elementos block e inline

CSS, primera parte: introducción

• Reglas, selectores y propiedades
• Tipos de selectores
• Interludio HTML: elemento style, identificadores únicos y clases
• Vinculación de ficheros CSS a ficheros HTML

CSS, segunda parte: el navegador como herramientade diseño

• Diseñando en el navegador, inspector de elementos + editor de texto, o cómo dejar atrás las simulaciones
• CSS y su relación a los programas de diseño tradicionales

Tipografía

• Introducción a la tipografía
• Elección de tipografías para web y las distintas alternativas a nuestra disposición
• Unidades de medida, absolutas y relativas
• Propiedades tipográficas
• Contenido dinámico vs. contenido estático y sus consecuencias a la hora de estilizar la tipografía

Color

• Distintas formas de hablar en RGB
• Color de fondo y color del texto

Layout, primera parte: HTML + CSS

• Relación de las etiquetas estructurales a los típicos “bloques” de un programa de diseño, todo es un rectángulo
• Unidades de medida
• Márgenes, por dentro y por fuera
• Modelo de caja
• Posicionamiento estático, o lo que está detrás del flujo normal
• Rompiendo el flujo normal: posicionamiento relativo, absoluto y fijo
• Introducción al diseño responsive, media queries

CSS, tercera parte: la caja de herramientas gráficas

• Bordes
• Imágenes de fondo y su diferencia con las imágenes de contenido
• Degradados de color
• Sombras
• Modos de fusión
• Filtros
• Transformaciones

HTML, segunda parte: formularios

• Introducción a los formularios
• Elementos de entrada de datos

Layout, segunda parte: Flex

• El modelo de caja flexible
• Flex vs. flujo normal
• Opciones de Flex
• Flex y su relación al diseño responsive
• Limitaciones de Flex

Layout, tercera parte: Grid

• Cuadrículas a la hora de diseñar una web
• Grid vs. Flex vs. flujo normal
• Opciones de Grid

Layout, grand finale: diseñando en el navegador

• Todo es combinable
• Maquetación idiomática, o como pensar en CSS
• Todo diseño web será responsive

02 DINAMISMO Y FUNCIONALIDAD

JavaScript

• ¿Qué es JavaScript?
• Introducción a la programación
• Variables, condicionales, bucles y funciones

La API del DOM, o lo que tradicionalmente asociamos a JavaScript

• ¿Qué es una API?
• El DOM
• Distintas formas de capturar elementos del DOM
• Sintaxis de punto como piedra angular de la API del DOM, getters/setters
• Gestión de clases
• Gestión de atributos
• Añadir y eliminar elementos: HTML dinámico, primera parte
• El bucle de eventos, o cómo convertir HTML en un espacio interactivo
• Callbacks
• El objeto event y cómo gestionar los eventos básicos del navegador

Eventos: añadiendo interacción

• ¿Qué es el backend?
• Peticiones y respuestas, el protocolo HTTP
• Conexiones asíncronas con el servidor, el objeto XHR
• Strings que van y Strings que vienen, JSON como lengua franca entre lenguajes de programación

Ajax

• JSON
• AJAX en el desarrollo web moderno
• Fetch de JavaScript

Hosting

Git y Github