Christian Heilmann

You are currently browsing the archives for the Google category.

Archive for the ‘Google’ Category

Problems with the YouTube Chromeless player being unavailable? – Change the URL

Thursday, June 12th, 2008

I am almost ready to release v2 of the easy youtube player but out of a sudden everything stopped working. I thought at first my own developer key got banned for incessant re-loading locally, but even Google’s own example is broken.

The solution to it seems to be to change the URL of the embed code:


// broken
swfobject.embedSWF(‘http://gdata.youtube.com/apiplayer?key= ... ‘)
// working
swfobject.embedSWF(‘http://gdata.youtube.com/apiplayer/cl.swf?key= ... ‘)

Thanks do d.kunchev who pointed this out on the mailing list

An unobtrusive badge for Google Reader’s shared items

Wednesday, May 21st, 2008

I am a user of Google Reader to get through the vast amounts of RSS feeds I subscribed to. I think it is safe to say that reading RSS and twittering has replaced most of my web surfing.

Like most big RSS readers, Google reader also allows you to share great finds you had with people who want to and are in your social neighbourhood. You can either get these finds as a feed or as a little badge (called a clip in Google lingo) to include in your blog or other sites.

The out-of-the-box version of this badge can be customized and results in two JavaScript includes which write out the badge.

That is nice, but I don’t quite care for things that could offer functionality without JavaScript but don’t bother, which is why I checked more closely what the Google badge does.

If you look at the generated script includes you’ll find for example the following URL ( added spaces to avoid breaking my blog :) )

http://www.google.com/ reader/public/javascript/ user/07479231772993841072/ state/com.google/broadcast? n=5&callback=GRC_p%28%7Bc%3A%22green%22%2Ct %3A%22Christian%20Heilmann%27s %20shared%20items%22%2Cs%3A%22false%22%7D%29%3Bnew%20GRC

Clicking this will get you a JSON object with a wrapper function (and for some reason a comment that this is a JavaScript file), which means you can use this for your own purposes.

All you need is your user ID, which you can get this one easily from your shared items homepage that Google Reader offers. In my case this is http://www.google.com/reader/shared/07479231772993841072.

The other interesting parameters of the JSON API are the n parameter defining the amount of items and the callback parameter defining the name of the function call wrapped around the JSON data.

Putting all of this together it was easy to create a badge that uses the following HTML to show off my shared items on Google Reader.


Visitors without JavaScript will still be able to click through to the page of my shared items. Those with JavaScript will get the latest five.

You can see the badge in action and download it for yourself on the demo page (using tutorialbuilder):

Making twitter multilingual with a hack of the Google Translation API

Monday, March 31st, 2008

After helping to fix the Yahoo search result pages with the correct language attributes to make them accessible for screen reader users I was wondering how this could be done with user generated content. The easiest option of course would be to ask the user to provide the right language in the profile, but if you are bilingual like me you actually write in different languages. The other option would be to offer me as the user to pick the language when I type it, which is annoying.

I then stumbled across Google’s Ajax Translation API and thought it should be very easy to marry it with for example the JSON output of the twitter API to add the correct lang attributes on the fly.

Alas, this was not as easy as I thought. On the surface it is very easy to use Google’s API to tell me what language a certain text is likely to be:


var text = “¿Dónde está el baño?”;
google.language.detect(text, function(result) {
if (!result.error) {
var language = ‘unknown’;
for (l in google.language.Languages) {
if (google.language.Languages[l] result.language) {
language = l;
break;
}

}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}

});

However, if you want to use this in a loop you are out of luck. The google.language.detect method fires off an internal XHR call and the result set only gives you an error code, the confidence level, a isReliable boolean and the language code. This is a lot but there is no way to tell the function that gets the results which text was analyzed. It would be great if the API repeated the text or at least allowed you to set a unique ID for the current XHR request.

As Ajax requests return in random order, there is no way of telling which result works for which text, so I was stuck.

Enter Firebug. Analyzing the requests going through I realized there is a REST URL being called by the internal methods of google.language. In the case of translation this is:


http://www.google.com/uds/GlangDetect?callback={CALLBACK_METHOD}&context={NUMBER}&q={URL_ENCODED_TEXT}&key=notsupplied&v=1.0

You can use the number and an own callback method to create SCRIPT nodes in the document getting these results back. The return call is:


CALLBACK_METHOD(‘NUMBER’,{“language” : “es”,”isReliable” : true,”confidence” : 0.24716422},200,null,200)

However, as I am already using PHP to pull information from another service, I ended up using curl for the whole proof of concept to make twitter speak in natural language:


    // curl the twitter feed
    $url = ‘http://twitter.com/statuses/public_timeline.rss’;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $twitterdata = curl_exec($ch);
    curl_close($ch);
    // get all the descriptions
    preg_match_all(“/([^<]+)/msi”, $twitterdata,$descs);
    // skip the main feed description
    foreach($descs[1] as $key=>$d){
    if($key=0){
    continue;
    }

    // assemble REST call and curl the result
    $url = ‘http://www.google.com/uds/GlangDetect?callback=’ .
    ‘feedresult&context=’ . $key . ‘&q=’ . urlencode($d) .
    ‘&key=notsupplied&v=1.0’;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $langcode = curl_exec($ch);
    curl_close($ch);
    // get the language
    preg_match(“/”language”:”([^”]+)”/”,$langcode,$res);
    // write out the list item
    echo ‘

  • ‘.$d.’
  • ‘;
    }

    ?>

Check out the result: Public twitter feed with natural language support

I will do some pure JavaScript solutions soon, too. This could be a great chance to make UGC a lot more accessible.

Thanks to Mark Thomas and Tim Huegdon for bouncing off ideas about how to work around the XHR issue.

Open Source Jam at Google UK

Sunday, February 24th, 2008

Me posing with my mobile at Open Source Jam

Last Thursday I went to the Google offices in London Victoria to attend a bi-monthly unconference called Open Source Jam. I was running a bit on autopilot as I was in Leeds the day before talking about the YUI at the Geekup meeting and originally wanted to skip the session as I was pretty knackered. It was great though that I didn’t follow my instinct, but instead have a nice unconference with Pizza, Beer and lots of 5 minute+5 minute Q&A sessions revolving around creating interfaces for humans.

In comparison to other barcamps the Open Source Jam was a lot more technical and speakers were more coders than web developers. I’ve learnt about a chess program for the iPhone, how to write APIs to make them more accessible to humans, UXON - a User Interface Object Notation (more on this coming soon), Behaviour Driven Development, holes in the Flickr API and a lot of other things.

My initial idea of staying for an hour and then leaving for a speaker’s dinner of a company-internal conference was foiled and I took the last tube back from Victoria.

My own talk was a preview of a session I will give at the Abilitynet Accessibility conference in April, talking about how accessibility is not an extra task but – if taken into consideration from the beginning – an opportunity to build better products for everybody.

I want to thank the organizers and will very likely be there for the next jam.

Photo by Adewale Oshineye

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.













Browsers
BrowserPercent
Firefox60
MSIE25
Opera10
Safari5

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:


Fruit Consumption of under 15 year olds, March 2007

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.