Sea Open Hack Blueprint


Published on

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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sea Open Hack Blueprint

  1. 1. Mobile Web Development with Yahoo! Blueprint Alfred Lo Nov 2009
  2. 2. Agenda <ul><li>Introduction to Blueprint </li></ul><ul><li>Mobile Widgets Development Process </li></ul><ul><li>Q & A </li></ul>
  3. 3. Introduction to Blueprint
  4. 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. 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. 6. Where are we now?
  7. 7. Device Quirks Examples <ul><li>OperaMini does not understand some CSS selectors </li></ul><ul><li>Blackberries do not understand most CSS anyway </li></ul><ul><li>Motorola V3 has an 8K page limit </li></ul><ul><li>Some Nokias won't show tables unless you specify a doctype </li></ul><ul><li>A Sidekick browser canvas width loses about 20 the doctype is an XHTML type </li></ul><ul><li>Samsungs/Sharps tend to have a strange understanding of what “100% width” is </li></ul><ul><li>Pocket Internet Explorer… need I say more? </li></ul>
  8. 8. Blueprint Mobile Platform Open Simple Maximum Reach Free!
  9. 9. Blueprint Language <ul><li>Is an XML markup set based partly on XForms </li></ul><ul><li>Is a purely declarative language – includes no scripting or procedural code </li></ul><ul><li>Abstracts the developers from the device details and allows them to quickly develop mobile web sites that adapts across devices </li></ul><ul><li>Blueprint platform transcodes the blueprint markup for different devices, making sure that it renders properly and nicely </li></ul>
  10. 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. 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. 12. You Code Once, We Optimize for Thousands Sony Ericsson W810i iPhone Blackberry 8800 Palm Treo 650
  13. 13. Mobile Widgets using Blueprint and many more … Yahoo! Applications 3 rd Party Applications
  14. 14. Site Examples <ul><li>Yahoo! </li></ul><ul><ul><li>ID News: </li></ul></ul><ul><ul><li>ID Answers: http:// -answers-widget </li></ul></ul><ul><li>3 rd party </li></ul><ul><ul><li>Phoneytunes: </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Kraft recipe search: http:// / </li></ul></ul><ul><ul><li>Finnish bus information: http:// / </li></ul></ul>
  15. 15. Mobile Widgets Development Process
  16. 16. <ul><li> </li></ul>Building Mobile Widget 1 Download the Blueprint SDK
  17. 17. <ul><li>Blueprint SDK includes </li></ul><ul><li>XML Schema definitions </li></ul><ul><li>Templates to get started </li></ul><ul><li>Mobile Widget Sample Code </li></ul>Building Mobile Widget 1 Download the Blueprint SDK
  18. 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. 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. 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. 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. 22. <ul><li>Application Package is a zip file containing </li></ul><ul><li>config.xml </li></ul><ul><ul><li>Application metadata, including the URL for your web server </li></ul></ul><ul><li>gallery.xml </li></ul><ul><ul><li>Information for the widget gallery </li></ul></ul><ul><li>Image Files </li></ul><ul><ul><li>Includes icons and screen shots (for the gallery) </li></ul></ul>Building Mobile Widget 3 Package your widget
  23. 23. Building Mobile Widget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <config xmlns:xsi=&quot;; xmlns=&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;; email=&quot;;> Alfred Lo </author> <!-- change this widget base to your server url --> <widget base=&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. 24. Building Mobile Widget <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <gallery xmlns:xsi=&quot;; xmlns=&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. 25. Building Mobile Widget HelloWorld/resources/images Application Package (Image Files) - Example
  26. 26. <ul><li> </li></ul><ul><ul><li>Package the widget files into a zip archive </li></ul></ul><ul><ul><li>Upload your widget zip file by creating a new project </li></ul></ul><ul><ul><li>Upload the .zip file </li></ul></ul>Building Mobile Widget 4 Upload your mobile widget
  27. 27. Building Mobile Widget 4 Upload your mobile widget
  28. 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> Test your mobile widget
  29. 29. <ul><li>You can publish your widget after testing </li></ul><ul><ul><li>Your widget will be appeared as http://<widgetid> </li></ul></ul><ul><li>You can optionally create your own URL for the mobile site by creating alias to the bpapps URL </li></ul><ul><ul><li>Click “Add Alias” in the Published Blueprint Sites </li></ul></ul><ul><ul><li>Example, </li></ul></ul>Building Mobile Widget 6 Publish your mobile widget
  30. 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. 31. Blueprint Control Examples <module> <placard> <module> <image-list> < table > < map >
  32. 32. More than Markup Transcoding <ul><li>Carrier Detection </li></ul><ul><ul><li>Global Carrier IP database </li></ul></ul><ul><ul><li>Via ‘X-Carrier’ HTTP request header </li></ul></ul><ul><li>Country / Location Detection </li></ul><ul><ul><li>Geo IP </li></ul></ul><ul><ul><li>Via ‘Geo-Country’ and ‘Geo-Position’ HTTP request header </li></ul></ul><ul><li>Device Catalog </li></ul><ul><ul><li>Comprehensive device databases covering legacy and newest handsets </li></ul></ul><ul><ul><li>Device attributes accessible to developers </li></ul></ul><ul><ul><li>Via X-Device-* HTTP request headers </li></ul></ul><ul><li>Video Transcoding </li></ul><ul><ul><li>Support transcoding of Adobe Flash Video into mobile RTSP or Quicktime format </li></ul></ul><ul><ul><li>Native support for video under </li></ul></ul><ul><ul><li><play-video> construct </li></ul></ul>
  33. 33. Yahoo! Web Analytics (for selected partners) Online tool provides usage information for your service Know your Unique devices, Page views, and more…
  34. 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
  35. 35. References <ul><li>Our Developer Site </li></ul><ul><ul><li> </li></ul></ul><ul><li>Blueprint Language Guide </li></ul><ul><ul><li> </li></ul></ul><ul><li>Blueprint Deployment Guide </li></ul><ul><ul><li> </li></ul></ul><ul><li>Developer Blog </li></ul><ul><ul><li> </li></ul></ul><ul><li>Forum </li></ul><ul><ul><li> </li></ul></ul>
  36. 36. Thank you! <ul><li>Alfred Lo </li></ul><ul><ul><li>Email: [email_address] </li></ul></ul><ul><ul><li>YM: alfredkmlo </li></ul></ul>