Web Disaster Management

Introduction

This document gives an example of how the web interface of disaster management software can be redesigned to make it more effective in an emergency. Web technology was pressed into service during the the Canberra 2003 bushfire emergency and the 2004 Indian Ocean tsunami response.

However, the design of such web based systems can be tuned to make them more efficient and more flexible in an emergency. Better web design can reduce resource needs on overloaded emergency networks, allow operation on small screen mobile devices in the field and allow emergency information to be automatically translated into local languages.

These are notes for a presentation to the Australian Computer Society, 6 April 2005 by Tom Worthington FACS HLM, IT consultant and Visiting Fellow in the Department of Computer Science at the Australian National University. An earlier version was presented for the ANU course "Tools for New Media and the Web" (COMP1710). A revised version will be presented as part of the website design component of "Networked Information Systems" (COMP2410 also known as "Internet, Intranet, and Document Systems" COMP3400/COMP634).

Sahana

Sahana is an application developed in response to the December 2004 Tsunami:

Crisis, for example natural disasters, management software; including refugee camp management, supply/demand match making, lost persons, etc.

Sahana disaster management system, SourceForge, 2005, URL: http://sourceforge.net/projects/sahana/

Sahana was developed in response to an urgent need by the Sri Lakan ICT industry. It is implemented as a web hosted database application. It is designed to operate using the Internet for communication to a web browser running on a desktop computer. However, by its nature, such an emergency application may be in high demand when there is limited bandwidth available and only low capacity display devices available. As it is a web based application, there is the potential to modify Sahana 's user interface to minimize bandwidth and allow it to use small screen handheld devices. One such device looked at by the Sahana project is the Simputer PDA, designed as open source hardware by an Indian non-profit organisation:

The Simputer is a low cost portable alternative to PCs, by which the benefits of IT can reach the common man.

It has a special role in the third world because it ensures that illiteracy is no longer a barrier to handling a computer.

simputer Welcome to Simputer, The Simputer Trust, 2000, URL: http://www.simputer.org/

As with other handheld devices, the Simputer has limited screen, data input, processing and communications. It would be possible to redesign the Sahara user interface to work with the Simputer, but there is a better option: design it to work with a large range of such devices. The Simputer, like many new devices, incorporates a web browser. With careful design, a web interface can be made to work on a range of small devices and still function with a normal desktop web browser. The design detailed below has been offered to the Sahana project for future versions.

A more detailed explanation for this approach to emergency communication, using the example of the Canberra bushfire disaster is discussed in "Dealing with Disaster: Using new Networking Technology for Emergency Coordination", Tom Worthington, 29 October 2003, URL: http://www.tomw.net.au/2003/enet.html

Sahana Implementation

Sahana uses MySQL, Java and PHP to produce a Web-based user interface to a database application. One external CSS style sheet and some internal CSS statements are used for formatting of text. HTML table statements are used to lay out the web pages.

Modifying Sahana

Sahana can be converted to a pure CSS design, optimized for small screens and slow network connections. The process is essentially to:

1. Remove extraneous code, such as unnecessary Javascript,
2. Remove formatting of text from the HTML to external CSS style sheets,
3. Replace table based layout with CSS,
4. Remove unnecessary images and optimise the remainder, remove any text from images and put it in the HTM, and
5. Add extra CSS to allow adaption to hand held and other devices.

The HTML of the web page can be automatically cleaned up with utilities such as Tidy. Setting the document type to XHTML Strict or to XHTML Basic allows web tools, such as Amaya, to be used to enforce a leaner version of HTML (the document can then be converted back to an older version of HTML for compatibility with older browsers). Conversion of the layout to a non-table design requires manual work. Implementing the World Wide Web Consortium's Web Content Accessibility Guidelines helps ensure an efficient design and can be checked with tools, such as Bobby.

Estimate download time of existing page

Assuming a 5 kilobyte per second wireless modem is used, the download time of the existing Sahana home page is approximately 10 seconds:

Page size (kbytes)

