Simplifying Mobile Development

with Yahoo! Blueprint 

Ricardo Varela ricardov@yahoo‐inc.com  

Mmmm… what is this Blueprint thing? 

•  Blueprint is Yahoo’s plaAorm for mobile development 

•  So we can convert this:                  into this: 

•  Shameless plug: hFp://new.m.yahoo.com  

2 

The age of mobile is nigh! 

• We’ve been hearing about this for looong Lme 

• Why should it be any different? ‐ Data is cheap(er) ‐ ApplicaLon stores are hot topic ‐ Mobile is cool! 

3 

© 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” 

4 

© 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? 

5 

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,…) 

6 

Blueprint is simple 

7 

<page>   <content>     <module>       <header layout="simple">         <layout‐items>           <block             class="Ltle">GreeLng</block>         </layout‐items>       </header>       <block>Hello World!</block>     </module>   </content> </page> 

Even for some more complex things 

8 

<page>   <models>     <model>       <instance>         <locaLon‐data xmlns="">           <search_locaLon />         </locaLon‐data>       </instance>       <submission method="post"                  resource="..." />      </model>   </models>   <page‐header>     <masthead>       <layout‐items>         <block class="Ltle">Gas           Finder</block>       </layout‐items>     </masthead>   </page‐header> 

<content>     <module>       <block>Find the lowest        gas prices in your         neighborhood.</block>       <locaLon‐chooser              ref="search_locaLon">         <label>LocaLon:</label>       </locaLon‐chooser>       <submit>         <label>Find Gas                 StaLons</label>       </submit>     </module>   </content> </page> 

So, how do I build my app? 

•  Get SDK ‐ hFp://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:hFp://mobile.yahoo.com/devcenter/manage 

• When ready, publish it 

• Profit! 

Some details about the pieces… 

• Submission package ‐ Includes config files, images and metainformaLon 

• Images ‐ Best results: upload them ‐ Must supply mulLple sizes (<name>_<width>x<height>.<extension>) 

‐ Just reference by name (<image reference="icon" size="small"/>) 

• Server code ‐ Remember to set content type applicaLon/x‐blueprint+xml 

How did you say it works? 

HTML renderer

Widget engine

Your server

 html  blueprint 

blueprint 

Using exisLng controls: maps 

•  Using the Yahoo Maps product 

13 

<map>   <center>     <laLtude>37.3919</laLtude>     <longitude>‐122.0302</longitude>   </center>   <map‐zoom>6</map‐zoom>   <map‐mode>map</map‐mode>   <map‐showtraffic>false</map‐showtraffic>   <map‐point>     <locaLon>       <laLtude>37.392916</laLtude>       <longitude>‐122.033934</longitude>       <street>810 Del Rey Ave</street>       <city>Sunnyvale</city>       <state>CA</state>       <zip></zip>     </locaLon>     <placard layout="simple">       ...     </placard>   </map‐point> </map> 

Using exisLng controls: video 

•  Video encoding for 40+ different mobile formats 

14 

<placard layout="simple">    <layout‐items>       <image resource="PingPongSLll" />       <block class="Ltle">Crazy Ping Pong</block>    </layout‐items>    <play‐video event="acLvate" resource="hFp://video.yahoo.com/

watch/53710/694558" /> </placard> 

Using exisLng controls: locaLon 

•  Uses Yahoo geolocaLon for enhanced results •  AutomaLc posiLoning via GPS or cell ID on supported devices and environments. 

15 

<locaLon‐chooser>   <label>Where are you?</label> </locaLon‐chooser> 

Or many others… 

•  Full list at hFp://developer.yahoo.com/mobile/blueprint/BP_Container_Hierarchy.html 

Naviga1on bar Image list 

tables 

direc1ons 

Some examples 

• Kraz recipe search hFp://m.krazfoods.com 

• Finnish bus informaLon hFp://m.fynbus.info 

• Slideshare mobile hFp://m.slideshare.com 

And if you are more curious… 

• May be useful to check the server headers ‐ Check hFp://developer.yahoo.com/mobile/blueprint/BP_HTTP_Headers.html for a list of informaLon ‐ Some cache control headers sLll apply 

Think mobile 

• Mobile is not just a smaller screen 

•  InformaLon where you need it 

•  Things you can only do now •  Instant communicaLon 

•  Gaming 

•  Sports •  Boldly go where nobody has gone before! (as it turns out we haven’t gone to many places) 

19 

And if I need more? 

•  Find our tools at hFp://mobile.yahoo.com/developers 

•  Our docs at hFp://developer.yahoo.com/mobile/blueprint/ 

•  YDN forum at hFp://developer.yahoo.net/forum/index.php?showforum=94 

•   And of course, our own selves somewhere around the hacking area (close to the pizza) 

20 

So… let’s get started! 

21