CSIS-390Some Web

HistoryDr. Eric Breimer

How it came to be… Before developing web applications

it is important to know these two things evolved

InternetWorld Wide Web

(WWW)

Are these things the same?

Internet World Wide Web

ARPAnet ARPANET Advanced Research Projects

Agency

1969, Cold War, Military Applications

1969

1970

1971

1972

1977

ARPAnet Originally, network applications for sharing

data and messages 1968-1973 1971 Email concept developed

Person can have an identifier name@network

Virtual mailbox

By 1973 Email was 75% of the ARPAnet traffic File Transfer Protocol (FTP) was developed in

1973

ARPAnet Internet Transition Period 1971-1983 Packet Switching developed and perfected

Instead of point-to-point persistent connections

Robust, fault-tolerant, efficient, survivable

Network of Networks realized on a large scale The ability to connect

different types of networks TCP/IP

Early Internet 1983-1989

No web browsers, no web pages at all… Only…

Email FTP (document and image sharing) Early message board systems (BB systems) Custom client-server applications

Banking Early business to business E-commerce

In 1989 came the WWW The concepts existed, but one man

implemented the concepts and made them real…

WWW concepts Hypertext concept – Documents can have

links to other documents, just click the text URL concept – Documents, computers, virtual

mailboxes, networks can all have uniform identifier to help locate them

Tim Berners-Lee (TBL)

Programmed the first widely-used web browser web server

which formalized the HTTP protocol, and HTML as a standard language

Also, prompted the widespreaduse of URLs

Before the WWW, finding stuff was hard

To find data on the Internet you had to Know numeric IP addresses to locate FTP servers Login anonymously or with a user account Know the folder hierarchy and file name of the

document/data.

People would share this information via Email. browsing the Internet was no possbile, you just

couldn’t do it. Only “insiders” had access to stuff.

Understanding the WWW HTTP instead of FTP

Web Browser instead of FTP client Web Server instead of FTP server

URLs instead of numeric IP addresses Clicking Hyperlink instead of navigating

through folder hierarchies HTML instead of postscript (meant for print

typesetting) and plain text documents.

So these are not the same thing…

Internet Physical network Hardware TCP/IP Packet Switching Network of

Networks concept

World Wide Web

The content Software HTTP URLs Hyperlinks

WWW Infancy1989-1995

1989 TBL invents first web browser and server 1991-93 Al Gore proposes a bill that funds major

Internet initiatives. Money spent on new fiber optic national network Mosaic (first good graphical web browser) was a funded

project InterNIC, which eventually becomes ICANN, is another

notable product of the Gore Bill. By 1995, Internet traffic moves off NSFnet and on to

commercially operated networks (Verizon, UUNet, Sprint, AT&T, and Genuity) ARPAnet NSFnet Internet II

WWW Commercialization Period 1995-2000

1995 – Netscape become a household name Sells web server software…gives away browser for free Reached almost 90% market share by 1996

1995 – 1996 Microsoft scrambles to come out with competing software (Internet Explore and Web Server)

1996-1999 – Browser Wars between Microsoft and Netscape Two versions of HTML are used in practice Browser specific plug-ins become the norm: Flash, RealMedia,

etc.

1997-2000 – E-commerce Commercial Explosion Amazon, E-bay, Online Stock Trading, MP3 trafficking, etc.

Browser Wars 1996-1999

Microsoft (Internet Explorer) and Netscape compete to be the #1 browser. In ’96 Netscape dominated By ‘99 Internet Explorer was #1

Microsoft Integrated IE into the Windows OS Forced upon people as the default browser Microsoft paid billions in lawsuit (EU mostly) but still won the war

Netscape makes its source code open, so developers can build upon it. Leads to the Mozilla Foundation, which eventually develops Firefox.

In 2000, AOL buys out Netscape, which is was failing financially This marks the end of the war and beginning of Microsoft’s

dominance in the WWW.

Browser Wars - Significance

Early competition pushed web browsers to the limit. Browsers use to be simple client applications

that could render HTML code.

Browsers became heavy-weight applications Microsoft’s dominance was terrible.

Use proprietary (secret) languages and often fought against establishing open standard languages.

Why Standards?Advantages

1. Accessibility

2. Forward Compatibility

3. Simpler and Faster Development

4. Faster Download & Display

Why Standards?

1. Accessibility2. Forward Compatibility

3. Simpler and Faster Development

4. Faster Download & Display

Standardized web pages look good (and sound good) on all browsers and devices

Device to consider: B&W Kindle Cheap Smartphone Computer connect to

Jumbotron at Stadium Screen readers for the

visually impaired

Why Standards?1. Accessibility

2. Forward Compatibility

3. Simpler and Faster Development

4. Faster Download & Display

Future standards are built on top of current standards

A forward compatible design can accept data from a future version of itself and pick out the "known" part of the data. text-only browser ignoring <img>

tag from a future version.

An extensible design is one that can be upgraded to fully handle the new input format. An example is a text-only word

processor that can be upgraded to handle picture data.

Why Standards?1. Accessibility

2. Forward Compatibility

3. Simpler and Faster Development

4. Faster Download & Display

Faster: You don’t have to build separate websites for separate browsers/devices

Concurrent Development:Content and style can be developed separately by different teams.

Why Standards?1. Accessibility

2. Forward Compatibility

3. Simpler and Faster Development

4. Faster Download & Display

Style/Appearance tags are bloated

Rather than load bloated HTML for every page, just load one style sheet for an entire website

• Example: <center> <b> <font face="Georgia, Times New Roman, Times, serif" color=“#880000" size="+2">Sub-title</font> </b> </center>

Rendering Engines Browsers can have two or more rendering engines

Example: parsing standard and non-standard HTML code.

The <!doctype> and <html> tag tells the browser which engine to use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Rendering Engines & Validation

Validated HTML code can be rendered faster. Rendering engine doesn’t have to handle

special cases and errors Non-standard HTML will cause a rendering

error Browser will re-render using a more forgiving

“error correcting” engine. Don’t you wish Java had an “error correcting”

compliler?

Validate Validate Validate http://validator.w3.org/

It’s a pain but… At least you know that your web page will

display properly on about 400 different browser variations.

Who cares if the rendering engine is a little slow?

True, on modern PCs you won’t notice the difference.

However, consider that the device rendering the web page could be a tiny device with a 133 MHz processor.

Standards: The Big Motivation

Consider how many different smart phones exist Each uses a slightly different variation of

Safari, Chrome, or some special browser.1. W3C wants web developers to follow the rules

so browsers do not have to be overly complex2. W3C wants browser developers to follow the

rules so web page look as similar as possible on different devices.

Some key things to remember:

TBL is the most under-rated inventor in the last 100 years.

Web Browsers weren’t always so consistent but they may be in the future.

Device-specific apps may not survive if the W3C can continue to innovate.

Tim Berners-Lee (TBL)

Widely recognized as the inventor of HTML (perfecting the concept of hypertext) URLs (paving the way for web browsing) Implemented first web browser (text based)

and web server (unix daemon).

Should be a billionaire but then the WWW wouldn’t be so cool and free.

I love the man! You should love him too.

Web Browser History 1991: TBL makes the first web browser in his

physics labs. Dr. B gets his braces off and discovers Clearasil.

1993: Mosaic (the first real graphical browser) is built. Free, open source, works for Mac’s, Windows, and UNIX. The birth of free porn.

1994: Netscape emerges and starts to sell a lot of software.

1995: Microsoft wakes up, makes a browser, and tries to monopolize the market.

Browser History 1996-1999: Browser Wars…different

versions of JavaScript, CSS, and HTML emerge. While standards go down the toilet…at least a lot cool sh*t was developed.

1998: Microsoft integrates its browser into Windows 98 and 2000 making it #1. before dying Netscape makes its code Open

Source allowing developers to build upon it.

2000: Microsoft wins! Netscape gets bought by AOL. The .com Bust happens! Dr. B contemplates becoming a pop star but then decides to be a professor.

Browser History 2002: Kelly Clarkson (not Dr. B) wins American

Idol!

2003: Programmers who once worked for Netscape form the Mozilla Foundation

2005: Firefox starts to make a serious dent in Microsoft’s monopoly.

2006: Developers start to follow the standards instead of Microsoft CSS is revitalized.

2012: Chrome is poised to overtake IE, which has been #1 for nearly 15 years.