Article(s) de la rubrique ‘Intégration’ :

Utiliser les sprites

La performance d’affichage des pages web dépend de différents facteurs. La technique des sprites peut vous aider, grâce à une astucieuse utilisation des CSS, à améliorer la vitesse de chargement de vos pages.

Les sprites, c’est quoi ?

L’utilisation des sprites pour le web est une technique permettant d’afficher plusieurs vues d’une seule et même image à l’aide des feuilles de style CSS.

Cette technique est issue des anciens jeux vidéos qui utilisaient des petits personnages pixelisés appelés « sprites » qui étaient tous dessinés sur une seule image pour des raisons de performances.

Il s’agit donc d’utiliser une image sur laquelle est réunie soit plusieurs instances de l’état d’un objet, par exemple un menu, un bouton soit un ensemble d’autres images comme des icônes par exemple.

La technique des sprites permet, grâce aux CSS, de ne montrer qu’une partie (une vue) de l’image globale. Selon le cas, en modifiant les paramètres de positionnement dans la feuille de style CSS, il est possible de déplacer la vue sur l’image globale sans montrer le reste de l’image. Nous utiliserons donc une seule image pour simuler l’affichage de plusieurs images (en réalité différentes vues de l’image globale) sur les pages web d’un site internet.

Quels intérêts d’utiliser les sprites ?

Si vous travaillez dans le secteur internet, vous savez que lors du chargement d’une page web, il y a autant de requêtes http effectuées sur le serveur qu’il y a d’images dans la page. En utilisant qu’une seule image globale, vous réduisez à une requête http le chargement des images (puisqu’en réalité on ne charge qu’une image).

De plus, l’image globale est bien souvent moins lourde que la somme des poids des images individuelles. Cela permet de gagner en performance sur la vitesse d’affichage de la page et en consommation de bande passante dans certains cas.

Donc tout l’intérêt des sprites est de gagner en performance de chargement des pages. Du point de vue du graphiste, il y a un autre avantage : avoir moins de découpes à faire pour l’étape d’intégration.

Comment mettre en place les sprites ?

Comme un exemple, vaut mieux qu’un long discours, nous allons réaliser un bouton image avec effet rollover utilisant la technique des sprites.

Notre bouton aura trois états : un état « initial » lorsque le bouton n’est pas activé ou survolé, un état « survolé » lorsque l’utilisateur passe sa souris sur le bouton et un état « enfoncé » lorsque l’utilisateur clique sur le bouton.

La première chose à faire est de dessiner dans un logiciel de traitement d’images les trois états du bouton puis de les réunir sur une seule image.

Ensuite, il va falloir implémenter le code XHTML/CSS.

Voici le code XHTML qui affiche le bouton :

<a id="container" href="#" title="Exemple de bouton sprite"></a>

Remarque : Le code utilisé dans cet exemple est simple pour vous transmettre la technique mais c’est un très mauvais exemple à suivre sur le plan sémantique et accessibilité. Voir la conclusion.

Il ne nous reste plus qu’à définir le fichier CSS qui va nous permettre notamment grâce à la propriété « background » de positionner notre vue sur l’état du bouton qui convient en fonction de l’action de l’utilisateur.

Le calcul du positionnement de la vue est la partie la plus fastidieuse. Vous pouvez déterminer « à la main » les coordonnées du positionnement en mesurant la position des états du bouton sur l’image globale. Mais si vous ne voulez pas vous embêter à faire ces mesures, vous pouvez utiliser un générateur de sprites pour faire le travail à votre place.

Il y a quelques bogues avec les navigateurs Opéra et Safari à prendre en compte lors de la création de Sprites CSS :

Opéra, pour les versions inférieur ou égale à 9.0, ne reconnait pas une position de fond supérieure à 2042px ou inférieure à -2042px et utilise ces limites à la place en cas de dépassement. Ceci dit 2024px, ça vous laisse pas mal de marge.

Safari a un problème avec la répétition des images de fond. Cela peut être résolu en spécifiant une valeur d’espacement vertical plus large.

