Christian Heilmann

You are currently browsing the archives for the My Articles category.

Archive for the ‘My Articles’ Category

Adding transcripts to presentations embedded from SlideShare using YQL

Sunday, January 11th, 2009

I like SlideShare a lot (yeah, repetition, I know). It is a great way of spreading your presentations as it allows others to embed them into their blogs and web sites and it also allows people to download and re-use what you’ve done.

One thing I really like about SlideShare is that it creates HTML transcripts of your presentation displayed far down the page as shown in the following screenshot:

Screenshot of slideshare showing transcripts

Now, the annoying thing is that the SlideShare API - full of goodness as it is – does not provide a way to get to these transcripts in case you want to display them alongside your presentation. You also need to authenticate for detailed information which is very needed but also bad if you just want to offer a JavaScript solution.

Good thing that there is an easy way to retrieve information from any web site out there now and get it back as JSON to use in JavaScript: YQL. Using the YQL console and some XPATH I can for example extract the transcription information and get it back as XML (the slideshare URL is http://www.slideshare.net/cheilmann/shifting-gears-presentation and the XPATH //ol/li):


http://query.yahooapis.com/v1/public/yql?q=select * from html where url%3D”http%3A%2F%2Fwww.slideshare.net%2Fcheilmann%2Fshifting-gears-presentation” and xpath%3D’%2F%2Fol%2Fli’&format=xml

If you define the format as JSON and provide a callback parameter you can easily use this to write a small script to inject transcripts into SlideShare embeds:

slideshareTranscripts = function(){
var div = document.getElementsByTagName(‘div’);
var containers = {};
for(var i=0;div[i];i++){
if(div[i].id.indexOf(‘__ss’)!==-1){
var slideurl = div[i].getElementsByTagName(‘a’)[0].href.split(‘?’)[0];
containers[slideurl]={c:div[i],id};
get(slideurl);
}

}
function get(url){
var url = ‘http://query.yahooapis.com/v1/public/yql?’ +
‘format=json&callback=slideshareTranscripts.doit&q=’ +
‘select%20strong,p%20from%20html%20where%20url%3D%22’ +
encodeURIComponent(slideurl) +
‘%22%20and%20xpath%3D%27%2F%2Fol%2Fli%27&’;
var s = document.createElement(‘script’);
s.src = url;
s.type = ‘text/javascript’;
document.getElementsByTagName(‘head’)[0].appendChild(s);
}

function doit(o){
var url = decodeURIComponent(o.query.uri).split(‘”’);
var out = document.createElement(‘ol’);
var lis = o.query.results.li;
for(var i=0,j=lis.length;i var li = document.createElement(‘li’);
var strong = document.createElement(‘strong’);
var p = document.createElement(‘p’);
strong.appendChild(document.createTextNode(lis[i].strong));
p.appendChild(document.createTextNode(lis[i].p));
li.appendChild(strong);
li.appendChild(p);
out.appendChild(li);
}

containers[url[1]].c.appendChild(out);
}

return{doit:doit}
}();

You can see the script in action and download it for your own use. All you need to do is add it to the bottom of any document with one or several SlideShare embed codes in it. Here’s what the script does:

slideshareTranscripts = function(){
var div = document.getElementsByTagName(‘div’);

We get all the DIV elements in the page (there is probably a faster way using CSSQuery these days, but let’s be bullet-proof).

In order to find out which one of the DIVs is a SlideShare embed, we check for an ID that contains __ss as the embed codes have a generated ID starting with this.

What we will do with each of these is to find out what the url of the slideshow is. This is needed because of two reasons: first of all we want to retrieve the transcript and secondly we need a way of matching the returned data from YQL with the right DIV container.

As generated script nodes are not safe to load one after the other this makes sure that the right transcript gets added to the right slides.

So, what we do is check the ID of the DIV, get the first link, retrieve the url from it, store the DIV in an object called containers and use the url as the property name. This property gets a shortcut to the correct DIV as its value. All we need to do then is to get the transcript data via get():


var containers = {};
for(var i=0;div[i];i++){
if(div[i].id.indexOf(‘__ss’)!==-1){
var slideurl = div[i].getElementsByTagName(‘a’)[0].href.split(‘?’)[0];
containers[slideurl]={c:div[i],id};
get(slideurl);
}

}

The get() method is your garden variety script node generation function that calls the YQL API and defines slideshareTranscripts.doit() as the callback parameter. This means that the script will generate a script node, point it to YQL, YQL then gets the transcript information from SlideShare, turns it into JSON and calls doit() with the transcript information as a parameter.


function get(url){
var url = ‘http://query.yahooapis.com/v1/public/yql?’ +
‘format=json&callback=slideshareTranscripts.doit&q=’ +
‘select%20strong,p%20from%20html%20where%20url%3D%22’ +
encodeURIComponent(slideurl) +
‘%22%20and%20xpath%3D%27%2F%2Fol%2Fli%27&’;
var s = document.createElement(‘script’);
s.src = url;
s.type = ‘text/javascript’;
document.getElementsByTagName(‘head’)[0].appendChild(s);
}

The job of doit() is to generate the right markup and inject it into the embed codes. We create an ordered list and loop over all the li elements. We create the fitting HTML code for each of the list items and add the content as text nodes (innerHTML would try to render markup used in the slides – not a good idea).

We then retrieve the URL from the uri property and add the list as a new child node to the container div stored previously in the container object.

nt
function doit(o){
var out = document.createElement(‘ol’);
var lis = o.query.results.li;
for(var i=0,j=lis.length;i var li = document.createElement(‘li’);
var strong = document.createElement(‘strong’);
var p = document.createElement(‘p’);
strong.appendChild(document.createTextNode(lis[i].strong));
p.appendChild(document.createTextNode(lis[i].p));
li.appendChild(strong);
li.appendChild(p);
out.appendChild(li);
}

var url = decodeURIComponent(o.query.uri).split(‘”’);
containers[url[1]].c.appendChild(out);
}

return{doit:doit}
}();

That’s it. Of course you can simplify this by matching only the OL and using innerHTML to write out the list in one go, but this solutions also allows you to alter the HTML output of the list to – for example – make every http://example.com a link.

Happy transcribing!

Webmaster Jam Session hack – quickly fixing a web site with YUI grids

Saturday, October 4th, 2008

Last weekend I went to Atlanta, Georgia to speak at the Webmaster Jam Session or short WJS organized by Coffeecup software. I’ve written a detailed report on the event on the YDN blog and in short it was fantastic.

One of the things I did at the event is sit in on one of the Website Smackdown sessions, which are expert reviews of web sites people in the audience submitted. One of the sites was the following:

The original site

What shocked me about it was that it is fairly new, but still uses tables for layout. When I investigated I heard that the reason is simply lack of resources to build web sites in a different manner. This is sad, as nowadays we have resources to build upon readily available on the web that we couldn’t even dream of when I started developing. To prove the point that you can re-do a small info site like this one using semantic markup and CSS without even knowing much about it, I used the YUI grids and created the following in roughly 15 minutes:

YUI redesign site

You can download the web site demo files and play with them yourself.

I’d be happy to write more, in-depth articles about this kind of structure and redesign if there is interest. The only question I have about it is where to publish them? People that would benefit from these are not likely to read the blogs and magazines I write for. Is there a government web standards publication somewhere?

What makes a good web site?

Saturday, October 14th, 2006

Disclaimer: This is a list that will be part of the upcoming book for Friends of Ed about Web Development with Web Services and APIs. I thought it’d be interesting to preview it here and see what you think.

[link:http://cabanadigital.com/weblog/2006/10/14/%c2%bfque-hace-a-un-buen-sitio-web/#more-173,en español]

Following are some ideas about what makes a successful web site in the web environment these days. Some of this may sound very obvious, but it is a good idea to remind ourselves of the benefits of these ideas.

It is about content.

If you don’t have any interesting content (or content that is also available on hundreds of other sites) you will not reach many people no matter how much you polish the surface of your site.

It is about sharing.

If you put content on the web, it is there for people to see, download and maybe use. You can protect your rights by choosing and displaying a license agreement and copyright information (there is a great “create your own license” tool available at Creative Commons) and there is simply no sense in trying technical tricks to prevent people from downloading your images or copying your texts. When you develop sites these days, you will use a lot of content and programs other people developed. It is only fair to return the favor.

Without people sharing their tools and content for free the web would have never grown as big and exciting as it is now.

It is about access.

If your content is made available to everyone on the web regardless of ability and technical environment you are much more likely to be found and talked about than when you try to block out groups of users or expect a defined technical environment. Your computer is not a representation of everyone on the web and you simply cannot expect people to get a larger monitor, faster computer or install certain browsers or plugins just to access your site. If your content is interesting enough, they may, but I wouldn’t count on it.

It is about communication.

Allow people to communicate with you. Let them comment on your information and offer them easy ways to connect to you. Offer your information in easy to syndicate formats (like RSS) and contact and link to other sites with similar information. This may sound counterproductive – after all, why should you send them visitors you want to keep – but these other sites are likely to link to you as well. The more sites link to you, the higher you will climb in search engine results.

It is about availability.

This may sound paradox but spreading your content on the web and different sites may be a much more efficient way to make it available than keeping it on one server. Of course you need to use the right sites to do so. We live in exciting web times where you can upload your photos to flickr and connect to other picture enthusiasts, upload videos to youtube , share links at del.icio.us and documents at writely.

All of these sites are backed up by large corporations with good servers and even if your site is down for a day, they’ll still be out there. Advertising your site as the source of these bits of data on the other sites will drive people back to it and you can use the APIs they offer to easily include the data in your site.

It is about patience.

As with anything that is really good, you need to spend some time on a great web site.

You will not skyrocket the search engine results in the first few weeks (sometimes even months). Don’t get discouraged by that, instead try to increase your communication with other people in your area of interest – they will link you and you will show up in the Googles and Yahoos of this world.

Having a web site also means that you will get a lot of feedback that is annoying or plain rude. Don’t dwell on that, but pick out information that may be related to real issues and solve these instead. However, it is your site, and there will always be people who don’t like what you have to say or offer – no need to please everybody.

It is about knowing your audience.

Your assumptions of how a web site in your area of expertise should look like might be totally off the mark. Ask people who are interested what they expect, or ask them what they hate about other sites that offer similar content.

It is about playing to your strengths.

If you are not good with words, don’t try too hard but stick to information and what excites you about the subject your site covers. You can also get help from someone close who can put your ideas into words. The same applies if you are good with words but bad with design or structuring information. Don’t try to tackle everything yourself, but instead get some peer review and input to make the end product talk for itself.

It is about offering instead of pushing.

Don’t force anything on your visitors. Videos and Music should not start unless the visitor chose to start them. In addition, offer them as downloads. If you link to PDFs or other media formats, say so in the link as a lot of people will choose to download these instead of reading them in the browser.

It is about keeping it simple.

Don’t try to overcomplicate anything on your web site. Make it obvious what the menu is and what is available. Make it easy to search the site and to contact you. Make it obvious who is behind the site and what the purpose of the site is. Be honest about yourself and people will like you for it. There are far too many one-man-show web sites trying to appear as a whole corporation or network on the web already.

Read your content over and over again – any word that can be omitted or any sentence that could be phrased easier is a win. People on the web are busy and not all of them are native speakers of your language. Don’t make it hard for them.

Furthermore, the web is a secondary media. People do other things while reading your site and don’t take all the content in – instead they scan for interesting words. Steve Krug explains this in How we really use the Web.

It is about advertising without annoying.

Make sure you pick an easy to remember URL and advertise it. With this we don’t mean buying advertising space, but doing simple things like adding the URL to your email footer, stationary or other promotional material. Footers reach further than you may think if you participate on forums and mailing lists.

[update]

It is about freshness.

A web site that doesn’t change at all needs to have amazing content or it will not get any visitors in the long term. It is crucial that you get initial visitors, but also oimportant to keep them coming back, talk about your offers and attract new visitors. Update often and with good content and people will come back. If you use a blogging system as your CMS updates also mean that the RSS feeds change and subscribers get automatically notified.

The future is hybrids – how JavaScript can purify pure CSS solutions

Monday, September 4th, 2006

Over the last few months there were more and more requests on mailing lists and articles published how you can achieve functionality with pure CSS that was traditionally achieved with JavaScript. This post will explain why that is an interesting concept, but hopefully make you aware of the benefits of JavaScript enhanced solutions versus pure CSS solutions.

I have to thank a lot of people I asked in the research for this, foremost James Edwards, John Resig and Andrew Dupont. I’ve also given a short presentation – PDF -96KB on the same topic at the Barcamp in London last weekend.

First of all let’s investigate how pure CSS solutions became so popular. (more…)

Win free ebooks and copies of my books!

Monday, August 7th, 2006

I just published a competition on The web site of Beginning JavaScript with DOM Scripting and Ajax with prices like free ebook vouchers, copies of said book or Web Accessibility: Web Standards and Regulatory Compliance . All you need to show is either a little creativity or lack of fear of public embarassment.

On to the competition