Building Yahoo AppsSophie Davies‐Patrick and Chris;an Heilmann, YDN developer evening, Paris, October 2009h"p://www.flickr.com/photos/mknowles/47457221/
Building Yahoo! Front Page Apps October, 2009 - -
Summary • The Yahoo! Front Page (www.yahoo.com) is thesingle 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 atechnology platform that will allow anyone to build a Front Pageapp - -
Why Build Apps on the Yahoo! Front Page? • Over 330million unique visitors worldwide visit a Yahoo! home page eachmonth • Application gallery allows direct install of 3rdparty developer apps • Apps built for Front Page will alsorun on My Yahoo! (over 40 million unique visitors per monthworldwide) and Yahoo! Toolbar (near future) • Internationalrollout of apps to international My Yahoo! Properties throughout2009-2010 • Opportunity to acquire new users / customers --
Yahoo! France Homepage • With over 190M pageviews permonth generated by 6.5millions users, it’s one of the mosttrafficked pages in France • This one page alone reachesalmost 20% of the online French population… •…and the average user visits the page over 15 times permonth, making these amongst the most loyal users in France - -
Important Technology Components Yahoo! Social Platform Yahoo!Application Platform Provides developers with access to: Allowsdevelopers to build rich, interactive • User profileapplications that users can choose to • Contacts/friendsinstall on a Yahoo! website • Presence/status •Activity updates - -
How it Works (1) Anyone Can Build an App Any developer can builda Front Page app and distribute that app through traditionalawareness mechanisms (email, ads, etc.). In addition, “Add toYahoo!” buttons will be provided and app installs arereflected in Yahoo! Updates. Examples: Target and Mint.com TheYahoo! Front Page Gallery Initially, users will be able to discovera limited set of high-quality apps in the gallery which have beenapproved. In the future, app developers will submit apps into amore comprehensive gallery through a streamlined approval process.- -
How it Works (2) Yahoo! ad space The Standard View When a userplaces his or her mouse over an app, it displays in a standard viewwith Yahoo! ads running next to it. - -
How it Works (3) The Expanded View Users can expand the view ofan app to access greater functionality. - -
Monetization Now • Monetization opportunities availablenow: • Advertising • Transactions • Subscriptions• Additional notes: • Approved third party ad-networktags 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 differentexperience everyday • Intuitive to use • Well-designedand readable • Appeals to users regardless of their level ofInternet expertise • Design guidelines: • Communicatekey actions/state quickly • Enable users to make meaningfulinteractions 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 singlegoal at one time • Less is more: use the fewest interactionpatterns as possible • Performance matters: stay fast •Flexible inputs & no inputs: infer data whenever possible (usersettings/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 onFront Page • Allows secured access to private data and MyYahoo! • 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) AvailableSDKs • HTML/CSS/JavaScript securer • Several SDKsavailable today (PHP, Flash and Objective-C) • Enforcesstandards • More to come • Includes JSLint •http://developer.yahoo.com/yap/guide/ caja-support.html - -
Next Steps • Review application ideas/approaches with theYahoo! team • Read the online documentation at http://developer.yahoo.com/yap/metro - -
...and now for a deep dive...
YAP is the plaHormhIp://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: YMLhIp://developer.yahoo.com/yap/guide/yapdev‐yml.html
YML Tags (Large View)YML Lite Tags (Small View) yml:a yml:a yml:adyml:audio yml:audio yml:form yml:form yml:if‐envyml:friend‐selector yml:name yml:if‐envyml:profile‐pic yml:message yml:pronoun yml:nameyml:user‐badge yml:profile‐pic yml:pronounyml: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
This slideshow was converted by Easy Slideshare.
The original slides can be found on Slideshare.
Slide content copyright by cheilmann