Blueprint talk at Open Hackday London 2009

Simplifying
Mobile Development
with
Yahoo! Blueprint

Ricardo Varela
ricardov@yahoo‐inc.com

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

The age of mobile is nigh!

•  We’ve been hearing about this
for looong Lme
•  Why��should it be any diﬀerent?
‐ Data is cheap(er)
‐ ApplicaLon stores are hot topic
‐ Mobile is cool!

© david malcolmson @ redbubble

3

So… quick! Let’s make some money out of this!

•  Buzzwords do so much damage
to the world
•  “Write once, run anywhere”

© geekologie

4

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

<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

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

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)

All we need to do is…

• Start from a template (samples included)
‐ Modify conﬁg, add images..
• Implement server‐side code
‐ Test on browser!
• Submit test via DevCenter:
hFp://mobile.yahoo.com/devcenter/manage
• When ready, publish it
• Proﬁt!

Some details about the pieces…

• Submission package
‐ Includes conﬁg ﬁles, 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

How did you say it works?

Widget
engine
html HTML blueprint

renderer

blueprint

Your server

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‐showtraﬃc>false</map‐showtraﬃc>
  <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

Using exisLng controls: video

•  Video encoding for 40+ diﬀerent 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

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

Or many others…

•  Full list at
hFp://developer.yahoo.com/mobile/blueprint/
BP_Container_Hierarchy.html

tables

Naviga1on bar
Image list
direc1ons

Some examples

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

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

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

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

So… let’s get started!

21

Blueprint talk at Open Hackday London 2009

More Related Content

Blueprint talk at Open Hackday London 2009