8/14/15

Web Technologies

Sixto Garca Aguilar

PhD in Computer Engineering
Research Area:
Machine Learning
Computer Graphics
Big Data
High Performance Computing

Professor of FIEC
Researcher of CTI at ESPOL

8/14/15

Introduction

Activity 1
Your Job
Your bachelor degree
Do you have another degree?
Why did you take this master program?

8/14/15

Activity 2
Try to enumerate or to list any web technology that you have

used?

Try to classify them among development tools, libraries,

frameworks, languages, etc.

WWW World Wide Web, commonly

called the Web
everyone knows it. But how does it work?
Understanding this is extremely important in order to use it correctly.

8/14/15

Key Questions
The Web has become an indispensable part of our daily life. But

what is its structure, and how does it work?

How can information and services on the Web be identied, and

how can they be obtained via the Internet?

How can web documents be created? How can they be

designed in such a way that not only we people can use them,
but that they can also be processed automatically?
How can oers come to life on the Web? How can web

applications be developed with HTML, JavaScript and libraries?

Key Questions
What kind of software is running on the server-side, and how

can it be implemented with the help of web application

frameworks, MVC, etc.?

How can resources - computers, storage, software be used

eciently on the Web?

8/14/15

Historical Timeline

G. L. Heileman (2013)

Short History of the WWW

The history of the WWW and the Internet are inseparable
1969: Start of the Internet:
u ARPANET started with 4 computers at universities in Los Angeles,

Santa Barbara, Stanford and Utah

1971: 23 hosts are linked in the ARPANET via 15 nodes

1971: First email sent (killer application ARPANET
1972 ) Specication of the File Transfer Protocol (FTP)
1973: :Specication of the protocol for sending email
1973: First international nodes in England and Norway

8/14/15

Short History of the WWW

1983: Already over 500 connected hosts
u Changeover of communication software to TCP/IP, developed under

the direction of Vinton Cerf and Robert E. Kahn (birth of the

Internet)

u Separation of the ARPANET into civilian and military areas

1986: NSFNET program supports Internet connection of all

universities in the US

1988: First Internet worm, with 10% of the 60,000 hosts aected
1989: 150,000 hosts are connected with the Internet, ARPANET is

shut down

Short History of the WWW

1990: Development of the rst WWW browser and WWW server by Robert

Cailliau and Tim Berners-Lee (birth of the WWW)

1991: First version (0.9) of the Hyper Text Transfer Protocol (HTTP)
1993: First browser - NCSA Mosaic with graphical user interface
1994 Founding of the W3C, founding of Netscape
1995: MS provides Windows 95 with the browser nternet Explorer
1995: Finance and business discover WWW, creation of many dot-coms
1999 1st generation mobile Internet: WAP, i-Mode in Japan

8/14/15

Short History of the WWW

2001: The dot-com bubble bursts (boom of young Internet

companies collapses)

2001: Wikipedia founded

2002: The Web is everywhere: successful Web oers crystallize from

the remains of the dot-com bubble, among them Google,

Amazon, eBay, various airlines

2003: Advent of the social networks

u Myspace (2003): initially >200,000 users daily, insignicant today
u Facebook (2004): launch in February, 1 million users in December.

2004, 1.39 billion active users in February 2015

Short History of the WWW

2004 UMTS commercially available
2005 Web 3.0: Research in the areas of Semantic Web, Social Web and Service Web
2007 The rst iPhones appear, touchscreen revolution smartphone market-

breakthrough of mobile Web

2008 Android ocially available for the rst time

2009 Cloud Computing becomes an important trend in the coming years -

Processing power and memory in the Web and access to these resources with mobile
devices introduces paradigm shift

2010 First iPad hails renaissance of the tablet PC

Today Web is ubiquitous: mobile Internet widespread, smart homes, smart grid, ...,

important concepts for the future

8/14/15

Web 1.0, 2.0, 3.0

Web 1.0 Creation of static web sites, the rst web business

models.

Web 2.0 Interactivity (Ajax), social networking, mash-ups,

media sharing, online commerce, lightweight collaboration,

wikis.
Web 3.0 The intelligent web, i.e., machine-facilitated

understanding of information. E.g., semantic web, NLP,

machine learning/reasoning, recommender systems.

Enablers of Web 2.0 and 3.0

JavaScript, XML, JSON (Ajax).
Web services interoperability.
Infrastructure-, platform- and software-as-a-service

