Web News » Web

The Battle Of The Browsers

admin — Thu, 19 Mar 2009 17:14:00 +0000

The Battle Of The Browsers – The History And The Future Of Internet Browsers

With Internet Explorer 8 now available, can Microsoft hope to retain market dominance over fierce open source rivals such as Mozilla’s Firefox or the feature packed Opera web browser. Can history give us a clue to what the future of web browsers/browsing might hold? How did Netscape Navigator go from having a dominant 89.36% market share of all web browsers in 1996 and yet only 3.76% by mid 1999?

Let us take a journey that will begin long before even the intellectual conception of Internet Explorer, that will glance at its long defeated rivals, examine the current browsers available and will end with a prediction of what the future of browsing will offer us – and which browser(s) will still be around to offer it.

People often think that Internet Explorer has been the dominant web browser since the golden age of the internet began. Well for a very long time now it has indeed been the most popular browser and at times been almost totally unrivalled. This was mainly a result of it being packaged free with Microsoft Windows, in what some would later call a brutal monopolisation attempt by Microsoft. The last few years however have heralded the arrival of new, possibly superior browsers. Mozilla’s Firefox has been particularly successful at chipping away at Explorers market dominance. So where did it all begin, and why were Microsoft ever allowed to have a hundred percent market dominance?

valant

Origins

The truth is they never did have total dominance, but at times they have come very close. Microsoft actually entered the Browser Battle quite late on. Infact a man named Neil Larson is credited to be one of the originators of internet browsers, when in 1977 he created a program – The TRS-80 – that allowed browsing between ’sites’ via hypertext jumps. This was a DOS program and the basis of much to come. Slowly other browsers powered by DOS and inspired by the TRS 80 were developed. Unfortunately they were often constricted by the limitations of the still fairly young internet itself.

In 1988, Peter Scott and Earle Fogel created a simple, fast browser called Hytelnet, which by 1990 offered users instant logon and access to the online catalogues of over five thousand libraries around the world – an exhilarating taste of what the internet, and web browsers, would soon be able to offer.

In 1989 the original World Wide Web was born. Using a NeXTcube computer, Tim Berners-Lee created a web browser that would change how people used the internet forever. He called his browser the WorldWideWeb(WWW), which is still likely to sound familiar to internet users today. It was a windowed browser capable of displaying simple style sheet, capable of editing sites and able to download and open any file type supported by the NeXTcube.

In 1993 the first popular graphical browser was released. Its name was Mosaic and it was created by Marc Andreessen and Eric Bina. Mosaic could be run on both Unix, and very importantly, on the highly popular Microsoft Windows operating system (incidentally it could also be used on Amiga and Apple computers). It was the first browser on Windows that could display graphics/pictures on a page where there was also textual content. It is often cited as being responsible for triggering the internet boom due to it making the internet bearable for the masses. (It should be noted that the web browser Cello was the first browser to be used on Windows – but it was non graphical and made very little impact compared to Mosaic).

The Browser Wars – Netscape Navigator versus Internet Explorer

Mosaic’s decline began almost as soon as Netscape Navigator was released (1994). Netscape Navigator was a browser created by Marc Andreessen, one of the men behind Mosaic and co-founder of Netscape Communications Corporation. Netscape was unrivalled in terms of features and usability at the time. For example, one major change from previous browsers was that it allowed surfers to see parts of a website before the whole site was downloaded. This meant that people did not have to wait for minutes simply to see if the site they were loading was the actual one the were after, whilst also allowing them to read information on the site as the rest of it downloaded. By 1996 Netscape had almost 90% market dominance, as shown below.

Market Share Comparisons of Netscape Navigator and Internet Explorer from 1996 to 1998

Netscape IE

October 1998                        64%                               32.2%
April 1998 70%                               22.7%
October 1997                       59.67%                           15.13%
April 1997 81.13%                           12.13%
October 1996                       80.45%                           12.18%
April 1996 89.36%                           3.76%

In these two years Netscape clearly dominated the internet browser market, but a new browser named Internet Explorer was quickly gaining ground on it.

