Webaaz » CSS http://www.webaaz.com Le développement web de A à Z Thu, 19 Jan 2012 11:40:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Livre : CSS3 pour les webdesignershttp://www.webaaz.com/2011/02/livre-css3-pour-les-webdesigners/ http://www.webaaz.com/2011/02/livre-css3-pour-les-webdesigners/#comments Thu, 03 Feb 2011 09:17:21 +0000 Martin http://www.webaaz.com/?p=1066 pour les webdesigners c'est peut être un peu tard, j'espère qu'ils se sont déjà intéressés à la question, mais pour les autres ce sera une bonne entrée en matière. Comme pour le premier tome, HTML5 pour les webdesigners, ce livre rassure sur la manière de faire, explique rapidement les bases, dédramatise et simplifie la prise en main, le tout dans un style bien écrit et agréable à lire ! L'auteur ne se limite pas à aborder les points technique mais pose des questions et explique ses réponses et remarques, très utile pour bien comprendre les enjeux ! As good as heart can wish Photo de Abulic Monkey depuis Flickr]]> Pour ce second opus de la collection, encore un sujet vendeur pour la période, CSS3 ! Bon, pour les webdesigners c’est peut être un peu tard, j’espère qu’ils se sont déjà intéressés à la question, mais pour les autres ce sera une bonne entrée en matière.

Comme pour le premier tome, HTML5 pour les webdesigners, ce livre rassure sur la manière de faire, explique rapidement les bases, dédramatise et simplifie la prise en main, le tout dans un style bien écrit et agréable à lire ! L’auteur ne se limite pas à aborder les points technique mais pose des questions et explique ses réponses et remarques, très utile pour bien comprendre les enjeux !

As good as heart can wish
Photo de Abulic Monkey depuis Flickr

L’auteur

Dan Cederholm est le fondateur du studio de design SimpleBits, expert reconnu sur le webdesign et les standards. Il est également co créateur de dribbble, joueur de yukulele et auteur des livres suivants :

  • Handcrafted CSS (New Riders)
  • Bulletproof Web Design, Second Edition (New Riders)
  • Web Standards Solutions

Utiliser CSS3 aujourd’hui

Dan conseille de ne surtout pas lire la spécification, elle n’est pas faite pour tout le monde, en revanche, tout le monde peut utiliser CSS3, il liste ce qui peut être utilisé dès maintenant, et aborde les préfixes de navigateur, indispensable pour une implémentation immédiate et pérenne.

Comprendre les transitions CSS

Le chapitre aborde les transitions, et les mets en valeurs avec un exemple à suivre tout au long du livre.

Broder avec CSS3

Je reprends les sous titres de chapitre très bien trouvés, qui expliquent que CSS3 est là pour apporter surprise et émerveillement. C’est la touche ne plus qui améliore l’expérience utilisateur, sans pénaliser ceux qui n’en bénéficient pas.
Dan pose la question : les sites web doivent ils offrir exactement la même expérience dans tous les navigateurs ? Et y réponds avec ce site au nom tout trouvé : dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Transformer le message

Toujours avec le même fil directeur, les exemples s’enchaînent pour aborder les transformations et les rotations

Arrières plans multiples

Arrière plans multiples, effets de parallaxe sont au sujet de ce chapitre.

Enrichir les formulaires

Autre sujet très intéressant sur l’ajout de CSS3 dans les formulaires. Pour embellir et alléger les boutons avec des dégradés ou des ombres, mais aussi l’ajout d’animations au focus ou au survol des éléments pour un changement de style tout en douceur.

Conclusion

On termine par un chapitre qui donne les clés pour évangéliser, aborde le futur de langage et donne une précieuse liste de liens indispensables pour creuser un peu !

J’en veux un !

Toute ressemblance avec l’atelier de Jérémie Patonnier au dernier Paris Web est certainement fortuite, mais bon enfin, ils causent du même sujet… Pour ceux qui avaient oublié de prendre des notes, ca fera un bon résumé !

On regrettera que le livre n’aborde pas les sujet suivants :

  • media queries
  • multicolonnage
  • webfonts

Mais on peut penser que cela fera l’objet de prochains volumes, les media queries étant déjà annoncées dans le tome 4.

