Lecture 2: Internet/WWWThe Design of HTML Simple, purist design principles HTML describes the...

logoonly

Multimedia

Lecture 2: Internet/WWW

Anders Ardö

EIT – Electrical and Information Technology, Lund University

September 12, 2013

A. Ardö, EIT Lecture 2: Internet/WWW September 12, 2013 1 / 43

logoonly

Multimedia

Kurshemsida

http://www.eit.lth.se/kurs/edt632

http://www.eit.lth.se/kurs/eeia01


logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia

7 Privacy, Filter bubble


logoonly

Multimedia

World Wide Web - WWW

Tim Berners Lee – inventor of WWW1989 – proposed a global hypertext spaceany information on the network referred to by a single UniversalDocument Identifier (UDI)

Three constituents: HTML + URL + HTTPHTML is a SGML based mark-up language for hypertextURL is an notation for locating files on serves(++)HTTP is a high-level protocol for file transfers(++)

1994 – World Wide Web Consortium (W3C)a neutral forum for new standards and protocols


logoonly

Multimedia

Uniform Resource Locator - URL

A Web resource is located by a URL

http://www.w3.org/TR/html4/def.htmlprotocol server path

Optionally a port on the server (default 80)

http://www.w3.org:5234/TR/html4/def.htmlport

Relative URLssgml/dtd.htmlFragment identifierhttp://www.w3.org/TR/HTML4/def.html#minitoc

protocol : // server[: port

]/ path [? fboxparameters]

[# fragment

]A. Ardö, EIT Lecture 2: Internet/WWW September 12, 2013 5 / 43

logoonly

Multimedia

Hyper Text Transfer Protocol - HTTP

communication between a browserand a Web serverHTTP uses TCPclient-server model

1 Client (browser): type a URL - click2 Server-part of the URL is converted to an IP address3 TCP connection is made via port 80 – the default port for HTTP4 Client sends the HTTP request to the server5 Server handles request (generate content)6 HTTP response (including content) is sent by the server7 TCP connection is closed (v1.0)8 Content rendered on screen by browser

Statelessv1.0 - RFC 1945v1.1 - RFC 2616


logoonly

Multimedia

Static vs Dynamic Pages

Static - just copy a file from server to clientDynamic - do some data processing

Parameters - Forms


logoonly

Multimedia

The Design of HTML

Simple, purist design principlesHTML describes the logical structure of a documentBrowsers are free to interpret tags differentlyHTML is a lightweight file formatSize of file containing just ”Hello World!”:

Postscript 11274 bytesPDF 4915 bytesMS Word 19456 bytesHTML 28 bytes

HTML 4.01 - http://www.w3.org/TR/html401/ (Recommendation)HTML5 - http://www.w3.org/TR/html5/ (Draft)


logoonly

Multimedia

Cascading Style Sheets (CSS)

main idea: separate presentation from contentallow enhancement of Web pages which would not be possiblewith HTML only

manipulate text, add background images, colors, boxes, borders,margins in an easy waypositioning and layout

in HTML either through natural flow or by tablesin CSS precise control either relatively or to absolute pixel precision


logoonly

Multimedia

Lecture 2 agenda

ReadW3Schools: “Semantic Web Tutorial”

http://www.w3schools.com/semweb/default.aspA. Rodriguez: “RESTful Web services: The basics”

http://www.ibm.com/developerworks/webservices/library/ws-restful/D. Merrill: “Mashups: The new breed of Web app”

http://www.ibm.com/developerworks/xml/library/x-mashups.html1 Reiteration2 Introduction XML3 Semantic Web4 Web services5 Mashups6 Multimedia7 Privacy, Filter bubble

A. Ardö, EIT Lecture 2: Internet/WWWSeptember 12, 2013 10 /

43

logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia



43

logoonly

Multimedia

Publication citation

Example from EITK. Golub, T. Hamon, A. Ardö: Automated Classification of TextualDocuments Based on a Controlled Vocabulary in EngineeringKnowledge Organisation, Vol. 34, No. 4, pp. 247-263, 2007.

Example from LUKoraljka Golub, Thierry Hamon, Anders Ardö Automated Classificationof Textual Documents Based on a Controlled Vocabulary inEngineering Article in journal, Knowledge Organisation, 2007, 34, 4,247-263


