You are here: Home / Journal / WebOnCD

WebOnCD

ByGarf

The WebOnCD concept concerns putting standard HTML (hypertext mark-up language) pages on a local removable disc such as a CD ROM or DVD. Simple WebOnCD publications are very easy to create. They require little previous programming experience, and no special software. Any text editor such as Notepad for Windows, KDE KWrite or Kate for GNU/Linux or EMacs text editor will create HTML.

However, care should be taken using proprietary editors such as Microsoft FrontPage because these can create non-standard, vendor-specific HTML that may not appear as desired in all web browsers. And there are many other pitfalls one needs to be aware of in order to produce a high quality product.

Advantages.

Using WebOnCD to manage large chunks of data from a local source such as CD actually has some distinct advantages over using the internet…

  1. Big files such as high resolution colour photographs and videos load more quickly locally because you’re not trying to force a lot of data down a slow telephone or broadband line.
  2. Most internet service providers’ hosting packages limit the amount of space you may use – sometimes as little as 50MiB. CD ROM boasts 650MiB. DVD is available up to 9 GiB. Drives can be stacked together, and new even higher density recording media such as Blu-Ray is due to appear on the market shortly.
  3. Some types of information are not suitable for placing on the internet for the world to see. But WebOnCD allows developers to distribute large multimedia publications privately to a selected audience using a similar methodology to internet websites.

Main design features of WebOnCD

  • Platform independent – WebOnCD will run on Linux, Macintosh & Windows computers.
  • Uses a strict 8+3, all-lower-case, no spaces file-naming convention. This ensures compatibility between various operating systems.
  • Can incorporate a variety of cross-platform file formats including…
    • HTML (hypertext mark-up language).
    • CSS (cascading stylesheets).
    • JPEG (joint photographic experts group) pictures.
    • PDF (portable document format).
    • MPEG (motion pictures experts group) video. Note MPEG2 may require the installation of a special decoder on some systems.
    • MP3 (motion pictures experts group version 1 layer 3) sound files.
    • Cheap – requires no proprietary software.

Best of both Worlds

One important use of WebOnCD is in conjunction with a large existing web site. Big files that don’t need updating very often, such as MP3 sound samples, JPEG photographs and MPEG or MPEG2 video clips can live locally on CD or DVD, along with the main HTML multimedia publication. Smaller, text-based files containing data such as prices and frequently updated statistics can live on the web site. Simply clicking a linked word or graphic in WebOnCD HTML publication automatically connects the user the website – providing the user’s computer is suitably equipped of course.

For example, a company could produce a catalogue at regular intervals on CD ROM featuring high resolution images sounds & video to advertise its products. In the meantime, customers could use the CD to connect to this company’s website for latest prices, special offers and to order products on-line.

Creating a WebOnCD publication

Naturally, working with a large volume of data requires meticulous attention to file structure – ensuring files are in the correct folders, and that links between files work correctly. However, in developing WebOnCD, it was found that multimedia publications can be completed much more quickly in HTML than using proprietary multimedia authoring tools.

However, to make a WebOnCD publication appear smooth and sophisticated to the end user does require some attention to the programming methodology. And due to the limitations of HTML, a little script programming can improve the look & feel of the end product.

Programming

The HTML used today in WebOnCD publications on its HTML pages is to “W3C HTML 4.1 Transitional” standard.

This standard allows both on-page formatting and the formatting by CSS (cascading style sheets). Many WebOnCD projects use CSS extensively, and keep the CSS information in separate ‘*.css’ files. This has several advantages for the developer…

  1. Styles, colours & fonts on many pages may be customised by altering a single style sheet.
  2. It becomes very easy to customise an entire publication to suit the need of the client.
  3. The HTML code on the individual pages can be very simple since it requires just one link back to the style sheet to impose all the formatting information.
  4. A common look and style may be applied to the entire WebOnCD publication.

Style sheet examples

Thus one line of code between the tags will link a style sheet to an HTML document. This example assumes that the style sheet called ‘main.css’ is in the same folder as the HTML document…

The style sheet itself can control almost all aspects of a page’s design. These lines of code would determine the colour of the hypertext links, the body text, the page background colour and the ‘H1’ main heading font. Note the list of fonts defined for font-family. This tells the user’s browser to substitute another similar font if the preferred one is not available on the user’s system…

