PARTIE I TESTER / AUDITER / ANALYSER
Analyser les performances /évaluer le temps de chargement des pages /…
Dareboost
Dans la droite ligne de services tels que ceux proposés par Opquast, Dareboost est un outil en ligne qui permet d’analyser la performance d’un site internet et de suivre dans la durée l’évolution de ses indicateurs clés de performance (fonction en cours d’implémentation au 18/12). Dareboost exploite des services web tels que Google Page Speed ou bien encore les outils de validation du W3C. Sur la base des résultats obtenus, classés par thématique (accessibilité, compatibilité, configuration serveur, référencement, etc.), Dareboost délivre les bonnes pratiques et propose des conseils. Simple à utiliser, clair (interface agréable) et riche d’enseignements, un bon moyen d’identifier les lacunes d’un site internet afin de mettre en œuvre les actions d’amélioration et d’optimisation nécessaires pour améliorer sa performance web.
http://www.dareboost.com/fr
Web Page Test
Web Page Test est un outil qui permet de tester la performance d’un site internet. Comme tous les outils présentés dans ce dossier, Web Page Test est gratuit. L’outil permet de tester un site internet après avoir sélectionné la localisation (plusieurs villes du monde disponibles) et choisi le navigateur web. Les résultats sont très complets et très clairs (tableaux comparatifs, graphiques, etc.) : temps de chargement fichier par fichier, optimisations effectives, optimisations et gains par rapport à l’existant (compression de type Gzip, compression des images, mise en cache), etc.http://www.webpagetest.org
Mobitest
Mobitest permet de tester la performance d’un site internet depuis un appareil mobile de type iPhone, iPod ou Android.
http://mobitest.akamai.com
LoadsIN
Un simple url à renseigner pour obtenir les données de chargement des pages d’un site internet. Simple et efficace.http://loads.in/
Make the Web faster
Il s’agit d’un ensemble d’outils et de services proposés par Google pour analyser la performance d’un site internet et des outils pour l’optimiser. L’outil PageSpeed Insights effectue une analyse des contenus d’une page web. A partir des résultats obtenus, l’outil liste les optimisations à intégrer (classées par priorité) et celles qui ont (éventuellement) déjà été prises en compte. PageSpeed Insights est également disponible comme extension pour les navigateurs web Google Chrome et Firefox.https://developers.google.com/speed/
Which loads faster
Un petit outil gratuit en ligne pour comparer le temps de chargement de deux sites internet. Les résultats peuvent être partagés. Enfin, il est possible de procéder à une analyse fine d’un site.http://whichloadsfaster.com/
Load Impact
Load Impact est un outil pour analyser les performances d’une page web. Il est possible de choisir le type de navigateur à émuler (Chrome, Firefox, Internet Explorer…).http://loadimpact.com/page-analyzer
Gomez Web site performance
Gomez est un outil pour évaluer le temps de chargement d’une page. Les résultats s’affichent de façon claire et synthétique sous forme de schéma et de tableau.http://www.gomeznetworks.com/
Pingdom
Pingdom est un autre outil en ligne gratuit pour tester le temps de chargement d’une page web.http://tools.pingdom.com/fpt/
Tester l'accessibilité des pages
Opquast Reporting
Opquast Reporting est un outil en ligne d’inspection du code des pages proposé par Temesis, société reconnue dans le domaine de la qualité web, de la conformité et de l’accessibilité. 300 critères (accessibilité, vitesse, qualité web, référencement, utilisabilité) sont analysés, ce qui permet de découvrir les points d’optimisation des pages et les optimisations déjà mises en œuvre. A noter que l’outil n’est malheureusement pas totalement gratuit : seule l’offre découverte (audit de 3 sites, 1 page par site) l’est.http://reporting.opquast.com/fr/
Ocawa
Il s’agit d’un outil de vérification de l’accessibilité d’un site internet selon, au choix, les règles d’accessibilité de W.C.A.G 1.0 (celles du W3C), Ocawa et Adae (Agence pour le Développement de l’administration électronique – Référentiel accessibilité des services Internet de l’administration). A noter que les dernières règles d’accessibilité du W3C, W.C.A.G 2.0 ne peuvent pas être testées avec cet outil.http://www.ocawa.com/fr/Testez-votre-site.htm
Achecker®
Achecker® permet de tester l’accessibilité d’une page web mais aussi la validité du code HTML et celle des feuilles de style. Le rapport liste les points d’optimisation et les erreurs en fonction de leur importance (problèmes réels, problèmes potentiels). Très utile, l’outil précise l’emplacement des erreurs dans la page (critère évalué, vérification, action corrective, ligne xxx, colonne xxx).http://achecker.ca/checker/index.php
WAVE (Web accessibility evaluation tool)
Edité par la société WebAIM WAVE est un outil original d’évaluation de l’accessibilité dont les résultats sont affichés de manière visuelle directement sur la page analysée.http://wave.webaim.org/
Truwex Online 2.0
Truwax Online 2.0 est un outil d’évaluation de l’accessibilité (selon règles de la Section 508 et celles de la WCAG 1.0 et 2.0).http://checkwebsite.erigami.com/accessibility.html
Contrôler la validité du code des pages
Validateur HTML/XHTML (W3C)
Le validateur de code du W3C, un outil incontournable !http://validator.w3.org/
Unicorn, Validateur HTML/XHTML (W3C)
Le validateur unifié du W3C, tout aussi incontournable !http://validator.w3.org/unicorn/
Validateur de site sur un device mobile (W3C)
Votre site est-il optimisé pour un affichage mobile ? Testez-le avec le validateur de site sur un appareil mobile.http://validator.w3.org/mobile/
Html Lint
Html Lint est un outil très simple pour analyser le code de vos codes et identifier les erreurs.
http://lint.brihten.com/html/
Contrôler la validité des liens hypertextes
Vérificateur de liens du W3C
L’outil de validation des liens du W3C.http://validator.w3.org/checklink
Broken Link Checker (WordPress)
Broken Link Checker est un plugin WordPress pour tester les liens de son site internet.http://wordpress.org/extend/plugins/broken-link-checker/
Link Checker (Drupal)
Un équivalent du plugin Broken link Checker conçu pour le CMS Drupal.http://drupal.org/project/linkchecker
Link Checker (Firefox)
Il s’agit d’un vérificateur de liens hypertextes pour le navigateur Firefox.https://addons.mozilla.org/fr/firefox/addon/linkchecker/
Contrôler ses contenus éditoriaux (orthographe / synonymes / ...)
Copyscape
Copyscape est un outil en ligne qui permet de déterminer si les contenus d’une page ont fait l’objet d’un plagiat sur Internet. Utile afin de se protéger de la duplication de contenus (duplicate content).http://www.copyscape.com/
Bon Patron
Bon Patron est un outil en ligne pour contrôler l’orthographe.http://bonpatron.com/
Correcteur orthographique Translated.net
Il s’agit d’un autre correcteur orthographique en ligne. Il est possible soit de saisir son texte soit de le coller pour contrôler l’orthographe. De nombreuses langues sont prises en charge..http://labs.translated.net/correcteur-orthographe/
Trésor de la Langue Française informatisé
Ce dictionnaire en ligne est la version numérique du Trésor de la Langue Française, dictionnaire de la langue française en 16 volumes.http://atilf.atilf.fr/
Centre National de Ressources Textuelles et Lexicales
Le site du Centre National de Ressources Textuelles et Lexicales (CNRTL) propose de nombreuses ressources et outils de traitement de la langue française. Un site d’une richesse remarquable.http://www.cnrtl.fr/
Dictionnaire électronique des synonymes (DES)
Un dictionnaire des synonymes, incontournable pour tout rédacteur web.http://www.crisco.unicaen.fr/des/
Dictionnaire des synonymes français
Dictionnaire des synonymes.http://dico.isc.cnrs.fr/dico/fr/chercher
Contrôler la validité des feuilles de style
Validateur des feuilles de style (W3C)
Le validateur des feuilles de style du W3C est un outil essentiel !http://jigsaw.w3.org/css-validator/
CSS Lint
Un simple copier/coller du code d’une feuille de style permet de lancer l’analyse pour identifier les erreurs de CSS.http://csslint.net/
Contrôler les couleurs (contraste / luminosité / ...)
Check My Colours
Check My Colours est un outil de vérification du contraste de couleurs au sein d’un page web. Objectif : garantir la vue d’une page web aux individus atteint d’une déficience visuelle. Les tests sont réalisés sur la base des recommandations du W3C en la matière.http://www.checkmycolours.com/
Colour Contrast Check
Colour Contrast Check permet de vérifier si le contraste entre une couleur de police et une couleur de fond respecte les règles du W3C qui ont pour objectif de permettre aux personnes atteintes de déficiences visuelles de consulter correctement une page. Un outil très complet.http://www.snook.ca/technical/colour_contrast/colour.html
AccessColor
AccessColor est un outil en ligne de contrôle du contraste visuel. Les résultats sont très détaillés et instructifs.http://www.accesskeys.org/tools/color-contrast.html
Autres tests
Firebug
Firebug est une extension pour Firefox qui propose une série d’outils (édition, débogage et contrôle du HTML, CSS, JS…). Un incontournable.https://addons.mozilla.org/fr/firefox/addon/firebug/
Validateur des flux RSS (W3C)
Le validateur des flux RSS du W3C.http://validator.w3.org/feed/
Test Everything
Comme son nom l’indique, Test Everything permet depuis un seul endroit de générer les URL pour lancer plus de 100 tests (validité CSS, HTML, SEO, services web, etc.).http://www.jonasjohn.de/test-tool/
Robots Checker
Robots Checker est un outil de test du fichier robots.txt. Ce dernier permet de spécifier les règles d’indexation d’un site internet et de ses pages par les moteurs de recherche.http://tool.motoricerca.info/robots-checker.phtml
Browsershot
Browsershot permet de tester l’affichage d’un site internet sur différentes versions des principaux navigateurs (Internet Explorer, Mozilla Firefox, Google Chrome…).http://browsershots.org/
Lynx Viewer
Lynx Viewer permet de découvrir l’affichage de son site sur un navigateur texte.http://www.delorie.com/web/lynxview.html
View Like Us
View Like Us permet de tester l’affichage d’un site internet sous différentes résolutions.http://viewlike.us/
Under The Site
Under The Site permet de connaître les technologies déployées sur un site internet. Un outil très instructif.http://underthesite.com/
Dr. Watson
Dr. Watson est un outil gratuit en ligne destiné à contrôler la syntaxe HTML, les liens, les images, etc.http://watson.addy.com/
Web Developper (Chrome / Firefox)
Web Developer est une extension qui permet d’utiliser plusieurs outils de développement web directement dans un navigateur web (Chrome et Firefox) : inspection et modification des feuilles de style (CSS), activation/désactivation de javascript, de java, des couleurs, inspection détaillée des images, édition du code HTML, entourage des liens, des balises Headings, etc. Un outil essentiel !https://addons.mozilla.org/fr/firefox/addon/web-developer/(Firefox)
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm(Chrome)
Analyser les mots-clés, vérifier la qualité du référencement, évaluer le positionnement, le trafic
Alyse
Alyse est un outil en ligne qui permet de tester l’optimisation de ses pages afin d’obtenir un meilleur référencement. L’outil propose notamment un calcul de la densité des mots-clés, une analyse de la structure des pages, un audit des liens, des images et donne les informations HTTP et réseau. Les résultats sont instantanés et classés par onglet (Mots-clés, Analyse, Liens, Image, HTTP, Réseau et Autre).http://alyze.info/
Wordpress SEO by Yoast
Plugin téléchargé près de 3,5 millions de fois sur le site wordpress.org, WordPress SEO by Yoast est un outil qui permet d’optimiser le référencement des pages de son site sous WordPress. Simple à utiliser et très utile pour améliorer son référencement, WordPress SEO by Yoast est un outil incontournable.http://wordpress.org/extend/plugins/wordpress-seo/
Multiple Datacenter Rank Check Tool
Cet outil permet de réaliser une recherche simultanée comparative sur différents datacenters Google.http://www.seologs.com/dc-rank-check.html
Webmaster Tools Ranks.NL
Le site Ranks.NL propose une série d’outils destinés à l’évaluation et à l’optimisation du référencement pour les moteurs de recherche : analyse de page, de contenus éditoriaux, comparaison de résultats sur différents moteurs de recherche en simultané, validateur de liens, combinaisons de mots-clés, etc.http://www.ranks.nl/
SEOquake
SEOquake est une extension qui permet d’afficher des informations sur les pages web (Pagerank, Alexa rank, nombre de likes Facebook, âge du site, autorité du domaine…).http://www.seoquake.com/
Searchstatus
SEOquake est une extension qui permet d’afficher des informations sur les pages web (Pagerank, Alexa rank, nombre de likes Facebook, âge du site, autorité du domaine…).http://www.quirk.biz/searchstatus/
Google Trends
L’outil Google Trends permet de découvrir la popularité des mots-clés tapés dans le moteur de recherche depuis 2004 ainsi que les tendances de recherche au fil du temps.http://www.google.fr/trends/
Google Adword
L’outil Google Adword permet de connaître le nombre de visites pour un mot-clé mais aussi la concurrence associée. Google Adword propose également des suggestions de mots-clés (nombre de requêtes mensuelles et concurrence). Un outil essentiel pour le SEO.https://adwords.google.com/
PARTIE II OPTIMISER
Optimiser les couleurs
Color Scheme Designer
Color Scheme Designer est un outil très utile qui permet de créer une palette de couleurs. Il est possible de faire un export de la palette au format html+CSS, XML, texte et même ACO (Photoshop) et GPL (Gimp).http://colorschemedesigner.com/
COLOURLovers
COLOURLovers est un outil de recherche de palettes de couleurs. Plus de 2,5 millions de palettes de couleurs sont partagées par la communauté d’utilisateurs de l’outil.http://www.colourlovers.com/palettes/search
Chromafiltre et Chromograf (Pourpre.com)
Pourpre.com, le site de la Couleur, propose deux outils en ligne : Chromafiltre (choix de couleurs sur une roue chromatique + propositions d’accords de couleurs), Chromograf (outils de visualisation des nuanciers (à teinte, luminosité, contraste, niveau de rouge/vert/bleu constant).http://pourpre.com/outils/index.php
Color Explorer
Color Explorer est une évolution de l’outil ColorMatch 5K qui permet de créer une palette de couleurs à partir d’une seule. Color Explorer permet notamment d’importer une palette de couleurs à partir d’une image.http://colorexplorer.com/
Kuler
Kuler est le nuancier de couleurs proposé par Adobe. L’intérêt de l’outil réside dans la possibilité de générer une palette à partir d’une image, d’une couleur ou en recherchant un mot-clé (par exemple le nom d’une marque connue).http://kuler.adobe.com/
Cercle chromatique accessible
L’outil propose de déterminer le cercle chromatique accessible (contraste couleur du texte/couleur de fond). Il permet ainsi de connaître le cercle chromatique accessible pour certaines déficiences visuelles (Deutéranopie, l’insensibilité au vert, Protanopie, l’insensibilité au rouge et la tritanopie, l’insensibilité au bleu).http://gmazzocato.altervista.org/fr/colorwheel/wheel.php
Sphere– Color Theory Visualiser
Un autre nuancier graphique très simple à utiliser.http://mudcu.be/sphere/
Optimiser les polices de caractère
Google Web Font
Google Web Font, ce sont plus de 600 familles de polices de caractères utilisables sur un site internet avec l’insertion d’un petit bout de code à insérer dans les pages et la modification des feuilles de style.http://www.google.com/webfonts
Font Comparer
Un petit outil en ligne pour comparer les différentes polices de caractères Google web Font à partir d’un texte personnalisé ou de Lorem Ipsum.http://www.fontcomparer.com/
Typetester
Un comparateur de polices de caractères en ligne.http://www.typetester.org/
WhatTheFont
WhatTheFont permet d’identifier une police de caractères à partir d’une image.http://www.myfonts.com/WhatTheFont/
Fontstruct™
Fontstruct™ est un outil d’édition de polices de caractères en ligne.http://fontstruct.fontshop.com/
Copy Paste Character
Copy Paste Character est un petit outil qui permet de copier des caractères spéciaux et aussi d’en récupérer le code html.http://copypastecharacter.com/
Optimiser les feuilles de style
CSS 3.0 maker
CSS 3.0 maker est un outil destiné à réaliser ses feuilles de style CSS3 rapidement et simplement.http://www.css3maker.com/
csstypeset
csstypeset est un générateur de CSS. Entrez un texte, modifiez ses caractéristiques (type de police, couleur, taille, espacement, alignement, etc.) puis exportez la feuille de style CSS.http://www.csstypeset.com/
ProCSSor
ProCSSor est un outil de compression et d’optimisation des feuilles de style.http://procssor.com/
Yaml Builder
Yaml (pour Yet Another Mise multicolonnes) est un outil de développement visuel des mises en pages CSS, doté de nombreuses fonctionnalités.http://builder.yaml.de/
Optimiser les JavaScripts
Online Javascript Compression Tool
Un petit outil de compression de fichiers JavaScript.http://jscompress.com/
Packer
Packer est un autre compresseur de fichier JavaScript.http://dean.edwards.name/packer/
Jsbeautifier
Jsbeautifier est un formateur de code html et de JavaScript.http://jsbeautifier.org/
Minifier
Minifier est un compresseur de code (HTML, JavaScript) qui fonctionne à partir d’un simple copier/coller du code. En langage informatique, la minification consiste à supprimer tous les caractères non nécessaires.http://www.willpeavy.com/minifier/
Compresser les feuilles de style
CSS Compressor
CSS Compressor permet de compresser et de « minifier » les feuilles de style. En fonction du degré de compression voulu, il est possible de jouer sur le degré de lisibilité du code.http://www.minifycss.com/css-compressor/
Clean CSS
Formatage et optimisation des feuilles de style pour un outil basé sur CSSTidy.http://www.cleancss.com/
Optimiser / Editer les images
Sumo Paint
Sumo Paint est un outil de dessin en ligne. Dans sa version gratuite, l’outil possède toutes les fonctionnalités d’un bon logiciel de dessin (brosses, gestion des calques, filtres et réglages avancés etc.).http://www.sumopaint.com/app/
SVG Edit
SVG Edit est un outil en ligne de dessin vectoriel qui permet de créer des images au format SVG et PNG.http://code.google.com/p/svg-edit/
Befunky
Befunky permet d’appliquer des filtres graphiques à une image importée depuis son ordinateur ou un compte de type Flickr, Picasa ou Facebook.http://www.befunky.com/
Draw.io
Draw.io est un outil de création de diagramme en ligne.https://www.draw.io/
Pixlr Editor
Comme Sumo Paint, Pixlr Editor est un outil de dessin, à la prise en main aisée et aux résultats probants. Pixlr propose par ailleurs sur son site d’autres outils graphiques.http://pixlr.com/editor/
Taxgedo
Taxgedo permet de réaliser de superbes nuages de mots à partir des textes contenus dans une page web ou tapés directement dans l’outil. Ce sont ceux utilisés pour illustrer la plupart des sujets de ce blog.http://www.tagxedo.com/
Wordle
Wordle est un autre outil de dessin permettant de réaliser des nuages de mots.http://www.wordle.net/