Microsoft released their own browser (ironically based on the earlier Mosaic browser which was created by one of the men now running Netscape), clearly worried about Netscape’s dominance. It was not so much the worry that it would have a 100% market share of internet browsers on their Windows operating system, but more the worry that browsers would soon be capable of running all types programs on them. That would mean foregoing the need for an actual operating system, or at the most only a very basic one would be needed. This in turn would mean Netscape would soon be able to dictate terms to Microsoft, and Microsoft were not going to let that happen easily. Thus in August 1995, Internet Explorer was released.

By 1999 Internet explorer had captured an 89.03% market share, whilst Netscape was down to 10.47%. How could Internet Explorer make this much ground in just two years? Well this was down to two things really. The first, and by far the most important was that Microsoft bundled Internet Explorer in with every new copy of Windows, and as Windows was used by about 90% of the computer using population it clearly gave them a huge advantage. Internet Explorer had one other ace it held over Netscape – it was much better. Netscape Navigator was stagnant and had been for some time. The only new features it ever seemed to introduce were often perceived by the public as beneficial for Netscape’s parent company rather than Netscape’s user base. (i.e., features that would help it monopolise the market). Explorer, on the other hand, was given much attention by Microsoft. Regular updates and excellent usability plus a hundred million dollar investment would prove too much for Netscape Explorer.

2000 – 2005

These years were fairly quiet in the Battle of the Browsers. It seemed as if Internet Explorer had won the war and that nobody could even hope to compete with it. In 2002/2003 it had attained about 95% of the market share – about the time of IE 5/6. With over 1000 people working on it and millions of dollars being poured in, few people had the resources to compete. Then again, who wanted to compete? It was clearly a volatile market, and besides that everybody was content with Internet Explorer. Or were they? Some people saw faults with IE – security issues, incompatibility issues or simply bad programming. Not only that, it was being shoved down peoples throats. There was almost no competition to keep it in line or to turn to as an alternative. Something had to change. The only people with the ability and the power to compete with Microsoft took matters into their own hands.

Netscape was now supported by AOL. A few years prior, just after they had lost the Browser Wars to Microsoft, they had released the coding for Netscape into the public domain. This meant anybody could develop their own browser using the Netscape skeleton. And people did. Epiphany, Galeon and Camino, amongst others, were born out of Netscape’s ashes. However the two most popular newcomers were called Mozilla and Firefox.

Mozilla was originally an open sourced project aimed to improve the Netscape browser. Eventually it was released as Netscape Navigator 7 and then 8. Later it was released as Mozilla 1.0.

Mozilla was almost an early version on another open source browser, Firefox. With it being an open source the public were able to contribute to it – adding in what features it needed, the programming it required and the support it deserved. The problems people saw in Internet Explorer were being fixed by members of the open sourced browser community via Firefox. For instance, the many security issues IE 6 had were almost entirely fixed in the very first release of Firefox. Microsoft had another fight on their hands.

2005 – Present

Firefox was the browser that grew and grew in these years. Every year capturing an even larger market share percentage than before. More user friendly than most of its rivals along with high security levels and arguably more intelligent programming helped its popularity. With such a large programming community behind it, updates have always been regular and add on programs/features are often released. It prides itself on being the peoples browser. It currently has a 28.38% market share.

Apple computers have had their own browser since the mid 1990’s – Safari – complete with its own problems, such as (until recently) the inability to run Java scripts. However most Apple users seemed happy with it and a version capable of running on Windows has been released. It has had no major competitor on Apple Macs, and as such has largely been out of the Browser Wars. It currently holds a 2.54% market share and is slowly increasing.

Internet Explorer’s market share has dropped from over 90% to around 75%, and is falling. It will be interesting to see what Microsoft will attempt to regain such a high market share.

Opera currently holds 1.07%.

Mozilla itself only has a 0.6% market share these days.

The Future of Web Browsing

Web browsers come and go. It is the nature of technology (if such a term can be used), to supplant inferior software in very short periods of time. It is almost impossible for a single company to stay ahead of the competition for long. Microsoft have the advantage of being able to release IE with any Windows using PC. That covers over 90% of the market. They also have the advantage of unprecedented resources. They can compete how they wish for as long as they wish. So there is no counting IE out of the future of web browsing.

Safari is in a similar position, being easily the most popular Mac web browser. Its long term survival is dependant upon Apple and the sale of their computers.

