Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela

Mmmm… what is this Blueprint thing? Blueprint is Yahoo’s platform for mobile development So we can convert this: into this: Shameless plug: 2

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! 3 © david 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 <block class="title">Greeting Hello World!

Even for some more complex things 8 <submission method="post" resource="..." /> Gas Finder Find the lowest gas prices in your neighborhood. <location-chooser ref="search_location"> Location: Find Gas Stations

So, how do I build my app? Get SDK - shttp://mobile.yahoo.com/developer s 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: nagehttp://mobile.yahoo.com/devcenter/ma nage 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 ( _ x. ) - Just reference by name ( ) Server code -Remember to set content type application/x-blueprint+xml

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

Using existing controls: maps Using the Yahoo Maps product map false Del Rey Ave Sunnyvale CA...

Using existing controls: video Video encoding for 40+ different mobile formats 14 Crazy Ping Pong

Using existing controls: location Uses Yahoo geolocation for enhanced results Automatic positioning via GPS or cell ID on supported devices and environments. 15 Where are you?

Or many others… Full list at chy.html chy.html Navigation bar Image list tables directions

Some examples Kraft recipe search Finnish bus information Slideshare mobile

And if you are more curious… May be useful to check the server headers -Check m/mobile/blueprint/BP_HT TP_Headers.html for a list of information m/mobile/blueprint/BP_HT TP_Headers.html -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) 19

And if I need more? Find our tools at rs rs Our docs at e/blueprint/ e/blueprint/ YDN forum at index.php?showforum=94 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