Yahoo! Blueprint Overview

Yahoo!
@ Nike
May 4, 2009

Tom Hughes-Croucher
croucher@yahoo-inc.com

Overview

• Blueprint
• Site Explorer / BOSS
• Search Monkey

BLUEPRINT
the mobile platform

The Blueprint for Today

• Welcome
• Blueprint Overview
• Blueprint Developer Tutorial
• Blueprint Design Language
• Further Discussion

BLUEPRINT

5

4

3

2

1
2010
0
2005

Personal computers Mobile phones

* Source eTForecasts

Yahoo!’s mobile mission:

to enable a mobile ecosystem
for billions of users

m.yahoo.com
No 1 mobile destination

Maximum coverage..
but a poor experience
for high-end users.

Deﬁnitely Mobile 1.0

Lightweight
XML markup
language.
<placard layout=”simple” class=”link”>
Based on X-Forms. <layout-items>
<image resource=”email.gif” />
<block class=”title”>Add Email</block>

Purely declarative, </layout-items>
<load event=”activate” resource=”mail.bp” />

no new scripting </placard>

language necessary.

Lightweight
<placard layout=”simple” class=”link”>

XML markup <layout-items>
<image resource=”email.gif” />

language. <block class=”title”>Add Email</block>
</layout-items>
<load event=”activate” resource=”mail.bp” />
</placard>
Based on X-Forms.
Purely declarative,
no new scripting
language necessary.

Itʼs powerful
location-based services

mapping controls

device optimization

image & video controls

BLUEPRINT the mobile platform

Yahoo! Blueprint Apps 3rd Party Blueprint Apps

Blueprint language specification

Infrastructure Runtimes SDK
Gallery Yahoo! Go Developer Tools
Monetization Mobile Apps Reference
Analytics Mobile Sites Tutorials

BP is the platform

Blueprint Language

BP is the platform
• XML
• XForms
• UED Patterns
• Device Services

Blueprint Language

BP is the platform
• XML
• XForms
• UED Patterns
• Device Services

Blueprint Language

HTML J2ME S60 WinMob iPhone (Android)

Blueprint Renderers

BP is the platform
• XML
• XForms
• UED Patterns
• Device Services

Blueprint Language

Native

HTML J2ME S60 WinMob iPhone (Android)

Blueprint Renderers

Blueprint widgets
GO
integrated into the client
included in the Gallery
can be added to Carousel
reach millions of users

Blueprint widgets
GO
integrated into the client
included in the Gallery
can be added to Carousel
reach millions of users

available today

Blueprint apps new

Java, Windows Mobile
& Symbian devices

standalone application
freely distribute
runs on 100s of devices

Blueprint apps new

Java, Windows Mobile
& Symbian devices

standalone application
freely distribute
runs on 100s of devices

developer preview now
commercial release later

Blueprint sites new

xHTML & HTML browsers
your site
your domain
on your infrastructure
supports 1000s of devices

Blueprint sites new

xHTML & HTML browsers
your site
your domain
on your infrastructure
supports 1000s of devices
developer preview now
commercial release soon

BLUEPRINT
the mobile platform

not another mobile OS

BLUEPRINTthe mobile platform

not a platform for games


not proprietary


not proprietary
just return Blueprint XML

BLUEPRINT
the mobile platform

An open mobile platform that
makes development easy and is
the best way to create mobile
internet services.

BLUEPRINT
Developer Experience
Quick Tutorial

I want to build stuff. Today.

• Platform Overview

• Blueprint Language Concept

• Steps to (Widget-) Success

BLUEPRINT

Blueprint Language: What’s that exactly?

BLUEPRINT


XML mark-up language, based on X-Forms

BLUEPRINT



No scripting or procedural code

BLUEPRINT




Provides rich mobile core features and services

BLUEPRINT




Provides rich mobile core features and services

EASY!

BLUEPRINT

Blueprint XML: Create a Page!

<page>
<content>
<module>
<header layout=quot;simplequot;>
<layout-items>
<block class=quot;titlequot;>Greeting</block>
</layout-items>
</header>
<block>Hello World!</block>
</module>
</content>
</page>

BLUEPRINT

Blueprint XML: Create a Map!

