Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Blueprint talk at Open Hackday London 2009

3.535 Aufrufe

Veröffentlicht am

the blueprint presentation at yahoo hackday london 2009

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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