« February 2008 | Main | April 2008 »
Update 4/3/08: We've concluded this round of developer research. Thanks to those that were able to participate.
The Yahoo! Developer Network is looking for developers to help us improve some new tools and services coming out this year. Right now, we're specifically looking for developers in the San Francisco Bay Area who are available during the week of March 31.
Participants will need to come to a 60-minute-long user research session next week, at Yahoo!'s Sunnyvale, California campus. The feedback we get from you will help us build tools and services that are easier for all developers to use. Plus, those who participate will be paid $100 at the end of the session.
If you are interested in participating, please complete the survey at http://surveylink.yahoo.com/wix/p4524344.aspx
And, whether or not you can help us this time, we’d be grateful if you shared this message with any other Bay Area developers you think might be interested in giving us their feedback next week.
Thanks in advance for your help!
Aviva Rosenstein
Developer Insights
Posted by havi at 5:58 PM | Comments (1)
Microformats are a big deal. Regular readers will have seen a lot about them on these pages before, and in the past eighteen months every other web development journal worth its salt will likely have mentioned how to mark up contacts and calendar events using the hcard and hcalendar patterns.
However, microformats — the popular, reusable HTML patterns produced at microformats.org — step out beyond those initial use-cases. Formats for reviews (hreview), blogs, news and syndication (hatom) and curricula vitæ (hresume) are also spreading.
Last month our teams at Kelkoo and Yahoo! Europe pushed out version 10 of Kelkoo. It brings with it the single largest deployment of the hListing draft so far.
hListing is a new format to mark up classifieds, services and product listings. It is quite generic, and can be used to mark up physical products, flat shares, services, events, requests for help and all sorts; consider the breadth of listings on a site like Gumtree or Craigslist. For Kelkoo and retail sites, it provides an excellent foundation for describing product information: Item names, descriptions and prices are all marked up.
Of course, the challenge that faces any new format — be that HTML pattern or W3C specification — is adoption. The need for tools for consumption and the motivation to publish tend to be at odds with one another. Whilst hListing is still a draft, and there’s work to do to complete the specification, it’s been stable for over a year so we’ve worked to see whether the core of the format really works in the real world. You may consider the following as a resounding ‘yes’:
We’ve just published 26,456,448 hListings on Kelkoo. Allow me a little indulgent emphasis, that’s twenty-six and a half million hListings in the wild, right now.
Alongside that gigantic number, we’ve also published 6500 hcards for the details of our merchants and stores; the companies listing the products on Kelkoo. There’s also some XOXO on the sitemap and what I can best estimate as ‘lots and lots’ of hreview, too.
This bumper injection of structured data into Kelkoo’s pages makes it ripe for re-use, be that browser extensions to draw out product information on our pages, indexing services aggregating product listings together or mashing up the data for reuse in widgets. To prove the concept, this piece concludes by building a ‘related products’ widget to accompany tagged blog entries.
Aside from taking the opportunity to lay praise on the developers involved in this release, hListing is a very, very interesting microformat to have in the wild, and we really hope will gain more traction.
Microformats are getting easier and easier to consume in a RESTful manner, thanks to all manner of tools from the likes of Brian Suda ’s X2V scripts, Dmitry Baranovskiy ’s Optimus parser and validator, and Drew McLellan ’s hKit.
In this case, a webservice is running hKit with a profile written for the current hlisting deployment. It parses a URL and returns a JSON structure for the page.
On Kelkoo, all of our search result pages, category pages and store pages are marked up with hListing, so any product listing can be converted into JSON. So for example, this URL finds products with keywords ‘Canon’ and ‘400D’:
http://shopping.kelkoo.co.uk/ctl/do/search?siteSearchQuery=Canon+400DIf working specifically with Kelkoo’s results, note the query terms are always separated by OR in the query, never AND. By default you’ll receive 20 results sorted by popularity.
Next, we construct a URL to use the hKit webservice and extract a JSON object from the search page:
http://hack.ben-ward.co.uk/parse/hlisting/json/getProducts/http://shopping.kelkoo.co.uk/ctl/do/search?siteSearchQuery=Canon+400DThe URL breaks down into a call to parse hlisting into a JSON structure of the information on the Kelkoo results page, wrapped in a callback named getProducts.
To show this in action, here’s a widget to pull in related products based on the tags of a blog entry. (Tags are perhaps the most adopted microformat of all, using rel-tag.)
Here’s the HTML for a typical blog entry (marked up with hatom), with some tags:
<div class="hentry">
<h1 class="entry-title">Shiny new Mac!</h1>
<div class="updated">
Posted yesterday
(<span class="value">2008-03-10</span>)
</div>
<p class="entry-summary">250 words of passionate gadget talk,
now slightly faster.</p>
<div class="entry-content">[…]</div>
<ul>
<li><a rel="tag" href="/tags/apple">Apple</a></li>
<li><a rel="tag" href="/tags/iMac">iMac</a></li>
</ul>
</div>
When the widget is initialised, it reads and parses the tags from the page. Anchor elements which are tags are identifiable with where the rel attribute has a value ‘tag’.
getTags : function() {
// Get tags (as strings), from each rel-tag microformat on the page
var tags = [];
YAHOO.util.Dom.getElementsBy(
function(anchor) {
var rel = anchor.getAttribute('rel');
if(rel !== undefined && rel !== null) {
return (rel.indexOf("tag") > -1);
}
else {
return false;
}
},
"a",
document.body,
function(a) {
// The rel-tag specification states that the tag itself is not
// the inner text on the anchor, but is instead the last fragment
// of the URL.
// See http://microformats.org/wiki/rel-tag
var segments = a.href.split('/');
var tag = segments[segments.length-1];
tags.push(tag);
}
);
return tags;
}This makes full use of the very powerful getElementsBy function in YAHOO.util.Dom. It takes a function to filter elements in the document, and a function to process each element when found in the document.
As well as producing a more concise piece of code, it’s efficient and saves looping over the tags twice; once to find them and once more to process them.
The tags come back as an array, and since Kelkoo’s search URLs are quite simple, the tags are just appended to search URL as keywords. The widget makes the search URL configurable.
queryListings : function(tags) {
var self = YAHOO.EU.BenWard.HListingProductWidget;
var products;
// If there are tags, search for products
if(tags.length > 0) {
// The query is cross-site, so insert a new script element with
// the webservice URL, and then pass it a callback function
var qscript = document.createElement("script");
qscript.type = "text/javascript";
qscript.charset = "utf-8";
var query = tags.join("%20"); // create an encoded search string
self.datasource = self.provider + query;
// self.parser is a string, pre-set as:
// "http://hack.ben-ward.co.uk/parse/proxy.php?
// profile=hlisting
// &output=json
// &callback=YAHOO.EU.BenWard.HListingProductWidget.callbackListings
// &url=",
qscript.src = self.parser + self.datasource;
document.body.appendChild(qscript);
}
}Passing in the <var>callback</var> parameter, when the JSON is returned it will immediately execute the function YAHOO.EU.BenWard.HListingProductWidget.callbackListings.
When adding content to a page in a way that’s reliant on both client-side JavaScript and a dynamic data request, it’s essential to progressively enhance static content with the dynamic results.
Not only does this provide content to script-less user agents, but it also means some useful content can remain if there are no matching search results for a particular blog entry. For this widget, the placeholder content can be set to anything at all; a technique well suited to the varied contexts of blogs.
Using a mock YUI blog page, the static base looks like this:
<div id="related-products">
<h3>Buy into this post?</h3>
<div id="related-listings-results">
<p>
Search <a href="http://kelkoo.co.uk">Kelkoo</a>
to compare prices of products of all shapes and sizes,
perhaps even related to what you've just read…
</p>
</div>
<p><strong>Powered by <a href="http://kelkoo.co.uk">Kelkoo</a>,
<a href="http://microformats.org/">microformats</a>
and <em>Colville brand coffee</em>.</strong></p>
</div>The widget container (related-products) is styled by the site itself and includes some framing content (the title and ‘powered by’ statement). The related-listings-results element contains some generic, static text which makes sense alone, but will be replaced by more relevant search results where available.
The widget is initiated when the page loads:
YAHOO.EU.BenWard.HListingProductWidget.init(
"related-listings-results",
"http://shopping.kelkoo.co.uk/ctl/do/search?siteSearchQuery=",
{}
);The widget init function takes the ID of the element to replace with results, and the search provider URL for Kelkoo. Changing the listings to a different provider can be as simple as changing this one parameter.
Pulling it all together, once initialised the widget extracts tags and builds a search query from them. From the post-query callback function, any results are then rendered to the page.
// Initialisation takes an element ID name, provider URL and
// optional preferences structure.
init : function(el, provider, options) {
var self = YAHOO.EU.BenWard.HListingProductWidget; // shorthand
// Get the widget container and confirm its existence
self.widget = document.getElementById(el);
if(!self.widget) {
return false;
// Here the specified container doesn't exist, so fail
}
// Similarly, if no search provider URL is provided, the script fails
self.provider = provider;
if(self.provider == undefined || self.provider == '') {
return false;
}
// The widget is somewhat configurable, for the number of results to
// display, for example. Using an object for all options makes this
// extensible in a tidy manner.
if(self.options === undefined) {
self.options = {};
}
self.options.resultsLength = self.options.resultsLength || "5";
// With the widget configured and primed, run the first steps to load the
// search result data
var tags = self.getTags();
self.queryListings(tags);
},The queryListings function instructs the webservice to callback to callbackListings. That handles the final parts of processing the results and rendering back to the page.
callbackListings : function(listings) {
var self = YAHOO.EU.BenWard.HListingProductWidget;
self.listings = listings;
self.renderWidget();
},
renderWidget : function() {
var self = YAHOO.EU.BenWard.HListingProductWidget;
if(self.listings !== undefined && self.listings.length > 0) {
// With it verified that there are results to display,
// replace the entire static content of the ‘widget’ element
self.widget.innerHTML = "";
// Results are going to be displayed in a list, ordered by
// popularity (the same order as Kelkoo sends back by default)
var list = document.createElement("ol");
for(
var i=0;
(listing = self.listings[i])
&& (i < self.options.resultsLength);
i++
) {
// For each result (up to the {resultsLength} limit set in the
// widget options), create an LI, fill it with content and then
// append it to the list.
var li = document.createElement("li");
var item = document.createElement("a");
item.className = "fn";
if(listing.item.url !== undefined) {
item.href = listing.item.url;
}
else {
// Microformats are flexible to publishers, so handle
// situations where a product might not have a URL of its
// own, and instead link back to the datasource that the
// results were parsed from.
item.href = self.datasource;
}
var lister = document.createElement("span");
lister.className = "lister";
var price = document.createElement("span");
price.className = "price";
item.appendChild(document.createTextNode(listing.item.fn));
lister.appendChild(document.createTextNode(listing.lister.fn));
price.appendChild(document.createTextNode(listing.price));
li.appendChild(item);
li.appendChild(lister);
li.appendChild(price);
list.appendChild(li);
}
// Finally, append the list to the now empty widget container element.
self.widget.appendChild(list);
}
}These are the core components to parse a simple microformat from a page, use it to query a more complex web-service and progressively enhance a page with the transformed content.
Once upon a time, HTML pages had to be scraped to reuse content. Microformats change that. We go from a world of scraping to a world of real, more reliable parsing. Whether parsed from the DOM in JavaScript, or transformed remotely, microformatted information is an incredible enabler for content reuse across the internet.
Kelkoo is just one provider, and we’re looking forward to others following suit with support for hListing. Reviews are prevalent all over the internet, contact information even more so. After years of waiting for technology to move the web forward, it’s happening. There’s information our there now to pull of functionality we never had before. As web developers, there’s little to do but slip in microformatted mark-up wherever we can, and start having fun in consuming it.
Download full code listing here
Ben Ward, Web Developer Yahoo! Europe
Posted by smajor at 5:27 AM | Comments (0)
Over The Air is a mobile developer event taking place on the 4th and 5th April at the Imperial College London in South Kensington. If you’ve ever wanted to know more about developing for mobile devices, and want to give it a try then this is the event for you. Part conference, part un-conference and part 48-hour open hack-a-thon, the event will be a great opportunity to learn about mobile development across Europe.
The event is run by Mobile Monday London in association with a number of sponsors including Yahoo! We will be throwing a party on site for all attendees on the Friday evening at 8pm. The 48-hour event will culminate in an awards session – further details on this to follow!
In addition, Yahoo! will be chairing a widget panel between 3-4pm on the 4th April. This will be an open forum where Yahoo!, along with other attendees, will be discussing widget platforms. This will be followed by our mobile developers giving a masterclass and hands-on demonstration on developing widgets for the Yahoo! Go mobile platform. Yahoo! Go 3.0, Yahoo!’s downloadable mobile client, which is currently available in the US version and scheduled for launch in Q2 in Europe, offers customizable access to favourite Internet brands and services – from Yahoo! or any other mobile widget developer.
The new Yahoo! Mobile Developer Platform, announced in January 08, allows mobile developers to create widgets for the Yahoo! Go client and Yahoo!’s mobile homepages. It is a one-stop solution for developers to create mobile-optimized applications (i.e., mobile widgets and snippets) that are easy to build, quick to deploy, and run across a wide selection of devices.
Yahoo!’s platform makes it easy for Internet content and services to “go mobile.” By providing developers with tools to write code once and efficiently publish their content across hundreds of devices, operating systems and environments, developers have the potential to reach instantly millions of users.
Come and join us at Over The Air and find out more. Registration is free.
Posted by smajor at 2:34 AM | Comments (1)
I've been a big fan of Yahoo! Pipes ever since it launched. Pipes is unique in making the world of feeds accessible and "mashable" in a friendly browser-based development environment.
But it's always felt like there was a missing piece too. Pipes is easy enough for novice (or even non-) programmers to use, but what it ultimately produces is a data feed intended to be consumed by a program.
Pipes Badges change all that. If you can add a one-line script tag to a web page, you can visually display the output of a pipe on you own web site. To learn more about this, I got together with Paul Donnelly for a demo. Here's the video.
You'll notice that these badges do more that render an RSS feed as a list. If the feed contains photo data, you can get a slide show. And if the feed contains geocoded data, you can get a map badge.
In my mind, this is the first of several steps to making pipes output more useful to a larger class of data junkies.
Thanks to Paul for making time to go over the Badges.
Enjoy...
Jeremy Zawodny
Yahoo! Developer Network
Posted by jzawodn at 5:45 PM | Comments (3)
On Saturday, the 22nd of March around 40 developers came to Station C in Montreal, Canada to meet up for the first Coder's Saturday.
The unconference-styled event was sponsored by Yahoo! Quebec and Nurun and was meant to bring people interested in web development together to hear and talk about topics of interest both to web development as a whole but also start local connections.
The location is a co-working office with lots of computers and comfy chairs and we put together some rows of harder chairs and a projector to enjoy the presentations. There will also be videos of the presentations available once Nurun got around to converting the tapes.
My presentation was entitled "The struggle for web development standards" and was partly inspired by my experience at the AjaxWorld conference in New York the week before. There a lot of companies showed framework and metaprogramming solutions to day to day web development problems and the idea of web standards and best practices in use in the web design world didn't even come up. The problem with this is that a standard is more than a technical crutch to support us, it is actually about how we work together. This is what I wanted to get across with my presentation:
Ara Pehlivanian explained the concept for web2.0 development.
The idea of his presentation was similar to a lot of other presentations about best practices, but Ara took the angle not to sell them as a way to produce good code but to deliver products that simply work without you having the re-visit them later on. Usability, accessibility and working web sites as consequences of not following assumptions.
Sarven Capadisli delivered a presentation on Microformats that was inspired by his blog post on the matter. It was very refreshing to see a Microformat talk that explained the why of microformats rather than once again showing how you can convert an hcard to a vcard with a simple link to Technorati's conversion tool.
There was also a presentation about the Google Web Toolkit which explained the idea of metaprogramming JavaScript with Java and avoiding browser problems this way and I rounded up the day with an impromptu introduction to all the offers we have for developers on developer.yahoo.net.
All in all it was a nice morning and early afternoon and I want to thank all the organizers and participants for making my short stint in Canada productive and fun.
Christian Heilmann
Yahoo Developer Network
Posted by cheil at 5:12 PM | Comments (1)
Last week I attended the Web Science Research Initiative's meeting in London with Peter Mika from Yahoo! Research Barcelona. Hosted by IBM on behalf of the WSRI a number of guests were invited to explore the concept of "Web Science". Web Science is the study of the Web, both the human and computing aspects. By studying how the Web is used now it is hoped that we can use the knowledge to improve it in the future.
The meeting was eclectic with people from industry and universities in a diverse range of fields. Zoologists and sociologists were mixing it up with the computer scientists. I know I had a lot of interesting, if strange, conversations.
Tim Berners-Lee, the father of the web, presented the keynote. He tracked the progression of the Web from a tool which has helped humans find information to a powerful data network. He was keen to emphasise that human interaction remains at the core of the success of the Web. It will take a diverse range of skills to understand everything that is the Web. However with understanding will be come more opportunities to make the most of this amazing ecosystem.
In the afternoon there was a panel where Peter Mika answered questions along with representatives of Mircosoft, CapGemini, the universities of Southampton, St Andrews and others. They discussed what Web Science is and how to encourage people who are doing Web Science now to participate in the conversation. The conclusion was that the many facets of the Web can only be understood by the community working together to share and explore the rich and complex environment we have helped to create.
You can find more information on the Web Science Research Institute at webscience.org. They are keen to receive and showcase examples of Web Science in practice. Expect to see more from Yahoo soon on how we put Web Science into action with microformats.
Tom Hughes-Croucher
Y! Developer Network
Posted by croucher at 3:53 AM | Comments (0)
We have shipped a fix in Yahoo! Media Player for the Safari 3.1 crash.
We traced the crash back to code that is trying to set the style display:none on an invisible YUI panel. The panel had position:absolute set with left:0 but no value for top. The new Safari did not like this.
Fixes also came in from Apple developers, who saw our blog entry on this yesterday and seem to have pulled an all nighter. They checked in a fix to WebKit last night, then sent us a CSS workaround. It was more elegant than our own workaround, though it arrived after our code went to QA so won't make it to production until the next non-emergency build.
Thanks to everybody who stepped on the gas to get this done.
Posted by lgonze at 5:07 PM | Comments (0)
Do you speak Ukrainian, Estonian, Lithuanian, Latvian, Hungarian, Bulgarian or Czech? The Zimbra team is looking for linguists who are passionate about online messaging and collaboration software to contribute to Zimbra's translation efforts.
Never used Zimbra? Zimbra's mail and calendaring client and server platform is employed by universities and companies the world over. The platform is fully open source, integrates with everything from Blackberry to Exchange servers and has a cool Ajax interface that users just love. Give Zimbra a try, you will be impressed. You can download the Zimbra Open Source Edition and the Zimbra Desktop for free.
Here is what you need to know: start by learning about the translations process, then decide if you would like to be a moderator or a contributor. To make sure that the translations can be used by the whole community, we need you to sign a contribution agreement.
Then you'll be ready to head over to Zimbra's translation wiki.
So get started today, we'd love to have your help in making Zimbra a global product!
Sophie Major
YDN Europe
Posted by smajor at 2:11 AM | Comments (2)
When Yahoo! Media Player is used in combination with the new Safari version (3.1) that came out today, Safari crashes. We are working on disabling Yahoo! Media Player in Safari 3.1. We are aiming for 24 hour turnaround and will post updates.
Posted by lgonze at 6:25 PM | Comments (2)
The Yahoo! Mobile team recently opened up our mobile products so that now any developer can build a Mobile Widget using the Yahoo! Mobile Developer Platform.
Blueprint is the name of Yahoo!'s new Mobile Widget language, currently in beta. Now any developer with XML skills can create a Mobile Widget using the Blueprint SDK. Blueprint lets you define the business and UI logic and leave visualization to the Widget Engine renderer. You provide the content and services you want to build into your Mobile Widget. Our developer platform takes care of the other stuff—like making your widget attractive on the various devices we support.
Once you’re done coding, you can test your widget on our Mobile Developer site, and then upload it to our Mobile Widget Gallery for distribution via Yahoo!’s mobile products. To check out the Mobile Widgets already submitted by developers, download Yahoo! Go 3.0 or visit our mobile home page on your device and go to the Widget Gallery.
Please help us create a colorful kaleidoscope of Mobile Widgets. We’d also love to hear what you think of the new Blueprint language. To find the Blueprint SDK and all relevant info for widget developers, visit the Yahoo! Mobile Developer home.
Our ultimate vision is to offer a cross-device platform that lets you code a widget once, and then have it run seamlessly across the web, desktop, and mobile devices, but we are not quite there yet. As you know, mobile development is a challenging beast, with many different devices, operating systems and screen sizes. Our first priority with the Yahoo! Mobile Developer Platform has been to balance device reach and the power of the language. The good news is that now you can write your Mobile Widget once, and it will seamlessly run in HTML and some xHTML mobile web browsers, as well as all devices that support Yahoo! Go 3.0. We are rapidly working towards ensuring that your mobile widget is accessible in hundreds of mobile devices by the end of this year.
For those of you who are interested in keeping in the loop on Yahoo! Mobile development, the best way to get the latest news and interact with our Mobile Developer Community is via the Y! Mobile Developer blog and Y! Mobile Discussion Group.
So check out the new Mobile Platform, try writing a Mobile Widget and tell us what you think.
Thanks!
Shan-lyn Ma
Yahoo! Mobile
Posted by havi at 5:05 PM | Comments (0)
This weekend, BarCamp Brighton 2 took place at the University of Sussex in England. I attended, along with a bunch of the other Yahoos from the London office.
For those of you not in the know about BarCamps, they're fantastic little "unconferences" that cost nothing to attend and are put together by the goodwill of a few organisers and the sponsors they rope in to provide a venue, food, and drink. No talks are scheduled in advance, but everyone who attends is expected to be prepared to give a half hour talk on something dear to their heart. Thankfully this isn't as scary as it sounds at first.
As normal at these events, the talks ranged from the highly technical to the sublimely silly. There were sessions about setting up OpenID on your website (both consumer and producer were covered in separate talks), several talks about hacking the Arduino, a whole raft of talks about Second Life and a couple about Social Networks. There was even a Cheese and Wine tasting session, and session showcasing the trailers of this summer's big movies. Yahoo! Live was used to stream many of the talks over the weekend to allow those unable to attend to watch.
For me though BarCamps aren't about the talks, they're about the people. BarCamp Brighton 2 was no exception to this rule. As a camp veteran I was thrilled to see a load of faces that I'd never set eyes on before, and I can't wait to see them again at future BarCamps. As always, the atmosphere was bubbly throughout, with only the lynching of a few villagers during the night in the game Werewolf changing that. YDN helped out by taking care of the bar tab, keeping 100-odd developers going until about two in the morning.
Photos are up all over flickr, including a bunch showing the phenomenal new game of "Uncricket" (you play cricket using objects found at the conference), Semantopoly (like Monopoly, except you buy web companies using friends), and the ubiquitous Werewolf.
A great time was had by all, and I'd like to say a huge thank-you to Jay Gooby and everyone else involved for organising this fantastic event. I'm looking forward to BarCamp London 4 at the end of May already!
Neil Crosby
Web developer, Yahoo! London
Posted by smajor at 4:54 AM | Comments (0)
Stoyan Stefanov made an appearance last week at the PHP Quebec Conference in Montreal. His session debuts Yahoo!’s latest research results and performance breakthroughs. He covers the existing 14 rules, plus 20 new rules for faster web pages. We’ve categorized the optimizations into: server, content, cookie, JavaScript, CSS, images, and mobile.
After YSlow "A"?
If your page isn't getting an "A" in YSlow, I recommend that you tackle those recommendations first. However, if you're getting an "A" and looking for more ways to optimize your web pages, here are 20 new recommendations to accelerate the end-user's experience. Stay tuned, you'll be hearing more about YSlow and these rules at Yahoo! Developer Network and Yahoo! User Interface Blog.
| 1. Flush the buffer early | [server] |
| 2. Use GET for AJAX requests | [server] |
| 3. Post-load components | [content] |
| 4. Preload components | [content] |
| 5. Reduce the number of DOM elements | [content] |
| 6. Split components across domains | [content] |
| 7. Minimize the number of iframes | [content] |
| 8. No 404s | [content] |
| 9. Reduce cookie size | [cookie] |
| 10. Use cookie-free domains for components | [cookie] |
| 11. Minimize DOM access | [javascript] |
| 12. Develop smart event handlers | [javascript] |
| 13. Choose <link> over @import | [css] |
| 14. Avoid filters | [css] |
| 15. Optimize images | [images] |
| 16. Optimize CSS sprites | [images] |
| 17. Don't scale images in HTML | [images] |
| 18. Make favicon.ico small and cacheable | [images] |
| 19. Keep components under 25K | [mobile] |
| 20. Pack components into a multipart document | [mobile] |
Many thanks to all the developers at Yahoo! that have directly or indirectly contributed to this list - you know who you are (see credits at the end of Stoyan's presentation). We share our findings so that others can join us in accelerating the user experience on the web.
Tenni Theurer
Yahoo! Exceptional Performance
Posted by tenni at 4:02 PM | Comments (17) | TrackBack
YDN Europe is sponsoring Social Innovation Camp on the April 4 and 5, in London, England.
Last Friday, judges got together for the first time to pre-select the projects that are to be created during the course of the weekend. After a lot of discussion and deliberation we cut down the 70 entries to the following six, which we believe have most potential impact and are likely to be achievable in two days:
This idea is a web site featuring designs and products that allow people with disabilities or injuries to make their life easier. The idea is to have a shop, a showcase section and general advice on how to overcome problems and physical changes in your life.
An online system that helps people (particularly young people) identify their personal skills and qualities, and enables them to measure and track their personal development over a period of time, through their involvement in a project or activity.
A website or tool that creates greater access to prison visits and improves the experience of visiting someone in jail. It should provide better information about how the system works and what life is like for offenders inside.
A site for storing user-generated information about a product, identified by its barcode. People would be able to access the info by entering/scanning the barcode number. The associated product information could include reviews, manufacturing conditions, news stories about the product/manufacturer, farm subsidies paid to the manufacturer etc. All info will be entered in wiki format by end users.
A craigslist/freecycle-style web site that allows you to borrow stuff to other users. Need a drill to put up a bookshelf or want to read a book but got no place to store it? Try Stuffshare.
The idea is that job seekers upload their CVs (or resumes) and cover letters onto a website where other people can offer feedback and suggest improvements. The individuals uploading documents can control who they want to receive feedback from, e.g., they can choose to receive feedback only from people who work in the same industry or only from people with over 5 years experience, etc.
With six ambitious projects queued up for hackathon-style development, it's going to be a full weekend. We hope that developers will be able to sign up soon to start envisioning how to make these happen come April. Mark your calendars now.
Chris Heilmann
for YDN, Europe
Posted by cheil at 9:35 AM | Comments (3)
We have a new stable public release of the Yahoo! Media Player.
There is now a "Buy" button on the player. The feature includes support for the Amazon affiliate program, so that publishers can earn money when somebody clicks through and makes a purchase. There is an article on our wiki about the button and affiliate program.
There is a new "Find in page" button to help you associate a track with the place in the page that it came from. There is an article on Yahoo! Developer Network about this.
There is now a prominent link to the web site hosting the track. (We had a link before, but it was hard to find). This link uses the same space as metadata for an album title. The reasoning is that album and site are analogous, and since we rarely have metadata for both they can share the same real estate. Credit to Douglas Kim for this insight.
There is a link back to our home page titled "Get this player." It solves a few problems. The home page explains what the player is for users who are just encountering it for the first time. The home page has links to our wiki and our mailing list, so it gives people a path towards solving problems and meeting the community. And of course the link helps people who are trying to figure out how to add the player to their own pages.
We made the player work better in Greasemonkey by fixing a bug which is rarely seen outside of Greasemonkey: when the player is inserted within an iframe and the iframe is too small for the player, the display used to be badly mangled. The player will now detect if it has enough room to display the player UI upon loading. If there is enough we display normally. If there is not enough room, the inline play buttons are inserted into the page but the media player UI will not appear. The user is only able to control playback using the play/pause buttons on the page. The player will still advance automatically from song to song.
We won't put two play buttons for the same track right next to each other anymore, to accomodate this common design pattern:
<a href="example.mp3"><img src="playbutton.png" alt="play" /></a>
<a href="example.mp3">download</a>
Any tracks whose URL contains file:// (including when this is a relative path) will not be used. Otherwise Flash throws a security error.
We fixed some ugliness when there isn't enough space for track metadata. When metadata is too long to fit, we used to just truncate it. Now we put ellipses at the end to indicate that we cut it off. Mousing over the text should display a tool tip with the full text.
To improve performance, CSS files and image files were consolidated. To consolidate images we're now using image sprites more aggressively.
If the track title had quotes in it, clicking used to take the user to an empty search page. No longer.
When the album title is blank in IE 6and 7 in Window XP and Vista, we don't display a blank tooltip any more.
We also fixed one of the bugs keeping Opera and Linux from working, but fixing that bug revealed another, so we're still not there.
Needless to say, there are other bug fixes too small for this document.
Ian Rogers found the incantation to use Shoutcast streams in the player. See Ian's blog entry or the stub entry on our wiki.
hodrodscott's Greasemonkey script which Adds Yahoo player to any page it finds with links to mp3s
has been updated with a lot of small improvements. This also benefits from the iframe fix described above, because the Greasemonkey script inserts the player into many small spaces that don't have room for it, and there was carnage onscreen as a result.
Max Engel's Wordpress plugin which Embeds the Yahoo! Media Player music plugin into your site to play back mp3 links
went through a couple of revs and is looking good. It now has a control to switch back and forth between the stable public build and the bleeding edge developer build.
Colin Brumelle of Rilli.com created the SXSW Gig Guide by mashing up the SXSW schedule posted on the SXSW site, Yahoo! Media Player, and Google maps.
How to make your own music site in 10 minutes by Joe Lazarus mashed up Last.fm, Audioscrobbler, Tumblr, Skreemr, Yahoo! Pipes and Yahoo! Media Player to make an audio tumblelog. Gnarly.
We have now completed the first milestone. It took three releases with about a month of development time apiece for the first major version to be reliable and powerful enough to call it complete. We did a first release that was clearly a beta, gathered reactions and made major adjustments in the second release about a month later, and then did a third release (this one) emphasizing fit and finish work.
Next up we're going to focus on a couple of projects that we can't deliver in small increments. We'll keep doing bug fixes in the current version, and we have a couple new features that are close to done and will ship shortly. Aside from those, though, we'll be in stealth mode for a little while.
Posted by lgonze at 1:35 PM | Comments (1) | TrackBack
I am happy to announce that based on some research and a Greasemonkey hack to make people aware of the consequences, Yahoo! is now a search engine that has natural language search results.
HTML has a wonderful attribute called lang that allows you to define the language of the text in the current HTML element. This seems a bit superfluous as it has nothing to do with the display of the language specific character set (which is the encoding and another issue). However, defining the language has other benefits.
The first one is that search engines and other robots know what language the text is in and thus have a much less harder job to differentiate between keywords and stopwords.
The second, and most important has to do with accessibility. If you do not see the text but you get it read out to you then the pronounciation is very important. Visually impaired surfers use screen readers to tell them what is on the current page, and by defining the language, you make this a lot easier. Screen readers have different voices for different languages with the correct pronounciation rules. This is best explained with an example.
The following files are recordings of what screen readers will tell visually impaired users on a search result page. They have been slowed down to make it easier for people that can see to follow, normally users will have the speed set a lot faster.
Thanks must go to Artur Ortega for testing with Jaws and Ryan Grove for adding the necessary information.
Posted by cheil at 4:58 AM | Comments (1)
With everyone in the web development world seemingly flooding Austin at the moment to attend SXSW we take the opportunity to remind those who are in Europe and don't want to spend a lot of money on flight tickets about another conference close by.
The Highland Fling takes place on the third of April for the second time in Edinburgh, Scotland. Considering the very state-of-the-art topic and excellent line-up of speakers it is a "cheap as chips" alternative for those who missed out going stateside.
The conference's motto this year is "The browser and beyond" and was highly influenced by Tom Coates' talk at dconstruct in Brighton last year. Tom was talking about "Designing for a web of data" (Podcast here) and explained that in the future we'll get away from pages and browsers and the internet will become more and more a web of data independent of display device.
Following this motto, you'll hear tales and tips from the speakers Mark Norman Francis, Chris Heilmann, Chris Mills (Opera), Aral Balkan (Singularity), Gareth Rushgrove and Simon Willison about what can be done to make this web of data a reality rather than just a pipe dream.
The conference will be chaired by Paul Boag of Boagworld.com and have a bit of a different style than most. There is also a high chance that the conference will be followed by Refresh Edinburgh, a free un-conference the day after.
Following proper Scottish customs assorted speakers and organizers will wear Kilts, no matter what the weather turns out to be.
Posted by cheil at 4:00 PM | Comments (0)
If you're at ETech today, you probably heard Tom Coates announce the developer beta launch of Fire Eagle. We are excited to be releasing Fire Eagle by invitation to developers now.
Fire Eagle is an open location services platform offering web, mobile, and desktop developers a simple way to build new location-based applications while also ensuring that consumers have complete control over their data, including how, when and where their location is made available. Want to easily make your site responsive to a user's location? Or, maybe you've found a way to capture someone's location and you want to find cool apps to plug it into? By doing the heavy lifting and connecting you to a community of geo-developers, Fire Eagle makes it easier to build location-aware services.
If you're attending ETech, come talk to us. You can spot us by our stylish t-shirts or find us at the Yahoo! booth. To find out more about how Fire Eagle works or whip up a Fire Eagle application of your own, come to our Birds of a Feather session Wednesday evening to meet our engineers. (At ETech we'll be meeting Wednesday evening at 10pm, in Balboa in the South Tower.)
Also, if you're going to SXSW in Austin, Texas this weekend, we're having a little afternoon party with the folks from Flickr. You can come and join in our Afternoon Delight Sunday, March 9, at the Iron Cactus in Austin.
Jeannie Yang
Fire Eagle Team
Posted by dantheurer at 10:30 AM | Comments (0)
Talking to several partners and architects in other companies, there seems to be a general move from page-based sites to frameworks with modules that can either be under your own control, added by users or provided by third party companies. This is an interesting concept for much more personalized web experiences but it also poses quite a technical challenge for web developers.
The job of a web developer (or front end engineer or interaction architect or web designer or [insert your job title of choice here]) is in a constant state of flux. Best practices that were the cat’s pajamas in the end 90ies are terrible solutions now and solutions that sounded like science fiction then are feasible now.
The environment our code is executed in is still largely unknown but at least the software that renders what we develop becomes more and more sophisticated and reliable. Whilst we can thank the browser vendors to open up more and more to our needs (with IE8 now rendering by default with the new engine as per the latest news – cheers!) we have a different challenge ahead of us, which is once again a change in the market and usage needs of web surfers.
This is nothing new - after all we faced it before:
None of this was really scary to a clever developer as most likely you already used a sort of templating engine or IDE to create static pages for you. The challenge to move from static pages to writing templates for CMS wasn’t that hard then.
The main challenge was and is that clients need to grasp that the benefits of templating also come with a few drawbacks. These are first of all that you can’t design every page differently and you don’t know how much or what text will be used in the final page. If your CMS has hundreds of templates it becomes as hard to maintain as static pages and you wasted a lot of time and money.
To me, acknowledging these drawbacks is great step in becoming more mature developers and content producers: we embrace change as a given rather than just trying to prevent things from breaking. My classic way of doing that was battling the “This link is three words, so we don’t need more space” statement by showing the German or Finnish translation for these three words, subsequently breaking the layout.
There is a new challenge on the horizon that will become more and more important over the next years. I’ve talked to several companies and we all seem to go the same way on that. Here’s what web developers have to face now:
All the companies I talked to are moving away from a page-based concept of web publishing to one that is a canvas with independent modules. These modules could be of your own making – actually most enterprise level CMS work that way already - but will subsequently also mean third party modules and modules the site user can choose to add, remove and customize.
This is a wonderful concept as it allows us to work a lot faster, more user-focused (by offering content that is related to interests and profile) and allows for parallel development of different modules. The problem however is that the current technologies we render content in browsers with are not catered for that.
The main challenges are the following:
Styling and UI consistency is a real issue as the technology for styling documents in user agents – CSS – is by definition not catered for independent modules. The main power of CSS is the cascade – you define a setting once and let the browser apply it to every element that matches a selector. This allows you to create wonderfully small CSS files that are easy to maintain as you can change all the look and feel by changing a few selectors. If your CSS solutions have IDs and classes on every HTML element then you haven’t played the technology to its strengths.
If the modules we’re talking about are built to blend into a consistent look and feel and just need some colour changes or other minor display changes then this is not really a problem. However, if you are afraid that CSS settings inherited from the page CSS and parent elements will render your module unusable you are in trouble.
HTML has no <reset> element that would allow you to override the cascade. For now, the consensus for a lot of companies seems to be to use <iframe> when they need to have a fixed look and feel that is not allowed to inherit from the main document.
This, and other hacks like inline styles or artificially enhanced specificity with several IDs and classes doesn’t seem right and results in massive CSS files that slow down the overall page.
The use of iframes hinders the performance of the page as each needs to be loaded separately. In a perfect environment, you’d want the document to render in one go with as few HTTP requests as possible.
On the security front, iframes are actually a nice-to-have as they’ll “sandbox” the (possibly third party) scripts in the different modules. From an overall application perspective, this is a hindrance though as you’d want to communicate between modules without having to resort to a server-side component.
In any case, there are a lot of new challenges for us to face in the nearer future and I for one think it is a great chance to marry the knowledge of UI-focused web developers with backend engineers to build a new way of defining web applications.
Articles on-topic:
We’re going to watch this challenge closely and are happy to hear your thoughts and solutions.
Chris Heilmann
Posted by cheil at 7:52 AM | Comments (6)
Last year the MIX07 conference had lots of exciting news for Rich Internet Application developers. MIX08 starts this week and we're happy to announce our new Developer center aimed at Silverlight 1.0 while we wait for the final release of version 2.0. Our goal was to create a starting point and handy reference for learning and using Silverlight. We cover all the basics and have lots of samples and links to other resources on the web.
There's also a special treat for code junkies. We made a class diagram poster covering all the Silverlight 1.0 classes and made it available in multiple formats. So feel free to appropriate the company plotter and decorate your cube (Umm, okay. Ask for permission first). The classes are also grouped into the currently known 2.0 namespaces to help you transition when the time comes.
Tomi Blinnikka
Y! Media Innovation Group
Posted by dantheurer at 3:55 PM | Comments (0)
Keep an eye out for Yahoo! in San Diego this week -- at the O'Reilly ETech 2008 conference (March 3-6) and the adjacent Graphing Social Patterns West:The Business and Technology of Social Networking Platforms (March 3-4).
On Monday, Ian Kennedy announced the release of MyBlogLog APIs at Graphing Social Patterns and joined panelists from Google, FriendFeed, Six Apart, and mSpoke, for a spirited discussion of privacy and user control of personal data, and related issues of aggregation, and distribution of online social activity, under the heading Social Networks and the Need for Feeds. MyBlogLog's APIs allow you to pull metadata associated with MyBlogLog users , their communities, and site profiles -- and enable sociable services and mashups based on the distributed identity pointers people share on their profile pages. Blog Juice, by Yahoo! hacker Kent Brewster, is an early example of MyBlogLog mashup fun.
On Tuesday at 11:50am, in Marina Ballroom D, Elizabeth Churchill, from Yahoo! Research, will give a talk titled Users, Socializers, and Producers: How Internet Technologies are Changing Our View of Ourselves.
The Yahoo! Developer Network is sponsoring both conferences. You may have seen our mugs at the GSP Monday morning coffee break, and at ETech we'll be at Booth #10. Stop by and say hello if you're in town, otherwise, check in at the Yahoo! Developer Network theater for ongoing video highlights, interviews, exciting news, and coverage from GSP and ETech.
Havi Hoffman
Y! Developer Network
Posted by havi at 9:00 AM | Comments (0)
This blog entry is about a new feature of Yahoo! Media Player. The whole post will be about this one feature. I'll cross-post this to the wiki. I would appreciate it if comments were directed there, so that we can incorporate them into the documentation. For now the feature is only available in the unstable development build.
The feature is called Find In Page
.
If you're in a web page with a player the track you are playing is probably located within the page somewhere. That's true even when you're using a remote playlist, and even when the player is not Yahoo! Media Player.
Wherever the track is anchored, there's usually something which explains what it is. If it's a song this might say the title, artist name, and album name. If it's a podcast or videoblog there might be an episode number or date, a title for the blog entry, maybe show notes describing the theme, an explanation of who the interviewee is, that kind of stuff. There is often an image associated with the media; for example album art, a poster frame, or a photo of an interviewee. This info is usually an unstructured blob of text rather than structured metadata, but that doesn't mean the info is useless. To the contrary: it is very rich in comparison to the normal metadata you'd get in a desktop media player. Because it is so rich it's impossible for us to pull it all into the player for display next to the track controls. And why should we even try? Web pages exist for the sole purpose of carrying out this task, so the player shouldn't attempt to duplicate their functionality. What we should do instead is point the user to the relevant location in the page.
Find In Page
shows you where the current track is in the page.
When you hit this button, the player scrolls the page so that the source of the current track is at the center of the screen. It also temporarily changes the play/pause button in the text to an animated gif which draws your eye to the right place.
The button looks like crosshairs for targetting: 
To take this feature out for a spin, go to Ian Roger's blog (which has the unstable development version of the player), wait for the player to appear (which can take a little while, and yes we know about the performance problem), open the player all the way (which takes two clicks, and yes we are working to turn this into one click), and hit the Find In Page
button. Then open the playlist, select one of the songs further down (which will be buried far below the fold), and hit the button again.
What's interesting about this button is that it is a solution to a problem which doesn't exist in desktop media players. Old school players either have metadata or they don't, and if they do it is structured enough to be displayed in the player. In the browser there is no common way to do metadata, though the hAudio microformat may eventually fix that. Even if there was a way to do it, structured metadata in fields in a player will never equal the expressive power of plain old HTML. HTML has color, imagery, and some control over fonts. It can have social features. It can link to related documents. It can embed widgets with dynamic data or display interactive star maps. Metadata in an old school media player is just a spreadsheet.
The original HTML for a link is also within the flow of the page, so it shows the context of the media within the overall document. Context can carry info about chronology, about the person who select the media, about the reason the media was selected, and a million other things that are good to know. Carrying all this information is something an old school media player can never do, but it's something which browsers excel at. Audio and video are being absorbed into a new hybrid medium, and the "Find In Page" feature is part of this migration of media from audio or video files in isolation to audio and video integrated into web pages as a whole.
Posted by lgonze at 6:40 PM | Comments (0) | TrackBack
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings
