Le Blog

Le blog laboratoire de F.L.D. Studio
0

Trois en un

Présentation

Cet article reprend trois post de ce blog pour fournir une solution concrête de codage de boutons de partages sur les principaux réseaux sociaux dans un environnement 'responsive design'.

See the Pen Composant Réseaux Sociaux by Du Marais ( @DjF ) on CodePen .

Le pré-requis de base est de laisser tomber le support de IE8 afin de faciliter l'implantation de cette solution à base de SVG. En effet IE8 ne reconnait pas le format SVG et si on doit le supporter, il faut implenter des solutions de fallback avec des images au format .PNG, ce qui fait plus de travail a éffectuer en intégration (image .png + image .svg, sans parler des tailles d'images). Pour un utilisateur sous IE8 l'image SVG ne sera tout simplement pas affichée, étant un élément de décors, cela n'a pas vraiment d'importance.

Les 3 posts

1. Les regles CSS, les unitées de mesures relatives : em et rem (   à lire ici    )

2. L'utilisation d'un map-sprite de formes SVG ( Le workflow SVG    )

3. Les URL Sharing des réseaux sociaux. (   relire ici   )

Le mix de ses 3 techniques permet de concevoir un code ( presque ) unique permettant à un utilisateur de partager une page sur un des réseaux sociaux proposés, le tout en utilisant le moins de ressources possibles, dans un environnement responsive et pouvant être utilisé avec une faible bande passante.

1. Les regles CSS

  • Une classe container des boutons, parent des autres classes :   .reseau-social
  • Des styles pour les éléments enfants en utilisant des sélecteurs descendant :
  1. Une classe pour styliser le lien : .reseau-social a   (Porte la font-size référante des enfants du liens)
  2. Une classe pour les icones SVG :   . reseau-social svg
  • Des sous-classes enfants, une par réseau social pour la couleur  du lien :   .facebook , . googleplus , .twitter , .linkedin, ...

30 sélecteurs à connaitre :  http://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Les unitées de mesures relatives

Grace aux unitées de mesure en em et en rem , nous allons pouvoir conserver les proportions du design des liens même si on modifie la taille de la police de base, celle precisée sur la balise html   ou la font-size de la classe parent ( la balise ancre a dabs notre exemple ).

La cascade CSS

Pour commencer nous ramenons la taille de la police par défaut ( 16 pixels en général ) sur une base de 10px afin de faciliter les calculs.

    html{ font-size:62.5% ; /* Police par défaut : 16px * 62.5% = 10px */ }

La taille du parent est donnée en  rem  pour se référer à la taille de l'élément root de la page (html). Dans notre exemple : 1.6rem soit 10px * 1.6 = 16px

La taille des éléments enfants est  donnée en  em  et fonctionne en tant que facteur multiplicateur de son parent fixée à 16px dans notre exemple.

Exemple :  une marge externe de 0.5em sera de 8px , valeur que nous trouvons en multipliant 16px par 0.5. 

Ainsi en modifiant la taille du parent  .reseau-social a  on modifie automatiquement et de manière harmonieuse toutes les dimenssions fournies en unité em  (icone,texte,padding du lien)

Le media query 

Pour se plier aux contrainte d'un design fluide on reprend ici le concept du ' flow naturel '. Il s'agit de concevoir le CSS en penssant au flux naturel du positionnement des balises et de ne coder avec les médias queries que les changements. Au contraire de l'approche 'Mobile First' qui fait commencer l'écriture du code pour les plus petit écrans pour aller vers les plus grands et qui demande parfois à écraser les rêgles que l'on à conçue soi même.

Lorsque la taille de la fenêtre atteint moins de 640px , les textes des liens sont cachés, la marge externe diminue et les icones sont affichées en plus grand, au centre de leur division.  Editer le code dans CodePen et réduire la taille de la fenêtre pour voir l'effet.

Les tooltips

Entièrement réalisé en CSS3 ils proviennent de  https://github.com/catc  , cette solution sans JavaScript permet de réaliser facilement un puissant système de tooltip personalisables. (6,5Ko minifié)

La première étant certainement de fixer d'une police de caractère pour les Tooltips. On réalise cela sur la classe [data-hint]:after

    [data-hint]:after { font-family:Helvetica Neue,Helvetica,Arial,sans-serif;

2. Utilisation d'icones au format SVG

Une image vectoriel permet de s'affranchir du pixel, une seule image suffit pour toutes les dimenssions et toutes les résolution (retina compris).  De plus, étant stylisable en CSS il est possible de modifier les couleurs de fond, des formes ou des lignes sans avoir recours à des images différentes.

Pour l'utilisation d'images au format vectoriel SVG, nous utiliserons ici la technique de la map-sprite embarquée. Cette méthode permet d'économiser les  requêtes DNS pour charger les images (elles sont embarquées dans la page HTML) et les images contenues dans le sprite sont stylisables (dimenssion et couleurs) via du CSS externe. Par sécurité, au cas ou le CSS n'est pas chargé il est recommandé de conserver les attributs de présentation embarqués dans la description de l'image SVG (balise <path>) Attention toutefois au images remplies de blanc qui doivent s'afficher sur un fond blanc ... elles seront alors invisibles ! Dans ce cas il est préférable de supprimer les attributs de présentation embarqués dans la définition de l'image SVG.

La map-sprite permet ensuite d'utiliser les images qu'elle contient en utilisant juste un identificatif. Les images SVG sont définies à l'aide de la balise <symbol> qui permet de préciser la viewbox de l'image et qui à l'avantage de transformer la taille des images en préservant leur ratio (preserve aspect ratio) par défaut.

La technique de la map-sprite fournie donc une technique de codage très 'propre' des balises HTML et beaucoup de souplesse styliser les images avec du CSS.

La map-sprite de notre composant contient les logos des principaux réseaux sociaux :

  • Facebook
  • Google+
  • Twitter
  • Linkedin
  • Une icone mail pour générer un e-mail à l'aide d'un client de messagerie

Pour concerver une bonne lisibilité de la page HTML , à l'aide de PHP on utilsera une instruction pour embarquer le sprite avant de la délivrer au navigateur :

    file_get_contents('chemin/du/script-avec-le-svg.php');

A Noter :

Cette technique permet d'économiser une requête DNS pour charger la ressource mais elle a néanmoinsl' inconvénient d'alourdir la taille de chaque page. De plus les images ne sont pas mises en cache. La technique du sprite externe serait donc préférable sauf que Internet Explorer (toutes versions, même la IE11) ne peut l'exploiter. Si l'on souhaite utiliser la méthode de la map-sprite externe avec sa mise en cache il faudra utiliser un polyfill en javascript qui propose aussi une solution de fallback pour les navigateurs qui ne reconnaissent pas le format SVG ( IE8 ) :   https://github.com/jonathantneal/svg4everybody

On peut aussi envisager de placer la map-sprite en local storage :  http://osvaldas.info/caching-svg-sprite-in-localstorage  mais la aussi il faudra gérer l'absence de local storage sur le navigateur, ou le fait qu'il n'y a plus de place dedans, voir même que le Javascript est désactivé.

Une autre solution très complette proposée par le Filament group expliquée dans  https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/

http://www.grumpicon.com/  permet de créer dans le CSS une image SVG et PNG sous la forme de background. La documentation détaillée :  https://www.filamentgroup.com/lab/grumpicon-workflow.html

La solution la plus simple est de concevoir un système d'allocation de ressource coté serveur à l'aide de PHP. On test le besoin de charger une ou plusieurs  map-sprite pour des pages précises afin d'inclure ou non les ressource externe dans la page pour qu'elle devienne Inline . Exemple une page Contact ou tout autre page contenant un formulaire n'ont  pas besoin des liens de partage social.

3.  Les URL Sharing

Inutile d'utiliser les SDK respectifs de chaque réseaux sociaux pour simplement partager une page. Ils sont très gourmands en ressources et requêtes DNS, un simple lien suffit. Tous les réseaux proposent les leurs.

L'URL de la page doit être encodée et celon les réseaux plus ou moins de paramètres sont ensuite necessaire.

En PHP on utilise l'instruction: url_encode(URL);

Catégories: Développement WEB, svg

Commentaires: Pas de commentaires

0

Mobilité 2015

Etude Google 2015

Infographie Mobilite 2015 - Sources Google

https://www.thinkwithgoogle.com/intl/fr-fr/

Premiers pas vers la mobilité

Un site très pratique de Raphael Goetter (que l'on ne présente plus) pour

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

Workflow SVG

SVG

SVG : Scalable Vector Graphics (en français « graphique vectoriel adaptable ») est un format d'image supportée à partir de IE9 et tous les autres navigateurs modernes qui permet de s'affranchir du pixel et de proposer des images disponibles dans toutes sortes de résolution sans perte de qualité à l'aide d'une seule définition. A noter, l'image SVG est composé de code source et à ce titre est parfaitement éditable à l'aide d'un éditeur de texte. 

La norme SVG à été établie par le W3C en 2001. SVG 1.1 est arrivé en 2003, SVG 1.2 et seconde édition en 2011. La version 2, SVG 2.0 est actuellement à l'état de 'working draft' donc non encore utilisable.

Un article de  Sara Soueidan  traduit en français : 

Définition d'un workflow de création de sprite SVG en ligne :

Un script pour exporter les svg à partir de Illustrator : https://github.com/iconic/illustrator-svg-exporter

  • OU recupérer un SVG sur une plateforme telle : 

  • Optimiser le code SVG avec :

Il est interessant de noter aussi que un dessin en .png pése plus lourd que son équivalent en .svg (après son optimisation).

Ainsi une image de 13Ko au format .png (512x512) avec un équivalent 'brut'  fournis par Illustrator et qui pése 19Ko, descend à 12Ko après optimisation. L'optimisation est donc une étape très importante.

Ou placer le code

Utiliser le SVG en l'embarquant directement dans une page HTML permet une meilleure accécibilité pour les lecteurs d'écrans  :

  • Jaws 15 et NVDA 2014.1 pour Internet Explorer 11, Firefox 28 et Chrome 30 sous Windows.
  • VoiceOver pour Safari sous iOS/OSX
  • TalkBAck pour Chrome 30 sous Android

Cosneils pour l'accéssibilité : http://www.sitepoint.com/tips-accessible-svg/

Création de la sprite-map

Création d'un sprite SVG en ligne à embarquer dans le document .html

Pour un code plus propre en PHP on peut utiliser ce code

$svg =  file_get_contents('chemin/du/script-avec-le-svg.php'); 

echo $svg;

En utilisant un doctype HTML5 il n'est pas necessaire de fournir un name-space au SVG.

Cette simple déclaration est sufisante :

<svg version="1.1" width="300" height="200">...</svg>
  • Placer le SVG dans un sprite à l'aide de cette structure  à placer après la balise </head> :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;"> 
<symbol id="icon-nom-icone" viewBox="0 0 xxx xxx"> 
<title>titre image</title>
<!--ici la définition du svg-->
<path d="...."/> </path> 
</symbol> 
<symbol id="icon-nom-icone" viewBox="0 0 xxx xxx">
<title>titre image</title>
<path d="...ici la définition du svg..."/> </path> 
</symbol>
</svg>

Explication des balises

  • <svg> est la racine d’un graphisme SVG
  • Les objets doivent avoir un identificateur XML afin de pouvoir être identifiés par un ID , xlink est le simple XLink standard on le définit avec son namespace : xmlns:xlink="http://www.w3.org/1999/xlink" A noter : si on affiche du svg défini in-line on n'a pas besoins de définir de namespace.
  • Par défaut les navigateurs affichent le SVG,(300x150) même vide, c'est pourquoi on doit preciser un display:none ou utiliser une classe préalablement définie (ex: class="dn" et .dn{display:none;) pour masquer le sprite.
  • La balise <tittle> sert à documenter l'image.
  • <symbol> permet de définir un objet graphique réutilisable avec <use>, il  ressemble à <g>, sauf que l’objet lui-même n’est pas dessiné , il  possède les attributs viewBox et preserveAspectRatio en plus
  • viewBox permet d’adapter les dimensions d’un graphisme à celles du conteneur viewport  (x = 0, en haut et y = 0, à gauche et la dimension de l'image.(width et height en pixels par défaut) En rêgle générale on laisse les dimenssion initiale de la conception de l'image. Viewbox permet de greffer un système de coordonnés sur les dimensions réelles d’un viewport, c'est lui qui permet la "mise à l'echelle" de l'image par rapport à son contener.
  • <use> permet de réutiliser les objets définis dans <symbol>

Valeur à remplacer :

  • id : Identificatif dans le sprite du SVG ( exemple facebook )
  • viewBox xxx avec  les valeurs propres du SVG ' exemple : viewBox="0 0 512 512" )
  • title : titre du SVG ( exemple : logo facebook )
  • d = Code de définition du SVG

CSS

  • Styliser en CSS avec une classe, exemple .icon-facebook, et definir une couleur de fond (background-color:#, une couleur de remplissage (fill:#), etc... 

Exemple :

.ico{ 
width:64px; 
height: 64px; 
fill:#fff; 
background-color: #000; 
} 

use.bleu{ 
 fill: blue; 
}
use.bleu:hover{ 
 fill:red; 
}

Utiliser dans le HTML

Avec une pointe d'accésibilité en prime.

<svg class="ico" aria-hidden="true" role="presentation"> 
 <use xlink:href="#facebook" class="bleu">logo facebook</use> 
</svg>

A noter : le sprite est embarqué dans la page il ne peut donc pas être mis en cache. Si on souhaite le faire il faut utiliser un sprite externe (exemple : map-sprite.svg) , dans ce cas l'appel à un élément du sprite est realisé comme ceci :

<svg class="ico">
 <use xlink:href="path/to/map-sprite.svg#facebook"></use>
<svg>

(vue dans : http://calendar.perfplanet.com/2014/tips-for-optimising-svg-delivery-for-the-web/ )

Le meilleur des deux monde est certainement d'utiliser une méthode de chargement de la mapsprite en utilisant AJAX : https://css-tricks.com/ajaxing-svg-sprite/

Exemple sur CodePen

Test d'utilisation d'un sprite SVG et positionnement CSS

See the Pen Sprite SVG by Du Marais (@DjF) on CodePen.


Pour styliser via CSS un dessin SVG possédant déjà ses propres attributs de présentations on utilisera en CSS une classe pour forcer les SVG à afficher les couleurs définies dans les classes :

See the Pen PPzGrb by Du Marais ( @DjF ) on CodePen .

Articles à lires : 

Pour commencer

Le slide de la conférence de Vincent De Oliveira  à la KiwiParty de 2016 : http://iamvdo.me/conf/kiwiparty-2016

Techniques du sprite

Autres : 

http://tutorials.jenkov.com/svg/index.html ( tout, tout, tout + video )

JS pour animer du SVG

Catégories: Développement WEB, svg

Commentaires: Pas de commentaires