Transcript CSIS-401: Web Application Design and Development

CSIS-390
Some Web
History
Dr. Eric Breimer
How it came to be…
 Before developing web applications it is
important to know these two things
evolved
Internet
World 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 widespread
use 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
World Wide Web
 Physical network
 The content
 Hardware
 Software
 TCP/IP
 HTTP
 Packet Switching
 URLs
 Network of Networks
 Hyperlinks
concept
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.
Accessibility
2.
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.
2.
Accessibility
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.
4.
Simpler and Faster
Development
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 complex
2. 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.