Upload
christian-heilmann
View
4.109
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Talk at the developer evening at La Cantine in Paris, France
Citation preview
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 AppsOctober, 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:• User profile• Contacts/friends• Presence/status• Activity updates
Allows developers to build rich, interactive applications that users can choose to install on a Yahoo! website
- -
Examples: Target and Mint.com
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.
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)
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.
Yahoo! ad space
- -
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)
• Easily build apps that run on Front Page and My Yahoo!
• Apps will run on Yahoo! Toolbar and other Yahoo! websites soon
• http://developer.yahoo.com/yap/
Yahoo! Application Platform (YAP) Yahoo! Markup Language (YML)
• Allows secured access to private data
• Can use ‘me’ and ‘viewer’ keywords
• Will begin integrating into OSML
• http://developer.yahoo.com/yap/yml
- -
Developer Components (2)
• Social Directory (read)
• Contacts (read)
• User Status (read/write)
• Updates (read/write)
• http://developer.yahoo.com/social/
Social APIs Yahoo! Query Language (YQL)
• SQL-like syntax
• Private/public data
• Queries external data feeds
• Allows custom tables
• http://developer.yahoo.com/yql
- -
Developer Components (3)
• HTML/CSS/JavaScript securer
• Enforces standards
• Includes JSLint
• http://developer.yahoo.com/yap/guide/caja-support.html
Cajoled JavaScript (Caja) Available SDKs
• Several SDKs available today (PHP, Flash and Objective-C)
• More to come
- -
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 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/
★ 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 HTML
★ 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 JavaScript
★ * hacks★ _ hacks★ IE condi;onals★ Insert‐aler clear fix★ expression()★@import★ Background images in IE
Caja and CSS
★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/)
Working with Caja
hIp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html
hIp://developer.yahoo.com/yap/guide/yapdev‐yml.html
Alterna;vely: YML
YML Tags (Large View)
yml:ayml:adyml:audioyml:formyml:friend‐selectoryml:if‐envyml:messageyml:nameyml:profile‐picyml:pronounyml:shareyml:swfyml:user‐badge
YML Lite Tags (Small View)
yml:ayml:audioyml:formyml:if‐envyml:nameyml:profile‐picyml:pronounyml: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
Chris;an Heilmann hIp://wait‐;ll‐i.com hIp://developer‐evangelism.com hIp://twiIer.com/codepo8
MERCI!