Download - 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
Vrije Universiteit Brussel
10.G.731d
+32 2 629 12 39
www.beatsigner.com
Reinout Roels
Vrije Universiteit Brussel
10.G.731f
+32 2 629 11 03
Beat Signer - Department of Computer Science - [email protected] 3September 30, 2016
Course Organisation …
Lars Van Holsbeeke
Vrije Universiteit Brussel
G.10.735
Beat Signer - Department of Computer Science - [email protected] 4September 30, 2016
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!
Beat Signer - Department of Computer Science - [email protected] 5September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 6September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 7September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 8September 30, 2016
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
No Lecture (work on assignment)
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
Beat Signer - Department of Computer Science - [email protected] 9September 30, 2016
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 Lecture (work on assignment)
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
Beat Signer - Department of Computer Science - [email protected] 10September 30, 2016
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
No Lecture (work on assignment)
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
Beat Signer - Department of Computer Science - [email protected] 11September 30, 2016
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)
Beat Signer - Department of Computer Science - [email protected] 12September 30, 2016
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)
Beat Signer - Department of Computer Science - [email protected] 13September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 14September 30, 2016
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)
Beat Signer - Department of Computer Science - [email protected] 15September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 16September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 17September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 18September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 19September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 20September 30, 2016
"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
Beat Signer - Department of Computer Science - [email protected] 21September 30, 2016
"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
Beat Signer - Department of Computer Science - [email protected] 22September 30, 2016
"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
Beat Signer - Department of Computer Science - [email protected] 23September 30, 2016
Scientist of the Future ...
Beat Signer - Department of Computer Science - [email protected] 24September 30, 2016
Video: Memex
Beat Signer - Department of Computer Science - [email protected] 25September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 26September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 27September 30, 2016
Transpointing Windows Mockup (1972)
[http://www.xanadu.com.au/ted/TN/PARALUNE/paraviz.html]
Beat Signer - Department of Computer Science - [email protected] 28September 30, 2016
OpenXanadu (2014)
[http://xanadu.com/xanademos/MoeJusteOrigins.html]
Beat Signer - Department of Computer Science - [email protected] 29September 30, 2016
Video: Ted Nelson Explains XanaduSpace
Beat Signer - Department of Computer Science - [email protected] 30September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 31September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 32September 30, 2016
NLS Demo
Beat Signer - Department of Computer Science - [email protected] 33September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 34September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 35September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 36September 30, 2016
ARPANET Map (March 1977)
Beat Signer - Department of Computer Science - [email protected] 37September 30, 2016
Worldwide Number of Hostnames
1,285,759,146 hostnames in September 2016, source: http://news.netcraft.com
Beat Signer - Department of Computer Science - [email protected] 38September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 39September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 40September 30, 2016
TCP/IP Layers
Link
Internet
Transport
Application
Link
Internet
Link
Internet
Transport
Application
Link
Internet
Ethernet EthernetSatellite,
...
Beat Signer - Department of Computer Science - [email protected] 41September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 42September 30, 2016
WordWideWeb Browser (1993)
Beat Signer - Department of Computer Science - [email protected] 43September 30, 2016
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?
Beat Signer - Department of Computer Science - [email protected] 44September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 45September 30, 2016
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?
Beat Signer - Department of Computer Science - [email protected] 46September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 47September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 48September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 49September 30, 2016
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
Beat Signer - Department of Computer Science - [email protected] 50September 30, 2016
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