A:LINK{
 text-decoration: none;
 color: #3333FF;
}

A:VISITED{
 text-decoration: none;
 color: #3333FF;
}

A:HOVER{
 text-decoration: underline;
 color: #FF9999;
}

A:ACTIVE{
 text-decoration: none;
 background: #FF9999;
 color: #FFFFFF;
}

BODY{
 background: #FFFFFF;
 color: #666699;
 font-family : verdana, arial, helvetica, sans-serif;
 font-size: 12px;
 padding: 5px;
}

H1{
 font-size: 32px;
 color: #666699;
 font-family: verdana, arial, helvetica, sans-serif;
}

Frames

WebOnCD projects also uses a page design technique called ‘frames’. These pages are generally written to “W3C HTML 4.1 Frames” standard. However, additional non-W3C-compliant code is sometimes required within the tag to make the frames appear in a similar manner in both Internet Explorer & Mozilla-family browsers, or to customise the look of frames’ borders.

Indeed, the Frames method is not without its shortcomings. In developing WebOnCD, three problem areas were identified which were potentially very annoying for the end user…

  1. It is possible to load one frameset within another. This can be very confusing and it was deemed essential that some method be deployed to ‘break’ WebOnCD frames pages out of other developer’s frames.
  2. Frames pages by their very nature tend to be larger than standard HTML pages. They look really silly squeezed into a tiny window. So it is necessary to make the available window as large as possible.
  3. It is possible for a user to open an HTML page without its parent frame because users have access to the file structure with their file managers. Some scripting is therefore necessary to make this ‘orphaned’ page load in its parent frame.

So some simple JavaScript scripts were developed to overcome these problems. All WebOnCD frame-tweaking scripts appear between the tags and do not prevent pages from loading if browser does not support JavaScript.

Scripts used in ‘index.htm’ frames page

This script in the header section ensures that WebOnCD frames page is not loaded inadvertently in another frame…

<script language="JavaScript">
 if (parent.frames.length > 0) {parent.location.href = self.document.location}
</script>

This makes WebOnCD ‘index.htm’ frames page fill the user’s screen. First it moves the window to the left of the screen. Then it makes this window fill the user’s screen.

<script language="JavaScript">
 self.moveTo(0,0); self.resizeTo(screen.availWidth,screen.availHeight); 
</script>

Script used in child pages

This script in the header section forces child pages to load in WebOnCD’s ‘index.htm’ parent frames page.

This is in case the user double-clicks on the child HTML page instead of the parent ‘index.htm’ page. NOTE: one has to substitute the real name of the child page in the script for ‘template.htm’. It also requires a script in the ‘index.htm’ parent frames page in order to function correctly…

<script language="javascript">
 if(self.location==top.location)self.location="index.htm?welcome.htm";
</script>

This line of HTML ensures linked pages end up in the correct frame…

<base target="_self">

Script used in contents page

This script in the header section forces WebOnCD’s entire parent ‘index.htm’ frames page, including ‘contents.htm’ frame to load, not just the contents frame on its own…

<script language="javascript">
 if(self.location==top.location)self.location="index.htm"; 
</script>

This ensures linked pages land up in the main frame…

<base target="main">

Search Engine

If the WebOnCD contains a lot of data then a search engine is desirable. However, this needs to be platform independent. So a method was chosen that is JavaScript based. However, to write this script manually would be time-consuming and error-prone. So instead, WebOnCD uses search script generated automatically by a piece shareware called SearchMaker Pro. Current WebOnCD variants are using scripts generated by version 3.2 of this software. The software does not need to be distributed with the WebOnCD disc – only the JavaScript code it produces. Whilst SearchMaker Pro is a Windows product, the JavaScript-based search engine it produces will run on all major computer platforms. This latest release of SearchMaker Pro also provides search capabilities for non-HTML documents such as PDF’s.

Additionally to make project management easier, WebOnCD deploys a special feature of SearchMaker pro that enables it to produce the JavaScript separately from the HTML code needed for the search form. This enables the developer to design a highly customised search form whilst the search engine JavaScript is produced automatically by the software.

References

End Note

“WebOnCD” is a registered trade mark belonging to Garfield Lucas and registered with the UK Patent Office, REF2005500668. So please feel free to use the idea – but not our trademark!