introduction - web technologies (1019888bnr)

2 December 2005

Web TechnologiesIntroduction

Prof. Beat Signer

Department of Computer Science

Vrije Universiteit Brussel

http://www.beatsigner.com

Beat Signer - Department of Computer Science - [email protected] 2September 30, 2016

Course Organisation

Prof. Beat Signer


10.G.731d

+32 2 629 12 39

[email protected]

www.beatsigner.com

Reinout Roels


10.G.731f

+32 2 629 11 03

[email protected]


Course Organisation …

Lars Van Holsbeeke


G.10.735

[email protected]


Prerequisites

Note that this is an advanced Bachelor level

course and the official course description lists

the following required previous knowledge basic programming skills

basic knowledge in modelling and querying data (e.g. designand use of databases)

It is not impossible to follow the course without these

prerequisites, but in this case you should not complain

about the potential additional workload!


Exercises

The course content is further investigated in

the exercise sessions the topics covered in the exercise sessions will

also be helpful for the assignment

Weekly exercise sessions assistant: Reinout Roels, ([email protected])

2 groups (starting on October 4)

- 6 ECTS version: Tuesday 16:00–18:00 in E.1.02

- 3 ECTS version: Fridays 16:00–18:00 in E.1.02

Additional content may be covered in exercise sessions strongly recommended to attend all exercise sessions!

exam covers content of lectures and exercises


Course Material

All material will be available on PointCarré lecture slides, exercises, research papers, tutorials, ...

Make sure that you are subscribed to the

Web Technologies course on PointCarré https://pointcarre.vub.ac.be/index.php?go=course_viewer&application=application%5Cweblcms&course=15509

Handouts are on PointCarré the day before the lecture slides from the previous year are already available on SlideShare

- http://www.slideshare.net/signer/presentations

Similar information is also available on the WISE website http://wise.vub.ac.be/content/web-technologies


Lecture Schedule (6 ECTS)

Exercise 1: Vannevar Bush Paper & Assignment3

4

5

6

Lecture 2: Web Architectures

Lecture 3: HTML5 and the Open Web Platform

Exercise 2: HTTP

Lecture 4: Web Application Frameworks

No Lecture (work on assignment)

Interim Project Presentations

D.2.20

D.2.20

D.2.20

E.1.02

E.1.02

TBA

7

8

No Exercise

Lecture 1: Introduction2

No Exercise

Exercise 3: HTML E.1.02

D.2.20

Lecture 5: CSS3 and Responsive Web Design

Exercise 4: Java Servlets and Modern Web Application Frameworks

D.2.20

E.1.02

Lecture 6: JavaScript D.2.20


Lecture Schedule (6 ECTS) …

Lecture 7: XML and Related Technologies

Exercise 7: XML and Related Technologies

10

11

12

13

14

Lecture 8: Web 2.0 Patterns and Technologies

Lecture 9: Semantic Web

Exercise 8: AJAX and Google Maps

Lecture 10: Web Search and SEO

Exercise 6: JavaScript and HTML5 APIs

9

Exercise 9: Semantic Web

Lecture 11: Security, Privacy and Trust

Exercise 10: Web Search and Security

Exercise 5: CSS3

Final Project Presentations TBA


E.1.02

E.1.02

E.1.02

E.1.02

E.1.02

E.1.02

D.2.20

D.2.20

D.2.20

D.2.20

D.2.20


Lecture Schedule (3 ECTS)

Exercise 1: Vannevar Bush Paper3

4

5

6

Lecture 2: Web Architectures

Lecture 3: HTML5 and Related APIs

Exercise 2: HTTP

Lecture 4: Web Application Frameworks


No Exercise

D.2.20

D.2.20

D.2.20

E.1.02

E.1.02

7

8

Ecercise 5 CSS3

Lecture 1: Introduction2

No Exercise

Exercise 3: HTML E.1.02

D.2.20

Lecture 5: CSS3 and Responsive Web Design

Exercise 4: Java Servlets and Modern Web Application Frameworks

D.2.20

E.1.02

Lecture 6: JavaScript D.2.20


Lecture Schedule (3 ECTS) …

Lecture 7: XML and Related Technologies

Exercise 7: XML and Related Technologies

10

