simplifying mobile development with yahoo! blueprint ricardo varela [email protected]
Click here to load reader
Post on 30-Dec-2015
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: http://new.m.yahoo.com *
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 SDKhttp://mobile.yahoo.com/developersGenerate 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:http://mobile.yahoo.com/devcenter/manageWhen 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 http://developer.yahoo.com/mobile/blueprint/BP_Container_Hierarchy.html
Navigation barImage listtablesdirections
Some examplesKraft recipe search http://m.kraftfoods.comFinnish bus information http://m.fynbus.infoSlideshare mobile http://m.slideshare.com
And if you are more curiousMay be useful to check the server headersCheck http://developer.yahoo.com/mobile/blueprint/BP_HTTP_Headers.html 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 http://mobile.yahoo.com/developersOur 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 lets get started!*