<map>
<center>
<latitude>37.3919</latitude>
<longitude>-122.0302</longitude>
</center>
<map-zoom>6</map-zoom>
<map-mode>map</map-mode>
<map-showtraffic>false</map-showtraffic>
<map-point>
<location>
<latitude>37.392916</latitude>
<longitude>-122.033934</longitude>
<street>810 Del Rey Ave</street>
<city>Sunnyvale</city>
<state>CA</state>
<zip></zip>
</location>
</map-point>
</map>

BLUEPRINT

Blueprint Control: Location
<location-chooser ref=quot;originquot;>
<label>From:</label>
</location-chooser>

<location-chooser ref=quot;destinationquot;>
<label>To:</label>
</location-chooser>

Supports GPS
or Cell ID:

Find Me

Does not have GPS or
Cell ID Information

BLUEPRINT

Creating Blueprint Services: What do I need?

BLUEPRINT


Any web-server

BLUEPRINT


Any web-server

Use any scripting language

BLUEPRINT


Any web-server


Use any existing publishing tools

BLUEPRINT


Any web-server


Use any existing publishing tools

Return Blueprint!

BLUEPRINT

Building Mobile Widget
Download the Blueprint SDK
1

BLUEPRINT

1

Blueprint SDK includes
• Blueprint Documentation

• XML Schema definitions

• Templates to get started

• Mobile Widget Sample Code

• PHP helper class (blueprint.php)

BLUEPRINT

Develop your Widget
2

Widget Request HTTP Request

Yahoo! Server
Widget Content Blueprint (XML)

Your
Web Server
Widget
Submission

Application
Package

BLUEPRINT

Develop your Widget
2


Yahoo! Server

Your
Web Server
2. Create static/
dynamic pages
Widget
to return
Submission 2
Blueprint

Application
Package

BLUEPRINT

Develop your Widget
2


Yahoo! Server

Your
Web Server
2. Create static/
dynamic pages
Widget
to return
Submission 2
Blueprint

3. Create your
Application
application
Package
package and
submit

3

BLUEPRINT

Data flow

Mobile Phone Yahoo! Server Your Server

Request entry point
User opens HTTP request to Widget publisher
Widget URI specified in config.xml

Includes language and location headers

Blueprint page returned

Includes Content-Type header; may include
cache-control headers; may include cookies
for Widget publisher

(Cookies stored on Yahoo!
Widget content returned server)

User requests
new data Request new content
HTTP request …

BLUEPRINT

Interfacing with Yahoo! Servers

Content Type for Blueprint Services:
Content-Type: application/x-ywidget+xml
Use only the UTF-8 character set.

Using Cookies:
Your server can set/retrieve cookies exactly as if you are serving HTML instead of Blueprint
markup.
The cookies are stored on Yahoo! servers

Cache Control:
Wherever possible, Blueprint pages are cached on the user’s device. To control caching, use
the following standard HTTP headers when serving pages: Cache-Control, ETag, and If-
None-Match. Only these headers affect caching

BLUEPRINT

Interfacing with Yahoo! Servers
Internationalization and Localization:
When Yahoo! Mobile application server sends a page request, the request may contain
several HTTP headers, including:

Accept-Language
RFC 4646/4647 language code
(Example: Accept-Language: en-US)

Geo-Country
ISO 3166 country or UN M.49 region code
(Example: Geo-Country: CA)

You can use the information in the headers to decide what content to return.

BLUEPRINT

Package your Widget
3

Application Package is a zip file
containing
• config.xml

• Application metadata, including the URL for
your web server

• gallery.xml

• Information for the widget gallery

• Image Files

• Includes icons and screen shots (for the
gallery)

BLUEPRINT

Upload your mobile Widget
4

• http://mobile.yahoo.com/developers/test/upload
• Package the widget files into a zip archive
• Upload the .zip file

BLUEPRINT

Test your mobile Widget
5

1. Yahoo! Go Emulator: http://mobile.yahoo.com/go/tryit
(Note: External links won’t work)

2. Browser http://devtest.m.yahoo.com
(Note: GPS and cell-ID won’t work on desktop browser)

BLUEPRINT

Publish your mobile Widget
6

• http://mobile.yahoo.com/developers/submit/upload
• Please test your widget before publishing
• It may take 1 week for the approval process

BLUEPRINT

Widgets Development Process Summary

1

Develop your Widget
2

Package your Widget
3

Upload your mobile Widget
4

Test your mobile Widget
5

Publish your mobile Widget
6

BLUEPRINT

Get Numbers: Blueprint
Analytics

BLUEPRINT

Links & Support
Get the SDK

• Download the SDK
http://mobile.yahoo.com/developers/download

Get Help!

• Yahoo! Tech Group
http://tech.groups.yahoo.com/group/yhoomobiledevelopers
• Read the Blueprint Blog
http://mobile.yahoo.net/developer/blog

BLUEPRINT

The Blueprint Design Language
Tomorrow’s Mobile User Experience

The Language is Evolving

BLUEPRINT

Web Sites Applications

Document Centric Task Centric
Content Syndication Native Look & Feel
Biased to Layout Richer Experience

Content
Connectivity Optional
Link Navigation

Browser Native Functionality

BLUEPRINT

Internet as a Platform

Structured Experiences
High Level Controls
Stateless
MVC Patterns
Streamed Pages Asynchronous Requests
XForms and XPath
oh my!

Maps Embedded Web Content
Blueprint Renderer
Native Applications
Location Service Image Transcoding
Yahoo! Services
Slideshows Seamless Search Results
Video Transcoding Voice Recognition
Authentication Advanced Input Controls
Core Control
Photo Acquisition Scaled Hosting
Language

BLUEPRINT

On Demand Service Updates

Let’s retain the
beneﬁts of streamed
experiences

Organically add features
Roll out new services
Serve up seasonal content

BLUEPRINT

Aggregated Services

Let’s reuse services already
implemented and tested
by Yahoo!

...or anyone serving up
Blueprint pages.

BLUEPRINT

Aggregated Services

BLUEPRINT

Aggregated Services

<onesearch/>

BLUEPRINT

Web Sites Applications

Document Centric Task Centric
Content Syndication Native Look & Feel
Biased to Layout Richer Experience
BLUEPRINT
Content
Connectivity Optional
Link Navigation

Browser Native Functionality

BLUEPRINT

Site Explorer
Yahoo! Site Explorer / BOSS

Search Engine

• Maximum content
• More in-bound links
• Normative URLs
• Fresh-fresh-fresh

Number of pages
crawled Inbound links

Number of pages
crawled Inbound links

Detail level

6092 Inlinks Lost

OR

36% Inlinks Lost

B.O.S.S.
Build (your) Own Search Search

Site Explorer in BOSS

• Inlinks (v1/v2)
• Page Data (v1/v2)
• Ping (v1)
• Update Notiﬁcation (v1)

Ping / Update Notiﬁcation

Get on the Yahoo! Search
Radar!

Site Explorer

• https://siteexplorer.search.yahoo.com/
• http://developer.yahoo.com/search/siteexplorer/
• http://developer.yahoo.com/boss

Feeding the Monkey: the SearchMonkey
data layer, presentation applications, and
you

What is SearchMonkey?
an open platform for using structured data to build more useful
and relevant search results

Before After

Enhanced Result

Key/value Pairs
Image Links
or abstract

Infobar

Summary Blob

How to get data to
SearchMonkey? Humans see:
• name
• picture of a person
• current job
• industry, …

Computers see:
an undifferentiated
blob of HTML

Can we make
computers
smarter?

Artiﬁcial intelligence is hard.
Plus…

How does it Work?

Acme.com’s DB

How does it Work?

Acme.com’s Site

Acme.com’s DB

How does it Work?
site owners/publishers share structured data with Yahoo!
1

Acme.com’s Site

Acme.com’s DB

How does it Work?
1

RDF/Microformat Markup

Acme.com’s Site

Index

Acme.com’s DB

How does it Work?
1


Acme.com’s Site

Index

DataRSS feed

Acme.com’s DB

How does it Work?
1

Page Extraction


Acme.com’s Site

Index

DataRSS feed

Acme.com’s DB

How does it Work?
1

Page Extraction


Acme.com’s Site

Index

DataRSS feed

Web Services
Acme.com’s DB

How does it Work?
1

site owners & third-party developers build SearchMonkey apps
2

Page Extraction


Acme.com’s Site

Index

DataRSS feed

Web Services
Acme.com’s DB

