Skip to content
Narration Interactive

Module 2 - Fondamentaux techniques

Objectif du module

Section titled “Objectif du module”

Maîtriser les fondamentaux techniques nécessaires pour créer des expériences web interactives. Ce module vous donne les outils Svelte essentiels pour réaliser vos idées créatives.

À la fin de ce module, vous saurez :

  • Architecturer une expérience narrative interactive
  • Gérer un état complexe avec les stores Svelte
  • Créer des interactions avancées (drag, gestes, clavier)
  • Polir vos expériences avec animations, sons et effets visuels
  • Utiliser la bibliothèque de recettes de code

Philosophie du module

Section titled “Philosophie du module”

Apprendre en créant. Pas de cours magistral de syntaxe ligne par ligne. Vous construirez deux projets complets qui couvrent les concepts essentiels.

Les recettes de code sont introduites progressivement. Vous apprendrez à les adapter à vos besoins plutôt qu’à tout coder from scratch.

Contenu du module

Section titled “Contenu du module”

1. Livre dont vous êtes le héros

Section titled “1. Livre dont vous êtes le héros”

Objectif : Architecturer une narration interactive avec embranchements.

Concepts couverts :

  • Navigation entre états narratifs
  • Stores Svelte pour état global
  • Architecture en modules
  • Choix qui impactent la narration

Livrable : Histoire à embranchements fonctionnelle (3 chemins, 5+ états).

2. Interactions avancées

Section titled “2. Interactions avancées”

Objectif : Maîtriser les interactions au-delà du clic.

Concepts couverts :

  • Drag and drop
  • Détection de gestes (shake, swipe, long-press)
  • Événements clavier et combos
  • Input utilisateur (texte, sliders, choix)

Recettes introduites :

  • Recette drag & drop
  • Recette détection de gestes
  • Recette clavier et combos

3. Animations et feedback

Section titled “3. Animations et feedback”

Objectif : Polir l’expérience avec animations et effets.

Concepts couverts :

  • Transitions Svelte (fade, slide, fly)
  • Animations CSS personnalisées
  • Sons et audio réactif
  • Particules et effets visuels

Recettes introduites :

  • Recette animations et transitions
  • Recette sons et audio
  • Recette particules et effets

4. Introduction à la bibliothèque de recettes

Section titled “4. Introduction à la bibliothèque de recettes”

Objectif : Comprendre comment utiliser et adapter les recettes.

Structure d’une recette :

  • Ce que ça fait
  • Quand l’utiliser
  • Le code (minimal et fonctionnel)
  • Comment personnaliser
  • Pièges courants

Les 15 recettes prioritaires :

Fondations (3) :

  1. Composant interactif de base
  2. Afficher une liste dynamique
  3. Store global (état partagé)

Interactions (4) : 4. Drag and drop 5. Détection de gestes 6. Clavier et combos 7. Input utilisateur

Feedback et polish (3) : 8. Animations et transitions 9. Sons et audio réactif 10. Particules et effets visuels

Persistance et partage (2) : 11. Sauvegarde locale (LocalStorage) 12. QR Codes (génération et scan)

Avancé (3) : 13. Scroll narratif 14. Timer et événements temporels 15. Génération procédurale simple

Résultats attendus

Section titled “Résultats attendus”

À la fin de ce module :

  • ✅ Livre dont vous êtes le héros fonctionnel
  • ✅ Maîtrise des stores et navigation d’états
  • ✅ Interactions avancées implémentées
  • ✅ Animations et sons intégrés
  • ✅ Capacité à utiliser et adapter les recettes
  • ✅ Confiance technique pour démarrer votre projet

Méthodologie de travail

Section titled “Méthodologie de travail”

Format des exercices :

  1. Démonstration du concept
  2. Construction guidée ensemble
  3. Expérimentation personnelle
  4. Partage et feedback

Utilisation de l’IA :

  • Encouragée pour comprendre des erreurs
  • Encouragée pour générer du code boilerplate
  • Mais : vous devez pouvoir expliquer chaque ligne de code générée

Règle d’or :

Si vous ne pouvez pas expliquer ce que fait le code que l’IA vous a donné, ne l’utilisez pas.

Ressources

Section titled “Ressources”

Documentation :

Recettes :

Aide :

Prochaines étapes

Section titled “Prochaines étapes”

Une fois ce module complété, vous passerez au Module 3 - Idéation et prototypage où vous définirez votre projet personnel et validerez sa faisabilité technique.