» Introduction
Historique du graphisme et du SVG.
Les graphiques vectoriels. Le positionnement du SVG.
Le SVG, un langage qui réconcilie deux modes de représentation des informations : le vecteur et le point.
Gérer la compatibilité des navigateurs.
» Les bases du SVG
Le SVG, un langage de description très riche.
Les éléments essentiels qui permettent de partir dans la bonne direction, en évitant de se disperser.
Inclusion du SVG dans une page HTML.
Systèmes de coordonnées.
Introduction aux primitives graphiques.
Introduction aux transformations des objets graphiques.
Introduction à la mise en forme des objets graphiques.
Travaux pratiques
Créer quelques objets SVG et les inclure dans une page HTML simple. Différents cas d'applications.
» Interactions entre SVG, HTML et serveur web
Une nécessité pour les interfaces utilisateur : définir une chaîne d'interactions entre les composants d'une application.
Ajouter des événements aux objets graphiques.
Présentation du JavaScript SVG.
Accès au DOM - Document Object Model.
Principes de communication de HTML vers SVG.
Principes de communication de SVG vers HTML.
Communiquer avec un serveur web.
Travaux pratiques
Mise en oeuvre d'interactions entre un ou plusieurs objets SVG et un champ de formulaire d'une page HTML simple. Générer du SVG avec du PHP.
» Techniques de base pour les objets d'interface
Les points clés de la définition des objets graphiques.
Conversion de systèmes de coordonnées.
Modification dynamique du SVG.
Définir la relation entre l'objet graphique et la variable manipulée.
Principes et bonnes pratiques d'ergonomie.
Travaux pratiques
Mise en oeuvre d'une palette d'images et du drag and drop. Constat des différences d'ergonomie sur ordinateur, tablette ou smartphone.
» Concevoir des objets d'interface
Les points-clés de la conception des objets d'interface.
Concevoir les objets d'une interface avec un éditeur.
Inclure les événements.
Inclure le JavaScript.
Gestion des événements utilisateurs.
Généraliser le travail réaliser pour pouvoir le réutiliser.
Créer la page côté serveur.
Travaux pratiques
Créer des objets d'interfaces : Bouton - Curseur linéaire - Vu-mètre - Palette de couleurs. Nombreux exemples.
» Conclusion
Synthèse des connaissances acquises.
Bilan et bonnes pratiques sur la conception et la réalisation d'interfaces utilisateurs.
Sources d'information pour approfondir.
