Hem

Fakta

Nyheter

Länkar

Hjälpmedel

Tillsammans

Sök

Personligt

Login/ut

Hjälp

Gå till:  Hem      Project         Web Design Guide

info    Web4Health Web Design Guide Conventions: Serif font is used for comments, non-serif fonts for examples. info - Web Site Design Guide This is the design guide for the Web4Health Web Site.

Senast ändrad: 2 July, 2001

Table of contents

Colours
Syntactic Conventions
Top Menu Bar
The Fakta area
Acess Control
Icons
Use of Relative Länkar
Hjälp Texts
Use of Style Sheets

Colours

Red "red" is used for warnings and error messages.

Back to Table of Contents

Syntactic conventions

Commands are

Hem

 Khaki on Dark for the path where the user is

Hem

 Pink on Dark for the place where the user is

Fakta

This example shows that the user has started at "Hem", navigated to "Project" and then navigated to "Web Design Guide". The place where the user currently is is shown by pink colour on dark background.

Back to Table of Contents

Top Menu Bar

Hem

Fakta

Nyheter

Länkar

Hjälpmedel

Tillsammans

Sök

Personligt

Login/ut

Hjälp

The top menu bar should have the same text and usage in all regions, but translated to the language of the region. All the buttons in the top menu bar are clickable and will get to the designated area. The forum and news facilities are still not working in other languages than Swedish. Until this has been corrected, I suggest that the Nyheter, Personligt and Login/ut buttons refer to the English version of the web site. The place where you currently are is highlighted with black background and an pointing to this area:

Hem

 Also the pink on dark link is clickable in the horizontal top menu bar, since the user may be in a subarea and want to get up to the top.

When some information is not available in a particular language, a link should instead go to the corresponding information in the English area. The language for cross-links between languages should be indicated, except in the top-menu bar, where there is no room for it. Example:

Templates for the top menu bar are available in English, and should be developed also for other languages. A list of available English-language templates can be found at: http://web4health.info/sv/tech/index.html#templates. The English-language templates can be found at http: //web4health.info/sv/english-templates/.

Back to Table of Contents

The Fakta area

The facts area will contain a subject tree in a Yahoo-like format. The structuring of this area is not finally specified yet. Cross-links and the same item in more than one place are allowed.

The natural language question answering system will in its reply copy Tillsammans one or more Svar. This means that the same answer can occur in different format for different pages. To achieve this, an XML format will be designed for the fact items, so that they can be translated to multiple format. This XML format is not specified yet.

Back to Table of Contents

Access Control

Pages, for which access is limited, are accessed using the KOM 2000 groupware. This groupware provides flexible access control: Access control groups are possible, multiple access control groups can control the same area, individual persons can also be added to each area, each area has one or more "Organizers" who can modify its properties and access control. This requires some change to KOM 2000 to allow ordinary web pages within KOM, this has not been developed yet. Example of an access-controlled page done in the way KOM 2000 can do today. This example has special KOM formatting, but KOM will be modified to allow such pages withut KOM-specific formatting. Example of an access-controlled page with the new design. Example of how to create this page. (This functionality is not yet fully working).

Back to Table of Contents

Icons

