PL9.3.60 (Pleinlaan 9) +32 2 629 1239 [email protected] wise.vub.ac.be/beat-signer A person with a mustache and beard AI-generated content may be incorrect. ▪ Jan Boonants Vrije Universiteit Brussel PL9.3.58 (Pleinlaan 9) +32 2 629 3487 [email protected] wise.vub.ac.be/jan-boonants September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 2
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! September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 3
exercise sessions ▪ the topics covered in the exercise sessions will also be helpful for the assignment ▪ Weekly exercise sessions assistant: Jan Boonants ([email protected]) ▪ 3 groups (starting on September 29) ▪ - BA (6 ECTS) WPO1: Tuesday 10:00–12:00 in E.1.05 - MACS (3 ECTS) WPO1: Tuesday 15:00–17:00 in E.1.05, E.1.07 and E.1.09 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 4
sessions strongly recommended to attend all exercise sessions! ▪ exam covers content of lectures and exercises ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 5
▪ lecture slides, exercises, research papers, tutorials, ... ▪ Make sure that you are subscribed to the Web Technologies course on Canvas ▪ https://canvas.vub.be/courses/47892 ▪ 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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 6
8 Lecture 1: Introduction G.1.53 No Exercise Lecture 2: Web Architectures G.1.53 Exercise 1: Vannevar Bush Paper & Project Assignment E.1.05 Lecture 3: Web Application Frameworks E.0.06 Exercise 2: HTTP E.1.05 Lecture 4: HTML5 and the Open Web Platform G.1.53 Exercise 3: Modern Web Application Frameworks E.1.05 Lecture 5: CSS3 and Responsive Web Design G.1.53 Exercise 4: HTML E.1.05 Lecture 6: JavaScript D.2.23 D.0.07 Exercise 5: CSS3 E.1.02 E.1.05 Lecture 7: XML and Related Technologies G.1.53 Interim Project Presentations E.1.05 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 7
14 Lecture 8: Web 2.0 Patterns and Technologies G.1.53 Exercise 6: JavaScript and HTML5 APIs E.1.05 Lecture 9: Semantic Web and Web 3.0 G.1.53 Exercise 7: XML and Related Technologies E.1.05 Lecture 10: Web Search and SEO D.0.07 Exercise 8: AJAX and Leaflet E.1.05 Lecture 11: Security, Privacy and Trust E.0.10 Exercise 9: Semantic Web E.1.05 Lecture 12: Future Trends D.0.07 Exercise 10: PageRank and Security E.1.05 Lecture 13: Course Review G.1.53 Exercise 11: TBD E.1.05 Final Project Presentations D.3.06 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 8
8 Lecture 1: Introduction G.1.53 No Exercise Lecture 2: Web Architectures G.1.53 Exercise 1: Vannevar Bush Paper E.1.09 Lecture 3: Web Application Frameworks E.0.06 No Exercise Lecture 4: HTML5 and the Open Web Platform G.1.53 Exercise 2: HTTP E.1.05 Lecture 5: CSS3 and Responsive Web Design G.1.53 Exercise 4: HTML E.1.07 Lecture 6: JavaScript D.2.23 D.0.07 No Exercise E.1.02 Lecture 7: XML and Related Technologies G.1.53 No Exercise September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 9
14 Lecture 8: Web 2.0 Patterns and Technologies G.1.53 Exercise 6: JavaScript and HTML5 APIs E.1.05 Lecture 9: Semantic Web and Web 3.0 G.1.53 No Exercise Lecture 10: Web Search and SEO D.0.07 No Exercise Lecture 11: Security, Privacy and Trust E.0.10 Exercise 9: Semantic Web E.1.05 Lecture 12: Future Trends D.0.07 Exercise 10: PageRank and Security E.1.05 Lecture 13: Course Review G.1.53 No Exercise September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 10
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 4 students per group - send an email with the 4 group members to Jan Boonants by Friday, October 2 ([email protected]) - deadlines: final presentation (December 16), report and code (December 23) ▪ assignment counts for 50% of the final grade - students have some flexibility in distributing the grades (±2 points) September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 11
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%) ▪ assignment is composed out of two grades - overall grade for project where students have some flexibility in distributing the grades (±2 points) (70%) - your contribution/knowledge to the project as checked in oral exam (30%) • if this grade is lower than 8/20, it becomes the overall grade for your assignment ▪ 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! September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 12
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) ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 13
of HTML ▪ Document Object Model (DOM) ▪ HTML5 and the Open Web Platform ▪ 5. CSS3 and Responsive Web Design 6. JavaScript ▪ syntax and examples 7. XML and Related Technologies ▪ XML, XPointer, XPath, XSLT, XQuery and XLink 8. Web 2.0 Patterns and Technologies Service-Oriented Architectures (SOAs) and mashups ▪ Rich Internet Applications (RIAs) ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 15
RDFs, OWL, SPARQL, … ▪ Linked Data and 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 ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 16
machine ▪ new user interfaces ▪ RSL hypermedia metamodel ▪ 13.Course Review discussion ▪ information about the exam ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 17
▪ 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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 18
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 19
more than one class ▪ however, there is normally only one physical copy (one main class) ▪ Different alternatives Library of Congress (LC) classification ▪ Universal Decimal Classification (UDC) by Paul Otlet and Henri La Fontaine ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 20
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 21
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 cumbersome. 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. ... September 22, 2026 Beat Signer - Department of Computer Science - [email protected] Vannevar Bush 22
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 Vannevar Bush, As We May Think, Atlanic Monthly, July 1945 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 23
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 ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 25
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 ▪ Ted Nelson ▪ XanaduSpace 1.0 was released as part of Project Xanadu in 2007 ▪ OpenXanadu demo/deliverable released in 2014 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 27
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 Ted Nelson, Geeks Bearing Gifts: How the Computer World Got This Way, Mindful Press 2009 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 28
at Brown University (1967) by Andries van Dam and his team ▪ Ted Nelson was a visitor at Brown University at 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 ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 32
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 Douglas Engelbart showed first practical use of hypertext ▪ computer mouse ▪ remote collaboration (connected computers) ▪ raster-scan video monitors ▪ screen windows ▪ ... ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 33
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 35
▪ 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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 36
DARPA (US Department of Defence) ▪ first operational packet switching network ▪ first ARPANET link established in November 1969 between Stanford and UCLA ▪ ARPANET Team ▪ ARPANET applications Email (1971), Ray Tomlinson ▪ FTP (1973) ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 37
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 40
to share information 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 ▪ ▪ Made available to the public in August 1991 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 43
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? September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 45
▪ P2P networks ▪ New requirements and functionality location-based services ▪ voice navigation ▪ ▪ Access the Web from anywhere at anytime September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 46
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? September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 47
and applications to web resources Trust ▪ Machine-interpretable Proof Web ▪ Use of ontologies ▪ Potential reasoning over Web resources Ontologies: OWL Querying: SPARQL Rules: RIF/SWRL Taxonomies: RDFS Data interchange: RDF Cryptography Unifying Logic Syntax: XML and XML Namespaces Identifiers: URI/IRI Character set: UNICODE Based on [http://en.wikipedia.org/wiki/File:Semantic-web-stack.png] September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 48
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? September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 49
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 50
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 ▪ September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 51
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 53
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 September 22, 2026 Beat Signer - Department of Computer Science - [email protected] 54
signer
saorimurooka
pawan_pharm
eller86
juanmartin2026
robintux
akiraasano
masakiokuda
matleenalaakso
sciencetokyo
moriyuya
tmiket
rabernat
swwweet
joshbly
rakko
reverentgeek
jnunemaker
khoart
lara
mkilby
addyosmani
keathley
![Transpointing Windows Mockup (1972) [https://www.xanadu.com.au/ted/TN/PARALUNE/paraviz.html] September 22, 2026 Beat Signer](https://files.speakerdeck.com/presentations/88fecf9eacb94e4e9d898c8721bf6af9/slide_28.jpg){kind=link}
![OpenXanadu (2014) [https://xanadu.com/xanademos/MoeJusteOrigins.html] September 22, 2026 Beat Signer - Department](https://files.speakerdeck.com/presentations/88fecf9eacb94e4e9d898c8721bf6af9/slide_29.jpg){kind=link}