Je vous conseille d’utiliser par exemple le générateur de sprites en ligne de « Project Fondue ». Ce générateur prend en compte les bugs des navigateurs Opéra et Safari. Utilisez le comme suit :

1. Réunissez toutes vos images dans un fichier .zip, le nom donné aux images sera repris dans la feuille CSS générée.

2. Uploadez votre fichier .zip via le formulaire du générateur de sprites.

3. Définissez vos paramètres. Dans mon exemple, j’ai gardé le paramétrage par défaut proposé sur la page du générateur. Pour plus de détails sur le paramétrage, lisez l’aide en ligne.

4. Validez le formulaire.

Le générateur de sprites construit alors une image globale :

… et le code CSS correspondant :

.sprite-enfonce { background-position: 0 -30px; }
.sprite-initial { background-position: 0 -108px; }
.sprite-survole { background-position: 0 -186px; }

#container li {
background: url(monImageGlobale.png) no-repeat top left;
}

Le code implémenté pour mon bouton donnera :

a#container {
background:url(MonImageSprite.png) no-repeat 0px -108px; /* initial */
width: 180px;
height: 40px;
display: block;
}
a#container:hover { background-position: 0 -186px; } /* survolé */
a#container:active { background-position: 0 -30px; } /* enfoncé */

Résultat :

Conclusion

Comme nous l’avons vue dans cet article, l’utilisation des sprites permet de gagner en performance au niveau de la vitesse d’affichage des pages web en réduisant le nombre de requêtes http effectuées sur le serveur. Quelques secondes de gagnées sur le chargement de vos pages peut vous rapporter gros car c’est du temps d’attente en moins pour les internautes et donc moins de perte potentielle d’audience.

Pour les graphistes, travailler avec un intégrateur qui utilise les sprites permet de regrouper plusieurs images dans un seul fichier png et d’éviter de fastidieuses découpes.

Cependant, l’utilisation des sprites peut causer quelques inconvénients si ils sont utilisés de manière inappropriée.

Par exemple, laissez suffisamment d’espace entre vos motifs sur l’image globale pour permettre aux utilisateurs de grossir le texte des pages web sans risquer de démasquer les autres motifs. Trouvez un bon compromis entre l’espacement des motifs et la taille de l’image globale car plus votre image globale sera grande, plus il faudra de mémoire à l’agent utilisateur pour la décompresser.

Les sprites peuvent également causer des problèmes de sémantique et d’accessibilité. Mon exemple de bouton est un mauvais exemple sur le plan sémantique car j’utilise une balise html « A » pour afficher un bouton au lieu d’une balise « INPUT » ou « BUTTON ». De plus ma balise « A » ne comporte pas d’intitulé texte. J’ai donc détourné la balise « A » à des fins esthétiques au détriment de la sémantique et de l’accessibilité. Bien que graphiste, je pense qu’il ne faut jamais céder à ce type de compromis.

Il est donc fortement conseillé d’utiliser les sprites pour les images de décorations uniquement (fond d’illustration, icônes …) et pas sur des images de contenu ou des images qui aident à la compréhension du contenu. En effet, si pour une raison ou pour une autre, les CSS sont désactivées, ou si une personne handicapée utilise un navigateur texte, vous perdez l’affichage de vos images. Si il s’agit uniquement d’images de décorations, leur disparition est génante sur le plan graphique mais la page conserve une accessibilité aux informations.

Pour conclure, utilisez les images sprites pour gagner en performance mais ne les utilisez pas dans un contexte où elles réduisent la sémantique et l’accessibilité.

Sources :

– Sprites CSS : Meurs, découpe d’images, meurs ! – Traduction française, sur le site Pompage.net d’un article de Dave Shea parue sur A List Apart.
– Des sprites jusqu’à plus soif – Eric Daspet
– CSS Sprites: What They Are, Why They’re Cool, and How To Use Them – Chris Coyer
– Exactly How to Use CSS Sprites – Nettuts

Générateurs de sprites :

– Application Java ou PHP à télécharger : SmartSprites
– Générateur de sprites en ligne : Project Fondue
– Générateur de sprites en ligne : CSSSprites