These are the only two browsers that are almost guaranteed another five years of life, at least. Firefox may seem like another candidate, but the public is fickle, and one bad release, or if it seriously lags behind the new Internet Explorer 8 for long, could easily see its popularity quickly descend into virtual oblivion.

However, it seems likely community driven browsers, such as Mozilla and Firefox, will be the only types of browser capable of competing with the wealthy internet arm of Microsoft in the near future.

As for web browsing itself, will it change any time soon? Well it already has for some online communities. For example, if you want to buy clothes you could try entering an online ‘world’ creating an online virtual You to go from ’shop to shop’ with, looking at products and trying/buying what you see. Some ‘worlds’ allow you to recreate yourself accurately including weight and height and then try on things apparel such as jeans to give you an idea of how you would look in that particular item.

Will ‘worlds’ like this destroy normal web browsers such as IE ? – It seems unlikely. Traditional web browsers provide such freedom and ease of access that it is hard to see any other alternative taking over. However they are part of the new, ‘thinking out of the box’ wave of alternatives that some people will find attractive, and really who knows what the future will bring.

By: Nicholas C Smith

valant

Mail this post

Improving the Web

admin — Tue, 17 Mar 2009 18:30:00 +0000

Improving the web. Blogging, Google and Web standards.

The web has really changed the way we do things. Remember those paper timetables? No need for them anymore, we simply type in our destination on a box and get a step by step guide for what to do. Finding recipies? No need to look through books any more, just type in a few ingredients on your favourite food site. The examples are countless but there is no time for us to sit back and relax just yet. The web can be improved. We can get more people to publish their stuff online, we can get better tools for finding relevant info, and we can make the information accessible to more people. In this article I’m going to talk a little about each of those three points.

valant

We need more information

We need more information. People will argue and say “No, there’s enough junk online already” but I don’t care. More information is a good thing. The web is currently not a good representation of the world at large. The is a million technology weblogs and five about shoemaking. Another million sites about how it’s like to be a teenager today and another five about life as an 80 year old. You know what I’m getting at? We need a wider variety of people on the web, not only people that are just like us.

Another thing to remember is that text only is one facet of information. With today’s bandwidth available we can look at live video from all over the world. We can listen to live radio and music just as easy as we read the web. We then have a look at availability. I’d say that at most one out of 1000 people publishing on the web is using something else than text (This site is no exception). I know that there are people out there that have a video camera, that have a microphone, and know how to put it up on the web. But they don’t.

This lack of variety in information is a real problem. It builds barriers towards people we just don’t know anything about and it fools us surfers to believe the world is smaller than it seems. “No, there can’t be any problems with the Chinese government, we would have heard about it!” or what about “Christianity must be the biggest religion, just look at what people are writing most about”.

There are ways the tackle this problem and the concept of blogging is one of them. It makes it easy to almost anyone, anywhere to just start writing in a few minutes. You can be anonymous, you don’t have to tell the truth, there’s no age check and it doesn’t cost you money. This opens up to real diversity on the web. The technology exists, what we need to do is get people online and make them use it. So tell your friends to pick something they love or hate and blog about it. We need more information.

We need relevant information

The next step, after we have gotten a larger and more diversified web, is to start filtering it. I’m not talking censoring here, I mean filtering in the sense to “filter what you want”. This can be tied to a certain task you want to accomplish or it can be a strong interest of yours that you want to follow. It doesn’t matter which, what matters is that there are ways to easily find relevant information.

There are many ways of determining relevancy on the web and the one most successful is linking. Links are like recommendations; anyone that links to a site is telling their readers a certain site is recommended. It’s relevant for the subject at hand and it contains good information. If you are just looking for random information about something looking at a few links might be enough. For example, if Roger Johansson links to something web related I can be pretty sure it’s good.

For more task oriented queries we need something else. If someone is looking for a plane ticket they will probably not know who the authority in that area is. Google is the search engine that has had the greatest success with solving this problem and the solution is simple. Gather the recommendations for as many sites as possible and reply to queries with what most people recommend. Just think about it, if 100 people recommend FlyPlane and 1000 people AirFlight, who would you go for?

