responsive design, canvas et svg
TRANSCRIPT
Responsive Design, Canvas et
SVG
Atelier HTML 5 – DevFest Douala 2013
Document rédigé par Christian Baurel SUMBANG
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
Responsive Design
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
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
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
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
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
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 )
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
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
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
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
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
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
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