world wide web aka “the internet” · world wide web aka “the internet” karst koymans...

.

......

WWWWorld Wide Web

Aka “The Internet”

Karst Koymans

Informatics InstituteUniversity of Amsterdam

(version 16.3, 2016/10/06 13:25:13 UTC)

Friday, October 7, 2016

Karst Koymans (UvA) WWW Friday, October 7, 2016 1 / 63

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side

...5 Dynamic content

...6 URI, URL, URN

...7 Protocol

...8 Markup (a quick recap from Essential Skills)

...9 Hybrids (the way forward ?!)


WWW history

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




WWW history

WWW history (1)

1968 Doug EngelbartEarlier than ARPANET or UNIXInventor of. . .

. . . the “mouse”

. . . and of hypermedia

. . . and of videoconferencing


WWW history

WWW history (2)

1989 Tim Berners Lee20 years after EngelbartFirst “Information management proposal” at CERN

1990 WorldWideWeb browser (later Nexus)Developed by Berners Lee on NEXTSTEP“World Wide Web” (with spaces) is the abstract information space


WWW history

WWW history (3)

More browsers1992

Line mode browser 1.1ViolaWWW browser for X Windows

1993

Mosaic for X Windows (Marc Andreessen, founder of Netscape)


WWW history

WWW history (4)

1994Mozilla (Netscape)W3C founded (MIT, INRIA, Keio)

In 2003 ERCIM took the place of INRIAIn 2012 http://www.webplatform.org/ was convenedwith an invalid certificate (20131003) for httpsIn 2013 Beihang University (China) was invited to join hosting W3C

1995Microsoft launches Internet ExplorerStart of the Browser Wars


http://www.webplatform.org/

WWW history

WWW history (5)

.Standards based browsers and layout engines (20151005)..

......

Gecko (Firefox, Seamonkey, Netscape, Thunderbird)

KHTML (Konqueror)WebKit, using WebCore (Apple Safari, Google Chrome)

Blink derived from WebCore (Chrome, Chromium, Opera)

Trident/EdgeHTML (Microsoft Internet Explorer / Microsoft Edge)a

Presto (Opera (until 2013))b

aproprietary, but freely availablebproprietary; freely and commercially available


Basic concepts

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




Basic concepts

WWW concepts

Web browser (client)

Web server (server)

URLs and HTTP (protocol)

HTML and other markup (content)

Dynamic web pages (interaction)

Document Object Model (page model)

3-tier model (architecture)


Client side

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




Client side

Browser

Client making requests for web pages

Interface for the userGraphical User Interface

IE, Safari, Firefox, Opera, Chrome, Chromium, . . .

Terminal based

lynx, links, w3m, . . .


Server side

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




Server side

Web server

Server responding to requestsNCSA HTTPd, Apache HTTP ServerInternet Information Services (IIS, Microsoft)Sun Java System Web Server (Sun ONE, iPlanet)

Partly open sourced (Open Web Server)

Looks for information in or viafiles, databases, scriptslocally or remote

See also http://www.netcraft.com/


http://www.netcraft.com/

Server side

Lesser known or more recent web servers

nginx (“engine X”)also reverse proxy and load balancerhigh performance

Google Web Server (GWS)Google custom (mystery?) web serveralso runs Blogger, Google Docs, . . .

lighttpd (“lighty”)lightweightoptimised for speed

qq.comChinese IM and blog service (mostly private now)


Server side

Netcraft survey October 2006


Server side

Netcraft survey November 2007


Server side

Netcraft survey September 2008


Server side



Server side

Netcraft survey December 2012 (active sites)


Server side

Netcraft survey October 2013 (all sites)


Server side

Netcraft survey September 2014 (all sites)


Server side



Server side

Netcraft survey September 2014 (active sites)


Server side



Server side

3-tier model

Presentation layer (user tier)Communicates with (client) browser

Business Logic layer (business tier)Applies business rules

Data layer (data tier)Interacts with data store (database)


Server side

LAMP model

(L)inux as underlying OS

(A)pache as presentation layer

(M)ySQL as data layer

(P)HP as business logic layerSome people use (P)erl and/or (P)ython


Dynamic content

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




Dynamic content

Dynamic web pages (server side)

Server side dynamic web page technologies,which are able to generate unique content for each call or user

Common Gateway Interface (CGI)Server Side Includes (SSI)Server-side scripting

