Things you can use (by the Yahoo Developer Network and friends)

Things you can use ...provided by the Yahoo Developer Network  and friends. Chris&an Heilmann ‐ YDN Developer Evening, Oslo, Norway  ‐ December 2009

Web development is  confusing enough as it is.

There is no need to make it  harder by not using what has  been done for us.

Today, I am going to show  you some things that you can  use immediately to build  faster and beIer web  products.

Quickly about me:

hIp://developer‐evangelism.com

hIp://developer.yahoo.com Quickly about me:

Learning the basics 10 INPUT A$ 20 PRINT A$ 30 PRINT “ROCKS!” 40 GOTO 10

WaSP Interact hIp://interact.webstandards.org/

Opera Web Standards curriculum hIp://www.opera.com/company/educa&on/curriculum/

YDN Theater hIp://developer.yahoo.net/blogs/theater/

No more copy & paste and  trial and error.

Star&ng with a clean canvas. hIp://developer.yahoo.com/yui/ar&cles/gbs/

Web sites are not meant to  look and work the same  everywhere. 

On the contrary ‐ the ability  to accustom the interface to  diﬀerent user agents is what  makes web development so  powerful.

CSS frameworks and frontend  libraries (...)

Libraries make our job  predictable and allow us to  use web standards without  catering for browsers.

If you build your code based  on libraries you can ﬁx your  product for the next browser  by upgrading the library.

If you choose to do  everything yourself ‐ good  luck. 

Building interfaces that work

hIp://developer.yahoo.com/ypaIerns

hIp://developer.yahoo.com/ypaIerns/wireframes/

Using the web. CMS

Thinking data ﬁrst.

The complexity of your  product increases with the  number of APIs you use. 

Every API has different ways  to authen&cate, expects  different parameters and  returns data in different  formats.

Mixing the web with YQL 1) Deﬁne your Query 3) Copy the URL. 2) Select your output

Find London. select * from geo.places where  text="london,uk"

Deﬁne London and get photos taken  there. select * from ﬂickr.photos.search  where woe_id in (   select woeid from geo.places   where text="london" )

Get all the informa&on about these  photos. select * from ﬂickr.photos.info  where photo_id in (select id from  ﬂickr.photos.search where woe_id  in (select woeid from geo.places  where text="london"))

Get only what we need. select  farm, id, secret,owner.realname, server,  &tle,urls.url.content  from ﬂickr.photos.info where photo_id in( select id from ﬂickr.photos.search where woe_id  in (select woeid from geo.places where  text="london"))

Select format JSON, define a  callback and copy and paste the  URL. hIp://query.yahooapis.com/v1/public/yql?q=select%20* %20from%20flickr.photos.info%20where%20photo_id %20in%20(select%20id%20from%20flickr.photos.search %20where%20woe_id%20in%20(select%20woeid %20from%20geo.places%20where%20text%3D%22london %22))&format=json&diagnos&cs=false&env=store%3A %2F%2Fdatatables.org %2Falltableswithkeys&callback=flickr

Copy into a script src and write a  few lines of Dom Scrip&ng.

PROFIT! hIp://isithackday.com/hacks/ajaxexperience/ﬂickrgeophotos.html

Is this Yahoo only?

Any data on the web will do. atom csv feed select * from html json microformats rss xml

http://www.dcs.gla.ac.uk/~joy/fun/jokes/TV.html

Any data on the web will do. hIp://isithackday.com/hacks/scraping‐with‐yql/

You can also add your own  data by providing a simple  XML schema called an open  table. hIp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html

Moving JavaScript to the  server side.

YQL open tables can have  embedded JS that runs on  the YQL server (with Rhino)  and supports XML na&vely  with E4X.. hIp://developer.yahoo.com/yql/guide/yql‐execute‐chapter.html

Flickr photos as ULs select * from ﬂickr.photolist where  text="me" and loca&on="uk" and  amount=20

Display with JavaScript

Display with PHP

Join us!       hIp://github.com/yql/yql‐tables

Documenta&on      hIp://developer.yahoo.com/yql/

Building with blocks.

Build a CSS layout that works. http://developer.yahoo.com/yui/grids/builder/

Use already exis&ng widgets. http://isithackday.com/hacks/cantine/ index.php?loc=covent+garden hIp://isithackday.com/hacks/can&ne/

hIp://isithackday.com/hacks/delhi/

hIp://developer.yahoo.com/yui/

hIp://developer.yahoo.com/yui/docs/

hIp://developer.yahoo.com/yui/examples/

Wanna get super famous?

YAP is the plalorm hIp://developer.yahoo.com/yap/guide/yap‐overview.html

hIps://developer.apps.yahoo.com/dashboard

hIp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html

Yahoo Markup Language hIp://developer.yahoo.com/yap/guide/yapdev‐yml.html

YML Tags yml:a yml:name yml:ad yml:proﬁle‐pic yml:audio yml:pronoun yml:form yml:share yml:friend‐selector yml:swf yml:if‐env yml:user‐badge   yml:message

Building a form in YML. script to call element to replace

A very simple API on top of  YQL

hIp://yahoo.com/add?yapid=zKMBH94k

hIp://github.com/yahoo/yos‐social‐php

YUI in a nutshell... YUI  is  the  system  that  Yahoo  uses  to  build  its  web sites. It is constantly tested to work for the  largest  amount  of  users,  free,  open  source  and  covers everything from design paIerns to out‐of‐ the‐box  widgets.  It  is  modular  and  you  can  use  only  what  you  need.  You  can  either  host  it  yourself  or  get  it  from  a  network  of  distributed  servers.

YQL in a nutshell YQL is a web service that allows you to mash‐up  any data on the web from various sources with a  simple  SQL‐style  language.  You  can  ﬁlter  the  data  down  to  what  you  need  and  you  can  convert  the  data  with  server‐side  JavaScript  before  returning  it.  Data  providers  can  use  YQL  to  publish  an  API on  the  web on  top  of  Yahoo’s  infrastructure and cloud storage.

YAP in a nutshell YAP  is  the  Yahoo  Applica&on  Plalorm  which  allows  you  to  build  applica&ons that  run  on  the  Yahoo homepage and soon other proper&es. You  can  dive  into  Yahoo’s  social  graph  to  promote  your  applica&ons  and  you  can  create  highly  secure web apps as YAP uses Caja to ensure code  quality.  

... and I am spent!

Christian Heilmann http://wait-till-i.com http://developer-evangelism.com http://twitter.com/codepo8

http://www.wait-till-i.com	225
http://localhost	103
http://christianheilmann.com	79
http://developer.yahoo.net	33
http://myslides.thinkphp.ro	22
http://thinkphp.ro	19
http://icant.co.uk	17
http://developer.yahoo.com	13
http://www.slideshare.net	6
http://www.rssfeedcentral.net	1
http://www.hanrss.com	1
http://feeds2.feedburner.com	1
resource://brief-content	1
http://feeds.feedburner.com	1
http://feeds.developer.yahoo.net	1

Things you can use (by the Yahoo Developer Network and friends)

by Christian Heilmann

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 523

Statistics

Things you can use (by the Yahoo Developer Network and friends) Presentation Transcript