8/22/10

1

WebTechnologies

Presen5ngInforma5on

WhyWebTechnologies?

•  Presenta5onoffindingsinaninterac5veway– Anima5onwith,e.g.,Flash– Graphicaluserinterfacewith,e.g.,TclTk– DynamicWebpageswith,e.g.,JavaScript–  Interac5vitywithXML,e.g.KMLforGoogleEarthandSVGinbrowser

Ourchoiceoftopicsisnotmeanttoimplyendorsementofthisapproachoverothers

Alterna5veModeofPresenta5on

•  Growingdemandforinterac5vepresenta5onsofdata

•  Example:GapMinder,where5memovedfromthex‐axistothe5medomain,i.e.anima5on

•  Publicexpectsdatatobepresentedinawaythattheycaninteractwith

•  Opportunitytobringresearchintothepublicforum

Examples

•  GoogleEarthpresenta5onofanalysisofelephantsealjourney

•  SVGinterac5veplotingeo‐loca5onanalysis•  Interac5veWebpage–Communica5onbetweenSVGplotandGoogleEarthembeddedinWebpageforpresen5ngearthquakedata

8/22/10

2

XMLConcepts

•  Declara5velanguage,ratherthanprocedural– Describewhattheprogramshouldaccomplish,ratherthanhowtogoaboutaccomplishingit.

•  Separatecontentfromform– Separatewhatitis,e.g.sec5on,fromhowtodisplay/formatit

•  Structurehierarchical– Basicunit–element,node,chunk– Neededforsignifyingnes5ng

XML

•  XMLisameta‐languagefacilityfordefiningmarkuplanguages

•  Frameworkforsupplyingmeta‐informa5ontodata– Elementsaredelimitedbytags– Tagsopenandclosetheelements–e.g.<coordinates>‐122.08,37.42,0</coordinates>

– Aaributessupplyaddi5onalinforma5onabouttheelement,e.g.<Cubecurrency="CZK”>

ExamplesofXMLgrammars

•  KML–keyholeMarkupLanguage:geographicannota5onandvisualiza5ononInternet‐basedmapsand3Dearthbrowsers

•  DocBook–seman5cmarkuplanguagefortechnicalpublica5ons

•  docx,xlsxandpptx–XML‐basedformatsforofficesuite

•  SGML,CSML,SDMX,…

Well‐formedXML

•  Elements–startwithanopentag<para>andendwithaclosingtag</para>

•  Documentmusthaveonerootelement

•  Tagnamesarecasesensi5ve

•  Aaributevaluesmustappearinquotes

•  Restric5onsontagnames

8/22/10

3

Pros

•  Standardtoolscanbeusedtoparse•  Highlyextensible–addyourownelementstoagrammar

•  Easilymachinegeneratedandplaintext

•  Separatescontentfromform

•  Supportscomplexdatastructures

Cons

•  Tendstobeveryverbose•  Unforgivingformat

GoogleEarth‐elephantsealjourneyWhyKML?

•  AgrammarofXMLinwidespreaduse–e.g.GoogleEarth

•  ProgressionfromHTMLpresenta5onofearlierwork(e.g.deconstruct‐reconstructHW)

•  Buildonunderstandingofatree,e.g.filesystem,listsinR

•  KMLasanalterna5velanguage

8/22/10

4

Introduc5ontoKMLforstudents

•  Basicconcepts•  Shortsetoftags•  KMLtutorial–leaveittothestudentstofillinthedetails–  hap://code.google.com/apis/kml/documenta5on/kml_tut.html

–  hap://code.google.com/apis/kml/documenta5on/kmlreference.html

KML‐Placemark

ThePlacemarkelementisoneofthemostcommonlyusedfeatures.Itmarksaposi5onontheEarth'ssurface.

ThesimplestPlacemarkincludesonlya<Point>element,whichspecifiestheloca5onofthePlacemark.

PlacemarkExample

<Placemark><name>Simpleplacemark</name><descrip5on>Aaachedtotheground.Placesitselfattheheightoftheterrain.

</descrip5on><Point><coordinates>‐122.08,37.42,0</coordinates></Point>

</Placemark>

OtherKMLno5ons

•  Groundoverlay:The<GroundOverlay>drapesanimageontotheEarth'sterrain

•  Path:madewith<LineString>,achildof<Placemark>

•  Polygon:the<Polygon>tagisalsoachildof<Placemark>

•  Styles:<LineStyle>forpathsand<IconStyle>forpoints.Allarechildrenof<Style>

8/22/10

5

CreateKMLprogramma5cally

kml=newXMLNode("kml")

doc=newXMLNode("Document",parent=kml)

newXMLNode("name","GCpath",parent=doc)

pm=newXMLNode("Placemark",parent=doc)style=newXMLNode("Style",parent=pm)

lsty=newXMLNode("LineStyle",parent=style)

…

saveXML(kml,"~/Documents/greatCircle.kml")

Nearest‐Neighboringeo‐loca5on

WhyScalableVectorGraphics(SVG)?

•  XMLformatfordescribing2‐Dgraphicaldisplays•  Supportsinterac5vity,anima5on,andfiltersforspecialeffects

•  Vector‐basedsystemthatdescribesanimageasaseriesofgeometricshapes.(notrasterbasedthatusespixels)

•  Shapesinfinitelyscalablebecauseofvectordescrip5ons

•  ManycommonlyusedWebbrowserssupportSVG•  CanbeincludedinHTMLandPDF•  RhasanSVGgraphicsdevice

FeaturesofSVG

•  Roottag:<svg>•  Basicshapesareprovidedvia:<line>,<rect>,<circle>,<ellipse>,and<polygon>

•  <path>tagprovidestheinforma5onneededtodrawacurve

•  Aaributessupportmouseevents,e.g.onmouseover=”Javascriptcall”

•  Supportsanima5on

8/22/10

6

Interac5veWebpage–100yearsofEarthquakes WhyJavaScript?

•  Interac5vityinthebrowser•  Op5mizedforuseinthebrowser•  Widelyused•  Exposuretoadifferentlanguage– Objectorientedreference‐basedlanguage– Asynchronous,event‐drivenprogramming

•  Studentswillnotconfuseitasanalterna5vetoRbecauseitisforadifferentpurpose

•  Interpretedscrip5nglanguage

Interac5vity

•  UsedinHTMLtorespondtouserac5onsonbuaons,menus,checkboxes,etc.inHTMLforms–  in‐linewithin<script>elementswithinHTML/SVG

– valueofaaributesofHTMLorSVGelement

•  Candynamicallyandprogramma5callyconstructHTMLandSVG

Computa5onalmodel

•  SimilartoC++,PythonandJavainitscomputa5onalmodel.

•  Muchofitsusefocusesonclassesandinstances(objects)oftheseclassesandtheirmethods

•  Notavectorizedlanguage•  Requiresvariablestobedeclaredwithinthescopeinwhichtheyareused

8/22/10

7

Syntax

•  Executablestatementsendwithasemicolon•  Variablesaredeclaredviathevarprefix

varglobal=1;•  CurlybracesgroupJavaScriptstatementstogetherintoexecutableblocksif(x<2){...}elseif(x>2&&x<10){...}else...

(ControlflowandcomparisonoperatorsaresimilartoR)

Variables

•  Supportsarrays,includingmul5‐dimensional,raggedarrays– uses0‐basedindexingforarrays– e.g.expressionx[1][0]returnsthefirstelementinthesecondarray

•  equalsign(=)istheassignmentoperator.– x+=yisequivalenttotheassignmentx=x+y–  ‐=,*=,and/=aresimilarlydefined.

JavaScriptfunc5ons

•  func5onsaredefinedusingthekeywordfunc5onasaprefixtothedefini5onasin

func5onfunc5onName(var1,var2,...,varN)

{

body‐code

}

BenefitstoStudent

•  Opportunityforstudentstoprac5ce“learninghowtolearn”– Givethemabriefintroduc5ontothetechnicalsubjectandthenletthemloosetolearnaboutit

–  Mustfigureouthowtocombinemodernmethods,visualiza5on,programminginanew,modernvenue

•  Learnprac5caltoolsthatcanbeusedinrealse~ngs

8/22/10

8

BenefitstoStudent

•  Studentscanshowcasetheirwork,e.g.createpor�oliooftheirprojects,whichcanhelpthemgetjobs

•  Inthefuture,whenintheworkforce,ourstudentswillspendalotoftheir5mepreparingdataforpresenta5on(asopposedtoapplyingmethodstodata)

Plus…

•  Itisalotoffunforthestudents•  Studentsgettobecrea5ve•  Capstonetostudents’workinthecourse

HansRosling’smusings•  Weshouldworkonbeingasexportableandimportableaspossible•  Innovatetheinterface–e.g.useanima5ontocommunicate5me•  Sharinginforma5ondoesnotleadtounderstanding•  EachstatdepartmentshouldhaveastableURLforbeststudent

work•  Needtoputpeopletogetherintoteams:code,stats,design•  Needtoputstudentsinaposi5ontoinnovateandcommunicate–

tellastory•  Keepon‐linetoolsexplora5ve,don’tmakeaweakanaly5ctool,use

Rinstead•  Risgreatbutifyouwanttoteachthebroadcommunity,useFlash

andputontheWeb(unfortunatelycan’tbeimportedintoppt)•  Createacompe55onforbestvideopresenta5onofinforma5on•  2‐typesofvideowatchers:lean‐forwardanddigdeepervslean

backward,pushbuaononceandsipalaae.Don’tjustdevelopforthefirstkindofwatcher