Vous voulez un bon éditeur de page HTML et CSS, vous cherchez le bon plugin jQuery pour votre projet ou vous êtes tout simplement friand de ressources indispensables pour la création de sites web et vous utilisez WordPress ? Le titre est trompeur : il n’y a pas 1000 ressources, mais bien plus à découvrir… Attention, cette liste est vivante et grandit avec vos suggestions !

La boite à outils du codeur de site web

Ressources complémentaires pour jQuery

• jQuery.com – le site officiel pour télécharger et pratiquement tout savoir sur cette biblothèque.
• Liste des plugins sur jQuery.com — Environ 500 plugins classés par catégorie, par nom ou par date.
• jQuery.info — le site francophone pour découvrir et utiliser jQuery avec de nombreux tutoriaux et plugins.
• Visual jQuery — Affiche une la liste des fonctionnalités de jQuery sous forme d’un menu hiérarchique, par exemple : DOM > Attributes > addClass(class) > Description | Returns | Parameters | Example. S’arrête à la version 1.1.2 mais reste intéressant malgré tout.
• Les intégristes — inauguration et introduction à jQuery : une page aussi amusante que didactique ;)
• Balylon-design — 3 étapes pour comprendre jQuery
• jQuery à poil sur Youtube ? C’est possible ;)

Autres frameworks Javascript

• Plus de 50 bibliothèques javascript — Le billet date de novembre 2005, alors attendez-vous quand même à quelques pages 404.
• Prototype — Le framework Javascript qui vise à faciliter le développement d’application web dynamique. Ajoutez-y une pincée de Moo.fx et/ou de Scriptaculous et c’est parti pour des effets en veux-tu en voilà !
• The Yahoo! User Interface Library (YUI) — Cette bibliothèque comprend un jeu d’utilitaires et de contrôles écrits en Javascript pour concevoir des applications hautement interactives en utilisant le DOM, le DHTML et Ajax. Inclut également un framework CSS.
• Ext JS — Cette librairie a débuté comme extension de YUI. Je vous invite à consulter les exemples pour vous faire une idée des fonctionnalités. (Merci à Frank Taillandier pour l’info).
• Dojo Toolkit — Nous promet de grandes aventures pour 23 Ko seulement !
• Mootools — Accompagné de Moo.fx, vos pages deviennent riches.
• Mochikit — Avec Mochikit, le Javascript craint moins ;)
• qooXdoo — La nouvelle ère du développement web.

Ressources pour webdesigner

750 liens pour webdesigner sur Webdevelopers Field Guide

Micro-bloguez, il en restera forcément quelque chose ;) Merci à burningHat pour m’avoir fourni sur Jaiku cette formidable ressource qui contient à elle seule plus de 750 liens en relation avec le développement web ! dont voici le menu principal :

Encore des mines d’or pour la création de sites web :

• WebAppers — Le chasseur de ressources OpenSource pour les développeurs web : des widgets et des scripts pour votre blog ou votre site web, des polices de caractère, des palettes de couleurs, des photographies, des frameworks, etc.
• 13 effets lightbox en Javascript pour afficher des images, des vidéos, des pages html, etc. Contient également quelques plugins WordPress et Dotclear pour en simplifier l’installation.
• Et plus à venir…

Firefox

Les extensions indispensables pour le webdesigner :

• Web Developer — Véritable couteau suisse : vous avez la main sur l’ensemble des éléments de votre page web
• Firebug — Si vous ne deviez qu’en choisir qu’une, Firebug vous permettra d’éditer et de modifier vos CSS à la volée, de visualiser le DOM et de débuguer vos scripts.
• CSSViewer – Affiche les propriétés CSS calculées en affichant un cadre autour de l’élément pris en compte. Très pratique pour voir rapidement la structure d’une page tout en ayant les propriétés sous les yeux. Parfois agaçant à supprimer (F5 ou resélectionner l’utilitaire).
• YSlow — Analyse vos pages web pour en connaitre les goulots d’étranglement, d’après les règles de performances de Yahoo!
• ColorZilla — Sélectionne les couleurs sur votre écran. Possède en grand nombre d’options souvent méconnues pour retrouver vos couleurs dans l’historique ou afficher des palettes de couleurs très complètes.
• FireShot — Faites des captures d’écran tout en annontant, recadrant la partie qui vous intéresse. Le screeshot peut être enregistré sur le disque dur ou copié pour consommation immédiate !
• HTML Validator — indispensable pour s’assurer de la validité de votre page localement au regard des recommandations. Possibilité de choisir le mode de validation : Tidy ou OpenSP tout deux développés par le W3C. Tidy a l’avantage d’inclure les trois niveaux d’accessibilité définis par le WAI.