Positionnement absolu et relatif

La mise en forme d’une page web, autrefois réalisée à l’aide des tableaux, dispose aujourd’hui, grâce aux CSS, d’outils tel que le flottement et le positionnement. Nous ne parlerons pas du flottement dans cet article mais uniquement du positionnement et plus particulièrement du positionnement de type absolu et relatif.

Le positionnement, quelques rappels

Le positionnement est une notion assez simple qui permet d’indiquer précisément où des boîtes d’éléments apparaitront par rapport à leur bloc conteneur qui peut être l’élément racine (élément html), un élément parent ou un autre élément.

Le bloc conteneur

Dans le cas d’un élément flottant le bloc conteneur est l’élément parent de type bloc le plus proche. Avec le positionnement la notion de conteneur est un peu plus complexe.

– Le bloc conteneur racine est dans la plupart des navigateurs matérialisé par un rectangle de la taille de la zone d’affichage. En HTML, l’élément racine est l’élément « html ».

– Pour les éléments non-racine positionnés de façon « relative » ou « static », le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.

– Pour les éléments non-racine positionnés de façon « absolu », le bloc conteneur est matérialisé par le parent le plus proche (de toute sorte) dont la propriété position a une valeur autre que « static » de la façon suivante :

* Si le parent est de type bloc, le bloc conteneur est matérialisé par le bord de l’espacement de cet élément, il s’agit donc de la zone délimitée par une bordure.

* Si le parent est de type en-ligne, le bloc conteneur est matérialisé par le bord du contenu du parent.

* Si il n’y a pas de parent, le bloc conteneur de l’élément est le bloc conteneur racine.

Il est a noter que les éléments peuvent être positionnés hors de leur bloc conteneur en utilisant des valeurs négatives.

Propriétés de décalage

Le positionnement utilise la propriété position qui peut prendre les valeurs : « static » (valeur par défaut), « relative », « absolute », « fixed » et « inherit ». Les positionnements de type « relative », « absolute » et « fixed » utilisent les propriétés « top », « right », « bottom » et « left » pour décrire le décalage des côtés d’un élément positionné par rapport à son bloc conteneur.

Ces propriétés décrivent le décalage à partir du bord le plus proche du bloc conteneur. Par exemple, top indique à quelle distance le bord de la marge haute de l’élément positionné doit être placé depuis le bord supérieur de son bloc conteneur.

Les valeurs assignées à ces propriétés peuvent être positives ou négatives.

Notez que les valeurs positives provoquent un décalage vers l’intérieur, déplaçant les bords vers le centre du bloc conteneur, et que les valeurs négatives provoquent un décalage vers l’extérieur.

Il faut également comprendre que ces propriétés définissent le décalage depuis le côté analogue du bloc conteneur et non depuis son coin supérieur gauche.

Par exemple, « left » définit un décalage par rapport au côté gauche.

Sur le schéma ci-joint, le bord externe gauche de l’élément positionné est placé à 90 px du bord gauche du bloc conteneur.

Largeur et hauteur

Les propriétés « width » et « height » permettent de fixer respectivement la largeur et la hauteur d’un élément positionné. Si il est important parfois de fixer ces propriétés, on s’aperçoit que ce n’est pas toujours nécessaire. En effet le placement des quatre côtés d’un élément à l’aide de « top », « right », « bottom », « left » peuvent fixer implicitement largeur et hauteur par les décalages qu’ils induisent.

Si par nécessité il faut limiter la largeur et la hauteur d’un élément, CSS2 met à disposition les propriétés « min-width » et « min-height » qui donne une dimension minimum à la zone de contenu d’un élément, et les propriétés « max-width » et « max-height » qui, vous l’aurez deviné, donne une dimension maximum à la zone de contenu d’un élément.

Débordement

Si le contenu d’un élément est trop important pour la taille de ce dernier, il risque de déborder de l’élément lui-même. Cette situation peut être contrôlé à l’aide de la propriété « overflow » dont les valeurs possibles sont visibles (par defaut), « hidden », « scroll », « auto », « inherit ».

