• You are currently browsing the Christian Heilmann blog archives for January, 2008.

  • Archive for January, 2008

    Will not link for pocket money

    Friday, January 18th, 2008

    It seems that there is a rather annoying group of people sending random emails about text link advertising to bloggers. I’ve got some, and Ed Eliot sitting next to me got the same. This wouldn’t be an issue, after all I think I should get some reward for keeping this up for years and fending off spammers and hacking attempts while I’d really just want to concentrate on what to write here. The crux of the matter is the ridiculous terms and conditions these new kids on the advertising block ask for:

    • Can you add a link to the following articles … for the lifetime of the web site
    • I will pay you $10-15 dollars for each link as a one-off payment

    My first confusion there is “lifetime of the web site”. Does this mean I can shut it down tomorrow and claim it caught a cold and died? Secondly a ONE-OFF payment of $10 for an infinite time of showing an ad a client probably pays you at least $100 a month for?

    I appreciate that some people try to get a foothold in a very competitive market like online advertising (and I got an email answer like that when I pointed out the slight discrepancy of what other companies pay for a monthly view vis-a-vis the one-off I could spend in Starbucks on a coffee and a muffin) but please be reasonable and don’t think that people who have high-traffic sites didn’t do research what value a text link from their sites has. We do get punished by Google for adding them, too, and it should be worth our while.

    Walkies and Talkies – My schedule for the next few months

    Friday, January 18th, 2008
    • March 18th, Roosevelt Hotel NYC, US, AjaxWorld – talking about Building large web applications with the YUI
    • March 21st – March22nd, Montreal, Quebec – Nurun workshop on Accessibility
    • April 3rd, Scotland, Highland Fling, Scotland – Sharing the joy – building badges for distribution
    • April 25th (one day shy of my birthday), London, AbilityNet’s “Accessibility 2.0: a million flowers bloom” – right and wrong implementation of accessibility

    Planned talks (need confirmation)

    • Ajax Experience 2008 – sent in “the human factor in web applications” and “YUI for control freaks” as proposals
    • Tech conference about the future of web development in Beijing

    Past talks

    • February 12th, London Trocadero Beers and innovation #13 – A panel that chats about the changes of relationships between developers and designers (costs £25 though, didn’t know that)
    • February 20th, somewhere in Leeds GeekUptalking about the YUI

    This page is not microformatted as I am a lazy bastard and want a WordPress plugin
    [tags]talks,publicspeaking,events,christianheilmann,heilmann[/tags]

    Reason #21312 to build accessible data tables – convert them directly to YUI flash charts!

    Thursday, January 17th, 2008

    Following up the success of the data table to Google chart post, and the request in the comments to do the same for YUI charts, go and check the YUIblog today (like, now) and get your fix there:

    example of how the script creates a chart above a data table from the table data

    The elevator pitch:

    • Create a valid HTML data table
    • Add two script tags to the body and a class to each table
    • Have tasty pie charts above each of the tables

    [tags]tables,accessibility,yui,flash,progressive enhancement[/tags]

    A quick idea: JavaScript version controlling for static HTML documents

    Monday, January 14th, 2008

    When you write tutorials and you want people to use them wherever they are it is a good idea to offer the HTML documents as a zip for downloading. The benefit to the end user is that they don’t need to be online to look something up (I for example have the HTML 4.01 documents on my machine as HTML documents). The drawback is that the documents could be outdated without the user knowing – even when they are online while watching them.

    Now, I pondered a bit about this and wondered if something like this wouldn’t be a solution:

    • You add a version number to the title of each document.
    • You add a remotely hosted versions.js script at the end of each document.
    • This script has a JSON object with the version information of each document and compares the file name and version.
    • If the version is outdated, it generates an error message that gets shown to the user.

    You can try it out by downloading the two demo documents un-zip them and open them on a computer that is connected to the internet. The second document linked from the first one should be outdated.

    The source of versions.js

    
    (checkversion = function(){
    // change as fit
    var versions = {
    'documentexample.html':'1.0',
    'documentexample2.html':'2.0'
    };
    var errorID = 'versionerror';
    var errorMessage = 'This document is outdated, please go to the homepage to download the new version!';
    
    // checking code
    var d = document;
    // get the version number
    var cv = d.title.match(/(version (.*))$/);
    // get the file name
    var cn = window.location.href.split('/');
    cn = cn[cn.length-1].split('#')[0];
    // check and create error message if there is a mismatch
    if(cv[1] && versions[cn]){
    if(versions[cn] !== cv[1]){
    if(!d.getElementById(errorID)){
    var m = d.createElement('div');
    m.id = errorID;
    m.appendChild(d.createTextNode(errorMessage));
    d.body.insertBefore(m,d.body.firstChild);
    }
    }
    }
    }());
    

    You could create both the titles and the JSON object in versions.js on the backend automatically by scanning the titles or from a version control system. What do you think?

    [tags]offline,HTML,documents,downloadable articles,JavaScript,versioncontrol,webdevtrick,tutorials[/tags]

    Generating charts from accessible data tables and vice versa using the Google Charts API

    Tuesday, January 8th, 2008

    Google have lately been praised for their chart API and my esteemed colleague Ed Eliot has a workaround for its restrictions in terms of caching and server hits.

    I played around a bit with it and thought it very cool but it felt a bit clunky to add all these values to a URL when they could be in the document for those who cannot see pie charts. This is why I wrote a small script that converts data tables to charts using the API and a wee bit of JavaScript.

    Using this script you can take a simple, valid and accessible data table like the following and it gets automatically converted to a pie chart.

    
    <table class="tochart size300x100 color990000" summary="Browsers for this site, March 2007">
    <caption>Browsers</caption>
    <thead>
    <tr><th scope="col">Browser</th><th scope="col">Percent</th></tr>
    </thead>
    <tbody>
    <tr><td>Firefox</td><td>60</td></tr>
    <tr><td>MSIE</td><td>25</td></tr>
    <tr><td>Opera</td><td>10</td></tr>
    <tr><td>Safari</td><td>5</td></tr>
    </tbody>
    </table>
    

    Simply add the script to the end of the body and it’ll convert all tables with a class called “tochart”. You can define the size (widthxheight) and the colour as a hexadecimal triplet as shown in this example. If you leave size and colour out, the script will use presets you can alter as variables in the script itself.

    What about data tables from charts?

    As Victor of the Yahoo! Accessibility group asked for the other way around, this is now also possible. When you use the verbose data mode for the charts and add the class “totable” to the image the script will generate a data table preceeding the image and null out the alternative text. For example:

    
    <img src="http://chart.apis.google.com/chart?cht=p3&chco=339933&chs=450x150&chd=t:10,58,95,30,63&chl=Apples|Oranges|Pineapples|Bananas|Pears" alt="Fruit Consumption of under 15 year olds, March 2007" class="totable"/>
    

    The tables have a class called “generatedfromchart” which you can use to move them off-left if needed.

    Check out the demo page and download the script with the demo page and CSS to have a go with it yourself. Of course, all is licensed creative commons, so go nuts.

    Useful? Please comment if you want something extra or wonder how the script works.

    [tags]accessibility,charts,api,google,tables,javascript[/tags]