The following Icons are available at http://web4health.info/images/:

	<img src="/images/answers.gif" width="73" height="50">		Logo for the Fakta area.
	<img src="/images/cat.gif" width="68" height="50">		Logo for forums, chats and communities.
	<img src="/images/discuss.gif" width="17" height="12">		Logo for Discussion links on dark background.
	<img src="/images/dubellupp.gif" width="11" height="12">		Logo for links to the top of the page on dark background.
	<img src="/images/info-big.gif" width="30" height="29">		Bigger logo for links to Hjälp texts and explanations.
	<img src="/images/info.gif" width="13" height="13">		Smaller logo for links to Hjälp texts and explanations.
	<img src="/images/link.gif" width="10" height="11">		Logo for links on dark background.
	<img src="/images/retry.gif" width="12" height="12">		Logo for retry commands on dark background.
	http://szalut.nu/images/w4h-logo-paths.eps		Web4Health logo in EPS format, suitable as a basis for creating bitmapped Web4Health images in various sizes.
	<img src="/images/w4h-logo.gif" width="159" height="39">		Web4Health Logo.
	http://szalut.nu/images/w4h-logo-paths.pdf		Web4Health logo in PDF format.
	<img src="/images/w4h-small.gif" width="88" height="22">		Smaller Web4Health Logo.
	<img src="/images/w4h-smaller-black.gif" width="60" height="15">		Even smaller black Web4Health Logo.
	<img src="/images/w4h-logo-high.gif width="125" height="46">		Higher Web4Health logo.
	<img src="/images/w4h-logo-277x70px.gif" width="277" height="70">		277x70 pixels Web4Health logo.
		<img src="/images/w4h-logo-450px.gif" width="450" height="113">		450x113 pixels Web4Health logo.
	<img src="/images/uppsvart.gif" width="15" height="5">		Logo for link backwards on light background.
	<img src="/images/laggtill.gif" width="17" height="18">		Icon for adding information to a document.
	<img src="/images/upptrans.gif" width="15" height="5">		Invisible logo for spacing.
	<img src="/images/1X1transparent.gif" width="1" height="1">		Another invisible logo for spacing.
	<img src="/images/erase-flag-2.gif width="18" height="20">		Command for erasing a red flag marking something as unseen.
	<img src="/images/tabort.gif width="20" height="18">		Remove letter from mailbox.
	<img src=/images/pennamellan.gif" width="26" height="30">		Pen symbol, writing symbol.
	<img src="/images/small-ball.gif" width="6" height="6">		Small ball. Can be used as bullet and separator.
	<img src="/images/tick.gif width="10" height="10">		Check on an item
	<img src="/images/private-1.gif width="89" height="30">		Can be used to indicate Hems and private areas.
	<img src="/images/private-2.gif width="89" height="30">		Can be used to indicate Hems and private areas.
	<img src="/images/pennaliten.gif>		Pen symbol, writing symbol, can only be used on khaki background because of anti-aliasing.
	<img src="/images/papperskorg3.gif width="17" height="18">		Waste paper basket.
	<img src="/images/bookmarks.gif" width="40" height="27">		Bookmarks.
	<img src="/images/meetings.gif" width="67" height="50">		A corridor with doors.
	<img src="/images/forum.gif" width="68" height="50">		One forum, people sitting around a meeting board.
	<img src="/images/chat.gif" width="58" height="30">		Chat logo, picture of people talking to each other.
	<img src="/images/all-forums.gif" width="53" height="46">		All forums, an open space with lots of contents in subareas.
	<img src="/images/Hem.gif width="53" height="46">
	<img src="http://web4health.info/images/address-book.gif">		Address book.
	<img src="/images/news-2.gif width="50" height="50">		Nyheterpaper, newsletter.
	<img src="/images/news-1.gif width="40" height="55">		Nyheterpaper, newsletter.
	<img src="/images/dropbox.gif width="100" height="100">		Area, to which users can send messages, but not read them, such as areas for registering users, etc. Only selected users can read in such areas.
	<img src="/images/thumb-tack-white-background.gif" width="31" height="29">		Put in the four corners of white notice-boards. Requires white background to work.
	<img src="/images/male.gif" width="15" height="15">		Small non-sexist icon for "male".
	<img src="/images/male-big.gif" width="32" height="31">		Larger non-sexist icon for "male".
	<img src="/images/female.gif" width="15" height="15">		Small non-sexist icon for "female".
	<img src="/images/female-big.gif" width="32" height="31">		Larger non-sexist icon for "female".
	<img src="/images/salad-sauce.jpg" width="55" height="113">		A "thousand-islands" salad sauce bottle.
	<img src="/images/wood2.gif" width="130" height="125">		Tiling wooden background.
	<img src="/images/english-button.gif" width="140" height="47">		"English" button, should link to the English Hem page.
	<img src="/images/english-button-light.gif" width="140" height="47">		Light "English" button.
	<img src="/images/english-button-grey.gif" width="140" height="47">		Greyed-ut "English" button.
	<img src="/imageshttp://fr.web4health.infoench-button.gif" width="140" height="47">		"French" button, should link to the French Hem page.
	<img src="/imageshttp://fr.web4health.infoench-button-light.gif" width="140" height="47">		Light "French" button.
	<img src="/imageshttp://fr.web4health.infoench-button-grey.gif" width="140" height="47">		Greyed ut "French" button.
	<img src="/images/spanish-button.gif" width="140" height="47">		Spanish button.
	<img src="/images/spanish-button-light.gif" width="140" height="47">		Light "Spanish" button.
	<img src="/images/spanish-button-grey.gif" width="140" height="47">		Greyed ut "Spanish" button.
	<img src="/images/swedish-button.gif" width="140" height="47">		Swedish button, should link to the Swedish Hem page.
	<img src="/images/swedish-button-light.gif" width="140" height="47">		Light "Swedish" button.
	<img src="/images/swedish-button-grey.gif" width="140" height="47">		Greyed ut "Swedish" button.
	<img src="/images/flag_france.gif" width="32" height="20">		French flag.
	<img src="/images/flag_sweden.gif" width="32" height="20">		Swedish flag.
	<img src="/images/flag_uk.gif" width="32" height="20">		English flag.
		<img src="/images/index-bubble-bottom.gif" width="222" height="82">		Used in building speech bubbles, see http://web4health.info/sv/index-center.html the Javascript code in http://web4health.info/index-top.html and http://web4health.info/sv/index-left.html on how to use it.
	<img src="/images/index-bubble-left.gif" width="88" height="244" border="1">
	<img src="/images/index-bubble-right.gif" width="55" height="244" border="1">
			<img src="/images/lan-bg.gif" width="370" height="370">	Tiling background image.