Les meilleures extensions Firefox pour le référencement ? Voici une liste fortement inspirée par celle de webrankinfo :

• Web Developer
• User Agent Switcher
• Customize Google
• Google Advanced Operations Toolbar
• Cache View
• Goldorank
• Google PageRank Status
• LinkChecker
• Live HTTP Header
• SearchStatus
• MetaTags
• SeoQuake
• Niche Watch Tool
• SEOHAND
• KGen
• Alexa Sparky

Tester vos pages web dans différents navigateurs

On n’a pas toujours l’occasion de pouvoir tester ses pages dans toutes les conditions. Voici quelques liens qui vous permettront de tester le design de votre site dans différents navigateurs. C’est rarement la panacée, mais très pratique pour voir si la mise en page résiste globalement à l’épreuve du feu…

• Browsershots — Possibilité d’avoir une capture d’écran de votre page web sous Linux, Windows, Mac OS et BSD : environ 50 navigateurs toutes versions et plate-formes confondues vous attendent.Choix de la résolution, de la profondeur de couleur, activation ou non de Javascript ou Java ou encore Flash.Délais d’attente raisonnable selon l’heure et le nombre d’options activées. Traduit en français.
• Scapture — Propose d’effectuer très rapidement des captures d’écran de vos pages Web sous Linux avec Firefox, Konqueror, Opera ou Dillo. Vous pouvez aussi vérifier l’affichage généré par les navigateurs en mode texte Lynx et Links.
• BrowsrCamp — Permet de tester vos pages sous Safari pour Mac OS X. Possibilité d’avoir la main sur une machine Apple équipé de tous les navigateurs pour Mac. Payant, mais idéal pour tester tous les aspects d’une page web (Javascript, Ajax, Flash, DHTML), à partir de 3$.
• NetRenderer – Vous permet de vérifier le rendu de vos pages web sur Internet Explorer 7, 6 ou 5.5, de manière très rapide. Il est possible de superposer les screenshot de IE7 sur IE6 en les mixant ou en en faisant la différence. Ce dernier mode est efficace pour visualiser rapidement les décalages des blocs.

Monitoring de sites web

94 outils pour monitorer son blog trouvés chez Christophe dont voici un échantillon :

• SEOmoz Page Strength Tool — Le PageRank ne vous donne plus satisfaction ? Ce site se proposse un outil pour calculer la “puissance” de votre page en prenant plusieurs facteurs en considération : l’âge du domaine, le rank Alexa, le nombre de liens entrants d’après Technorati, le nombre de fois où votre site apparait dans del.icio.us, s’il est présent dans l’annuaire DMOZ ou Wikipedia et bien sûr le PageRank du domaine, mais aussi le nombre de liens pointant vers le domaine d’après yahoo! Site Explorer.
• Meta Tag Analyzer — Comme son nom ne l’indique pas assez, se site vous donne la liste des mots-clés trouvés dans les liens et le nombre de fois où ils apparaissent ; les mots-clé présents dans les balises alt de vos images et ceux trouvés sur la page avec le nombre de fois où ils sont présents et leur densité par rapport aux autres.
• IminR — Un outil de mesure d’audience web personnalisé, proposé par Stéphane Guerin aussi bien – sinon mieux – que Google Analytics : rapports personnalisés, parcours de votre site par les visiteurs, etc. A tester d’urgence !
• HeatMap — Pour savoir quelles zones de votre sites sont les plus cliquées.

Icônes et goodies pour photoshop

