1. Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

2. 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.comhttp://new.m.yahoo.com 2

3. 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 malcolmson @ redbubble

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

5. 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

6. 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

7. Blueprint is simple 7 <block class="title">Greeting Hello World!

8. 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

9. So, how do I build my app? Get SDK -http://mobile.yahoo.com/developer 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)

10. 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/ma nagehttp://mobile.yahoo.com/devcenter/ma nage When ready, publish it Profit!

11. 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

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

13. Using existing controls: maps Using the Yahoo Maps product 13 37.3919 -122.0302 6 map false 37.392916 -122.033934 810 Del Rey Ave Sunnyvale CA...

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

15. 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?

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

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

18. And if you are more curious… May be useful to check the server headers -Check http://developer.yahoo.co m/mobile/blueprint/BP_HT TP_Headers.html for a list of information http://developer.yahoo.co m/mobile/blueprint/BP_HT TP_Headers.html -Some cache control headers still apply

19. 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

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

21. So… let’s get started! 21