Le deuxième tome de la collection est sorti rapidement et la suite de la collection devrait se faire au même rythme, c’est l’avantage avec ces petits formats, rapide à lire, mais aussi à écrire, facile à transporter. J’ai pris l’habitude les lire dans le train, et de faire le billet dans la foulée… Mention spéciale si je ne l’avais pas déjà faite au raccourcisseur d’url utilsé spécialement pour le livre, très utile pour éviter de taper des urls à rallonge, avec l’url originale en note de bas de page ! A quand le QRcode ?

La collection

Les tomes suivants sont donc annoncés :

  • 3 – The elements of content strategy – 8 mars 2011
  • 4 – Responsive web design – printemps 2011

Dans cette jolie collection j’ai aussi envie de voir des livres sur l’ergonomie, l’accessibilité, Javascript, la typographie (micro & macro)…

Sur le même thème

]]> http://www.webaaz.com/2011/02/livre-css3-pour-les-webdesigners/feed/ 2 Les générateurs de sprites CSShttp://www.webaaz.com/2010/04/les-generateurs-de-sprites-css/ http://www.webaaz.com/2010/04/les-generateurs-de-sprites-css/#comments Wed, 28 Apr 2010 13:06:20 +0000 Martin http://www.webaaz.com/?p=540 CSS est désormais éprouvée et bien documentée. Il existe de bons ressources pour les mettre en place simplement et pourtant, on en voit finalement assez peu. 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 projet web. Pour vous sensibiliser à cette technique je vais donc vous présenter quelques outils utiles à sa mise en place. Sprite Photo de Jeff Kubina depuis Flickr]]> La technique des sprites CSS est désormais éprouvée et bien documentée. Il existe de bons ressources pour les mettre en place simplement et pourtant, on en voit finalement assez peu.

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.

Sprite
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 :

Méthode

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

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 :

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 !

software

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

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

]]> http://www.webaaz.com/2010/04/les-generateurs-de-sprites-css/feed/ 1 Les plugins Firefox : XRefreshhttp://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/ http://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/#comments Thu, 18 Feb 2010 16:28:09 +0000 Martin http://www.webaaz.com/?p=523 Firebug, je vais maintenant vous présenter une extension de ce plugin. En effet, Firebug est très complet techniquement mais extensible. Ainsi ses fonctionnalités sont exploitées par d'autres plugins pour répondre à tout type de fonctionnalité. Glaçons bleus Photo de Darrren Hester depuis Flickr]]> Firefox est la référence incontesté pour les développeurs web. Son rendu est excellent, mais c’est surtout pour la multitude d’outils qu’il propose qu’il fait la différence. Je vous avais déjà présenté Firebug, je vais maintenant vous présenter une extension de ce plugin. En effet, Firebug est très complet techniquement mais extensible. Ainsi ses fonctionnalités sont exploitées par d’autres plugins pour répondre à tout type de fonctionnalité.

Glaçons bleus
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 :

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

]]> http://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/feed/ 0 Les plugins Firefox : Colorzillahttp://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/ http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/#comments Tue, 22 Dec 2009 11:30:19 +0000 Martin http://www.webaaz.com/?p=427 CSS pour au final avoir un rendu le plus agréable possible. 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. Coucher de soleil en technicolor Photo de Richard0 depuis Flickr]]> Dans tout projet web, la gestion des couleurs est une composante essentielle du graphisme. Des premières maquettes jusqu’à l’intégration, nous avons besoin d’outils pour travailler les couleurs, échanger avec les graphistes, gérer nos CSS pour au final avoir un rendu le plus agréable possible.

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.

Coucher de soleil en technicolor
Photo de Richard0 depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de 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

]]> http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/feed/ 1 Optimiser son site webhttp://www.webaaz.com/2009/10/optimiser-son-site-web/ http://www.webaaz.com/2009/10/optimiser-son-site-web/#comments Thu, 01 Oct 2009 16:00:03 +0000 Martin http://www.webaaz.com/?p=267 Photo de GemMoth depuis Flickr]]> La vitesse d’affichage d’un site web est très importante pour capter les visiteurs. Les internautes sont dans l’instantanéité et ne veulent pas attendre pour voir votre page. Avec quelques astuces simple à mettre en place, vous pouvez retenir vos visiteurs et améliorer leur expérience d’utilisateur, ce qui les incitera à revenir.

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