11

12

13

14

Lecture 8: Web 2.0 Patterns and Technologies

Lecture 9: Semantic Web

Exercise 8: AJAX and Google Maps

Lecture 10: Web Search and SEO

Exercise 6: JavaScript and HTML5 APIs

9

Exercise 9: Semantic Web

Lecture 11: Security, Privacy and Trust

Exercise 10: Web Search and Security

No Exercise


E.1.02

E.1.02

E.1.02

E.1.02

E.1.02

D.2.20

D.2.20

D.2.20

D.2.20

D.2.20


Assignment

Web 2.0 Web Application application about topic of your choice

- a number of functional and technical requirements

- create, view, manage, search and share information

- integration of existing web resources

- map-based interface

- examples: movie application, fitness application, games, ...

Assignment handed out in week 3 group project with 3 students per group

- send an email with the 3 group members to Reinout Roels by Friday,

October 7 ([email protected])

- deadlines: final presentation (week of December 19), report (December 23)

assignment counts for 40% for the final grade (6 ECTS version)

- students have some flexibility in distributing the grades (±2 points)


Exam

Oral exam in English covers content of lectures and exercises

counts 60% for the overall grade

5 mins questions about the assignment

15 mins questions about the course content (no preparation time)

Overall grade = oral exam (60%) + assignment (40%)

Students following the 3 ECTS programme will only have

an oral exam (100%) and no assigment covers content of lectures and exercises

15 mins questions about the course content (no preparation time)


Course Outline

1. Introduction history of the Web

2. Web Architectures HTTP protocol

client-side and server-side processing

multi-tier architectures

3. HTML and Related APIs brief history of HTML

Document Object Model (DOM)

HTML5 and the Open Web Platform


Course Outline …

4. Web Application Frameworks Model-View-Controller (MVC)

client- and server-side frameworks

5. CSS3 and Responsive Web Design

6. JavaScript and jQuery syntax and examples

7. XML and Related Technologies XML, XPointer, XPath, XSLT, XQuery and XLink

8. Web 2.0 Patterns and Technologies Web 2.0 basic terminology and applications

Service-Oriented Architectures (SOAs) and mashups

Rich Internet Applications (RIAs)


Course Outline …

9. Semantic Web and Web 3.0 RDF, RDFs, OWL, SPARQL, …

Linked Data

semantic web applications

10.Web Search and Retrieval search engine architecture

Google PageRank

search engine optimisation (SEO)

11.Security, Privacy and Trust HTTP Authentication

public key cryptography

web logging and user profiling

course review and comments about the exam


Reading Wheel (Bookwheel)

Described by Agostino

Ramelli in 1588

Keep several books open

to read from them at the

same time

comparable to modern

tabbed browsing

The reading wheel has

never really been built

Could be seen as a

predecessor of hypertext


Dewey Decimal Classification (DDC)

Library classification

system

developed by Melvil Dewey

in 1876

Hierarchical classification

10 main classes with

10 divisions each and

10 sections per division

total of 1000 sections

After the three numbers,

decimals can be used for

further subclassification


Dewey Decimal Classification (DDC) ...

Documents can appear in

more than one class

however, there is normally

only one physical copy

(one main class)

Different alternatives

Library of Congress (LC)

classification

Universal Decimal Classifi-

cation (UDC) by Paul Otlet

and Henri La Fontaine


Dewey Decimal Classification (DDC) ...

000-099 Computer Science, Information and General Works000 Computer Science, Knowledge and Systems000 Computer Science, Knowledge and General Works...005 Computer Programming, Programs and Data...009 [Unassigned]

010 Bibliographies...

100-199 Philosophy and Psychology200-299 Religion300-399 Social Sciences340 Law341 International Law

400-499 Language500-599 Science600-699 Technology700-799 Arts800-899 Literature900-999 History, Geography and Biography


"As We May Think" (1945)

When data of any sort are placed in storage,

they are filed alphabetically or numerically,

and information is found (when it is) by

tracing it down from subclass to subclass.

It can be in only one place, unless duplicates

are used; one has to have rules as to which

path will locate it, and the rules are cumbers-

ome. Having found one item, moreover, one

has to emerge from the system and re-enter

on a new path. The human mind does not

