Vérifier automatiquement et gratuitement la conformité des fichiers html et css avec php

Comment détecter les erreurs d'un ensemble de fichiers html et css ?

2 mars 2015

Sommaire

Introduction
Pré-requis
Installation de composer
Configurer le fichier composer.json
Installation des librairies
Structure du répertoire
Exemple d'utilisation de la librairie w3c-validator
Versions des logiciels et langages utilisés

Introduction

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.

Pré-requis

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.

Installation de composer

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.

Configurer le fichier composer.json

Créer un fichier composer.json dans le répertoire courant contenant :

{
    "require": {
        "glicer/w3c-validator": "dev-master"
    }
}

Installation des librairies

À 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

Structure du répertoire

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

Exemple d'utilisation de la librairie w3c-validator

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 :

w3c_html_index.html
w3c_css_solver.html
w3c_html_glicer.html
w3c_css_glicer.html

Les rapports peuvent être visualisés dans n'importe quel navigateur internet.

Versions des logiciels et langages utilisés

php 5.5
composer 1.0