In reality it isn’t that simple, but in essence that’s how search engines work. Something that is important to note is that the system encourages people to write good content. Why is that? Simply because good content gets linked to, and more links means it’s probably more relevant. This way Google and all the others are actively encouraging people to improve the web. Good, isn’t it?

Making information accessible

So, we have lots of information from all over the world and we have the tools to find the most relevant info at any point. The last step is actually delivering the information to our users. This is where web standards come to play.

In the early nineties browser makers raced to get the coolest new features included in their browsers. The result was things like blinking text, different methods of representing “layers” and scrolling text. Web developers had a hard time keeping up with browser differences and often you had to construct two or more separate pages to send people to depending on what browser they used.

The W3C acknowledged this and presented a solution. Instead of browsers trying to find the coolest additions, let a standards organization handle the new additions. Let hundreds of people sit together and discuss new ideas long before they are implemented. When everyone has had a chance to say their meaning and problems has been eliminated you release a document presenting the new features together with implementation details. Now the browser makers can race over who supports the most recommended standards instead, and webmasters can just pick a set of standards that is well supported. One way of doing things instead of many incompatible ones.

Right now, the current recommendation is to use the strict versions of HTML of XHTML for structure, CSS for design and Javascript for behaviour. Using those standards means that your site is accessible by more than just the few browsers you have tested with. Both people and automated crawlers that that are after just your content can easily skip your design. People with old browsers will still be able to view your content, even though they don’t see the design the still get the content.

If you adopt the recommendations I mentioned above you have gotten quite far, but there is more. Accessibility is an area in web development that has gotten far too little exposure. It’s focused on making it easier to people with various disabilities, varying from broken arms and color blindness to dyslexia. Previously people cared about old browsers, it’s time for a shift towards caring about people instead. Read up on accessibility, Mark Pilgrim’s Dive into Accessibilty is a good start.

valant

Mail this post

Internet Explorer 8

admin — Wed, 11 Mar 2009 18:46:00 +0000

Internet Explorer 8

New Features To Slice, Store, And Accelerate Your Web Applications

Daron Yöndem

This article is based on a prerelease version of Internet Explorer 8. All information is subject to change.

In this article, I will look into the details of these features to see how Internet Explorer 8 can make life easier for both developers and users alike. You’ll see how these new features allow you to define portions of a page and control its update frequency and expiration, improve the user’s search and navigation experience, and lots more.

valant

Defining Page Regions with Web Slices

Web Slices allow you to cut a Web page into pieces so that you can display and update only the parts you are interested in. Web Slices can be a handy solution for a user who wants to follow the updates from your Web site but doesn’t want to use an RSS reader. RSS readers can be a little complicated for some end users and are not always appropriate.

Web Slices are programmatically defined parts of a Web page that users discover by moving their mouse over the slice or clicking the “Subscribe to a Web Slice” button on the toolbar. Figure 1 shows this in action.

Figure 1 Discovering a Web Slice by Hovering

After subscribing to a Web Slice, the user will be able to see the slice title on the Internet Explorer 8 Favorites bar. Internet Explorer will keep contacting the online source and alert the user about updates by making the slice title text bold. When you click on the title, the content of the slice will be shown in a popup window as shown in Figure 2.

Figure 2 Finding the Latest Bid on an Auction in a Web Slice

One major benefit of Web Slices is that users don’t need to keep refreshing a Web page in order to track changes on the site. Furthermore, depending on how you structure the data sources for your Web Slices, they can help to conserve resources on the Web server since updates will be for only relevant data, not the whole page. Additionally, by using Web Slices, your system can provide deeper statistics about how users access different parts of a Web page, which can impact further design decisions.

As I mentioned earlier, Web Slices are predefined by the developer. So how do you define those parts? First of all, you need to mark an HTML div element as a Web Slice container using the hslice class name. The hslice element will contain all the rest of the definitions you need for your Web Slice. Here’s an empty Web Slice definition:

Each Web Slice must have a unique ID, as this is how Internet Explorer distinguishes one from the other on a page. If the ID of a Web Slice changes after users subscribe to it, Internet Explorer will not be able to find it anymore and will not be able update the content on the favorites bar.

Each Web Slice should contain an element to identify the title of the slice; the title is identified by the CSS class entry-title. This content will be shown on the favorites bar and the feed discovery command bar menu. The entry-title text can be changed if you like when the Web Slice updates itself.

