• Save
Yahoo Mobile Widgets
Upcoming SlideShare
Loading in...5

Yahoo Mobile Widgets



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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 24

http://cencouriusband.yolasite.com 23
http://sitebuilder.yola.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Yahoo Mobile Widgets Yahoo Mobile Widgets Presentation Transcript

    • Mobile Widgets Jose Palazon Mobile Engineer
    • Where do I start
      • I want to develop a mobile app. Where do I start?
      • Problems
        • Screen resolution and sizes
        • OS and SDKs
        • M emory
    • Diversity
    • Write once, best everywhere!
    • What is blueprint?
      • T h e name of the platform
      • The name of the language
      • You write your apps once in blueprint
      • The platform will make them work in as much devices as possible.
      • Widgets and snippets.
    • Blueprint guidelines
      • Takes care of UI and interaction
      • You can concentrate on features
      • Create complex elements easily (maps, pagination, …)
      • Choose the best possible experience for each handset
      • No extra effort on your side
    • Maximum Fidelity
      • Run everywhere we can..
    • Snippets
      • Live in the mobile home page
      • Have 2 views:
        • normal
        • Extended [opt]
    • Widgets
      • Have their own set of pages
      • Accessed from carousel
    • Carousel
    • Display structure
    • 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>
    • Rich set of controls available Navigation bar Image list tables Maps & directions location
    • Display controls
      • Blocks, placards, image lists, data input (simple, multiline, passwd)…
      • Complex elements: maps, driving directions, pagination …
      • Complete spec document in SDK
    • Best everywhere
    • Widget examples
    • A more complex example: location-based mashup
    • Detail view of event + map linking to map widget
    • HTML version: detail view of photo + map
    • Parts of a widgets
      • Part 1: resides on Y! Servers:
        • C onfig.xml
        • G allery.xml
        • R esources/images
      • Part 2: resides on public Server:
        • Server side code generates your BP
    • How it works? (HTML) HTML renderer Widget engine Your server html BP
    • What’s in the SDK
      • Templates for creating your apps.
      • Code samples
      • A php helper class
      • XML Schemas for validation
      • The blueprint specification guide
      • Readme and release notes
    • A note on Images
      • Automatic handling of different sizes
      • Naming convention makes it work
        • <name>_<width>x<height>.<extension>
      • Just reference by identifier
        • <image reference=&quot;icon&quot; size=&quot;small&quot;/>
      • Fill-styles only work on uploaded images
      • Check the manual for screen/size optimal sizes.
    • Server code
      • Use your preferred technology. Just output bluepirnt.
      • Content type
        • application/x-ywidget+xml
        • application/x-ysnippet+xml
      • Cache-control : no-cache
    • 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>
    • 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))); ?>
    • 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>
    • Step 4: test your server code
      • Go to your server url in the browser
      • Force content-type firefox extension
        • F rom: application/x-ywidget+xml
        • to: application/xhtml+xml
    • Submit your widget to Yahoo!
      • Zip xml files and resources
      • Use a browser to go to:
        • http://mobile.yahoo.com/developers/test/upload
      • Go to beta.m.yahoo.com
      • Test!
    • And it looks like this
    • Note: Work in progress!
      • For more help:
        • Dev Guide
        • Developers Group
          • http://tech.groups.yahoo.com/group/yhoomobiledevelopers
    • Questions? Jose Palazon [email_address]