Sea Open Hack Blueprint

Mobile Web Development withYahoo! Blueprint

Alfred Lo

Nov 2009

Agenda

• Introduction to Blueprint

• Mobile Widgets Development Process

• Q & A

Introduction to Blueprint

The Problem - Device Fragmentation

Multiple brands – multiple phone models

Multiple operating systems

Different screen resolutions

Different memory capabilities

Providing the best user experience is not easy

Browser Grades

Grade Definition Examples

A (Hero) HTML4/5, CSS, Javascript, unlimited

Apple iPhone, HTC Dream

A HTML4, CSS, 50KB page Motorola q9, Samsung T919

B XHTML, CSS, 30KB page Blackberry Curve 8310, Nokia N70

C XHTML, 30KB page Nokia 3110c, SonyEricsson W200a

D XHTML, 16KB page Nokia 6085, Motorola RAZR vc

E XHTML, 9KB page Samsung R450, Motorola i576

F XHTML, no images, 9KB page Motorola RAZR v3, Nokia 2610

X WML-only, not supported by Blueprint

Nokia 3510i, Motorola i355

Where are we now?

Device Quirks Examples

• OperaMini does not understand some CSS selectors

• Blackberries do not understand most CSS anyway

• Motorola V3 has an 8K page limit

• Some Nokias won't show tables unless you specify a doctype

• A Sidekick browser canvas width loses about 20 the doctype is an XHTML type

• Samsungs/Sharps tend to have a strange understanding of what “100% width” is

• Pocket Internet Explorer… need I say more?

Blueprint Mobile Platform

Open

Simple

Maximum Reach

Free!

Blueprint Language

• Is an XML markup set based partly on XForms

• Is a purely declarative language – includes no scripting or procedural code

• Abstracts the developers from the device details and allows them to quickly develop mobile web sites that adapts across devices

• Blueprint platform transcodes the blueprint markup for different devices, making sure that it renders properly and nicely

Blueprint is simple

10

<page style="collection"> <content> <module> <header layout="simple"> <layout-items> <block class="title">Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </content></page>

Even for some more complex presentation

11

<?xml version="1.0" encoding="UTF-8"?><page style="collection"> <page-header> <title-bar> <title>Restaurants</title> <commands> <ui-command> <title>Home</title><load event="activate" resource="#"/> </ui-command> </commands> </title-bar> </page-header> <content> <module class="featured"> <header> <layout-items><block class="title">Featured Restaurant</block></layout-items> </header> <placard layout="card"> <layout-items> <image size="xx-large" resource="widget:bp11examples/images/Thai_Seafood_Curry.jpg" caption="Seafood curry"/> <block><rating><stars>4</stars><reviews>21</reviews></rating></block> <block class="title"><strong>Bangkok Thai</strong></block> <block><span class="description">725 Clinton Ave, Berkeley, CA 94704</span></block> <block class="subtext">Every curry paste is made from scratch, say Bangkok Thai's owners: Peels are extracted from expensive fresh kaffir limes, which are blended in secret combination with... <inline-trigger><label>read more...</label><load event="activate" resource="#"/></inline-trigger></block> </layout-items> </placard> </module> </content>

<page-footer><block class="small" halign="right">Copyright Shmarranabab inc.</block></page-footer></page>

You Code Once, We Optimize for Thousands

Sony Ericsson W810i

iPhone

Blackberry 8800

Palm Treo 650

Mobile Widgets using Blueprint

Yahoo! Applications 3rd Party Applications

and many more …

Site Examples

• Yahoo!-ID News: http://id.m.yahoo.com/w/ynews-ID Answers: http://id.m.yahoo.com/w/yahoo-answers-widget

• 3rd party -Phoneytunes: http://widget.phoneytunes.com/-Naukri.com: http://m.naukri.com/-Kraft recipe search: http://m.kraftfoods.com/-Finnish bus information: http://m.fynbus.info/

Mobile Widgets Development Process

http://mobile.yahoo.com/devcenter/downloads

Download the Blueprint SDK1

Building Mobile Widget

Blueprint SDK includes XML Schema definitions

Templates to get started

Mobile Widget Sample Code



Develop your widget


Blueprint Platform

Widget Submission

Application Package

Widget Request

Widget Content

HTTP Request

Blueprint (XML)

Your Web Server

1

2

1. Create static/dynamic pages to return Blueprint

1. Create static/dynamic pages to return Blueprint

2. Create your application package and submit

2. Create your application package and submit

2

Server Code Example