To finish creating my first Web Slice I have to add just one more element: the entry-content. I have the Web Slice and the title defined but I don’t have any content to show to the user. So let’s define the Web Slice content by applying the CSS class entry-content on the content that should be displayed to the user:

     Brand New Product!

         This is the product     definition.

Figure 3 shows my Web Slice definition. My Web Slice, called ProductID1, has a title and content.

Figure 3 A Simple Web Slice

You can add further richness to the Web Slice user experience with visual elements and inline (or global) CSS styles. The only limitation is that no scripting or ActiveX controls (including Silverlight) are allowed. If you need ActiveX ,you will need to use an alternative display source. An alternative display source can be defined on the entry-content container element of the Web Slice.

As shown here, you don’t need to put the content inside the entry-content element. You are simply redirecting the Web Slice and telling the browser that the content will come from another URL:

   Brand New Product

This way you will be able to track how many times each Web Slice is updated and how many users are following which slices by simply tracking the display source pages. In addition, in the target alternative_display.aspx page you are allowed to use ActiveX controls.

Expiration and Update Frequency

Sometimes you will need Web Slices to expire in a timely manner even if the user is offline and the Web Slice can’t get updated. This is especially true for sites such as online auctions or online sales campaigns. You can set the end time of a Web Slice by adding the endtime class name and the appropriate date time value inside an HTML abbreviation element, like so:

       Brand New Product!

      This is the product definition.

      This is the end time: 12:00

Users are able to set the update frequency by right-clicking the Web Slice title on the favorites bar and clicking the Properties command. As shown in Figure 4, custom schedules are allowed.

Figure 4 Users Can Set the Update Frequency of a Web Slice

In addition to the user-defined settings, you can programmatically specify frequencies by providing time to live (ttl) values:

    Brand New Product!!!!

     This is the product definition.

To specify a frequency, I have created a DIV element with the CSS class ttl and the content 15. This tells the browser to check the content of this Web Slice every 15 minutes for possible updates. Notice that as a design choice I set the visibility of the DIV element to invisible by setting the display CSS value to none.

As I mentioned, you can use alternative display sources, but sometimes it can be useful to simply have a Web Slice fetch its data from an external data source. You have two choices when using external data sources. One option is to use an external Web Slice on another page, as you’ll see in the next code snippet.

            Product Name

This Web Slice definition is pulling another Web Slice from external.aspx. The target Web Slice is found by its ID which is ProductID1 and attached as an anchor to the URL. The presence of the rel attribute on the anchor tag instructs Internet Explorer to use the anchor tag’s URL as the Web Slice data source rather than displaying the contents in the div tag.

The second option is to use an external RSS feed. Internet Explorer will always use the first item inside the RSS feed and show the entry content from the incoming RSS XML:

             Product Name

Here the Web Slice has a feedurl anchor targeting an XML source, which could be easily replaced by a generic handler that outputs XML on the fly depending on some parameter. The XML source in our example is shown here:

 WebSlice RSS

    Product Name Here

    HTML <b>codes</b> can be used

Instead of defining the settings of our Web Slice in the entry-content HTML code, you can define them in your XML data source. In the previous code, the XML source provides values for ttl and title properties of a Web Slice. The description tag can contain rich HTML without causing any problems.

Accelerators

Accelerators exist to make common tasks faster and more automated while browsing the Web. For example, think about how often you copy and paste content from one Web site to another. Let’s say you just found the address you were looking for on a corporate Web site and now you need driving directions. You copy the address, launch the Live Maps Web site and paste in the address. You can automate this process using an accelerator.

Figure 5 shows an Accelerator that finds a location on the map when the user clicks on the address. Writing your own accelerator is simple. As a developer, you just need to define what your accelerator will do using an XML OpenService Description file. Let’s dig into the details of the OpenService Description format. The following shows a basic OpenService Description file:

  http://www.contoso.com/

    Translate it with Contoso

    http://www.contoso.com/favicon.ico

...

Figure 5 Live Maps Accelerator Provides Instant Location Search

The main properties of an Accelerator are the homepageUrl, display, and activity tags. The homepageUrl is the URL of the service you are providing. All the URLs used in other tags and settings should use the same domain as the homepageUrl. The display tag sets the visual aspects of an accelerator’s command button on the Internet Explorer right-click menu. When the user right-clicks on the page, the accelerator will be revealed by its name and icon.

The activity element defines the service that the accelerator provides. In this example, the accelerator will provide a translation activity. You can control how Internet Explorer groups your accelerator on the context menu by using different categories like Add (to add a link), Blog (to blog on a remote service), Define (to look for definition), Map (to look for map) and Translate (to translate the selected text). You can also define your own categories. The suggested rules for category definitions are that they should be a verb and generic enough to let other accelerator developers use the same category.

Now is the time to define our activitiyActions inside our activity tags. Here you can see one activityAction with a context value of selection:

The context attribute is the key component of an activityAction. The context defines when this action will be available. If the accelerator doesn’t provide an action suitable for the current context, it will not be visible on the accelerator’s menu in Internet Explorer. The current context choices are selection and link. If the context is selection, the user needs to select text and go to the accelerators menu in order to use your accelerator. If the context is link, the user should right-click on a hyperlink to start the action.

In each activityAction you can have an execute and a preview definition. Execute is launched when the user clicks the accelerator command from the accelerators menu. Preview action is launched when the user hovers the mouse over the accelerator command on the menu. Both the Preview and Execute tags can have an action URL and a method. You can use GET or POST as methods of data transfer.

Parameters are defined for each action as name/value pairs. The values come automatically from keywords in brackets. For instance, {selection} means that the text selected by the user will be the value of the associated parameter.

The preview window works like an IFrame, which means that you can use any kind of interaction inside the preview window. It is more appropriate to design a specific interface and distinguish the preview and execute action URLs.

The final OpenService Description file for the example is shown in Figure 6. Now it’s time to let the visitor of our Web site install this accelerator to her PCs. Here is the script needed to install the accelerator:

       value="Click to Install"

      onclick="window.external.AddService('myaccelerat.xml');" />

Figure 6 The Final OpenService Description File

   http://www.contoso.com/

   Translate with Contoso

   http://www.contoso.com/favicon.ico

The AddService method gets the URL of our OpenService Description XML file and starts the installation. In order to find out if an accelerator is already installed you can call the isServiceInstalled method.

Search Suggestions

Internet Explorer 7.0 introduced a new feature called Search Providers. Users were able to integrate different search providers into their browser and use the search bar to easily navigate to their favorite search engine. This is possible because of the XML-based OpenSearch specification files. Internet Explorer 8 further improves search with a feature called search suggestions. As the name implies, the browser makes suggestions while you type your search keyword.

As the user types, the browser goes to the selected search suggestions provider and requests suggestions related to the search keywords. The resulting data is instantly shown to the user to create a better search experience (see Figure 7).

Figure 7 Easily Access Suggestions for Search Keywords without Navigating Away from Current Page

Before getting into the details of how Search suggestions work, you will need a search provider. A search provider consists of three main elements: a name, a search URL, and an icon. Those are all well defined in the OpenSearch specification XML. The following is a full-featured search provider written for Internet Explorer 7.0 without search suggestions:

 Contoso Search

         http://www.contoso.com/favicon.ico

The ShortName tag includes the search provider name and the URL tag defines the search path of the search engine. The searchTerms keyword in the URL pattern will be replaced by the search keywords written by the user. Finally, the Image tag points to an icon file for the search provider.

In order to install a search provider, users will need to click an HTML element on your page or discover the search provider through the search box of Internet Explorer 8. And in a similar manner as accelerators, search providers can be installed using the window.external.AddSearchProvider JavaScript function:

www.contoso.com/provider.xml')">  Add Search Provider

Note that the AddSearchProvider JavaScript function requires the OpenSearch XML file URL as a parameter in order to initialize the install process.

As an alternative to the explicit reference to your OpenSearch XML file, you can let the browser explore your Web page and discover your search provider. To make your search provider discoverable, you will need to put a hidden link to your OpenSearch XML file in your HTML pages header. The following is a hidden link to a search provider:

The title of the link is the name of the search engine shown in the browser. The rel and type properties of the hidden link should be exactly the same as I’ve used here. This is how the browser knows that it is a link to a search provider. Finally, the href attribute contains a URL to the OpenSearch description XML file.