– La valeur visible signifie que le contenu de l’élément reste visible hors de la boîte d’élément.

– La valeur « scroll » signifie que le contenu est rogné sur les côtés de la boîte d’élément mais on laisse à l’utilisateur la possibilité de lire le contenu supplémentaire à l’aide de « scroll » par exemple.

– La valeur « hidden » signifie que le contenu est rogné sur les côtés de la boîte d’élément mais le contenu supplémentaire est caché à l’utilisateur.

– La valeur auto signifie que c’est au navigateur de déterminer le comportement à employer.

Visibilité

La propriété visibility contrôle la visibilité d’un élément. Les valeurs possibles sont visible (par defaut), hidden, collapse, inherit.

– La valeur visible signifie que l’élément est visible.

– La valeur « hidden » signifie que le contenu est rendu invisible mais l’élément affecte toujours la mise en page du document comme si il était visible. Notez la différence avec « display:none » où l’élément disparaît complètement y compris du document si bien qu’il n’a plus aucun effet sur la mise en page.

– La valeur « collapse » est employé dans l’affichage des tables CSS.

Placement sur l’axe z

Lorsque plusieurs éléments positionnés se chevauchent ou veulent coexister au même endroit, il se peut qu’un élément soit caché par un autre de superficie supérieure.

L’ordre d’empilement naturel des éléments est déterminé par la position de l’élément dans le flux. Le dernier élément affiché dans le flux se trouvera au dessus des autres.

Cet ordre peut être contrôlé par la propriété « z-index », en effet, un élément dont la valeur numérique de « z-index » est élevée se trouve en avant par rapport à un élément dont la valeur de « z-index » est faible. L’élément dont la valeur est la plus élevée se trouve donc au dessus des autres éléments.

Positionnement absolu

Un élément positionné de manière « absolue » est retiré du flux puis positionné par rapport à son bloc conteneur. L’élément positionné de façon absolue peut chevaucher d’autres éléments ou être chevauché.

Le bloc conteneur d’un élément positionné de manière absolue est l’élément parent le plus proche dont la valeur de position est différente de « static ». Il est courant de choisir un élément qui servira de bloc conteneur à un élément positionné de manière absolue en lui assignant une position relative sans préciser de décalage. Si il n’y a pas de parent dont la valeur de position est différente de « static », le bloc conteneur de l’élément positionné de manière absolue est le bloc conteneur racine.

Exemple :

<html>
<head>
<style type="text/css">

</body>
</html>

Si vous souhaitez contrôler le bloc conteneur initial plutôt que de laisser le navigateur s’en charger, il suffit d’assigner par exemple au body de votre document une position relative :

body {position:relative;}

Il est important de comprendre aussi que lorsqu’un élément est positionné de manière absolue, il définit un bloc conteneur pour ses éléments enfants.

Positionnement relatif

Dans le cas d’un positionnement relatif, l’élément reste dans le flux. Le décalage s’opère de la même manière que pour le positionnement absolu mais l’élément laisse un espace blanc à l’endroit où il aurait dû se trouver dans le flux normal de la page. Un élément positionné de manière relative établit un nouveau bloc conteneur pour ses enfants à l’endroit où l’élément a été positionné.

Je rappel que pour les éléments non-racine positionnés de façons relative, le bloc conteneur est matérialisé par le bord du contenu de la boîte parent de type bloc ou en ligne, de table ou cellule, la plus proche.

Reprenons notre exemple mais en positionnant l’élément <b> de manière relative.

<html>
<head>
<style type="text/css">

</body>
</html>

On observe sur la copie d’écran les espaces vides laissés par les éléments <b> positionnés de manière relative. Nous avons rajouté des « z-index » pour que tous les blocs soient visibles et que les plus grand ne masquent pas les plus petits.

Ici les deux bloc parents <p> jouent un rôle de conteneur pour l’élément <b>.

Conclusion

La mise en page par flottement est plus populaire auprès des designer et intégrateurs web que la mise en page par positionnement. Cela est probablement dû au fait que la mise en page par flottement est plus simple à appréhender que celle par positionnement.

Cependant, l’utilisation des blocs flottant pose parfois problème, ce système étant très sensible aux dépassements de longueur, et de largeur. L’utilisation du positionnement absolu et relatif peut être une solution alternative beaucoup plus robuste si elle est utilisée avec habilité. Je pense que cette technique vaut la peine qu’on y accorde quelques gouttes de sueurs.

Une dernière remarque : pour que le positionnement ne pose pas de problème lors d’un changement de résolution de l’écran, il est conseillé de d’attribuer des valeurs en % ou en « em » aux propriétés « width » et « height ».

Mes sources

Ouvrage :

L’essentiel de cet article a été rédigé à partir du livre « CSS, La référence » écrit par Eric A. Meyer, traduit par Hervé Soulard aux éditions O’Reilly.

Présentation des microformats

La première fois que j’ai entendu parler des microformats, c’était à l’occasion du concours de design du thème WordPress « Sandbox » qui s’est déroulé cet été 2007. En effet, une des particularités du thème Sandbox est qu’il intègre des microformats. Sur ce sujet, Bruno Bichet a rédigé un excellent article que je vous invite à lire sur son blog css4design. Pourtant le balbutiement des microformats débute dès 2003 avec la naissance du XHTML Friends Network (XFN) (microformat utilisé dans les relations entre vous-même et les personnes de votre blogroll). Le véritable lancement des microformats commencera en 2005 avec la mise en ligne du site officiel microformats.org

Je ne parlerai pas ici du thème Sandbox mais bien des microformats. Avant d’entamer le sujet, j’aimerai définir le mot « sémantique ».

La sémantique

La définition du mot « sémantique » est complexe. Ce mot est abondamment utilisé chez les linguistes. En informatique, on l’utilise généralement pour exprimer le fait de « donner du sens ».

Prenons un exemple : ma grand mère. Si elle me donne une mixture dans un récipient sans aucune autre précision, je reste sceptique sur la nature de la chose. Par contre, si elle colle une étiquette et y indique « Confiture de fraise – avril 2007 – jardin de Normandie » je sais immédiatement qu’il s’agit d’une mixture sucrée à base de fraise, encore comestible car datant de cette année et que c’est sans conservateur car provenant directement de son jardin Normand. En quelque sorte, ma grand mère, grâce aux indications portées sur son étiquette, à donné du sens à cette mixture rougeâtre. Ma grand mère fait de la sémantique sans le savoir !

Prenons maintenant l’exemple du HTML.
La balise

<H1>

est plus sémantique que la balise

<DIV>

. En effet, la balise

<H1>

m’indique, si elle est bien utilisée, que son contenu est un titre et que ce titre est de niveau 1 alors que la balise

<DIV>

ne m’indique pas grand chose sur la nature de son contenu. Je sais seulement que ce contenu se comportera dans ma feuille de style comme un élément bloc.

C’est quoi les microformats ?

Pour aller droit au but, je dirai que les microformats sont des étiquettes que l’on rajoute au HTML pour le rendre plus sémantique que ce qu’il est actuellement par le biais uniquement de ses balises. Comment ? En utilisant des éléments et attributs déjà existant dans le HTML. Il s’agit de l’élément « meta », des attributs « rel » et « rev » et de l’attribut « class »

<meta name="description" content="Site sur les microformats"/>
<link href="/css/feuille.css" rel="stylesheet"/>
<span class="name">Durand</span>

Son implémentation est donc très simple et se base sur les possibilités préexistantes du HTML 4.0. En effet, les initiateurs des microformats ont souhaité mettre en place plus de sémantique dans le HTML sans avoir à réinventer la roue et sans avoir à attendre l’élaboration d’une interminable spécification.

Les microformats ont été mis en place par des passionnés qui avaient besoin de structurer d’avantage les données publiés sur le web. Ils ont donné naissance à une communauté ouverte qui met en place le processus de standardisation. Tout le monde peut participer à faire évoluer les microformats, ils ne sont la propriété de personne et leur évolution ne dépend ni d’un organisme ni d’intérêts privées.

Vous pouvez retrouver cette communauté sur le site officiel. Il existe également une communauté francophone.

