Introduction
The World Health Organization is coordinating the global response to human cases of the H5N1 avian influenza and monitoring the corresponding threat of a global influenza pandemic. Australia is prepared with a Australian Management Plan for Pandemic Influenza coordinated by the federal government. However, a global pandemic will stretch the resources of all nations. There will be a need for authoritative, rapid information dissemination and the provision of temporary medical facilities.
Sahana is a web based disaster management system developed in Sri Laka for the December 2004 Tsunami. The system was further developed and Version 2 of Sahana was released as free Open Source software for dealing with future disasters. This version incorporated some changes I suggested to allow the system to operate on tablet computers, PDAs, mobile telephones and other low bandwidth small screen devices. The Sahana developers have discussed extending the system to help developing nations deal with a bird flu outbreak.
This presentation will detail what changes were proposed for the web design of Sahana to make it more suitable for wireless mobile use, what changes were actually for Sahana 2 and why. The changes which might be made for a bird flu outbreak will be outlined, and how this could be integrated into the Australian, and global systems being developed to deal with a pandemic.
Sahana 1
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 was implemented as a web hosted database application and 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 was a web based application, there was the potential to modify Sahana 's user interface to minimize bandwidth and allow it to use small screen handheld devices.
Handheld devices have limited screen, data input, processing and communications. It would have been possible to redesign the Sahara user interface to work with a specific handheld device, but there was a better option: design it to work with a large range of such devices. 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 was offered to the Sahana project for version 2.
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 1 Implementation
Sahana 1 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.
Sahana home page
Modifying Sahana
Sahana 1 could be converted to a pure CSS design, optimized for small screens and slow network connections. The process was essentially to:
- Remove extraneous code, such as unnecessary Javascript,
- Remove formatting of text from the HTML to external CSS style sheets,
- Replace table based layout with CSS,
- Remove unnecessary images and optimise the remainder, remove any text from images and put it in the HTM, and
- Add extra CSS to allow adaption to hand held and other devices.
The HTML of the web page was automatically cleaned up with utilities such as Tidy and Amaya. Setting the document type to XHTML Strict or to XHTML Basic allows web tools, such as Amaya, to be used to enforce a leaner, clener 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 Sahana 1 home page is approximately 10 seconds:
| 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 greatly reduced 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">»</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.
Proposed Sahana
The proposed modification of Sahana displayed in a desktop web browser:
Sahana home page on a desktop web browser
On a mobile phone browser
Sahana home page on a mobile phone
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.
Sahana home page in Chinese
Translated on a mobile phone
Sahana home page in Spanish on a mobile phone
Sahana 1 to 2
The above design was done too late to be used in the Sahana 1 system. However, work was done to generalize Shahana to handle disaster management for future emergencies.
This group exists to gather together representatives from various projects and groups that use ICT (information and communication technology) for to help in managing relief, recovery and rehabilitation efforts and complement and support each other in improving and building systems that focuses on the quick benefits to the end victim. The initial theme of discussing will be the use of FOSS (Free and Open Source ) software in building such systems.
From: Humanitarian ICT, Yahoo! Group, Mar 7, 2005, URL: http://groups.yahoo.com/group/humanitarian-ict/
Sahana 2
Sahana was developed at short notice for the December 2004 Tsunami. Version 2 of Sahana was done as a general purpose system:
The first release of Sahana phase II is now being tested. For the first release we have looked to cover pretty much all of the phase I functionality + enhancement that make the application a lot more complete in terms of functionality.
It is currently being hosted at http://cvs.opensource.lk/sahana2 for review. ... we will make a release available (with LiveCD) for anyone to download. Additionally we will look to have a stable version live, available as required to help out/propose in a new disaster situation.
Please submit any bugs (not enhancements right now please :-) you may come across on the bug tracker at http://sourceforge.net/tracker/?group_id=127855&atid=709778 r group on the web, go to: http://groups.yahoo.com/group/humanitarian-ict/
From: Sahana phase II testing available for review, humanitarian-ict, Chamindra, 9 Nov 2005, URI: http://groups.yahoo.com/group/humanitarian-ict/
The user interface for Sahana 2 is usable not only on conventional PCs but hand-held devices. Some improvements could be made to speed up the interface for low speed links and improve the interface on hand held devices. The flexible user interface of Sahana 2 can be used on large projection screens as used in a crisis centre to keep a team of people up to date, as a briefing and training tool.
Web based Interface
Sahana 2 uses a web browser as the user interface linked via the Internet to a server running a database. It uses the newer versions of HTML (XHTML 1.0 Transitional), cascading style sheets (CSS) and Javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" "en">
<head>
<title>Sahana Disaster Management System </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen, projection" type="text/css" href="theme/default/sahana.css" />
<!-- <script type="javascript" src="theme/default/sahana.js"/> -->
</head>
Source code from Sahana Disaster Management System, 2005 URI: <http://cvs.opensource.lk/sahana2/
New CSS
The use of CSS for defining the structure of the web page, in place of fixed tables usually used, allows the page to adjust itself to fit on a wide range and size of computer screens. This can be from a credit card size device which fits in a packet to a wall sized projection screen.
/* Now to layout elements... */
#container {
}
#header {
border-bottom: #036 5px solid;
padding: 0 1em;
background-color: #369;
height: 100px;
position: relative;
}
#header h1 {
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 400px;
text-indent: -9999px;
From: Sahana - Default Theme - Stylesheet, Prabhath Sirisena, 2005, URI: http://cvs.opensource.lk/sahana2/theme/default/sahana.css
Sahana 2: Look of the Page
Sahana 2 has a simple three panel design, with the title in the top panel, menu on the left and content on the right.
Illustration 1: Sahana on a SVGA Screen
Sahana 2 on a VGA screen
The the menu panel is fixed, while the other two panels adjust to the width of the browser window:
Illustration 2: Sahana on a VGA screen
Sahana 2 with no CSS
With the CSS disabled, the design reverts to a single column, with what were the three panels arranged vertically (title, menu and content).
Illustration 3: Sahana on a QVGA Screen with no CSS
Usable with PCs and hand-held devices
With the default three panel layout, the system is usable low cost PC and laptops with lower resolution VGA screens (640 x 480 pixels). With the alternate one column layout the system is usable on a monochrome QVGA screen of a hand held device, such as a PDA, in landscape mode (320 x 240 pixels).
The system may not be usable on some PDAs and mobile phone devices with portrait mode QVGA (240 pixels wide by 320 pixels high) or smaller screens. When tested on the Openwave SDK 6.2.2 mobile phone emulator with a portrait QVGA screen the columns of data in a Missing Person Search became too narrow to be easily read.
Illustration 4: Sahana Missing Person Search Displayed on Portrait Mobile Phone Screen
Sahana 2 on the Opera browser in small screen mode
However when tested with the Opera browser set to emulate a mobile device (small screen mode) each cell of the table was displayed on a separate line, making the display just usable. A test on a real device (Sharp gx30 GSM mobile phone with QVGA portrait screen) showed a similar result. The table cells are displayed column order (Picture, Name, Appearance, Missing Details, Status), then by rows (Person 1, person 2, person 3). This is somewhat confusing as all the column headings are displayed first, then the data, but is readable.
Illustration 5: Sahana missing person report on the Opera browser in small screen mode
The table's column headings have been correctly marked <THEAD> to identify them to the browser. The column headings have been marked as data <TD>, when they should be marked as header information <TH>. This makes little difference with ordinary web browsers, but can assist accessible devices for the disabled.
<THEAD>
<TD>Picture</TD><TD>Name</TD> <TD>Appearance</TD><TD>Missing Details</TD><TD>Status</TD>
</THEAD>
From: Missing Person Registry Search, Sahana Disaster Management System, 2005 URL: ttp://cvs.opensource.lk/sahana2/index.php?mod=mpr&act=search
Recommendation: Mark column headings as <th> to assist accessible devices to render tables.
When used on a small screen, the menus fill the display. The user needs to scroll down to see the contents of the page. Hypertext links are provided at the top of the screen to jump to the contents or the module menu. However the layout can still be confusing as when the user selects an option from the menu, nothing seems to happen. The contents have changed, but that is not visible on the screen, just the unchanged menus. The design could be changed to move the contents up to between the two menus. However, to maintain compatibility with a conventional PC screen this would result in the layout changing to have the content in the centre of the screen with one menu on each side of it. This may not be worth changing for.
Download time
With a wireless hand held device, screen space and bandwidth are at a premium. Any unnecessary graphics should be disabled as these take up screen space and bandwidth. The HTML for the Sahana home page is only 3kbytes, making it very quick to load however, graphics will make this twenty times as large.
With CSS disabled the flower motif of the top panel is disabled, but a decorative 63kbyte image on the home page remains (http://cvs.opensource.lk/sahana2/theme/default/img/home_pic1.png).
On a 14.4Kbps link, as might be expected with a hand held device, or a laptop with a satellite phone connection or slow dial up modem, the home page would take 46 seconds to download. This is unacceptable (ideally it should be under 10 seconds). A work around would be for the user to set the browser to disabled images. Images could be manually turned on where needed. However, the only part of the application which appears to need images is for photos of missing people. The operators of the system are likely to receive limited training and may not know how to disable and enable graphics. So it would be better to minimise unnecessary graphics.
A test using a GSM 2.5 generation phone displayed the home page in 14 seconds. The graphics did not display due to incompatibility with the phone web browser, speeding the display.
Recommendation: The decorative images should be disabled for non CSS and hand held devices. Or then remove them to a separate "About" page (see below).
Recommendation: An "about" page should be added to the main menu. This will provide an overview and introduction to the system. It should include a link to a presentation giving the background to the system, with similar content to a Powerpoint presentation but in web format (URI: http://www.linux.lk/~chamindra/docs/Sahana-Pakistan.pdf). This will allow briefings on the system to be given using the system.
Metadata
The page has a title but no author description or keywords metadata. This will make it harder to find with a search.
Recommendation: Author, description and keywords metadata be added to the head of each page.
Accessibility
The images lack an ALT tag, to aid access. The images are only decorative and not essential and this needs to be conveyed to the reader who can't see them.
Recommendation: Blank ALT tag be used to indicate the images are not necessary.
Translation of Interface
It proved possible to display the Sahana interface using the Google automatic translation service. It was possible to select menu items in the translated language. The translation is not suitable for updating the database as any data downloaded is translated and will corrupt the database when uploaded.
Google offers a free service that automatically translates pages published in languages other than English. Not all languages are translated and not all pages in those languages we do support are translated completely. Nor does the translation software recognize text within images, so these remain untranslated.
From: Translation of Snippets and Web Results, Google, 2005, URI: http://www.google.com/intl/en_ALL/help/faq_translation.html
Illustration 6: Sahana 2 Machine Translated into French
Translation of Mobile Interface
Translation also worked on a small screen device (although these may be limited by available fonts for languages such as Chinese and Japanese).
Illustration 7: Sahana on a Mobile Device in Simplified Chinese
However, a problem was found with the results of a missing person search not being translated by the Google translation service. After a search the interface slipped back into English. This problem did not occur with the Babel Fish Translation Service.
Using the Web in a Global Avian Influenza Pandemic
The web can be a key tool for dealing a response to a potential global avian influenza pandemic. The Australian government has a Australian Management Plan for Pandemic Influenza. There are corresponding state plans:
- NSW Health Interim Influenza Pandemic Action Plan
- Victorian Influenza Pandemic Plan
- Queensland Government and pandemic planning
- SA Pandemic Influenza Operational Plan
- WA Management Plan for Pandemic Influenza - November 2005
- Tasmanian Major Epidemics Management Plan
- ACT Influenza Pandemic Action Committee (ACTIPAC)
However, a global pandemic would stretch the resources of all nations. There will be a need for authoritative, rapid information dissemination and the provision of temporary medical facilities. These conditions are similar to those occurring in a natural disaster, such as those Sahana were created to deal with.
The use of web based software provides the opportunity to combine a system for dealing with a disaster with an information system about developments and training for disaster response. The use of standard computer hardware and software allows a "bootstrap" approach: equipment from a local school or office can be pressed into service for emergency coordination. The Internet can be used to download the needed software and then the training and information can be obtained over the web.
Sahana extended for a pandemic
Sahana developers have discussed extending the system to help developing nations deal with a pandemic.
A few relevant points to raise about pandemics are: -
1.1 Little to no physical damage on environment/infrastructure - most communications infrastructure should be working (although bandwidth will be reduced from people working from home etc).
1.2 Measures used to manage pandemics are well suited to use of ICT - quarantine, isolation, social distancing. It will be difficult for people to co-ordinate in person - and ICT is being looked to as a key technology to assist because many people will be forced to stay a home.
1.3 Potential to impact the entire planet in a short period of time, and little opportunity for support from NGO's etc because of international, and potentially even country-internal travel restrictions. The scale of a global pandemic is far and away larger than nearly all types of disasters.
From "Requirements for customizing Sahana for Pandemics", FOSSWiki, 20 Feb 2006
In many ways a pandemic is easier to deal with for an IT based system, as unlike a tsunami or hurricane, the telecommunications infrastructure will not be damaged. However, more communication and information will be required and the disaster will cover essentially the entire globe.
Essentially what is required is a "Just in Time" training system, to provide the community, volunteers and professional emergency workers with information on what they need to do. This could be done by web based training packages and podcast video and audio, delivered on-line as required.
The needed information to deal with a potential pandemic is already provided on-line by WHO, Australian Federal and state governments. However, the information is not currently in a suitable format for use. The point of view needs to be reversed from a "top down" approach which suits health and emergency officials, to a "bottom up" one to suit on site workers. Many of the planning documents are large PDF files which are difficult to download and read on-line. The material needs to be divided up into components which are easy to view and understand. This material can also be formatted for machine translation to allow for non-English readers. At the same time the information can be designed for efficient display on hand held low bandwidth devices. In this way the information can also be made available for developing nations with limited IT facilities.
Working with Web Companies
Added 26 March 2007: On Thursday 29 March 2007, Will Blott and Alan Noble from Google's Sydney office are visiting Canberra, to explore ways to work with ANU. This could include emergency application prototypes by students.