SVG, créer des interfaces riches conception pour navigateurs Web multiplateformes

Objectifs

Créer des images vectorielles

Réaliser des animations interactives

Créer et éditer des graphismes vectoriels avec Inskscape

Participants

Développeurs, graphistes ou responsables de projets.

Pré-requis

Connaissances de base en programmation ainsi que des langages html ou xml. La connaissance du JavaScript est un plus.

Moyens pédagogiques

1 poste par participant - 1 Vidéo projecteur - Support de cours fourni à chaque participant – Formation présentielle

Durée

2 jours

Les sessions inter-entreprises

Date Session
Du 12/02/2018
Au 13/02/2018
Paris
Formation standard
Du 12/02/2018
Au 13/02/2018
Caen
Formation standard
Du 12/02/2018
Au 13/02/2018
Lyon
Formation standard
Du 12/02/2018
Au 13/02/2018
Rennes
Formation standard
Du 12/02/2018
Au 13/02/2018
Lille
Formation standard
Du 12/02/2018
Au 13/02/2018
Rouen
Formation standard
Du 23/04/2018
Au 24/04/2018
Paris
Formation standard
Du 23/04/2018
Au 24/04/2018
Caen
Formation standard
Du 23/04/2018
Au 24/04/2018
Lyon
Formation standard
Du 23/04/2018
Au 24/04/2018
Rennes
Formation standard
Du 23/04/2018
Au 24/04/2018
Lille
Formation standard
Du 23/04/2018
Au 24/04/2018
Rouen
Formation standard
Du 02/07/2018
Au 03/07/2018
Paris
Formation standard
Du 02/07/2018
Au 03/07/2018
Caen
Formation standard
Du 02/07/2018
Au 03/07/2018
Lyon
Formation standard
Du 02/07/2018
Au 03/07/2018
Rennes
Formation standard
Du 02/07/2018
Au 03/07/2018
Lille
Formation standard
Du 02/07/2018
Au 03/07/2018
Rouen
Formation standard
Ce plan de cours est établi à titre indicatif. Son contenu peut être adapté à chaque formation Télécharger la fiche pdfDemander un devis

Code

SVG

Description détaillée

Introduction 

Les formats vectoriels et les formats pixels.

Historique du SVG et du XML.

Support des navigateurs.

 
Le format SVG 
Les principales balises : les objets géométriques, le texte, les couleurs, les remplissages et les gradients.
Les groupes (élément <g>).
Les références internes.
Travaux pratiques 
Réalisation d'images simples.
 
La définition de chemins 
Les différents types : les lignes brisées, les courbes de Bézier, les arcs d'ellipse.
La polarité des chemins.
Combiner et dissocier des chemins.
Le style des contours.
Travaux pratiques 
Création d'une image contenant des chemins de chaque type possible.
 
Coordonnées 
Le système de coordonnées : l'attribut viewBox.
Les transformations : rotation, translation, transformation matricielle.
Les combinaisons de transformations.
Travaux pratiques 
Création d'images contenant les différents types de transformations.
 
Animations 
Les balises SMIL : les actions possibles, le contrôle de l'évolution temporelle.
La manipulation du DOM par JavaScript.
Animation par CSS3.
Comment intégrer le CSS et le JavaScript dans le SVG ?
Travaux pratiques 
Intégration d'animations dans les images précédemment réalisées.
 
Intégration SVG dans des pages Web 
Intégration par la balise <img> du HTML.
Intégration par mixage des espaces de nommage XML (via l'attribut xmlns).
Apport de styles externalisés par CSS.
Apport de comportements externalisés par JavaScript.
Lier des comportements entre SVG et HTML.
Travaux pratiques 
Réalisation d'une page Web HTML5 utilisant une image SVG directement intégrée dans le code xHTML du document racine. Synchronisation des animations sur un contenu multimédia.
 
Production d'images SVG
Prise en main de l'outil de dessin vectoriel Inkscape.
Comment ajouter des effets sur une image produite par Inkscape ?
Les pièges des interfaces graphiques à éviter.
Comment corriger un fichier SVG corrompu ?
Travaux pratiques 
Production d'une image par Inkscape, intégration d'animations à partir d'un éditeur de texte puis modification de l'image à partir d'inkscape.
 
 
 
 

Les dernières places disponibles

Aucune annonce pour le moment
Une erreur est survenue
Une erreur est survenue, l'administrateur a été contacté
Revenir à la première page