PHP, JSP, ASP

Servlets: server-side java applicationsASP.NET: successor of ASP, part of the .NET framework


Dynamic content

Dynamic web pages (client side)

Client side: Dynamic HTML (DHTML)

Works with the Document Object Model (DOM)

Executes ECMAscript (standard) programsJavaScript (Netscape), JScript (Microsoft)

Other client side techniquesAJAX (Asynchronous Javascript and XML) for interactive web pagesApplets (JVM) or ActiveX controlsFlash, Silverlight, HTML5


Dynamic content

ECMAScript engines (20151005)

.ECMAScript engines..

......

SpiderMonkey/TraceMonkey (Firefox, Seamonkey)

KJS (Konqueror)JavaScriptCore/SquirrelFish/Nitro (Apple Safari)

V8 (Google Chrome, Opera)

Chakra (JScript) (Microsoft Internet Explorer 9)

Chakra (JavaScript) (Microsoft Edge)

Futhark/Carakan (Opera – discontinued –)


Dynamic content

Document Object Model

An ongoing W3C/WHATWG activityfor standardizing Dynamic HTML

Level 0: proprietary API for HTML (XML) documentsrefers to what existed before the standardization

Level 1: standardized API for HTML (XML) documentsLevel 2: modularized with support for events and stylesLevel 3: support for loading and saving and for keyboard eventsLevel 4: DOM4 working draft (July 2014)

Now part of the “DOM Living Specification”Also see https://dom.spec.whatwg.org/

Work now integrated with HTML5 effortKarst Koymans (UvA) WWW Friday, October 7, 2016 36 / 63

https://dom.spec.whatwg.org/

Dynamic content

More interaction (1)

XmlHttpRequest (XHR)Javascript API to send requests to serversUsed by the Ajax web development techniqueResponse is integrated into the current web page

without rendering the complete page again

Response can be XML, but also

JSONHTML. . .


Dynamic content

More interaction (2)

WebsocketsGeneral mechanism to upgrade an existing TCP connectionto multiple full-duplex connectionsUses the “Upgrade:”1 HTTP header mechanism as handshakeDefines the “ws:” and “wss:” schemesUses an “allowed-origin” policy for securityby including an “Origin:” header

HTTP/2 defines a similar mechanism to establish

multiplexed connections over the same TCP link1Originally meant to upgrade http to https, just like STARTTLS for mail


URI, URL, URN

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




URI, URL, URN

Uniform Resource Identifiers (RFC 3986)

A URI can have two formsA URL (Uniform Resource Locator)

https://www.os3.nl/

ftp://ftp.nluug.nl/pub/os/BSD/

Often identifies the location and access mechanism of the resource

A URN (Uniform Resource Name)

urn:<NID>:<NID-specific>

urn:ietf:rfc:2648

urn:isbn:0-97-606188-0

Gives a name to a resource in a certain namespace


https://www.os3.nl/

ftp://ftp.nluug.nl/pub/os/BSD/

urn:<NID>:<NID-specific>

urn:ietf:rfc:2648

urn:isbn:0-97-606188-0

URI, URL, URN

Uniform Resource Locators

<scheme>:<scheme-specific>

<scheme> is often some Internet protocolhttp, ftp, telnet, rtsp

<scheme-specific> often starts with “//” to indicate thatan Internet address (IP address or DNS domain name) follows

This is called the “authority” part

Other schemes: mailto, news


URI, URL, URN

HTTP URLs

<scheme>":" <hierarchy-indicator>http://

<authority>[<userinfo>"@"] <host>[":" <port>]

<path>either begins with “/” or is empty, see RFC 3986

"?" <query>gives extra parameters for identifying the resource

"#" <fragment>secondary (sub)resource, mostly used in URI-references2

2A URI reference is a “relative URI”, which has to be completed by softwareKarst Koymans (UvA) WWW Friday, October 7, 2016 42 / 63

Protocol

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol




Protocol

HTTP/1.1

RFCs 7230-7235

Uses <CR><LF> as end of line convention

HTTP request/responserequest/response linerequest/response headersempty lineoptional body


Protocol

HTTP/1.1 request

<method> <path3> <HTTP-version>

GET (to get/load a resource)HEAD (to fetch only the headers)PUT (to store a resource)POST (to provide input in the body to server side scripts)DELETE (to delete a resource)OPTIONS (to query the server options)

