simplifying mobile development with yahoo! blueprint ricardo varela [email protected]

Click here to load reader

Post on 30-Dec-2015




0 download

Embed Size (px)


  • Simplifying Mobile Developmentwith Yahoo! Blueprint

    Ricardo [email protected]

  • Mmmm what is this Blueprint thing?Blueprint is Yahoos platform for mobile developmentSo we can convert this: into this:

    Shameless plug: *

  • The age of mobile is nigh!Weve been hearing about this for looong timeWhy should it be any different?Data is cheap(er)Application stores are hot topicMobile is cool!* david malcolmson @ redbubble

  • So quick! Lets make some money out of this!Buzzwords do so much damage to the worldWrite once, run anywhere* geekologie

  • Hallo device quirks!OperaMini does not understand some CSS selectorsBlackberries do not understand most CSS anywayMotorola V3 has an 8K page limitSome Nokias won't show tables unless you specify a doctypeA Sidekick browser canvas width loses about 20 the doctype is an XHTML typeSamsungs/Sharps tend to have a strange understanding of what 100% width isPocket Internet Explorer need I say more?*

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

  • Blueprint is simple*

    Greeting Hello World!

  • Even for some more complex things*

  • So, how do I build my app?Get SDK 2 code facets:Submission package (to register the app in Yahoo)Server code (lives in your own server)

  • All we need to do isStart from a template (samples included)Modify config, add images..Implement server-side codeTest on browser!Submit test via DevCenter: ready, publish itProfit!

  • Some details about the piecesSubmission packageIncludes config files, images and metainformationImagesBest results: upload themMust supply multiple sizes (_x.)Just reference by name ()Server codeRemember to set content type application/x-blueprint+xml

  • How did you say it works?HTMLrendererWidget engineYour server htmlblueprintblueprint

  • Using existing controls: mapsUsing the Yahoo Maps product*

    37.3919 -122.0302 6 map false 37.392916 -122.033934 810 Del Rey Ave Sunnyvale CA ...

  • Using existing controls: videoVideo encoding for 40+ different mobile formats*

    Crazy Ping Pong

  • Using existing controls: locationUses Yahoo geolocation for enhanced resultsAutomatic positioning via GPS or cell ID on supported devices and environments.*

    Where are you?

  • Or many othersFull list at

    Navigation barImage listtablesdirections

  • Some examplesKraft recipe search http://m.kraftfoods.comFinnish bus information http://m.fynbus.infoSlideshare mobile

  • And if you are more curiousMay be useful to check the server headersCheck for a list of informationSome cache control headers still apply

  • Think mobileMobile is not just a smaller screenInformation where you need itThings you can only do nowInstant communicationGamingSportsBoldly go where nobody has gone before! (as it turns out we havent gone to many places)


  • And if I need more?Find our tools at docs at forum at And of course, our own selves somewhere around the hacking area (close to the pizza)


  • So lets get started!*