IMP Info

Latest things in Softwares,Freewares,Open Source,Internet,Programming…

Inner-Browsing: Extending Web Browsing the Navigation Paradigm

Posted by Parth Barot on March 6, 2006

When you click a link on a web page, your web browser makes a request to a web server which usually results in a new web page as a response. That new page may have links that take you to other pages, which may in turn have more links, and so on. This model of web navigation is so common that most Internet users do little else. But as the Internet matures, this model has begun to show its age and its limitations. For web developers, for example, it provides less fine-grained control over the experience, and it can strain bandwidth and other resources. And for users it usually doesn’t begin to approach the seamlessness and usability of good application user interfaces.

Recently, however, modern browsers and enriched web standards have begun to make new navigational and presentational models possible. One such model is Inner-Browsing, which is our name for a model in which all navigation occurs within a single page, as in a typical application interface. The single-page context and abstraction of data from the presentation can give your web applications new continuity, precision and control. This model is also interesting because is optimized to access contextual data instead reloading full web pages.

abstract picture showing browsing inside the web page with lightweight contextual data

This article discusses the concept of inner-browsing and possible approaches for its implementation. It also provides two implementation examples using the model. The first one looks like a traditional DHTML ticker application and uses hidden IFRAMES and JavaScript to provide updates inside the webpage’s ticker headlines section. This sample was made using IFRAMEs to illustrate a possible implementation. An implementation can also use other transport technologies such as SOAP-based remote procedure calls, XMLHTTPRequest interfaces, or DOM 3 Load. The second example shows a tabbed menu that dynamically loads news headlines into the current web page. This implementation uses XMLHTTPRequest.

Extending Traditional Hypertext Navigation

The hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page. HTML and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting DHTML, powerful programming languages like JavaScript, and additional media through embeddable third-party resources like Flash, Java, VRML, etc. Additionally, server-side technologies have also evolved, supporting and connecting different resources to different browsers.

Despite all the evolution, we still see the underpinnings of the original model in modern web sites. We still connect through a set of links that mostly drive us to a new page, and we still occasionally lose track of where we are. Also, on the server side, the server often has to rebuild all of the context of the user interface with each new request. Of course, this traditional approach is useful and easy to implement, which is why it is still so widely used. But the real showcase for new browser features and web standards like HTML 4.0 and DOM Level 2, and XML are models like inner-browsing, where these technologies can begin to be used in the way that they were envisioned. Many of the new web technologies in the HTML 4.0 specification, XML 1.0, DOM Level 3 were explicitly created with application-like behavior and more sophisticated navigational models in mind. In the next section we will introduce inner-browsing as an extension to the traditional model.

Let’s start defining what we mean by inner-browsing. In this model, when a request goes to the web server, the current page is updated rather than replaced. Without leaving the page, the user browses new information and preserves the page’s context. This new navigational method allows us to make HTML user interfaces behave similarly to non-web based applications such as contact management software. The basic implementation uses a resource such as the web page or the web application to control the navigation system. In other words, the page is the browsing device during the experience, and the user is “immersed” in that browsing device.

What does this mean, practically speaking? What does it look like? Good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. See the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach.

More @ devedge-temp.mozilla.org

Advertisements

Sorry, the comment form is closed at this time.

 
%d bloggers like this: