YQL: Using Web Content For Non-Programmers

Advertisement

Delivering great presentations is an art, and preparing the slides for them very much so, too. But we’re not going to talk about that. We’re also not going to get into the debate about whether to use open or closed technologies to create slide decks — this is something you need to hash out yourself, and there are some interesting discussions going on.

What I will talk about is how I (and you, of course) can use the Web to find content for your talks, record them, share them with others and save them for future audiences. I’ll also explain how to share it all for free and how to convert closed formats into open ones by using the Web.

In 2010 I delivered a boatload of talks that people attended, downloaded, commented on and remixed for their own training sessions and presentations. I love to share my research and information, because when you set them free they can inspire and help others to get their own voices heard. Here’s how I did it.

Free Tools For Recording And Spicing Up Talks

Let’s begin with the only paid-for system I use in the whole process: I write my slides in Apple’s iLife application Keynote. I use it because when I do my work I’m usually offline (on trains, in airport lounges, in hotel rooms without free connectivity, etc.).

Keynote is great: I can resize and mask images, embed video, export as PDF, and there are a lot of beautiful, subtle and effective animations and transitions. Creators of slide tools should view Keynote as a model, and 280slides1 actually did so. Apple should also consider using a standardized format for HTML slides to import; in fact, this is one of the interesting discussions going on.

If I need to use high-quality images, I don’t spend money or time getting licensed content. Instead, I go to the advanced search option on Flickr, find photos with Creative Commons licenses and use these. All I need to do then is publish a link with each photo in my slides. Even I can do that much for copyright law.

Advanced Search in Flickr2
Flickr’s advanced search interface3 lets you specify the license of photos. You’ll probably want “Creative Commons” or “license-free.” Also check out The Commons4 for good old photos that have been donated to Flickr by libraries and museums.

Sharing Slides, Archiving The Originals

When I finish working, I give my talk using Keynote and export it as a PDF for sharing on the Web. I share my talk by uploading it to SlideShare5, which entails the following:

  • The talk gets converted to an embeddable Flash movie;
  • The talk becomes an HTML transcript shown on the SlideShare website;
  • The talk is hosted on its server, which means I don’t have to pay for traffic;
  • People can “favorite,” bookmark and comment on my slides.

In addition to hosting my work on SlideShare, I usually also zip the original Keynote file; Keynote doesn’t format presentations as individual files, but rather as a folder of resources. I upload them to Amazon S36, where I pay a few pennies a month to store heaps of data. This is my back-up archive should anything terrible happen to SlideShare or my computer.

Asking For Feedback, Offering Code Examples

Another interesting service for speakers is SpeakerRate7, where people can — wouldn’t you guess? — rate speakers and their talks. SpeakerRate also has an API that allows you to pull out the ratings in case you want to show them off on your portfolio.

I normally host code examples from my presentations on GitHub8. There, they are accessible, and I can update and edit the code without having to create my own ZIP files for people to download. It’s incredibly useful for making quick changes in response to what people have requested in comments and for reacting to questions you received during the talk.

Hosting your code on GitHub automatically begins the process of versioning. People can embed and alter your original examples, and the code is displayed with color-coding, making it readable.

Setting up an account on GitHub and getting your code in there is pretty straightforward — just follow the simple tutorial9.

Recording Talks

I normally record my talks so that I can listen to them in the gym and other places where I can’t write. There’s a free tool for this that works across all platforms. It’s called Audacity10. Just hit the record button and it will create the audio file where you specify.

Editing in Audacity is as easy as cropping the things you don’t want:

Editing audio in Audacity11
Large view12

You can save the audio in MP3 or OGG (among other formats). I usually save them as MP3s and then add them to iTunes for tagging so that I can add cover art and other extras to prep them for the iPod.

Syncing Audio And Slides

With SlideShare, you can also create a “Slidecast” of your talks, which means syncing the audio and the slides. It’s a cool feature, but I don’t like the editor as it is; the handles used to define the start and end times of slides don’t allow them to be close together — and that can throw off the syncing. It’s also a time-consuming process. I’m working on some alternatives, and correspondence with SlideShare indicates that it is, too. Regardless, I’ve found that Slidecasts get a lot of visitors, so it can be worth it.

