Ressources pédagogiques

Vue d’ensemble

Cette page rassemble des ressources pédagogiques externes pour compléter vos apprentissages dans les différents cours.

📚 Pour MM2B - Sites Web Dynamiques 1

Apprendre JavaScript

Eloquent JavaScript

URL: https://eloquentjavascript.net/
Type: Livre interactif gratuit
Niveau: Débutant à intermédiaire
Ce qui est utile: Livre complet sur JavaScript avec exercices interactifs intégrés. Excellente ressource pour approfondir les concepts vus en cours.

Frameworks CSS

Pico CSS

URL: https://picocss.com/
Type: Framework CSS minimaliste
Niveau: Débutant
Ce qui est utile: Framework CSS sémantique et léger. Alternative minimaliste à Bootstrap pour apprendre les concepts CSS sans surcharge.

Animation et UX

The Ultimate Guide to Proper Use of Animation in UX

URL: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Type: Article complet
Niveau: Intermédiaire
Ce qui est utile: Guide complet sur l’utilisation des animations en UX. Directement pertinent pour le module Interactivité.

Outils d’apprentissage interactifs

Netnet.studio

URL: https://netnet.studio/?tutorial=what-is-code
Type: IDE pédagogique interactif
Niveau: Débutant
Ce qui est utile: Environnement de développement web avec tutoriels intégrés. Parfait pour comprendre le code en le visualisant en temps réel.

🎬 Pour MM3B & RTMF1M - Récits Interactifs

Cours de référence

Golan Levin - Interactive Art & Computational Design

URL: http://golancourses.net/2022f/
Type: Syllabus de cours universitaire
Niveau: Avancé
Ce qui est utile: Cours complet sur l’art interactif et le design computationnel. Exercices, références, lectures recommandées.

Nick Briz - Web Art Course

URL: https://www.youtube.com/watch?v=0DZ0wBjFKg4
Type: Cours vidéo
Niveau: Intermédiaire
Ce qui est utile: Introduction à l’art web par un artiste reconnu. Vision historique et technique.

Zach Lieberman - Creative Coding

URL: http://zach.li/
Type: Portfolio et ressources
Niveau: Tous niveaux
Ce qui est utile: Portfolio inspirant + ressources sur le creative coding.

Alternative UI et Game Design

Abstract Machine - Boot Camp Game Design

URL: https://abstractmachine.net/fr/posts/boot-camp-game-design
Type: Workshop/Article
Niveau: Intermédiaire
Ce qui est utile: Approche alternative du design de jeu. Interfaces non conventionnelles et création expérimentale.

Outils de création

Bitsy

URL: https://ledoux.itch.io/bitsy
Type: Outil de création de jeux
Niveau: Débutant
Ce qui est utile: Créer des jeux narratifs minimalistes sans compétences techniques avancées. Excellent pour apprendre la narration interactive. Voir aussi galerie/outils-creatifs.

Théorie

Bande dessinée et mémoire

URL: https://books.openedition.org/editionscnrs/20613
Type: Article académique
Niveau: Avancé
Ce qui est utile: Analyse théorique de la narration en bande dessinée, applicable aux récits interactifs.

🌐 Collections d’inspiration

Annuaires de sites

Lowww Directory

URL: https://lowww.directory
Type: Annuaire de sites low-tech
Ce qui est utile: Collection de sites web minimalistes et éco-responsables. Inspiration pour design simple et efficace.

Httpster

URL: https://httpster.net
Type: Galerie de sites minimalistes
Ce qui est utile: Inspiration pour design épuré et interfaces élégantes.

Personal Sites

URL: https://personalsit.es/
Type: Collection de sites personnels
Ce qui est utile: Exemples de portfolios et sites créatifs. Inspiration pour projets personnels.

Portfolios de designers web

Prabhav Khandelwal

URL: https://prabhavkhandelwal.com/work/
Type: Portfolio
Ce qui est utile: Exemples de projets web bien documentés.

Dan Devri - Teaching Resources

URL: https://www.dandevri.es/teaching
Type: Ressources pédagogiques
Ce qui est utile: Ressources d’un enseignant web. Syllabus, exercices, méthodes.

🔧 Outils techniques

Développement

Canvas Video Manipulation (MDN)

URL: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
Type: Documentation technique
Niveau: Intermédiaire
Ce qui est utile: Tutoriel officiel MDN sur la manipulation vidéo avec Canvas. Pertinent pour projets avancés MM3B/RTMF1M.

Codapi

URL: https://codapi.org/
Type: Outil d’exécution de code
Ce qui est utile: Permet d’intégrer du code exécutable dans des documentations. Utile pour créer des tutoriels.

Analyse et débogage

Unfurl - URL Analysis

URL: https://dfir.blog/unfurl/
Type: Outil d’analyse d’URLs
Niveau: Avancé
Ce qui est utile: Analyser et comprendre la structure des URLs. Utile pour data web et tracking.

⚠️ Contre-exemples (ce qu’il ne faut PAS faire)

Mauvaise UX

BNF Salle Ovale - Boussole

URL: https://salleovale.bnf.fr/boussole/
Type: Exemple de mauvaise UX
Ce qui ne fonctionne pas: Interface inutilisable, navigation confuse, objectifs peu clairs
Pourquoi c’est utile de l’analyser: Comprendre les erreurs UX courantes pour les éviter dans vos projets.

Leçons à en tirer:

Navigation doit être intuitive
L’utilisateur doit toujours savoir où il est
Les objectifs doivent être clairs dès le début
L’interactivité doit servir un propos, pas être gratuite

📖 Ressources complémentaires

Par cours

MM2B:

Eloquent JavaScript - Apprentissage JS
Pico CSS - Framework minimaliste
Guide Animation UX - Animations
Netnet.studio - IDE pédagogique

MM3B:

Golan Levin Courses - Art interactif
Nick Briz - Web art
Bitsy - Création de jeux narratifs
Abstract Machine - Game design alternatif

RTMF1M:

Toutes les ressources ci-dessus
Galerie d’œuvres complète - 85+ exemples
Structures narratives - Guide théorique

Aller plus loin

Galerie d’œuvres - 85+ œuvres interactives analysées
Structures narratives - Guide complet des architectures de récits
Collections d’inspiration - Annuaires et portfolios

← Retour à la bibliothèque