Imagen Escrita: Espacios de Información

Asignatura(s)	Estudios Independientes: Asignatura Electiva, Imagen Escrita
Año	2023
Tipo de Curso	Otro, Ramo de Posgrado
Profesores	Herbert Spencer
Estudiantes	Francisca Oñate, Mia-Sue Carrère
Palabras Clave	programación, html, css, js, P5js, visualización de información, DOM, wiki
Carreras Relacionadas	Diseño, Magíster

Estudiantes

Francisca Oñate

Mia-Sue Carrère

Introducción

Este curso se basa y avanza sombre en los fundamentos establecidos en Imagen Escrita para trabajar en proyectos individuales que definen la creación de visualizaciones interactivas utilizando datos de la Wiki Casiopea mediante la API y facilitar la programación con la ayuda de ChatGPT.

El modo de trabajo será a partir de proyectos. Vamos a extraer y manipular datos en tiempo real (actualizables de forma independiente en Casiopea u otro), y a representarlos visualmente utilizando la biblioteca p5js. Se hará énfasis en la integración de herramientas como VSCode, GitHub, p5js Editor, y GitHub Desktop para adoptar un flujo de trabajo eficiente y colaborativo, que permita además, publicar los proyectos en la Web. Los contenidos son comunes e independientes a cada proyecto.

Temas

Introducción a las Visualizaciones en HTML
- Importancia y aplicaciones de las visualizaciones de datos.
- Revisión de la Wiki Casiopea y su estructura de datos.
- **Configuración del Entorno de Desarrollo**
- Instalación y configuración de VSCode.
- Introducción a GitHub y GitHub Desktop.
- Configuración del p5js Editor para desarrollo en tiempo real.
Extracción y Manipulación de Datos de la Wiki Casiopea
- Técnicas de web scraping y obtención de datos.
- Preprocesamiento y limpieza de datos.
Introducción a p5js para Visualizaciones
- Fundamentos de p5js y su integración con datos en tiempo real.
- Creación de visualizaciones básicas: gráficos de barras, gráficos circulares, mapas de calor.
Visualizaciones Avanzadas con p5js
- Animaciones y transiciones.
- Interactividad y eventos del usuario.
- Integración con otras bibliotecas y herramientas.
Publicación y Colaboración en GitHub
- Uso de GitHub para versionado y colaboración.
- Publicación de visualizaciones en GitHub Pages.
- Uso de GitHub Desktop para gestión de repositorios.
Proyecto
- Creación de una visualización interactiva avanzada utilizando datos de la Wiki Casiopea.
- Presentación, revisión y refinamiento de la experiencia de lectura y uso

Ejemplos

Ejemplo funcional en el Editor de P5js que toma la consulta por asignaturas (más abajo) y construye elementos HTML
Visualización de las Travesías de Amereida. Esta visualización se utiliza en la página de travesías y, tomando la consulta de la wiki, visualiza los datos de georeferenciación en un mapa.
Sitio de Francisco Méndez Este ejemplo toma los datos a partir de una planilla de Google Spreadsheets y las imágenes se alamcenan en el mismo repositorio de Github.

Consulta Semántica

{{#ask: [[Categoría:Asignatura]][[Currículum::Decreto Académico 37/2017]]OR[[Currículum::Decretos Académicos 35 y 37/2017]]
|?Clave
|?Créditos
|?Ciclo Formativo
|?Área de Estudio
|?Carreras Relacionadas
|format = table
|limit = 999
}}

Esta misma consulta, formateada en la Especial:Zona de pruebas de la API queda en la forma de la siguiente URL:

https://wiki.ead.pucv.cl/api.php?action=ask&format=json&query=%5B%5BCategor%C3%ADa%3AAsignatura%5D%5D%5B%5BCurr%C3%ADculum%3A%3ADecreto%20Acad%C3%A9mico%2037%2F2017%5D%5DOR%5B%5BCurr%C3%ADculum%3A%3ADecretos%20Acad%C3%A9micos%2035%20y%2037%2F2017%5D%5D%7C%3FClave%7C%3FCr%C3%A9ditos%7C%3FCiclo%20Formativo%7C%3F%C3%81rea%20de%20Estudio%7C%3FCarreras%20Relacionadas%7Cformat%20%3D%20table%7Climit%20%3D%20999&api_version=2&utf8=1

Clase 1: Miércoles 16 de Agosto

Video de la clase / taller: Ver en Youtube

En la primera clase cubrimos muchas bases que iremos reforzando y trabajando de manera iterativa. Como demostración hice un repositorio accesible aquí y, a partir de este, publicamos un sitio web

Enlaces y herramientas relevantes

HTML

HTML W3Schools: Tutorial completo y referencia para aprender HTML.
Mozilla Developer Network - HTML: Documentación extensa y guías sobre HTML por Mozilla.
FreeCodeCamp - HTML: Cursos interactivos gratuitos sobre HTML.

CSS

CSS-Tricks: Consejos, trucos y tutoriales para aprender CSS.
W3Schools - CSS: Tutorial completo y referencia para aprender CSS.
Sass: Un preprocesador de CSS que ayuda a escribir CSS más mantenible.

GIT (Github)

GitHub: Plataforma principal para el control de versiones y colaboración.
Git: Sitio oficial de Git con documentación completa.
Atlassian - Git Tutorials: Tutoriales detallados para aprender Git.

p5.js Editor

p5.js: Biblioteca JavaScript para la programación creativa.
p5.js Web Editor: Editor en línea para p5.js.

Visual Studio Code (VS Code)

Visual Studio Code: Editor de código fuente desarrollado por Microsoft.
Marketplace: Extensión y temas para Visual Studio Code.

Por supuesto, aquí tienes una selección de enlaces adicionales enfocados en la documentación de Mozilla Developer Network (MDN) y el uso del inspector de navegador.

MDN (Mozilla Developer Network)

MDN Web Docs: Documentación extensa y guías sobre tecnologías web, incluyendo HTML, CSS, y JavaScript.
MDN - CSS: Documentación detallada y ejemplos sobre CSS.
MDN - HTML: Documentación detallada y ejemplos sobre HTML.
MDN - JavaScript: Documentación completa sobre JavaScript, ideal para el desarrollo web.

Uso del Inspector de Navegador

MDN - Inspector de Páginas: Guía sobre cómo usar el inspector de páginas en Firefox.
Chrome DevTools: Documentación sobre las herramientas de desarrollo de Google Chrome, incluyendo el inspector.
Video Tutorial - Chrome DevTools: Video tutorial sobre cómo usar las herramientas de desarrollo en Chrome.
Video Tutorial - Firefox Developer Tools: Video tutorial sobre cómo usar las herramientas de desarrollo en Firefox.

Clase 2: Miércoles 30 de Agosto

Video de la clase / taller: Ver en Youtube

Proyectos