Developer Network Home - Help

Yahoo! Developer Network blog: May 2008 Archives

« April 2008 | Main

Web Services Archive

May 9, 2008

oEmbed - Embedding third party media made easy

Web 2.0 is all about collaboration, distribution and personal configuration and probably one of the biggest traffic drivers of social networks like Facebook or MySpace are videos and photos being sent to and from your contacts.

The problem for developers of networks is that you don't want people to leave your application to see a photo or a video, which means that you need a way to only get the media and embed that. Normally this happens using the media provider's API or - if they don't offer one - screen scraping (loading the whole document and programatically finding and extracting the media).

oEmbed is a great idea to work around that issue:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed which means you can easily access photos and videos with a simple URL.

Say for example find a nice photo on flickr:

Original URL:

http://flickr.com/photos/codepo8/2475016321/

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/

Result:

<oembed>
  <version>1.0</version>
  <type>photo</type>
  <title>? too much myspace error</title>
  <author_name>codepo8</author_name>
  <author_url>http://www.flickr.com/photos/codepo8/</author_url>
  <cache_age>3600</cache_age>
  <provider_name>Flickr</provider_name>
  <provider_url>http://www.flickr.com/</provider_url>
  <width>500</width>
  <height>375</height>
  <url>
    http://farm4.static.flickr.com/3128/2475016321_982666ec95.jpg
  </url>
</oembed>

You can define the output format and the maximum width and height with URL parameters:

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/&format=json&maxwidth=200

Result:

{
  version: '1.0',
  type: 'photo',
  title: '? too much myspace error',
  author_name: 'codepo8',
  author_url: 'http://www.flickr.com/photos/codepo8/',
  cache_age: '3600',
  provider_name: 'Flickr',
  provider_url: 'http://www.flickr.com/',
  width: '100',
  height: '75',
  url: 'http://farm4.static.flickr.com/3128/2475016321_982666ec95_t.jpg'
}

Supported formats for responses so far are photo, video, link and rich.

Christian Heilmann
Yahoo Developer Network

Posted by cheil at 4:51 AM | Comments (3)

May 8, 2008

Party Like a SearchMonkey

A few weeks ago, we announced SearchMonkey, an new open platform that lets developers and site owners use semantic markup and structured data to enhance Yahoo! Search results and make them more useful, relevant, and visually appealing.

We wanted to remind you that we're kicking off this launch in true SearchMonkey style with a Developer Launch Party next Thursday, May 15. Come get the inside scoop on SearchMonkey, meet with our product managers and engineers over tasty (read: free!) food and beer, see live demos, and take a closer look at the Developer Tool.

When: May 15, 2008, 5:30 -- 8:30 p.m.

Where: Yahoo! Headquarters @ URL's Cafe

701 First Ave.

Sunnyvale, CA 94089

RSVP: Email your full name and company name directly
to searchmonkeyevent@yahoo-inc.com. Space is limited.

For more information on the agenda and logistics, check out the event page.

Posted by gmudd at 11:58 AM | Comments (0)

Yahoo! sponsors the kick-off party for London's Web Week

For a whole week in between 26th of May and 1st of June London, England will be a centre for all things web development. The London Web Week is a not-for-profit scheme to boost the development world in the UK and beyond and promote best practice ideas like accessibility and progressive enhancement.

Events include the by now famous @media conference, the fourth London BarCamp, a Microformats vEvent and Web Roots. To learn about all the events, check the schedule on the web week site.

To kick things off in the right fashion, we will sponsor the London Web Week Opening Party on Monday, May 26, located at the Ruby Blue Bar in London's West End.

If you are in the area, or you are coming to @media anyways, make sure to check out the sign-up page on event wax to secure a ticket, as the space is limited to 200 people.

Hope to see you there and have a blast before making this week even more special than it already is.

Christian Heilmann
Yahoo Developer Network

Posted by cheil at 9:12 AM | Comments (0)

May 7, 2008

The seven rules of pragmatic progressive enhancement - a brown bag presentation

