Ceux qui les utilisent sont convaincus, mais l’optimisation de sites web semble toujours un truc inutile, comme l’accessibilité ou l’ergonomie…
C’est à mon sens une hérésie, et les performances, comme l’accessibilité ou l’ergonomie devraient faire partie des premières réflexion sur la plupart des projets web.

Pour vous sensibiliser à cette technique je vais donc vous présenter quelques outils utiles à sa mise en place.

Photo de Jeff Kubina depuis Flickr

Performance ?

Avant de voir comment faire voyons déjà pourquoi le faire. En deux mots, des performances de votre site web, dépendent la qualité de votre référencement et la qualité de surf de vos visiteurs. Votre rentabilité est donc en lien direct avec la rapidité de votre site.

Avant de songer à changer de serveur, il y a deux points importants à traiter pour améliorer votre site :

• Limiter le poids des données
• Limiter le nombre de données

Les sprites CSS permettent de limiter le nombre de fichiers en les combinant. Cela amène aussi en règle générale à une diminution du poids total des images.

Pour en savoir plus sur l’optimisation :

• Le blog d’Éric Daspet sur les performances
• Le billet de Webaaz sur les performances

Méthode

Pour ce qui et de la technique des sprites, je vous renvoie vers le bon tutoriel de Pompage :

• Tutoriel sur pompage
• Voir les explications sur le blog Performances

Pour l’essentiel, sachez que seules les images qui servent au design de votre site peuvent être utilisées. Les images du contenu ne doivent pas subir ce traitement !

Webwares

Pour une utilisation simplifiée on trouve pas mal d’applications web qui fournissent un outil de génération de sprites. Il suffit de fournir vos images sous forme d’archive, de préciser vos paramètres (alignement, espace entre les image, préfixes css…). Il ne vous reste plus qu’à télécharger votre image et le code CSS associé et à les intégrer dans votre site web.

En voici quelques exemples :

• Le générateur de sprites de Ryan Breen
• CSS Sprites
• Spritegen
• Csssprites

Celui-ci est un peu différent puisqu’il permet de redéfinir le style CSS à partir d’un sprite. Utile si vous faites le sprite vous même ou si vous avez perdu le code CSS !

• Générateur de syles CSS Sprite creator

software

Pour une intégration plus poussée dans votre processus d’intégration, il existe aussi des outils en ligne de commande :

• Css Sprites en Java

Vous pourrez ainsi automatiser cette tâche dans un script. Très utile si vous devez régénérer régulièrement des sprites dans le cadre d’un cycle d’intégration continue par exemple !

Il faut noter que la version Java est sous license Open Source BSD License et la version Python

Conclusion

Des outils indispensables aujourd’hui ! Vous n’aurez plus d’excuses pour ne pas les utiliser !
Et pour plus de résultats, n’oubliez pas de merger et de compresser vos fichiers CSS et de supprimer les méta données de vos images !

Sur le même thème

• Optimiser son site web
• Trouver de belles photos pour son site web
• Bien utiliser les feuilles de style (CSS)
• Les plugins Firefox : Firebug
• Retour d’expérience : Grilles & mise en page

Photo de Darrren Hester depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox et sur le site de l’éditeur :

• Installer Firebug pour Firefox
• Voir le site de l’éditeur

Il n’existe qu’une version pour Windows et OSX pour le moment mais une version Linux devrait suivre.

Présentation

XRefresh est un plugin développé pour les intégrateurs. Pour tester des mises en pages et des modifications de feuilles de styles, on relance sans cesse son navigateur pour rafraichir notre page. Xrefresh peut le faire pour vous !

Ce plugin nécessite l’installation d’un logiciel pour Windows, nommé Windows monitor. Celui-ci scanne les répertoires de sources que vous lui indiquer à la recherche de modifications sur les fichiers. Dès qu’il en détecte une il passe le relais au plugin qui se charge de modifier la page en conséquence !

Il faut noter que ce plugin peut également gérer des ajout en Javascript, mais ne peut pas supprimer des fonctions déjà chargées en mémoire.

Conclusion

Même si c’est idéal avec deux écrans, avec un seul grand, il y a déjà moyen de bien en profiter. Au final c’est plus simple que d’éditer les propriétés CSS directement dans Firebug.

Sur le même thème