Now that you have your Search Provider ready, you can go on and add search suggestions to it. First, you will need to modify the OpenSearch description XML file and specify your search suggestion data source:

xmlns="http://a9.com/-/spec/opensearch/1.1/">

  Contoso Search

     http://    www.contoso.com/favicon.ico

Here you will see that I’ve added one additional line of XML to the previous search provider description file—a new URL tag with a different type value. In order to use the search suggestions feature, you will need a service that can evaluate the search keywords being provided by the user and is able to supply the appropriate suggestion list.

The list can be provided in XML or JSON format. In the example, I have added pointers to the suggestion service using JSON. However, I could have easily consumed an XML-based service with the following XML:

There are important differences between XML and JSON data sources. A JSON data source can provide a list of suggestions including the suggested results, one description for each result and a URL if needed. Here’s an example:

["con",

["contoso soft", "contoso books", "contoso rent"],

["software company", "book store", "rent a car"],

["http://www.contoso.com/soft",

 "http://www.contoso.com/books",

"http://www.contoso.com/rent"]]

Figure 8 XML for Search Suggestions

con

             Result 1

             Description 1

             http://www.contoso.com?id=1

             Result 2

             Description 2

             http://www.contoso.com?id=2

Figure 9 A Sample Search Suggestion List

Internet Explorer 8 will pull the JSON data on the fly and show the autocomplete list instantly. Be aware that the search keyword should be included in the data returned from the provider. The first element in our JSON example contains our search keyword “con.”

If you choose to use the XML format to provide search suggestion lists for Internet Explorer, you will be able to choose a title for your result list, to split the results with separators, and to provide visual suggestions as well.

At first I will provide a Search suggestion list with only two results and one separator. The XML response in Figure 8 contains the submitted keyword in the Query tags and provides two Items in a Section tag. The section tag has a title and each item has a Text, Description and a Url to navigate.

You can use separator tags with titles to provide different lists of results in the search suggestion box. The URLs will be used when the user clicks a suggested item in the list. In Figure 9, you can see how the XML data will be shown in Internet Explorer 8.

In addition to the classical view of a search suggestion list, you can use images to enhance the user experience and provide an image with each suggestion. All you need to do is and add an Image tag to the appropriate Item tags, like so:

 Result 1

   Description 1

   http://www.contoso.com?id=1

AJAX Navigation

AJAX is one of the major components of rich Internet applications (RIA) and will remain so as long as HTML is in use. You can use AJAX to update pieces of the UI without requiring entire page refreshes and server-client cycles for each user action. But AJAX has its drawbacks.

When you use AJAX to modify your Web page content you will notice that the address bar doesn’t change. This makes sense. But what if the user wants to have a consistent URL of the current page’s state, say for adding to favorites and so forth? What if the user clicks the back button in her browser? She will be sent to the Web site she visited previously.

Somehow you have to reflect the URL change without refreshing the Web site. Enter the fragment identifier. The fragment identifier does exactly what it sounds like it does—identifies the state of part of the page.

Each URL can have a fragment identifier; you just need to append a pound sign “#” to the end of the URL (for example, www.contoso.com/default.aspx#5). If you change the content after the # sign, the Web page will not refresh but the history log of the browser will record the change and provide back and forth navigation.

In Internet Explorer 8, this feature is provided with the window.location.hash property and the new hashChanged event. Whenever you change the window.location.hash property, the address bar will get an update and the content of the hash property will be placed after the # sign. When the user tries to navigate to another Web page through the browsers buttons, the hashChanged event will fire and provide the target hash value which is the value after the target pages # sign.

Let’s create a simple Web site with a WebMethod in order to service AJAX calls. This sample Web site will contain an HTML button and a DIV element. Each time someone clicks the HTML button, the numeric content of the DIV element will be sent to the WebMethod:

In order to call the service, add the following JavaScript:

function GetNext() {

   PageMethods.GetNext($get("content").innerHTML, Done); }

