Building Yahoo Apps
Sophie Davies‐Patrick and Chris;an Heilmann, YDN developer
evening, Paris, October 2009 h"p://www.flickr.com/photos/mknowles/47457221/

Building Yahoo! Front Page Apps
October, 2009
- -

Summary
• The Yahoo! Front Page (www.yahoo.com) is the single most-
visited website in the world
• In a few weeks, for the first time, Yahoo! will allow third
party applications (apps) to run on the Front Page
• Yahoo! has created a technology platform that will allow
anyone to build a Front Page app
- -

Why Build Apps on the Yahoo! Front Page?
• Over 330 million unique visitors worldwide visit a Yahoo! home
page each month
• Application gallery allows direct install of 3rd party developer
apps
• Apps built for Front Page will also run on My Yahoo! (over 40
million unique visitors per month worldwide) and Yahoo! Toolbar
(near future)
• International rollout of apps to international My Yahoo! Properties
throughout 2009-2010
• Opportunity to acquire new users / customers
- -

Yahoo! France Homepage
• With over 190M pageviews per month generated by
6.5millions users, it’s one of the most trafficked pages in
France
• This one page alone reaches almost 20% of the online
French population…
• …and the average user visits the page over 15 times per
month, making these amongst the most loyal users in
France
- -

Important Technology Components
Yahoo! Social Platform Yahoo! Application Platform
Provides developers with access to: Allows developers to build rich, interactive
• User profile applications that users can choose to
• Contacts/friends install on a Yahoo! website
• Presence/status
• Activity updates
- -

How it Works (1)
Anyone Can Build an App
Any developer can build a Front Page app
and distribute that app through traditional
awareness mechanisms (email, ads, etc.).
In addition, “Add to Yahoo!” buttons will be
provided and app installs are reflected in
Yahoo! Updates. Examples:
Target and
Mint.com
The Yahoo! Front Page Gallery
Initially, users will be able to discover a
limited set of high-quality apps in the gallery
which have been approved. In the future,
app developers will submit apps into a
more comprehensive gallery through a
streamlined approval process.
- -

How it Works (2)
Yahoo! ad
space
The Standard View
When a user places his or her mouse over an
app, it displays in a standard view with
Yahoo! ads running next to it.
- -

How it Works (3)
The Expanded View
Users can expand the view of an app to
access greater functionality.
- -

Monetization Now
• Monetization opportunities available now:
• Advertising
• Transactions
• Subscriptions
• Additional notes:
• Approved third party ad-network tags available (currently US-only)
• Other opportunities (developer self-serve promotion, advertiser/publisher solutions,
etc.) to follow
- -

Building Good Front Page Apps
• Gallery requirements:
• Good standard (400px) and expanded (750px) views
• Quick and reliable
• Dynamic content providing a different experience everyday
• Intuitive to use
• Well-designed and readable
• Appeals to users regardless of their level of Internet expertise
• Design guidelines:
• Communicate key actions/state quickly
• Enable users to make meaningful interactions in under 2 seconds and one click
• Quick set-up
• Give users a successful experience right out of the box
• Hide unnecessary complexity: help users focus on a single goal at one time
• Less is more: use the fewest interaction patterns as possible
• Performance matters: stay fast
• Flexible inputs & no inputs: infer data whenever possible (user settings/profile)
• One task at a time - focus user attention
- -

Developer Components (1)
Yahoo! Application Platform (YAP) Yahoo! Markup Language (YML)
• Easily build apps that run on Front Page • Allows secured access to private data
and My Yahoo!
• Can use ‘me’ and ‘viewer’ keywords
• Apps will run on Yahoo! Toolbar and
other Yahoo! websites soon • Will begin integrating into OSML
• http://developer.yahoo.com/yap/ • http://developer.yahoo.com/yap/yml
- -

Developer Components (2)
Social APIs Yahoo! Query Language (YQL)
• Social Directory (read) • SQL-like syntax
• Contacts (read) • Private/public data
• User Status (read/write) • Queries external data feeds
• Updates (read/write) • Allows custom tables
• http://developer.yahoo.com/social/ • http://developer.yahoo.com/yql
- -

Developer Components (3)
Cajoled JavaScript (Caja) Available SDKs
• HTML/CSS/JavaScript securer • Several SDKs available today (PHP,
Flash and Objective-C)
• Enforces standards
• More to come
• Includes JSLint
• http://developer.yahoo.com/yap/guide/
caja-support.html
- -

Next Steps
• Review application ideas/approaches with the Yahoo!
team
• Read the online documentation at http://
developer.yahoo.com/yap/metro
- -

...and now for a deep
dive...

YAP is the plaHorm
hIp://developer.yahoo.com/yap/guide/yap‐overview.html

hIps://developer.apps.yahoo.com/dashboard

hIp://github.com/codepo8/TweetTrans

hIp://isithackday.com/yosdemo/nonyos/tweeIrans.php?search=chien&tl=en

hIp://code.google.com/apis/ajaxlanguage/documenta;on/#Translate

hIp://developer.yahoo.com/yql/console/?q=show%20tables&env=store://
datatables.org/alltableswithkeys

hIp://code.google.com/p/google‐caja/

Caja and HTML
★ name aIributes with gadgets.io.makeRequest
★ Custom aIributes
★ Custom tags
★ Unclosed tags
★ <embed>
★ <iframe>
★ <link rel=‘…
★ javascript:void(0)
★ Radio buIons in IE
★ Rela;ve url’s

Caja and JavaScript
★ eval()
★ new Func;on()
★ Strings as event handlers (node.onclick = '...';)
★ Names ending with double / triple underscores
★ with func;on (with (obj) { ... })
★ Implicit global variables (specify var variable)
★ Calling a method as a func;on
★ document.write
★ window.event
★ .onclick
★ OpenSocial gadgets.io.makeRequest return JS

Caja and CSS
★ * hacks
★ _ hacks
★ IE condi;onals
★ Insert‐aler clear fix
★ expression()
★ @import
★ Background images in IE

Working with Caja
★ Use OpenSocial JavaScript standards
★ Use W3C standards
★ Use YML wherever possible
★ Unit test all JavaScript
★ Read the documenta;on
(hIp://developer.yahoo.com/yos)
★ Par;cipate in the forums
(hIp://developer.yahoo.net/forum/)

hIp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html

Alterna;vely: YML
hIp://developer.yahoo.com/yap/guide/yapdev‐yml.html

YML Tags (Large View) YML Lite Tags (Small View)
yml:a yml:a
yml:ad yml:audio
yml:audio yml:form
yml:form yml:if‐env
yml:friend‐selector yml:name
yml:if‐env yml:profile‐pic
yml:message yml:pronoun
yml:name yml:user‐badge
yml:profile‐pic
yml:pronoun
yml:share
yml:swf
yml:user‐badge

hIp://yahoo.com/add?yapid=zKMBH94k

Moving from web to
Yahoo Applica;on:
★ No <head> or <body> ‐ DIV level
★ clean HTML and CSS to avoid errors
★ Caja safe JavaScript or Ajax via YML
★ keep it small and load on demand.

hIp://github.com/yahoo/yos‐social‐php

MERCI!
Chris;an Heilmann
hIp://wait‐;ll‐i.com
hIp://developer‐evangelism.com
hIp://twiIer.com/codepo8