Ca sert à quoi les microformats ?

Comme indiqué dans le chapitre précédent, les microformats permettent de structurer d’avantage les données des pages web en rajoutant de la sémantique dans le code HTML. C’est en quelque sorte une façons de tagger les données d’un contenu web.

Oui mais dans quel but ?

Dans le but de pouvoir partager de l’information en facilitant son extraction du code HTML.

Prenons un exemple :

Si dans une page web je trouve le code

<span>20070112</span>

s’agit il d’une référence produit, d’un numéro de téléphone, du nombre total d’un produit en stock ?

Si je rajoute une information à l’aide de l’attribut class

<span class= "date">20070112</span>

je peux en déduire par la valeur de l’attribut class qu’il s’agit en fait d’une date.

Pour aller plus loin je peux aussi écrire

<span class= "date naissance" >20070112</span>

pour indiquer qu’il s’agit d’une date de naissance.

Ce qui fait la force des microformats c’est qu’ils sont facilement lisibles et compréhensibles pour l’être humain mais aussi lisibles par les applications informatiques comme les navigateurs, des moteurs de recherche, des clients mail, des logiciels d’agenda etc. Ainsi les données peuvent aisément être partagées ou traitées et stockées dans des bases de données distantes.

Par exemple, l’extension Firefox Opérator permet à l’utilisateur de détecter dans une page web la présence de microformats, de les extraire et de les exporter dans un format compatible avec des gestionnaires de contacts ou des calendriers.

Imaginez, vous êtes à la recherche de clients potentiels. Vous vous rendez sur le site d’un prospect. Opérator détecte sur la page contact un microformat qui vous permet d’extraire les coordonnées de votre prospect. Il vous suffit alors de l’extraire et de l’importer dans votre application bureautique qui gère une liste de clients potentiels que vous contacterez ultérieurement pour proposer vos services.

Pour en savoir plus sur l’utilité des microformats vous pouvez aussi lire la page wiki intitulée « Que pouvez-vous faire avec les microformats ? »

Standardisation des microformats

Pour que tout le monde parle le même langage et utilise les mêmes conventions, les microformats sont d’abord discutés puis validés avant d’être utilisés. C’est le rôle de la communauté dont nous avons déjà parlé. Les microformats ne sont pas figés mais en constante évolution selon les besoins des utilisateurs. Il existe aujourd’hui plusieurs familles de microformats en fonction du type de donnée à traiter. Vous pouvez vous même proposer un microformat à l’étude de la communauté pour un type d’information non abordé par les familles de microformats actuelles.

Voici pour exemple quelques une des familles de microformats parmi les plus connus :

hCard – pour les informations de contact
hCalendar – pour les événements
rel-nofollow – pour combattre les spams
XFN – pour les relations sociales

Conclusion

Il s’agissait ici de présenter succinctement et simplement les microformats. Je vous laisse le soin d’approfondir l’aspect technique de leur implémentation. Vous trouverez quelques références à la fin de cet article pour approfondir le sujet. Un prochain article plus technique fera peut être son apparition sur ce blog.

Les microformats progressent sur le web mais sont encore en construction. De grandes entreprises comme Yahoo ou Flickr les utilisent déjà. De nombreuses familles de microformats sont en gestation et d’autres feront leur apparition dans un futur proche. Le grand intérêt de cette technologie est qu’elle permet facilement d’extraire des données web pour être converties en n’importe quel autre format ou type de fichier exploitables par de nombreuses applications.

Alors qu’avec le XML chacun définie le vocabulaire sémantique qui va structurer son document, les microformats reposent sur une standardisation des propriétés et l’accord sur une terminologie commune permettant l’interopérabilité et le transfert des informations.

Mes sources et quelques liens en plus

Site officiel :
- microformats.org

Sites web francophones :
- www.elanceur.org/microformats/
- microformateurs.org
- Microformats wiki

Ouvrages :
- Utiliser les microformats – Edition O’Reilly – Focus – Brian Suda
- Microformats: Empowering Your Markup for Web 2.0 – John Allsopp