Introducción al Desarrollo Front End con HTML, CSS y JavaScript

Electivo de Diseño en Visualidad y Medios | Universidad de Chile

Este es el repositorio de un curso electivo a cargo del profesor FACO.

Aquí se ofrece material para una introducción a HTML, CSS y JavaScript (a veces abreviado JS, nunca Java).

Con esta introducción, cada estudiante podría contar con las bases para desempeñar labores de “Front” o para avanzar a la coordinación de los aportes de UX, UI y Front en el desarrollo colaborativo de sitios y aplicaciones web.

---

Materiales de trabajo

Cada estudiante necesita:

• cuenta personal en GitHub, para:

  • crear un repositorio por cada sesión

  • activar GitHub Pages en cada repositorio creado

• computador durante el horario de clases, con:

  • editor de código fuente: Atom.io o Sublime Text

  • navegador web: Chrome o Firefox. No utilizaremos Safari. Es muy necesario que desactive los traductores en su navegador, porque la traducción automática (y forzada) al español puede complicar un trabajo que se hace, principalmente, en inglés. También es necesario que sepa como "Ver el código fuente de la página", inspeccionar elementos y abrir consola.

---

Clase-a-clase

• Jueves 17 de marzo → sesion_01 → p5.js ✓

• Jueves 24 de marzo → sesion_02 → HTML5, CSS3 y p5.js ✓

• Jueves 31 de marzo → sesion_03 → Evaluación Diagnóstica ✓

• Jueves 7 de abril → sesion_04 → Bootstrap v5.1 ✓

• Jueves 14 de abril → sesion_05 → Bootstrap v5.1 y JavaScript ✓

• Jueves 21 de abril → sesion_06 → Bootstrap v5.1 y datos en JavaScript ✓

• Jueves 28 de abril → sesion_07 → Bootstrap v5.1 y Charts.js ✓

• Jueves 5 de mayo → sesion_08 → Pre-evaluación Nº1 ✓

• Jueves 12 de mayo → sesion_09 → Evaluación Nº1 ✓

• Jueves 19 de mayo → Semana de receso para todos los cursos de la carrera ✓

• Jueves 26 de mayo → sesion_10 → Usuarios, objetivos y contextos de uso específicos ✕

• Jueves 2 de junio → sesion_11 → Antecedentes para el benchmarking y referentes para el moodboard ✕

• Jueves 9 de junio → sesion_12 → Software funcionando sobre documentación extensiva ✕

• Jueves 16 de junio → sesion_13 → Evaluación de accesibilidad, rendimiento y SEO ✕

Se marcan con ✓ las sesiones realizadas presencialmente.

Se marcan con ✕ las sesiones perdidas por paro y toma.

Para cada sesión, la organización se basa en la modalidad de “aula invertida” (flipped classroom en inglés), que permite impartir una clase interactiva y con mayor flexibilidad, adaptándose a la diversidad de aprendizajes. Esta organización es más efectiva cuando cada estudiante:

• adelanta la lectura de la parte teórica; y

• resuelve la exploración práctica en el horario de la clase, publicando resultados con GitHub Pages.

---

Evaluaciones

En el clase-a-clase se marcan 3 evaluaciones. La primera es diagnóstica y las siguientes son sumativas.

La nota final del electivo se obtiene del promedio de las dos evaluaciones sumativas; aunque existe la posibilidad de reemplazo de una de ellas por la evaluación diagnóstica, a condición de obtener nota aprobatoria (superior a 4.0) en las tres instancias.

---

Bibliografía básica

• McCarthy, L., Reas, C., & Fry, B. (2018). Introducción a p5.js. Processing Foundation.
• Meyer, E. A. (2018). CSS pocket reference: Visual presentation for the web (5th ed.). O’Reilly Media.
• Robbins, J. N. (2013). HTML5 Pocket Reference (5th ed.). O’Reilly Media.

Bibliografía complementaria

• Duckett, J. (2014). HTML & CSS. Design and build websites. John Wiley & Sons.
• Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O’Reilly Media.

Recursos en línea

• Lista de reproducción de contenido en Youtube: Code! Programming with p5.js
• Lista de reproducción de contenido en Youtube: Web Demystified
• Sitio Web: JavaScript Para Gatos
• Sitio Web: Primeros pasos en la Web - Aprende sobre desarrollo web | MDN

Conviene sumar a la bibliografía y los recursos aquellas indicaciones que se suman en la sección de "teoría" de cada sesión.