Comment détecter les erreurs d'un ensemble de fichiers html et css ?
Nous avons développé une librairie php nommée php-w3cvalidator permettant d'interroger automatiquement les services de W3C avec une liste de fichier html et css, les rapports de résultats sont affichés sous forme de fichier html.
Nous avons validé les pages de ce blog à l'aide de cette librairie.
W3C ou World Wide Web Consortium est un organisme de supervision non lucratif, il supervise le développement d'un ensemble de standards dont html et css, il met à disposition un ensemble d'outils gratuits permettant de vérifier leur conformité.
W3C Markup Validator est un service gratuit de vérification d'un fichier html.
CSS Validation Service est un service gratuit de vérification d'un fichier css.
PHP ou Hypertext Preprocessor doit être installé, php est un langage de programmation libre principalement utilisé dans le développement internet.
Composer est un gestionnaire libre de dépendances pour php, il permet de déclarer et d'installer automatiquement des librairies tierces.
Exécuter dans un invité, la ligne de commande ci-dessous :
php -r "readfile('https://getcomposer.org/installer');" | php
Cela affiche :
#!/usr/bin/env php
All settings correct for using Composer
Downloading...
Composer successfully installed to: C:\tmp\composer.phar
Use it: php composer.phar
Un fichier composer.phar est maintenant présent dans le répertoire courant.
Créer un fichier composer.json dans le répertoire courant contenant :
{
"require": {
"glicer/w3c-validator": "dev-master"
}
}
À partir du même répertoire que composer.json, exécuter dans un invité, la ligne de commande ci-dessous :
php composer.phar install
Cela affiche :
Loading composer repositories with package information
Installing dependencies (including require-dev)
- Installing symfony/css-selector (v2.6.4)
Loading from cache
- Installing glicer/simply-html (dev-master f2436c9)
Cloning f2436c9e31a2e356cbd305c19fa7cc4933d02e04
- Installing symfony/finder (v2.6.4)
Loading from cache
- Installing symfony/filesystem (v2.6.4)
Loading from cache
- Installing react/promise (v2.2.0)
Loading from cache
- Installing guzzlehttp/streams (3.0.0)
Loading from cache
- Installing guzzlehttp/ringphp (1.0.6)
Loading from cache
- Installing guzzlehttp/guzzle (5.2.0)
Loading from cache
- Installing glicer/w3c-validator (dev-master feeeae8)
Cloning feeeae8162cd48cbb438e360cf31e4bb852f0486
Writing lock file
Generating autoload files
Le répertoire courant contient les fichiers ci-dessous :
composer.json
composer.phar
composer.lock
vendor
├───composer
├───glicer
│ ├───simply-html
│ └───w3c-validator
├───guzzlehttp
├───react
└───symfony
Créer un fichier sample_w3cvalidator.php contenant le code ci-dessous :
<?php
require 'vendor/autoload.php';
use Symfony\Component\Finder\SplFileInfo;
use Symfony\Component\Finder\Finder;
use GlValidator\GlW3CValidator;
//créé le validateur avec en paramètre le répertoire de destination des rapports
$validator = new GlW3CValidator(__DIR__ . "/out");
$finder = new Finder();
//tous les fichiers du répertoire entry
$files = $finder->files()->in(__DIR__ . "/in/");
//ajouter les fichier glicer.css et glicer.html
$files = [$files, __DIR__ . "/glicer.css", __DIR__ . "/glicer.html"];
//renvoie un tableau contenant la liste des chemins des rapports au format html
$results = $validator->validate(
$files,
['html', 'css'], //valider les fichiers html et les fichiers css
function (SplFileInfo $file) { //fonction appelée à chaque validation
echo $file->getRealpath();
}
);
Exécuter le script en tapant la ligne de commande ci-dessous :
php sample_w3cvalidator.php
Cela affiche dans notre cas :
Post : C:\tmp\w3c\in\index.html
Post : C:\tmp\w3c\in\solver.css
Post : C:\tmp\w3c\glicer.css
Post : C:\tmp\w3c\glicer.html
Les rapports de résultats sont créés dans le répertoire out, dans notre cas :
Les rapports peuvent être visualisés dans n'importe quel navigateur internet.