Last week I went to AKQA in London to give a brown-bag presentation on progressive enhancement.

I took this chance to vent some of my ideas on the subject and counteract some of the criticisms I heard about the need for enhancing web solutions progressively.

I've come up with the following "Seven rules of progressive enhancement":

  1. Separate as much as possible
  2. Build on things that work
  3. Generate dependent markup
  4. Test for everything before you apply it
  5. Explore the environment
  6. Load on demand
  7. Modularize code

I've explained them in further detail in the slides available on slideshare:



Furthermore I put some more information in an article on the subject: Pragmatic Progressive Enhancement.

The article is licensed with creative commons, so you are very much invited to use and remix it to your needs.

Chris Heilmann
Yahoo Developer Network

Posted by cheil at 1:19 PM | Comments (1)

May 6, 2008

Building a Better Website With Yahoo!

Editor's note: This post by Yahoo! front-end developer Tyler Hall originally appeared on his personal blog, Click on Tyler.


It's been a long time coming, but last month I finally pushed out a new design for my personal website, Click on Tyler. I rebuilt it from the ground up using two key tools from the Yahoo! Developer Network:

The new design is really a refresh of the previous look with a focus on readability and speed. I want to take a few minutes and touch on what I learned during this go-round so (hopefully) others might benefit.

Color Scheme

Although I really liked the darker color scheme from before, it was too hard to read. There simply wasn't enough contrast between the body text and the black background. I tried my best to make it work. I searched around for various articles about text legibility on dark backgrounds. I increased the letter spacing, the leading, narrowed the body columns, and everything else I learned in the intro graphic design class I took in college. The results were better, but my gut agreed with all the articles I read online which basically said "don't do it." So I compromised and switched to a white body background, while leaving the header mostly untouched. I find the new look much more readable -- hopefully this will encourage me to begin writing longer posts.

CSS and Semantic Structure

The old site was built piecemeal over a couple months and, quite frankly, turned into a mess font-wise. I had inconsistent headers, font-weights, and anchor styles depending on which section you were viewing. With the new design, I sat down (as I should have before) and decided explicitly on which font family, size, and color to use for each header. I spec'ed out the font sizes using YUI's percent-based scheme which helps ensure a consistent look when users adjust the size. (Go ahead, scale the font size up and down.) An added bonus was that it forced me to think more about the semantic structure of my markup. (If you have Firefox's Web Developer toolbar installed, try viewing the site with stylesheets turned off.) If there's one thing I learned working for Sitening, it's that semantic structure plays a huge part in your SERPs.

Optimizing With YSlow

At OSCON last summer, I attended one of the first talks Steve Souders gave on YSlow -- a Firefox plugin that measures website performance. That, plus working for Yahoo!, has kept the techniques suggested by YSlow in the back of my head with every site I build. But this redesign was the first time I committed to scoring as high as I could.

As usual, I coded everything by hand, paying attention to all the typical SEO rules that I learned at Sitening. Once the initial design was complete and I had a working home page, I ran YSlow.

YSlow Before

Ouch. A failing 56 out of 100. What did YSlow suggest I improve? And how did I fix it?

So, all of the changes above took about three hours to implement. Most of that time was spent writing my S3 deploy script and figuring out how to make Amazon serve gzipped content. Was it worth it? See for yourself.

YSlow Before

Wow. Three short hours of work and I jumped to a near perfect 96 out of 100. The only remaining penalty is from not serving an expires header on my Mint JavaScript.

Do these optimization techniques make a difference? I think so. Visually, I can tell there's a huge decrease in page rendering time on both Firefox and Safari. (IE accounts for 6% of my traffic, so I don't bother testing there any longer.) More amazing, perhaps, is the site's performance on iPhone. The page doesn't just load -- it appears.

I've made a bunch of vague references to the S3 deploy script I'm using and how to setup gzip on Amazon. In the interest of space, I've left out the specifics. If you're interested, contact me with any questions and I'll be happy to help.

Tyler Hall
Front-end Engineer

Posted by havi at 5:57 PM | Comments (6)

May 2, 2008

