Simplifying Mobile Development with Yahoo! Blueprint

Simplifying Mobile Developmentwith Yahoo! BlueprintRicardo Varelaricardov@yahoo-inc.com

Mmmm… what is this Blueprint thing? • Blueprint is Yahoo’s platform for mobile development • So we can convert this: into this: • Shameless plug: http://new.m.yahoo.com

The age of mobile is nigh! • We’ve been hearing about this for looong time • Why should it be any different? • Data is cheap(er) • Application stores are hot topic • Mobile is cool! © david malcolmson @ redbubble

So… quick! Let’s make some money out of this! • Buzzwords do so much damage to the world • “Write once, run anywhere” © geekologie

Hallo device quirks! • 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?

Enter Blueprint • Blueprint is an XML markup language, based on W3C XForms, that allows us to quickly create mobile websites that adapt across devices • Blueprint abstracts the developer from the device details and allows us to concentrate on the task at hand • You can generate Blueprint with your favourite web framework (PHP, Java, Python, Ruby, LOLCode,…)

Blueprint is simple <page> <content> <module> <header layout="simple"> <layout-items> <block class="title">Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </content> </page>

Even for some more complex things <page> <models> <model> <instance> <location-data xmlns=""> <search_location /> </location-data> </instance> <submission method="post" resource="..." /> </model> </models> <page-header> <masthead> <layout-items> <block class="title">Gas Finder</block> </layout-items> </masthead> </page-header> <content> <module> <block>Find the lowest gas prices in your neighborhood.</block> <location-chooser ref="search_location"> <label>Location:</label> </location-chooser> <submit> <label>Find Gas Stations</label> </submit> </module> </content> </page>

So, how do I build my app? • Get SDK • http://mobile.yahoo.com/developers • Generate 2 code “facets”: • Submission package (to register the app in Yahoo) • Server code(lives in your own server)

All we need to do is… • Start from a template (samples included) • Modify config, add images.. • Implement server-side code • Test on browser! • Submit test via DevCenter:http://mobile.yahoo.com/devcenter/manage • When ready, publish it • Profit!

Some details about the pieces… • Submission package • Includes config files, images and metainformation • Images • Best results: upload them • Must supply multiple sizes (<name>_<width>x<height>.<extension>) • Just reference by name (<image reference="icon" size="small"/>) • Server code • Remember to set content type application/x-blueprint+xml

How did you say it works? Widget engine HTML renderer html blueprint blueprint Your server

Using existing controls: maps • Using the Yahoo Maps product <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> <placard layout="simple"> ... </placard> </map-point> </map>

Using existing controls: video • Video encoding for 40+ different mobile formats <placard layout="simple"> <layout-items> <image resource="PingPongStill" /> <block class="title">Crazy Ping Pong</block> </layout-items> <play-video event="activate" resource="http://video.yahoo.com/watch/53710/694558" /> </placard>

Using existing controls: location • Uses Yahoo geolocation for enhanced results • Automatic positioning via GPS or cell ID on supported devices and environments. <location-chooser> <label>Where are you?</label> </location-chooser>

Or many others… • Full list at http://developer.yahoo.com/mobile/blueprint/BP_Container_Hierarchy.html tables Navigation bar Image list directions

Some examples • Kraft recipe search http://m.kraftfoods.com • Finnish bus information http://m.fynbus.info • Slideshare mobile http://m.slideshare.com

And if you are more curious… • May be useful to check the server headers • Check http://developer.yahoo.com/mobile/blueprint/BP_HTTP_Headers.html for a list of information • Some cache control headers still apply

Think mobile • Mobile is not just a smaller screen • Information where you need it • Things you can only do now • Instant communication • Gaming • Sports • Boldly go where nobody has gone before! (as it turns out we haven’t gone to many places)

And if I need more? • Find our tools at http://mobile.yahoo.com/developers • Our docs at http://developer.yahoo.com/mobile/blueprint/ • YDN forum at http://developer.yahoo.net/forum/index.php?showforum=94 • And of course, our own selves somewhere around the hacking area (close to the pizza)

So… let’s get started!

Simplifying Mobile Development with Yahoo! Blueprint