the blueprint presentation at yahoo hackday london 2009

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

2. Mmmm… what is this Blueprint thing?
• Blueprint is Yahoo’s plaAorm for mobile development
• So we can convert this: into this:
• Shameless plug: hFp://new.m.yahoo.com
2

3. The age of mobile is nigh!
• We’ve been hearing about this
for looong Lme
• Why should it be any different?
‐ Data is cheap(er)
‐ ApplicaLon stores are hot topic
‐ Mobile is cool!
© david malcolmson @ redbubble
3

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

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
<page>
<content>
<module>
<header layout=quot;simplequot;>
<layout‐items>
<block
class=quot;Ltlequot;>GreeLng</block>
</layout‐items>
</header>
<block>Hello World!</block>
</module>
</content>
</page>
7

8. Even for some more complex things
<page>
<models>
<model> <content>
<instance> <module>
<locaLon‐data xmlns=quot;quot;> <block>Find the lowest
<search_locaLon /> gas prices in your
</locaLon‐data> neighborhood.</block>
</instance> <locaLon‐chooser
<submission method=quot;postquot; ref=quot;search_locaLonquot;>
resource=quot;...quot; /> <label>LocaLon:</label>
</model> </locaLon‐chooser>
</models> <submit>
<page‐header> <label>Find Gas
<masthead> StaLons</label>
<layout‐items> </submit>
<block class=quot;Ltlequot;>Gas </module>
Finder</block> </content>
</layout‐items> </page>
</masthead>
</page‐header>
8

9. So, how do I build my app?
• Get SDK
‐ hFp://mobile.yahoo.com/
developers
• 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:
hFp://mobile.yahoo.com/devcenter/manage
• When ready, publish it
• Profit!

11. Some details about the pieces…
• Submission package
‐ Includes config files, images and
metainformaLon
• Images
‐ Best results: upload them
‐ Must supply mulLple sizes
(<name>_<width>x<height>.<extension>)
‐ Just reference by name (<image
reference=quot;iconquot; size=quot;smallquot;/>)
• Server code
‐ Remember to set content type
applicaLon/x‐blueprint+xml

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

13. Using exisLng controls: maps
• Using the Yahoo Maps product
<map>
<center>
<laLtude>37.3919</laLtude>
<longitude>‐122.0302</longitude>
</center>
<map‐zoom>6</map‐zoom>
<map‐mode>map</map‐mode>
<map‐showtraffic>false</map‐showtraffic>
<map‐point>
<locaLon>
<laLtude>37.392916</laLtude>
<longitude>‐122.033934</longitude>
<street>810 Del Rey Ave</street>
<city>Sunnyvale</city>
<state>CA</state>
<zip></zip>
</locaLon>
<placard layout=quot;simplequot;>
...
</placard>
</map‐point>
</map>
13

14. Using exisLng controls: video
• Video encoding for 40+ different mobile formats
<placard layout=quot;simplequot;>
<layout‐items>
<image resource=quot;PingPongSLllquot; />
<block class=quot;Ltlequot;>Crazy Ping Pong</block>
</layout‐items>
<play‐video event=quot;acLvatequot; resource=quot;hFp://video.yahoo.com/
watch/53710/694558quot; />
</placard>
14

15. Using exisLng controls: locaLon
• Uses Yahoo geolocaLon for enhanced results
• AutomaLc posiLoning via GPS or cell ID on supported devices and
environments.
<locaLon‐chooser>
<label>Where are you?</label>
</locaLon‐chooser>
15

16. Or many others…
• Full list at
hFp://developer.yahoo.com/mobile/blueprint/
BP_Container_Hierarchy.html
tables
Naviga1on bar
Image list
direc1ons

17. Some examples
• Kraz recipe search hFp://m.krazfoods.com
• Finnish bus informaLon hFp://m.fynbus.info
• Slideshare mobile hFp://m.slideshare.com

18. And if you are more curious…
• May be useful to check
the server headers
‐ Check
hFp://
developer.yahoo.com/
mobile/blueprint/
BP_HTTP_Headers.html for
a list of informaLon
‐ Some cache control headers
sLll apply

19. Think mobile
• Mobile is not just a smaller screen
• InformaLon where you need it
• Things you can only do now
• Instant communicaLon
• 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
hFp://mobile.yahoo.com/
developers
• Our docs at
hFp://developer.yahoo.com/
mobile/blueprint/
• YDN forum at
hFp://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