Yahoo! Live empowers deaf users to chat online

Sometimes you stumble across use cases of your products that you just did not expect. During my talk at the Accessibility 2.0 conference last week I pointed out that technology that seemingly is a stumbling block for accessibility can actually be a benefit for disabled users.

The example was the ease of being able to annotate and caption photos in Flickr enticing a lot more users to enter sensible captions and text which in return makes it easier to find the photos and describe them to non-sighted users.

Now we found out via Amy Cohen Efron's blog "Deaf World as Eye see it" that deaf users have discovered Yahoo Live as an opportunity to chat online.

deaf users chatting using sign language on Yahoo Live

This is wonderful news, and proof that products that are on the bleeding edge and use technologies with a reputation for inaccessibility can actually benefit users overcome boundaries and make them communicate using "web 2.0" products despite their disability.

It is also a great example that accessibility is about all kind of disabilities, and that technology can be the solution rather than a hindrance.

More reading:

Christian Heilmann
Yahoo Developer Network

Posted by cheil at 10:18 AM | Comments (0)

Neal Sample on Yahoo's Open Platform at Web 2.0 Expo

Many of you probably saw the video of our CTO, Ari Balogh, give a 15 minute keynote talk at the Web 2.0 Expo about our forthcoming platform for developers. While Ari did a very good job of presenting a high-level overview of Yahoo's Open Strategy (YOS), there's only so much one can say in 15 minutes.

As a follow-up, Neal Sample (YOS Chief Architect) gave a 40 minute deeper dive presentation last Friday. In this video he begins with a recap of the information presented in Ari's keynote and then spends time providing more in-depth explanations and examples of the various YOS platform components: update notifications, social connections, the activator, and more.

Expect to see more and more in-depth videos with various YOS engineers in the coming weeks and months.

Jeremy Zawodny
Yahoo! Developer Network

Posted by jzawodn at 7:49 AM | Comments (0)

May 1, 2008

Location, Security and easy API walkthroughs - the Fire Eagle Developer Evening in London, UK

Seth and Steve explaining the one-two-three of building applications for Fire Eagle

Around 50 developers met yesterday in London, England to hear all about Yahoo's new location based service Fire Eagle. In two short presentations and a long Q&A session Tom Coates and Seth Fitzsimmons from the Fire Eagle team helped developers get their head around the concept and technicalities of Fire Eagle. They were aided by Steve Marshall, developer of the Django Fire Eagle Authentication wrapper and co-developer of Fireball.

Fireball is a mashup using Fire Eagle, Twitter and Upcoming and was all the rage at the Web2.0 Expo in San Francisco a few days ago.

The main purpose of the Fire Eagle Developer Evening was to get to know developers in the UK that can benefit from Fire Eagle and make it easier for them to take their first steps.

We reported about Fire Eagle before, but to re-iterate in a nutshell:

Using Fire Eagle as a central point of storing and retrieving your location it becomes easy for a lot of services to improve the quality of their results - information and services becomes literally easy to reach as they are in your area.

During the evening Seth and Steve showed examples in Ruby and Python how to access the different API methods and set up your first small application using Fire Eagle.

One of the main concerns of the team is security and protection of private data. This is why Tom walked the audience through the benefits of the OAuth authentication standard and its implementation in Fire Eagle. Another point he made very clear is that creating a location-based application is quite a responsibility and that any developer for Fire Eagle should abide to their code of conduct.

All in all it was a great evening of beers, pizza, lots and lots of laptops and code and hopefully we'll see a lot of great applications using Fire Eagle coming out of it.

I've uploaded a bunch of photos of the event and the shenanigans beforehand to flickr so see what you missed there.

If you want to play with Fire Eagle and need an invite code, leave a comment with a valid email and we will send you one - there are some left over from the event (around 20).

This was one of many developer evenings to come in Europe. We set up a mailing list for European YDN events in case you want to take part in the future and hear about them first-hand.

Christian Heilmann
Yahoo Developer Network

Posted by cheil at 6:42 AM | Comments (5)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings