simplifying mobile development with yahoo! blueprint ricardo varela [email protected]...

21
Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela [email protected]

Upload: buck-matthews

Post on 30-Dec-2015

231 views

Category:

Documents


0 download

TRANSCRIPT

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

Simplifying Mobile Development

with Yahoo! Blueprint

Ricardo [email protected]

Page 2: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 3: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 4: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

• Buzzwords do so much damage to the world

• “Write once, run anywhere”

4

© geekologie

Page 5: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 6: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 7: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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>

Page 8: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

Even for some more complex things

8

Page 9: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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)

Page 10: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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!

Page 11: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 12: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

How did you say it works?

HTMLrenderer

Widget engine

Your server

html blueprint

blueprint

Page 13: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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>

Page 14: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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>

Page 15: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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>

Page 16: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

Or many others…

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

Navigation barImage list

tables

directions

Page 17: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

Some examples

• Kraft recipe search http://m.kraftfoods.com• Finnish bus information http://m.fynbus.info• Slideshare mobile http://m.slideshare.com

Page 18: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.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

Page 19: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 20: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

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

Page 21: Simplifying Mobile Development with Yahoo! Blueprint Ricardo Varela ricardov@yahoo-inc.com ricardov@yahoo-inc.com

So… let’s get started!

21