• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tw Open Hack Blueprint

Tw Open Hack Blueprint






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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

    Tw Open Hack Blueprint Tw Open Hack Blueprint Presentation Transcript

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