1000 ressources pour le développement web et WordPress : la grosse grosse liste

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.
• SmashingCoding — Plus de 40 sites d’images libres de droits.
• 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.

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 »

Singles Singles