• Silk Web Icons de FamFamFam — Souvent imité jamais égalé, le pack à télécharger d’urgence.
• IconBase — Des milliers d’icônes pour tous les goût de très bonnes qualités et classées.
• nerdbusiness — Pas moins de 5978 icônes de qualité pour agrémenter vos pages web. Petit coucou à Sonia de Webfruits en passant ;)
• WebsiteIcons — Environ 1000 icônes classées par thème : navigation, flèches (plus de 500), applications, hardware, CMS, calendrier, rechercher, compte, etc.
• PIXELGIRL PRESENTS — Des centaines d’icônes proches du clip-art classées par thème.
• Feed Icons — Tout ce qu’il faut savoir sur les icônes pour signaler vos flux RSS : téléchargement des icônes au format .psd de Photoshop ou .ai d’Illustrator ; exemples de style CSS pour les intégrer dans votre site ou votre blog et guide d’utilisation.
• Svay — 46 icônes pour le web de bonne facture .
• N.DESIGN Studio — Plus de 320 icône en 14×14 avec fond transparent tout spécialement conçues pour vos menus de navigation.
• IconsPedia — Nombreuses icônes de qualité classées par thèmes. Un mauvais moment à passer avec la pub un peu envahissante à chaque changement de rubrique.
• Dezignus — Des icônes sur pratiquement tous les thèmes. Dezignus est aussi une ressource intéressante pour tous ce qui se rapproche du design au sens large : brushes pour Photoshop, tutorials pour Illustrator, photographies aussi diverses qu’utiles, etc.
• WebAppers — Des liens vers des milliers d’icônes très classes pour tous les usages.
• Speckyboy — nous propose une liste de 40 ressources d’icônes libres de droits.
• Hongkiat — la liste ultime d’icônes pour vos flux RSS.
• Smashing Magazine — 35 sets d’icônes vraiment incroyables. Via fran6art.
• Hybridworks –Set de 35 icônes au format `.ico` et `.png` (128×128) dans le plus pur style japonais : élaborée et détaillée. Très classe.
• Naldz Graphics — 300 brosses (brushes) abstraites pour Photoshop.
• Icon Finder — Moteur de recherche parmi 113 000 icônes et 238 collections d’icônes par mots-clés.

Tutoriels ou tutoriaux webdesign

• Webdesign tutoriaux — Plus de 1000 tutoriels pour Illustrator, Photoshop, PHP, XHTML et CSS, The Gimp, Dreamweaver, Fireworks, Flash.
• Babylon Design — Plus de 100 ressources autour de Photoshop et du couple XHTML/CSS
• ELITWORK — Nombreux tutoriels XHTML, référencement, Ajax, Webalizer, Microformats. Des informations pertinentes malgré un partis-pris en faveur des espaces de nommage XML au détriment des microformats, par exemple.
• TUTMARKS.com — Un digg-like spécialisé dans les tutoriaux ? Vous en rêviez ? Mehdi l’a fait. Très nombreux tutos sur à peu près tout les sujets liés au web. Un flux RSS par statut des propositions (tutoriaux publiés, en attente) est disponible, ainsi que le flux de tous les tutoriels proposés
• SmashingCoding — Plus de 60 tutoriels Web Design 2.0.

Références, outils et dictionnaires

Cette grosse liste ne serait pas complète dans les sites de références que l’on devrait avoir sous le coude lorsque la mémoire fait défaut. Suite à un billet sur les 13 outils de l’intégrateur web, j’ai intégré les liens qui en faisait partie, ainsi qu’une partie de ceux qui m’on été founis en commentaires :

