Your SlideShare is downloading. ×
0
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Yahoo Mobile Widgets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yahoo Mobile Widgets

1,311

Published on

Yahoo widgets are written in blueprint, a new xforms based language that allows you to write your mobile app once and get the best possible experience in any device.

Yahoo widgets are written in blueprint, a new xforms based language that allows you to write your mobile app once and get the best possible experience in any device.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,311
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Mobile Widgets Jose Palazon Mobile Engineer
  2. Where do I start <ul><li>I want to develop a mobile app. Where do I start? </li></ul><ul><li>Problems </li></ul><ul><ul><li>Screen resolution and sizes </li></ul></ul><ul><ul><li>OS and SDKs </li></ul></ul><ul><ul><li>M emory </li></ul></ul>
  3. Diversity
  4. Write once, best everywhere!
  5. What is blueprint? <ul><li>T h e name of the platform </li></ul><ul><li>The name of the language </li></ul><ul><li>You write your apps once in blueprint </li></ul><ul><li>The platform will make them work in as much devices as possible. </li></ul><ul><li>Widgets and snippets. </li></ul>
  6. Blueprint guidelines <ul><li>Takes care of UI and interaction </li></ul><ul><li>You can concentrate on features </li></ul><ul><li>Create complex elements easily (maps, pagination, …) </li></ul><ul><li>Choose the best possible experience for each handset </li></ul><ul><li>No extra effort on your side </li></ul>
  7. Maximum Fidelity <ul><li>Run everywhere we can.. </li></ul>
  8. 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>
  9. Widgets <ul><li>Have their own set of pages </li></ul><ul><li>Accessed from carousel </li></ul>
  10. Carousel
  11. Display structure
  12. 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>
  13. Rich set of controls available Navigation bar Image list tables Maps & directions location
  14. Display controls <ul><li>Blocks, placards, image lists, data input (simple, multiline, passwd)… </li></ul><ul><li>Complex elements: maps, driving directions, pagination … </li></ul><ul><li>Complete spec document in SDK </li></ul>
  15. Best everywhere
  16. Widget examples
  17. A more complex example: location-based mashup
  18. Detail view of event + map linking to map widget
  19. HTML version: detail view of photo + map
  20. Parts of a widgets <ul><li>Part 1: resides on Y! Servers: </li></ul><ul><ul><li>C onfig.xml </li></ul></ul><ul><ul><li>G allery.xml </li></ul></ul><ul><ul><li>R esources/images </li></ul></ul><ul><li>Part 2: resides on public Server: </li></ul><ul><ul><li>Server side code generates your BP </li></ul></ul>
  21. How it works? (HTML) HTML renderer Widget engine Your server html BP
  22. What’s in the SDK <ul><li>Templates for creating your apps. </li></ul><ul><li>Code samples </li></ul><ul><li>A php helper class </li></ul><ul><li>XML Schemas for validation </li></ul><ul><li>The blueprint specification guide </li></ul><ul><li>Readme and release notes </li></ul>
  23. A note on Images <ul><li>Automatic handling of different sizes </li></ul><ul><li>Naming convention makes it work </li></ul><ul><ul><li><name>_<width>x<height>.<extension> </li></ul></ul><ul><li>Just reference by identifier </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><ul><li>Check the manual for screen/size optimal sizes. </li></ul>
  24. Server code <ul><li>Use your preferred technology. Just output bluepirnt. </li></ul><ul><li>Content type </li></ul><ul><ul><li>application/x-ywidget+xml </li></ul></ul><ul><ul><li>application/x-ysnippet+xml </li></ul></ul><ul><li>Cache-control : no-cache </li></ul>
  25. C onfig.xml <?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;> <title>YDN Widget</title> <version>1.0</version> <identifier>ydn-widget-1</identifier> <description>YDN Widget</description> <icon>ybang</icon> <author organization=&quot;Yahoo!&quot; href=&quot;http://developer.yahoo.com&quot; email= [email_address] >Jose Palazon</author> <!-- change this widget base to your server url --> <widget base=&quot;http://www.noletia.com/ydn&quot;> <preview> <icon>ybang</icon> <label>YDN Widget</label> </preview> <shortcuts> <item default=&quot;true&quot;> <label>YDN Widget</label> <href>index.php</href> </item> </shortcuts> </widget> </config>
  26. Server side code <?php header( &quot;Content-Type: application/x-ywidget+xml&quot; ); header( &quot;Cache-Control: no-cache&quot; );   $xsl = &quot;ydn.xsl&quot;; $xml = &quot;http://developer.yahoo.com/blog/index.xml&quot;; $xslt = new XSLTProcessor(); $xslt->importStyleSheet(DOMDocument::load($xsl)); echo ($xslt->transformToXML(DOMDocument::load($xml))); ?>
  27. Server side code <?xml version=&quot;1.0&quot; encoding=&quot;ISO-8859-1&quot;?> <xsl:stylesheet version=&quot;1.0&quot; xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot;> <xsl:output method=&quot;xml&quot; encoding=&quot;utf-8&quot; doctype-public=&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; doctype-system= http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd indent=&quot;yes&quot;/>   <xsl:template match='//channel'> <page> <content> <section> <header layout=&quot;simple&quot;> <layout-items> <block class=&quot;title&quot;>YDN Widget</block> </layout-items> </header> </section> <xsl:apply-templates select=&quot;item&quot; /> </content> </page> </xsl:template> <xsl:template match=&quot;item&quot;> <placard layout=&quot;card&quot; class=&quot;link&quot;> <layout-items> <image resource=&quot;ybang&quot;/> <block class=&quot;title&quot;><xsl:value-of select=&quot;title&quot;/></block> <block class=&quot;description&quot;><xsl:value-of select=&quot;pubDate&quot;/></block> <block class=&quot;subtext&quot;><xsl:value-of select=&quot;category&quot;/></block> </layout-items> <load resource=&quot;{link}&quot; event=&quot;activate&quot;/> </placard> </xsl:template> </xsl:stylesheet>
  28. Step 4: test your server code <ul><li>Go to your server url in the browser </li></ul><ul><li>Force content-type firefox extension </li></ul><ul><ul><li>F rom: application/x-ywidget+xml </li></ul></ul><ul><ul><li>to: application/xhtml+xml </li></ul></ul>
  29. Submit your widget to Yahoo! <ul><li>Zip xml files and resources </li></ul><ul><li>Use a browser to go to: </li></ul><ul><ul><li>http://mobile.yahoo.com/developers/test/upload </li></ul></ul><ul><li>Go to beta.m.yahoo.com </li></ul><ul><li>Test! </li></ul>
  30. And it looks like this
  31. Note: Work in progress! <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>
  32. Questions? Jose Palazon [email_address]

×