• Les plugins Firefox : Firebug
• Outils : Edition de fichiers avec Notepad++
• Outils XML : Cooktop
• Les plugins Firefox : Colorzilla
• Comparaison et fusion de fichiers et de dossiers

Voici donc aujourd’hui une extension pour Firefox, qui permet d’avoir tout un tas d’outils sous la main directement dans le navigateur : Colorzilla.

Photo de Richard0 depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Colorzilla pour Firefox

Présentation

Colorzilla est un outil qui permet de zoomer sur la page pour sélectionner une couleur et la copie automatiquement dans le presse papier, vous n’avez plus qu’à la coller dans votre code ! Il extrait les couleur d’une page en s’appuyant sur leDOM. Vous pouvez même enregistrer des palettes de couleurs et les partager.

L’outil est léger et sait se faire oublier. Il est disponible en bas à gauche de votre navigateur ou via un clic droit.

Fonctionnalités principales

• Pipette pour sélectionner les couleurs de la page
• Palette de couleur (simples à enregistrer et partager)
• Analyseur des couleurs du DOM
• Zoom
• Copie automatique de la couleur dans le presse papier
• Gestion de formats de couleurs multiples (Hexadécimal, RVB, TSV…)

Un outil vraiment bien pensé et donc indispensable pour gérer ses couleurs web au quotidien qui mérite ses 5 étoiles.

Sur le même thème

• Les plugins Firefox : XRefresh
• Les plugins Firefox : TileTabs
• Les plugins Firefox : FoxyProxy
• Navigateur Web standard : Firefox
• Les plugins Firefox : Firebug

Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l’éditeur par défaut est vraiment trop simpliste.

C’est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l’on veut rapidement retrouver ses repères.

Photo de PSD depuis Flickr

Fonctionnalités

Notepad++ est un outil très complet, ces principales fonctionnalités sont :

• Coloration syntaxique (PHP, Java, SQL, CSS, HTML, Javascript, YAML…)
• Éditeur WYSIWYG
• Auto-complétion
• Affichage de fichier et édition multiple simultanée
• Fonction de recherche avec expressions régulières
• Auto détection de modifications de fichiers
• Gestion de macros
• Zoom
• Multilingue

Vous trouverez toute la liste des fonctionnalités de Notepad++ sur le site de l’éditeur.

Plugins

Cette liste n’est pas exhaustive car en plus Notepad++ est extensible avec une très belle liste de plugins dont voici les plus intéressants à mon goût :

• Éditeur hexadécimal
• Édition de fichier via un explorateur FTP
• Gestionnaire de tags HTML
• Correcteur orthographique
• Réducteur dans la barre de tâches
• Édition XML (multiples outils)
• Gestionnaire de plugins

Astuces

Cet outil s’intègre parfaitement à Windows, vous pourrez ainsi le mettre dans le menu contextuel de Windows et y accéder via le clic droit de votre souris ou tout simplement l’utiliser par défaut à la place du bloc-notes de Windows.

Ces astuces sont à voir sur la page de téléchargement de l’application.

Site de l’éditeur & téléchargement

Vous pouvez télécharger Notepad++ sur le site de l’éditeur :

• Site officiel de Notepad++

Aide, forum et wiki

Si vous avez besoin d’aide pour débuter avec Notepad++, des forums multilingues et un wiki en anglais répondront probablement à toutes vos questions.

• Forums
• Wiki

Mon avis

Personnellement, je l’utilise depuis des années sans aucun soucis. Son ergonomie est très bonne, et ses plugins très nombreux permettent de répondre à toutes les attentes. Il est simple mais fonctionnel, vous le trouverez bientôt indispensable.

Et n’oublier pas, Notepad++ est un outil gratuit, pensez à aider le projet en traduisant ou en apportant une contribution financière.

Sur le même thème

• Outils XML : Cooktop
• Les plugins Firefox : XRefresh
• Comparaison et fusion de fichiers et de dossiers
• Les plugins Firefox : Colorzilla
• MySQL GUI Tools

Il faut bien avoir en tête que ce sont les petits gains par ci par là qui feront la différence. Cela vous demandera finalement assez peu de travail pour les premiers résultats et beaucoup plus pour arriver à un résultat parfait. Mais même sans pousser la démarche jusqu’au bout, l’effet sera bénéfique en termes d’audience, et votre taux de transformation devrait augmenter lui aussi.

