An alternative to HTML and current web browsers

• Download source for sample web applications - 10 Kb
• Download web browser - 596 Kb

Introduction

Currently, web browsers display web pages using one markup language, namely HTML. They all read it and display it in basically the same way. In other words, it's a bunch of different web browsers that all do the same thing. However, it doesn't have to be this way. The protocol that supports web pages and web browsers, HTTP, supports more than just the current method of web browsing.

The goal of this article is to present one alternative to the current way users browse the world wide web.

Background

The most prolific markup language on the web is HTML. There are numerous browsers that support it and millions of web pages written in it. However, it is not the only way to create a web page. A web page can be written in any language, if you are willing to create the web browser to support it. It does not need to behave like every other web browser around. It can be designed to read and display the web page in many different ways.

Before we go further, let's look at how the landscape for web browsers has changed over the years.

Early 1990s

When the world wide web was just getting started, the web browser makers were small and unorganized. The goal back then was to make a web browser that worked reliably with HTML. Adding features was not a big concern because it was challenge enough just making the software not crash every other second.

Mid-1990s

Let's fast forward to the mid-1990s. Netscape dominated the scene and Microsoft was just getting their act together in the web browser market. Netscape realized that the current HTML was not sufficient for some of the web tasks they wanted to see performed on the web. So, guess what? They invented JavaScript and added it to their web browser. Well, that started the feature race. Once Microsoft saw the popularity of JavaScript, they realized it had to be included in their web browser, too. So, for the next couple of years, Netscape and Microsoft tried to outdo each other by adding features to their browsers and to HTML.

1998-today

After all the competition and attempts to outdo one another, the inevitable happened. Microsoft gained complete dominance of the web browser market and they have continued to this day adding features that suit their vision of the web and everyone else has just followed along.

Well, believe it or not, it does not have to be this way. With enough time and inclination, anyone can build a web browser and it does not have to work the way every other web browser does. This article describes my attempt at creating a markup language and web browser that is an alternative to HTML. It is one in a series of articles that describe how this alternative can be used to browse the web.

The GordonRhodes Markup Language (GRML) Environment

The approach discussed in this article for browsing the world wide web uses GRML. GRML requires the following,

• a web browser, such as Pioneer, for loading files or downloading web pages;
• a web server, such as IIS or Apache, for server-side processing and hosting; and,
• a development environment or text editor, such as Notepad or Visual Interdev, to create the GRML files and web pages for use with the web browser.

GordonRhodes Markup Language (GRML) is a web page markup language that is used to organize data for display in a GRML web browser.

Despite being an alternative to HTML, GRML still relies on many of the existing world wide web technologies. This means that the experience and skills you have acquired using ASP, JSP, CGI, PHP, .NET, or XML can be used to create GRML documents. In fact, you can use server-side techniques to generate GRML from HTML files. To get a clearer idea of the attributes of GRML, let's look at some of its strengths and weaknesses.

GRML is ideal for web pages and files that do the following:

• display structured data (e.g. auction results, database records), or,
• display multidimensional data (e.g. weather conditions, home buying, travel planning), or
• display lists of data (e.g. news headlines, link lists), or,
• display image galleries.

GRML is not ideal for web pages and files that:

• display unstructured data (e.g., articles, stories), or
• display advertising, or
• use spyware, or
• use scripting and Flash, or
• allow playing games.

Now, let's examine GRML to understand how it works and what it does for the web browsing experience. We will start with the Pioneer web browser and examine how it uses GRML files and web pages to display data.

Pioneer

Typical GRML web browsers can be described by a major function it performs (other than browsing the web). For example, a GRML web browser may specialize in image editing, or data entry, or word processing. Pioneer is a result viewer with picture preview and thumbnail support web browser.

Each web browser comes in one of three classes: multi-document interface (MDI), single-document interface (SDI), or dialog. Pioneer is an MDI web browser and displays all web page or file content in MDI child windows. Each child window is called a Data window and consists of an Input Form and Results area. The space where all Data windows reside is called the workspace.