function Done(sender) {

  $get("content").innerHTML = sender;     window.location.hash = sender;

Finally, create the WebMethod in the page’s codebehind file in order to increment the integer parameter and return it to the AJAX caller:

Public Shared Function GetNext(ByVal x As Integer) As Integer

Return x + 1 End Function

The JavaScript method named GetNext makes an XMLHttpRequest to the server. The parameters for the GetNext method are simply the content of the DIV element and a callback method. When the callback method, Done, is called as a result of the service response, the new value is simply put back into the DIV element.

Here comes the interesting point. After modifying the Web page with the new content, I assign a unique identifier to the window.location.hash property in order to identify the current state of my Web page. For this simple example, that value is the same number displayed in my DIV element. After changing the hash property, if you take a look in the browser history you will notice the new entries that are now listed there.

Whenever the user navigates back or forward in the browser history, the hash property will be handed back to a JavaScript function that handles the onhashchange event. This is accomplished using the following line of code:

This function will be called whenever the user navigates backward or forward, and Internet Explorer 8 will update the window.location.hash property according to the values in the browser history. This enables me to easily get the hash value and update my page, whether that action is as simple as updating the page with the hash data itself, as shown below or whether it involves requesting data from the server based on a unique identifier stored in the hash:

function HashChanged() {

   $get("content").innerHTML = window.location.hash;

DOM Storage

Currently, if you need to store data on the client, the only standardized way, and the old standby, is to use document.cookie. Unfortunately, this method is simply not flexible or powerful enough for today’s online applications. One of the most significant shortcomings of cookies is the 4KB limit. Internet Explorer 8 has an answer—DOM storage.

DOM storage is part of the HTML 5 Working Draft and provides a huge data store (about 10MB) on the client side. This storage can be so much larger in part because the data is not sent with each request to the server as it is with cookies. Plus, the localStorage never expires.

In order to store and retrieve data from DOM storage, all you need is a key/value pair. The localStorage JavaScript class provides the methods setItem, getItem and removeItem to access all the features of DOM Storage:

function Save() {

    localStorage.setItem("MyItem", $get("Text1").value);}

function Load() {

    $get("Text1").value = localStorage.getItem("MyItem");

This code performs the equivalent of a property get and set operation in C# or Visual Basic using DOM Storage as the backing store. First of all, the Save function stores the value of a TextBox to DOM Storage with a key name of MyItem. Then the Load function retrieves the data from DOM Storage by providing the same key name.

Offline and Online Working Modes

Like many Web developers, I’ve long been dreaming of the day when I could detect if the current user has a healthy connection to the Internet and provide an appropriate level of functionality. Now, Internet Explorer 8 provides the status of the host PCs Internet connection with onLine property of window.navigator. While in the past, this property represented whether the user had chosen to work offline, it now indicates whether the current user has an established connection to the network.

In addition to the onLine property, Internet Explorer 8 has now two new callback handlers ononline and onoffline. The onoffline handler is raised when the system loses the network connection and the ononline handler is raised when the connection is restored. You can attach event listeners and be warned instantly about the state of the connection so that you can provide you users a blended experience during both online and offline functionality.

Figure 10 shows a simple usage of ononline and onoffline events defined in the body of a Web page. Each time the user gets connected to the network, the Online JavaScript method will launch. Likewise, each time the users disconnects, the network the Offline method will fire.

Figure 10 Using Ononline and Onoffline Events

XMLHttpRequest Time Outs

The new XMLHttpRequest in Internet Explorer 8 has a TimeOut property and an ontimeout event. This enables you to define XMLHttpRequests which will timeout and allow other requests to move ahead in the request queue.In the following code, I create a new XmlHttpRequest and set the timeout property and ontimeout event listener:

function GetAReqeust() {

     var MyRequest = XMLHttpRequest();

     MyRequest.ontmeout = TimeOutHere;

     MyRequest.open("GET","http://www.contoso.com/data.xml");

     MyRequest.timeout = 2000;

     MyRequest.send(null);}

 function TimeOutHere() {

     alert("Request to Contoso timed out!");

As you can see, Internet Explorer 8 offers a number of features that solve many problems Web developers have been hoping to solve for a long time. Whether it’s in more deeply integrating your content and services into the browser or leveraging new browser platform services to provide for a more seamless user experience, Internet Explorer 8 gives you the tools to build richer, more seamless experiences for your users.

valant

Mail this post