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

Este es el repositorio de un curso electivo de Diseño, mención visualidad y medios, en la Universidad de Chile. Este electivo está a cargo del profesor FACO, quien ofrece una introducción a HTML, CSS y JavaScript (a veces abreviado JS, nunca Java).

Mediante esta introducción, cada estudiante podrá adquirir las bases necesarias para comenzar a aportar, desde el desarrollo Front End, a equipos multidisciplinarios dedicados al diseño de puntos de contacto digitales.

---

Materiales de trabajo

Cada estudiante necesitará:

• cuenta personal en GitHub, para:

  • crear un repositorio por cada sesión

  • activar GitHub Pages en cada repositorio creado

  • hacer login en el editor de p5.js en las primeras clases

• computador durante el horario de clases, con:

  • conexión a Internet

  • 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.

  • editor de código fuente: sea que esté instalado (ej. Sublime Text) en su computador o entre sus favoritos en el navegador (ej. Phoenix Code Editor)

---

Clase a clase

Según el calendario académico del año 2023, las actividades académicas de primer semestre en toda la Universidad de Chile deberán realizarse considerando las siguientes fechas:

• Inicio: Lunes 13 de marzo.

• Receso: Entre lunes 1 y viernes 5 de mayo.

• Vacaciones de invierno: Entre lunes 24 de julio y viernes 4 de agosto.

Con tales fechas, las tres carreras en la Facultad de Arquitectura y Urbanismo (FAU) distribuyen las actividades docente para proteger tiempos de dedicación exclusiva para algunos cursos. Por tal razón, las habituales 18 sesiones de asignaturas semestrales se transforman en 15, con inicios y cierres en desfase.

Las 15 sesiones del electivo de Introducción al Desarrollo Front End con HTML, CSS y JavaScript se dividen de la siguiente manera:

Unidad I: Bocetos de introducción a la programación

• Jueves 16 de marzo → sesion_01 → p5.js (una biblioteca de JavaScript)

• Jueves 23 de marzo → sesion_02 → HTML, CSS y p5.js (una biblioteca de JavaScript)

• Jueves 30 de marzo → sesion_03 → Evaluación de cierre Nº1

Unidad II: Tecnologías fundamentales para la construcción de páginas Web

• Jueves 6 de abril → sesion_04 → HTML y CSS con Bootstrap v5 (1 de 2)

• Jueves 13 de abril → sesion_05 → HTML y CSS con Bootstrap v5 (2 de 2)

• Jueves 20 de abril → sesion_06 → JavaScript con Bootstrap v5

• Jueves 27 de abril → sesion_07 → Evaluación de cierre Nº2

• Jueves 4 de mayo → Pausa Primer Semestre

Unidad III: Herramientas para el diseño/desarrollo ágil de sitios y aplicaciones Web

• Jueves 11 de mayo → sesion_08 → Consideraciones de usabilidad desde la primera definición del proyecto

• Jueves 18 de mayo → sesion_09 → Análisis, interpretación y organización diferenciada de antecedentes y referentes

• Jueves 25 de mayo → sesion_10 → Especificación del desempeño del diseño desde representaciones esquemáticas

• Jueves 1 de junio → sesion_11 → Desde el anteproyecto a la implementación de modo iterativo e incremental

• Jueves 8 de junio → sesion_12 → Feriado Religioso.

• Jueves 15 de junio → sesion_13 → Pre-evaluación de cierre Nº3

• Jueves 22 de junio → sesion_14 → Sin clases sincrónicas (trabajo autónomo)

• Jueves 29 de junio → sesion_15 → Evaluación de cierre Nº3

Para cada sesión, exceptuando las tres de evaluación de cierre, corresponde considerar la modalidad de "aula invertida" (flipped classroom en inglés).

Esta modalidad coincide con la nota que pudieron ver al momento de inscribir el curso: Los electivos tienen una dedicación para los estudiantes de 4,5 horas en total: 3 horas en aula y 1,5 horas de trabajo autónomo.

En este electivo, las 3 horas en aula se pueden hacer más dialogantes y prácticas cuando cada estudiante

• usa 1,5 horas indirectas (autónomas) para la revisión del contenido teórico;

• demuestra el dominio del contenido teórico comenzando las 3 horas directas (en aula); y

• resuelve la exploración práctica presencial, publicando resultados con GitHub Pages al final de las 3 horas directas (en aula).

---

Evaluaciones

Se consideran 2 calificaciones derivadas de los puntajes acumulados clase a clase; una por puntos acumulados de interrogaciones (evaluación teórica; resultado de la dedicación a horas indirectas) y otra por puntos acumulados de resoluciones de exploración práctica (evaluación práctica; resultado de la dedicación a horas directas).

Se consideran 3 calificaciones con pauta de cotejo al cierre para una de las tres unidades (evaluaciones de cierre 1, 2 y 3). Estas evaluaciones se desarrollan como pruebas presenciales donde la asistencia es obligatoria. La aceptación de certificados médicos (los cuales deben estar visados por el SEMDA) es discrecional del profesor.

Con las 5 calificaciones promediadas se obtiene la nota final del electivo.

---

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: HTML & CSS - W3C
• Sitio Web: JavaScript Para Gatos
• Sitio Web: Primeros pasos en la Web | MDN