work that way. It operates by association. ...

Vannevar Bush


"As We May Think" (1945) …

... It affords an immediate step, however, to

associative indexing, the basic idea of which

is a provision whereby any item may be

caused at will to select immediately and

automatically another. This is the essential

feature of the memex. The process of tying

two items together is the important thing. ...

Vannevar Bush, As We May Think,

Atlanic Monthly, July 1945

Vannevar Bush


"As We May Think" (1945) …

Bush's article As We May

Think (1945) is often seen

as the "origin" of hypertext

The article introduces

the Memex memory extender

store and access information

follow cross-references in the formof associative trails between piecesof information (microfilms)

prototypical hypertext machine

trail blazers are those who find delight inthe task of establishing useful trails

Memex


Scientist of the Future ...


Video: Memex


Hypertext (1965)

Ted Nelson coined the term hypertext

Nelson started Project Xanadu in 1960 first hypertext project

non-sequential writing

referencing/embedding parts of a documentin another document (transclusion) transpointing windows

bidirectional (bivisible) links

version and rights management

XanaduSpace 1.0 was released as part of Project

Xanadu in 2007

OpenXanadu demo/deliverable released in 2014

Ted Nelson


Digital Documents as a Paper Simulator?

Most people don't understand the logic of the

concept: "What You See Is What You Get" is based