• yoyodesign — Nombreuses traductions d’articles et de recommendations du W3C. Voir également la liste des traductions françaises des documents du W3C
• htmldog — C’est en anglais, mais la clarté des explications en fait une référence incontournable pour tout ce qui touche au développement web, avec un dictionnaire HTML où l’on retrouve toutes les balises passées au crible avec des exemples d’utilisation, les attributs requis, les attributs optionels et des exemples !
• gotAPI — regroupe les principales API du web dans une interface Ajax très réactive : HTML, CSS, Javascript, jQuery, PHP, Ruby, asp, mais aussi le fonctionnement de certains CMS comme Drupal ou de services web comme Flickr.
• giminik — La liste des balises XHTML 1.1 (ou 1.0 Strict sans les éléments obsolètes), leur utilité, leurs attributs, leurs évènements et la relation entre parents et enfants (hiérarchie). Indispensable pour construire un document valide.
• Guide HTML — Le HTML de A à Z de Laurent Bernat : 95 balises HTML décrites par le menu (version, compatibilité Netscape / IE, type, attributs, usage, exemples) (Merci Loïc M.)
• Opquast — l’ensemble des bonnes pratiques pour la qualité des services en ligne. Abonnez-vous au fil RSS des bonnes pratiques pour avoir votre dose quotidienne.
• Openweb — Les bonnes pratiques en action pour les technologies du web (XHTML, RSS, CSS, DOM, PNG) et les différents thèmes qui y sont associés (pages dynamiques, navigateurs, accessibilité, études de cas, mise en page, multimédia, structure).
• Développez (pour le web) — toutes les technologies du web à portée de clic. Des tutoriels, des cours, des documents à télécharger. Allez, faites le plein !
• Forum Alsacreations — Presque toutes les questions sur les CSS et le HTML et quasiment toutes les réponses ! Cerise sur le gâteau, la FAQ est complète et bien organisée.
• Wiki Media Box — Pour obtenir une présention claire (succinte ?) d’une propriété CSS et sa compatiblité avec les navigateurs, c’est nickel (Merci Pierre le Bot),
• Leftlogic — Permet de voir le code html d’un caractère, pratique lorsqu’on cherche le code pour ñ par exemple (Merci Anthony),
• Format publicitaire AdSense — Et oui, qui n’a pas eu besoin de prévoir des emplacements publicitaires dans une charte graphique et de chercher les formats les plus courants ? Voici les formats en vigueur chez Google, qu’il s’agisse des formats textes, images ou vidéos.
• Blogmarks — Avec del.icio.us et ma.gnolia, je me suis remis à utiliser blogmarks qui garde un petit quelque chose en plus par rapport aux autres solutions de bookmarking social.
• Bluevertigo — Un maximum de ressources graphiques et typographiques dans une interface toute en scroll horizontal. Au menu : Photothèques, clip-art vectoriel, polices de caractère, logothèques, sons, brosses (brushes) Photoshop, modèles 3D Poser, icônes, palettes de couleurs, générateurs de textes, échantillons graphiques (patterns).
• WordReference — Sans doute le meilleur site de traduction (mot à mot en incluant les locutions idiomatiques). Pour les cas difficiles, vous pouvez utiliser le forum. Nombreux plugins Firefox pour la recherche par langue.
• Les dictionnaires — Un maximum de dictionnaires thématiques classés par catégories : langue française, synonymes, encyclopédie, citations et expressions, gastronomie, humour, acronymes, etc. Mention spéciale pour le Trésor de la Langue Française Informatisée (TLFI pour les intimes) : interface web 0.2 mais très efficace (Florent V. sous souffle dans l’oreillette que l’on peut y accéder via le portail lexical du Centre national de ressources textuelles et lexicales.

Inspiration, expiration…

Section inspirée (ça tombe bien) par e-likko :

• typeish — Sélection serrée d’images inspirantes, provoquantes ou intoxicantes dans le domaine de la photographie, du design, des polices de caractère, de l’art, de la mode ou du packaging.
• Kalle Gustafsson — Très belle photos de mode, beauté, magazine et voyage.
• FFFFOUND! — Véritable mine d’or, ce site bookmark des milliers de visuels de toute sorte. Un bol d’air frais à inspirer régulièrement !
• Et plus à venir…

WordPress

Plugins pour WordPress

Listes quasi-officielles

• A tout seigneur tout honneur : voici une liste de plus de 400 plugins compatibles avec WordPress 2.3 disponible sur le codex.
• La liste des plugins chez WordPress Francophone classés par thème.
• Autre liste organisée par rubrique sur wp-plugin.

17 plugins AdSense pour WordPress

Cette liste concoctée par Aziz Haddad a été soigneusement annotée sur Mashable France

• Adsense Deluxe
• AdSense Widget for WordPress Sidebar
• Shylock AdSense
• Adsense Injection
• AdMan
• AdSense Manager
• AdRotator
• AdSense Attachment
• MightyAdsense
• Google Ad Wrap
• Adsense Inline
• Adsense Beautifier
• Author Adsense
• Author Adsense MU plugin
• AdSense Sharing Revenue and Earnings System
• Adsense Earnings WordPress Plugin
• WP-AdsenseProfit

7 Plugins WordPress pour favoriser les commentaires

Trouvé grâce à legizz, la liste est abondamment commentée sur problogdesign

• nicedit
• wp-ajax-edit-comments
• Abonnement subscribe-to-comments
• wordpress-recent-comments-plugin-widget
• Smilies
• nofollow-free
• MBLA

10 Plugins WordPress pour Twitter

Traduit vite fait d’après la liste de quickonlinetips aimablement fournie par legizz ;)

