fundamentals of web-centric development

24
Presentation 2: Internet History and Composition Fundamentals of Web-Centric Development

Upload: rocco

Post on 19-Jan-2016

39 views

Category:

Documents


0 download

DESCRIPTION

Fundamentals of Web-Centric Development. Presentation 2: Internet History and Composition. Agenda. History of the Internet Hypermedia Systems Background of World Wide Web World Wide Web Consortium Protocols of the Internet HTTP Snippet HTML Snippet Developing for the Internet. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Fundamentals of Web-Centric Development

Presentation 2:

Internet History and Composition

Fundamentals of Web-Centric Development

Page 2: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 2

Agenda

• History of the Internet• Hypermedia Systems• Background of World Wide Web• World Wide Web Consortium• Protocols of the Internet• HTTP Snippet• HTML Snippet• Developing for the Internet

Page 3: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 3

Internet History

• "Galactic Network" concept – J.C.R. Licklider,

• ”The Global Village”– Marshall McLuhan 1964

• “ARPAnet”– Predecessor of today's Internet– ARPA (Advanced Research Projects Agency of DOD)– Quickly spread to US Universities and research facilities– Around 12 Universities and Institutions with 50kb– Originally intended for sharing computer resources– Communication turned out to be more important

Vinton Cerf Bob Kahn

Page 4: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 4

Internet History II

• ARPA’s Goals:– Allow Concurrent Users to Send and Receive Data– Use of packet switching techniques

• Data send as packets of data

• Each packet containing: address, error and sequence info

• Packet switching minimizes price and maximizes throughput

• Designed not to dependent on central control

• Designed to be fault tolerant

• If part of the network fails, data may be rerouted

• Using a Gateway (today’s Router)

– Using Network Control Program (NCP) protocol – TCP Introduced in 1975-77 – NCP and TCP side by side until 1983

Page 5: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 5

Internet History IV

• Problem of ARPAnet: – Multitude of HW & SW developed in the seventies– Not able to communicate

• ARPA develops Internetworking Protocol (IP)• TCP/IP = the Internet Protocol Suite = foundation of the Internet• 1983 ARPAnet was running TCP/IP v4 (only approved protocol)

– Still limited to primarily Universities and the Military

• The ARPAnet from 1983 ->– Still US Government controlled and funded– Several TCP/IP gateways constructed to interact with ARPAnet– 1983: DNS (Domain Name System) invented – 1983: Military part split off into MILNET – 1990: MILNET becomes the Defence Data Network (NIPRNET)– ARPA hands over control to NSF (National Science Foundation)

Page 6: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 6

Internet History V• 1986: National Science Foundation Network (NSFNet) goes online

– Backbone to which regional and academic networks would connect.– 1988: Original 56kb links upgraded to 1.5 Mbit/s – 1991: 45 Mbit/s

• 1990: ARPAnet is closed

• Late 1980s: First Internet Service Provider (ISP) companies formed: PSINet, UUNet, Netcom & Portal Software

• 1984: CERNET (European Internet) switches to TCP/IP• 1989: CERNET is connected to NSFNET

• 1995: NSFNET Backbone transitioned to Network access points.• 1995: NSFNET is privatized and open for all – the Internet

• Late 1970s and early 1980s: Primarely Email and File sharing• 1980s: Rise of Hypermedia Systems – including WWW - HTTP

Page 7: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 7

Internet History V

• Birth of “The Internet”• When was the Internet Born?

– Packet Swithcing?– ARPAnet?– TCP/IP?– Opening up to the World and Business?– There was never one exact date which is the birthday of

the Internet

Page 8: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 8

Hypermedia Systems• Hyper – Modern Greek term for ”over” or ”beyond”• Hypermedia meaning "more than a media”

– Graphics, audio, video, plain text and hyperlinks intertwine to create a generally non-linear medium of information

– Coined by Ted Nelson 1965

• Hypertext: non-linear texts (more than a text)• Hypermedia Systems: a way to publish

information and augmenting these, e.g. by allowing the use of Hyperlinks and other link types

• World Wide Web: is an example of such a system

Page 9: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 9

Hypermedia Systems II - Links

– Organizational links: • Structured• Tree Structures

