Cerium’s blog

50+ Outils pour vous développeur

Développeur web du dimanche (ou pas) il est toujours bon d’avoir sous la main les bon outils et les bonnes informations, du coup dans ce billet je vais essayer de recenser quelques uns des sites/scripts/extensions les plus utiles qu’on puisse trouver sur le web.

Bien entendu utiliser Ctrl + F pour effectuer une recherche dans cette page.

Extensions Firefox

• Colorzilla :
  Permet de récupérer la couleur d’un pixel d’une page Web au format héxadécimal, ou RGB puis de la copier dans le presse-papier.
• Html Validator :
  Permet de valider (ou non) vos document Html localement sans connexion Internet.
• CSS Validator :
  Permet de faire rapidement valider le CSS d’une page via le clic droit.
• ScreenGrab ! :
  Permet de faire le screenshot d’une page dans sa totalité ou juste la partie visible, une petit perle.
• IETab :
  Une extension qui vous permet d’un clic de changer le moteur de rendu de Firefox (Gecko) à Trident pour avoir le rendu d’Internet Explorer, on peut donc tester un site sous deux navigateurs avec un seul.
• Firebug :
  Une extension très complète permettant d’analyser le Javascript, voir le temps de chargement de chaque fichier et toute une foule de possibilités.
• Web Developper :
  Ajoute une barre d’outils à Firefox, permet entre autre en quelques clics d’éditer l’Html, et le CSS, de désactiver le CSS/les cookies/le JS/les images, redimensionner la fenêtre, ou bien voir le code source généré après l’éxécution du Javascript… Un must-have.

Outils

• Validateur (x)Html (en) :
  On ne le présente plus, le validateur du W3C de page web (x)Html.
• Validateur CSS :
  Le validateur CSS, rien de nouveau pour vous je présume.
• Compresseur Javascript (en) :
  Un outil en ligne qui se charge de “nettoyer” votre Javascript en ôtant les saut de lignes/tabulations/commentaires dans le but de diminuer le poids du document.
• Compresseur CSS (en) :
  Tout comme le compresseur Javascript, cet outil vous permet de réduire considérablement le poids d’une feuille de style CSS, (-50% pour celle du thème de ce blog par exemple).
• reset.css (en) :
  Un fichier CSS qui “unifie” les style par défaut des balises.
• Blueprint CSS (en) :
  Dans le même style que le précédent, une feuille de style “par défaut”.
• Browsershots :
  Un service gratuit (comme tout ceux proposé ici) qui vous permet de tester vos pages webs sous différents navigateurs/OS, de Dillo 0.8 sous BSD à IE 8 en passant par Safari 3.2 sous Mac.
• Dig PageRank (en) :
  Un énième site permettant de voir le pagerank d’un site, il interroge plusieurs serveurs Google à chaque requête.
• Site-Perf (en) :
  Un siee-outils pour connaître le temps de chargement d’une page web ainsi que les fichiers externes qui lui sont attachés (JS/CSS/Images/…)
• HTML-Ipsum (en) :
  Le meilleur site de Lorem Ipsum (Lipsum) à mon avis car les autres donnent du texte, ce qu’on leur demande certe, mais HTML-Ipsum va plus loin car il donne le texte formaté dans des balises xHtml, à bookmarker au plus vite.
• TinEye (en) :
  Vous avez une image en 400*200 il vous la faut en 600*300 ? TinEye la retrouvera peut être, c’est un moteur de recherche par images.
• Google :
  Cela peut vous sembler bizarre mais l’un des outils les plus puissant reste un bon moteur de recherche, pour peu qu’on sache s’en servir. Mon choix est fait, ça sera Google.

Documentation

• SelfHTML :
  La réfèrence absolue pour tout ce qui est des balises (x)Html. Vous avez un doute sur l’utilisation de l’une d’entre elle ? SelfHTML saura vous aider.
• Mediabox :
  Vous avez la réfèrence en matière d’(x)Html, ici vous trouverez tout ce que vous voulez savoir sur les propriétés CSS.
