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.com
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 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="title">Greeting</block> </layout-items> </header> <block>Hello World!</block> </module> </content></page>
Even for some more complex things
8
So, how do I build my app?
• Get SDK- http://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:http://mobile.yahoo.com/devcenter/manage
• 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
(<name>_<width>x<height>.<extension>)
-Just reference by name (<image reference="icon" size="small"/>)
• Server code- Remember to set content type
application/x-blueprint+xml
How did you say it works?
HTMLrenderer
Widget engine
Your server
html blueprint
blueprint
Using existing controls: maps
• Using the Yahoo Maps product
13
<map> <center> <latitude>37.3919</latitude> <longitude>-122.0302</longitude> </center> <map-zoom>6</map-zoom> <map-mode>map</map-mode> <map-showtraffic>false</map-showtraffic> <map-point> <location> <latitude>37.392916</latitude> <longitude>-122.033934</longitude> <street>810 Del Rey Ave</street> <city>Sunnyvale</city> <state>CA</state> <zip></zip> </location> <placard layout="simple"> ... </placard> </map-point></map>
Using existing controls: video
• Video encoding for 40+ different mobile formats
14
<placard layout="simple"> <layout-items> <image resource="PingPongStill" /> <block class="title">Crazy Ping Pong</block> </layout-items> <play-video event="activate"
resource="http://video.yahoo.com/watch/53710/694558" /></placard>
Using existing controls: location
• Uses Yahoo geolocation for enhanced results
• Automatic positioning via GPS or cell ID on supported devices and environments.
15
<location-chooser> <label>Where are you?</label></location-chooser>
Or many others…
• Full list at http://developer.yahoo.com/mobile/blueprint/BP_Container_Hierarchy.html
Navigation barImage list
tables
directions
Some examples
• Kraft recipe search http://m.kraftfoods.com• Finnish bus information http://m.fynbus.info• Slideshare mobile http://m.slideshare.com
And if you are more curious…
• May be useful to check the server headers
-Check http://developer.yahoo.com/mobile/blueprint/BP_HTTP_Headers.html for a list of information
-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 http://mobile.yahoo.com/developers
• Our 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)
20
So… let’s get started!
21