– Keyword links: • Implicit links• Searching for Keywords

– Cluster links:• Many to Many Relations

– Typed links:• Links with Attributes

– Action links:• Link with an Active Script

– Hot/Warm links:• Data Transferred Continuous

– Many others

HTML – Hyper Text Markup Language does not support many link types. JavaScript, DHTML, Flash, AJAX and other support technologies have only recently made some of these available

Researchers worked through the 70’s and 80’s on a multitude of link types, implemented by various Hypermedia Systems.

Page 10: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 10

Hypermedia Systems III – the Start

• Concept of Hypermedia System not new

• In 1945 Vannevar Bush (1890-1974) wrote the article ”As we may think”

• Bush was leader of the US ”Office of Scientific Research and Development”

• Calls for Hypermedia-like systems to support knowledge workers

Page 11: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 11

As We May Think

• Hypertext, personal computers, the Internet, the World Wide Web, speech recognition, and online encyclopedias are forseen in the article

http://www.theatlantic.com/magazine/archive/1969/12/as-we-may-think/3881/1/http://www.theatlantic.com/magazine/archive/1969/12/as-we-may-think/3881/1/

Page 12: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 12

Hypermedia Systems III• Hypermedia Systems in the 70’s and 80’s

– KMS

• Text and Graphic with a Powerpoint like navigation

• CSCW support, versioning, concurrency, security, search facilities

• Links:

Two-way links and annotations –links embedded in viewer

– Intermedia

• Tex, Graphic, Links and search facilities

• Consistent GUI Links - Two-way linking and anti Dangling links (as opposed to HTML)

– Notecards:

• Graphical Browser (as opposed to first HTML)

• Text, Graphic and Links and search facilities

• Built-in script programming language (LISP)

• Links: Point-to-node, two-endpoints, two-way links, others

http://en.wikipedia.org/wiki/Timeline_of_hypertext_technologyhttp://en.wikipedia.org/wiki/Timeline_of_hypertext_technology

Page 13: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 13

World Wide Web – History

• Introduced 1990 by Tim Berners-Lee• A global Hypermedia System running on the Internet• Integration to many existing Internet services:

– Gopher, FTP, WAIS, News, MAIL, DNS

• Text format: HTML – Hyper Text Markup Language• TCP/IP Application Level Protocol:

– HTTP: Hyper Text Transfer Protocol

• Naming Conventions (from the existing DNS system): – URL = Uniform Ressource Locator– Ex: http://www.jyskebank.dk

• A “Browser” Interprets the HTML for the user

Page 14: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 14

WWW Timeline

• 1989: – Tim Berners-Lee proposes the World Wide Web Project at CERN

• 1990:– Fist Web Server and Client made by December

• 1991:– WWW software available for download on the Internet

• 1991-93: – Protocols defined and revised

• 1993:– Marc Andreessen develops the Mosaic Browser at NCSA

• 1994:– Tim Berners-Lee elected as chairman of the W3 Consortium– Marc Andreessen & James Clark starts Netscape

• 1995:– Digital opens AltaVista for public access on September 15– Microsoft launches its browser Internet Explorer

Page 15: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 15

World Wide Web Consortium

• W3C– Established October 1994 to lead WWW into the future

and exploit its full potential– Run by a Chairman, a Director and a Staff– Work is done in ”Boards” (strategic, technical, business

og law)– W3C responsible for consensus on standardization

work between W3C members (including Microsoft, SUN, IBM, Oracle) regarding WWW standards

Page 16: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 16

How W3C Works

• Note– A Note is a dated announcement of an idea, a comment or a

document.

• Working Draft– A Working Draft is a temporary work paper that W3C pursues with

research and debate.

• Candidate Recommendation– A Candidate Recommendation is work that has been through

intense review activity in one or more Boards.

Page 17: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 17

How W3C Works II

• Proposed Recommendations– A Proposed Recommendation is work that:

• Represents unity within the W3C Group / Boards which has worked on it

• Has been approved by the Director of W3C and given to an Advisory Committee for review

– Recommendations• Is work that has full acceptance within W3C and in effect is a

standardization of the area, recommended by W3C (e.g. XML).

Page 18: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 18

W3C Work Examples (from www.w3.org)