To make it easier to navigate the workspace and to see what 'data' windows are open, Pioneer comes with a Workspace window. This window allows you to easily see what Data windows are open, their relevant attributes, and which Data window has the focus.

Workspace window - displays a tree view of the open data windows in the workspace area.

In addition to the 'Workspace' and Workspace window, Pioneer also keeps a record of requests the user might make. This is stored in the registry and displayed in the History window. Here, instead of retyping the request or URL, you simply double-click the item and it is automatically downloaded (like a hyperlink).

History window - displays previous requests entered by the user.

(above: Auctions)

(above: Jobs)

(above: Links)

When submitting requests in the data window, you use its input controls. These controls (e.g. edit, combobox, etc.) will form the request to be sent to the website. Once the request has been entered (while a control has the focus), press the 'Enter' key to send the request.

Data window Input Form - displays the user input controls for a web application.

(above: Auctions input controls)

(above: Job Search input controls)

Once the request has been submitted, Pioneer retrieves and parses the GRML in the web page. It then displays the results in the Results area. This area resides below the Input form in the Data window. The Results area provides four views of its contents: 'Report', 'Horizontal List', 'Vertical List', and 'Thumbnail' (if there are any images).

Data window Results area - thumbnail view (e.g. Ebay auction results for 'mercedes s500' - I can dream can't I?).

Data window Results area - report view (Monster.com job listings for 'java la').

Sometimes, when viewing results, all of the attributes cannot fit within the data window. This means you need to scroll to see everything. If you wish to view all the attributes at once, you have two options. One is to highlight the item and view the tooltip. The other is to use the Details window. This window contains all the text contained in a selected result. For example, the first result in the report view for the Job Search using 'java la' looks as follows in the Details window:

Details window

When a request returns images, the Picture window displays the image for a selected result. For example, the first item in the thumbnail view for Auctions search for a 'mercedes s500' looks as follows in the Picture' window:

Picture window

When you put it all together, this is what it looks like:

(above: Auctions)

(above: Job Search)

Using the web browser

When a user first launches the web browser, the first thing they can do is enter a web address. If the web address returns a GRML web page, the web browser reads and displays the web application descriptions in the "workspace" window.

Once the available web applications are listed in the "workspace" window, a user can create a web application by opening a window in the web browser (e.g.: Ctrl+N). To use a web application, simply enter a request using the input controls and press 'Enter'. Any results will appear in the "Results" window. Many types of web applications can be created, such as search engines, image galleries, or headlines.

Okay, now that we know what a GRML web browser looks like, let's look into what a GRML document is.

The GordonRhodes Markup Language (GRML)

GordonRhodes Markup Language is a data description and display markup language. It has tags similar to HTML. Unlike HTML, it does not specify format, layout and positioning, such as frames, tables, sizes, fonts, or colors. Instead, GRML defines data types and relationships. The GRML web browser decides how it should be displayed and formatted (which is ultimately, you). However, like HTML, it does display different types of data, such as text, hyperlinks, and images.

The following GRML web page creates the workspace window shown earlier. It is used by Pioneer to describe what types of data windows you can create from sevenmilesearch.com.

<GRML>
<a class=navi_13 type=sitedetails>Welcome to the SevenMileSearch web</>
<a class=navi_13 type=sitedetails>site. There are currently 5 web</>
<a class=navi_13 type=sitedetails>applications available. When you open</>
<a class=navi_13 type=sitedetails>a web application, the directions to</>
<a class=navi_13 type=sitedetails>use it will appear in this window.</>
<a class=navi_13 type=sitedetails></>
<a class=navi_13 type=sitedetails></>
<a class=navi_13 type=sitedetails>If you have any questions or comments</>
<a class=navi_13 type=sitedetails>about this web site and the web applications</>
<a class=navi_13 type=sitedetails>here, send an email to: sevenmilesearch@yahoo.com</>
<a class=navi_13 Name=AUCT type=location>sevenmilesearch.com/auc.asp</>
<a class=navi_13 Name=AUCT type=Icon>6</>
<a class=navi_13 Name=AUCT type=title>Auctions</>
<a class=navi_13 Name=AUCT type=description>This application only works with</>
<a class=navi_13 Name=AUCT type=description>EBay, currently. To submit a request,</>
<a class=navi_13 Name=AUCT type=description>enter the search terms in the edit</>
<a class=navi_13 Name=AUCT type=description>box and press 'Enter'.</>
<a class=navi_13 Name=AUCT type=description></>
<a class=navi_13 Name=AUCT type=description></>
<a class=navi_13 Name=AUCT type=description>Images are supported.</>
<a class=navi_13 Name=HDLN type=location>sevenmilesearch.com/headlines.asp</>
<a class=navi_13 Name=HDLN type=title>Headlines</>
<a class=navi_13 Name=JOBS type=location>sevenmilesearch.com/jobs.asp</>
<a class=navi_13 Name=JOBS type=title>Job Search</>
<a class=navi_13 Name=SRCH type=location>sevenmilesearch.com/images.asp</>
<a class=navi_13 Name=SRCH type=title>Images Only</>
<a class=navi_13 Name=TEST1 type=location>sevenmilesearch.com/links.asp</>
<a class=navi_13 Name=TEST1 type=title>Links Only</>
<a class=navi_13 Name=TEST2 type=location>sevenmilesearch.com/translate.asp</>
<a class=navi_13 Name=TEST2 type=title>Images & Links</>
</GRML>

Let's look at what is included in the above web page. First, there is the line that has <GRML>. This indicates the beginning of a GRML document. The first time this is encountered, the web browser will look for data it can read to populate its windows. To mark the end of a GRML document, </GRML> is used to tell the web browser to stop looking for data.

In GRML, there is only one type of tag, and one tag pair. All tags start with <a ...> and end with </>

The <a ...> contains three attributes. They are class, name, and type. The class and type attributes are required while name is optional. Also, each tag contains a value, which is specified between the tag pair. For example, the value of the following tag pair:

<a class=<CODE>navi_13</CODE> Name=JOBS type=title>Job Search</>

is Job Search.

Now let's look at each attribute of the <a ...> tag.

"Class" attribute

The first thing that Pioneer looks for in a tag is the class attribute. This attribute identifies which window should receive the data. This is how GRML tells the web browser where data should be displayed. The above document only identifies content for the "Workspace" window, which displays the current files, web pages, web applications, and web sites available to the user.

Pioneer (v3.05) supports six possible options for the class attribute.

• navi_13 (Workspace Window)
• edit_13 (edit control, Data window Input Form)
• combo_13 (combobox control, Data window Input Form)
• dynamic_13 ("special" combobox control, Data window Input Form)
• column_13 (column control, Data window Results area)
• rslt_13 (display control, Data window Results area)

"Name" attribute

This attribute is optional and depends on the window identified in the class attribute. For example, the workspace window requires a name attribute. The Input Form in the Data window requires a "name" so a name-value pair can be sent to the website. The Results area in the Data window uses the name attribute only if a "dynamic" control exists in the Input Form. The name is used to distinguish different result sets for the Results area.

"Type" attribute

Every tag pair requires a type attribute. This identifies the type for the value of the tag pair.

In Pioneer (v3.05), they are:

• location; title; description; sitedetails

  navi_13 (Workspace window).

• keyword; bgtext; text; title

  edit_13 (Data window input form).

• item; title

  combo_13 (Data window input form).

• item; title

  dynamic_13 (Data window input form).

• title; width

  column_13 (Data window results area).

• image; item; link

  rslt_13 (Data window results area).

The above GRML web page is static. In other words, there is no server-side processing required to create the web page. In the next section, ASP will be used to dynamically create a GRML web page. This demonstrates how server-side processing is used to handle user requests using ASP and Perl.

Dynamically Creating a GRML Web Page for a Web Application

Okay, now we know some things about GRML, a GRML web page, and a GRML web browser (Pioneer). The basics behind a GRML tag have been covered. Now, it is time to see how to create a web page that handles user input and displays the results.

Dynamically creating a GRML web page is slightly different than simply describing static attributes. The web page must provide input controls for users to submit requests and the logic must be created to retrieve the results they want. This does not require learning any new tags, but does require an understanding of how to use a tag to create controls and display results. It also means that the GRML web pages will no longer be static, but will now require server-side processing to dynamically generate the GRML.

There are three different ways to create a GRML web page. One way is to retrieve the data from a database. Another way is to retrieve the data from a non-database source (e.g. a flat file, spreadsheet, or custom data file). A third way is to retrieve the data from another website by creating an adapter between the HTML and the GRML.

This article only discusses the third option, namely creating an "adapter" to transform HTML into GRML.

"Job Search"

Looking at the above screenshots, you see the interface for the Job Search available from sevenmilesearch.com/jobs.asp. The data window that is created from jobs.asp allows for four views (only report is shown above) that can be selected by right-clicking in the data window and selecting a view. The above screenshots show the results for a 'java la' request. To create a Job Search like this for a website requires server-side processing such as ASP or JSP or ISAPI or PHP or CGI. This particular web application was written in ASP using Perl.

Creating a Job Search will require a web server that supports server-side processing. In this case, IIS is used with Perl because of its excellent text-handling language. However, any language that has regular expression support should work (such as .NET).

Okay, let's get started. Below is the GRML that was generated from jobs.asp (as of January 4, 2004).

(Note: Job Search has a 'Link Location' column, in the Report view, to display the hyperlink location. Also, if the attribute is an image type for the rslt_13 class, an 'Image Location' column is added in the Report view.)

<GRML>
<a class=edit_13 type=keyword>monster:</>
<a class=edit_13 type=Title>Request:</>
<a class=edit_13 type=bgText>Enter location and job keywords</>
<a class=Combo_13 Name=Default type=Title>Default location</>
<a class=Combo_13 Name=Default type=Item>monster <default></>

The edit_13, and combo_13 classes, each have their own name, so the Job Search can retrieve the user input from each control.

The Input Form appears as follows for Job Search:

<a class=column_13 type=Item>Date Posted</>
<a class=column_13 type=Width>75</>
<a class=column_13 type=Item>Job Title</>
<a class=column_13 type=Width>150</>
<a class=column_13 type=Item>Job Location</>
<a class=column_13 type=Width>150</>
<a class=column_13 type=Item>Company</>
<a class=column_13 type=Width>150</>
<a class=column_13 type=Item>Search</>
<a class=column_13 type=Width>75</>
<a class=column_13 type=Item>DateTime</>
<a class=column_13 type=Width>100</>

The column_13 class displays the following in Job Search (Report view):

The 'Link Location' column (not shown above) is automatically added.

The following GRML creates the results for the Results area of the Data window for the Job Search request 'java la'. Instead of listing every result, only the top 3 will be shown.

<a class=rslt_13 type=Item>Nov 11</>
<a class=rslt_13 type=Item>Sr. Java / J2EE Architect Needed in LA</>
<a class=rslt_13 type=Item>US-CA-Los Angeles & Orange County</>
<a class=rslt_13 type=Item>Zion Partners</>
<a class=rslt_13 type=Item> 1:java la </>
<a class=rslt_13 type=Item>1/4/2001 5:58:19 PM</>
<a class=rslt_13 type=link>jobsearch.monster.com/getjob.asp?q=java+la</>

<a class=rslt_13 type=Item>Dec 5</>
<a class=rslt_13 type=Item>Bright mid-level Java, JSP engineer needed!</>
<a class=rslt_13 type=Item>US-CA-Carson</>
<a class=rslt_13 type=Item>Remington International</>
<a class=rslt_13 type=Item> 1:java la </>
<a class=rslt_13 type=Item>1/4/2001 5:58:19 PM</>
<a class=rslt_13 type=link>jobsearch.monster.com/getjob.asp?q=java+la</>

<a class=rslt_13 type=Item>Dec 8</>
<a class=rslt_13 type=Item>LA Financial Co. seeks a .NET programmer</>
<a class=rslt_13 type=Item>US-CA-Los Angeles</>
<a class=rslt_13 type=Item>Atlantis Partners</>
<a class=rslt_13 type=Item> 1:java la </>
<a class=rslt_13 type=Item>1/4/2001 5:58:19 PM</>
<a class=rslt_13 type=link>jobsearch.monster.com/getjob.asp?q=java+la</>

The rslt_13 class displays as follows for Job Search:

When the web browser reads the GRML, it parses each line and attempts to put the value of the tag pair where the tag attributes indicate. When the web browser parses the class attribute and finds either edit_13, combo_13 or dynamic_13, it attempts to create the Input Form of the Data window. When it reads column_13 or rslt_13, and a type attribute that has the item property, it begins to create the Results area of the Data window. Results are added by inserting the rslt_13 tag pair value in the order it is encountered. So, the third item read for a rslt_13 tag pair, is placed in the third column. If there is no third column, the web browser adds a new result.

Now that we have seen the GRML for the Results area for Job Search, you are now ready to look at the ASP that created this web page.

The server-side script included in the 'sample web applications' download uses PerlScript and VBScript and requires IIS. To view the script that generates the GRML above, look at the jobs.asp file. In fact, load it on your server and submit some requests. In order to get it to work, you will need to download ActiveState's ActivePerl module. Or, you can just port it over to .NET if you have the inclination.

Since Perl has excellent text-handling facilities, the bulk of the parsing is done using it. However, VBScript has some convenient functions that were needed, so they are included in the vbperl.inc file.

If you are not proficient with Perl, then the server-side script can be written with the tool of your choice. Because this is an "adapter" type of web application that needs to parse HTML, Perl proved to be very capable.

Conclusion

Well, that's it. You should now have a basic understanding of the GordonRhodes Environment, the GordonRhodes Markup Language, the Pioneer web browser, and dynamically generating GRML web pages. You know the basic windows that comprise the Pioneer user interface and how to submit requests and view results. You know there are three ways to create a web page that handles user requests: using a database, using a non-database source, or using another website. After all that, you now should know a whole lot more about GRML than when you started.

In the next article, other aspects of GRML will be discussed. For instance, how do you create a non-database and non-adapter web application? Or, how do you combine GRML and HTML into a single web page? Other web applications will be introduced, such as search engines, image galleries, and even RSS. In addition, the web browser interface will be explored and explained further to demonstrate navigation, file handling and other display options.

There are lots of concepts to understand to become proficient using these technologies. In fact, it would probably take a book to discuss every aspect of it. Just remember, no one becomes an expert overnight.

Points of Interest

• Pioneer only reads GRML web pages.
• GRML only has one tag, the <a ...> tag.
• If the <a ...> tag is not closed, it will be ignored by the web browser.
• All tags in GRML are paired. There is one open tag <a ...> and one close tag ... </>.
• Each tag pair must be on the same line or the web browser will ignore it.
• There are 3 attributes in a tag pair - class, name and type.
• A tag pair always has a value, even if it is nothing.
• All tags must specify class and type attributes.
• A GRML web page begins with <GRML> and ends with </GRML>.
• You can combine a GRML web page with a HTML web page by just commenting out the GRML with the <-- and --> tags.

Related GRML articles

• HTML, XML, RML - making a better markup language for the web.
• A simple web page format that works with Windows and ASP.

History

• 1/5/04
  • Rewrote the article to focus on Job Search and Auctions.
  • Described the Pioneer user interface.
  • Changed the example images.
  • Removed the PerlScript from the article.
  • New terms are more consistently described and used.
• 6/9/03
  • Changed the focus of the article to GRML from RML.
  • Updated the Pioneer download. Updated the images.
  • Updated article content to reflect Pioneer's improved features for reading and displaying GRML.
• 1/20/03
  • Updated the text in many areas to make it more consistent and clear.
• 1/9/03 - 1st version of article.
  • "Weather" web application, Rhodes Web Framework, RML, Pioneer.