Successfully reported this slideshow.
Nicholas C. Zakas
@slicknet
@slicknet
1996
“The shroom”
winner
Dial-up 14.4 kbps
http://modyaraa.blogspot.com/2013/02/external-modem-definition-magazine.html
6:00Web page (500 KB)
1:00:00Song (5 MB)
160:00:00Movie (800 MB)
Downloading at 14.4 kbps
Access to Internet
0.00%
5.00%
10.00%
15.00%
20.00%
25.00%
30.00%
35.00%
40.00%
45.00%
0
500
1000
1500
2000
2500
3000
Mill...
Broadband and Dial-Up Adoption, 2000-2012
34%
41%
38% 37%
30%
28%
23%
15%
10%
7% 5%
3% 3% 4%
3%
6%
11%
16%
24%
33%
42%
47%...
1991
Gopher
• User IDs were numeric
– 73562,1023
• First to provide gateway
to “real” Internet (1989)
– 73562.1023@compuserve.com
• Lo...
• Consumer portal pioneer
• Graphical user interface
• ESPN’s first online presence
• Curated news and
information
• Relie...
• Graphical user interface
• Made internet accessible
to consumers
• Lots of local numbers
• Interactive chat rooms
• Inst...
$14.95
$9.95
Base Price
(Month)
2
5
Included Hours*
(Month)
$4.80
$3.50
Additional
Hours
* Both Prodigy and AOL had “free”...
flickr.com/photos/madison_guy/28536066
Instant Messaging and Chatrooms
• Real-time, text-based
communication
• Buddy list
• Away message
• Avatars
• Font control
1993
http://www.flickr.com/photos/marc_smith/447183492/
1994
Access to the “real”
Internet is coming
Internet
WAIS
Gopher
• Cookies
• Secure Socket Layer
(SSL) – 40-bit
• Image Floating
<P><IMG SRC="foo.gif" ALIGN="left">
Some text</p>
<BR CLEAR="left">
BookLink
(no picture available)
http://www.flickr.com/photos/ktylerconk/2929812795/
Internet
WAIS
Gopher
Gopher
HTTP
1995
$48 million
Browser sales – Year 1
• LiveScript
• <font>
• <frameset>
• <embed>
• Java
•
window.navigator
window.setTimeout()
document.forms
document.links
document.cookie
document.location
document.title
alert()
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAMESET ROWS="100, 200">
<FRA...
<A HREF="/contact" TARGET="frame1">Contact Me</A>
Needed to say
which frame to put
the page in
Special values:
_blank
_par...
<BODY BGCOLOR="gray" LINK="blue" VLINK="#ff0000"
BACKGROUND="image.gif” TEXT="#000000">
<FONT SIZE="1" COLOR="#008800">I’m...
<SCRIPT LANGUAGE="JavaScript"><!-- Hide from old browsers
// your script here
--></SCRIPT>
<A HREF="#" ONCLICK="alert('Hi'); return false">
Click Me
</a>
The only way to
assign event
handlers
Netscape has enjoyed a virtual monopoly of the
browser market (about 90% according to some
estimates), and this has allowe...
Birth of the AOL
browser that
bridges Gopher and
WWW
• <BGSOUND>
• <FONT FACE>
• Newsgroups
• VRML
Mozilla/2.02 (WinNT; I)
Best viewed with
Mosaic/0.9
Mozilla/2.02 (WinNT; I)
Mosaic/0.9
Mozilla/1.22 (compatible; MSIE 2.0; Windows 3.1)
No seriously, I’m
Netscape
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
<a>
<address>
<b>
<base>
<blockquote>
<body>
<br>
<cite>
<code>
<dd>
<dir>
<dl>
<dt>
<em>
<form>
<head>
<html>
<select>
<s...
December 7, 1995
“IE will be free”
Netscape (NSCP) -6%, -$340 million
1996
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
28.8 to 56 Kbps
“Blazing fast!”
• JavaScript 1.1
• about:
• view-source:
• <blink>
<SCRIPT LANGUAGE="JavaScript" SRC="external.js"></SCRIPT>
document.write("<p>Hello world!</p>");
document.links[0].onclick...
// preload images so they’re in the cache
var img = new Image();
img.src = "smiley.gif";
function changeImage(url) {
docum...
• JScript
• VBScript
• <frameset> <iframe>
• <marquee>
• CSS
• Java
•
1997
Cracks in the
foundation of AOL
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
1996 Q2 1996 Q3 1996 Q4 1997 Q1 1997 Q2 1997 Q3
Netscape Navigator
Internet Ex...
• JavaScript 1.2
• JavaScript Style Sheets
• CSS (ish)
• Layers
JavaScript 1.2
• Labelled statements
• continue
• do-while
• Array/Object literals
• switch
• delete
• RegExp
• Changed ==...
<SCRIPT LANGUAGE="JavaScript1.2"><!-- Hide from old browsers
// your script here
--></SCRIPT>
JavaScript Style Sheets
<STYLE TYPE="text/javascript">
tags.H1.color="red";
tags.H1.fontStyle="bold";
classes.ugly.all.col...
Layers
<LAYER ID="foo" TOP="5" LEFT="100">
<P>Absolutely positioned content.</p>
</LAYER>
<ILAYER ID="foo" TOP="5" LEFT="1...
Layers
var layer = document.layers[0];
var layer = document.layers["foo"];
var layerCount = documents.layers.length;
layer...
• Trident engine
• document.all
• innerHTML
• Favicons
• Updated JScript/VBScript
• Transitions/Filters
• Data Binding
• I...
<layer>
<ilayer>
<frame>
<div>
<span>
<iframe>
Event Propagation
<HTML>
<BODY>
<DIV>Click Me</DIV>
</BODY
</HTML>
Event Propagation
elem.onclick = function(event) {
// event object passed in
};
elem.onclick = function() {
// retrieve event object
var eve...
event.type
event.target
event.which
event.modifiers
event.type
event.srcElement
event.keyCode
event.button
event.shiftKey
...
Event Handling
function handleClick(event) {
event = event || window.event;
var target = event.target || event.srcElement;...
// basis for preventDefault
event.returnValue = false;
// basis for stopPropagation
event.cancelBubble = true;
// basis for getElementById
var myElement = document.all.elementId;
// basis for getElementsByTagName
var paragraphs = doc...
// standardized
myElement.innerHTML = "<b>Hello!</b>";
var myChildren = myElement.children;
myElement.insertAdjacentHTML("...
Browser Sniffing (eek!)
if (document.layers) {
// must be Netscape!
} else if (document.all) {
// must be IE
}
Consolidation of
online service
providers begins
1998
$88 million
Net Loss – 1997 Q4
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
Seriously, who
didn’t see this
coming?
• Bidirectional text
• Improved CSS support
• Ruby characters
• ECMAScript 1 support
• XML/XSLT in JavaScript
• XMLHttp ob...
var xhr = new ActiveXObject("MSXML2.XMLHttp");
xhr.open("get", "foo.htm", true);
xhr.onreadystatechange = function() {
if ...
And Then
1999 – No major release
2000 – No major release
2001 – No major release
2002 – Version 6
2003 – Version 7
1999 – No major ...
New-media
company buys old-
media company
Internet
HTTP
HTTP
Thank you
Etcetera
• My blog: nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Upcoming SlideShare
Loading in …5
×

Browser Wars Episode 1: The Phantom Menace

51,345 views

Published on

  • Thanks for share your idea, We have also maintain a slide side of our company CPH Graphics Media - www.clippingpathhouse.com You may visit our site will be help by any way.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I set it to music - I hope you don't mind. I get bored clicking through but I like synchronized with music. So: https://www.youtube.com/watch?v=SHXct5Gz_R8&amp;feature=youtu.be
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Browser Wars Episode 1: The Phantom Menace

  1. Nicholas C. Zakas @slicknet
  2. @slicknet
  3. 1996
  4. “The shroom”
  5. winner
  6. Dial-up 14.4 kbps
  7. http://modyaraa.blogspot.com/2013/02/external-modem-definition-magazine.html
  8. 6:00Web page (500 KB) 1:00:00Song (5 MB) 160:00:00Movie (800 MB) Downloading at 14.4 kbps
  9. Access to Internet 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% 0 500 1000 1500 2000 2500 3000 Millions of Internet Users % World Population Dec ‘06 36m/0.9% http://www.internetworldstats.com/emarketing.htm
  10. Broadband and Dial-Up Adoption, 2000-2012 34% 41% 38% 37% 30% 28% 23% 15% 10% 7% 5% 3% 3% 4% 3% 6% 11% 16% 24% 33% 42% 47% 55% 63% 66% 62% 66% 65% 0% 10% 20% 30% 40% 50% 60% 70% June 2000 April 2001 March 2002 March 2003 April 2004 March 2005 March 2006 March 2007 April 2008 April 2009 May 2010 Aug 2011 April 2012 Dec-12 % of American adults who access the internet via dial-up or broadband, over time Dial-up Broadband http://pewinternet.org/Trend-Data-(Adults)/Home-Broadband-Adoption.aspx
  11. 1991
  12. Gopher
  13. • User IDs were numeric – 73562,1023 • First to provide gateway to “real” Internet (1989) – 73562.1023@compuserve.com • Loved for its forums • Created GIF format • Most users were geeks
  14. • Consumer portal pioneer • Graphical user interface • ESPN’s first online presence • Curated news and information • Relied on online shopping and advertising to offset costs • First to provide gateway to the World Wide Web • Message boards galore
  15. • Graphical user interface • Made internet accessible to consumers • Lots of local numbers • Interactive chat rooms • Instant messaging • Visually rich content accessible by keyword • Outpriced everyone
  16. $14.95 $9.95 Base Price (Month) 2 5 Included Hours* (Month) $4.80 $3.50 Additional Hours * Both Prodigy and AOL had “free” and “paid” sections. Time spent in “free” sections did not count against the monthly hours. 1993
  17. flickr.com/photos/madison_guy/28536066
  18. Instant Messaging and Chatrooms • Real-time, text-based communication • Buddy list • Away message • Avatars • Font control
  19. 1993
  20. http://www.flickr.com/photos/marc_smith/447183492/
  21. 1994
  22. Access to the “real” Internet is coming
  23. Internet WAIS Gopher
  24. • Cookies • Secure Socket Layer (SSL) – 40-bit • Image Floating
  25. <P><IMG SRC="foo.gif" ALIGN="left"> Some text</p> <BR CLEAR="left">
  26. BookLink (no picture available)
  27. http://www.flickr.com/photos/ktylerconk/2929812795/
  28. Internet WAIS Gopher Gopher HTTP
  29. 1995
  30. $48 million Browser sales – Year 1
  31. • LiveScript • <font> • <frameset> • <embed> • Java •
  32. window.navigator window.setTimeout() document.forms document.links document.cookie document.location document.title
  33. alert()
  34. <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAMESET ROWS="100, 200"> <FRAME SRC="contents_of_frame1.html"> <FRAME SRC="contents_of_frame2.gif"> </FRAMESET> <FRAME SRC="contents_of_frame3.html" NAME="main"> <NOFRAMES> <P>Sucks to be you.</p> </NOFRAMES> </FRAMESET> </HTML>
  35. <A HREF="/contact" TARGET="frame1">Contact Me</A> Needed to say which frame to put the page in Special values: _blank _parent _self _top
  36. <BODY BGCOLOR="gray" LINK="blue" VLINK="#ff0000" BACKGROUND="image.gif” TEXT="#000000"> <FONT SIZE="1" COLOR="#008800">I’m blue</FONT> <CENTER>Center me, please</CENTER> <BIG>I am bigger</BIG> <SMALL>I am smaller</SMALL> <SCRIPT LANGUAGE="JavaScript">
  37. <SCRIPT LANGUAGE="JavaScript"><!-- Hide from old browsers // your script here --></SCRIPT>
  38. <A HREF="#" ONCLICK="alert('Hi'); return false"> Click Me </a> The only way to assign event handlers
  39. Netscape has enjoyed a virtual monopoly of the browser market (about 90% according to some estimates), and this has allowed it to consolidate its position still further by introducing unofficial or 'extended' HTML tags. As a result, the Web is littered with pages that only work effectively if viewed in Navigator. By the time other browsers catch up, Netscape has made even more additions. http://web.archive.org/web/20050325180847/http://www.macuser.co.uk/macuser/re views/16110/microsoft-internet-explorer-21.html “
  40. Birth of the AOL browser that bridges Gopher and WWW
  41. • <BGSOUND> • <FONT FACE> • Newsgroups • VRML
  42. Mozilla/2.02 (WinNT; I) Best viewed with Mosaic/0.9
  43. Mozilla/2.02 (WinNT; I) Mosaic/0.9 Mozilla/1.22 (compatible; MSIE 2.0; Windows 3.1) No seriously, I’m Netscape
  44. Internet WAIS Gopher HTTP Gopher HTTP
  45. <a> <address> <b> <base> <blockquote> <body> <br> <cite> <code> <dd> <dir> <dl> <dt> <em> <form> <head> <html> <select> <strong> <title> <tt> <ul> <var> <xmp> <hr> <h1>…<h6> <i> <img> <input> <isindex> <kbd> <listing> <link> <menu> <meta> <nextid> <ol> <option> <p> <pre> <samp>
  46. December 7, 1995 “IE will be free” Netscape (NSCP) -6%, -$340 million
  47. 1996
  48. Internet WAIS Gopher HTTP Gopher HTTP
  49. 28.8 to 56 Kbps “Blazing fast!”
  50. • JavaScript 1.1 • about: • view-source: • <blink>
  51. <SCRIPT LANGUAGE="JavaScript" SRC="external.js"></SCRIPT> document.write("<p>Hello world!</p>"); document.links[0].onclick = myHandler; document.forms["formName"].elements[0].value; typeof foo; // typeof null == "object"
  52. // preload images so they’re in the cache var img = new Image(); img.src = "smiley.gif"; function changeImage(url) { document.images[0].src = url; } <A HREF="#" ONMOUSEOVER="changeImage(‘smiley.gif’)" ONMOUSEOUT="changeImage(‘frown.gif’)"> <IMG SRC="frown.gif"> </A>
  53. • JScript • VBScript • <frameset> <iframe> • <marquee> • CSS • Java •
  54. 1997
  55. Cracks in the foundation of AOL
  56. Internet WAIS Gopher HTTP Gopher HTTP
  57. 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 1996 Q2 1996 Q3 1996 Q4 1997 Q1 1997 Q2 1997 Q3 Netscape Navigator Internet Explorer Mosaic Browser Market Share Usage share data from: EWS Web Server at UIUC
  58. • JavaScript 1.2 • JavaScript Style Sheets • CSS (ish) • Layers
  59. JavaScript 1.2 • Labelled statements • continue • do-while • Array/Object literals • switch • delete • RegExp • Changed == and !=
  60. <SCRIPT LANGUAGE="JavaScript1.2"><!-- Hide from old browsers // your script here --></SCRIPT>
  61. JavaScript Style Sheets <STYLE TYPE="text/javascript"> tags.H1.color="red"; tags.H1.fontStyle="bold"; classes.ugly.all.color = "purple"; classes.ugly.all.fontStyle = "italic"; contextual(tags.OL, tags.LI).listStyleType = "upper-alpha"; </STYLE>
  62. Layers <LAYER ID="foo" TOP="5" LEFT="100"> <P>Absolutely positioned content.</p> </LAYER> <ILAYER ID="foo" TOP="5" LEFT="100"> <P>Relatively positioned content.</p> </ILAYER> <LAYER SRC="somepage.htm ONLOAD="doSomething()"></LAYER> <NOLAYER> <P>No layers for you.</P> </NOLAYER>
  63. Layers var layer = document.layers[0]; var layer = document.layers["foo"]; var layerCount = documents.layers.length; layer.top = 25; // move it! layer.siblingAbove, layer.siblingBelow, layer.parentLayer
  64. • Trident engine • document.all • innerHTML • Favicons • Updated JScript/VBScript • Transitions/Filters • Data Binding • Integrated with Windows 95
  65. <layer> <ilayer> <frame> <div> <span> <iframe>
  66. Event Propagation <HTML> <BODY> <DIV>Click Me</DIV> </BODY </HTML>
  67. Event Propagation
  68. elem.onclick = function(event) { // event object passed in }; elem.onclick = function() { // retrieve event object var event = window.event; };
  69. event.type event.target event.which event.modifiers event.type event.srcElement event.keyCode event.button event.shiftKey event.ctrlKey event.altKey
  70. Event Handling function handleClick(event) { event = event || window.event; var target = event.target || event.srcElement; // ready to go }
  71. // basis for preventDefault event.returnValue = false; // basis for stopPropagation event.cancelBubble = true;
  72. // basis for getElementById var myElement = document.all.elementId; // basis for getElementsByTagName var paragraphs = document.all.tags("P"); // basis for parentNode var parent = myElement.parentElement; myElement.innerText = "Hi!";
  73. // standardized myElement.innerHTML = "<b>Hello!</b>"; var myChildren = myElement.children; myElement.insertAdjacentHTML("<b>Hello!</b>", "beforeend"); document.body.contains(myElement);
  74. Browser Sniffing (eek!) if (document.layers) { // must be Netscape! } else if (document.all) { // must be IE }
  75. Consolidation of online service providers begins
  76. 1998
  77. $88 million Net Loss – 1997 Q4
  78. Internet WAIS Gopher HTTP Gopher HTTP
  79. Seriously, who didn’t see this coming?
  80. • Bidirectional text • Improved CSS support • Ruby characters • ECMAScript 1 support • XML/XSLT in JavaScript • XMLHttp object
  81. var xhr = new ActiveXObject("MSXML2.XMLHttp"); xhr.open("get", "foo.htm", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { allDone(); } }; xhr.send();
  82. And Then
  83. 1999 – No major release 2000 – No major release 2001 – No major release 2002 – Version 6 2003 – Version 7 1999 – No major release 2000 – Version 5.5 2001 – Version 6 2002 – No major release 2003 – No major release
  84. New-media company buys old- media company
  85. Internet HTTP HTTP
  86. Thank you
  87. Etcetera • My blog: nczonline.net • Twitter: @slicknet • These Slides: slideshare.net/nzakas

×