Voici donc quelques conseils, et quelques références afin de maîtriser le sujet

Photo de GemMoth depuis Flickr

L’optimisation c’est quoi ?

On peut voir dans un premier temps l’optimisation comme la mise en œuvre des moyens disponibles pour améliorer l’existant. Un second temps permet d’accentuer encore les performances en ajoutant de nouveaux moyens. Nous traiterons uniquement du premier point ici. Changer d’hébergeur ou de serveur pour augmenter vos performances est un solution, mais avant cela tout un panel de techniques permet de faire mieux avec les mêmes ressources.

Quelques statistiques

La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50)Une page web c’est en moyenne 500 mots et 600 balises HTML ! Si l’on ajoute a cela que le nombre de connexion RTC est encore non négligeable aux États-Unis par exemple.

Perdre 500ms c’est perdre 20% de trafic pour Google et réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google. Augmenter la latence de 100ms c’est perdre 1% de ventes pour Amazon. Pour Yahoo! perdre 400ms c’est avoir 5 à 9% d’abandon en plus.

A partir de 4 secondes d’attente on perd massivement les visiteurs…

Que doit on améliorer ?

Les améliorations à prévoir sont au niveau du paramétrage du serveur, de la qualité du code, de choix techniques, de la gestion des composants web…

Des outils sont là pour vous aider à identifier les points importants parmi lesquels on trouve des plugins Firefox :

• Yslow
• Google Page Speed

Et des sites de mesure de performance :

• site-perf
• IBM Page Detailer
• Web Pagetest

Notez que ces derniers pourrons vous permettre de tester votre site depuis l’autre bout du monde et voir les impacts que cela a sur votre site.

Deux règles principales pour la performance des sites web sont de réduire le nombre de requêtes HTTP et de limiter la taille des données qu’on télécharge. Voyons cela plus en détail.

Optimisation de la configuration du serveur

La mise en cache

La mise en place d’un cache côté serveur est une bonne chose et permettra de fournir un contenu plus rapidement à l’internaute, mais le protocole HTTP permet lui aussi quelques prouesses. Il est efficace pour la moitié des utilisateurs qui affichent une première page de votre site. Soit parce qu’ils sont déjà venus auparavant ou parce que vous partagez des ressources avec d’autres sites via des CDN.
Dès la deuxième page de votre site il est bénéfique pour 80% des utilisateurs, les 20% restants ayant par exemple désactivé leur cache.

Configurez donc votre serveur pour qu’il envoie des indications de mise en cache au navigateur.

La compression des données

On peut gagner entre 50 et 90% du poids d’une page pour une occupation serveur de 5%. Si votre serveur le permet en terme de ressources, le bénéfice sera immédiat, et encore plus pour les connexions lentes.

• Tests de compression de pages web
• Visualiseur de ressources réseau

ETags

Désactivez les ETags si le site est en cluster. Leur performance est alors très aléatoire. Si vous n’avez pas de cluster, vous pouvez les laisser, même si YSlow vous fait la remarque.

Impacts de la latence réseau

Avec un temps de latence avec le serveur de 20ms, pour 25 requêtes externes on perd donc une demi seconde ! Et encore le temps de latence est plus souvent entre 30 et 60 ms. On peut cependant relativiser un peu car la parallélisation des téléchargements permet de limiter cet effet.

Il est donc important de limiter le nombre de composants à charger par page.

L’utilisation de connexions persistantes sur des serveurs statiques (CDN) paraît être un bon moyen de limiter les effets de la latence, mais son paramétrage peut être délicat et dépends de votre cas particulier. L’abus de cette techniques pourrait avoir l’effet inverse en engorgeant le serveur de connexions persistantes inutiles.

Pour la concaténation de vos fichiers, un module d’Apache permet de faire le travail côté serveur, je ne l’ai pas testé, mais j’attends vos retours sur le sujet dans les commentaires :

• Mod_concat

Optimisation du code source

HTML

Un code standard limite le travail de l’interpréteur HTML, par rapport à un code illisible que le navigateur devra corriger à la volée.
Limiter la profondeur du DOM pour limiter le reflow, c’est à dire la réorganisation de la page par le navigateur en cas de changements au niveau de la structure de la page. Pour les tableaux vous pouvez utiliser le mode de rendu fixe des tableaux HTML pour limiter le reflow.

Vous devez limiter les iframes qui sont coûteuses en termes de performances, même vides.

CSS

Pour les frameworks CSS, utiliser un cache central (google, yahoo…) permet de partager un cache avec tous les autres utilisateurs du CDN. Ainsi il y a de fortes chances pour que vos librairies soient déjà en cache dans le navigateur de votre visiteur.

Mettre les scripts en début de page pour que le navigateur puisse faire la mise en page le plus tôt possible.
L’utilisation conjointe de scripts externes minimisés, permet de gagner jusqu’à 25% du poids des feuilles de style.

Ne pas utiliser @import pour les CSS, moins performant et ne pas utiliser les filtres CSS, non standard et très coûteux en ressources. Si vous avez des modifications CSS à faire, faites les d’un seul coup pour éviter le reflow et non pas dans une boucle !

Javascript

Pour les bibliothèques génériques (jQuery, Dojo…) l’utilisation d’un cache central (google, yahoo…) permet comme pour les CSS de partager un cache avec tous les autres utilisateurs du CDN.

Pour optimiser encore mettez les scripts en fin de page. Le navigateur pourra afficher la page correctement avant de les charger, et l’utilisateur pourra naviguer avant la fin du chargement. Le temps qu’il interagisse avec la page, le Javascript sera chargé.

Comme pour les CCS, des scripts externes minimisés, permettent de gagner jusqu’à un tiers du poids des fichiers.

• CSSOptimiser
• CleanCSS

Et dans vos scripts utilisez des sélecteurs précis basés sur l’id et pas sur les classes css, l’identifiant étant unique la navigateur retrouve plus facilement la balise demandée; que si il doit analyser toutes celles de la page.

Ajax

Ajax permet d’améliorer le ressenti utilisateur en limitant le rechargement de la page au strict minimum. C’est donc une bonne piste d’optimisation, mais attention à le faire le mieux possible. Pour cela, envoyer les requêtes AJAX avec la méthode get et utiliser le cache de requête HTTP.
Pour le format de données vous pouvez utiliser JSON ou XML, les deux solutions ont leurs avantages et inconvénients, mais sont bien plus performantes que d’envoyer du code HTML pur !

Optimisation des images

Les formats d’image

En JPEG on peut gagner jusqu’à 90% du poids d’une image avec une perte acceptable (compression autour de 55, à tester car chaque logiciel implémente sa propre échelle de compression). Idéal pour les photos.

En PNG on peut gagner entre 75 et 90% du poids de l’image sans perte. Idéal pour des images avec du texte. Attention à prendre du PNG8 et non pas 24 !

Le GIF ne devrait jamais être utilisé, sauf éventuellement pour du GIF animé.

Sprites et métadatas

L’utilisation des sprites, permet de diminuer l’impact du temps de latence et le poids des images. Le poids du sprite généré est inférieur à la somme des images qui le composent !

• Sprites CSS : Meurs, découpe d’images, meurs !
• CSSSprites
• SpriteGen

La suppression des metadata des images avec Smushit, Optipng, Pngcrush ou PunyPng apporte un gain de 15% environ du poids des images en supprimant les données inutiles dans un contexte web des photos.

• PNGCrush
• OptiPNG
• PunyPNG

Favicon

Même si il n’est pas spécifié, les navigateurs le cherchent et chargent une page 404 si il n’est pas présent. Cela peut donc être très coûteux, surtout si votre page d’erreur personnalisée est lourde.

Ma référence pour avoir des information et des tests sur le traitement des images :

• CSS-IG : Optimisation Web, format PNG

D’autres pistes d’optimisation

Il faut à tout prix limiter les redirections sur la page d’accueil, cela augmente la latence et n’est souvent qu’un mauvais palliatif à une solution plus pérenne. Ce n’est d’ailleurs pas bon non plus pour votre référencement.

Les cookies

Un cookie est envoyé avec chaque requête http, il faut limiter strictement leur taille, un cookie de 1ko retarde la réponse de 16ms en moyenne, avec 50 composants dans la page, on gagne donc 0,8s ! Il faut donc si vous le pouvez limiter les cookies aux sous domaines afin qu’il s n’impactent pas le téléchargement des autres ressources. En utilisant un CDN ou un sous domaines pour les données statiques, vous règlerez le problème.

