Rapport

Oppstartsfasen:

Da oppgaven skulle velges hadde vi 2 alternativer. Det ene var å lage en side om ????? og det andre alternativet var å lage en side om norrøn mytologi. Da flere av medlemmene på gruppa var svært interessert i emnet norrøn mytologi var valget svært enkelt. Oppgavene ble fordelt mellom medlemmene på gruppa og arbeidet var i gang.

Alle var med på å lage et utkast på hvordan sidene skulle være før hvert enkelt medlem på gruppa startet med sitt arbeid. Det felles utkastet gikk kort ut på at vi skulle ha en oppstartsside i form av et bilde som skulle fungere som en link videre til de 3 forskjellige verdensdelene som finnes i den norrøne troen. Deretter skulle vi ha et sideoppsett for hver av de 3 verdenene. Alle sidene skulle bygges opp etter den samme stilen, med svært like bilder og så lite varierende grafikk som mulig for at det ikke skulle ta for lang tid for besøkende å laste hver side. I tillegg skulle hver enkelt side inneholde litt grafikk i forbindelse med det emne det ble skrevet om. Denne grafikken skulle være svært liten, og den totale størrelsen på hver side skulle helst ikke overstige 25 kb. Den øverste verdenen skulle inneholde knappene History, Myths, Gods and Items. Den midterste verdenen skulle inneholde knappene History, Myths, Humans og Items, og den nederste verdenen skulle inneholde knappene History, Myths, Creatures og Items. Selvom knappene var like skulle de bare ta for seg nevnte tema i den verdenen de befant seg. Knappene ble optimalisert slik at de skulle ta minst mulig plass.

For å oppfylle kravene i oppgaven når det gjaldt bruk av python program, java-script og bruk av loggene fra apache hadde vi sett oss følgende løsninger:

Alle sidene skulle også gjøre bruk av css og være html 4.0 Transitional godkjent. Dette for at flest mulig personer skulle ha mulighet for å se siden. Vi valgte også at sidene skulle testes i de mest brukte browserne når de var ferdige slik at vi da kunne luke bort eventuelle "feil" da.

Gjennomføring av arbeidet (Layout og innhold):

Hele gruppa hadde middels eller god erfaring med html og CSS. Det tok derfor ikke så lang tid å lage sidene, men vi brukte lang tid på å finpusse designet. Etter å ha jobbet med oppgaven en uke var oppsettet for hvordan sidene skulle se ut tilnærmet ferdig. Det meste av teksten som skulle brukes var også skrevet og vi startet arbeidet med å sette sammen alt slik vi syntes det ble mest oversiktlig. Det viste seg da at noen av knappene måtte gjøres om da disse ikke passet inn under den verdenen de var tenkt. På "God" siden la vi til knappen creatures. På siden med "Human" la vi til knappen "creatures" og fjernet knappen "items" og på siden med "Hell" fjernet vi knappen "items". Vi var da ferdig med layouten og innholdet på sidene. Nå gjensto de tekniske løsningene.

Gjennomføring av arbeidet (Tekniske løsninger):

1. Vi gjorde først disse forandringer i konfigurasjonen til apache:

   
   1. for å enable SSI-støtte vil vi ha lagt til disse linjene:
   
   
   Options Indexes FollowSymLinks Includes //kun Includes er lagt til.
   
   
   og:
   
   
   # To use server-parsed html files
   
   #
   
   AddType text/html .shtml
   
   AddHandler server-parsed .shtml
   
   
   
   2. hvilken side som regnes som index fil:
   
   
   # DirectoryIndex: Name of the file or files to use as a pre-written html
   
   # directory index.  Separate multiple entries with spaces.
   
   #
   
   DirectoryIndex index.shtml index.html
   
   
   3. legge til støtte for python:
   
   
   # To use CGI scripts:
   
   #
   
   AddHandler python-cgi-script .py
   
   

2. Vi lagde nå to python cgi-scripts. Det ene var en enkel gjestebok. Den andre var en teller som baserte seg på loggene fra apache. Forklaring på scriptene er skrevet i selve py-filene.

