introduction to yahoo apps
DESCRIPTION
Talk at the developer evening at La Cantine in Paris, FranceTRANSCRIPT
![Page 1: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/1.jpg)
Building Yahoo Apps
Sophie Davies‐Patrick and Chris;an Heilmann, YDN developer evening, Paris, October 2009 h"p://www.flickr.com/photos/mknowles/47457221/
![Page 2: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/2.jpg)
- -
Building Yahoo! Front Page AppsOctober, 2009
![Page 3: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/3.jpg)
- -
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
![Page 4: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/4.jpg)
- -
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
![Page 5: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/5.jpg)
- -
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
![Page 6: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/6.jpg)
- -
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
![Page 7: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/7.jpg)
- -
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.
![Page 8: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/8.jpg)
- -
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
![Page 9: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/9.jpg)
- -
How it Works (3)
The Expanded View
Users can expand the view of an app to access greater functionality.
![Page 10: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/10.jpg)
- -
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
![Page 11: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/11.jpg)
- -
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
![Page 12: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/12.jpg)
- -
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
![Page 13: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/13.jpg)
- -
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
![Page 14: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/14.jpg)
- -
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
![Page 15: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/15.jpg)
- -
Next Steps
• Review application ideas/approaches with the Yahoo! team
• Read the online documentation at http://developer.yahoo.com/yap/metro
![Page 16: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/16.jpg)
...and now for a deep dive...
![Page 17: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/17.jpg)
YAP is the plaHormhIp://developer.yahoo.com/yap/guide/yap‐overview.html
![Page 18: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/18.jpg)
hIps://developer.apps.yahoo.com/dashboard
![Page 19: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/19.jpg)
![Page 20: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/20.jpg)
![Page 21: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/21.jpg)
hIp://github.com/codepo8/TweetTrans
![Page 22: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/22.jpg)
hIp://isithackday.com/yosdemo/nonyos/tweeIrans.php?search=chien&tl=en
![Page 23: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/23.jpg)
hIp://code.google.com/apis/ajaxlanguage/documenta;on/#Translate
![Page 24: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/24.jpg)
hIp://developer.yahoo.com/yql/console/?q=show%20tables&env=store://datatables.org/alltableswithkeys
![Page 25: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/25.jpg)
![Page 26: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/26.jpg)
![Page 27: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/27.jpg)
![Page 28: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/28.jpg)
hIp://code.google.com/p/google‐caja/
![Page 29: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/29.jpg)
★ 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
![Page 30: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/30.jpg)
★ 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
![Page 31: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/31.jpg)
★ * hacks★ _ hacks★ IE condi;onals★ Insert‐aler clear fix★ expression()★@import★ Background images in IE
Caja and CSS
![Page 32: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/32.jpg)
★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
![Page 33: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/33.jpg)
hIp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html
![Page 34: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/34.jpg)
hIp://developer.yahoo.com/yap/guide/yapdev‐yml.html
Alterna;vely: YML
![Page 35: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/35.jpg)
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
![Page 36: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/36.jpg)
![Page 37: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/37.jpg)
![Page 38: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/38.jpg)
![Page 39: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/39.jpg)
hIp://yahoo.com/add?yapid=zKMBH94k
![Page 40: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/40.jpg)
![Page 41: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/41.jpg)
![Page 42: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/42.jpg)
![Page 43: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/43.jpg)
![Page 44: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/44.jpg)
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.
![Page 45: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/45.jpg)
![Page 46: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/46.jpg)
![Page 47: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/47.jpg)
hIp://github.com/yahoo/yos‐social‐php
![Page 48: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/48.jpg)
![Page 49: Introduction to Yahoo Apps](https://reader034.vdocuments.us/reader034/viewer/2022051314/54bd63cb4a7959a9278b4618/html5/thumbnails/49.jpg)
Chris;an Heilmann hIp://wait‐;ll‐i.com hIp://developer‐evangelism.com hIp://twiIer.com/codepo8
MERCI!