Web pages can be viewed at different levels of detail depending on how much information is required. This article describes six levels of detail and explains how they can be used to implement three browser enhancements: enhanced link tool tips, navigation maps, and pre-emptive page downloading.
Web pages can be viewed at different levels of detail depending on how much information is required. This article describes six levels of detail and explains how they can be used to implement three browser enhancements: enhanced link tooltips, navigation maps and pre-emptive page downloading. Section 2 explains web page levels of detail. Section 3 describes three ways that web page levels of detail can be used to enhance web browsers. Section 4 describes how web page levels of detail can be implemented.
Visualization applications render objects in a scene in various amounts of detail; nearer objects are drawn in more detail than objects that are further away. The amount of detail that is drawn—the level of detail—is determined by the distance of the object from the viewer. Non-graphical information can also be viewed at different levels of detail. For example, the three parts of an academic paper:
can be viewed at three levels of detail:
Levels of detail are accumulative: each level of detail adds to the information in the previous level.
Many different levels of detail can be produced from a web page. The first four levels of detail, from the lowest to the highest level of detail, are taken directly from the HTML of a web page:
<head>tag such as the title and the meta-data;
Remember that levels of detail are accumulative; the second level of detail, for example, contains the information in the
<head> tag as well as the text contained in the heading tags (
<h2>, etc.). The following blocks show the first three levels of detail produced from the HTML of a web page.
The information contained in the
<head> tag such as the title and the meta-data.
The information in the first level of detail plus the text contained in the heading tags (
The information in the first and second levels of detail plus the first 1000 characters of text.
Further levels of detail can be produced by processing and rendering a web page:
The following table lists the keywords extracted from the web page shown above at the third level of detail.
The following images scale the web page shown above at the third level of detail to three different sizes.
Web page levels of detail enable a range of enhancements to be made to web browsers.
Three of the web browser enhancements that can be implemented with web page levels of detail are enhanced link tooltips, navigation maps, and pre-emptive downloading of web pages.
Web page levels of detail can be used to enhance link tooltips. In most browsers, when the cursor hovers over a link the text contained in the
title attribute of the
<a> tag is displayed as a tooltip. The disadvantage of storing this text in the linking page is that if the linked to page changes, the linking page might also need to be updated. If the browser requested the first level of detail—the information contained in the
<head> tag—for each link contained in a web page, the browser could use the title of the linked to page as the tooltip text for the link. If the title of a linked to page changes, the tooltip text for that link would automatically be updated.
The first level of detail for each link in a web page would be downloaded immediately after the page has finished downloading. Waiting to download the information for the tooltip until it is needed might delay the presentation of the tooltip and interfere with the feedback expected by users.
Although the first level of detail requires only a small amount of data to be downloaded, an HTTP connection must be made for each link. Enhanced tooltips can be made more efficient by combining the level of detail request mechanism described in this article with multiple HTTP request packages. The browser would package together the requests for levels of detail from the same web site to reduce the number of HTTP connections.
Enhancements to link tooltips are not restricted to text. The levels of detail that provide thumbnail and quarter size scaled images can be used to produce a visual preview of the web page that would be displayed if the link is clicked on. The tooltip could be further enhanced by combining a scaled image and the title of the linked to page. The requests for these two levels of detail can be reduced to a single HTTP request using HTTP request packages.
Most web browsers provide limited navigation facilities. One way to enhance browser navigation is to provide a map of the web pages that are linked to by a web page. Such a map might present web pages as a graph of linked nodes positioned in 2D or 3D space; the distance between a pair of web pages would represent their semantic distance as calculated by analysing the similarities between the keywords provided by the fifth level of detail. Each web page node can be presented as a scaled image provided by the sixth level of detail. As the user zooms in and out of the map, higher or lower levels of detail can be requested to render more or less detail as required.
The enhanced tooltips described above are an example of pre-emptive downloading; the first level of detail for each link is downloaded to provide the tooltip. Pre-emptive downloading can be used to increase the speed at which web pages appear to download. The second or third level of detail for each page linked to by a page would be downloaded once the page has finished downloading. Clicking on a link would display the downloaded level of detail immediately which would give the user information to scan while the full page is downloaded. Pre-emptively downloading web pages that are never looked at needlessly increases internet traffic. Pre-emptive downloading algorithms must choose carefully which pages to download to minimize extra internet traffic.
Web page levels of detail can be implemented by a simple server script that responds to a request for a level of detail encoded as a URL query. URL queries can be cumbersome so a shorthand notation is used when writing level of detail request URLs. An @ is appended to the URL of the web page for which a level of detail is requested, followed by the number of the level of detail. The @ should be read as “at level of detail”. For example, to request the web page
at the second level of detail—the contents of the
<head> tag plus the headings (
<h2>, etc.)—the following URL would be used:
The @ is a shorthand notation which must be mapped onto a valid URL query suitable for processing by a web server script. The following Apache web server rewrite rule transforms the @ notation to a valid URL query. This rewrite rule is added to the configuration file of the Apache web server which rewrites URLs ending with @ as a valid URL query.
RewriteRule /(.+)@(.+)$ http://www.website.com/LOD?page=$1&lod=$2 [R,L]
For example, the rewrite rule instructs an Apache web server to transform the URL
where the URL query parameter
page holds the page to provide the level of detail for,
lod is the number of the requested level of detail, and
LOD is the name of the web server script.
The six levels of detail for each page in a web site can be produced in two ways. First, each level of detail would be produced as each page is added to the server. The disadvantage would be that levels of detail that might never be used would be stored. A more efficient method would generate and store each level of detail on the fly the first time it is requested. The stored level of detail would be returned on subsequent requests. The advantage of this method is that storage is required only for the levels of detail that have actually been used. If the content of a web page changes, the levels of detail that have already been created would be deleted; they would be regenerated and stored the next time they are requested.