Blueprint talk at Open Hackday London 2009

3,352 views
3,279 views

Published on

the blueprint presentation at yahoo hackday london 2009

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,352
On SlideShare
0
From Embeds
0
Number of Embeds
1,618
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Blueprint talk at Open Hackday London 2009

  1. 1. Simplifying Mobile Development with Yahoo! Blueprint  Ricardo Varela  ricardov@yahoo‐inc.com  
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. How did you say it works?  Widget engine  html  HTML blueprint  renderer blueprint  Your server
  13. 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. 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. 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. 16. Or many others…  •  Full list at  hFp://developer.yahoo.com/mobile/blueprint/ BP_Container_Hierarchy.html  tables  Naviga1on bar  Image list  direc1ons 
  17. 17. Some examples  • Kraz recipe search hFp://m.krazfoods.com  • Finnish bus informaLon hFp://m.fynbus.info  • Slideshare mobile hFp://m.slideshare.com 
  18. 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. 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. 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. 21. So… let’s get started!  21 

×