Vérifier, contrôler et valider ses productions

Avant de publier des contenus en ligne, et sans attendre le dernier moment, il est important de controler et valider l’ensemble des contenus, aussi bien au niveau des textes, des images, des formats que du code en lui même et de son optimisation.

Ces tâches bien qu’elles soient toujours plus nombreuses, parfois chronophages, et souvent fastidieuses, s’avèrent nécessaires et incontournables pour qui souhaite servir aux mieux les divers internautes et autres utilisateurs.

Pour nous aider, à assouplir ce travail, il existe deux approches qui, bien que différentes, restent complètement complémentaires et cumulables. La première approche s’appuie sur des outils totalement tierces et externes, bien souvent ce sont des outils en ligne, alors que la seconde consiste à mettre en place une série de tâches automatisées, tournant aussi bien sous Gulp, Grunt que NPM, et qui executeront des vérifications à divers niveaux de nos sites et applications web lorsque nous le souhaitons.

De quelles vérifications parlons nous ?

La première des vérifications, qui d’ailleurs est souvent négligée, est de s’assurer de la qualité d’écriture des contenus, à savoir que ceux ci soient écrits dans une langue neutre, sans erreur grammaticale ni faute d’orthographe (à ce sujet si vous en recontrez sur le site de Puce et Média, n’hésitez surtout pas à nous les remonter, on vous en remercie par avance).

Pour le reste des principales vérifications nous allons les séparer en deux catégories, contenu et contenant. Les deux ne faisant pas référence au même profil de validation, ni au mêmes types d’outils. Ces deux petites listes sont données à titre indicatif, afin de se faire une idée sur ce dont nous parlons. N’hésitez pas à vous rapprocher d’une liste beaucoup plus exhaustive comme par exemple The ultimate website launch checklist ou encore de l’excellent ouvrage Qualité Web, les bonnes pratiques pour améliorer vos sites.

Quelques outils dont nous pouvons nous rapprocher

Il est important de prendre note que l’ensemble des outils proposés par ce tableau n’est d’une part aucunement exhaustif, mais également et d’autre part, cet ensemble ne fait référence qu’à des outils qui soient disponibles gratuitement. Il existe une large liste d’outils qui sont des outils payants, qui sont de très bonnes manufactures mais qui ne sont pas approchés par cet article.

Nous pourrons au fur et à mesure explorer leur utilisation et leur complémentarité au travers d’articles plus verticaux.

Vérificateurs, validateurs et contrôleurs