3The path may include a query, but no fragmentKarst Koymans (UvA) WWW Friday, October 7, 2016 45 / 63

Protocol

HTTP/1.1 response

<HTTP-version> <status-code> <comment>HTTP/1.1 200 OKHTTP/1.1 301 Moved PermanentlyHTTP/1.1 400 Bad RequestHTTP/1.1 404 Not FoundHTTP/1.1 501 Method Not Implemented


Protocol

HTTP/1.1 request headers

User-Agent: <client identification>

Host: <(virtual) server name>

Cookie: <stored user tracking information>

Date: <date/time message sent>

Authorization: <credentials>

. . . many more. . .


Protocol

HTTP/1.1 response headers

Content-Type: <MIME type>

Content-Length: <page length in bytes>

Last-Modified: <date of last page change>

Set-Cookie: <string to keep state>

Location: <redirection information>

. . . many more. . .


Protocol

HTTP/2

Based on SPDY

Defined in RFC 7540

Improves efficiency and uses multiplexed streams

Has flow control and prioritization

Implements server push modeStarts out as a normal http(s) connection

Uses “Upgrade: h2c” for http connectionsUses ALPN (Application-Layer Protocol Negotiation)TLS extension (RFC 7301) for https connectionswith the “h2” protocol identifier


Markup (a quick recap from Essential Skills)

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol





Markup

SGML XML

HTML XHTML



SGML

Standard Generalized Markup Language<!DOCTYPE . . . >

<!ELEMENT . . . >

<!ATTLIST . . . >

<!ENTITY . . . >

DTD: Document Type Definition



HTML

Instantiation of SGML<!DOCTYPE HTML PUBLIC

“-/W3C/DTD HTML 4.01//EN”http://www.w3.org/TR/html4/strict.dtd

>

All else is bogus: <BLINK>, . . .


http://www.w3.org/TR/html4/strict.dtd


XML

Simpler reformulation of SGML

Some differencesEvery start tag must have a close tagAttribute values must always be quoted<?xml . . . > processing instructions reserved. . .



XHTML

XML specification of HTML, which still needs a DTDhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

The DTD can be replaced by an XML Schema instancehttp://www.w3.org/TR/xhtml1-schema/#xhtml1-strict

making all syntax XML based

XML Schema is also referred to as WXS (W3C XML Schema)

or XSD (XML Schema Definition)

There are other XML schemata like RELAX NG or Schematron


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1-schema/#xhtml1-strict


W3C activities

See http://www.w3.org/

HTML, XML, XHTMLCSS, XSLRDF, Semantic WebXML SchemaSOAP, Web ServicesAccessibility, Internationalization (I18N)


http://www.w3.org/


CSS, XSL

Cascading Style Sheets (CSS1, CSS2, CSS3, CSS4, . . . )Starting with CSS3 the specification is modular

Extensible Stylesheet Language (XSL)XSL Transformations (XSLT)XSL Formatting Objects (XSL-FO)XML Path Language (XPath)



RDF (1)

Resource Description Framework

Metadata

Semantic Web“Web 3.0”KnowledgeMachine readable informationReinventing Mathematical Logic (?)



RDF (2)

Example from UvA/SNE researchNDL (Network Description Language)http://www.science.uva.nl/research/sne/ndl/


http://www.science.uva.nl/research/sne/ndl/


XML Schema

Replacement for an SGML DTD

Is written itself in XML syntax

Has support for built-in datatypes


Hybrids (the way forward ?!)

Outline

...1 WWW history

...2 Basic concepts

...3 Client side

...4 Server side


...6 URI, URL, URN

...7 Protocol





HTML5 (1)

Tries to address “web applications”Typical example is Adobe Flash

Returns to HTML as a basis, but improves and extends itIntroduces new tags, for instance

<nav>

<video>, <audio>

<canvas>, <figure>

Promoted by the WHATWG (Apple, Mozilla, Opera)Web Hypertext Application Technology Working GroupAlso W3C now has its own HTML5 specification



HTML5 (2)

HTML5 builds upon and is backward compatible withHTML4XHTML1DOM Level 2

HTML5’s use of DOCTYPEs<!DOCTYPE html>

<!DOCTYPE html SYSTEM "about:legacy-compat">

Revival of “Tag soup”But with standardized error handling


world wide web aka “the internet” · world wide web aka “the internet” karst koymans...

Documents