DNS

Le temps de résolution d’un domaine tourne autour de 30ms. Multiplier le nombre de domaine permet de paralléliser les téléchargements. Certains « vieux » navigateurs ne téléchargent que deux ressources simultanément, mais les plus récents en prennent 4 fois plus en moyenne. Limiter le nombre de domaines à 4 est un bon compromis.

Buffer

Il est important également d’envoyer votre buffer le plus rapidement possible. L’utilisateur verra sa page commencer à se charger plus rapidement. Son ressenti sera bien meilleur, surtout si les temps de génération de votre page sont longs.

Références utiles

Une des meilleures références sur le sujet est en français. Vous y trouverez beaucoup d’explications

• Le blog d’Éric Daspet sur les performances web

Les autres en anglais sont aussi de très bonne facture :

• Les bonnes pratiques par Yahoo
• Les bonnes pratiques par Google
• Le blog de Steve Souders

Conclusion

Une fois tous ces éléments mis en place, votre site doit avoir retrouvé de sa vigueur et si tout n’est pas encore parfait, il est peut être temps de passer à l’étape deux. Votre site à probablement besoins de moyens spécifiques, mais ces conseils lui sont déjà profitables et sont suffisants pour la plupart des projets web.

un livre sur le sujet devrait paraitre bientôt, je ne manquerai pas de vous tenir informé !

Merci à Eric Daspet de m’avoir ouvert les yeux sur ce sujet aussi utile que passionnant.

Sur le même thème

• Les générateurs de sprites CSS
• Bien utiliser les feuilles de style (CSS)
• Recette & environnements de test
• Utiliser Chrome et violer la neutralité ?
• Les plugins Firefox : Colorzilla

Définition

• Définition de CSS

Photo de Courambel depuis Flickr

Historique

Les feuilles de style sont nées dès l’invention du web, mais elles étaient à l’origine destinées à l’internaute lui même qui pouvait ainsi faire sa propre mise en page pour son confort de lecture personnel. Plusieurs implémentations ont ensuite été proposées par les différents éditeurs de navigateurs web, puis à la création du W3C, La norme CSS1 est créée dès 1996. Les différents navigateurs de l’époque l’implémentent de manière partielle et faussée.
En 1998, le W3C publie la recommandation CSS2, elle aussi ne sera que partiellement utilisable et buggée notamment dans Internet Explorer 6.
A partir de 2001 une version CSS2.1 corrige les problème de la version précédente en intégrant les usages réels des navigateurs.

Aujourd’hui la norme 3.0 est en cours d’écriture, mais depuis 1999 ! Aucun module n’est fini et les navigateurs n’appliquent les nouvelles fonctionnalités que de manière expérimentale.

Pour plus d’information lisez l’historique complet des feuille de style en cascade sur Wikipédia.

A quoi ca sert

Les feuilles de style en cascade, souvent abréviées CSS, sont un langage informatique normalisé par le W3C qui permet de mettre en forme les document HTML et XML et donc XHTML de façon simple et homogène.

Le principe réside dans la séparation entre le contenu et la mise en forme. Il est ainsi très simple de changer la mise en forme sans toucher au contenu ou d’appliquer une même mise en forme sur une multitude de contenus. On peut ainsi écrire le contenu sans se soucier de la mise en forme et changer la mise en forme uniformément sur toutes les pages d’un site en ne modifiant que le fichier CSS.

Les styles peuvent être définis dans un fichier séparé du contenu HTML, au début d’un fichier HTML, ou directement dans les balises HTML. La première solution est la meilleure et permet une bonne séparation du contenu et de la mise en forme. L’héritage, permet aussi de définir des propriétés générales et d’autres plus précises qui héritent des propriétés générales de leurs parents, ainsi pas besoin de tout redéfinir pour chaque balise.

Les feuilles de style sont définissables par média. Ainsi vous pouvez définir une image pour un affichage sur un écran et ne pas l’afficher pour une impression sur papier. L’internaute vous en sera reconnaissant.

Un très bon exemple de l’utilisation que l’on peut faire des feuilles de style est sans conteste le site caméléon CSS Zen Garden, qui change complètement de style au gré des propositions de mise en page de contributeurs aux goûts divers et variés.

Comment apprendre ?