• Twitter Badge — Le code Javascript officiel pour afficher votre statut Twitter
• The Twitter Updater — Ce plugin WordPress se charge de mettre à jour votre statut Twitter chaque fois que créez, publiez ou éditez un billet.
• TwitThis –Permet à vos visiteurs d’envoyer facilement un tweet à propos de votre blog. Un click sur le bouton TwitThis tinyURLise la page en cours pour leur permettre d’envoyer ce raccourcis à leurs followers.
• Twitter Tools — Ce plugin crée une passerelle entre votre compte Twitter et votre blog : affichez vos tweets sur votre blog et créez de nouveaux tweets depuis WordPress.
• Twitter WordPress Sidebar Widget — Personnalise le nombre d’updates présent dans votre sidebar ainsi que les liens pointant sur chaque update sur Twitter.
• Twitter Feed — Publie vos mises à jour sur votre compte Twitter. Connection à Twitterfeed avec votre identifiant OpenID, fournit l’adresse de votre flux RSS et la fréquence des mises à jours sur Twitter.
• Twitt-Twoo — Petit plugin tout simple qui vous permet d’envoyer vos tweets depuis votre blog, le tout avec un brin d’Ajax pour faciliter le travail.
• SimpleTwitter — Ce plugin vous permettra d’ajouter facilement vos messages Twitter dans votre template WordPress.
• Twitter Sharts — Affichez vos updates où vous voulez dans vos billets ou vos pages WordPress.
• RSS to Twitter — Ce script PHP nourrit Twitter avec votre flux RSS.

Vrac de plugins pour WordPress

• La liste de PapyGeek est très bien commentée.
• F-WPPlugins list: les 14 plugins WordPress les plus utilisés dans la blogosphère francophone, chez fran6art
• La bonne liste de calyptratus où j’ai trouvé le plugin pour afficher la liste des plugins actifs sur votre blog.
• Encore une liste intéressante chez Marin Gatellier.
• La liste de plugin de l’éclaireur pour stimuler WordPress.
• Installez PluginMeter de ZeFranck, et participez à la constitution d’une liste de l’ensemble des plugins installés dans le monde en temps réel !
• Et pour finir, voici la section plugin du forum WordPress francophone.
• 59 plugins pour wordpress — liste de plugin avec une brève description en français, via weezonaute.

Thèmes pour WordPress

• SmashingMagazine — 100 thèmes gratuits de qualité pour WordPress, ainsi que 83 jolis thèmes que vous avez probablement manqués, et pour finir, 10 thèmes très frais et élégant au service de la lisibilité de votre contenu. Via DyBlog et blomig ;).
• Et plus à venir…

C’est déjà fini ?

Cette liste est loin de faire le tour de la question, alors n’hésitez pas à intervenir pour partager les liens qui vous servent le plus dans votre pratique du développement ou du design web. Je prendrais soin d’ajouter vos suggestions au fur et à mesure.

Articles sur le même sujet

• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Ctrl H = WordPress 2.2 + jQuery + Buzz F-List + TypeTester + GrayBit + PR6
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery

Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta.

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillés. Or, nous ne sommes pas obligé de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue à chaque fois.

C’est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d’avoir un code de bonne qualité dès le départ. Mais qu’est-ce vraiment qu’un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l’on peut utiliser lorsqu’on travaille sur le design d’un nouveau site web.

• Cet article ne couvre pas l’ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l’utilisation d’une grille en lisant l’article Designing With Grid-Based Approach.
• Vous trouverez des centaines de templates CSS dans l’article Free CSS Layouts and Templates.
• Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

Qu’est-ce qu’un framework CSS ?

• Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C’est ce que nous appellons un environnement de travail CSS.
• Un framework CSS n’a pas besoin d’être compliqué ou de tout prendre en charge. Il peut ne contenir qu’un simple jeu de feuilles de style CSS tel que :
  • typography.css pour les règles typographiques de base,
  • grid.css pour la mise en page par grille ou
  • layout.css pour des maquette générales,
  • form.css pour des styles de formulaires basiques,
  • general.css pour tout autre style supplémentaire.
• et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].
• En bref, les frameworks sont un jeu d’outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent de convertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l’obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

Les avantages du framework CSS

• Vous augmentez votre productivité et évitez les erreurs les plus courantes. Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.
• Vous normalisez votre code et vos classes. Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d’utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l’ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.
• Vous avez un meilleur flux de production au sein de l’équipe. Si le framework CSS est bien documenté, il peut être utilisé dans l’équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.
• Vous optimisez la compatibilité entre les différents navigateurs. Si votre frameworks CSS est à l’épreuve des balles, vous n’avez pas à vous soucier d’éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !
• Vous avez un code finalisé, propre et bien structuré. Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N’avez-vous jamais oublié l’élément code ou abbr ? CQFD.

Les inconvénients des frameworks CSS

• Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, [...] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don't use frameworks]
• Vous devrez avoir une connaissance approfondie de l’architecture de votre code. En utilisant un framework CSS externe, vous ne serez pas dispensé d’une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d’une bonne connaissance de l’architecture de votre site que vous ne pouvez pas apprendre par l’étude ou la documentation. [Why I don't use frameworks]
• Vous héritez des bugs ou des erreurs de quelqu’un d’autre. Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.
• Vous développez des sites grâce au framework et non pas d’après une solide connnaissance des CSS. Un des grands problèmes posés par les frameworks, c’est que les développeurs finissent par s’attacher au framework lui-même au lieu du code qu’il y a derrière. La connaissance qui en résulte n’est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].
• Vous avez du code inutile. Qu’il s’agisse des frameworks pour les langages côté serveur ou des bibliothèques Javascript, il y a souvent une grande partie du code qui ne sera pas utilisée. Si ce n’est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s’agit d’un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Les CSS peuvent ne pas être sémantiquement correctes. CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu’il est impossible d’englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d’identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Ignore les spécificités de vos projets web. Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

Les frameworks CSS en détail

YAML (Yet Another Multicolumn Layout)

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s’accomode de tous les navigateurs web modernes. Tous les bugs de rendu d’Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d’IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l’impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

Vous avez aussi la possibilité d’utiliser l’interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l’ordre dans lequel vous voulez les voir apparaitre dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d’afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

Blueprint

Le framework Blueprint, créé par l’étudiant norvégien Olav Frihagen Bjørkøy, semble très prometteur. Ce framework propose : des fondations solides pour la typographie ; une grille de mise en page facilement personnalisable ; une gestion pratique de la typographie et des lignes de base pour le texte ; une feuille de style pour l’impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n’est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d’affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs ; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents, permet à l’utilisateur d’ajuster la taille des polices en gardant une consistance d’un navigateur à l’autre. Fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d’empiler ou d’imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d’ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

Reset Global CSS

• Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.
• *{margin:0;padding:0} est une mauvaise pratique. Malheureusement, ce n’est pas une bonne pratique. C’est très difficile pour les agents utilisateurs d’appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d’être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]
• Tripoli Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d’éléments (tables, listes, typographie, mais aussi les en-têtes (h1 – h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.
  
• Reset CSS Reloaded d’Eric Meyer. Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit, Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l’être, chacun selon leur nature.
• Reset CSS de Yahoo! UI Library Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d’un navigateur à l’autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.
• CSS Global Styles Reset par Kyle Neath. Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.
• CSS Global Reset par Christian Montoya – css L’idéal est d’avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.
• CSS Global Reset par Mike Rundle.
• Master Stylesheet Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l’espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

Styles de base CSS

Web Typography: bottom margins of paragraphs and lists par Marko Dugonjic.

Compose To A Vertical Rhythm L’unité de base de l’espace vertical est la hauteur de ligne (line-height). En établissant une hauteur de ligne qui puisse être appliquée à l’ensemble du texte de la page, qu’il s’agisse des titres, du corps du texte ou des notes de bas de page, on obtient un rythme vertical sur laquelle s’appuyer, qui guide le lecteur à travers le contenu.

Baseline Stylesheets par Darren Hoyt.

One clean HTML markup, many layouts… par TJKDesign.

Mike Stenhouse’s CSS Framework Il est possible de séparer les éléments d’une feuille de style en composants réutilisables pour d’autres projets. La suite logique est d’étendre ce principe pour mettre en place un framework CSS, autorisant des développements rapides avec des composants déjà testés. Tout ce qu’il faut pour y parvenir est de créer un jeu de convention de nommage et un template de base assez souple…

Développez votre propre framework CSS !

Garder à votre framework CSS un degré d’abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d’un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d’identifiants et d’éléments HTML ; garder à l’esprit l’importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit par Sven Lennartz et Vitaly Friedman de Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d’informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n’essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C’est ce qui nous rend différent. En fait, nous frappons vos esprit avec l’information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J’ai essayé de suivre au mieux les intentions de l’auteur et le déroulement de l’article, mise en forme comprise afin de permettre une comparaison rapide avec l’original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Alors, ces frameworks, on les utilise ou pas ? (notes personnelles en guise de conclusion)

Les frameworks CSS ont le vent en poupe et c’est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d’organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d’utilisation :

1. Vous savez ce que vous voulez comme structure HTML en terme d’éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l’utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c’est comme beaucoup de choses, j’imagine qu’avec de la motivation et de l’huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d’intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c’est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Vos positions s'affaissent ? Mettez le bottom à zéro…

Çà fait longtemps que je lis des petites phrases sur les lourdeurs de Firefox. Erreurs de jeunesse me dis-je à chaque fois. Mais suite à la lecture d’un billet du côté de chez Xuan, j’ai ouvert mon gestionnaire des tâches et je n’ai pas aimé ce que j’ai vu. La consommation en ressources mémoire de Firefox flirte souvent avec les 200 mo de RAM et sature mon petit PIII 866, tandis que le navigateur Opera sort en version 9.20…

En attendant que Mozilla se lance dans la chasse au gaspi, j’ai décidé de changer mes habitudes de travail ; ce qui est toujours une bonne chose. D’autant plus que je ne me suis pas limité à Firefox. J’ai regardé d’un peu plus près les logiciels que j’utilise tout les jours, et voilà le résultat :

Dreamweaver, les rêves ont un prix

Moi :

Quoi ? plus de 60 mo pour faire des pages web ? C’est quoi ton problème ?

Dreamweaver :

En fait c’est plutôt toi qui a un problème. Tu veux créer des pages web avec tout le confort, et bien ça se paie aussi en barrette mémoire…

Moi :

Oui, mais non… même après toutes ces années de vie commune, je te dis « au revoir » et je te remplace par Notepad++ et FileZilla en attendant de trouver un éditeur HTML un peu plus trendy.

FileZilla et Notepad++ ? ça roxe !

Heureusement que je suis habitué à FileZilla depuis pas mal de temps, parce que je regrette déjà le transfert FTP de Dreamweaver. Notamment la mise en cache de l’arborescence d’un site pour placer un fichier sur le site distant sans se soucier de sa destination. Si quelqu’un connait une alternative…

En attendant, et pour éviter d’avoir trop de fenêtres et de logiciels ouverts, J’utilise FileZilla comme explorateur ; Je l’ai configuré pour qu’il ouvre mes fichiers avec Notepad++. L’est pas belle, la vie ?

Par ailleurs, pour me déplacer plus vite dans l’arborescence, j’utilise le gestionnaire de site en dupliquant le site d’origine, puis en spécifiant des dossiers par défaut différents. Pour ce faire, placez-vous dans le répertoire local qui vous intéresse, cliquez sur Fichier -> Copier la connexion dans le Gestionnaire de Site. Il ne vous reste plus qu’à renseigner le répertoire distant en cliquant sur Avancé, et the cat’s in the bag!

Firefox, je t’aimais bien, tu sais…

Moi :

Quoi ? plus de 170 mo pour afficher du html ?

Firefox :

Heu.. c’est à dire que normalement je prends toute la place dans le lit dès que je peux.

Moi :

Qu’est-ce qui t’empêche de te pousser quand d’autres applis débarquent ?

Firefox :

Ouais, heu… au fait, tu sais que je peux te proposer toute une farandole d’extensions géniales, que je suis un gentil panda roux très rare et qu’il faut me protéger ?

Moi :

Évidemment dans ces conditions, je te laisse une chance. Mais attention, à partir de maintenant, pour le surf quotidien je fais un bout de chemin avec Opera ! Allez, fait pas la tête, je t’aime bien quand même :)

Sur un air d’Opera…

Opera semble plus rapide pour afficher les pages, même lorsque plusieurs onglets sont ouverts. Le scrolling sur les longues pages est également plus réactif !

Je redécouvre avec plaisir les notes dans la barre latérale qui me permettront de rédiger mes brouillons sans passer par les Post-It ou le Bloc-notes de Google que j’utilisais d’ailleurs avec l’extension Firefox Google Bloc-Notes…

Du côté de Firefox, on met souvent en avant la Developer Toolbar, qui comme le fait remarquer xuxu, existe aussi sur Opera, avec même l’équivalent du CSS Viewer qui gère en plus l’affichage du code source de l’élément survolé lorsqu’on clique dessus.

Je ne détaillerais pas toutes les fonctions d’Opera, mais le navigateur comporte entre autre :

• Un client mail bien conçu avec une gestion des filtres particulièrement efficace et complète,
• Une gestion des flux RSS,
• Une gestion des contacts,
• L’intégration de composants externes (widget),
• Pléthore de petites attentions ergonomiques qui me font regretter de ne pas avoir écouté IndicaDesBois plus tôt ;)
• Et last but not least, je viens de remarquer que lorsqu’on copie l’adresse d’un lien avec le clic droit, il est possible de la coller et aller dans la barre d’adresse, en une seule opération (c’est plus facile à faire qu’à écrire…). je suis conquis !

