BLUEPRINT
Quick Development Tutorial
Mobile Monday Silicon Valley @ Yahoo!, December 1
Markus Spiering

I want to build stuff. Today.
• Platform Overview
• Blueprint Language Concept
• Steps to (Widget-) Success
BLUEPRINT

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

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

Blueprint XML: Create a Page!
Creating a simple “Hello World” mobile application with Blueprint XML is as easy as:
<page>
<content>
<module>
<header layout=\"simple\">
<layout-items>
<block class=\"title\">MoMo @ Y!</block>
</layout-items>
</header>
<block>Hello World!</block>
</module>
</content>
</page>
BLUEPRINT

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=\"simple\">
<layout-items>
<block class=\"title\">MoMo @ Y!</block>
</layout-items>
</header>
<placard layout=\"card\">
<layout-items>
<image resource=\"...blueprint.png\" />
<block>Hello World!</block>
<block class=\"subtext\">
Blueprint @ MoMo
</block>
</layout-items>
</placard>
</module>
</content>
</page>
BLUEPRINT

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

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=\"origin\">
<label>From:</label>
</location-chooser>
<location-chooser ref=\"destination\">
<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

Creating Blueprint Services: What do I need?
Any web-server
Use any scripting language
Use any existing publishing tools
Return Blueprint!
BLUEPRINT

Building Mobile Widget
1 Download the Blueprint SDK
BLUEPRINT

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

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

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

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

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

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

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

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

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

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

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

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