accueil navigation contenu

Delavy for the Web

Reflexions bilingues pour améliorer le Web

Version FrançaiseEnglish Version

Scripts Ubiquity pour le développement Web

mardi 23 juin 2009 [19:31:49]

Quelques petits scripts pour Ubiquity, pour vous qui faites des sites webs. Ils soumettent l'url de la page sur laquelle vous travaillez à une "page outil" pour valider le code HTML, CSS, les liens ou l'accessibilité, ou pour évaluer le temps de chargement. Cela vous permet de vérifier votre code simplement et très rapidement.

This article is available in an English version.

Au cas où vous ne connaîtreriez pas Ubiquity, ce merveilleux add-on pour Firefox, il permet d'exécuter du code Javascript pour interagir avec les pages, avec de très nombreuses fonctionnalité. Vous pouvez aller voir la présentation d'Ubiquity sur Mozilla Labs.

Je suis parti d'un script pour effectuer une recherche google [01] sur un terme dans un site. Il m'a suffit de changer les adresses et noms, pour obtenir un gabarit de script réutilisable qui permet de soumettre l'url de la page courante à un outil . En fait, je l'insère dans la requête PHP de l'url de la page de l'outil.

CmdUtils.CreateCommand({
  name: "NOM", // nom pour appeler la commande
  icon: "file://localhost/D:/icon.png", //relative ou absolue
    preview: function( pblock ) {
    pblock.innerHTML = "Valide le css de cette page"; // description de la commande
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://truc.com?uri=" + doc.location + &lang=fr; //le bout d'url avec du php, l'adresse de la page à soumettre, la fin de l'url 
    Utils.openUrlInBrowser(validatorURL);
  }
});

De là, j'ai créé quelques commandes avec des outils que j'utilise régulièrement.

Validation HTML

Soumet la page au validateur CSS du W3C.

//Valide le html de la page
CmdUtils.CreateCommand({
  name: "validate-html",
  icon: "http://www.w3.org/2008/site/images/favicon.ico",
  preview: function( pblock ) {
    pblock.innerHTML = "Valide le code html de cette page";
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://validator.w3.org/check?uri=" + doc.location;
    Utils.openUrlInBrowser(validatorURL);
  }
});

Validation HTML multipages

A partir de la racine du site, le validateur mutlipages vérifie le HTML de toutes les pages du site (limité à 100 pages par validation).

//Valide toutes les pages du site
CmdUtils.CreateCommand({
  name: "validate-multisite",
  preview: function( pblock ) {
    pblock.innerHTML = "Valide toutes les pages de ce site";
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://validateur.ca/?q=" + doc.location;
    Utils.openUrlInBrowser(validatorURL);
  }
});

Validation CSS

Soumet la page au validateur CSS du W3C.

//Valide le css de la page
CmdUtils.CreateCommand({
  name: "validate-css",
  icon: "http://www.w3.org/2008/site/images/favicon.ico",
    preview: function( pblock ) {
    pblock.innerHTML = "Valide le css de cette page";
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://jigsaw.w3.org/css-validator/validator?uri=" + doc.location + "&usermedium=all&warning=1&lang=fr";
    Utils.openUrlInBrowser(validatorURL);
  }
});

Validation des liens

Soumet la page au validateur de liens du W3C, qui vérifie s'ils ne sont pas "morts" ou mal rédigés.

//Valide les liens de la page
CmdUtils.CreateCommand({
  name: "validate-links",
  icon: "http://www.w3.org/2008/site/images/favicon.ico",
    preview: function( pblock ) {
    pblock.innerHTML = "Valide les liens de cette page";
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://validator.w3.org/checklink/checklink?uri=" + doc.location + "&hide_type=all&depth=&check=Check";
    Utils.openUrlInBrowser(validatorURL);
  }
});

Validation WCAG

Soumet la page à un validateur qui évalue le respect des WCAG 1.0 avec des test automatiques.

//WGAC
CmdUtils.CreateCommand({
  name: "validate-wcag",
  icon: "http://www.hera.flexit.fr/img/favicon.ico",
    preview: function( pblock ) {
    pblock.innerHTML = "Teste l'accessibilité du site";
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://www.hera.flexit.fr/?url=" + doc.location;
    Utils.openUrlInBrowser(validatorURL);
  }
});

Evaluation du temps de chargement

Soumet la page à un outil qui permet d'évaluer le temps que met chaque élément de la page à se télécharger.

//Evalue le temps de chargement
CmdUtils.CreateCommand({
  name: "chargement",
  preview: function( pblock ) {
    pblock.innerHTML = "Mesure le temps de chargement";
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://tools.pingdom.com/fpt/?url=" + doc.location;
    Utils.openUrlInBrowser(validatorURL);
  }
});

J'espère que ces petits scripts vous seront utiles. Je ne connait pas encore le Javascript, donc si vous voyez des améliorations à apporter, n'hésitez pas à m'en faire part !

Notes et références:

  • [01]"google site search", je ne retrouve pas l'auteur, s'il c'est vous faites moi signe

Textes, images et design : Copyright © 2008 - 2009 Delaby Pierre.
Copyleft : cette oeuvre est libre, vous pouvez la redistribuer et/ou la modifier selon les termes de la Licence Art Libre. Vous trouverez un exemplaire de cette Licence sur le site Copyleft Attitude www.artlibre.org ainsi que sur d'autres sites.
Icons par Mark James sous Creative Commons | Tous les Crédits et Attributions.

Généré avec Logz : http://www.logz.org | Hebergé par Provisoire.fr | Copyleft Licence Art Libre | Vrs ?, Vxl ? | site map