• VoiceXML 2.0 Becomes a W3C Candidate Recommendation– 28 January 2003: W3C is pleased to announce the advancement of the

Voice Extensible Markup Language (VoiceXML) Version 2.0 to Candidate Recommendation. Comments are welcome through 10 April. VoiceXML uses XML to bring synthesized speech, spoken and touch-tone input, digitized audio, recording, telephony, and computer-human conversations to the Web. Read the press release and testimonials. Visit the Voice Browser home page. (News archive)

• CSS 2.1 Working Draft Published

– 29 January 2003: Answering comments received during Last Call, the CSS Working Group has released an interim Working Draft of Cascading Style Sheets, Level 2 Revision 1 (CSS 2.1). Cascading Style Sheets (CSS) is a language used to render structured documents like HTML and XML on screen, on paper, and in speech. The draft brings CSS2 in line with implementations and CSS2 errata, and removes obsolete features. Visit the CSS home page. (News archive)

Page 19: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 19

Protocols of the Internet

• TCP/IP protocol familiy is the cornerstone of the Internet and the World Wide Web

• All Communication on the Internet is based on TCP/IP and the Application Protocols on top

• Well-known Application Protocols:– SMTP for mail– FTP for file transfers– HTTP for browsing– TELNET for terminal control– SNMP Network management

• HTTP is central to this course• Others: should be well-known

Page 20: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 20

Internet Addressing

• Abstract Form:– <protokol>://<uri>/<sti>

• HTTP protocol GET request for an HTML page:– http://www.dr.dk/nyheder/index.htm

• Secure Socket Layer Protocol (HTTP + SSL):– https://www.jyskenetbank.dk

• File Transfer Protocol for file sharing:– ftp://www.dr.dk

Page 21: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 21

Technologies we will meet in the course

• HTTP: Hypertext Transfer Protocol• HTML – HyperText Markup Language (legacy technology)• XHTML – eXtended HyperText Markup Language • XML – eXtensible Markup Lanugage (and related technologies)• XSL – eXtensible Stylesheet Language• CSS – Cascading Style Sheets• DOM – Document Object Model• DHTML – Dynamic HTML• Client side – JavaScript, VBScript• Binary Client Side Technologies: ActiveX, Applets, Flash• Server Side Scripting (covered by later courses)

– JSP: Java Server Pages (SUN)– ASP: Active Server Pages (Microsoft) – ASP.NET (Microsoft)– PHP, CGI

Page 22: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 22

HTTP – This is How it Works

1 HTTP Request (over TCP/IP)GET /request-URI HTTP/version

User enters a URL in a browser (e.g. Firefox)http://www.dr.dk

2

Web server recieves the request:Locates the requested document in the file system, and aux. files, images, css etc. and sends the data as an HTTP response

3

A typical HTTP response could look like something like the below:

HTTP/1.0 200 OKServer: Netscape-Communications/1.1 Date: Tuesday, 25-Nov-97 01:22:04 GMT Last-modified: Thursday, 20-Nov-97 10:44:53 GMT Content-length: 6372 Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML> ...The rest of the HTML document follows below …

The Browser returns the ResponseRenders the HTML document and aux. images, CSS etc. to a user freindly form

Web server found via IP address & DNSTypically listening on port 80

Page 23: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 23

HTML Hypertext Transfer Markup Language

<html> <head><title>Welcome to this simple page</title><link rel=stylesheet href="/stylesheet.css" type="text/css"></head>

<body><table><tr> <td align=left rowspan=2> <a href="http://www.some_other_page.dk"> I am a text link to another page on the www </a> <a href="http://www.some_other_page.dk"> <img src="/images/grafik.gif" alt=”Alternative Text"> </a> </td> <td> <p class=csslinie>Some Text</p> </td></tr></table></body>

</html>

Page 24: Fundamentals of Web-Centric Development

Ingeniørhøjskolen i ÅrhusSlide 24

It Looks Easy – but Beware!

• HTML may appear to be very easy

• Browsers are ”foregiving” – making it even easier

• … but beware – there are many pitfalls

• This is still ”programming”

• Would you program C++ like you do HTML?

• Think Structured and in Standards -> Mission of this course