Introduction - Lecture 1 - Web Technologies (1019888BNR)

1135dc242dcff3b90ae46fc586ff4da8?s=47 Beat Signer
September 25, 2020

Introduction - Lecture 1 - Web Technologies (1019888BNR)

This lecture forms part of the course Web Technologies given at the Vrije Universiteit Brussel.

1135dc242dcff3b90ae46fc586ff4da8?s=128

Beat Signer

September 25, 2020
Tweet

Transcript

  1. 2 December 2005 Web Technologies Introduction Prof. Beat Signer Department

    of Computer Science Vrije Universiteit Brussel beatsigner.com
  2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

    September 25, 2020 Course Organisation ▪ Prof. Beat Signer Vrije Universiteit Brussel PL9.3.60 +32 2 629 1239 bsigner@vub.be wise.vub.ac.be/beat-signer ▪ Maxim Van de Wynckel Vrije Universiteit Brussel PL9.3.58 +32 2 629 3487 mvdewync@vub.be
  3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3

    September 25, 2020 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 4

    September 25, 2020 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) ▪ 2 groups (starting on September 29) - Tuesday 16:00–18:00 in E.1.03 - 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 5

    September 25, 2020 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/17854 ▪ Handouts are on Canvas the day before the lecture ▪ slides from the previous year are already available on academia.edu - https://vub.academia.edu/BeatSigner/Teaching-Documents ▪ 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 6

    September 25, 2020 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 I.2.02 I.2.02 I.2.02 I.2.02 E.1.02/03 E.1.02/03 E.1.02/03 7 8 E.1.02 Lecture 1: Introduction 2 No Exercise Exercise 3: HTML E.1.02/03 I.2.02 Lecture 5: CSS3 and Responsive Web Design Exercise 4: Java Servlets and Modern Web Application Frameworks I.2.02 E.1.02/03 D.2.23 Exercise 5: CSS3 E.1.02/03 Lecture 6: JavaScript and jQuery I.2.02
  7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

    September 25, 2020 Lecture Schedule (6 ECTS) … No Lecture Exercise 7: XML and Related Technologies 10 11 12 13 14 Lecture 9: Semantic Web Lecture 10: Web Search and SEO Exercise 8: AJAX and Leaflet No Exercise 9 Exercise 6: JavaScript and HTML5 APIs I.2.02 Lecture 8: Web 2.0 Patterns and Technologies I.2.02 E.1.02/03 E.1.02/03 E.1.02/03 I.2.02 I.2.02 Final Project Presentations Lecture 11: Security, Privacy and Trust Exercise 9: Semantic Web E.1.02/03 I.2.02 Lecture 12: Future Trends and Course Review Exercise 10: PageRank and Security E.1.02/03 I.2.02
  8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

    September 25, 2020 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 I.2.02 I.2.02 I.2.02 I.2.02 E.1.02/03 E.1.02/03 7 8 E.1.02 Lecture 1: Introduction 2 No Exercise Exercise 3: HTML E.1.02/03 I.2.02 Lecture 5: CSS3 and Responsive Web Design No Exercise I.2.02 D.2.23 No Exercise Lecture 6: JavaScript and jQuery I.2.02
  9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

    September 25, 2020 Lecture Schedule (3 ECTS) … No Lecture No Exercise 10 11 12 13 14 Lecture 9: Semantic Web Lecture 10: Web Search and SEO No Exercise No Exercise 9 Exercise 6: JavaScript and HTML5 APIs Lecture 8: Web 2.0 Patterns and Technologies I.2.02 E.1.02/03 I.2.02 I.2.02 Lecture 11: Security, Privacy and Trust Exercise 9: Semantic Web E.1.02/03 I.2.02 Lecture 12: Future Trends and Course Review Exercise 10: PageRank and Security E.1.02/03 I.2.02
  10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

    September 25, 2020 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 2 (mvdewync@vub.be) - deadlines: final presentation (December 17), report and code (December 21) ▪ 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 11

    September 25, 2020 Covid-19 Measures ▪ We start the semester with a rotation system for the lectures as well as the exercise sessions ▪ please only come to the lectures and exercises on campus if you are allowed to (e.g. based on blue and orange colour code) and follow the rest online (livestream or recorded lectures and exercise sessions) ▪ might change during the semester (e.g. online lectures only)
  12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

    September 25, 2020 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%) ▪ 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 assigment ▪ covers content of lectures and exercises ▪ 15 mins questions about the course content (no preparation time)
  13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

    September 25, 2020 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
  14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

    September 25, 2020 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)
  15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

    September 25, 2020 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
  16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

    September 25, 2020 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
  17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

    September 25, 2020 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
  18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

    September 25, 2020 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
  19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

    September 25, 2020 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
  20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

    September 25, 2020 "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
  21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

    September 25, 2020 "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
  22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

    September 25, 2020 Video: Memex
  23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

    September 25, 2020 "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
  24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

    September 25, 2020 Scientist of the Future ...
  25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

    September 25, 2020 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
  26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

    September 25, 2020 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
  27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

    September 25, 2020 Transpointing Windows Mockup (1972) [http://www.xanadu.com.au/ted/TN/PARALUNE/paraviz.html]
  28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

    September 25, 2020 OpenXanadu (2014) [http://xanadu.com/xanademos/MoeJusteOrigins.html]
  29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

    September 25, 2020 Video: Ted Nelson Explains XanaduSpace
  30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

    September 25, 2020 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
  31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

    September 25, 2020 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
  32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

    September 25, 2020 NLS Demo
  33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

    September 25, 2020 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
  34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

    September 25, 2020 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
  35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

    September 25, 2020 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
  36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

    September 25, 2020 ARPANET Map (March 1977)
  37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

    September 25, 2020 Worldwide Number of Hostnames 1 196 298 727 hostnames in September 2020, source: http://news.netcraft.com
  38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

    September 25, 2020 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
  39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

    September 25, 2020 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
  40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

    September 25, 2020 TCP/IP Layers Link Internet Transport Application Link Internet Link Internet Transport Application Link Internet Ethernet Ethernet Satellite, ...
  41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41

    September 25, 2020 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
  42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42

    September 25, 2020 WordWideWeb Browser (1993)
  43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43

    September 25, 2020 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?
  44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44

    September 25, 2020 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
  45. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45

    September 25, 2020 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?
  46. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46

    September 25, 2020 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: OWL Querying: 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
  47. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47

    September 25, 2020 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 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? Mark Weiser
  48. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48

    September 25, 2020 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
  49. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49

    September 25, 2020 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, Atlanic Monthly, July 1945 ▪ http://www.theatlantic.com/doc/194507/bush/ ▪ http://www.youtube.com/watch?v=c539cK58ees
  50. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50

    September 25, 2020 References … ▪ Videos of the NLS demo ▪ https://www.youtube.com/watch?v=yJDv-zdhzMY ▪ 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
  51. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51

    September 25, 2020 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
  52. 2 December 2005 Next Lecture Web Architectures