Yahoo! Mobile Widgets(an intro to the

Blueprint platform)

Ricardo VarelaMobile Engineering Lead

Webcamp.ro - Bucharest – July 8th

Some stats about EU5

• 225 million mobile users

–24% are “mobile media” users

–81.8% are SMS users

–27.1% have a 3G connection

–13% of them use high-end phones

–but… only 4-5% transition from web!

source: M:Metrics 2008

the mobile opportunity is massive

* Source eTForecasts

to enable a mobile ecosystem for billions of users

Yahoo Mobile Mission:

create a mobile platform that makes development easy

Yahoo! Widget Platform

launch a mobile monetization engine that’s open to all

Yahoo! Advertising Platform

build indispensable mobile services for every day people

and

Homepage, OneSearch, OneConnect

openAnd the most important thing…

• Just like it happened on the web…• Enable everybody to publish and

develop

Background

• Mobile development? That is such a good idea!

• “Write once, run anywhere”

How the story goes...

The solution?

Widgets

• Our open platform for mobile development

• Simple declarative XML language, blueprint (based on XForms)

• Objective: give your app the maximum distribution possible!

Blueprint guidelines

• Breadth over depth

• Get your content out to everybody

• Simplicity + good results

• Graceful adaptation + best-of-class experience

• “Write once, get best experience across lots of devices”

References

• Yahoo! Mobile Widgets SDK

• Blueprint 1.0 (released last week)!

• http://mobile.yahoo.com/

• Yahoo Go client / HTML client

• http://beta.m.yahoo.com

Blueprint

• Simple declarative XML language based on XForms

• Semantic, template-based

• Used in both snippets & widgets

Snippets

• Live in the mobile home page

• Have 2 views:

– normal

– Extended [opt]

Widgets

• Have their own set of pages

• Accessed from carousel

Carousel

Building widgets

• Get SDK

–http://mobile.yahoo.com/developers

• Generate 2 code “facets”:

–Submission package (config)

–Server code (backend)

Building widgets (ii)

• Start from a template (samples included)

– Modify config, add images..

• Implement server-side code

– Test on browser!

• Submit test via:– http://mobile.yahoo.com/developers/test/upload

• When ready, submit to gallery

• Profit!

How it works? (HTML)

HTMLrenderer

Widget engine

Your server

html BP

How it works? (Java/native)

Client/renderer

Widget engine

Your server

blueprint

Display structure

An example

Rich set of controls available

Navigation bar

Image list

tables

Maps & directions

location

Best everywhere

Widget examples

Local content + info on the go

A more complex example: location-based mashup

Detail view of event + map linking to map widget

HTML version: detail view of photo + map

Note: Work in progress!

• For more help:

–Dev Guide (in SDK)

–YDN page http://developer.yahoo.com/mobile/

–Developers Grouphttp://tech.groups.yahoo.com/group/yhoomobiledevelopers

Questions?Comments?

Candy?

Ricardo Varelaricardo.varela@yahoo-inc.com

Bobby Voicubvoicu@yahoo-inc.com