… ou sur un air d’operette ?

Opera n’est pas sans problème, et bien qu’il offre des fonctionnalités intéressantes, j’ai commencé une petite liste de défauts qui vont de l’anecdotique au plus embarrassant :

• Les clics sur les cases à cocher ne sont pas toujours pris en compte du premier coup,
• Dans certains cas, il semble que la manipulation du DOM par les scripts présents sur les pages provoque un comportement erratique de l’affichage et du fonctionnement. Notamment en ce qui concerne :
  • Le glissé-déposé dans la gestion des liens de Dotclear,
  • L’utilisation du Bloc-Note de Google,
  • L’affichage de données dans Google Analytics
• La consommation mémoire se rapproche parfois de celle de Firefox lorsque de nombreux onglets sont ouverts…

Alors, Firefox ou Opera ?

Les deux, mon capitaine ! Finalement, ce combat entre Firefox et Opéra aura fait une victime du côté de Dreamweaver ;) Concernant les navigateurs, les défaillances que j’ai rencontrées en utilisant Opéra diminuent mon enthousiasme et ma confiance dans le produit. je dis ça avec quand même quelques réserves de principe car il peut s’agir d’un problème de configuration ou d’un bug qui serait difficilement reproductible ailleurs.

En supposant que les problème rencontrés sur Opera soient passagers, et au vu des différences de rendu CSS entre les deux navigateurs qui persistent, il me semble difficile de ne pas les utiliser tous les deux pour tester les pages en cours d’intégration, comme je le fais avec Internet Explorer d’ailleurs. De toutes manières, quand on fait des sites web, on peut difficilement ne pas lancer le maximum de navigateurs.

Ce qui me fait penser qu’en comptant tous les logiciels nécessaires à la création de pages web (sans même compter Photoshop ou Illustrator qui peuvent faire l’objet d’une session de travail à part), c’est quand même un peu ahurissant d’utiliser autant de logiciels et donc de ressources (mémoire, processeur, espace disque) pour créer des pages web légères…

Articles sur le même sujet

• 1000 ressources pour le développement web et WordPress
• Firefox roxe ? Opera, ça ira ? et IE7 part en sucette ?
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• HTML5 et CSS pour l'intégrateur web