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