Recording Video

There was seldom a camera to record me wherever I spoke last year, and an amazing amount of recorded talks never see the light of day. If no camera is available to record your talk, then you can record the screen as you present.

One of Keynote’s lesser-known features is that you can record a video of your slides with a voiceover. Simply go to Play → Record Slideshow before giving your talk:

Recording a Slide Show in Keynote13
Large view14

When you’re finished, export the video to QuickTime by going to File → Export:

Exporting a Recording to Quicktime15
Large view16

If you don’t use Keynote or if you jump in and out of your presentation, then record the presentation on your computer screen. There are a few pieces of software to choose from for that.

VLC17 is a video player that’s free and compatible with all operating systems. It can also record the screen18; go to File → Open Capture Device → Screen. You can record a high-quality video of everything that goes on. There’s even a feature that records a part of the screen by following the cursor.

Setting the Video Encoding19
Large view20

Simply check the “Streaming/Saving” checkbox, click “Advanced,” and define a suitable location and settings for your video:

VLC Stream Settings21
Large view22

Screencasts are generally a great idea. Instead of performing live demos in my presentations, I record screencasts and embed them in Keynote. That way, I don’t need an Internet connection — they’re usually unreliable at conferences — and I can talk over the recording while on stage, rather than having to click, enter information and talk at the same time.

To screencast with a program other than VLC, I usually use the commercial app iShowU23. When I was still using Windows, I had Camtasia24. Both of these sit on your screen and let you record and pause easily:

iShowU in Action25
Large view26

Nowadays, I also use hosted services.

Screenr27 is absolutely fabulous for this purpose. Just start the applet on the page, grant it access to your machine, and start recording. You have five minutes, with audio. When you’re finished, the movie is automatically converted, and you can export the video to YouTube. The video conversion happens more or less in real time. All you need to sign into Screenr is a Twitter account. With Screenr you can also tweet an embeddable version of the video. If you need similar service for longer videos, check out Screencast-o-matic28.

Converting Video

The free tool I use is MPEG Streamclip29, and it’s available for Mac and Windows. Drag your video onto it, and select the format you need:

MPEGStreamClip in action30
Large view31

There are a lot of presets — iPod, iPad and so on:

Presets for MPEGStreamclip32
Large view33

Automatic Conversion And Hosting For Audio And Video

As you know, embedding videos on websites with HTML5 can be a pain, particularly when it comes to encoding them. Different browsers require different codecs.

There is, however, a simple way: Archive.org34 hosts all kinds of useful content. (The WayBackMachine35, which keeps snapshots of how websites looked at a certain time, is probably the best known.) And you can host content there if you license it with Creative Commons. The good news? Archive.org automatically converts your content to HTML5-friendly formats!

Check out the recording of my talk on HTML5 for gaming36. I recorded it with Audacity and saved and uploaded it as an MP3. The Ogg version was created by Archive.org. To embed it on a Web page, I just need to do this (line breaks added for readability):

<audio controls>
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.ogg">
  <source src="http://www.archive.org/download/
               TheWhyOfHtml5ForGames/
               TheWhyOfHtml5ForGames.mp3">
</audio>

The same goes for video: free, fast hosting without limits, and automatic conversion. What more could you want?

Converting SlideShare To HTML

SlideShare creates embeddable Flash versions of my Keynote files (saved as PDF). I want to go with open technology and convert them back to HTML and images. You can do this with the mobile version of SlideShare.

If you call up a SlideShare presentation on a mobile device, you’ll get an HTML version with JavaScript and images. You can simulate this by sending the user agent of, for example, an iPad to the page before displaying it. In PHP, this takes a few lines of code:

$url = 'http://www.SlideShare.net/cheilmann/
        the-why-of-html5-for-games-development';
$url = preg_replace('/.net//','.net/mobile/',$url);
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0(iPad; U; CPU iPhone OS 3_2
like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) 
Version/4.0.4 Mobile/7B314 Safari/531.21.10");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
$page = curl_exec($ch); 
curl_close($ch);
echo $page;

SlideShare’s Mobile Interface37
Large view38

I’ve scraped and converted the results, and now I can embed the SlideShare presentation as HTML and images39 using the converter tool:

Converting SlideShare embeds to html online40
Large view41

I still want to fix a few things, such as making the images preload intelligently and adding proper alternative text. SlideShare creates transcripts of your slides on the page, but if there are slides without images, then the two go out of sync. I’ve emailed the company about it, and a fix might be released soon.

Summary

When it comes to publishing presentations online, a lot can be automated by using the Web as a platform and taking advantage of conversion services. Many developers are working on Web-based presentation tools, and I am quite sure we’ll see a collaborative presentation platform come into existence this year, although the task might not be as easy as it sounds. I have listed the hidden requirements of presentation systems42 before, and some things still need to be fixed. Keep your eyes open and help the cause.

(al)

Footnotes

  1. 1 http://280slides.com
  2. 2 http://www.flickr.com/search/advanced/
  3. 3 http://www.flickr.com/search/advanced/
  4. 4 http://www.flickr.com/commons
  5. 5 http://SlideShare.net
  6. 6 http://aws.amazon.com/s3/
  7. 7 http://speakerrate.com
  8. 8 http://github.com
  9. 9 http://help.github.com/
  10. 10 http://audacity.sourceforge.net/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2010/12/audacity.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2010/12/audacity.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2010/12/recordkeynote.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2010/12/recordkeynote.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2011/01/quicktime1-large.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2011/01/quicktime1-large.jpg
  17. 17 http://videolan.org
  18. 18 http://www.madpole.com/screencast-using-videolan-mac-os-x
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation2-large.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation2-large.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation3-large.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation3-large.jpg
  23. 23 http://www.shinywhitebox.com/home/home.html
  24. 24 http://www.techsmith.com/camtasia/
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation4-large.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation4-large.jpg
  27. 27 http://screenr.com
  28. 28 http://www.screencast-o-matic.com/
  29. 29 http://www.squared5.com/
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation5-large.jpg
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation5-large.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation6-large.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2011/01/presentation6-large.jpg
  34. 34 http://archive.org
  35. 35 http://web.archive.org/collections/Web.html
  36. 36 http://www.archive.org/details/TheWhyOfHtml5ForGames
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2011/01/slidesharemobile-large.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2011/01/slidesharemobile-large.jpg
  39. 39 http://icant.co.uk/SlideSharehtml/?url=http://www.SlideShare.net/cheilmann/the-why-of-html5-for-games-development
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2011/01/slideshareconverter-large.jpg
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2011/01/slideshareconverter-large.jpg
  42. 42 http://www.wait-till-i.com/2010/11/02/why-i-dont-write-my-slides-in-html/

↑ Back to top Tweet itShare on Facebook

An international Developer Evangelist working for Mozilla in the lovely town of London, England.