How does it Work?
1

site owners & third-party developers build SearchMonkey apps
2

consumers customize their search experience with Enhanced Results or Infobars
3

Page Extraction


Acme.com’s Site

Index

DataRSS feed

Web Services
Acme.com’s DB

Data Sources: RDF and Microformats
Name Cached Open Mode Notes
Yahoo! Index yes yes Passive Old-School Y! Index data
RDFa, eRDF yes yes Passive Vocab + markup decoupled
Microformats yes yes Passive Vocab + markup coupled
DataRSS feed yes no Active Atom + metadata
XSLT no no Active Good for prototyping
Web Service no no Active Brings in remote data

Approach #1: Embedded RDF
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML+RDFa 1.0//EN”
quot;http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtdquot;>
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:dc=http://purl.org/dc/elements/1.1/
xmlns:foaf=http://xmlns.com/foaf/0.1/
•Cached data
lang=quot;enquot; xml:lang=quot;enquot;>
<head>
•allows Enhanced Results
<title>The Amazing Home Page of Joe Smith</title>
</head>
•but not for dynamic data
<body>
<h1 property=quot;dc:titlequot;>Joe's Home Page</h1>

• Reuse existing markup
<div rel=quot;foaf:makerquot;>
<h2 property=quot;foaf:namequot;>Joe Smith</h2>
<div rel=quot;foaf:depictionquot;
• but requires site redesign
resource=quot;http://joesmith.org/images/jsmith.pngquot;>
<img src=quot;/images/jsmith.pngquot;
• Open approach
alt=quot;Smiling headshot of Joequot; />
<p property=quot;dc:rightsquot;>Creative Commons
• everyone can use
Attribution 3.0 Unported</p>
</div>
• Passive, crawled by Y!
</div>
…

• less bureaucracy to set up

Approach #2: Embedded
Microformats
<div id=quot;hcard-Joe-Smithquot; class=quot;vcardquot;>
<span class=quot;fnquot;>Joe Smith</span>
<div class=quot;adrquot;>
<div class=quot;street-addressquot;>123 Murphy Avenue</div>
<span class=quot;localityquot;>Sunnyvale</span>,
• Cached data
<span class=quot;regionquot;>California</span>
<span class=quot;postal-codequot;>94086</span>
• allows Enhanced Results
</div>
• but not for dynamic data
<div class=quot;telquot;>(408) 555-1234</div>
</div>…
• Reuse existing markup
• but requires site redesign
• Open approach
• everyone can use
• Passive, crawled by Y!
• less bureaucracy to set up

Data Sources: DataRSS Feed

Approach #3: DataRSS Feed
<?proﬁle http://search.yahoo.com/searchmonkey-proﬁle ?>
<feed xmlns:xsi=quot;http://www.w3.org/2001/XMLSchema-instancequot;
xsi:schemaLocation=quot;http://www.w3.org/2005/Atom ../xsd/datarss.xsdquot;
xmlns:dc=quot;http://purl.org/dc/terms/” xmlns=quot;http://www.w3.org/2005/Atomquot;
• Cached data
xmlns:commerce=quot;http://search.yahoo.com/searchmonkey/commerce/quot;
xmlns:y=quot;http://search.yahoo.com/datarss/quot;>
• allows Enhanced Results
<id>http://local.yahoo.com/datarss/</id>
<author><name>Peter Mika (pmika@yahoo-inc.com)</name></author>
• but not for dynamic data
<title>Example data feed for Local</title>
<updated>2008-07-16T04:05:06+07:00</updated>
• Generate feed from DB
<entry>
• and maintain afterwards
<title>Parcel 104</title>
<id>http://local.yahoo.com/info-21583016-parcel-104-santa-clara</id>
• Closed approach
<updated>2008-07-16T04:05:06+07:00</updated>
<content type=quot;application/xmlquot;>
• only Yahoo! gets data
<y:adjunct version=quot;1.0quot; name=quot;com.yahoo.local”>
<y:item rel=quot;dc:subjectquot;>
• Actively provide a feed
<y:type typeof=quot;vcard:VCard commerce:Restaurant”>
<y:meta property=quot;commerce:hoursOfOperationquot;>
• coord w/Yahoo! to set up
Breakfast daily, Lunch Mon.-Fri., Dinner Mon.-Sat.

Building with Structured Data

• Structured data -> easy app building
–Relies on RDF, microformats, DataRSS
•That was the hard part
• PHP in a typical app
–Mostly simple assignments, Data::get()
–Possibly strings, XML, math

Data Sources: XSLT

Approach #4: Extract with
XSLT
<?xml version=quot;1.0quot;?>
<xsl:stylesheet xmlns:xsl=quot;http://www.w3.org/1999/XSL/Transformquot; version=quot;1.0quot;>
<xsl:template match=quot;/quot;>
<adjunctcontainer>
<adjunct id=quot;smid:{$smid}quot; version=quot;1.0quot;>
• Generally not cached
<item rel=quot;rel:Photo”
resource=quot;{//div[@class='hresume']//div[@class='image']/img/@src}quot;/>
• too slow, infobar only
<item rel=quot;rel:Cardquot;>
<meta property=quot;vcard:fnquot;>
• but good for dynamic data
<xsl:value-of select=quot;//div[@class='hresume']//span[contains(@class,'fn')]quot;/>
</meta>
• Scrape page with XSLT
<meta property=quot;vcard:titlequot;>
<xsl:value-of select=quot;//div[@class='hresume']//ul[@class='current']/liquot;/>
• operates on cleaned up
</meta>
</item>
version of the DOM
</adjunct>
</adjunctcontainer>
• watch out for template
</xsl:template>
changes
</xsl:stylesheet>

• Easy to prototype

Prototyping with XSLT

• What if I don’t have structured data?
–I don’t own the site
–I do own the site, but I want to prototype ﬁrst
• Build an XSLT custom data service ﬁrst
–Write some XSLT to extract the data and
transform it into DataRSS

Creating an Infobar

• Infobar advantages
–Annotate someone else’s site
–Use links and images from other domains
•Mash up info from multiple sites
•Afﬁliate / coupon links? Hmmm…
–Can act on *, all websites

Data Sources: Web Services

Approach #5: Call a Web
Service
<?xml version=quot;1.0quot;?>
<xsl:stylesheet xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xmlns:xsl=quot;http://www.w3.org/1999/XSL/Transformquot; version=quot;1.0”
xmlns:h=http://www.w3.org/1999/xhtml
• Generally not cached
xmlns:y=quot;urn:yahoo:srch”
xsi:schemaLocation=quot;urn:yahoo:srch
• too slow, infobar only
http://api.search.yahoo.com/SiteExplorerService/V1/PageDataResponse.xsdquot;>
<xsl:template match=quot;/quot;>
• but good for dynamic data
<adjunctcontainer xmlns:my=quot;http://example.com/ns/1.0quot;>
<adjunct id=quot;smid:{$smid}quot; version=quot;1.0quot;>
• Call a Remote Web
<meta property=quot;my:link1quot;>
<xsl:value-of select=quot;//y:Result[1]/y:Urlquot;/>
Service
</meta>
<meta property=quot;my:result1quot;>
• allows SearchMonkey apps
<xsl:value-of select=quot;//y:Result[1]/y:Titlequot;/>
</meta>
to glue together
</adjunct>
</adjunctcontainer>
• can handle OpenSearch
</xsl:template>
</xsl:stylesheet>
XML natively

Ever-present Monkeys

http://ysearchblog.com/2009/03/12/embed-
videos-games-and-docs-with-searchmonkey/

• Videos
• Games
• Documents
• More soon

Resources

• Main:
–http://developer.yahoo.com/searchmonkey
• Lists and Forums:
–searchmonkey-developers@yahoogroups.com
–http://suggestions.yahoo.com/searchmonkey
• RDF and Microformats:

Next Steps

1. Identify content to use in SearchMonkey
2. Weigh the strengths and drawbacks of each
method for providing data:
– RDF
– Microformats
– DataRSS feed

Tom
Hughes-Croucher
croucher@yahoo-inc.com
@sh1mmer

Yahoo! Blueprint Overview

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Yahoo! Blueprint Overview

Semelhante a Yahoo! Blueprint Overview (20)

Mais de Tom Croucher

Mais de Tom Croucher (20)

Último

Último (20)

Yahoo! Blueprint Overview

Notas do Editor