Incorporer des graphes interactifs dans une page web

Introduction

De nombreux outils informatiques permettent de créer des animations graphiques. Insérer ces dernières dans une page web écrite en HTML5 va permettre à un utilisateur d'y accéder facilement, sans avoir besoin de logiciels spécifiques pour les lire.

HTML5 est doté de nouveaux éléments qui vont permettre de structurer les pages web. Il possède également de nouvelles balises dont <canvas> dédiée au dessin.

Cette balise permet de dessiner des points, segments, cercles, ... et donc de tracer très rapidement des courbes. La mise en place de curseur offre à l'utilisateur la possibilité d'interagir sur le tracé et d'étudier l'influence d'un paramètre.

L'utilisation de <canvas> nécessite de programmer en javascript les "actions" attendues. Vous trouverez dans cette ressource pour chaque partie l'écriture d'une partie html5 et d'une partie javascript.

Il est conseillé de travailler sous le navigateur Google Chrome afin de bénéficier de fonctionnalités pour le moment non présentes sur d'autres navigateurs.

Vous pourrez sélectionner et copier le code généré puis le coller dans un fichier vide avec un éditeur de texte du style Notepad. Votre fichier devra obligatoirement porter l'extension .html

Les pages web créées pourront être déposées sur un serveur, dans une plate-forme d'enseignement. Elles pourront également être intégrées dans d'autres pages web, comme c'est le cas pour cette ressource.

exemple d'introduction
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimerRéalisé avec Scenari (nouvelle fenêtre)