Chris&anHeilmann‐YDNDeveloperEvening,Oslo,Norway‐December2009

Thingsyoucanuse...providedbytheYahooDeveloperNetwork

andfriends.

Webdevelopmentisconfusingenoughasitis.

Thereisnoneedtomakeitharderbynotusingwhathasbeendoneforus.

Today,IamgoingtoshowyousomethingsthatyoucanuseimmediatelytobuildfasterandbeIerwebproducts.

Quicklyaboutme:

hIp://developer‐evangelism.com

Quicklyaboutme:hIp://developer.yahoo.com

Learningthebasics

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/

Nomorecopy&pasteandtrialanderror.

Star&ngwithacleancanvas.

hIp://developer.yahoo.com/yui/ar&cles/gbs/

Websitesarenotmeanttolookandworkthesameeverywhere.

Onthecontrary‐theabilitytoaccustomtheinterfacetodifferentuseragentsiswhatmakeswebdevelopmentsopowerful.

CSSframeworksandfrontendlibraries

(...)

Librariesmakeourjobpredictableandallowustousewebstandardswithoutcateringforbrowsers.

Ifyoubuildyourcodebasedonlibrariesyoucanfixyourproductforthenextbrowserbyupgradingthelibrary.

Ifyouchoosetodoeverythingyourself‐goodluck.

Buildinginterfacesthatwork

hIp://developer.yahoo.com/ypaIerns

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

Usingtheweb.

CMS

Thinkingdatafirst.

ThecomplexityofyourproductincreaseswiththenumberofAPIsyouuse.

EveryAPIhasdifferentwaystoauthen&cate,expectsdifferentparametersandreturnsdataindifferentformats.

MixingthewebwithYQL

2)Selectyouroutput

3)CopytheURL.

1)DefineyourQuery

FindLondon.

select*fromgeo.placeswheretext="london,uk"

DefineLondonandgetphotostakenthere.

select*fromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="london")

Getalltheinforma&onaboutthesephotos.

select*fromflickr.photos.infowherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="london"))

Getonlywhatweneed.

selectfarm,id,secret,owner.realname,server,&tle,urls.url.contentfromflickr.photos.infowherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="london"))

SelectformatJSON,defineacallbackandcopyandpastetheURL.

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

CopyintoascriptsrcandwriteafewlinesofDomScrip&ng.

PROFIT!

hIp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html

IsthisYahooonly?

Anydataonthewebwilldo.

select*from

atomcsvfeedhtmljsonmicroformatsrssxml

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

Anydataonthewebwilldo.

hIp://isithackday.com/hacks/scraping‐with‐yql/

YoucanalsoaddyourowndatabyprovidingasimpleXMLschemacalledanopentable.

hIp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html

MovingJavaScripttotheserverside.

YQLopentablescanhaveembeddedJSthatrunsontheYQLserver(withRhino)andsupportsXMLna&velywithE4X..

hIp://developer.yahoo.com/yql/guide/yql‐execute‐chapter.html

FlickrphotosasULs

select*fromflickr.photolistwheretext="me"andloca&on="uk"andamount=20

DisplaywithJavaScript

DisplaywithPHP

Joinus!hIp://github.com/yql/yql‐tables

Documenta&onhIp://developer.yahoo.com/yql/

Buildingwithblocks.

http://developer.yahoo.com/yui/grids/builder/

BuildaCSSlayoutthatworks.

http://isithackday.com/hacks/cantine/index.php?loc=covent+garden

hIp://isithackday.com/hacks/can&ne/

Usealreadyexis&ngwidgets.

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

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

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

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

Wannagetsuperfamous?

YAPistheplalormhIp://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

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

YahooMarkupLanguage

YMLTags

yml:nameyml:profile‐picyml:pronounyml:shareyml:swfyml:user‐badge

yml:ayml:adyml:audioyml:formyml:friend‐selectoryml:if‐envyml:message

BuildingaforminYML.scripttocall elementtoreplace

AverysimpleAPIontopofYQL

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

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

YUI is the system that Yahoo uses to build itswebsites.It isconstantlytestedtoworkforthelargest amount of users, free, open source andcoverseverythingfromdesignpaIernstoout‐of‐the‐boxwidgets. It ismodularand you can useonly what you need. You can either host ityourself or get it fromanetwork ofdistributedservers.

YUIinanutshell...

YQLisawebservicethatallowsyoutomash‐upanydataonthewebfromvarioussourceswithasimple SQL‐style language. You can filter thedata down to what you need and you canconvert the data with server‐side JavaScriptbefore returning it. Data providers can use YQLtopublishanAPIon thewebon topofYahoo’sinfrastructureandcloudstorage.

YQLinanutshell

YAP is the Yahoo Applica&on Plalorm whichallowsyou tobuildapplica&onsthat runon theYahoohomepageandsoonotherproper&es.Youcan dive into Yahoo’s social graph to promoteyour applica&ons and you can create highlysecurewebappsasYAPusesCajatoensurecodequality.

YAPinanutshell

...andIamspent!

Christian Heilmann

http://wait-till-i.com

http://developer-evangelism.com

http://twitter.com/codepo8