Back to Table of Contents

Use of Relative Länkar

Länkar within the Web4Health web site should preferably be relative. Two kinds of relative links can be used:

Advanced HTML editors provide a command like "Define Sites" in Dreamweaver, which will create the correct relative link automatically. You will, however, need to make the choice between a link relative to the site root or to the current document.

Back to Table of Contents

Hjälp Texts

The Hjälp area reached by the command in the upper-right corner of all Web4Health web pages is not quite ready yet.

The following Java-script code can be used for Hjälp text in pop-up windows links where needed:

Width and Height can be adjusted as needed depending on the size of the Hjälp text.

Example (click here): more info

Smaller Hjälp text links can link to another place on same web page. Example: info

There will also be a Hjälp system, possibly similar to the old Hjälp system in KOM 2000, but this part of Web4Health has not been specified yet.

Back to Table of Contents

Use of style sheets

There is a common style sheet used by most of the Web4Health pages to get consistency in the user interface. The http://web4health.info/web4health.css style sheet contains the following items:

A.nochange {
color : #0000FF;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A.nochange:visited {
color : #0000FF;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A.nochange:link {
color : #0000FF;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A:hover {
color : #FFDDDD;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A:active {
color : #FFDDDD;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A:visited {
color : #993300;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A:link {
color : #0000FF;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: underline;
}

A.meny {
color : #FFD639;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

A.meny:hover {
color : #FFD639;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

A.meny:visited {
color : #FFD639;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

A.meny:link {
color : #FFD639;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

A.sv-huvudmeny {
color : #000033;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

A.sv-huvudmeny:visited {
color : #000033;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

A.sv-huvudmeny:link {
color : #000033;
font-family : Verdana, Geneva, Arial, sans-serif;
font-weight : bold;
text-decoration: none;
}

BODY {font-family : Verdana, Geneva, Arial, sans-serif;}

P {font-family : Verdana, Geneva, Arial, sans-serif;}

TD {font-family : Verdana, Geneva, Arial, sans-serif;}

H1 { font-family : Verdana, Geneva, Arial, sans-serif; 
font-size: 40px; 
color: ##0042c6; 
background-color: white; 
font-weight: bold}

H2 {font-family : Verdana, Geneva, Arial, sans-serif; 
font-size: 32px; 
font-weight: bold; 
color: ##0042c6}

H3 { font-family : Verdana, Geneva, Arial, sans-serif; 
font-size: 24px; 
font-weight: bold; 
color: ##0042c6}

.MINI {  font-family: Verdana, Arial, Geneva, sans-serif; 
font-size: 10px}

.LIST {  line-height: 3ex}

.blue { font-family : Verdana, Geneva, Arial, sans-serif; 
color: ##0042c6; font-weight: bold } 

.pink { font-family : Verdana, Geneva, Arial, sans-serif; 
      color: #FFDDDD; font-weight: bold }

Back to Table of Contents