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
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
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.
- 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
Proyectos
- Visualización de Red de Actores y Actantes - Transformaciones socioespaciales asociadas al extractivismo en el maritorio de Los Vilos(Alumnos: Mia-Sue Carrère, Año de Inicio: 2 023)
- Cuadernograma - Espacialización de ideas en los Cuadernos Fundadores AHJVA(Alumnos: Francisca Oñate, Año de Inicio: 2 023)
- Rastreando actores: Urbanización extractiva en el Norte Chico(Alumnos: Mia-Sue Carrère, Año de Inicio: 2 023)