Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

54,187 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

×