Introduction - Lecture 1 - Web Technologies (1019888BNR)

Web Technologies
Introduction
Prof. Beat Signer
Department of Computer Science

Vrije Universiteit Brussel
beatsigner.com
2 December 2005
Course Organisation
▪ Prof. Dr. Beat Signer
PL9.3.60
+32 2 629 1239
bsigner@vub.be
wise.vub.ac.be/beat-signer
▪ Maxim Van de Wynckel
PL9.3.58
+32 2 629 3487
mvdewync@vub.be
wise.vub.ac.be/maxim-van-de-wynckel
October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
Prerequisites
▪ Note that the 6 ECTS version of this course in 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. design and 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: Maxim Van de Wynckel, (mvdewync@vub.be)
▪ 4 groups (starting on October 4)
- BA (6 ECTS) WPO1: Tuesday 10:00–12:00 in E.1.03
- BA (6 ECTS) WPO2: Monday 08:00–10:00 in E.1.06
- MACS (3 ECTS) WPO1: Monday–Thursday 16:00–18:00 in E.1.02 / E.1.04
- MACS (3 ECTS) WPO2: Friday 16:00–18:00 in E.1.04

Exercises …
▪ Additional content might 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 Canvas
▪ lecture slides, exercises, research papers, tutorials, ...
▪ Make sure that you are subscribed to the
Web Technologies course on Canvas
▪ https://canvas.vub.be/courses/24073
▪ Handouts are on Canvas the day before the lecture

▪ slides from the previous year are already available on
the WISE website
- https://wise.vub.ac.be/course/web-technologies
▪ Web Technologies Discord server

▪ ask questions to fellow students
▪ https://discord.gg/cX4VbM3r

Lecture Schedule (6 ECTS)
Lecture 1: Introduction D.0.07

2
No Exercise
Lecture 2: Web Architectures D.0.07
3
Exercise 1: Vannevar Bush Paper & Project Assignment E.1.03/05
Lecture 3: HTML5 and the Open Web Platform D.0.07
4
Exercise 2: HTTP E.1.03/05
Lecture 4: Web Application Frameworks G.1.023
5
Exercise 3: HTML E.1.03/05
Lecture 5: CSS3 and Responsive Web Design D.0.07
6
Exercise 4: Modern Web Application Frameworks E.1.03/05
Lecture 6: JavaScript and jQuery D.2.23
G.1.023
7
No Exercise E.1.02
Lecture 7: XML and Related Technologies D.0.07
8
Interim Project Presentations E.1.03/05

Lecture Schedule (6 ECTS) …
No Lecture
9
Exercise 5: CSS3 E.1.03/05
Lecture 8: Web 2.0 Patterns and Technologies D.0.07
10
Exercise 6: JavaScript and HTML5 APIs E.1.03/05
Lecture 9: Semantic Web D.0.07
11
Exercise 7: XML and Related Technologies E.1.03/05
Lecture 10: Web Search and SEO D.0.07
12
Exercise 8: AJAX and Leaflet E.1.03/05
Lecture 11: Security, Privacy and Trust D.0.07
13
Exercise 9: Semantic Web E.1.03/05
Lecture 12: Future Trends and Course Review I.0.02
Exercise 10: PageRank and Security E.1.03/05
14
Final Project Presentations

Lecture Schedule (3 ECTS)
Lecture 1: Introduction D.0.07

2
No Exercise
Lecture 2: Web Architectures D.0.07
3
Exercise 1: Vannevar Bush Paper E.1.04
Lecture 3: HTML5 and the Open Web Platform D.0.07
4
Exercise 2: HTTP E.1.04
Lecture 4: Web Application Frameworks G.1.023
5
Exercise 3: HTML E.1.04
Lecture 5: CSS3 and Responsive Web Design D.0.07
6
No Exercise
Lecture 6: JavaScript and jQuery D.2.23
G.1.023
7
No Exercise E.1.02
Lecture 7: XML and Related Technologies D.0.07
8
No Exercise

