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 à adapt...
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 ...
Responsive Design
 Bien évidemment, nous sommes en CSS3 et il n’y a pas de structure du genre if { … } else {
… }
 CSS3 ...
Responsive Design
 Dans le cas ou l’on veut utiliser les média queries avec plusieurs fichiers css, on procède
comme ceci...
Responsive Design
 Dans le cas ou on veut utiliser les média queries au travers d’un seul fichier CSS, on
procède comme c...
Canvas
 Canvas est une nouveauté HTML5 qui permet de faire des dessins 2D et 3D
dans le navigateur
 Il s’agit d’un espac...
Canvas
 Canvas par rapport à Flash à quelques avantages non négligeables :
 Il s’agit d’un standard développé par le W3C...
Canvas
 Vous l’avez donc compris, on crée notre objet Canvas en HTML et on le manipule avec
du JavaScript
 Comme tout ob...
Canvas
 Pour manipuler un objet Canvas avec JavaScript, on aura besoin d’une part de récupérer l’id
de notre objet Canvas...
SVG
 SVG : Scalable Vector Graphics, est un format de dessin vectoriel, élaboré à partir de
travail indépendant comprenan...
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, cont...
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...
SVG
 SVG définit un grand nombre de balise pour dessiner les formes
 On notera ainsi entre autres les balise rect pour f...
Canvas vs SVG
 Pourquoi faire cette comparaison, Et beh tout simplement parce que ses
deux standards permettent de faire ...
Prochain SlideShare
Chargement dans…5
×

Responsive design, Canvas et SVG

1 323 vues

Publié le

Publié dans : Technologie
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
1 323
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
28
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Responsive design, Canvas et SVG

  1. 1. Responsive Design, Canvas et SVG Atelier HTML 5 – DevFest Douala 2013 Document rédigé par Christian Baurel SUMBANG
  2. 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. 3. Responsive Design
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×