Introduction to Yahoo Apps

Building Yahoo Apps Sophie Davies‐Patrick and Chris;an Heilmann, YDN developer evening, Paris, October 2009 h"p://www.ﬂickr.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 ﬁx ★ 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:proﬁle‐pic yml:message yml:pronoun yml:name yml:user‐badge yml:proﬁle‐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

http://www.wait-till-i.com	134
http://christianheilmann.com	54
http://developer.yahoo.net	44
http://searchlogger.net	13
http://myslides.thinkphp.ro	7
http://icant.co.uk	6
http://developer.yahoo.com	4
http://www.hanrss.com	2
http://translate.googleusercontent.com	2
http://www.slideshare.net	2
http://74.125.153.132	1
http://203.208.39.132	1
http://feeds.feedburner.com	1

Introduction to Yahoo Apps

by Christian Heilmann

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 271

Statistics

Introduction to Yahoo Apps Presentation Transcript