43

logoonly

Multimedia

What is what - XML?

K. Golub, T. Hamon, A. Ardö: Automated Classification of TextualDocuments Based on a Controlled Vocabulary in Engineering KnowledgeOrganisation, Vol. 34, No. 4, pp. 247-263, 2007.

<?xml version="1.0" encoding="UTF-8"?><publication>

<Author>Golub, Koraljka</author><author>Ardö, Anders</author><title>Automated Classification of ...</title><journal>Knowledge Organisation</journal><pages> <start>247</start> <end>263</end> </pages>

</publication>

$ xmllint –noout ex1.xmlex1.xml:3: parser error : Opening and ending tag mismatch:

Author line 3 and author<Author>Golub, Koraljka</author>

^A. Ardö, EIT Lecture 2: Internet/WWWSeptember 12, 2013 13 /

43

logoonly

Multimedia

What is what - XML?

K. Golub, T. Hamon, A. Ardö: Automated Classification of TextualDocuments Based on a Controlled Vocabulary in Engineering KnowledgeOrganisation, Vol. 34, No. 4, pp. 247-263, 2007.

<?xml version="1.0" encoding="UTF-8"?><publication><author>Golub, Koraljka</author><author>Ardö, Anders</author><title>Automated Classification of ...</title><journal>Knowledge Organisation</journal><pages><start>247</start><end>263</end></pages>

</publication>

$ xmllint –noout ex2.xml


43

logoonly

Multimedia

XML = Structure - not semantics

Roots in SGMLRules for how (new) markup formats can be definedLots of standard toolsStructure informationNothing about layoutJust a tool - useful for computers!Semantics in the application profileeXtensible Markup LanguageGoogle: “About 1,440,000,000 results”


43

logoonly

Multimedia

Tagging

Only one root-elementOpen/close tag <book>...</book>

Tree structuredMust be correctly balanced - well formed

WRONG <title>What is <author>Anders</title></author>CORRECT<title>What is <author>Anders</author></title>

Size mattersDifferent elements

<title>What is</title><Title>Where is</Title>

Element can have attributes:<author role="primary">Anders</author><journal vol="34" no="4">Knowledge Organisation</journal>


43

logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia



43

logoonly

Multimedia

Semantic Web

The Semantic Web = a Web with a meaning

The Semantic Web is a web that is able to describe things in away that computers can understand.The Semantic Web is not about links between web pages.The Semantic Web describes the relationships between things(RDF)To use the semantic web, we will need "Semantic Web Agents" or"Semantic Web Services".


43

logoonly

Multimedia

Semantic Web example

at working lunch: go to San Francisco for customerSemantic Web agent:book a non-stop flight to San Franciscoaisle seat if it’s available.assign the charges to customerinfo: missing a dentist appointment back homeadds a note to your calendar reminding you to reschedule.car service to the client’s site - bookbooks you at your favorite hotel in San Franciscoupdates your calendar and your manager’s calendar


43

logoonly

Multimedia

Linked data

publishing structured datainterlinked and more useful

Identification: HTTP URIsInformation about: RDF/XMLRelationships: links to related items

Example “Linking Open Data”:goal: build a data commons

making various open data sources availableon the Web as RDFsetting RDF links between data items

http://linkeddata.org/


43

logoonly

Multimedia

Linking Open Data cloud diagram,

by Richard Cyganiak and Anja Jentzsch. http://lod-cloud.net/”


43

logoonly

Multimedia

Semantic Web - a reality?

