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
commentaires: (ajouter)
contributeur: payday loans
date: 2015-09-18 20:06:25
vforoe payday loans

contributeur: Wxz4LSxP
date: 2015-08-27 13:12:59
Pillspot.org. Canadian Health&Care.No prescription olnnie pharmacy.Special Internet Prices.Pillspot.org. Categories: Anti-allergic/Asthma.Womens Health.Antiviral.Stop SmokingStomach.Weight Loss.Eye Care.Antibiotics.Blood Pressure/Heart.Mental HealthPain Relief.Skin Care.Antidepressants.Anxiety/Sleep Aid.Antidiabetic.Vitamins/Herbal Supplements.Mens H

contributeur: pay day loans
date: 2015-07-26 11:05:01
pjolwrp pay day loans

contributeur: payday loans online
date: 2015-07-04 21:50:55

contributeur: payday loans
date: 2015-06-30 15:25:02
hobpyjbi payday loans

contributeur: payday loans
date: 2015-04-27 18:56:01
cpotdqtf payday loans

contributeur: payday loans
date: 2015-03-29 12:13:48
owowyt payday loans

contributeur: payday loans
date: 2015-03-04 21:46:42
oaguxx payday loans

contributeur: payday loans
date: 2015-02-12 23:48:32
jrrpidbk payday loans

contributeur: payday loans
date: 2014-12-12 08:04:57
vvzfpbmj payday loans

contributeur: mobile loans
date: 2014-12-03 07:44:59
zepptny mobile loans

contributeur: payday loans
date: 2014-10-20 01:46:44
opaexw payday loans

contributeur: payday loans
date: 2014-08-08 01:45:07
tptpnx payday loans

contributeur: emergency loans for bad credit
date: 2014-08-05 15:38:03

contributeur: quick cash loans
date: 2014-05-14 22:31:14

contributeur: payday loans
date: 2014-01-27 17:15:01
xaxesa payday loans

contributeur: no fax payday loans
date: 2013-09-27 08:49:22

contributeur: Bad Credit Loans
date: 2013-08-02 21:44:52

contributeur: payday loans
date: 2013-05-07 16:12:17
ozhiqw payday loans

contributeur: cheap viagra tablets
date: 2013-04-09 16:31:26

pour obtenir le code de validation ne conserver que les lettres et chiffres en majuscules de cette expression: dEb2eXcccKeeeK >>  

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