capabilities, i.e., cloud computing.

Mobile platforms and apps leading to ubiquitous computing.
Metadata, linked data and machine processing by intelligent

agents.

8/14/15

First Approach

First Approach (1/6)

World Wide Web, Web, WWW, is a huge, globally

distributed collection of information and data that can be

accessed via the Internet with the help of HTTP Hypertext
Transfer Protocol

The WWW has made the Internet the most important

communication medium of our days

Thanks to the intuitively usable, graphical interface the

WWW browser the WWW provides simple access to its

information oer to everybody

8/14/15

First Approach (2/6)

The WWW was introduced at CERN, the European

Organization for Nuclear Research by Robert Cailliau and Tim

Berners-Lee, at the beginning of the 1990s

The information contained in the WWW takes the form of

hypermedia documents (hypertext documents)

Hypermedia documents are interconnected by so-called

hyperlinks and in this way form an information network

Users can navigate along these links quite simply through

the gigantic network of web documents

Principle of Hiperlink

Document 1

Hiperlink
Document 2

10

8/14/15

First Approach (4/6)

Hypemedia
document

Hyperlink

First Approach (5/6)

WWW documents are distributed worldwide, stored at so-

called WWW servers

In order to be found, they have to be uniquely identied

globally
Access to the WWW document proceeds according to the

client/server principle:
the WWW client browser requests a specic document that is

delivered by a WWW server

transmission through the Internet proceeds with the Hypertext-

Transfer-Protocols (HTTP)

11

8/14/15

First Approach (5/6)

Modern browsers oer not only access to WWW documents but also

to other Internet services, e.g.

FTP, email (as

Web application), streaming media (RTSP),

The mechanisms and protocols necessary in order to carry out this

service remain almost completely hidden from the user

Thanks to the intuitive and simple to use browser-user interface, the

WWW experienced tremendous growth and has now become the

universal communication medium of our time

Hypermedia, HTML and

XML

12

8/14/15

Hypertext and Hypermedia (1/2)

WWW is a hypermedia system or hypertext system, WWW

documents are interconnected to each other via hyperlinks

The traditional linear structure of documents is superseded by

hypermedia documents via the linking mechanism they form a

huge information network

Users can directly access one WWW document from another, even

when that document is stored on another server

WWW is a distributed hypermedia system - WWW documents

reside on servers distributed around the world. This makes it, for
example, very dicult to guarantee consistency of the hyperlinks

Hypertext and Hypermedia (2/2)

WWW documents are composed in a special descriptive
language the Hypertext Markup Language - HTML
With HTML, authors can
describe the structure of a WWW document: division into

headings, paragraphs, tables,

include hyperlinks
embed multimedia components
inuence (to a certain degree) the graphical presentation

13

8/14/15

HTML documents (1/4)

An HTML document is called a page
The starting page or output page for navigation through the

information oer of a provider is called the homepage

Browsers interpret the requested HTML documents, prepare

them and display them based on HTML identiers in the

document, the so-called markups or shortly tags

Markup language should only be used for the description of

the document structure and not for description of the

document presentation

HTML documents (2/4)

Every HTML document consists of two parts:
document header
contains information about the document

document body
contains the actual contents of the document

14

8/14/15

HTML documents (3/4)

Basic idea of the markup language was the separation of structure
and design
HTML describes the document structure
Cascading Stylesheets CSS are responsible for the description

of the presentation (layout) of this structure

Main area of application for CSS:

u exact denition of the layout of an HTML document

u adoption to various output media
u central layout management

HTML documents (4/4)

With the help of special tags, reference links can be stored in an

HTML document as passive pointers to another document

So-called URIs Uniform Resource Identiers - serve in the

unique global identication of documents

URIs can be encoded in strings and are made up

(in the case of URLs) of:
name of the access protocol,
computer name and
document name

15

8/14/15

XML
The main criticism of the markup language HTML has been its lack

of exibility

Through the introduction of XML Extensible Markup Language

as meta-markup language, it is possible to describe each type of

document with its own syntax

XML is the starting point for a variety of application-specic

markup languages, that are tailored exactly to the characteristics of

specialized output devices or application areas, e.g.

MathML Mathematical Markup Language

SVG Scalable Vector Graphics
ODF Open Document Format for Oce Applications
...

Browser and Server

16

8/14/15

WWW Browser
WWW users can access the huge supply of information and

data with the help of browsers

Browsers today oer a Graphical User Interface, GUI

