4. 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
5. Browser Grades Apple iPhone, HTC Dream HTML4/5, CSS, Javascript, unlimited A (Hero) Motorola q9, Samsung T919 HTML4, CSS, 50KB page A Blackberry Curve 8310, Nokia N70 XHTML, CSS, 30KB page B Nokia 3110c, SonyEricsson W200a XHTML, 30KB page C Nokia 6085, Motorola RAZR vc XHTML, 16KB page D Samsung R450, Motorola i576 XHTML, 9KB page E Motorola RAZR v3, Nokia 2610 XHTML, no images, 9KB page F Nokia 3510i, Motorola i355 WML-only, not supported by Blueprint X Examples Definition Grade
18. 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 2. Create your application package and submit 2 Develop your widget
19. Building Mobile Widget Your Web Server 1 Blueprint (XML) Blueprint (XML) Server Code Example <page> <content> <module> <header layout="simple"> <layout-items> <block>Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </content> </page>
20. Building Mobile Widget Blueprint platform Your Server Mobile Phone User opens Widget Request entry point HTTP 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
21. Building Mobile Widget Interfacing with Blueprint platform Content Types: Content-Type: application/x-blueprint+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 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
22.
23. Building Mobile Widget <?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="alfredlo@yahoo-inc.com"> 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
24. 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 (gallery.xml) - Example
25. Building Mobile Widget HelloWorld/resources/images Application Package (Image Files) - Example
28. 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/ Test your mobile widget
29.
30. Widgets development process Summary 1 2 3 4 5 6 Download the Blueprint SDK Develop your widget Package your widget Upload your mobile widget Test your mobile widget Publish your mobile widget
33. Yahoo! Web Analytics (for selected partners) Online tool provides usage information for your service Know your Unique devices, Page views, and more…
34. 5 Reasons to use Blueprint 1 2 3 4 5 Rapid development – time to market Over 4000+ supported devices Great looking – optimized experience Open and cross platform Rich and growing feature set
![Agenda ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)