udl Svelte Themes

Udl

An interactive and professional explorer designed to facilitate the application of Universal Design for Learning (UDL) in educational environments. This tool allows navigating through the principles, guidelines, and checkpoints of the UDL 3.0 model, offering practical examples and design options for teachers.

🧠 UDL Browser

An interactive and professional explorer designed to facilitate the application of Universal Design for Learning (UDL) in educational environments. This tool allows navigating through the principles, guidelines, and checkpoints of the UDL 3.0 model, offering practical examples and design options for teachers.


✨ Key Features

🌍 Multilingual by Default

Full support for 4 simultaneous languages, allowing language switching on the fly without losing context:

  • Spanish (es)
  • English (en)
  • Basque (eu)
  • Latin (la)

πŸ“– Complete Interactive Model

  • Network Visualization: Clear representation of Affective, Recognition, and Strategic networks.
  • Professional Hierarchy: Fluid navigation from Principles to specific Considerations.
  • Activity Bank: Integration of real-world examples based on curricular activities (Math, etc.).
  • Interactive Web Tools: Support for external tools (GeoGebra, ClassCraft, etc.) integrated into UDL adaptations, including links and logos.

πŸ–¨οΈ High-Density PDF Optimization

Print system designed to generate professional documents:

  • Landscape Model: The complete model compressed into a single A4 sheet with minimal margins (3mm) and maximized scale (0.98).
  • Detail Sheets: Detailed documents that flow across multiple pages if necessary, featuring decorative icons and header protection.

πŸ—οΈ Data-Driven Architecture

  • Dynamic Loading: Activities are automatically loaded from JSON files using import.meta.glob.
  • Flexible Structure: Support for multiple paragraphs and optional notes in translations.

πŸš€ Technologies

This project is built with a modern stack focused on speed and user experience:


πŸ› οΈ Installation and Development

  1. Clone the repository:

    git clone https://github.com/your-user/udl-browser.git
    cd udl-browser
    
  2. Install dependencies:

    npm install
    
  3. Run in development mode:

    npm run dev
    
  4. Build for production:

npm run build

πŸ“‚ Data Organization

Model and activity data are centralized for easy editing:

  • src/data/json/activities/: Folder for new activity examples (in JSON format).
  • src/data/udl-core.json: Main UDL model structure (Principles and Guidelines).
  • src/stores/udlData.ts: Indexing and search logic.

Inspiration

The organization of principles, guidelines, and considerations follows the Universal Design for Learning (UDL) model from CAST UDL Guidelinesβ„’ v3.0, Β© CAST, Inc. 2024.
All textual content and examples are original, and the visual style has been adapted.


πŸ“„ License

This project is available under the MIT license. Feel free to use and adapt it for your educational needs.

πŸ‘₯ Author

Developed by Daniel Losada


Developed with ❀️ for the educational community.

Top categories

Loading Svelte Themes