Creating Yahoo Mobile Widgets

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    4 Favorites

    Creating Yahoo Mobile Widgets - Presentation Transcript

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

    + Ricardo VarelaRicardo Varela, 2 years ago

    custom

    3729 views, 4 favs, 3 embeds more stats

    Slides for the class on creating Yahoo Mobile Widge more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3729
      • 3544 on SlideShare
      • 185 from embeds
    • Comments 0
    • Favorites 4
    • Downloads 0
    Most viewed embeds
    • 127 views on http://overtheair.org
    • 57 views on http://phobeo.com
    • 1 views on http://66.102.9.104

    more

    All embeds
    • 127 views on http://overtheair.org
    • 57 views on http://phobeo.com
    • 1 views on http://66.102.9.104

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories