browser wars episode 1: the phantom menace

168
Nicholas C. Zakas @slicknet

Upload: nicholas-zakas

Post on 15-Jan-2015

34.121 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

  • 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) [email protected] Loved for its forums Created GIF format Most users were geeks 14. Consumer portal pioneer Graphical user interface ESPNs 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.

Some text


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 Java 32. window.navigator window.setTimeout() document.forms document.links document.cookie document.location document.title 33. alert() 34. A simple frameset document

Sucks to be you.

35. Contact Me Needed to say which frame to put the page in Special values: _blank _parent _self _top 36. Im blue

Center me, please

I am bigger I am smaller 38. Click Me 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. 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, Im Netscape 44. Internet WAIS Gopher HTTP Gopher HTTP 45.

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: 51. document.write("

Hello world!

"); document.links[0].onclick = myHandler; document.forms["formName"].elements[0].value; typeof foo; // typeof null == "object" 52. // preload images so theyre in the cache var img = new Image(); img.src = "smiley.gif"; function changeImage(url) { document.images[0].src = url; } 53. JScript VBScript 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. 61. JavaScript Style Sheets 62. Layers

Absolutely positioned content.

Relatively positioned content.

No layers for you.

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.

66. Event Propagation
Click Me
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 = "Hello!"; var myChildren = myElement.children; myElement.insertAdjacentHTML("Hello!", "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 didnt 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