Mobile Web Development withYahoo! Blueprint by Alfred Lo of Yahoo!

1. Mobile Web Development with Yahoo! Blueprint Alfred Lo Nov 2009

3. Introduction to Blueprint

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

6. Where are we now?

8. Blueprint Mobile Platform Open Simple Maximum Reach Free!

10. Blueprint is simple <page style=&quot;collection&quot;> <content> <module> <header layout=&quot;simple&quot;> <layout-items> <block class=&quot;title&quot;>Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </content> </page>

11. Even for some more complex presentation <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <page style=&quot;collection&quot;> <page-header> <title-bar> <title>Restaurants</title> <commands> <ui-command> <title>Home</title><load event=&quot;activate&quot; resource=&quot;#&quot;/> </ui-command> </commands> </title-bar> </page-header> <content> <module class=&quot;featured&quot;> <header> <layout-items><block class=&quot;title&quot;>Featured Restaurant</block></layout-items> </header> <placard layout=&quot;card&quot;> <layout-items> <image size=&quot;xx-large&quot; resource=&quot;widget:bp11examples/images/Thai_Seafood_Curry.jpg&quot; caption=&quot;Seafood curry&quot;/> <block><rating><stars>4</stars><reviews>21</reviews></rating></block> <block class=&quot;title&quot;><strong>Bangkok Thai</strong></block> <block><span class=&quot;description&quot;>725 Clinton Ave, Berkeley, CA 94704</span></block> <block class=&quot;subtext&quot;>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=&quot;activate&quot; resource=&quot;#&quot;/></inline-trigger></block> </layout-items> </placard> </module> </content> <page-footer><block class=&quot;small&quot; halign=&quot;right&quot;>Copyright Shmarranabab inc.</block></page-footer> </page>

12. You Code Once, We Optimize for Thousands Sony Ericsson W810i iPhone Blackberry 8800 Palm Treo 650

13. Mobile Widgets using Blueprint and many more … Yahoo! Applications 3 rd Party Applications

15. Mobile Widgets Development Process

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=&quot;simple&quot;> <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

23. Building Mobile Widget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <config xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/config/&quot; xsi:schemaLocation=&quot;...&quot;> <title>Hello World!</title> <version>1.0</version> <identifier>hello-world-1</identifier> <description>My Hello World! Widget</description> <icon>ybang</icon> <author organization=&quot;Yahoo! Inc&quot; href=&quot;http://www.yahoo.com&quot; email=&quot;alfredlo@yahoo-inc.com&quot;> Alfred Lo </author> <!-- change this widget base to your server url --> <widget base=&quot;http://yourserver.com/HelloWorld/&quot;> <preview> <icon>ybang</icon> <label>Hello World!</label> </preview> <shortcuts> <item default=&quot;true&quot;> <label>Y! Mobile</label> <href>test.php</href> </item> </shortcuts> </widget> </config> Application Package (config.xml) - Example

24. Building Mobile Widget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <gallery xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot; xsi:schemaLocation=&quot;...&quot;> <description lang=&quot;en&quot;>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

27. Building Mobile Widget 4 Upload your mobile widget

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

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

31. Blueprint Control Examples <module> <placard> <module> <image-list> < table > < map >

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