on printing the document out ("get" means "get

WHEN YOU PRINT IT OUT"). And that means a

metaphysical shift: a document can only consist of

what can be printed! This re-froze the computer

document into a closed rectangular object which

cannot be penetrated by outside markings (curtailing

what you could do with paper). No marginal notes,

no sticky notes, no crossouts, no insertions, no

overlays, no highlighting - PAPER UNDER GLASS.

Ted Nelson, Geeks Bearing Gifts: How the Computer

World Got This Way, Mindful Press 2009

Ted Nelson


Transpointing Windows Mockup (1972)

[http://www.xanadu.com.au/ted/TN/PARALUNE/paraviz.html]


OpenXanadu (2014)

[http://xanadu.com/xanademos/MoeJusteOrigins.html]


Video: Ted Nelson Explains XanaduSpace


Hypertext Editing System, HES (1967)

Early hypertext system developed at Brown University (1967)

by Andries van Dam and his team

Ted Nelson was a visitor at BrownUniversity a that time

Limitations unidirectional links

non-overlapping links

only embedded links

File Retrieval and Editing System, FRESS (1968) follow-up project taking ideas from HES and NLS

first system introducing 'undo' functionality

bidirectional links


The Mother of All Demos (1968)

Douglas Engelbart and his colleagues

at the Stanford Research Institute

developed the oNLine System (NLS) as

part of the Augment Project vision about the future of interactive computing

NLS was demonstrated at the Fall

Joint Computer Conference in 1968 showed first practical use of hypertext

computer mouse

remote collaboration (connected computers)

raster-scan video monitors

screen windows

...

Douglas Engelbart


NLS Demo


Aspen Moviemap (1978)

Early hypermedia system developed at MIT by Andrew

Lippman and his team

hypermedia = extension of hypertext with other media types (e.g. images, sounds)

Virtual tour of Aspen pictures taken every 10 feet

while driving through the city

additional linked media(e.g. images and sounds)

Similar concept now used

in Google Street View


HyperCard (1987)

One of the early widespread

hypermedia systems

Released by Apple Computer Inc.

(as part of System Software 6) developed by Bill Atkinson

Information is stored in a series of

cards that are arranged into stacks

Links can be defined between different cards

HyperCards may contain text, pictures, audio and video HyperTalk programming language is used to execute commands

and jump to other cards


ARPANET (1969)

Advanced Research

Projects Agency Network created by DARPA

(US Department of Defense)

first operational packetswitching network

first ARPANET link esta-blished in November 1969

ARPANET applications Email (1971), Ray Tomlinson

FTP (1973)

ARPANET Team


ARPANET Map (March 1977)


Worldwide Number of Hostnames

1,285,759,146 hostnames in September 2016, source: http://news.netcraft.com


TCP (1974)

Transmission control protocol replacement of Network Control

Protocol (NCP)

'A Protocol for Packet Network

Interconnection' by Vint Cerf and Bob Kahn

Reliable and ordered

transmission of byte stream

between two endpoints

Migration of ARPANET to TCP/IP in 1982

Vint Cerf Bob Kahn


TCP/IP (1978)

4 abstraction layers each layer offers functionality to the above layer

separation of concerns

Application layer HTTP, FTP, POP, ...

Transport layer TCP, UDP, ...

Internet layer addressing hosts and packet routing

IP, ...

Link layer


TCP/IP Layers

Link

Internet

Transport

Application

Link

Internet

Link

Internet

Transport

Application

Link

Internet

Ethernet EthernetSatellite,

...


World Wide Web (WWW)

Networked hypertext system

(over ARPANET) to share in-

formation at CERN first draft in March 1989

The Information Mine,Information Mesh, …?

Components by end of 1990 HyperText Transfer Protocol (HTTP)

HyperText Markup Language (HTML)

HTTP server software

Web browser called WorldWideWeb

First public "release" in August 1991

Tim Berners-Lee Robert Cailliau


WordWideWeb Browser (1993)


WWW and Hypertext

WWW is mainly a network-enabled version of the

HES hypertext model unidirectional links between heterogeneous resources

is it more than just a digital version of paper documentswith links?

What about all the richer functionality researched by the

hypertext community? bidirectional links

transclusion and external (non-embedded) links

version management

…

Is there something wrong with the WWW?


Mobile Web

HTML markup language is

no longer sufficient

WML, VoiceXML, cHTML, …

New forms of connectivity

and information exchange

P2P networks

New requirements and

functionality

location-based services

Access the Web from

anywhere at anytime


Web 2.0

User becomes an author

and shares information

tagging

Wikis

social networking

mashups

...

Not a new technology!

Why did some of these

things not happen earlier?

limitations of the original

World Wide Web?


Semantic Web (Web 3.0)

Add explicit semantics

to web resources

Machine-interpretable

Web

Use of ontologies

Potential reasoning over

Web resources

Character set: UNICODE

Cry

pto

gra

ph

y

Syntax: XML and XML Namespaces

Data interchange: RDF

Taxonomies: RDFS

Ontologies: OWLQuerying:

SPARQL

Unifying Logic

Trust

User interface and applications

Proof

Rules:RIF/SWRL

Based on [http://en.wikipedia.org/wiki/File:Semantic-web-stack.png]

Identifiers: URI/IRI


Internet of Things

Mark Weiser coined the term Ubiquitous

Computing while working at Xerox PARC M. Weiser, The Computer for the 21st Century,

ACM Mobile Computing and CommunicationsReview, July 1999

Related terms are Disappearing Computing,

Pervasive Computing or Internet of Things

Physical objects with emedded computing functionality

that actively or passively participate in the Web mobile phones, RFID-tagged objects, smart pens, …

Do we have to extend the current web infrastructure?

Mark Weiser


Exercise 1

Read the paper As We May Think by

Vannevar Bush and try to answer the questions

formulated on the exercise sheet

Discuss your answers and the Bush paper with your

teaching assistant and classmates during the exercise

session


References

Web Technologies: A Computer Science

Perspective, Jeffrey C. Jackson, Prentice

Hall, August 2006, ISBN-13: 978-0131856035

Vannevar Bush, As We May Think, Atlanic Monthly,

July 1945 http://www.theatlantic.com/doc/194507/bush/

http://sloan.stanford.edu/MouseSite/Secondary.html

http://www.youtube.com/watch?v=c539cK58ees

Videos of the NLS demo http://sloan.stanford.edu/mousesite/1968Demo.html


References …

Ted Nelson demonstrates Xanadu Space http://www.youtube.com/watch?v=En_2T7KH6RA

Aspen Moviemap http://www.naimark.net/projects/aspen.html

http://www.youtube.com/watch?v=w18MyqszIYc

Networking Technologies (TCP/IP, …) Andrew S. Tanenbaum, Computer Networks,

Prentice Hall 2002, ISBN-13: 978-0130661029

Mark Weiser, The Computer for the 21st Century,

ACM Mobile Computing and Communications

Review, July 1999

2 December 2005

Next LectureWeb Architectures

introduction - web technologies (1019888bnr)

Education