← Retour au portfolio

Rapport – Vidéo interactive

Vidéo HTML5, sous-titres VTT et interactivité avec JavaScript

Liens

Objectifs

L’objectif de ce dispositif était de montrer à des personnes qui ne maîtrisent pas du tout les outils de communication visuelle qu’il est possible de créer rapidement et simplement un flyer pour un événement. L’idée est de rendre visible qu’avec un outil grand public comme Canva, on peut produire des supports de communication propres et lisibles sans compétences graphiques avancées.

D’un point de vue pédagogique, la vidéo vise à dédramatiser la création de ce type d’affiche et à expliciter les grandes étapes : choisir un modèle, adapter le texte, modifier les couleurs et les éléments graphiques, puis préparer le téléchargement. Elle s’inscrit dans une logique d’outillage : montrer concrètement comment utiliser un logiciel simple pour concevoir des supports de communication efficaces dans un contexte de formation.

Design

Le design de cette page reste volontairement cohérent avec celui de mes autres exercices. J’utilise le même CSS de base: une mise en page centrée, des cartes blanches avec des bords arrondis, un fond gris très clair. L’objectif est que l’ensemble du portfolio donne l’impression d’un même environnement, avec une identité visuelle stable d’une page à l’autre.

Pour cette page en particulier, j’ai simplement adapté certains éléments: la carte vidéo au centre, puis une rangée de boutons arrondis qui permettent de naviguer vers différents moments du tutoriel. Le style reste très épuré, avec peu de couleurs et des effets d’ombre légers.

Production

Pour la production, j’ai d’abord réfléchi au type de contenu que je voulais montrer. Je souhaitais partir d’une activité concrète, utile dans ma pratique professionnelle, où je crée régulièrement des visuels pour communiquer avec différents publics. J’ai donc choisi de travailler sur la création d’un flyer pour un événement, en partant d’un modèle existant dans Canva que je personnalise étape par étape.

J’ai réalisé une capture d’écran de mon utilisation de Canva, en enregistrant ma voix pour expliquer les différentes actions. L’idée était de garder un ton simple, comme si j’accompagnais quelqu’un qui découvre l’outil pour la première fois.

La partie technique m’a demandé un peu de temps, notamment pour la gestion des sous-titres au format VTT. J’ai dû comprendre la structure exacte du fichier (temps de début et de fin, syntaxe précise, placement) et faire plusieurs essais avant d’obtenir un résultat fonctionnel. Enfin, j’ai ajouté des boutons en JavaScript qui permettent de naviguer directement vers certains moments de la vidéo, ce qui ajoute une forme d’interactivité par rapport à une simple lecture linéaire.

Auto-évaluation

Cet exercice m’a permis de mieux comprendre le fonctionnement de la vidéo HTML5, des sous-titres VTT et des interactions possibles avec JavaScript. Au début, je me sentais un peu perdue entre les différents formats (mov, mp4, webm) et les contraintes techniques des navigateurs, mais en avançant pas à pas, j’ai réussi à obtenir une intégration stable.

Je vois aussi une progression par rapport aux exercices précédents. Je prends plus rapidement en main la structure d’une page, je réutilise mon CSS existant et je réfléchis davantage à la cohérence globale du portfolio. Il me reste des aspects à améliorer, mais pour ce travail, je suis satisfaite d’avoir un dispositif fonctionnel, clair et fidèle à l’objectif de départ.

Bibliographie

Ressources

Utilisation de tutoriels en ligne et de la documentation du cours pour comprendre l’intégration d’une vidéo, des sous-titres VTT et des événements JavaScript. Canva a été utilisé comme outil central pour la création du flyer présenté dans la vidéo.