Bien sûr il faut connaître la référence française en la matière depuis déjà quelques années : Alsacréations, vous y trouverez toutes les informations nécessaires, des tutoriels, et un forum accueillant ou l’on vous aidera volontiers.

Je vous conseille aussi un bon tutoriel CSS de Joe Gillespie traduit par Pompage

Les normes

Les normes sont toutes accessibles sur le site du W3C, certaines sont traduites en français, je vous livre ici les principales à connaître ou à découvrir.

• La Voir norme CSS 2.1 officielle en anglais
• La norme CSS 2 traduite en français
• Voir les documents de travail de la norme CSS 3 en anglais

Les bonnes pratiques

• Utilisez tout le temps des feuilles de style, ne définissez jamais vos styles directement dans une page
• Valider les fichiers afin d’être sûr qu’il respectent les normes
• Utiliser les hacks avec parcimonie, respectez les standards, les navigateurs suivront
• Essayer d’avoir un seul fichier CSS par média sur un site en production, afin d’optimiser le temps de chargement des pages
• Utilisez une feuille de style par média afin de définir des propriétés spécifiques à chaque rendu
• Utilisez un framework ou un fichier « reset » pour gagner du temps, ne réinventez pas la roue à chaque nouveau site

Les outils

Validateur

Comme pour HTML, il est parfois bien utile d’avoir un avis rapidement sur la validité du code, afin de traquer les petites imperfections que l’on a pu laisser passer.

• Valider des feuilles de style

Frameworks

Pour vous faciliter la tâche, les frameworks CSS vous permettent aujourd’hui de gérer la base de votre feuille de style. Ils permettent d’initialiser les styles afin de les rendre similaires d’un navigateur à l’autre, ils définissent un layout générique utilisable facilement, le mot clé est la simplicité et la réutilisabilité.

• Blueprint
• Yahoo library CSS tools

A noter que pour les librairies Yahoo, vous pouvez faire un lien directement vers les serveurs de Yahoo et en pas héberger les scripts. Ainsi le fichier étant le même que celui de Yahoo et une multitude d’autres sites, il est probable que l’internaute visitant votre site l’ai déjà en cache dans son navigateur.

Extensions Firefox

• Web developper toolbar
• Firebug

La barre d’outil « developper toolbar » est un incontournable du développeur, elle permet bien plus que la manipulation des CSS, mais sur ce point qui nous intéresse, elle
autorise par exemple la désactivation des styles, ou le changement de feuille de style à la volée.
Firebug permet d’inspecter au plus profond des feuilles de style et d’ajouter, modifier ou supprimer des propriétés, de les visualiser graphiquement, là aussi cet outil vous réserve bien d’autre utilisations pour le code HTML et Javascript principalement.

Ces outils feront l’objet de prochains articles plus détaillés.

Bibliographie

Encore un excellent mémento, et un livre référence indispensable pour creuser le sujet.

• Mémento CSS de Raphaël Gotter
• CSS par Éric Meyer

Vous pourrez aussi approfondir le sujet avec un livre sur l’utilité des standards

• Design web : Utiliser les standards, CSS et XHTML

Ce dernier livre date peu être un peu, et est en rupture de stock, mais on le trouve d’occasion, et à la vitesse ou avancent HTML et CSS, et pour les principes qu’il défend, il est loin d’être dépassé.

Les sites de référence

• Alsacréations
• Tutoriel CSS sur Pompage.net

Pour aller plus loin avec les CSS

Une nouvelle approche des CSS fait désormais son apparition, CSS Orienté Objet ou OOCSS. Je vous laisse vous faire votre propre idée…

Vous avez vous aussi certainement des astuces et de bons outils pour travailler les CSS, j’attends vos remarques avec impatience pour partager avec vous sur ce sujet très intérressant.

Sur le même thème

• Bien écrire HTML & XHTML
• Les plugins Firefox : XRefresh
• Les générateurs de sprites CSS
• Livre : CSS3 pour les webdesigners
• Optimiser son site web

Photo de ooti depuis Flickr

Je vais donc vous présenter les différentes ressources de qualité sur le sujet que l’on trouve sur Internet. Le but de cet article est de vous donner toutes les pistes. Vous n’avez plus qu’a les suivre !

Définitions

• Définition de HTML
• Définition de XHTML

Historique