Lecture Schedule (3 ECTS) …
No Lecture
9
No Exercise
Lecture 8: Web 2.0 Patterns and Technologies D.0.07
10
Exercise 6: JavaScript and HTML5 APIs E.1.04
Lecture 9: Semantic Web D.0.07
11
No Exercise
Lecture 10: Web Search and SEO D.0.07
12
Exercise 9: Semantic Web E.1.04
Lecture 11: Security, Privacy and Trust D.0.07
13
Exercise 9 / Exercise 10 E.1.04/02
Lecture 12: Future Trends and Course Review I.0.02
14
Exercise 10: PageRank and Security E.1.02

Assignment (6 ECTS Only)
▪ 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 2

▪ group project with 3 students per group
- send an email with the 3 group members to Maxim Van de Wynckel by Friday,
October 8 (mvdewync@vub.be)
- deadlines: final presentation (December 20), report and code (December 23)
▪ assignment counts for 50% for the final grade
- students have some flexibility in distributing the grades (±2 points)

Covid-19 Measures
▪ We start the semester in code green
▪ 100% capacity for the lectures as well as the exercise sessions
▪ recorded lectures (from last year) for students not yet in Belgium
▪ solutions mad available after exercise sessions (no recordings)

Exam
▪ Oral exam in English
▪ covers content of lectures and exercises
▪ counts 50% for the overall grade
▪ 5 mins questions about the assignment
▪ 15 mins questions about the course content (no preparation time)
▪ Overall grade = oral exam (50%) + assignment (50%)
▪ note that the grade for the oral exam as well as for the
assignment have to be 8/20 or higher in order to pass the exam!
▪ Students following the 3 ECTS programme will only have
an oral exam (100%) and no assignment
▪ 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 and public key cryptography
▪ web logging and user profiling
12.Future Trends and Course Review
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
▪ Could be seen as a
predecessor of hypertext
▪ A version of the reading
wheel was built in 2018

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 Works
000 Computer Science, Knowledge and Systems
000 Computer Science, Knowledge and General Works
...
005 Computer Programming, Programs and Data
...
009 [Unassigned]
010 Bibliographies
...
100-199 Philosophy and Psychology
200-299 Religion
300-399 Social Sciences
340 Law
341 International Law
400-499 Language
500-599 Science
600-699 Technology
700-799 Arts
800-899 Literature
900-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 Vannevar Bush
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. ...

"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 Vannevar Bush
two items together is the important thing. ...
Vannevar Bush, As We May Think,
Atlanic Monthly, July 1945

Video: Memex

"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
Memex
▪ store and access information
▪ follow cross-references in the form
of associative trails between pieces
of information (microfilms)
▪ prototypical hypertext machine
▪ trail blazers are those who find delight in
the task of establishing useful trails

Scientist of the Future ...

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 document
in another document (transclusion)
→ transpointing windows Ted Nelson
▪ 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
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 Ted Nelson
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

