root navigation content

Delavy for the Web

Bilingual thinking to improve the Web

Version FrançaiseEnglish Version

Ubiquity scripts for Web development

mardi 23 juin 2009 [19:34:11]

Somes littles scripts for Ubiquity, for you who make websites. They submit url of the current page on wich you work, to a "tool page" to validate HTML, CSS, links or accessibility, or to assess the loading time. That allow you to check your code in a far and easy way.

Cet article existe aussi en version française.

If you do not know Ubiquity, this awesome Firefox add-on, it allows to execute javascript code to interact with pages, with numerous feature. You can go to see Ubiquity presentation on Mozilla Labs.

I am inspired by a script to do a google search for a word on a website[01]. I just had to change names and urls, to obtain a guide script re-usable to submit the current page url to a tools. In fact, I put it in the PHP request of the URL of the tool.

	<li><a href="#id27-cmd1" title="check the html code of the page">HTML validation (<acronym title="World Wide Web Consortium">W3C</acronym>)</a></li>
CmdUtils.CreateCommand({
  name: "NOM", // name to call the command
  icon: "file://localhost/D:/icon.png", //relativ or absolute
    preview: function( pblock ) {
    pblock.innerHTML = "Valide le css de cette page"; // description of the command
  },

  execute: function() {
    var doc =  Application.activeWindow.activeTab.document;
    var validatorURL = "http://truc.com?uri=" + doc.location + &lang=fr; //the first par of the url with the php, url of the page to submit, end of the url
    Utils.openUrlInBrowser(validatorURL);
  }
});

So I created some commands with the tools I regulary use.

HTML validation

Submit page to the CSS validator of theW3C.

//Check the html
CmdUtils.CreateCommand({
  name: "validate-html",
  icon: "http://www.w3.org/2008/site/images/favicon.ico",
  preview: function( pblock ) {
    pblock.innerHTML = "check the html of this page";
  },

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

multipages HTML validation

From the root of the site, the mutlipages validator check the html of every page of the website (limitation : 100 pages/validation).

//Check the html on all the pages of the site
CmdUtils.CreateCommand({
  name: "validate-multisite",
  preview: function( pblock ) {
    pblock.innerHTML = "Check the html on all the pages of this site";
  },

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

CSS validation

Submit the page to the CSS validator of the W3C.

//Check the CSS of the page
CmdUtils.CreateCommand({
  name: "validate-css",
  icon: "http://www.w3.org/2008/site/images/favicon.ico",
    preview: function( pblock ) {
    pblock.innerHTML = "Check the CSS of this 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);
  }
});

Links Validation

Submit the page to the links validator of the W3C, who check if they doesn't be dead or badly written.

//Check the links of the page
CmdUtils.CreateCommand({
  name: "validate-links",
  icon: "http://www.w3.org/2008/site/images/favicon.ico",
    preview: function( pblock ) {
    pblock.innerHTML = "Check the links of this 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);
  }
});

WCAG validation

Submit the page to a validator who checking the compliance of the WCAG 1.0 with automatics test.

//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 of loading time

Submit the page to a tool who can assess the time for all page elements take to load.

//Assess loading-time
CmdUtils.CreateCommand({
  name: "loading-time",
   preview: function( pblock ) {
    pblock.innerHTML = "Evaluate loading-timequot;;
  },

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

I hope those little script will be useful. I know Javascript not yet, so if you see some improvements to make, please let me know !

Notes and references:

  • [01]"google site search", I can(t find the author, if it's you make me a sign.

Texts, pictures, and design : Copyright © 2008 - 2009 Delaby Pierre.
Copyleft : This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License. You find a copy of this license on the site www.artlibre.org and other sites.
Icons by Mark James in Creative Commons | All Credits and Attributions.

Logz Powered : http://www.logz.org | Host by Provisoire.fr | Copyleft Licence Art Libre | Vrs ?, Vxl ? | site map