Sea Open Hack Blueprint
-
Upload
michael-smith -
Category
Technology
-
view
112 -
download
1
description
Transcript of 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
Building Mobile Widget
Download the Blueprint SDK1
Develop your widget
Building Mobile 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
Building Mobile Widget
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)
Building Mobile Widget
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
Building Mobile Widget
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
Building Mobile 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> <!-- change this widget base to your server url -->
<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
Building Mobile Widget
Application Package (gallery.xml) - Example
Building Mobile Widget
<?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><!-- Use tags which identify your widget to other users --> <tag>Yahoo!</tag> <tag>Mobile</tag> <tag>widget</tag> <tag>development</tag> </tags> <languages><!-- Use languages your widget supports --> <lang>en-US</lang> <lang>en-UK</lang> </languages></gallery>
Application Package (Image Files) - Example
Building Mobile Widget
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
Building Mobile Widget
4
Upload your mobile widget
Building Mobile Widget
4
Test your mobile widget
Building 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
Building Mobile Widget
6
Widgets development processSummary
Download the Blueprint SDK1
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