Introduction to Yahoo Apps

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!