Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Yahoo Mobile Widgets

6,157 views

Published on

Slides for the class on creating Yahoo Mobile Widgets for BBC OverTheAir 2008 event in London

Published in: Technology, Business
  • Be the first to comment

Creating Yahoo Mobile Widgets

  1. 1. Creating Mobile Widgets Ricardo Varela Mobile Engineering Lead OverTheAir hack fest – London - Apr 4 th
  2. 2. Background <ul><li>Mobile development? That is such a good idea! </li></ul><ul><li>“ Write once, run anywhere” </li></ul>
  3. 3. Fast forward..
  4. 4. The solution?
  5. 5. Yahoo! to the rescue <ul><li>We mean… to our own rescue too! </li></ul>
  6. 6. Widgets <ul><li>Our open platform for mobile development </li></ul><ul><li>Simple declarative XML language, blueprint (based on XForms) </li></ul><ul><li>Objective: give your app the maximum distribution possible! </li></ul>
  7. 7. Blueprint guidelines <ul><li>Breadth over depth </li></ul><ul><li>Get your content out to everybody </li></ul><ul><li>Simplicity + good results </li></ul><ul><li>Graceful degradation + best-of-class experience </li></ul><ul><li>“ Write once, run in as much as possible” </li></ul>
  8. 8. Minimum Effort <ul><li>Write once.. </li></ul>
  9. 9. Maximum Fidelity <ul><li>Run everywhere we can.. </li></ul>
  10. 10. Game plan <ul><li>Open platform to enable YOU to create mobile content in an easier way! </li></ul><ul><li>Searching for the killer mobile app </li></ul>
  11. 11. References <ul><li>Yahoo! Mobile Widgets SDK </li></ul><ul><li>Blueprint </li></ul><ul><li>http://mobile.yahoo.com/ </li></ul><ul><li>http://mobile.yahoo.com/developers </li></ul><ul><li>http://mobile.yahoo.com/gallery# </li></ul><ul><li>Yahoo Go client / HTML client </li></ul><ul><li>http://beta.m.yahoo.com </li></ul>
  12. 12. Blueprint <ul><li>Simple declarative XML language based on XForms </li></ul><ul><li>Semantic, template-based </li></ul><ul><li>Used in both snippets & widgets </li></ul>
  13. 13. Snippets <ul><li>Live in the mobile home page </li></ul><ul><li>Have 2 views: </li></ul><ul><ul><li>normal </li></ul></ul><ul><ul><li>Extended [opt] </li></ul></ul>
  14. 14. Widgets <ul><li>Have their own set of pages </li></ul><ul><li>Accessed from carousel </li></ul>
  15. 15. Side note: rss views <ul><li>RSS views come for free </li></ul><ul><li>To set up a simple RSS View, write a config.xml file in which the source url (widget or snippet) specifies the source of the RSS feed </li></ul>
  16. 16. Carousel
  17. 17. Blueprint roadmap <ul><li>Phase 1 (in beta) </li></ul><ul><ul><li>server-side logic </li></ul></ul><ul><li>Phase 1.5 </li></ul><ul><ul><li>support for oneSearch/Connect/Place </li></ul></ul><ul><ul><li>May just turn into... </li></ul></ul><ul><li>Phase 2 </li></ul><ul><ul><li>Full data model, MVC </li></ul></ul>
  18. 18. Blueprint sample <ul><li><!-- hello_app.xml --> </li></ul><ul><li><page> </li></ul><ul><li><content> </li></ul><ul><li><section> </li></ul><ul><li><module> </li></ul><ul><li><trigger> </li></ul><ul><li><label>Click Me!</label> </li></ul><ul><li><load-page event=&quot;activate“ </li></ul><ul><li>page=&quot;greet.xml&quot; /> </li></ul><ul><li></trigger> </li></ul><ul><li></module> </li></ul><ul><li></section> </li></ul><ul><li></content> </li></ul><ul><li></page> </li></ul><ul><li><!-- greet.xml --> </li></ul><ul><li><page id=&quot;greet&quot;> </li></ul><ul><li><content> </li></ul><ul><li><section> </li></ul><ul><li><module> </li></ul><ul><li><header layout=&quot;simple&quot;> </li></ul><ul><li><layout-items> </li></ul><ul><li><block </li></ul><ul><li>class=&quot;title&quot;>Greeting</block> </li></ul><ul><li></layout-items> </li></ul><ul><li></header> </li></ul><ul><li><block>Hello World!</block> </li></ul><ul><li></module> </li></ul><ul><li></section> </li></ul><ul><li></content> </li></ul><ul><li></page> </li></ul>
  19. 19. Blueprint structure: widgets
  20. 20. Blueprint structure: snippets
  21. 21. Display structure
  22. 22. Display controls <ul><li>Blocks, placards, image lists, data input (simple, multiline, passwd)… </li></ul><ul><li>Coming soon: maps, searchbox,… </li></ul><ul><li>Check the doc in the SDK </li></ul>
  23. 23. Building widgets <ul><li>Get SDK </li></ul><ul><ul><li>http://mobile.yahoo.com/developers </li></ul></ul><ul><li>Generate 2 code “facets”: </li></ul><ul><ul><li>Submission package </li></ul></ul><ul><ul><li>Server code </li></ul></ul>
  24. 24. Building widgets (ii) <ul><li>Start from a template (samples included) </li></ul><ul><ul><li>Modify config, add images.. </li></ul></ul><ul><li>Implement server-side code </li></ul><ul><ul><li>Test on browser! </li></ul></ul><ul><li>Submit test via: </li></ul><ul><ul><li>http://mobile.yahoo.com/developers/test/upload </li></ul></ul><ul><li>When ready, submit to gallery </li></ul><ul><li>Profit! </li></ul>
  25. 25. Submission package <ul><li>Includes config files, images and metainfo </li></ul><ul><li>Stored in Yahoo servers </li></ul>
  26. 26. Sample config file <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://mobile.yahoo.com/widgets/schema/1.0/config/” xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/config/&quot;> </li></ul><ul><li><title>HelloWorld Example</title> </li></ul><ul><li><version>1.0</version> </li></ul><ul><li><identifier>helloworld-example-rv</identifier> </li></ul><ul><li><description>A Hello World Widget.</description> </li></ul><ul><li><icon>icon</icon> </li></ul><ul><li><author organization=&quot;Yahoo!&quot; href=&quot;http://www.yahoo.com&quot;>Ricardo Varela</author> </li></ul><ul><li><widget base=&quot;http://phobeo.com/hacks/yahoowidgets/hellowidget&quot;> </li></ul><ul><li><preview> </li></ul><ul><li><icon>icon</icon> </li></ul><ul><li><label>Hello world!</label> </li></ul><ul><li></preview> </li></ul><ul><li><shortcuts> </li></ul><ul><li><item default=&quot;true&quot;> </li></ul><ul><li><label>Main</label> </li></ul><ul><li><href>helloworld.php</href> </li></ul><ul><li></item> </li></ul><ul><li></shortcuts> </li></ul><ul><li></widget> </li></ul><ul><li></config> </li></ul>
  27. 27. Sample gallery file <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><gallery xmlns=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot; </li></ul><ul><li>xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance“ </li></ul><ul><li>xsi:schemaLocation=&quot;http://mobile.yahoo.com/widgets/schema/1.0/gallery/ http://mobile.yahoo.com/widgets/schema/1.0/gallery/&quot;> </li></ul><ul><li><description lang=&quot;en&quot;>A simple hello world widget for testing</description> </li></ul><ul><li><tags> </li></ul><ul><li><tag>hello</tag> </li></ul><ul><li><tag>world</tag> </li></ul><ul><li><tag>example</tag> </li></ul><ul><li></tags> </li></ul><ul><li></gallery> </li></ul>
  28. 28. Images <ul><li>Best results: upload them </li></ul><ul><li>Must supply multiple sizes </li></ul><ul><ul><li><name>_<width>x<height>.<extension> </li></ul></ul><ul><li>Just reference by name </li></ul><ul><ul><li><image reference=&quot;icon&quot; size=&quot;small&quot;/> </li></ul></ul><ul><li>Fill-styles only work on uploaded images </li></ul>
  29. 29. Server code <ul><li>Create the php files in your server </li></ul><ul><li>Pointed from config </li></ul><ul><li>Notes: </li></ul><ul><ul><li>Remember to set content type ( application/x-ywidget+xml or application/x-ysnippet+xml) </li></ul></ul>
  30. 30. Server code (ii) <ul><li>Can be static… </li></ul><ul><li><page> </li></ul><ul><li><content> </li></ul><ul><li><section> </li></ul><ul><li><module> </li></ul><ul><li><header layout=&quot;simple&quot;> </li></ul><ul><li><layout-items> </li></ul><ul><li> <block class=&quot;title&quot;>Blueprint XML</block> </layout-items> </li></ul><ul><li></header> </li></ul><ul><li><block>Hello World!</block> </module></section> </content></page> </li></ul>
  31. 31. Server code (iii) <ul><li>Or use blueprint php library… </li></ul><ul><li>(not pasted, see code) </li></ul>
  32. 32. The result
  33. 33. And now… it’s up to you!
  34. 34. Note: Work in progress! <ul><li>… really, we feel your pain… </li></ul><ul><li>For more help: </li></ul><ul><ul><li>Dev Guide </li></ul></ul><ul><ul><li>Developers Group </li></ul></ul><ul><ul><ul><li>http:// tech.groups.yahoo.com/group/yhoomobiledevelopers </li></ul></ul></ul>
  35. 35. Thanks! Ricardo Varela [email_address]

×