Advertising
  1. 1

    Great article for this great resource for programmers… YQL is really a user-based language

    1
  2. 2

    Christian thanks for the article. I think both Yahoo Pipes and YQL are super useful technologies. I’m using Yahoo Pipes for years and recently I started to use YQL for me is specially interesting that you can parse any web content with JavaScript(JSONP) so we no longer need use PHP or other server side language just YQL + JavaScript. I build one experiment web app with this combination http://www.vcarrer.com/2010/11/hacker-news-mobile-front-page-reader.html. There is huge huge potential for building web apps with YQL technology.
    So we have super useful technology and I really hope for Yahoo permanent commitment to support this technology.

    4
  3. 3

    YQL is really fun to play around, there are some nice plugins for jQuery and Mootools as well:

    http://github.com/gabrielfalcao/jquery-yql/
    http://mootools.net/forge/p/request_yqml

    2
  4. 4

    I’m always playing with YQL and PIPES. Great article!

    -2
  5. 5

    That is awesome.

    I’d heard of YQL but never used it before. I’ve just tried it out on my website. There’s so many possibilities, the HTML scraping is especially handy.

    Thanks Christian!

    1
  6. 6

    Yahoo is closing down services that don’t make them richer.
    So beside YQL begin a really cool tech, while they do not offer YQL with paid options (eg above the limit range) I recommend everyone to use Google Appengine to do scrapping, proxy, tojson proxy, all these things that YQL is useful…

    3
  7. 7

    Well, YQL is the infrastructure of Yahoo internally for all services. So there is a much bigger stake in it. Delicious always had the issue of competing with the doomed Yahoo Bookmarks.

    I’ve been talking to the YQL team for a long time about an installable version and there is a pilot running on appengine now (YQL is written in Java).

    I found AppEngine also to be unreliable for high traffic scraping. YQL’s datatables.org was on AE and fell over a few times (granted that was a year or so ago).

    So while your advice is sound, AE is not a replacement at all as it needs you to know coding (beautiful soup and others make it easy but not by a far cry as easy as mixing and matching in YQL).

    There is – sadly enough – no other service that offers the same range of access to the web of data than YQL does (ScraperWiki is another interesting one) and I preached for years to monetise it by offering B2B services.

    So please, tell Yahoo that YQL is awesome and that people _want_ to use it professionally – then things can happen.

    I am not in Yahoo any more, so I will do the same from the outside.

    9
  8. 8

    YQL is interesting to work with. Nice post giving detailed info about amazing YQL can do.

    1
  9. 9

    Thats awesome :)

    After Brazilian Yahoo Open Hack Day ,i’m using YQL to make some nice things in my work

    0
  10. 10

    I’ve been getting a 503 error on local.search for a few days now. cant get any info from the @yql account on twitter. anyone else know whats going on?

    You can see for yourself on their own example:
    http://developer.yahoo.com/yql/console/?q=select%20*%20from%20local.search%20where%20query%3D%22sushi%22%20and%20location%3D%22san%20francisco%2C%20ca%22

    4
  11. 11

    I started a thread on the YQL forum to request a fix. if this bug is effecting anyone else, please head over and leave a comment so they fix it faster.

    http://developer.yahoo.net/forum/?showtopic=7992

    0
  12. 12

    To fill in the JSON data, a simple templating engine is useful:
    Consider template to be the template string where the keys of the current Object called “obj” are represented as ${key}:

    template.replace(/${([^}]+)}/g, function(full, key) { return obj[key]||”; });

    this will return the template with all the ${key} items either replaced or removed if not present in obj.

    1
  13. 13

    While I love YQL and mess about with it alot in my personal projects I’m still unsure about using it in my professional work. As has been seen recently, Yahoo could shut the service down which would leave you in a bad place if all your APIs were derived from YQL.

    0
  14. 14

    What a great article Christian. This has explained so much to me in such a brief period of time. I have also checked out your site and will watch your vidz on YQL. I had not heard of you before reading this, but will now definitely follow you as a resource for learning about db access. In fact, I’m sure that I’ll refer back to this article numerous. You’ve made it easier for us front-end guys to wrap our heads around this. Thx again. You live in London right?

    0
  15. 15

    Great article! I wonder why i didnt stumble upon YQL before.

    0
  16. 16

    Please also check out the YQL blog at http://yqlblog.net

    1
  17. 17

    Thanks Christian,

    After X-mas I’ll experiment with YQL for sure “…and then go nuts.” :)

    Freek, Amsterdam

    0
  18. 18

    Great article as I would expect from Christian Heilmann. But why now? This stuff has been around for a while! I have seen Heilmann present this stuff on Fronteers. Dazzling presentation. I think YQL is a real clever tool.

    0
  19. 19

    Hey everyone!

    This is a great presentation of super service YQL written by amazing guy Christian Heilmann. I’ve seen it live on HTML5CSS3 event in Slovenia and liked it immediately.

    I’ve created a ‘playground’ site, which retrieves your location and publish informations about your country: http://galjot.si/yql/
    Later on I used YQL to fetch my social networking sites, http://galjot.si/

    I’ve noticed yesterday that flickr response was null (“results”: null).
    Any idea why is that? It’s the same with every query I tested with flickr.

    0
  20. 20

    Seduction Guide For Men

    July 4, 2012 1:27 am

    It is appropriate time to make a few plans for the future and it is time to be happy. I’ve read this put up and if I may I wish to suggest you some attention-grabbing issues or tips. Perhaps you can write subsequent articles referring to this article. I desire to read more issues approximately it!

    0
  21. 21

    Luís Fernando Guedes

    April 11, 2013 9:43 am

    Cool! Thank you very much!

    0

↑ Back to top