3. Vi har laget disse javascriptene som kan sees på nesten alle sidene. Forklaring på koden finnes kun her:

   
   Script 1
   
   <script type="text/javascript">
   
   <!--
   
   function buildArray() {     			//lager tabell
   
        var a = buildArray.arguments;		
   
        for (i=0; i<a.length; i++) {
   
             this[i] = a[i];
   
        }
   
        this.length = a.length;
   
   }
   
   var urls1 = new buildArray("",			//her er sidene som skal brukes listet opp
   
        "index.shtml",						
   
        "god_history.shtml",
   
        "human_history.shtml",
   
        "hell_history.shtml",
   
        "about.shtml",
   
        "search.shtml");
   
   
   
   //lokka henter inn verdier fra formsen lenge ned i dokumentet
   
   function go(which, num, win) {			
   
        n = which.selectedIndex;			
   
        if (n != 0) {
   
             var url = eval("urls" + num + "[n]")
   
             if (win) {
   
                  openWindow(url);			//aapner urlen som hoerer til verdien
   
             } else {
   
                  location.href = url;
   
             }
   
        }
   
   }
   
   
   // -->
   
   </script>
   
        <form name = "form1">
   
   	 Click here to navigate site: 
   
        <select name = "menu1" onChange = "go(this, 1, false)">  
   
             <option>--- Navigate Site ---
   
             <option>Main
   
             <option>God World
   
             <option>Human World
   
             <option>Hell
   
             <option>About
   
   		  <option>Search
   
        </select>
   
        </form>
   
   
   	 
   Script 2
   
   <script type="text/javascript>
   
   <!--
   
   //sjekker med img -taggen hva som trykkes og bytter bilder utfra dette
   
   	if (document.images) {					
   
   		var HistoryOn = new Image()			//naar musa er over bildet
   
   		HistoryOn.src = "images/buthistory2.jpg"	//vises dette bildet
   
   		var HistoryOff = new Image()			//ellers
   
   		HistoryOff.src = "images/buthistory1.jpg"	//vises dette
   
   		var MythsOn = new Image()
   
   		MythsOn.src = "images/butmyths2.jpg"
   
   		var MythsOff = new Image()
   
   		MythsOff.src = "images/butmyths1.jpg"
   
   		var GodsOn = new Image()
   
   		GodsOn.src = "images/butgods2.jpg"
   
   		var GodsOff = new Image()
   
   		GodsOff.src = "images/butgods1.jpg"
   
   		var ItemsOn = new Image()
   
   		ItemsOn.src = "images/butitems2.jpg"
   
   		var ItemsOff = new Image()
   
   		ItemsOff.src = "images/butitems1.jpg"
   
   		//forteller kun at var HistoryOn feks. er satt sammen av imgName og On.src
   
   		//imgName er det som staar inne i img-taggen. b_num er bildet nr. 
   
   		//b_num brukes til å si hvilket bilde på sida som skal byttes om
   
   		}
   
   		function on (imgName, b_num) {
   
   			if (document.images)
   
   				document.images[b_num].src = eval(imgName + 'On.src')
   
   		}
   
   		function off (imgName, b_num) {
   
   			if (document.images)
   
   				document.images[b_num].src = eval(imgName + 'Off.src')
   
   		}
   
   		// -->
   
   </script>
   
   	<A HREF="god_history.shtml" onMouseOver="on('History',2)" onMouseOut="off('History',2)">
   
   	<IMG SRC="images/buthistory1.jpg" ALT="History" WIDTH=110 HEIGHT=56 BORDER=0></A><BR>
   
   	<A HREF="god_myths.shtml" onMouseOver="on('Myths',3)" onMouseOut="off('Myths',3)">
   
   	<IMG SRC="images/butmyths1.jpg" ALT="Myths" WIDTH=110 HEIGHT=56 BORDER=0></A><BR>
   
   	<A HREF="god_gods.shtml" onMouseOver="on('Gods',4)" onMouseOut="off('Gods',4)">
   
   	<IMG SRC="images/butgods1.jpg" ALT="Gods" WIDTH=110 HEIGHT=56 BORDER=0></A><BR>
   
   	<IMG SRC="images/butcreatures2.jpg" ALT="Creatures" WIDTH=110 HEIGHT=56 BORDER=0><BR>
   
   	<A HREF="god_items.shtml" onMouseOver="on('Items',6)" onMouseOut="off('Items',6)">
   
   	<IMG SRC="images/butitems1.jpg" ALT="Items" WIDTH=110 HEIGHT=56 BORDER=0></A><BR>
   
   

   
   
4. Vi brukte også SSI. Under er linjene vi bruker på de fleste sidene:

   
   <!--#include virtual="cgi-bin/log.py"--><br>   
   
   //kjører teller-scriptet vårt
   
   <!--#config timefmt="%a, %e $b %Y, %H:%M"-->			
   
   //setter formatet for LAST_MODIFIED 
   
   Last modified: <strong><!--#echo var="LAST_MODIFIED" --></strong></div><br> 
   
   //setter inn datoen for siste oppdatering av sida. 
   
   <!--#include virtual="footer.html"-->		
   
   //Setter inn innholdet av footer.html her