La première version de la norme date de 1991, son auteur Tim Berners-Lee préside aujourd’hui le W3C, le consortium chargé de promouvoir la compatibilité des technologies web.

La version actuelle de HTML est la 4.01, c’est une correction de la version 4.0 qui date de 1997. Depuis peu d’évolutions, la version 5 est en préparation. Le seul point marquant de ces dernières années est l’arrivée de XHTML, qui est le portage de HTML en XML. Cette évolution permet notamment de gagner en qualité du code, l’apport de XML oblige à plus de rigueur. Certaines facilité du langage HTML ne sont plus permises, le code est donc plus homogène et les navigateurs interprètent donc plus facilement un code qu’ils lisent mieux.

Les navigateurs récents tels que IE8 ou Firefox 3.x respectent de plus en plus en plus les standard et affichent d’ailleurs de mieux en mieux les pages qui respectent les normes.

A quoi ca sert ?

Le langage HTML ne permet pas de faire le rendu visuel d’un texte. En fait il ne permet que le balisage de celui ci. Ainsi un titre aura une balise de titre. En lisant la source du code, on comprendra qu’il s’agit d’un titre, mais le rendu lui sera fait par les CSS. Vous comprenez bien que sur un Iphone ou sur un écran 20 pouces, le rendu ne sera pas le même, mais notre titre sera toujours un titre.

Vous pouvez ainsi définir les éléments de votre page tels qu’un texte, une image, une vidéo, un formulaire, des liens bien sûr, mais aussi des tableaux des listes…

HTML vous permet ainsi d’afficher votre contenu, mais aussi de questionner l’internaute au travers de champs de formulaire, par des questions ouvertes avec des champs texte, par des questions fermées à réponse simple ou multiple, et même de l’enregistrement de fichier.

Comment apprendre ?

Vous trouverez de multiples cours sur HTML, mais méfiez vous, la plupart présentent un code non standard qui risque d’être mal compris par les navigateurs, et qui risque d’être obsolète dans les navigateurs futurs. Référez vous donc le plus souvent à la norme HTML ou au mémento de Raphaël Goetter par exemple.

L’utilisation du validateur vous montrera également vos erreurs en vous donnant des pistes pour les corriger.

Les normes

Les normes ne sont pas toujours faciles à lire, mais heureusement la traduction française apporte un peu plus de clarté sur certains points techniques.

• La norme HTML 4.01 officielle en anglais
• La norme HTML 4.01 traduite en français
• La norme XHTML 1.0 officielle en anglais
• La norme XHTML 1.0 traduite en français
• La norme XHTML 1.1 officielle en anglais
• La norme XHTML 1.1 traduite en français

Les bonnes pratiques

• Utiliser le doctype approprié
• Respecter la norme associée au doctype
• Évitez l’utilisation d’éditeurs WYSIWYG, leur interprétation laisse parfois à désirer
• Ne pas utiliser de balises HTML « propriétaires »
• Indenter correctement son code source pour le rendre plus lisible

Outils

Il n’est pas toujours facile d’avoir en tête toutes les propriétés de chaque élément HTML, aussi n’hésitez pas à vérifier la validité de vos pages.

• Validateur de code HTML et XTML du W3C
• Validateur de code Validome

Bibliographie

La gamme « mémento » chez Eyrolles présente sous forme de livret plastifié et indéchirable l’essentiel d’un point technique pour seulement 5€. Un indispensable !

• Mémento XHTML de Raphaël Goetter chez Eyrolles

Quiz

Vous avez bien compris tous les éléments présentés ? Testez vos connaissances ! Attention, le premier test n’est pas aussi facile que l’on pourrais le croire.

• Combien de balises HTML pouvez vous citer en 5 minutes ?
• Testez vos connaissances HTML en 20 questions

Vous voilà je l’espère un peu plus à l’aise avec la notion de langage de balisage. N’hésitez pas à posez vos questions en commentaires.

Un des buts de ce site étant l’échange et l’apprentissage, proposez aussi vos références bibliographiques, liens ou bonnes pratiques sur le sujet.

Sur le même thème

• Bien utiliser les feuilles de style (CSS)
• Livre : HTML5 pour les webdesigners
• Aide mémoire & antisèche : Les cheat sheets
• Bien développer en PHP (partie 1)
• Bien utiliser Javascript