File	Existing Size	New Size	Mobile Option
HTML	5.63	1.99	1.99
default css	3.20	2.38	2.38
images	40.49	11.88	1.35
Total	49.32	16.25	5.72
Reduction	-	67%	88%

Tidying the HTML and CSS halves the file sizes. However, as is usual with web pages, images make up most of the data downloaded (83% in this case) and so optimizing these will reduce greatly reduce data requirements.

The CNO logo is stored as a 256 color GIF image, but only contains a limited range of colours. Using 16 colors reduces the file to one third the size, with little change in quality. The CNO logo contains text. This text may not be readable on a small screen device (or by a search engine or translation program) and would be better removed from the image to be included as text. Removing the text halves the file size. Similarly the Government crest can be reduced in size. Removal of the shaded background would improve the appearance and reduce the size of these further.

The third image "Sahana", is a photomontage of a bird and a flower, overlaid with the word "Sahana". Removing this word would not significantly reduce the file size, but other web pages of the site contain the same image overlaid with different words. Removing the words would allow the one image to be used for all pages. The image is stored as a JPEG image and with further compression can be halved in size.

The Government crest is useful in adding to the authority of the web site. The CNO logo is less useful. The image of bird and flower appears purely decorative. Consideration should be given to omitting the latter two images from the site. However, there is the option of having them displayed on a desktop computer, but suppressed using CSS when the web page is displayed on a hand held device.

The government and CNO logos are "hotspots" allowing the user to click on the image to access the relevant organisation home page. This would require alternate (ALT) text to be included for those users who cannot see the images. Removing the text from within the images and placing it explicitly on the web page next to the images removes the need for the ALT text. The links can be placed on the text in the document and any mention of the images suppressed from the page, if images are not displayed.

Converting to XHTML with CSS

Conversion of the text formatting to CSS was done automatically using Tidy. Some of the explicit font declarations had to be replaced manually to make a structural markup. The font style each level of headings (h1, h2 ...) need only be declared once, so the styles are consistent and the document will be readable without the CSS.

The existing web page uses a table statement to lay out the body of the page as three columns. This makes the page difficult to read on a small screen. To overcome this the table statement can be removed to make one column of text, then DIV tags and CSS used to convert the page back into three columns. A device with a small screen can ignore the three columns and display the text in one long column.

<tr>

<td width="10" align="center"><span class="formText"><strong><span class="style2">&raquo;</span></strong></span></td>

<td width="60%" nowrap class="loginText"><a target="links" href="orgreg/" class="style1" style="text-decoration:none">Sahana Organization Registry </a></td>

Old Tabled based code

<div class="menu">

<ol>

<li><a accesskey="1" target="links" href="/orgreg/">Organization Registry</a></li>

New XHTML

The CSS

In place of a table, an ordered list is used to display the menu of functions for the system. The corresponding CSS suppresses the numbering of the list and shows a line between each list item, to provide the same appearance as the existing table version:

.menu { float: right; width: 40%; font-weight: bolder; padding: 2em; line-height: 2em; background-color: #D8E9FD;}

.menu li { list-style-type: square; border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #B4C6DB; border-bottom-color: #B4C6DB;}

CSS for a Menu on a Desktop Computer

Why use an ordered list and the suppress the numbering? This so that on a handheld device the numbers can be displayed to aid quick access (pressing the corresponding number key on the phone keypad activates the link):

.menu {display:block; height: auto; width: 100%; padding: 0em; line-height: 1em;}

.menu li {list-style-type: decimal; border: none;}

CSS for a Menu on a Mobile Phone

By default columns will be displayed in the order English text is read: left to right top to bottom. This causes a problem with the Sahana home page as the third column contains the most important information: the menu of functions. On a small screen the menu should come first and this is possible using CSS. But it might be better to change the original design to have the most important information in the first column in all versions of the page.

Modified Sahana

The proposed modification of Sahana displayed in a desktop web browser:

On a mobile phone browser

Translated

As text has been removed from images, the web page can be machine translated into other languages. Here is what the slides look like when translated from English into Chinese using the AltaVista Babel Fish Translation Service. The translation is only approximate.

Translated on a mobile phone