Skip to content

Latest commit

 

History

History
 
 

03-interactive-site

README.md

Creando un sitio web interactivo con JavaScript

En este curso aprenderás todo lo necesario para poder crear un producto web interactivo - uno que responda a las acciones del usuario. Para esto aprenderás a:

  1. Diseñar la experiencia de usuario que ofrecerá tu producto, aplicando conceptos y técnicas de ux design
  2. Maquetar un sitio web para presentar información (texto, imágenes, links, etc.) en la web, utilizando html y css
  3. Darle interactividad a tu producto web a través de la programación con JavaScript

Público Objetivo

Este curso está dirigido a estudiantes de Laboratoria. Es el segundo curso que se toma como parte del bootcamp.

Requerimientos previos

Para llevar este curso debes haber completado el curso programación básica con JavaScript de Laboratoria. Se asume que las alumnas saben crear programas básicos, haciendo uso de: variables, funciones, bucles, condicionales, arreglos y objetos.

Propósito General

El propósito de este curso es aplicar lo que sabes de la programación a productos que viven en la web. En este curso crearás productos web con html y css y le darás interacción por medio de la programación con JavaScript.

Aprenderás

  • A crear una página web estática utilizando las etiquetas principales html y a darle estilo con css
  • Qué es el Document Object Model (DOM) y el Browser Object Model (BOM), y cómo utilizar JavaScript para manipular el html y css de tu producto
  • Qué es ux design y por qué es una pieza clave para el desarrollo de un producto digital

Main Tags: html, css properties, css selectors, dom, bom, events, ux design.

Secondary Tags: display, box model, positioning, layout, sketching.

Duración

150 hrs aprox.

Productos a desarrollar

Con este curso desarrollarás tus primeros productos digitales. Pondrás en práctica los conocimientos aprendidos para crear los siguientes productos web:

  1. Portafolio: crearás tu página web personal para mostrar tu información profesional a través de la web.

  2. Juego Laberinto: ¡crearás tu primer juego animado! El jugador debe mover al personaje principal utilizando las flechas del teclado y encontrar la salida en un laberinto.

  3. Data Dashboard: tu producto final será diseñar y crear una web interactiva, de complejidad media, que muestre los datos y el perfil de una estudiante de Laboratoria.

Syllabus

Unidad 01: Maquetado web con HTML & CSS

60-70 hrs

Para crear un producto web interactivo, primero debemos aprender a maquetar. En esta unidad veremos cómo crear la estructura de un sitio web con html y cómo darle estilos con css. Con esto aprenderás a crear páginas web estáticas, sin interacción con el usuario. Más adelante le daremos interacción con js.

# Tipo Duración Tópico
00 lectura 15min Opening: HTML & CSS
01 lectura 4h HTML
02 lectura 4h Intro a CSS
03 lectura 1h Box Model & Display
04 seminario 2h Clase de Conceptos
05 taller 2h Clase Práctica
06 lectura 2h Positioning & Floats
07 lectura 1h Tipografías, íconos y sprites
08 taller 3h Manejo de estrés: organización, planificación y mindfullness
09 seminario 2h Clase de Conceptos
10 taller 4h Clase Práctica
11 lectura 2h Caso práctico (video)
12 quiz 30min Quiz #1
13 seminario 4h Clase de Conceptos
14 taller 8h Clase Práctica
15 taller 3h Taller HSE: Imaginería
16 producto 24h Retos de código
17 seminario 6h Solucionario Retos de Código
18 quiz 30min Quiz #2: requizzing
19 cuestionario 15min Auto-evaluación
20 seminario 2h Closing: HTML & CSS

Unidad 02: Creando interacción con JavaScript

30-35 hrs

Es el momento de mezclar la programación con el maquetado para hacer que nuestros productos web estáticos se vuelvan interactivos usando JavaScript.

# Tipo Duración Tópico
00 lectura 30min Opening: Haciendo tu sitio web interactivo
01 lectura 30min Document Object Model (DOM)
02 lectura 30min Browser Object Model (BOM)
03 lectura 30min Modificando el DOM
04 lectura 30min Eventos
05 lectura 30min Atributos data
06 lectura 1h Casos prácticos (videos)
07 quiz 30min Quiz #1
08 seminario 2h Clase de Conceptos
09 taller 2h Clase Práctica
10 práctica` 20h Retos
11 seminario 2h Solucionario Retos de Código
12 quiz 30min Quiz #2: requizzing
13 cuestionario 5min Auto-evaluación
14 seminario 2h Closing: Haciendo tu sitio web interactivo

Unidad 03: Intro a User Experience Design

15-20 hrs

Todo producto web necesita ser diseñado pensando en el usuario. Antes de empezar a crear tu producto final, es importante que conozcas las técnicas de user experience design para que tu producto sea algo que la gente quiera usar.

# Tipo Duración Tópico
00 lectura 30min Opening
01 lectura 15min El equipo de desarrollo
02 lectura 15min UX Design
03 lectura 30min UX vs UI
04 lectura 30min Navegación
05 taller 15min Sketching
06 quiz 30min Quiz #1
07 seminario 2h Clase de Conceptos
08 taller 2h Clase Práctica
09 práctica 8h Retos
10 seminario 2h Solucionario Retos UX
11 quiz 30min Quiz #2
12 cuestionario 5min Auto-evaluación
13 seminario 2h Closing

Unidad 04: Data Dashboard

20 hrs

El reto final de este curso es crear una web interactiva, de complejidad media, que muestre los datos y el perfil de una estudiante de Laboratoria. Debes hacer el UX de tu web, el maquetado y programar su interacción con JavaScript. ¡Vamos con todo!

# Tipo Duración Tópico
01 lectura 1h Organizando mis tareas
02 práctica 14h Data Dashboard
03 taller 2h Code Review (Peer + Teacher)
04 taller 2h Solucionarios
05 taller 1h Retrospectiva

Evaluación técnica

  • Quizzes: 5%
  • Requizzes: 10%
  • Retos
    • Lyft: 5%
    • Freelacer: 5%
    • Laberinto: 10%
    • Trello: 10%
    • Twitter interactivo: 10%
    • Reto UX: 10%
  • Producto final (Data Dashboard): 35%

Contribuidores

  • Lalo Gonzalez
  • Michelle Seguil
  • Lourdez Vilchez
  • Ruth Salvador
  • Emmanuel Orozco
  • Elizabeth Portilla
  • Ivan Medina
  • Rodulfo Prieto

Libros de consulta