With simple point and click actions, users can carry out a

variety of functions and retrieve WWW documents

The browser interprets the WWW documents and presents

them in processed form: texts, graphics, images, videos,

audio,

WWW Browser
Widely used browsers:
Chrome, Internet Explorer, Firefox, Safari, Opera,

Browsers are
usually free and available for all platforms from smartphone to

mainframe

hardly dier in user guidance

Browsers (still) often behave slightly dierent in their support of certain

WWW standards. This stems from the 1990s when browser manufacturers
tried to improve their competitive edge by oering their own proprietary
functionalities and extensions of the WWW browser war

17

8/14/15

Client / Server Paradigm

Access to WWW documents is organized according to the client/

server paradigm:

User requests a WWW document over the WWW client browser (by

mouse click or by entering a URL)

Browser contacts the WWW server specied by the URL and

requests the desired document

Server accesses its local le system and sends the le specied in

the URL to the requesting host

Browser receives the document

Browser interprets the document and displays it

HTTP - Hypertext Transfer Protocol

Interaction between browser and server is carried out by

means of the Hypertext Transfer Protocol - HTTP

HTTP is a very simple and stateless (no memory of earlier

data exchange) therefore fast protocol, interaction proceeds

in the form of a simple question / answer procedure

Eciency of HTTP communication can be increased

signicantly with the help of intermediate systems such as

proxy servers
gateways
cache storages

18

8/14/15

HTTP - Hypertext Transfer Protocol

HTTP is subject to a developmental process
First HTTP version (HTTP/0.9) emerged in 1989/90 at CERN
Current version is HTTP/1.1 (since 1999)
At this time HTTP/2.0 is in the process of being standardized
u based on the research project SPDY (Speedy) which was

initiated by Google
u it will probably be nished this year

Securing HTTP Communication

There are two ways to make HTTP communication secure:
TLS Transport Layer Security, and its predecessor SSL

Secure Sockets Layer provide secure communication

infrastructure for HTTP communication (originally developed
by Netscape)

S-HTTP (Secure HTTP) oers an independent

communication protocol based on HTTP (but has not been

able to establish itself and so it is barely used)

19

8/14/15

WWW Server
ask and architecture of a WWW server is quite simple:
server waits for the opening of a connection through a browser
server answers browsers request
after sending the answer, the server ends the connection and waits

for new requests

WWW servers today fulll many tasks beyond this:

u session management (Cookies)
u script interpreter for dynamic web applications
u ...

Web Browser Architecture

Tasks and architecture of a browser are considerably more
complex:
after user input, opening of a connection to the selected

server

reading the information resource received by the server

processing and presenting the information resource received

by the server

response to the user reaction on operating the graphical user

interface (GUI)

20

8/14/15

Web Browser Architecture

To solve all tasks, the browser consists conceptually of multiple
clients and interpreters as well as a controller
Various browser components (1/3):
The controller is the central instance of the browser

architecture: It manages and coordinates the actions to be

performed, e.g.
u interprets mouse clicks and keystrokes
u activates other components of the browser for

performingrequested operations

Web Browser Architecture

Various browser components (2/3):
The HTML interpreter serves to display the user-requested

HTML documents correctly

u interpretation of the HTML tags in the HTML document

u processing the HTML documents for presentation
u on-screen display
u correct interpretation of the user-selected active elements of

the HTML document (management of the relationship between

display and anchored element)

21

8/14/15

Web Browser Architecture

Various browser components (3/3):
The Cache (a kind of memory) serves to increase the

performance and throughput of a browser with intermediate

storage of the already visited HTML documents
u Browser puts a copy of the read HTML pages in the cache
u If the page is requested again, the saved copy is displayed,

when ensured that the copy is still valid

Web Browser Architecture

22

8/14/15

Web Browser Plug-ins

Browser enhancement with plug-ins
Plug-ins allow the browser to process and display data that does not

correspond to the typical formats. e.g.

u HTML, CSS, pictures, etc.

Prominent examples:
u Java (Applets), Adobe Flash, Microsoft Silverlight, PDF, various audio and
video formats
Plug-ins vs. extensions
u Browser plug-ins only allow the display of plug-in specic contents in web
pages, i.e. enhance interpreter and rendering components
u Extensions (also: add-ons) modify or extend the functionality of the
browser itself, e.g.: ad blocker, download helper,

Web Applications

23

8/14/15

