DESARROLLO WEB Y DISEÑO VISUAL DE INFORMACIÓN

Pontificia Universidad Católica de Chile

Desarrollo web y diseño visual de información (DNO097) es un Optativo de Profundización a cargo del profesor Felipe Alberto Cortez Orellana (FACO).

Descripción:

Partiendo desde el dominio de HTML, CSS y JavaScript, en este curso el estudiantado vinculará gráficos vectoriales escalables (SVG) con formatos ligeros de intercambio de datos (JSON, CSV, XML), para desarrollar, de manera autónoma, tableros de información (dashboards) e infografías digitales, interactivas y dinámicas.

Para ello, se realizarán clases invertidas, simulaciones y aprendizaje basado en problemas.

Los aprendizajes serán evaluados por medio de actividades de aplicación en cada clase, y de manera presencial (este no es un curso remoto ni híbrido).

---

Este curso tiene como requisito la aprobación previa de uno de los siguientes:

• Diseño y nuevos medios (DNO037)
• Infografía digital (DNO075)
• Introducción al desarrollo web desde el diseño (DNO096)
• Pensamiento computacional (DNO1063)
• Programación creativa para diseño (DNO069)

---

Materiales de trabajo

Cada estudiante en este OPR debe disponer de:

• cuenta personal en GitHub, para:

  • crear un repositorio por cada clase

  • activar GitHub Pages en cada repositorio creado

• computador durante el horario de clases, con:

  • conexión a Internet

  • editor de código fuente (Sublime Text o Phoenix Code Editor)

  • 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

Miércoles en módulos 3 y 4, esto es entre 11:00 y 13:30 hrs.

Según Calendario de Actividades Académicas y Estudiantiles 2024, las clases del primer semestre comienzan el día lunes 6 de marzo y finalizan el viernes 15 de julio.

Clase 01 → 06/03/2023 → Datos e información ✓

Clase 02 → 13/03/2023 → Datos e información en gráficas (primera parte) ✓

Clase 03 → 20/03/2023 → Datos e información en gráficas (segunda parte) ✓

Clase 04 → 27/03/2023 → Formatos ligeros de intercambios de datos en la creación de gráficas: CSV ✓

Clase 05 → 03/04/2023 → Formatos ligeros de intercambios de datos en la creación de gráficas: JSON (primera parte) ✓

Clase 06 → 10/04/2023 → Formatos ligeros de intercambios de datos en la creación de gráficas: JSON (segunda parte) ✓

Clase 07 → 17/04/2023 → Gráficas y datos en diseño web responsive: SVG ✓

Clase 08 → 24/04/2023 → Gráficas y datos en diseño web responsive: SVG y HTML ✓

Clase 09 → 01/05/2023 → FERIADO / RECESO DOCENCIA BIMESTRAL (Se suspenden las clases, las evaluaciones quedarán suspendidas entre el lunes 29 de abril y el lunes 6 de mayo inclusive) ✓

Clase 10 → 08/05/2023 → Gráficas y datos en diseño web responsive: SVG, HTML y JavaScript (primera parte) ✓

Clase 11 → 15/05/2023 → Gráficas y datos en diseño web responsive: SVG, HTML y JavaScript (segunda parte) ✓

Clase 12 → 22/05/2023 → Gráficas y datos en diseño web responsive SVG, HTML, CSS y JavaScript (primera parte) ✓

Clase 13 → 29/05/2023 → Gráficas y datos en diseño web responsive SVG, HTML, CSS y JavaScript (segunda parte) ✓

Clase 14 → 05/06/2023 → Diseño y programación: Propuesta de tablero de información (dashboard) o infografía digital, interactiva y dinámica ✓

Clase 15 → 12/06/2023 → Diseño y programación: Datos para la propuesta ✓

Clase 16 → 19/06/2023 → Diseño y programación: Desarollo de la propuesta ✓

Clase 17 → 26/06/2023 → Diseño y programación: Evaluación de la propuesta ✓

Clase 18 → 03/07/2023 → EXÁMENES DE CURSOS MÍNIMOS Y OPTATIVOS ✓

Cada clase se basará en modalidad de “aula invertida”; esto transfiere a cada estudiante la responsabilidad de adelantar la revisión de la "teoría" en el README.md de cada clase. Para que quede más claro, en los primeros README.md el título de Teoría es seguido por un paréntesis (para la casa). Si cada estudiante revisa esta "teoría para la casa", las clases de los miércoles podrán basarse en una práctica que organizará su comprensión, atendiendo a dudas puntuales.

---

Referencias bibliográficas

Mínima

• Bellamy-Royds, A., Cagle, K., & Storey D. (2017). Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
• Murray, S. (2017). Interactive Data Visualization for the Web, 2nd Edition
• Meirelles, I. (2014). La información en el diseño

Complementaria

• Cairo, A. (2008). Infografía 2.0: Visualización Interactiva de Información en Prensa
• Lupton, E. (2019). El Diseño Como Storytelling
• Mijksenaar, P. (2001). Una introducción al Diseño de la información

Referencias en línea

• A Periodic Table of Visualization Methods - https://www.visual-literacy.org/periodic_table/periodic_table.html
• Catálogo de Visualización de Datos - https://datavizcatalogue.com/ES/
• SVG - MDN Web Docs - https://developer.mozilla.org/es/docs/Web/SVG
• WTF Visualizations - https://viz.wtf/

Se agregarán más referencias en el README.md de cada clase.