La vitesse de la lumière
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 :

Et des sites de mesure de performance :

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.

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 :

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.

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 !

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.

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 :

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

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

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

]]> http://www.webaaz.com/2009/10/optimiser-son-site-web/feed/ 5 Les plugins Firefox : Firebughttp://www.webaaz.com/2009/09/les-plugins-firefox-firebug/ http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/#comments Thu, 03 Sep 2009 08:00:11 +0000 Martin http://www.webaaz.com/?p=230 Firefox. L'une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l'affichage de votre page. Insecte de couleur feu en Iran Photo de Hamed Saber depuis Flickr]]> Pour le développement web, il existe plusieurs extensions très pratiques pour améliorer la qualité de son code, le déboguer, ou l’optimiser. Elles sont véritablement plébiscitées par les développeurs, et sont en partie à l’origine du succès de Firefox. L’une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l’affichage de votre page.

Insecte de couleur feu en Iran
Photo de Hamed Saber depuis Flickr

Installation

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

Présentation

Firebug permet d’infiltrer le code source de votre page web afin de vérifier ce qui s’y passe, aussi bien pour le DOM, le code HTML, les CSS, le Javascript ou les requêtes AJAX. Vous pourrez même agir en direct sur le code et voir les effets de vos modifications instantanément.
Pour cela Firebug est doté d’un débogueur, d’une console d’erreur, et d’une ligne de commande.

Fonctionnalités principales

Pour HTML et CSS, vous pouvez afficher le code lié à chaque balise HTML, et voir toutes les propriétés définies que ce soit directement ou par héritage. En modifiant ces valeurs vous pourrez vous rendre compte des changements de rendu immédiatement.

Coté Javascript vous pourrez ainsi visualiser le code lié à la page et le suivre pas à pas dans son exécution. Les erreurs sont visibles dans la barre d’état et affichées dans la console. Vous pourrez également interagir avec Javascript grâce à la ligne de commande.

AJAX bénéficie aussi de fonctionnalités bien pratiques. Vous pouvez ainsi visualiser les requêtes envoyées et les réponses obtenues en temps réel.

Le profilage d’application est également facilité avec un outil graphique qui permet de visualiser les requêtes HTTP et les temps de réponse qui en découlent.

Tutoriel

L’extension est tellement complexe et puissante que je vous recommande la lecture d’un très bon tutoriel :

FirebugLite

Une version plus légère mais tout aussi pratique peut être embarquée dans d’autres navigateurs comme Internet Explorer, Opéra ou Safari. Utile donc pour finaliser votre développement sur ces environnements.

Les extensions

Firebug à beau être une extension, cela ne l’empêche pas d’être extensible ! D’autres extensions Firefox étendent encore les possibilités de Firebug parmis lesquelles on retrouve :

Je reviendrais bientôt sur certaines de ces extensions qui méritent un article spécifique. En attendant vous en trouverez en tout plus d’une vingtaine sur le site de l’éditeur :

Et si vous n’en avez pas encore assez, il ne vous reste plus qu’a créer votre propre extension pour Firebug, pour cela rendez vous sur le groupe Google « Firebug Working Group » créé à l’occasion.

Voilà, vous avez désormais les cartes en main pour déboguer facilement vos applications. Bon courage !

Sur le même thème

]]> http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/feed/ 0 Bien utiliser les feuilles de style (CSS)http://www.webaaz.com/2009/05/bien-utiliser-les-feuilles-de-style-css/ http://www.webaaz.com/2009/05/bien-utiliser-les-feuilles-de-style-css/#comments Fri, 15 May 2009 19:58:47 +0000 Martin http://www.webaaz.com/?p=58 bien écrire le code HTML & XHTML, voyons aujourd'hui comment bien utiliser les feuilles de style CSS. Feuille sous la pluie Photo de Courambel depuis Flickr]]> Après avoir vu comment bien écrire le code HTML & XHTML, voyons aujourd’hui comment bien utiliser les feuilles de style CSS.

Définition

Feuille sous la pluie
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.

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.

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é.

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

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.

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

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

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

]]> http://www.webaaz.com/2009/05/bien-utiliser-les-feuilles-de-style-css/feed/ 0