Web Applications
Today, the Web is no longer just an information archive, but hasbecome a marketplace for a
wide range of (Web) applications,e.g. shops, mail clients, dating sites,
Branch software or oce packages (e.g. Google Docs) not only deliver static documents but
also
u allow interaction with the user
u are able to process data from users
u generate documents dynamically dependent on
q user input (in forms)
q inquiries with parameters (e.g. search queries)
q events (time, weather, etc.)
u Distinguish between: client-side and server-side web applications
q dierent types of web programming

Client-Side Programming
Executable / interpretable program code is transferred from

the WWW server within the requested HTML document to

the WWW browser (client) and processed at the client
computer

WWW client needs interpreter (if required as a plugin) which,

together with the client, can interpret and execute the

transferred program code
q Java applets
q JavaScript program (or script)
q Microsoft Silverlight and Adobe Flash

24

8/14/15

Server-Side Programming
Application program is activated by the WWW browser (client) via the

WWW server at the server computer and executed there

Processed results are given to the client as a dynamically generated

HTML document

Standardized interface between WWW server and application

programs at the server side: CGI interface (Common Gateway

Interface)

Application programs at the server side can be written in desired

programming language, like

q Java (Servlets, Server Pages, Beans)

q script languages (ASP, PHP, Perl)
q today: Web frameworks (Ruby on Rails, Spring, Django, )

Players on the Web

25

8/14/15

Whos Who in the WWW

Internet and WWW have no central control authority
Internationally composed, non-prot organizations interact with

the entire Internet community to regulate the technical

organization and development of the Internet in form of a public
standardization process

IAB Internet Architecture Board determines the direction and

areas of the Internet for further development, and organizes them
IAB organizes itself via so-called Internet Task Forces
u Here, special questions are dealt with and status reports are

submitted to IAB

Whos Who in the WWW

Two support groups have been formed for the IAB:
IETF Internet Engineering Task Force
u is led technically by IESG Internet Engineering Steering Group
u is concerned with the standardization of communication

protocols in the Internet

IRTF Internet Research Task Force

u is concerned with research questions on Internet technologies

26

8/14/15

Whos Who in the WWW

Whos Who in the WWW

IANA Internet Assigned Number Authority
u until 1998 responsible for issuing addresses on the Internet,
u In 1998 the responsibility shifted to ICANN Internet

Corporation for Assigned Names and Numbers

In 1992 the ISOC - Internet Society was organized as an

international social superstructure for this organization

u Most important task: Setting new standards

27

8/14/15

Whos Who in the WWW

W3C World Wide Web Consortium
Founded in 1994 at MIT by Tim Berners-Lee
Originated from the WWW working group of the IETF as this group could not

publish any standards of its own

W3C develops and maintains standards that apply to the WWW, e.g. HTML,

CSS, XML, SVG, OWL, etc.

W3C is not an ocially recognized organization, and, therefore, not able to set

ocial standards (e.g. ISO norms)

u W3C publications are, therefore, called recommendations, although they are

actually often de facto standards

W3C nances itself through membership fees;

u since 2009 it has been nancially supported by ISOC through donations

Internet Standards

28

8/14/15

Internet Standards
Internet standard is a specication that is supported and

used by the Internet community

Starting point for Internet standards are RFC Request for

Comments
RFCs contain proposals for establishing new Internet

standards or revising existing ones

In order to include the Internet community, RFCs are

published online free of charge by the IESG or IAB

Internet Standards
Standardization process (maturity levels):
Internet draft submitted by individual or working group
RFC proposed standard drafts approved by IESG IETF
u Pre-requisite: For proposed standards, at least two independent

and interoperable implementations within 6 months must exist

RFC Internet Standard after sucient experience with

implementations

IAB establishes a status for every standard (required, recommended,

elective, limited use, not recommended) which characterizes its
meaning

29

8/14/15

Internet Standards

Internet Standards
W3C Recommendations
Development of W3C recommendations similar to AB standards,

but somewhat less restrictive

Stages of development:
u Working draft: Openly accessible and open to comment
u Candidate recommendation: Only minor changes, development of

implementations

u Proposed recommendation: Supplemented by documentation and

evaluation of implementations

u After approval by W3C committee: Recommendation

All W3C drafts and recommendations are available anytime online

30

8/14/15

References
Prof. Chistoph Meinel.
http://hpi.de/en/meinel/chair.html

https://www.iab.org
https://www.ietf.org
https://www.ietf.org/iesg/

31