Your Web Server

1

<page> <content> <module> <header layout="simple"> <layout-items> <block>Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </content></page>

Blueprint (XML)

Blueprint (XML)


Blueprint platform

Your ServerMobile Phone

User opens Widget

Request entry pointHTTP request to Widget publisher

URI specified in config.xml

Blueprint page returned

Includes Content-Type header; may include cache-control headers;

may include cookies

Widget content returned (Cookies stored on Blueprint platform)

User requests new data

HTTP request …

Request new content

Data flow


Interfacing with Blueprint platform

Content Types:Content-Type: application/x-blueprint+xmlUse 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 Blueprint platform

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

Application Package is a zip file containing config.xml

Application metadata, including the URL for your web server

gallery.xmlInformation for the widget gallery

Image FilesIncludes icons and screen shots (for the gallery)

Package your widget


3

<?xml version="1.0" encoding="UTF-8"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://mobile.yahoo.com/widgets/schema/1.0/config/" xsi:schemaLocation="..."> <title>Hello World!</title> <version>1.0</version> <identifier>hello-world-1</identifier> <description>My Hello World! Widget</description> <icon>ybang</icon> <author organization="Yahoo! Inc" href="http://www.yahoo.com" email="[email protected]"> Alfred Lo </author> 

<widget base="http://yourserver.com/HelloWorld/"> <preview> <icon>ybang</icon> <label>Hello World!</label> </preview> <shortcuts> <item default="true"> <label>Y! Mobile</label>

<href>test.php</href> </item> </shortcuts> </widget></config>

Application Package (config.xml) - Example


Application Package (gallery.xml) - Example


<?xml version="1.0" encoding="UTF-8"?><gallery xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://mobile.yahoo.com/widgets/schema/1.0/gallery/" xsi:schemaLocation="..."> <description lang="en">TW Hack 2009</description> <tags> <tag>Yahoo!</tag> <tag>Mobile</tag> <tag>widget</tag> <tag>development</tag> </tags> <languages> <lang>en-US</lang> <lang>en-UK</lang> </languages></gallery>

Application Package (Image Files) - Example


HelloWorld/resources/images

http://mobile.yahoo.com/devcenter/manage- Package the widget files into a zip archive- Upload your widget zip file by creating a new project- Upload the .zip file

Upload your mobile widget


4

Upload your mobile widget


4

Test your mobile widget


5

When you go back to “My Blueprint Apps”, your widget will appear under “Sites in Development”

You can test your widget by going to the link under “Test Site”, http://devtest-<yahooid>-<widgetid>.bpapps.com/

You can publish your widget after testing- Your widget will be appeared as http://<widgetid>.bpapps.com

You can optionally create your own URL for the mobile site by

creating alias to the bpapps URL - Click “Add Alias” in the Published Blueprint Sites- Example, http://m.mymobilesites.com

Publish your mobile widget


6

Widgets development processSummary


Develop your widget2

Package your widget3

Upload your mobile widget4

Test your mobile widget5

Publish your mobile widget6

<module>

<module> <image-list>

<table>

<map>

Blueprint Control Examples

<placard>

More than Markup Transcoding

• Carrier Detection- Global Carrier IP database- Via ‘X-Carrier’ HTTP request header

• Country / Location Detection- Geo IP- Via ‘Geo-Country’ and ‘Geo-Position’ HTTP request header

• Device Catalog- Comprehensive device databases covering legacy and newest handsets- Device attributes accessible to developers - Via X-Device-* HTTP request headers

• Video Transcoding- Support transcoding of Adobe Flash Video into mobile RTSP or Quicktime format- Native support for video under video.yahoo.com- <play-video> construct

Yahoo! Web Analytics (for selected partners)

Online tool provides usage information for your service

Know your Unique devices, Page views, and more…

5 Reasons to use Blueprint

Rapid development – time to market1

Over 4000+ supported devices2

Great looking – optimized experience 3

Open and cross platform4

Rich and growing feature set5

References

• Our Developer Site- http://mobile.yahoo.com/developers

• Blueprint Language Guide- http://developer.yahoo.com/mobile/blueprint/

• Blueprint Deployment Guide- http://developer.yahoo.com/mobile/blueprintdeployguide/

• Developer Blog- http://mobile.yahoo.net/developer/blog/

• Forum- http://developer.yahoo.net/forum/index.php?showforum=94

Thank you!

• Alfred Lo- Email: [email protected] YM: alfredkmlo

Technology

Sea Open Hack Blueprint