Not now :-(

But RDF and RSSand Linked Data is!

Read:T. Berners-Lee, “Long Live the Web: A Call forContinued Open Standards and Neutrality”, ScientificAmerican, November 22, 2010.http://www.scientificamerican.com/article.cfm?id=long-live-the-web


43

logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia



43

logoonly

Multimedia

What is a Web Service?

Web Service: “software that makes services available on a networkusing technologies such as XML and HTTP”

Service-Oriented Architecture (SOA): “development of applicationsfrom distributed collections of smaller loosely coupledservice providers”


43

logoonly

Multimedia

What do We Need?

We already know how torepresent information with XMLcommunicate with HTTP

Fault toleranceIntermediariesRPCInterface descriptionsLocating services


43

logoonly

Multimedia

Web Service Standards

SOAP – a transport neutral protocol for XML data interchange (butfocusing on HTTP)WSDL – description of Web service interfacesUDDI – registries and discovery of Web servicesREST - Representational State Transfer


43

logoonly

Multimedia

REST - Representational State Transfer

client/serversimpleuse HTTP (and other protocols)use HTTP methods explicitly

To create a resource on the server, use POST.To retrieve a resource, use GET.To change the state of a resource or to update it, use PUT.To remove or delete a resource, use DELETE.

statelessexpose directory structure-like URIstransfer XML, JavaScript Object Notation (JSON), or bothpredominant model


43

logoonly

Multimedia

REST - Example

Create a new user:

POST /users HTTP/1.1Host: myserverContent-Type: application/xml

<?xml version="1.0"?><user>

<name>Robert</name></user>

Retrieve information about a user:

GET /users/Robert HTTP/1.1Host: myserverAccept: application/xml


43

logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia



43

logoonly

Multimedia

Mashups

combine data from several sources to create new servicesmain characteristics

combinationvisualizationaggregation

examples:http://dev.benedictoneill.com/bbc/http://www.germtrax.com/map.aspxhttp://roadskillmap.com/http://monarchs.johnbeales.com/

Directory: http://www.programmableweb.com/mashups/directory


43

logoonly

Multimedia

Mashup architecture

ParticipantsContent provider(s)Mashup siteClient Web browser

Server sideCGI, PHP, ASP, Java servlets,Client sideclient side scripting (JavaScript)... or both


43

logoonly

Multimedia

Mashup server side


43

logoonly

Multimedia

Mashup client side


43

logoonly

Multimedia

JavaScript

What is JavaScript?

a interpreted programming language.widely used and supportedsimple and easy to useembedded in the HTMLrun by the browser

JavaScript use

add multimedia elementscreate pages dynamicallyvalidate user input in forms


43

logoonly

Multimedia

JavaScript example

<head><script>function dispDate(){document.getElementById("demo").innerHTML=Date();}</script>

</head><body><h1>My First JavaScript</h1><p id="demo">This is a paragraph.</p><button type="button"

onclick="dispDate()">Display Date</button></body>


43

logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia



43

logoonly

Multimedia

Multimedia

Images<img src="me.jpg" width="800" height="640".../>

Sound (html5)<audio controls="controls"><source src="car.mp3" type="audio/mp3" />Your browser does not support the audio tag.</audio>

Video (html5)<video width="320" height="240" controls="controls"><source src="train.mp4" type="video/mp4" />Your browser does not support the video tag.</video>


43

logoonly

Multimedia

Outline

1 Reiteration

2 Introduction XML

3 Semantic Web

4 Web services

5 Mashups

6 Multimedia



43

logoonly

Multimedia

Filter bubble

What do search engines or social sites know about me?At least location, search history, click history, likes, and more . . .Personalize whats shown (search results, . . . ) using this infoShow us what we want/like to see - algorithmically. . . and not whats relevant (who decides that?)

Problem?


43

logoonly

Multimedia

Filter bubble example I

From http://www.thefilterbubble.com/what-is-the-internet-hiding-lets-find-out


43

logoonly

Multimedia

Filter bubble example II

From http://www.thefilterbubble.com/what-is-the-internet-hiding-lets-find-out


43

logoonly

Multimedia

ToS-DR

Terms-of-Service – Didn’t Read; http://tos-dr.info/

you give Google (and those we work with) a worldwide license touse, host, store, reproduce, modify, create derivative works (suchas those resulting from translations, adaptations or other changeswe make so that your content works better with our Services),communicate, publish, publicly perform, publicly display anddistribute such content.Facebook: you grant us a non-exclusive, transferable,sub-licensable, royalty-free, worldwide license to use any IPcontent that you post on or in connection with Facebook (IPLicense).


43

logoonly

Multimedia

Privacy

Search history, clicks, photos, documents, comments, . . .leads to a profilethat can be used by ads or sold, or even stolenwhich might lead to it ending up in unwanted placesand used against you

Beware!För att inte tala om NSA ...


43

Date post:	17-Apr-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times