malla-fcfm

EN: Interactive visualization for the degree roadmaps at the Faculty of Physical Sciences and Mathematics of the University of Chile.

ES: Visualización interactiva de mallas académicas de la Facultad de Ciencias Físicas y Matemáticas, Universidad de Chile.

Implementation

• AlpineJS (3.10.5) - For adding interactivity to the pages.
• LeaderLine (1.0.7) - For drawing lines between courses.
• CanvasConfetti (1.6.0) - For the confetti effect.
• SASS - CSS preprocessor.
• jsDelivr - CDN for JS libraries.
• Eleventy - Static site generator.
• Python (and lots of manual data entry).

Agradecimientos (ES)

• Sleivav, por la idea y el diseño inicial de una malla interactiva.
• El CaDCC y compañeros contribuidores de malla-dcc. vmkovacs y PuntitOwO.
• SebaaAguilera por comenzar el esfuerzo de rehacer la malla DCC sin Vue.

Resources & References

• Cover images: Pexels.
• Icons: Uxwing.
• Fonts: Google Fonts.
• Mallas v3: Ingeniería U-Chile
• Mallas v5: Ingeniería U-Chile

Development

Installation & Building

1. Clone the repository.
2. Install Python dependencies with pip install -r requirements.txt. (If you don't have python, install it here)
3. Install JS dependencies with npm install. (If you don't have npm, install it here)
4. npm build to build the project to the docs folder.
5. npm start to run the project locally. This should watch for changes and rebuild the project automatically.

Structure

malla-fcfm/
├─ docs/
├─ src/
│  ├─ css/  # Compiled CSS, do not edit directly
│  ├─ data/
│  │  ├─ raw/       # Raw course data
│  ├─ {xyz}.json    # Processed malla+course data
|  ├─ degrees.json  # List of degrees
|  ├─ settings.json # Dropdown settings
|  ├─ process.py    # Script to process raw data
|  ├─ scrape.py     # Script to get data from UCampus
│  ├─ images/     # Images and icons
│  ├─ includes/
│  │  ├─ {name}.njk    # Reusable components
│  │  ├─ base.njk       # Base page template
│  │  ├─ malla.njk      # Malla page template
│  ├─ js/
│  │  ├─ malla.js   # JS for mallas
│  │  ├─ page.js    # JS for all pages
│  ├─ scss/
│  │  ├─ abstracts/  # Colors, mixins, sizes
│  │  ├─ base/       # Base styles
│  │  ├─ components/ # Reusable components
│  │  ├─ layout/     # Page layout
│  │  ├─ main.scss   # Main stylesheet
│  ├─ {xyz}.njk     # Mallas
│  ├─ index.njk     # Homepage
├─ .eleventy.js    # Eleventy config
├─ package.json    # Project dependencies and scripts
├─ README.md       # You are here!

Contributing data

-- TODO --

Contributing code

HTML: All the HTML is rendered by Eleventy using the Nunjucks templating engine.

Styles: The project uses SASS. I'd recommend you set it up so it watches the .scss files automatically. I use Live Sass Compiler for VSCode.

Code formatting: The project's HTML, CSS and JS is generally formatted with Prettier. I'd recommend you set it up so it formats the files automatically. I use Prettier - Code formatter for VSCode.

Before comitting code:

1. Run npm run clean:windows or npm run clean:linux to clean the docs folder, depending on your OS (macOS can just use npm run clean:linux).
2. Run npm run build to build the project.
3. If you added any python dependencies, run pipreqs . --encoding=utf8 --force to update the requirements.txt file.
4. Make your pull request. Try to describe everything you did (and the reasoning behind it) as best as you can.

TO-DO and Future Versions

Repository and Management

• Switch to Cloudflare pages.
• Move this to-do list to issues.
• Data contribution documentation.
• Credits to contributors for specific mallas.
• Custom Logo/Icon.

Version 1.1: All data

• Automatic data processing for all degrees.
  • Try out OpenCV type solution for image processing.
  • Bot for warning when the official mallas change.
• Source link for mallas + disclaimer that the site is not official.
• Mallas:
  • Civil ECG.
  • Civil HSA.
  • Civil Transporte.
  • Electrica.
  • Industrial.
  • Matemática.
  • Mecánica.
  • Minas.
  • Química.
  • Biotecnología.
  • Geología.
  • Astronomía.
  • Física.
  • Geofísica.

Version 1.2: Themes

• Optimize image file format and sizes.
• Abstract CSS variables for theme colors.
• Figure out course show/hide animations.
• Semester alternating colors.
• Pickable themes:
  • Toquipapel (current theme)
  • Dark theme equivalent
  • Console theme (Green on black, hard lines)
  • Black and white (For printing)
• Print button + Print CSS styles (hide all UI).
• Theme editor and easy sharing (no back-end, just serialized settings).

Previous versions

Beta to Version 1.0 (Release: August 3, 2023)

• Malla: Computación
• Base page.
• Basic course rendering.
• Course credits and code.
• Phase and semester indicators.
• Responsive phases and semesters.
• Prerequisite highlighting.
• Postrequisite highlighting.
• Corequisite highlighting. No longer exists!
• Color code legend. No ambiguous colors needing explanation.
• Fix: Click to keep highlighted.
• Multiple course layer propagation.
• Propagation depth configuration.
• Hide/show 0 credit courses.
• Combine same-code courses into one card. (Whole new data structure needed)
• Fix: On mobile you can select multiple courses
• Leader lines for prerequisites.
• Hide/show leader-lines
• High quality pre/postrequisite highlighting
• Static SPA Routing.
• Degree catalogue.
• Redirects and 404.
• Basic navbar.
• Settings hamburger menu.
• Basic footer.
• Github Icon.
• Fix clamp on number input values.
• Basic single degree data processing.
• Postrequisite processing.
• Webscraping for course data
• SASS for repetitive CSS.
• Typescript for better code quality. (not needed at current scope?)
• Maybe look into a templating engine. (Looked into it, not necessary for the scope of this project)
• Perfect responsive design.
• Perfect color palettes.
• Fix 404 page flashing on load.
• Make "Mallas FCFM" link to home page.
• Fix tap on mobile.
• Fix incompatiability with firefox due to navigation api.
• Fix firefox writing orientation causing sizing issues.
• Fix leader lines being drawn after leaving.
• Set up composition classes and consistent spacing sizes.
• Change to Static Generation v/s SPA with Alpine:
  • Change to NPM package.
  • Install Eleventy.
  • Refactor mallas to statically generate.
  • Make 404 redirect to simulate case insensitive URL.
• JS/HTML/CSS contribution documentation.
  • Folder/file structure documentation.
• Check load times and accesibility data.
• Improve breadcrumb.
• Differentiate unimplemented mallas in index.
• Mark whole semester as taken. Thanks @tampueroc for the suggestion!

Project started Jan 7, 2022.