Quick Yahoo! Blueprint Tutorial


Published on

Presentation about Yahoo! Blueprint, the mobile platform, for developers to understand the development process. The presentation was given at Mobile Monday Silicon Valley @ Yahoo!, Sunnyvale, CA on December 1st, 2008.

Published in: Technology
1 Comment
  • hey there,could you please mail this across to me,it will truly assist me for my work.thank you really much.
    http://winkhealth.com http://financewink.com
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Quick Yahoo! Blueprint Tutorial

  1. BLUEPRINT Quick Development Tutorial Mobile Monday Silicon Valley @ Yahoo!, December 1 Markus Spiering
  2. I want to build stuff. Today. • Platform Overview • Blueprint Language Concept • Steps to (Widget-) Success BLUEPRINT
  3. BLUEPRINT the mobile platform Yahoo! Blueprint Apps 3rd Party Blueprint Apps Blueprint language specification Infrastructure Runtimes SDK Gallery Yahoo! Go Developer Tools Monetization Mobile Apps Reference Analytics Mobile Sites Tutorials
  4. Blueprint Language: What’s that exactly? XML mark-up language, based on X-Forms No scripting or procedural code Provides rich mobile core features and services EASY! BLUEPRINT
  5. Blueprint XML: Create a Page! Creating a simple “Hello World” mobile application with Blueprint XML is as easy as: <page> <content> <module> <header layout=quot;simplequot;> <layout-items> <block class=quot;titlequot;>MoMo @ Y!</block> </layout-items> </header> <block>Hello World!</block> </module> </content> </page> BLUEPRINT
  6. Blueprint XML: Create a nicer Page! Use Placards to enhance your design with pre-defined layouts using block elements and images <page> <content> <module> <header layout=quot;simplequot;> <layout-items> <block class=quot;titlequot;>MoMo @ Y!</block> </layout-items> </header> <placard layout=quot;cardquot;> <layout-items> <image resource=quot;...blueprint.pngquot; /> <block>Hello World!</block> <block class=quot;subtextquot;> Blueprint @ MoMo </block> </layout-items> </placard> </module> </content> </page> BLUEPRINT
  7. Blueprint XML: Create a Map! Even complex controls like a mobile map can be easily defined in Blueprint XML. <map> <center> <latitude>37.3919</latitude> <longitude>-122.0302</longitude> </center> <map-zoom>6</map-zoom> <map-mode>map</map-mode> <map-showtraffic>false</map-showtraffic> <map-point> <location> <latitude>37.392916</latitude> <longitude>-122.033934</longitude> <street>810 Del Rey Ave</street> <city>Sunnyvale</city> <state>CA</state> <zip></zip> </location> </map-point> </map> BLUEPRINT
  8. Blueprint Control: Location Blueprint makes it easy to create location-based services by providing the user’s location to the developer/publisher. <location-chooser ref=quot;originquot;> <label>From:</label> </location-chooser> <location-chooser ref=quot;destinationquot;> <label>To:</label> </location-chooser> Locations can be retrieved by manual input from the user or automatically, via GPS or cell- tower data, on platforms and devices that support these services. BLUEPRINT
  9. Creating Blueprint Services: What do I need? Any web-server Use any scripting language Use any existing publishing tools Return Blueprint! BLUEPRINT
  10. Building Mobile Widget 1 Download the Blueprint SDK BLUEPRINT
  11. Building Mobile Widget 1 Download the Blueprint SDK Blueprint SDK includes • Blueprint Documentation • XML Schema definitions • Templates to get started • Mobile Widget Sample Code • PHP helper class (blueprint.php) BLUEPRINT
  12. Building Mobile Widget 2 Develop your Widget Widget Request HTTP Request Yahoo! Server Widget Content Blueprint (XML) Your 2. Create static/ Web Server dynamic pages to return Widget Blueprint Submission 2 3. Create your application Application package and Package submit 3 BLUEPRINT
  13. Building Mobile Widget Data flow Mobile Phone Yahoo! Server Your Server Request entry point User opens HTTP request to Widget publisher Widget URI specified in config.xml Includes language and location headers Blueprint page returned Includes Content-Type header; may include cache-control headers; may include cookies for Widget publisher (Cookies stored on Yahoo! Widget content returned server) User requests new data Request new content HTTP request … BLUEPRINT
  14. Building Mobile Widget Interfacing with Yahoo! Servers Content Type for Blueprint Services: Content-Type: application/x-ywidget+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 Yahoo! servers 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 BLUEPRINT
  15. Building Mobile Widget Interfacing with Yahoo! Servers Internationalization and Localization: When Yahoo! Mobile application server sends a page request, the request may contain several HTTP headers, including: Accept-Language RFC 4646/4647 language code (Example: Accept-Language: en-US) Geo-Country ISO 3166 country or UN M.49 region code (Example: Geo-Country: CA) You can use the information in the headers to decide what content to return. BLUEPRINT
  16. Building Mobile Widget 3 Package your Widget 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) BLUEPRINT
  17. Building Mobile Widget 4 Upload your mobile Widget • http://mobile.yahoo.com/developers/test/upload • Package the widget files into a zip archive • Upload the .zip file BLUEPRINT
  18. Building Mobile Widget 5 Test your mobile Widget 1. Yahoo! Go Emulator: http://mobile.yahoo.com/go/tryit (Note: External links won’t work) 2. Web Browser http://devtest.m.yahoo.com (Note: GPS and cell-ID won’t work on desktop browser) BLUEPRINT
  19. Building Mobile Widget 6 Publish your mobile Widget • http://mobile.yahoo.com/developers/submit/upload • Please test your widget before publishing • It may take 1 week for the approval process BLUEPRINT
  20. Widgets Development Process Summary 1 Download the Blueprint SDK 2 Develop your Widget 3 Package your Widget 4 Upload your mobile Widget 5 Test your mobile Widget 6 Publish your mobile Widget BLUEPRINT
  21. Get Numbers: Blueprint Analytics The new Yahoo! Blueprint Analytics page uses a Flash module to display the following data: unique devices, page views, average page views per unique device. Each item is available on a daily, weekly, and monthly basis as well for all supported regions worldwide. Blueprint Analytics is available from the Developer’s Dashboard page at: http://mobile.yahoo.com/developers/manage. BLUEPRINT
  22. Links & Support Get the SDK • Download the SDK http://mobile.yahoo.com/developers/download Get Help! • Yahoo! Tech Group http://tech.groups.yahoo.com/group/yhoomobiledevelopers • Read the Blueprint Blog http://mobile.yahoo.net/developer/blog BLUEPRINT