Liens
Présentation Interactive - Le Shawarma Syrien
Accéder à la présentation Reveal.js complète avec quiz, animations et interactions
Feuille de styles CSS personnalisée
Fichier CSS contenant tous les styles de la présentation
Code JavaScript interactif
Script contenant le quiz, le générateur aléatoire et les animations
Objectifs
À quoi sert ce dispositif ?
Cette présentation interactive a pour but de faire découvrir le Shawarma syrien, un plat emblématique de la cuisine levantine. Elle combine des informations historiques, culturelles et culinaires dans un format engageant et interactif.
Public cible
- Étudiants en gastronomie/ personnes ordinaires souhaitant découvrir les cuisines du monde
- Curieux de culture intéressés par le patrimoine culinaire du Moyen-Orient
- Cuisiniers amateurs voulant apprendre à préparer un shawarma authentique
- Grand public à la recherche d'une expérience d'apprentissage interactive et ludique
Cadre d'utilisation
La présentation peut être utilisée dans plusieurs contextes :
- En libre accès sur internet pour un apprentissage autonome
- En accompagnement d'un cours de cuisine ou de culture générale
- Lors d'événements culturels sur la gastronomie du Moyen-Orient
Connaissances préalables
Aucune connaissance préalable n'est requise. La présentation est conçue pour être accessible à tous, avec un niveau de langage simple et des explications claires.
Objectifs d'apprentissage
À l'issue de cette présentation, l'utilisateur sera capable de :
- Expliquer l'origine et l'histoire du shawarma syrien
- Identifier les 7 épices traditionnelles syriennes
- Décrire les étapes de préparation d'un shawarma authentique
- Différencier le shawarma des autres plats similaires (döner, gyros)
- Reconnaître les spécialités régionales (Damas, Alep, Homs)
Design
Design pédagogique
La présentation suit une progression logique allant du général au particulier :
- Introduction et contextualisation : présentation du sujet et des objectifs
- Connaissances historiques : timeline interactive sur l'origine du plat
- Connaissances techniques : ingrédients, épices, préparation
- Comparaison et approfondissement : différences avec d'autres plats similaires
- Évaluation formative : quiz interactif pour vérifier les acquis
- Synthèse : résumé des points clés
Interactions principales
| Slide | Type d'interaction | Objectif pédagogique |
|---|---|---|
| Épices syriennes | Survol (hover) | Découverte active des 7 épices |
| Étapes de préparation | Clic pour révéler | Apprentissage séquentiel |
| Quiz interactif | Questions à choix multiples | Évaluation formative avec feedback |
| Animation cuisson | Contrôle de température | Visualisation du processus |
| Générateur aléatoire | Génération de recettes | Créativité et réinvestissement |
| Villes célèbres | Clic pour informations | Exploration des variantes régionales |
Design graphique
L'interface utilise une palette de couleurs chaudes (marron, orange, beige) évoquant les épices et la cuisine orientale. Les choix visuels incluent :
- Polices : Amiri (inspiration arabe) pour les titres, Poppins (moderne) pour le texte
- Icônes : Font Awesome pour une navigation intuitive
- Animations : Animate.css pour des transitions fluides et engageantes
- Images : Photographies haute qualité de shawarma authentique
Sobriété numérique
Considérations écologiques :
- Utilisation de CDN pour les bibliothèques (mise en cache optimisée)
- Images optimisées au format AVIF et WebP (compression efficace)
- CSS et JavaScript minifiables pour la production
- Pas de requêtes serveur inutiles (tout est côté client)
Production
Étapes de développement
- Conception du contenu : recherche sur le shawarma syrien, structuration en 19 slides
- Mise en place de Reveal.js : intégration du framework de présentation via CDN
- Création de la structure HTML : organisation des slides avec balisage sémantique
- Développement du CSS personnalisé : styles pour le thème shawarma, animations, responsive
- Programmation JavaScript : quiz, générateur aléatoire, interactions
- Tests et ajustements : vérification de l'affichage et des interactions
Réponse aux contraintes techniques
| Contrainte | Solution implémentée | Localisation |
|---|---|---|
| Reveal.js | Framework principal de présentation | CDN dans index.html |
| CSS externe | Animate.css pour les animations | CDN + css/style.css |
| JavaScript externe | Font Awesome pour les icônes | CDN |
| Structure de contrôle | if/else dans le quiz et la température | js/script.js lignes 70-85, 180-195 |
| Boucle | forEach et for loops | js/script.js lignes 15-20, 95-105 |
| Élément aléatoire | Générateur de shawarma + questions mélangées | js/script.js lignes 110-160 |
| Animation | Broche rotative CSS + Animate.css | css/style.css section Cooking Animation |
| Licence CC | BY-NC-SA 4.0 | Slide 18 |
| Liste third-party | Slide dédiée avec liens | Slide 17 |
Justification de l'utilisation des CDN
Certaines ressources sont chargées via CDN pour les raisons suivantes :
- Google Fonts : API spécifique nécessitant un hébergement Google pour l'optimisation du chargement des polices
- Font Awesome : Bibliothèque volumineuse (plusieurs MB) avec nombreux fichiers de polices, complexe à héberger localement
- Reveal.js : Mise en cache optimisée sur CDN, utilisé par de nombreux sites
- Animate.css : Petite bibliothèque bénéficiant du cache CDN partagé
Difficultés rencontrées et solutions
- Problème : Slides trop grandes à 100% de zoom → Solution : Réduction des tailles de police et des éléments dans le CSS
- Problème : Quiz ne se réinitialisant pas → Solution : Fonction
initQuiz()appelée au chargement - Problème : Animation de la broche saccadée → Solution : Utilisation de
transform: rotateY()avec CSS natif
Auto-évaluation
Points forts
- Contenu pédagogique riche et structuré
- Nombreuses interactions variées (quiz, survol, clic, slider)
- Design graphique cohérent avec le thème
- Quiz avec feedback immédiat et score
- Générateur aléatoire créatif et ludique
- Animation de cuisson originale
- Responsive design fonctionnel
- Code bien organisé (HTML/CSS/JS séparés)
Limites
- Dépendance aux CDN (pas entièrement autonome)
- Pas de sauvegarde du score du quiz
- Animations parfois lourdes sur mobile
- Contenu uniquement en français
- Pas d'accessibilité optimale (lecteurs d'écran)
- beaucoup d'installation et démarche à faire
Améliorations possibles
- Ajouter une version anglaise
- Intégrer une vidéo de préparation
- Stocker le score en localStorage
- Ajouter plus de questions au quiz
- Améliorer l'accessibilité (ARIA)
- Héberger les ressources localement
- enregistrement des réponse (backend)
Analyse des éléments externes
Reveal.js s'est avéré être un excellent choix pour ce projet. Le framework est bien documenté et offre de nombreuses fonctionnalités natives (navigation, transitions, arrière-plans). La courbe d'apprentissage est raisonnable et l'intégration de code JavaScript personnalisé est simple.
Animate.css a permis d'ajouter rapidement des animations professionnelles sans avoir à écrire du CSS complexe. Les classes prédéfinies (fadeIn, zoomIn, flipInX) sont intuitives et bien calibrées.
Font Awesome enrichit considérablement l'interface avec des icônes expressives. L'utilisation est simple mais la dépendance au CDN reste un inconvénient pour un usage hors ligne.
Ressenti personnel
Cet exercice m'a permis d'approfondir ma maîtrise de JavaScript, notamment pour la création d'interactions complexes comme le quiz et le générateur aléatoire. La combinaison de Reveal.js avec du code personnalisé offre une grande flexibilité pour créer des présentations véritablement interactives, bien au-delà des possibilités de PowerPoint.
Bibliographie
Ressources techniques
https://developer.mozilla.org/fr/docs/Web/JavaScript
Référence pour les fonctionnalités JavaScript utilisées
Ressources pédagogiques EduTechWiki
Aspects théoriques et pratiques pour l'utilisation de bibliothèques externes
Techniques d'animation pour le web
Ressources
Images utilisées
Image de shawarma au poulet
Source : Freepik - Licence Freepik
Image de shawarma au bœuf
Source : Freepik - Licence Freepik
Image supplémentaire de shawarma
Source : Collection personnelle / Usage éducatif
Bibliothèques et frameworks (Third-Party Code)
| Nom | Version | Licence | URL |
|---|---|---|---|
| Reveal.js | 4.5.0 | MIT | revealjs.com |
| Animate.css | 4.1.1 | MIT | animate.style |
| Font Awesome | 6.4.0 | Font Awesome Free | fontawesome.com |
| Google Fonts | - | SIL Open Font | fonts.google.com |
Licence de la présentation
Creative Commons BY-NC-SA 4.0
Cette présentation est partagée sous licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.