Transpointing Windows Mockup (1972)
[https://www.xanadu.com.au/ted/TN/PARALUNE/paraviz.html]

OpenXanadu (2014)
[https://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 Brown
University 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

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
Douglas Engelbart
Joint Computer Conference in 1968
▪ showed first practical use of hypertext
▪ computer mouse
▪ remote collaboration (connected computers)
▪ raster-scan video monitors
▪ screen windows
▪ ...
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 Defence)
▪ first operational packet
switching network
▪ first ARPANET link esta-
ARPANET Team
blished in November 1969
between Stanford and UCLA
▪ ARPANET applications
▪ Email (1971), Ray Tomlinson
▪ FTP (1973)

ARPANET Map (March 1977)

Worldwide Number of Hostnames
1 211 444 849 hostnames in August 2021, 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 Vint Cerf Bob Kahn
transmission of byte stream

between two endpoints
▪ Migration of ARPANET to TCP/IP in 1982

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
Application Application
Transport Transport
Internet Internet Internet Internet
Link Link Link Link
Ethernet Satellite, Ethernet

...

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 Tim Berners-Lee Robert Cailliau
▪ HyperText Transfer Protocol (HTTP)

▪ HyperText Markup Language (HTML)
▪ HTTP server software
▪ Web browser called WorldWideWeb
▪ First public "release" in August 1991
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 documents
with 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
▪ New forms of connectivity
and information exchange
▪ P2P networks
▪ New requirements and
functionality
▪ location-based services
▪ voice navigation
▪ 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 User interface and applications
to web resources Trust
▪ Machine-interpretable Proof
Web Unifying Logic
▪ Use of ontologies Ontologies: Rules:
Cryptography
Querying: OWL RIF/SWRL
▪ Potential reasoning over SPARQL

Taxonomies: RDFS
Web resources Data interchange: RDF
Syntax: XML and XML Namespaces
Identifiers:
URI/IRI Character set: UNICODE
Based on [http://en.wikipedia.org/wiki/File:Semantic-web-stack.png]

Internet of Things / Web 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 Communications
Review, July 1999
▪ Related terms are Disappearing Computing,
Pervasive Computing or Internet of Things Mark Weiser
▪ Physical objects with embedded 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?

Exercise 1
▪ Read the paper As We May Think by
Vannevar Bush before the exercise session 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
▪ The Web Was Done by Amateurs:
A Reflection on One of the Largest Collective
Systems Ever Engineered, Marco Aiello, Springer,
July 2018, 978-3319900070
Web Technologies: A Computer Science
Perspective, Jeffrey C. Jackson, Prentice
Hall, August 2006, ISBN-13: 978-0131856035
▪ Vannevar Bush, As We May Think, Atlantic Monthly,

July 1945
▪ https://www.theatlantic.com/doc/194507/bush/
▪ https://www.youtube.com/watch?v=c539cK58ees

References …
▪ Videos of the NLS demo
▪ https://www.youtube.com/watch?v=yJDv-zdhzMY
▪ Ted Nelson demonstrates Xanadu Space

▪ https://www.youtube.com/watch?v=En_2T7KH6RA
▪ Aspen Moviemap
▪ http://www.naimark.net/projects/aspen.html
▪ https://www.youtube.com/watch?v=w18MyqszIYc
▪ Networking Technologies (TCP/IP, …)

▪ Andrew S. Tanenbaum, Computer Networks, Fifth Edition
Pearson 2010, ISBN-13: 978-0132126953

References …
▪ B. Signer, R. Roels, R. van Barlingen and
B. Willems, Back to the Future: Bringing Original
Hypermedia and Cross-Media Concepts to Modern
Desktop Environments, Proceedings of Hypertext 2021,
August 2021
▪ https://beatsigner.com/publications/signer_Hypertext2021.pdf
▪ B. Signer, What is Wrong with Digital Documents? A

Conceptual Model for Structural Cross-Media Content
Composition and Reuse, Proceedings of ER 2010,
November 2010
▪ https://beatsigner.com/publications/signer_ER2010.pdf

References …
▪ Mark Weiser, The Computer for the 21st Century,
ACM Mobile Computing and Communications
Review, July 1999
▪ https://doi.org/10.1145/329124.329126
▪ Video of Ramelli's Reading Wheel

▪ https://www.youtube.com/watch?v=CrczS9G8nV0

Next Lecture
Web Architectures
2 December 2005

Introduction - Lecture 1 - Web Technologies (1019888BNR)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction - Lecture 1 - Web Technologies (1019888BNR)

Uploaded by

Copyright:

Available Formats

Web Technologies

Prof. Beat Signer

Department of Computer Science

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5

▪ Handouts are on Canvas the day before the lecture

▪ Web Technologies Discord server

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6

Lecture 1: Introduction D.0.07

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

Lecture 1: Introduction D.0.07

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

▪ Assignment handed out in week 2

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

When data of any sort are placed in storage,

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

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

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

Ted Nelson, Geeks Bearing Gifts: How the Computer

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

1 211 444 849 hostnames in August 2021, source: http://news.netcraft.com

transmission of byte stream

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

Internet Internet Internet Internet

Link Link Link Link

Ethernet Satellite, Ethernet

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41

▪ HyperText Transfer Protocol (HTTP)

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45

to web resources Trust

Web Unifying Logic

▪ Use of ontologies Ontologies: Rules:

▪ Potential reasoning over SPARQL

Web resources Data interchange: RDF

Syntax: XML and XML Namespaces

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47

▪ Physical objects with embedded computing functionality

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49

▪ Vannevar Bush, As We May Think, Atlantic Monthly,

October 1, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50

▪ Ted Nelson demonstrates Xanadu Space