Post on 20-Jan-2015
description
transcript
Chris&anHeilmann‐YDNDeveloperEvening,Oslo,Norway‐December2009
Thingsyoucanuse...providedbytheYahooDeveloperNetwork
andfriends.
Webdevelopmentisconfusingenoughasitis.
Thereisnoneedtomakeitharderbynotusingwhathasbeendoneforus.
Today,IamgoingtoshowyousomethingsthatyoucanuseimmediatelytobuildfasterandbeIerwebproducts.
Quicklyaboutme:
hIp://developer‐evangelism.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