1. Responsive Design, Canvas et
SVG
Atelier HTML 5 – DevFest Douala 2013
Document rédigé par Christian Baurel SUMBANG

2. Responsive Design
 Le Responsive Design ou encore Responsive Web Design pour certains est
un procédé qui consiste à adapter l’interface de son site ou application
web en fonction de la taille du terminal visiteur
 Avec la diversité des terminaux via lesquelles accéder à internet, il était
compliqué d’avoir le même rendu visuel sur PC que sur Tablettes ou encore
sur un Smartphone
 La solution a donc été de faire en sorte que l’affichage du site s’adapte en
fonction du terminal, et ainsi tout le monde peut profiter de la même
expérience visiteur, peut importe son terminal

3. Responsive Design

4. Responsive Design
 La tendance Responsive Design a connu son boom en avant avec l’avènement du
HTML5 et du CSS3, mais en réalité seul le CSS3 est nécessaire dans la mise en place du
Responsive Design
 En effet pour rendre son site Responsive, on fait appel au CSS3 et notamment à la
propriété media queries
 Le but ici est de dire au site, si la taille d’écran du visiteur est comme ceci, alors affiche le
site comme cela, sinon s’il est comme ceci alors affiche le site comme cela, ainsi de suite

5. Responsive Design
 Bien évidemment, nous sommes en CSS3 et il n’y a pas de structure du genre if { … } else {
… }
 CSS3 a pensé à tout, donc on dispose des outils de conditions tel max-width et min-width,
ces outils nous servent donc à déterminer l’action à appliquer en fonction de la taille de
l’écran du visiteur
 Les média queries peuvent s’utiliser à travers plusieurs fichiers css ou alors via un seul fichier
css

6. Responsive Design
 Dans le cas ou l’on veut utiliser les média queries avec plusieurs fichiers css, on procède
comme ceci :
 <link rel="stylesheet" media="screen" href="layout.css" />
 <link rel="stylesheet" media="screen and (max-width: 640px)" href="small-screen-layout.css"
/><!-- Media Queries -->
 <link rel="stylesheet" media="screen and (min-width: 1240px)" href="large-screen-
layout.css" /><!-- Media Queries -->
 La syntaxe ci-haut définit 3 feuilles de style à appliquer si la taille de l’écran est maximum
640px, si la taille est minimum 1240px et dans le cas normal

7. Responsive Design
 Dans le cas ou on veut utiliser les média queries au travers d’un seul fichier CSS, on
procède comme ceci :
 <link rel="stylesheet" media="screen" href="layout.css" />
 @media screen and (max-width:640px){ … }
 @media screen and (min-width:1240px){ … }
 On définit un fichier css et dans le fichier css on définit l’affichage à utiliser en fonction de
l’écran du visiteur
 Demo : www.gdg-douala.org/html5/website et www.gdg-douala.org/html5/responsive

8. Canvas
 Canvas est une nouveauté HTML5 qui permet de faire des dessins 2D et 3D
dans le navigateur
 Il s’agit d’un espace de pixels initialement transparents, armés de
JavaScript pour réaliser un bon nombre de fonctions graphiques, partant
du simple tracé de courbe pour aller jusqu’aux animations et jeux vidéos
 Canvas vs Flash : cela vaut la peine d’être mentionné tant Canvas permet
de faire beaucoup d’animations qui autre fois nécessitaient Flash, mais à
ce stade chacune des 2 technos a une grand nombre de partisans, elles
vont donc cohabiter ensemble pendant un long moment encore

9. Canvas
 Canvas par rapport à Flash à quelques avantages non négligeables :
 Il s’agit d’un standard développé par le W3C et le WhatWG
 Il fonctionne très bien en osmose avec les autres standards ( HTML, JavaScript )
 Il est performant et accélère matériellement sur la plupart des navigateurs et systèmes
 Il est mieux pris en charge sur les mobiles ( Apple a d’ailleurs été l’un des 1er à abandonné
Flash pour Canvas )

10. Canvas
 Vous l’avez donc compris, on crée notre objet Canvas en HTML et on le manipule avec
du JavaScript
 Comme tout objet HTML, les dimensions d’un objet Canvas se définisse avec les attributs
Width et Height, on identifie un Canvas par son id
 <canvas id=« mon_canvas» width=« 350» height=« 100» >test canvas </canvas>
 Une fois notre objet Canvas crée, c’est avec le JavaScript que l’on va gérer l’animation
de cet objet

11. Canvas
 Pour manipuler un objet Canvas avec JavaScript, on aura besoin d’une part de récupérer l’id
de notre objet Canvas : getElementById(id)
 Et d’autres part, on aura besoin on utilisera la méthode getContext(valeur) pour définir quel
context on utilise : 2D ou 3D, le context est un élément central dans la gestion de l’objet
Canvas
 Pour le context 3D, le nom du context à utiliser est webgl, cet aspect sera abordé
ultérieurement
 On va maintenant abordé un exemple de tracé avec Canvas : www.gdg-douala.org/html5/canvas

12. SVG
 SVG : Scalable Vector Graphics, est un format de dessin vectoriel, élaboré à partir de
travail indépendant comprenant entre autre IBM, Apple, Microsoft et Xerox
 SVG est basé sur le XML et répond parfaitement à des besoins graphiques légers, qu’ils
soient statiques, dynamiques ou interactifs
 SVG comme Canvas et la majeure partie des propriétés HTML5 a pris du temps pour être
implémenté dans les navigateurs, seul les navigateurs récents le prennent en charge

13. SVG
 SVG génère des images au format léger car seule les informations décrivant les formes de
l’image sont stockées, contrairement aux images bitmap ( jpg, gif, png ) qui doivent être
stockées pixels par pixels
 Les images SVG sont extensibles à volonté sans perte de qualité, contrairement aux
images Canvas
 Comme Canvas, les images SVG sont manipulés avec JavaScript et CSS
 Les images SVG peuvent être éditables via des outils tel Adobe Illustrator

14. SVG
 Pour insérer des éléments SVG dans nos pages web, HTML5 introduit la balise SVG
 La balise SVG doit être considérée comme un conteneur, car à l’instar de la balise HTML,
elle peu contenir un attribut title, desc, etc,,,
 De même lors de la création de l’élément SVG, on doit insérer un doctype, question de
spécifier au navigateur que ce que l’élément à afficher c’est du SVG

15. SVG
 SVG définit un grand nombre de balise pour dessiner les formes
 On notera ainsi entre autres les balise rect pour faire des rectangles, circle pour les
cercles, line pour les traits, ,,,,
 Comme avec Canvas, il est possible de donner une couleur à la forme que l’on dessine et
cela grâce à l’attribut stroke
 Pour finir, on va exposer des démos de certaines réalisations faites avec SVG : www.gdg-
douala.org/html5/svg/index.xml

16. Canvas vs SVG
 Pourquoi faire cette comparaison, Et beh tout simplement parce que ses
deux standards permettent de faire la même chose, à savoir créer des
images directement dans le navigateur
 Les deux sont équivalentes, mais le choix réside dans le besoin que l’on a :
Canvas génère des images Bitmap alors que SVG des images vectorielles
 Avec SVG vous dessinez directement ce que vous voulez afficher, pour
Canvas il faut faire recours à du JavaScript pour créer vos formes
 Le lien suivant donne un éclairci sur ses 2 standards
http://openweb.eu.org/articles/canvas_svg_que_choisir