Christian Heilmann

Posts Tagged ‘presentations’

What I did in 2011 – talk archive with slides, recordings and videos

Thursday, December 29th, 2011

The year is over (well, almost) and I thought it’d be fun to list the conferences I attended and spoke at. You can see the 2011 archive here or below:

All in all: 29 talks, 15 videos, 23 audio recordings, 37 conferences
Date Conference Location Title Slides Audio Video
01/28Heart and SolePortsmouth, EnglandTime to build a better webslides Vid.ly
02/04FOSSDEMBrussels, BelgiumMoving to the client – HTML5 is hereslides MP3 OGG
02/08London Ajax meetupLondon, EnglandUsing HTML5 sensibly and multimedia on the webslides MP3 OGG Skills matter
02/10MF Boat eventLondon, England
02/17London WebLondon, EnglandFinding harmony in web developmentslides MP3 OGG Vimeo
03/09ConFooMontreal, CanadaMoving from hacks to solutionsslides MP3 OGG YouTube, YouTube #2
03/18LoginVilnius, LithuaniaBuilding a better web with open, new technologiesslides YouTube
04/14Funkas TillgänglighetsdagarStockholm, SwedenAccessibility and web innovation (slides, audio and notes)slides MP3 OGG
04/16W3café accessibilitéParis, France
04/20JAXMainz, GermanyHTML5 Das Web und der Browser als Platformslides MP3 OGG Vimeo
04/20JAXMainz, GermanyWie JavaScript die Welt eroberteslides MP3 OGG
05/10Google IOSan Francisco, CA, USA
05/30WebinaleBerlin, GermanyHTML5, CSS3 und JavaScript fuer alleslides MP3 OGG YouTube
06/07Inspire ConferenceLondon, EnglandMentoring
06/17Web2DayNantes, FranceHTML5 and the web of tomorrowslides videointerview
06/25Converge SEColumbia, SC, USAWith the power of HTML5slides MP3 OGG
07/08Highland FlingEdinburgh, ScotlandModerator
07/16Open Web CampPalo Alto, CA, USAHTML5 battles still to be won (slides, audio)slides MP3 OGG
08/19Kings of CodeAmsterdam. NetherlandsHTML5 - time for some slicker appsslides MP3 OGG
08/20EncampmentLondon, England
09/30Evento LinuxLisbon, PortugalHTML5 and the new challenge of openslides MP3 OGG
10/01JSConf EUBerlin, GermanyCommunity JS reloaded – how to rock as a movementslides MP3 OGG
10/03Future of Web AppsLondon, EnglandGet excited and build things and browser panelslides MP3 OGG
10/05FronteersAmsterdam, The NetherlandsThe prestige of being a web developer slides MP3 OGG Vimeo
10/12Paypal X InnovateSan Francisco, CA, USAThe web and browsers as the platform – exciting opportunities in new web technologyslides MP3 OGG YouTube
10/19HTML5 liveLondon, EnglandRocking the boat and causing a rippleslides MP3 OGG
10/20FrontrowKrakow, PolandFail, Meh or Win? How do you want the web to be?slides
10/25Company brownbag at SabreKrakow, PolandHTML5 101 What it is, what it isn’t and where it might goslides MP3 OGG
10/25Company brownbag at SAPMunich, Germany (skype)HTML5 101 What it is, what it isn’t and where it might goslides MP3 OGG
10/27Velocity EuropeBerlin, GermanyAccelerating the overall web experienceslides MP3 OGG
11/01HTML5 live NYCNew York, NY, USArepeatslides
11/03Mozilla IgniteonlineA fast web for peopleslides
11/04Mozilla FestivalLondon, EnglandBrowserID mentoring
11/11Full FrontalBrighton, Englandmy notes
11/12MozCamp EuropeBerlin, GermanyHow to be a kick-ass speakerslides MP3 OGG
11/20Beyond TellerandCologne, GermanyMoving browsers and the web forwardslides MP3 OGG Vimeo
12/12London AjaxLondon, EnglandRethinking user registration with BrowserIDslides MP3 OGG Skills matter
12/21Smashing Magazine Meetup #3Stuttgart, GermanyStyle and Distance – Moving ahead in web development as a communityslides MP3 OGG Vimeo
12/21 Smashing Magazine Meetup #3 Stuttgart, Germany Working Draft Revision 53: At the Smashing Magazine meetup! youtube

It was a fun year, and I hope you can use some of the information here to get inspired to go out and bring good messages to people out there.

Brownbag presentations in London – want some info and Q&A for lunch?

Sunday, May 31st, 2009

July and August is a very slow time for me this year as there aren’t any conferences I am speaking at and no hack days planned. September will be packed again, though.

This is why I am right now planning to do some brown bag presentations in the London area. I’ve already been at IPC media, will go next Friday to ebay/gumtree/skype/paypal/shopping.com in Richmond and have had Sky and Thomson Group/TUI show some interest on twitter.

Brown bag presentations are by definition talks during lunch break where people can bring their food along. That way your employees can get some information or discuss their issues with an invited expert without disruption of your normal office hours and times.

I’d be happy to come around and give a talk on all the things I am passionate about. Currently these things are:

  • Opening your own and reaching data on the web easily with YQL
  • Mining your content and enhancing it with geographical information (Yahoo Placemaker)
  • Building specialist search engines (BOSS)
  • Accessibility and that it is not magic
  • Professional Web Development
  • Performance of web products and how to improve it

I am open to other topics, though.

If you are interested in some of that and you are in the Oyster card area, comment here or contact me on Twitter and we can talk date, location, topic and time. I don’t expect any pay, but normally a coffee, some water and a sandwich :). The whole idea of the exercise is to be able to reach developers that normally do not get the chance to go to conferences.

TTMMHTM: Dazzle audiences, love audiences, cool data from the guardian and Opera WSC

Friday, March 6th, 2009

Things that made me happy this morning

Dasher is an information-efficient text-entry interface, driven by natural continuous pointing gestures. Dasher is a competitive text-entry system wherever a full-size keyboard cannot be used – for example, when operating a computer one-handed, by joystick, touchscreen, trackball, or mouse; when operating a computer with zero hands (i.e., by head-mouse or by eyetracker); on a palmtop computer; on a wearable computer.
The eyetracking version of Dasher allows an experienced user to write text as fast as normal handwriting – 29 words per minute; using a mouse, experienced users can write at 39 words per minute.
Dasher can be used to write efficiently in any language.

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!

An explanation for all conference organizers who need slides upfront

Tuesday, November 25th, 2008

Calvin and Hobbes Cartoon - Inspiration needs the right mood - Last Minute Panic

Found via the fabulous Searchable Calvin and Hobbes Archive