Outils		Type	Fonction	Description
Accessibility Guidelines		Accessibility	Online	Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
Accessibility Verification		Accessibility	NPM	accessibility-developer-toolsaccessibility
AChecker		Accessibility	Online	This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.
Browser Shots		Browsers	Online	Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated server for your review.
Can I use		HTML, CSS and JS	Online	Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
CSS Lint		CSS	Online	CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.
CSS Optimisation		CSS	NPM	grunt-contrib-cssmingulp-clean-cssgrunt-uncssgulp-uncss
CSS Validation Service		CSS	Online	The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server. Do you need it? If you are a Web developer or a Web designer, this tool will be an invaluable ally. Not only will it compare your style sheets to the CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will also tell you when your CSS poses some risks in terms of usability.
Dr. Watson		Different verifications	Online	Dr. Watson for Windows is a program error debugger that gathers information about your computer when an error (or user-mode fault) occurs with a program. Technical support groups can use the information that Dr. Watson obtains and logs to diagnose a program error. When an error is detected, Dr. Watson creates a text file (Drwtsn32.log) that can be delivered to support personnel by the method they prefer. You also have the option of creating a crash dump file, which is a binary file that a programmer can load into a debugger.
Feed Validation Service		Feed	Online	This is a validator for syndicated feeds. It works with RSS 0.90, 0.91, 0.92, 0.93, 0.94, 1.0, and 2.0. It also validates Atom feeds. To use it, simply enter the address of your feed and click Validate. If the validator finds any problems in your feed, it will give you messages for each type of problem and highlight where the problem first occurs in your feed. If you're unsure what a message means, click the 'help' link next to the message for a fuller explanation.
Files Optimisation		Files	NPM	gulp-zopfligrunt-contrib-zopfligulp-zipgrunt-contrib-compress-staginggrunt-contrib-compressgulp-concatgrunt-contrib-concatgrunt-unusedgulp Delete files and foldersvinyl-paths
GTMetrix		Performance	Online	Analyze your site’s speed and make it faster. GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.
Hera		Accessibility	Online	HERA is a tool to check the accessibility of Web pages accoridng to the specification Web Content Accessibility Guidelines(WCAG 1.0). HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification. Manual revision is always needed to test whether a page is accessible. To be able to do this testing it is normally necessary to know the Accessibility Guidelines, how users work with assistive technology, and have some practical understanding of web page design.
HTML Optimisation		HTML	NPM	gulp-cleanhtmlgulp-htmlcleangulp-htmltidygrunt-contrib-cleangrunt-htmlclean
HTML Validation		HTML	NPM	grunt-html-valgrunt-htmlgrunt-html-validatorgulp-html-validatorgulp-htmlgulp-w3cjsgulp-htmlhintgrunt-check-pagescheck-pages
HTML5 Accessibility		Accessibility	Online	Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, December 2017
Humaan's QA		Checklist	Online	Humaan's QA checklist for launching a website. Feel free to use this for yourself, published under a Creative Commons Sharealike license.
Image Optimisation		Image	NPM	grunt-contrib-imageminimageoptim-cligulp-imagemingulp-tinypngtinifygrunt-responsive-images-sbcustomgrunt-responsive-images-extendergrunt-clowncargrunt-image-resizegrunt-webp-compressgulp-webpimagemin-webp base-64gulp-base64gulp-css-base64gulp-inline-base64
Le validateur HTML du WDG		HTML	Online	The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases. However, some minor differences may arise.
Minify HTML		HTML	NMP	gulp-htmlmingrunt-contrib-htmlmin
Minify JavaScript		Files	NMP	grunt-contrib-uglifygrunt-closure-compilergulp-uglifygulp-closure-compilergulp-concat-jsgrunt-contrib-jshintjshint-html-reporter
Mixed content		Mixed Content	Online	Testez votre site internet ou votre boutique e-commerce à la recherche de mixed content. Le contenu mixé peut empêcher la connexion sécurisée avec le protocole HTTPS. En 1 clic, vérifier si votre site contient des contenus mixes tel que des scripts / styles ou images…
Mobile Checker		Mobile Checker	Online	The Mobile Checker is a tool for Web developers who want to make their Web page or Web app work better on mobile devices.
Nu HTML Checker		HTML	Online	The Nu Html Checker (v.Nu) is an ongoing experiment in better HTML checking, and its behavior remains subject to change. In particular, because new types of error checks continue to be actively added to the checker, there is no guarantee provided that if the checker reports zero errors for a particular document at one point in time, it will report zero errors for that same document at some later point in time.
PhpSecInfo		Security	Online	PhpSecInfo provides an equivalent to the phpinfo() function that reports security information about the PHP environment, and offers suggestions for improvement. It is not a replacement for secure development techniques, and does not do any kind of code or app auditing, but can be a useful tool in a multilayered security approach.
Pingdom		Performance	Online	Pingdom offers cost-effective and reliable uptime and performance monitoring for your websites. We use more than 70 global polling locations to test and verify our customers’ sites 24/7, all year long. With Pingdom you can monitor your website’s uptime, performance, and interactions for a better end-user-experience. Your customers will thank you.
Robots.txt Checker		Web Server	Online	Robots.txt files (often erroneously called robot.txt, in singular) are created by webmasters to mark (disallow) files and directories of a web site that search engine spiders (and other types of robots) should not access. This robots.txt checker is a 'validator' that analyzes the syntax of a robots.txt file to see if its format is valid as established by Robot Exclusion Standard (please read the documentation and the tutorial to learn the basics) or if it contains errors.
SSL Checker		SSL	Online	This SSL Checker will help you diagnose problems with your SSL certificate installation. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn't give any errors to any of your users. To use the SSL Checker, simply enter your server's hostname (must be public) in the box below and click the Check SSL button. If you need an SSL certificate, check out the SSL Wizard.
SSL Decoder		SSL	Online	This site checks the SSL/TLS configuration of a server. In shows you the full certificate chain, including all kinds of information about every certificate, as well as connection information like ciphersuites and protocol support.
SSL Server Test		SSL	Online	This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet. Please note that the information you submit here is used only to provide you the service. We don't use the domain names or the test results, and we never will.
Test an SSL Web Server		SSL	Online	Is your secure web server configured correctly? Misconfigurations can slow down your users' experience at best, and prevent them from reaching your site entirely at worst. Use this free SSL / TLS server tester to conduct a thorough analysis of your SSL web server performance.
Test everything		Web site tests	Online	Propose un panel d'outils permettant de tester un grand nombre de points sur l'intégralité du site.
The ultimate website launch checklist		Checklist	Online	We launched the original website launch checklist back in 2009 and, as is rapidly becoming tradition, have revisited it to check it's still relevant, valuable and useful. So, take a look and make sure you're ready to launch in style.
W3C Markup Validation Service		HTML	Online	This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available. As an alternative you can also try our non-DTD-based validator.
Wappalyzer		Web analyser	Online	Wappalyzer is an open-source, platform independent utility capable of identifying 1,155 different web technologies. It was created by Elbert Alias in 2009, has received contributions from hundreds of developers worldwide and enjoys an active user base of a million people.
Web Page Test		Performance	Online	Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.
Web Performance		Performance	NPM	gulp-sitespeediogulp-webpagetestgrunt-web-performance
WebAIM Wave		Accessibility	Online	WebAIM provides a number of web accessibility products and services. The WAVE accessibility evaluation tool is administered by WebAIM. This free, online tool provides visual feedback of a page's accessibility. WebAIM web accessibility services include accessibility training, web site monitoring & reporting, certification, consulting, accessible site design, and accessibility repairs.
WebSite Optimization		Optimization	Online	Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates the latest best practices from Website Optimization Secrets, web page size guidelines and trends, and web site optimization techniques into its recommendations.
XML well-formedness checker and validator		XML Validator	Online	Use this form to check an XML document for well-formedness and (optionally) DTD-validity. External entity references are included, even when not validating. If the document is well-formed, the parser outputs the corresponding canonical XML.

Aller plus loin

Even Faster Web Sites

Steve Souders

Souders' previous book, the bestselling High Performance Web Sites, shocked the web development world by revealing that 80% of the time it takes for a web page to load is on the client side. In Even Faster Web Sites, Souders and eight expert contributors provide best practices and pragmatic advice for improving your site's performance in three critical categories : JavaScript-Get advice for understanding Ajax performance, writing efficient JavaScript, creating responsive applications, loading sc...

• O'reilly
• Partenaire

High Performance Web Sites

Steve Souders

The rules in High Performance Web Sites explain how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site -- adjustments that are critical for any rich web application. Other sources of information pay a lot of attention to tuning web servers, databases, and hardware, but the bulk of display time is taken up on the browser side and by the communication between server and browser. High Performance Web Sites covers every aspect of...

• O'reilly
• Partenaire

Qualité web - Les bonnes pratiques pour améliorer vos sites

Élie Sloïm, Laurent Denis, Muriel de Dona, Fabrice Bonny

Accessibilité, référencement, performance, navigation, sécurité... les bonnes pratiques du web enfin réunies dans un seul livre ! aujourd'hui, grâce à une multitude d'outils et de technologies qui rendent l'opération de plus en plus simple et intuitive, tout le monde ou presque peut réaliser un site internet. mais cela ne signifie pas pour autant que tout le monde sait concevoir un site qui réponde à toutes les exigences de qualité, d'accessibilité, de performance et d'ergonomie fa...

• Temesis
• Partenaire