• PHP.net :
  La documentation officielle du PHP, autant dire que vous ne trouverez pas plus exact.
• docs.jQuery.com :
  La documentation officielle de la célèbre librairie Javascript jQuery.
• codex.wordpress.org :
  Le Codex Wordpress, vous avez un doute sur une fonction ? Jetez-y un oeil.

Tutoriels

• Tutoriel xHtml/CSS :
  Probablement le tutoriel xHtml/CSS le plus complet, surtout destiné aux novices mais peut toujours être utile.
• Tutoriel PHP/MySQL :
  Du même auteur que le tuto ci-dessus, cette fois porté sur le coté dynamique coté serveur.
• Alsacréations :
  Des tutos d’une grandes qualité sur les langages du web, sur l’accessibilité et les respects des standards.
• Tutoriaux vidéos jQuery (en) :
  Une quinzaine de vidéos à l’heure actuelle pour apprendre à manier jQuery (en anglais mais pas forcément très dur à comprendre).

Blogs traitant de xHtml/CSS/JS/Wordpress

• Nettuts (en) :
  On ne le présente plus le site de tuto axé Wordpress/Javascript, assez complet et souvent mis à jour.
• Smashing Magazine (en) :
  Un peu particulier car traite de pas mal de sujets (relatifs ou non à Internet), mais chaque post est d’une grande qualité.
• Pompage.net :
  Un site très bien conçu dont les articles sont très bien écrits. Si jamais vous voulez des infos sur un point particulier, il y a de grandes chances que vous trouviez votre bonheur là-bas.
• CSS-Tricks (en) :
  Comme son nom l’indique, un blog traitant de tout ce qui touche de près ou de loin au CSS.
• WP Recipes (en) :
  Un receuil de tout les meilleurs trucs et astuces pour améliorer votre blog Wordpress.
• WebDesignWall :
  Inspiration, design, CSS, Photoshop, Wordpress : Un blog très complet et agréable à lire.

Mémento - Cheat Sheet

• PHP Cheat Sheat. (en) :
  Un mémento sur le PHP comme son nom l’indique.
• Html Cheat Sheet (en) :
  Un mémento pour le CSS.
• CSS Cheat Sheet (en) :
  Et un pour le CSS.
• Regular Expression Cheat Sheet (en) :
  Un mémento sur les expressions régulières ou autres Régex (à consommer avec des aspirines).
• Wordpress Cheat Sheet (en) :
  Un mémento pour Wordpess.
• jQuery Cheat Sheet (en) :
  Un mémento pour jQuery
• Addebytes.com (en) :
  Toujours plus de mémentos et autres cheat sheet.

Scripts Javascript & Librairies JS

• Lightbox, slideshow & galeries :
  Ma sélection de ces types de script très courants sur le Net.
• 5 techniques pour qu’Internet Explorer gère la transparence des PNG (en) :
  5 scripts pour forcer les versions “antiques” d’IE à gérer la transparecne des PNG.
• 80+ AJAX-Solutions For Professional Coding (en) :
  Une liste 80scripts qui peuvent être très utiles.
• 20 Excellent AJAX Effects You Should Know :
  Une liste dans le même style que la précédente.
• jQuery (en) :
  Librairie jQuery.
• Dojo Tool Kit (en) :
  Librairie Dojo.
• Script.aculo.us (en) :
  Librairie Scriptaculous.
• Mootools :
  Librairie Mootools

Communautées

• Alsacréations :
  Un forum français qui n’est plus à présenter.
• Site du Zéro :
  Idem.

Ressources

• Functions Icons :
  Un set de 128 icônes gratuites, par Wefunction.
• Developpers Icons :
  105 icônes par Olivier Charavel.
• Danish Royaltee Free Icons :
  96 icônes par Jonas Rask.
• Thèmes Wordpress, icônes, police… :
  Une vraie mine d’or les freebies de Smashing Magazine.

J’espère que vous aurez trouvez votre bonheur dans la liste ;) Et puis plutôt que d’avoir cinquante bookmark autant bookmarker cette page c’est plus simple :D