31 outils en ligne simples et efficaces pour les travailleurs du web

Ce billet est une sorte de «Note pour plus tard» pour garder sous le coude quelques outils en ligne que j’utilise régulièrement ou que j’ai redécouverts dernièrement. Ils vous permettront de partager des bouts de code, prendre des notes, créer des penses-bêtes, sauvegarder vos bookmarks, partager des textes, valider votre prose (CSS, HTML, XML, RDF), placer du faux-texte et des fausses images (placeholders) dans vos pages web. Vous (re)découvrirez également des dictionnaires, des correcteurs orthographiques  et des ressources web à garder sous la souris. Le tout réparti entre développement web, édition & travail collaboratif et dictionnaires et ressources.

Développement web

1. jsfiddle — Idéal pour partager des bouts de code ou mettre en place des tests avec HTML, CSS, jQuery (ou Mootools, etc.). Voir aussi : JS Bin, Pastie, Pastebin.
2. MarkUp Validator — Utile pour tester la validité de votre code HTML (mais aussi XHTML, SMIL, MathML) selon les spécifications du W3C. D’autres outils de validation existent, notamment pour vérifier la conformité de CSS, RDF, RSS, XML. Quant à Link Checker, il vous permettra de vérifier si votre site contient des liens qui ne fonctionnent plus ; Semantic Extractor vous montrera vos pages du point de vue sémantique.
3. HTML-Ipsum — Bien sûr, rien ne vaut le texte définitif. Mais en attendant que votre client ne vous fournisse le Saint-Graal du Webdesign (le contenu), voici une ressource à garder sous le coude pour créer des blocs de HTML (paragraphes, listes ordonnées ou non, listes de définition, formulaires, titres et paragraphes plus ou moins longs, etc.), avec du faux-texte. Voir aussi Lipsum qui propose du faux-texte dans une quarantaine de langues.
4. Lorempixel — Choisissez une taille d’image et un thème en accord avec le sujet de votre site (parmi les 11 disponibles), puis cliquez sur Image couleur ou Niveau de gris pour obtenir un visuel de placement pour agrémenter vos pages remplies de Lorem Ipsum. Voir aussi Placekitten, Dummyimage ou Placehold.it.
5. CSSLisible — Tout droit sorti du labo de Darklg, cet outil réorganise vos CSS et change l’ordre des propriétés pour faciliter la lecture (et donc la maintenance) de vos feuilles de style. Attention, pour le moment, les commentaires sont retirés ! Voir aussi Styleneat.
6. PunyPNG — La compression d’image qui va bien. Cet outil optimise vos images en réduisant considérablement leur taille, sans perte de qualité. Voir aussi Smush.it.
7. Listes pour Webdesigner — Last but not least, voilà une liste d’une vingtaine de liste qui devrait faire plaisir aux accros des bons tuyaux !

Edition & travail collaboratif

1. Markdown Editor — J’ai adopté la syntaxe Markdown depuis déjà plusieurs années pour prendre des notes structurées et les transformer en billet via l’excellent plugin Markdown on Save pour WordPress. Pour en revenir à Markdown Editor, il vous permettra de transformer à la volée votre syntaxe Markdown en HTML sans forcément passer par un CMS…
2. Diigo — J’ai cherché une solution de bookmarks alternative à Delicious lorsque Yahoo! a cherché des repreneurs, il y a quelques mois. J’utilise régulièrement la Diigolet pour sauvegarder mes liens, prendre des notes et les partager sur les réseaux sociaux. Une fonction enregistre automatiquement les liens sur Delicious. Vous pouvez me retrouver sur mon compte Diigo. Voir aussi Scrible.
3. Notepad.cc — Mini éditeur en ligne, à l’image du Bloc-note de Windows. Idéal pour partager des notes, protégées ou non par mot de passe.
4. Ta-da List — Créer des listes  de choses à faire, réordonner les items, partager vos listes, etc. Un site de todolist simple et efficace, pour nous, qui avons toujours tant de choses à faire pour avant-hier. Voir aussi Workflowy.
5. Writeboard — Un outil pratique pour rédiger et corriger des textes à plusieurs. Chaque «Board» est accessible via une URL. Les révisions sont listées dans la marge avec le nom des personnes ayant apporté des modifications. Il est possible de s’abonner au flux RSS des modifications faites sur les documents.
6. Doodle — Organiser des réunions, des rencontres en créant des sondages pour connaitre le moment qui conviendra au plus grand nombre de participants. Vue Tabulaire (liste) ou vue Calendrier pour avoir une vue d’ensemble des disponibilités et des événements.
7. Twtpoll — Créer des sondages et des enquêtes d’opinion et partagez-les sur les réseaux sociaux grâce à une simple URL.
8. Kiwoos — Créez votre sondage en quelques clics … Et partagez-le sur Twitter et Facebook avec vos amis.

Réseaux

1. Ping.eu — Tout connaitre ou presque à propos d’une adresse IP ou d’un nom de domaine : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Dictionnaires et références

1. yoyodesign — Nombreuses traductions d’articles et de recommendations du W3C. Voir également la liste des traductions françaises des documents du W3C.
2. 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 !
3. 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.
4. 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.
5. 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.).
6. 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.
7. 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).
8. 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 !
9. 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.
10. 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).
11. Leftlogic — Permet de voir le code html d’un caractère, pratique lorsqu’on cherche le code pour ñ par exemple (Merci Anthony).
12. 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.
13. 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.
14. 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.
15. BonPatron — Correcteur qui trouve des fautes d’orthographe et de grammaire en français.

N.’hésitez pas à partager vos services en ligne préférés dans les commentaires de ce billet, sur Twitter ou sur Google+, c’est vous qui voyez 🙂