Browser Wars Episode 1: The Phantom Menace

  • 33,502 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
33,502
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
32
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 133 MHz, 16 MB RAM, 1.2 GB Hard drive
  • You might have thought from the first slide that this would be a story about Internet Explorer. It is, but moreso it’s about the two companies that came beforehand: America Online and Netscape. At one point in time these two companies basically controlled the Internet. The story of how that changed is really the story of how the Internet itself changed.
  • To understand how those two companies became so powerful, we need to go back even further in time to 1991.
  • In 1991, CompuServe was the most popular online service, followed by Prodigy, followed by a AOL
  • Gopher was released from researchers at the University of Minnesota. This was the first nearly consumer-friendly way of accessing the internet.
  • Gopher was basically a glorified file system browser. You could have folders and documents, and it created a nice click-through interface for you. Gopher looked a lot like a very early version of the web.
  • Real Internet wasn’t much then. Gopher wasn’t even available. Mostly just email.
  • This is what the welcome screen for AOL looked like. Prior to this, you would have chosen your local dialup numbers. You select your username from the dropdown, enter your password, and then click Sign On.
  • This was the fun part, AOL showed a three-part status update while waiting to connect. The first part was for dialing, the second was for establishing the connection, and the third for when your session was ready. If the number was busy or someone in your house picked up the phone, the process was broken and would start over.
  • Once you signed in, you were greeted with a very visual welcome page. This was a forerunner to modern web portals like the Yahoo homepage. This was AOL 3.0.
  • Over time, they jacked up the content and visuals to keep users interested. It was very pretty.
  • Another thing AOL figured out was the idea of unique identifiers for different pieces of content. Most other services made you navigate through menus to find what you were looking for. Every AOL screen had a keyword that, when entered, allowed you to jump right to that content. If you were a content provider on AOL, you could buy a keyword. It was common to see advertisements saying, “Visit us on AOL keyword foo”.
  • AOL had the content, and this was considered pretty graphical at that point in time. It was easy to use and more importantly, easy for content providers to create.
  • Over time, these destinations became more graphical in nature as that’s what consumers demanded. AOL had a pretty good thing going, they were both collecting money on both ends: from users to access the system and from content providers to create these screens. Prodigy and Compuserve were slow to improve their visuals and AOL took advantage.
  • What really made AOL popular was the chat capabilities. They more or less invented instant messaging as we know it today and became the go-to place for chatrooms. They invented things like the away message and buddy list and over time gave everyone a lot of control over the chat experience. I can tell you from personal experience, this was incredibly addictive.
  • At this point, AOL decided to start allowing access through them to the regular internet. For most people, that meant dialing into AOL and then doing something in AOL to get to the “real” Internet. At the time, there were no big pure ISPs – you have AOL, Prodigy, and Compuserve – cable and telephone providers hadn’t yet started selling direct plans.
  • By this time, AOL had leapfrogged the competition and was the #1 online service provider. It was a mammoth in the industry with deep pockets and a ruthless approach to the competition.
  • Keep in mind that the “real” Internet wasn’t what it is today. In fact, in the early days of AOL, you weren’t ever really on the Internet. It was a closed network of members who primarily communicated with each other and the parties who were in AOL. You email outside of the network by using the @ in someone’s address, and people could email to you by using @aol.com, but most time was spent in the AOL network.
  • At this point, AOL decided to start allowing access through them to the regular internet. For most people, that meant dialing into AOL and then doing something in AOL to get to the “real” Internet. At the time, there were no big pure ISPs – you have AOL, Prodigy, and Compuserve – cable and telephone providers hadn’t yet started selling direct plans.WAIS = Wide Area Information Servers
  • For AOL, this wasn’t a big gamble. The Internet was really just FTP, email, and Gopher, none of which could challenge the GUI that AOL slapped onto online content. For all intents and purposes, AOL was throwing the Internet a bone by making access to Gopher easier. They knew damn well that consumers would choose the GUI-based AOL over the text-based Internet every day of the week. Plus, all of the content people wanted was on AOL, so chances are many people wouldn’t explore via Gopher anyway.
  • However, this was the year Netscape came about, co-founded by a guy you might remember, Marc Andreesen. The goal was to commercialize the Internet web browser and would change the fate of the Internet.
  • This was Mosaic Netscape 0.9. Originally, they thought “Mosaic” was important to include so that people would know it was a web browser. Eventually, the University of Illinois was unhappy enough that they dropped it from the name. The code name of the project was “Mozilla”, which is short for “Mosaic Killa”, believing that commercial success waiting.
  • This was Netscape 1.0. Initially they planned to make Netscape free, and version 1.0 was available free for download for everyone. What you see here is pretty much what the web was at that point in time: gray background, black text, with some images thrown in for fun. This was clearly not competition for the AOL content, and so AOL didn’t flinch as other companies started making web browsers. They had the content people wanted, the web was really just a place for random stuff that no one could really find.
  • Some of the things that were new: cookies, which were first created for an online shopping cart, were created by Netscape and included in the first version. They also invented SSL and shipped 1.0 with the first browser in response to concerns. Image floating was created as a way to offset images inside of text, this was the ancestor of CSS floats.
  • It was in 1994 that a forgotten part of the Internet puzzle fell into place. A company called Spyglass that was initially setup in 1990 to help commercialize the work of the NCSA officially licensed the Mosaic technology. However, in its efforts to create its own web browser, Spyglass ended up writing its own from scratch without using the licensed technology at all. In effect, Spyglass Mosaic wasn’t Mosaic in anything but its name. Spyglass then started licensing its own technology as part of its business. Keep this in mind, we’ll see them again.
  • Spyglass and Netscape weren’t the only companies interested in web browsing. BookLink was founded in 1994 and created its own web browser. For a company you’ve probably never heard of, they were quite the hot commodity. They were approached that same year by Microsoft wanting to buy them for $2 million. Microsoft wanted to get into the web browser business and was gearing up for a push in Windows 95. AOL offered the equivalent of $30 million in stock to acquire BookLink later that year, leaving Microsoft behind in the game.
  • If you were to look back in time as AOL and pinpoint a moment where your demise began, this would be it. They failed to see the warning signs. The fact that they had to outbid Microsoft for BookLink should have been an indicator. Here’s why.
  • Up until this point, AOL was the dominant online provider and ISP provider. They had all the interesting content and the content on the web was mostly academic stuff. It wasn’t pretty to look at and inhabited by geeks. People came to AOL for the good stuff and then maybe went to the Internet for other stuff, but they still did that through AOL. Now Netscape and other browsers allowed you to access the Internet without going through AOL. So you could get to the subpar Internet content through a web browser. However, you’d still need an Internet connection, and AOL was the most obvious solution. That’s why AOL didn’t care. You still needed them to get to the Internet from your home one way or another. What they failed to realize is that this created an obvious vacuum that was begging to be filled: if you could have an ISP allow you to connect directly to the Internet, you’d no longer need to go through AOL. But once again, the compelling content, the chats, the instant messaging, was all one AOL at this point, so they thought they were safe.Nevermind the fact that Microsoft clearly wanted to get into the Internet business. They had a ton of money and were ready to spend it, clearly betting on the Internet to dethrone AOL.
  • Towards the end of 1994, Microsoft tried to buy Netscape outright. After having lost out on the BookLink deal, they were desperate to get involved with the Internet. Netscape turned them down because the offer was too low (a common theme from Microsoft, it appears) and the stage was now set.
  • 1995 was a big year for Microsoft. They were planning on releasing Windows 95, the most significant update to Windows they had ever made. It completely changed the paradigm for using Windows computers and most of the aspects in it remained through Windows 7, including the task bar and start button. They wanted to have an Internet browser (not Netscape) to ship with the operating system, which is why they had contacted BookLink about acquiring their software. When that failed, they were forced to take another route.
  • That other route took them back to Spyglass. You may remember Spyglass had licensed Mosaic from NCSA but then wrote their own browser. Microsoft struck a deal with Spyglass to pay them a fixed quarterly amount plus a percentage of revenues resulting from sales of the Microsoft browser.
  • Internet Explorer 1 was released quietly with Windows 95 Plus. It was a bit hidden in the release and so didn’t amount to anything. It didn’t have a separate logo from the Windows 95 logo, basically making it the “Windows Browser”. Internet Explorer 2 had the same design and was released later that year for both Windows and Mac, integrated more features such as cookies (debuted in Netscape 1), SSL, VRML, JavaScript, HTML 3 (tables, frames, bgsound, text font tag), RSA, PPP network stack.
  • Meanwhile, Netscape put out it’s first beta of version 2.0.
  • One of the objects created by Netscape was window.navigator. Since “Navigator” was the name of the browser, this object was prescribed to tell you more about the browser. There was no other browser supporting JavaScript at the time, so why not name it Navigator?Early on, you couldn’t reference just any elements in the page, it was only specific elements. Specifically, you could reference forms and links. One of the big early uses for LiveScript was to validate forms before being sent back to the server. Additionally, this is where the cookie, location, and title properties originated.
  • At this point, you couldn’t have anonymous functions even though event handlers did work.
  • This is also where alert, confirm, and prompt came from.
  • Adding the elements for frames wasn’t all, though. Netscape also needed a way to say which frame should display the result of clicking a link. To do that, they created the target attribute on links and forms. The target attribute gave the name of the frame or one of several predefined names that Netscape came up with. Also note that the convention at the time was to write HTML tags in all uppercase.
  • Netscape also added some additional attributes to <BODY>, allowing you to specify background, foreground, and link color options. The <FONT> tag was added to allow you to set the size and color of specific areas of text. The same color names and hex codes are used in CSS today. Then there was the <CENTER> tag, which introduced us to the idea of aligning text in the middle of the page.
  • Since Netscape was the only browser that supported JavaScript, it had to worry about compatibility with older browsers. Mosaic, for instance, would render the HTML code into the page. To prevent that from happening, this pattern was created. Netscape (and every browser since) ignores the first comment tag inside of a <SCRIPT> .
  • There were basic events in Netscape 2, but you had to attach them inline. They added the onclick, onmouseover, and onmouseout attributes and allowed you to cancel the default behavior by returning false. There was no event object. You could only add click events to links and buttons, and onmouseover/mouseout only worked for links. You could also use onsubmit for forms so that you could validate before submitting the form.That was it, you couldn’t attach event handlers using JavaScript and there was no event bubbling or capturing.
  • AOL released the BookLink-based browser in mid-1995. The browser supported both Gopher and WWW.
  • Internet Explorer 2 had the same design and was released later that year for both Windows and Mac, integrated more features such as cookies (debuted in Netscape 1), SSL, VRML, HTML 3 (tables, frames, bgsound, text font tag), RSA, PPP network stack. The really important part of IE 2 is that it was available on a lot of platforms: Windows 95, Windows 3.1, Macintosh, even Unix.
  • The goal of Internet Explorer 2.0 was to make it as compatible with Netscape as possible. Why? Because we had entered the age of browser sniffing. Since Netscape had added proprietary features, the web was no longer compatible across browsers. Sites were broken when using Mosaic and people started putting this “best viewed with” badge on their pages. Servers started looking at the user-agent string and only letting the browser in if it was Netscape. For Internet Explorer to have a chance, they had to jump through hoops to make sure sites would serve their browser the same great content as Netscape.
  • And so the great user-agent string conflation began. Internet Explorer decided to start their user-agent string with “Mozilla” to trick servers into treating the browser as Netscape. Most server sniffing was that dumb, just looking for the word “Mozilla”. Practically every other browser since that time has taken the “Mozilla” moniker to the point where it’s just a convention and completely useless. That practice started here.
  • Now the picture is getting a bit clearer. AOL knew that Microsoft wanted in on the Internet space thanks to the BookLink deal. The Windows browser was released without much fanfare so that didn’t seem like a big deal, however you now had three was to get to the Internet, only one of which was AOL. The market was starting to get crowded.
  • On December 7, 1995, Bill Gates announced internally that Internet Explorer would be given away for free. He basically declared open war on the Internet and Netscape, causing Netscape’s stock to plunge 6% or $340 million. Netscape’s stock price would never recover. This also angered Spyglass, who you may remember licensed their technology to Microsoft for a share of any revenues generated from Internet Explorer. Since it would now be free, there would be no revenues and Spyglass would get nothing other than the flat fee Microsoft agreed to give them. This would eventually lead to a lawsuit that Microsoft settled for $8 million.
  • Now we’re back to 1996. Yes, that’s when I was in college. 1996 turned out to be a very important year in the Internet.
  • There was a really significant turf war building on the Internet. Microsoft and Netscape were locked in a duel where only one would survive, and America Online was going blissfully along as the #1 online service provider, almost laughing at the two dueling around them. What AOL failed to recognize was that the browser arms race was rapidly improving the quality of content available on the Web.
  • The fact was that AOL was rapidly losing the quality content that made it the destination of choice for online customers. Now, the content providers were free to setup their own websites and share their own news without paying AOL for the right to do so.
  • The amount of content on the Internet was growing, outpacing the content on AOL, and because of Netscape those experiences were becoming prettier and more graphical. Yet, AOL wasn’t really panicking. They continue to plug along.
  • The speed of Internet access was increasing, meaning that the time AOL spent optimizing its delivery was starting to not matter as much. With speeds reaching 56 Kbps, the Internet was much faster than it was just two years ago. AOL raced to ensure it could take advantage of this technology and setup new data centers capable of sending data across at those speeds.We weren’t quite at broadband yet, but the days of snail-crawl Internet connections were coming to an end.
  • No one knew it at the time, but Netscape was reaching its peak usage. It would top out at around 80% before starting a steady decrease. But we’ll get to that.
  • Netscape Navigator 3 was released. It was mostly an upgrade to 2.0 without many major changes. The biggest change, however, was with JavaScript.
  • Netscape 3 introduced the ability to load external JavaScript into the page. The way it works today is as it was then, more or less. You could also dynamically include content using document.write(), assign event handlers in JavaScript (still not anonymous functions) and access form elements by name instead of just ordering number.
  • Later that year, the big blue e would debut.
  • Introduced hover effects for their buttons.
  • Internet Explorer 3 was the first real competitor for Netscape. It was fast, it was pretty, it was compatible with all Netscape sites, and had a ton of new features. It was the first commercial browser to support basic CSS for fonts, colors, backgrounds, and some spacing. IE released IE3 with both Jscript, a reverse-engineered version of JavaScript, and VBScript, their own entry into the web scripting world. Last, they created their own button to put on web sites, where “Best viewed with” became a battleground for the browser wars.Jscript was mostly like JavaScript, except that it added getFullYear() and setFullYear() to the Date object to deal with Y2K issues.
  • In November 1996, Netscape submitted a JavaScript standard to ECMA for review.
  • By liberating Instant Messenger from AOL, AOL effectively put one of its differentiators out into the Internet. The Internet pretty much was on par with the content and capabilities of AOL at that point in time.
  • Over in the browser world, Internet Explorer 3 had made some waves but wasn’t necessarily a powerhouse. It had basically subsumed the Mosaic market share and was now starting to eat into Netscape. But Netscape was still the most used web browser in the world and the small gains being made by IE didn’t seem like that big of a deal. There was a #1 and a distant #2. As it turned out, late 1997 was going to be a major war as both browsers introduced new versions.
  • Netscape renamed the fourth version “Communicator”, as it set it’s site on corporate users who would need more than just a web browser. The idea was that the browser became the center of a communications suite.
  • JavaScript 1.2 added a bunch of stuff we’re used to, but also made a breaking change. The double equals and not equals operators were changed to take into account type. So this version has no type-coercing, and you would get that behavior if you specified JavaScript 1.2 in the language attribute of <script> only. The bummer was that ECMAScript 1 hadn’t yet been finalized and Netscape didn’t want to wait. It just plowed ahead. Consequently, 4.0 wasn’t ECMAScript 1 compliant.
  • Since Netscape was the only browser that supported JavaScript, it had to worry about compatibility with older browsers. Mosaic, for instance, would render the HTML code into the page. To prevent that from happening, this pattern was created. Netscape (and every browser since) ignores the first comment tag inside of a <SCRIPT> .
  • Layers were the main method of dynamic HTML in Netscape. They could be interacted with any had support for most events at a time when many elements didn’t support events. You could specify where the layer should be on the page and even clipping and visibility.
  • Internet Explorer did one very important thing here: unlike Netscape, they decided that all elements on the page should be accesible by JavaScript. Netscape had merely expanded this list from form fields, images, and links to include layers. Internet Explorer said that it didn’t matter what element it was, you could access it with JavaScript. This was a precursor to the modern DOM.
  • In this fourth generation of browsers, the DHTML battleground took place between sets of tags. In Netscape, you’d use <layer>, <ilayer>, and <frame>. In IE, you’d use <div>, <span>, and <iframe>. Even know Netscape supported <div> and <span>, they were little-used and not as well supported as in IE.
  • Netscape decided that the click event happens at the document level first, and then is delegated down into the document, in this case to the div. They labeled this “event capturing” as the document captures the click and then moves it along to other spots. Internet Explorer, on the other hand, decided that the target of the event should receive the event first, and then the event should bubble up its parents, going all the way up the tree structure. They called this event bubbling. Ultimately, no one could decide who was right, so both got implemented in the DOM.
  • In this fourth generation of browsers, the DHTML battleground took place between sets of tags. In Netscape, you’d use <layer>, <ilayer>, and <frame>. In IE, you’d use <div>, <span>, and <iframe>. Even know Netscape supported <div> and <span>, they were little-used and not as well supported as in IE.
  • Dynamic HTML opened the door for better, more dynamic UIs on the web. Programming cross-browser was a big pain, but the experience was so much better that it rivaled what AOL was doing with proprietary technology.
  • Netscape 4 would be the last major revision of the Netscape browser. After that, they focused on small releases to improve stability and performance. They did release 4.06 to get ECMAScript 1 support, then 4.5 through 4.8. Netscape had decided that their codebase was too slow and too hard to develop upon. It hadn’t changed much since Netscape 1.0 and couldn’t keep up with the rapid changes Microsoft was making. A radical decision was made to start rewriting the browser from scratch, starting with the rendering engine. The development of the Gecko rendering engine, which was to be the engine behind Netscape 5, started development alongside development on the old Netscape engine. The new Gecko engine would fix all of the ills of the old engine, including arduous cross-platform development, to setup Netscape for the future.
  • In 1998, Netscape officially gave up trying to sell their browser. Instead, they decided to open source Gecko in the hopes that it would speed up development of Netscape 5.
  • The content on the Internet was getting better, and was now a serious competitor to AOL’s content dominance. After successfully acquiring BookLink away from Microsoft, the AOL browser was far behind the times.
  • In the end, this probably had to happen for AOL to compete on the Internet. They obviously couldn’t buy Internet Explorer, and the BookLink deal amounted to a crappy browser that couldn’t compete in the marketplace.
  • Mozilla.org was launched as part of the open source efforts. That’s where the Gecko source code would live and be freely available to anyone who wanted it.
  • Microsoft had over 1,000 people working on IE5 with a $100 million fund for development. This was primarily a security and performance release. The blue E was removed as the throbber, replaced by the Windows logo. This was the last version that was available on Mac and Unix.
  • Netscape stagnated for the next few years without a major release as they continued to fix bugs on the old codebase and work on Gecko. In the meantime, Internet Explorer two significant releases: 5.5, which introduced ECMAScript 3 support (the first browser to do so), 128-bit encryption for SSL, as well as rudimentary DOM support, and then 6. Version 6 was a big improvement, introducing DOCTYPE mode switching and fixing the box model bug in standards mode. It also introduced ECMAScript 3 support, the first browser to do so. The gopher protocol was disabled in version 6, marking the end of an era. With Netscape stagnating, Internet Explorer continued gaining market share.Netscape would try to release another browser in 2002, dubbed Netscape 6 it was built on the new Gecko engine. Unfortunately, it was incredibly buggy and even though it had taken three years to write, this version was considered not even fit for a beta version. Netscape 7 tried to fix those bugs, and for their efforts, AOL laid off the browser team.
  • The turning point for this battle with 1998 and Internet Explorer 5. IE’s market share growth accelerated considerably between the end of 1998 and 2000, when Internet Explorer 5.5 was released.
  • AOL looked like it was on a different trajectory when it bought Netscape, trying to inject life into the dying company. It effectively bought Time Warner in a huge deal that seemed to solidify AOL as the leader in the new world of media. However, things weren’t all that rosey.
  • A few things happened at this point. First, AOL actually was embedding IE as their browser despite owning Netscape. The fact was that all the best content was built for IE since Netscape sucked, so in order to give their customers what they wanted, it had to be IE. At the same time, the phone companies began getting into the ISP business. They sold direct access to the Internet and let people use the browser they already had to access the content.Also, cable companies started offering internet access as well. Where AOL once was the primary way people got online, they were now completely cut out of the loop. The best content was on the Internet now, not in AOL. There was no reason for people to go to AOL anymore. The web had liberated control of content from AOL and AOL was feeling it.
  • After becoming a behemoth, AOL started to follow the path of Netscape. From being worth an estimated $161 billion in 2000, AOL was valued at $4 billion in 2009. AOL Time Warner became a symbol for the dot-com failures, they would drop “AOL” from the company name, and AOL would later be spun off back into a separate company.
  • And then we were left with one browser: IE6. With Netscape effectively dead and no other browsers to compete with, Microsoft disbanded the IE team. They had “won” the Internet, there was no reason to keep competing, to keep pushing and innovating. There would be no major updates to Internet Explorer for five years, causing browser lock-in and a surplus of sites designed to work specifically with Internet Explorer. The browser that saved us from a web that was defined by Netscape ended up creating a web designed by itself. After all was said and done, it was the only one left standing. AOL and Netscape both fell by the wayside, casualties of a company that had a plan for grabbing control of the Internet out of their hands.

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) – 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