3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3September 29, 2017
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!
4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4September 29, 2017
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, (rroels@vub.ac.be)
2 groups (starting on October 3)
- 6 ECTS version: Tuesday 16:00–18:00 in E.1.02
- 3 ECTS version: Friday 16:00–18:00 in E.1.02
Additional content might be covered in exercise sessions
strongly recommended to attend all exercise sessions!
exam covers content of lectures and exercises
5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5September 29, 2017
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_view
er&application=application%5Cweblcms&course=15509
Handouts are on PointCarré the day before the lecture
slides from the previous year are already available on SlideShare
- https://www.slideshare.net/signer/presentations
Similar information is also available on the WISE website
https://wise.vub.ac.be/course/web-technologies
6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6September 29, 2017
Lecture Schedule (6 ECTS)
Exercise 1: Vannevar Bush Paper & Assignment
3
4
5
6
Lecture 2: Web Architectures
Lecture 3: HTML5 and the Open Web Platform
Exercise 2: HTTP
Lecture 4: Web Application Frameworks
Lecture 7: XML and Related Technologies
Interim Project Presentations
D.2.23
D.2.23
D.2.23
D.2.23
E.1.02
E.1.02
E.1.02
7
8
Exercise 5: CSS3 E.1.02
Lecture 1: Introduction
2
No Exercise
Exercise 3: HTML E.1.02
D.2.23
Lecture 5: CSS3 and Responsive Web Design
Exercise 4: Java Servlets and Modern Web Application Frameworks
D.2.23
E.1.02
Lecture 6: JavaScript and jQuery D.2.23
7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7September 29, 2017
Lecture Schedule (6 ECTS) …
Lecture 9: Semantic Web
Exercise 8: AJAX and Google Maps
10
11
12
13
14
Lecture 10: Web Search and SEO
Lecture 11: Security, Privacy and Trust
Exercise 9: Semantic Web
Lecture 12: Future Trends and Course Review
Exercise 7: XML and Related Technologies
9
Exercise 10: PageRank and Security
Exercise 6: JavaScript and HTML5 APIs
Final Project Presentations TBA
Lecture 8: Web 2.0 Patterns and Technologies D.2.23
E.1.02
E.1.02
E.1.02
E.1.02
E.1.02
D.2.23
D.2.23
D.2.23
D.2.23
8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8September 29, 2017
Lecture Schedule (3 ECTS)
Exercise 1: Vannevar Bush Paper
3
4
5
6
Lecture 2: Web Architectures
Lecture 3: HTML5 and the Open Web Platform
Exercise 2: HTTP
Lecture 4: Web Application Frameworks
Lecture 7: XML and Related Technologies
No Exercise
D.2.23
D.2.23
D.2.23
D.2.23
E.1.02
E.1.02
7
8
Exercise 5: CSS3 E.1.02
Lecture 1: Introduction
2
No Exercise
Exercise 3: HTML E.1.02
D.2.23
Lecture 5: CSS3 and Responsive Web Design
No Exercise
D.2.23
Lecture 6: JavaScript and jQuery D.2.23
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9September 29, 2017
Lecture Schedule (3 ECTS) …
Lecture 9: Semantic Web
Exercise 8: AJAX and Google Maps
10
11
12
13
14
Lecture 10: Web Search and SEO
Lecture 11: Security, Privacy and Trust
No Exercise
Lecture 12: Future Trends and Course Review
No Exercise
9
Exercise 10: PageRank
No Lecture
No Exercise
Exercise 6: JavaScript and HTML5 APIs
Lecture 8: Web 2.0 Patterns and Technologies D.2.23
E.1.02
E.1.02
E.1.02
D.2.23
D.2.23
D.2.23
D.2.23
10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10September 29, 2017
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 3
group project with 3 students per group
- send an email with the 3 group members to Reinout Roels by Friday,
October 6 (rroels@vub.ac.be)
- deadlines: final presentation (December 22), report (December 23)
assignment counts for 40% for the final grade
- students have some flexibility in distributing the grades (±2 points)
11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11September 29, 2017
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)
12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12September 29, 2017
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
13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13September 29, 2017
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)
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14September 29, 2017
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
15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15September 29, 2017
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
16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16September 29, 2017
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
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17September 29, 2017
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
18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18September 29, 2017
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
19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19September 29, 2017
"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
20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20September 29, 2017
"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
21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21September 29, 2017
"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 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
Memex
22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22September 29, 2017
Scientist of the Future ...
23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23September 29, 2017
Video: Memex
24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24September 29, 2017
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
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
25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25September 29, 2017
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
26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26September 29, 2017
Transpointing Windows Mockup (1972)
[http://www.xanadu.com.au/ted/TN/PARALUNE/paraviz.html]
27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27September 29, 2017
OpenXanadu (2014)
[http://xanadu.com/xanademos/MoeJusteOrigins.html]
28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28September 29, 2017
Video: Ted Nelson Explains XanaduSpace
29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29September 29, 2017
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
bidirectional links
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30September 29, 2017
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
31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31September 29, 2017
NLS Demo
32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32September 29, 2017
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
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33September 29, 2017
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
34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34September 29, 2017
ARPANET (1969)
Advanced Research
Projects Agency Network
created by DARPA
(US Department of Defense)
first operational packet
switching network
first ARPANET link esta-
blished in November 1969
ARPANET applications
Email (1971), Ray Tomlinson
FTP (1973)
ARPANET Team
35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35September 29, 2017
ARPANET Map (March 1977)
36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36September 29, 2017
Worldwide Number of Hostnames
1,805,060,730 hostnames in September 2017, source: http://news.netcraft.com
37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37September 29, 2017
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
38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38September 29, 2017
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
39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39September 29, 2017
TCP/IP Layers
Link
Internet
Transport
Application
Link
Internet
Link
Internet
Transport
Application
Link
Internet
Ethernet EthernetSatellite,
...
40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40September 29, 2017
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
41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41September 29, 2017
WordWideWeb Browser (1993)
42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42September 29, 2017
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?
43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43September 29, 2017
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
44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44September 29, 2017
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?
45. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45September 29, 2017
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
Cryptography
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
46. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46September 29, 2017
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
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
47. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47September 29, 2017
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
48. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48September 29, 2017
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
49. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49September 29, 2017
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, Fifth Edition
Pearson 2010, ISBN-13: 978-0132126953
Mark Weiser, The Computer for the 21st Century,
ACM Mobile Computing and Communications
Review, July 1999