Website – en introduktion

Posted on by

Det er hensigtsmæssigt at arbejde struktureret, når man laver et website, der indeholder mere end ganske få dokumenter. Når du udvikler en hjemmesiden, så er det en god idé at have fokus på hvad hjemmesiden skal indeholde og hvordan den skal realiseres.

Nedenfor har jeg lavet en række stikord, det kan være en god idé at anvende i analyse- og designudviklingen af et website. Stikord der også giver svar på, hvad hjemmesiden skal indeholde:
• målgruppedefinition
• website-kategorisering – pr, privat, forening, firma …
• website er dynamisk -> hvem skal administrere sitet
• tidsplan
• skitse
• bliv inspireret af andre lignende websites
• metoder – top-down, bottom up, prototyping, vandfaldsmetode …
• disposition -> opgaveformulering + uddelegering
• indsamle materiale
• materiale bør være – aktuelt, informativt, relevant
• link + illustrationsmateriale indsamles i rigelige mængder

Design giver svar på, hvordan websitet realiseres:
• lay-out – funktionalitet – interaktivitet – hjælp/fejlfinding, jvnf. EDI
• verificér design-principper med EDIs håndbog ”Web-form, en brugerhåndbog”
• systemspecifikation (JAVA, PHP eller ASP, CSS, CMS, etc.) – udbyder, domæne
• værktøj – Composer, Stones webwriter, Frontpage,
• exempelvis skal design understøtte:
• vedligeholdelsesvenlighed,
• modularitet,
• kort accesstid – fx. max. 50 kb pr.side
• budskab skal klart, tydeligt og ensartet
• sprogbrug skal være afpasset målgruppe
• simpel teknik -> nem at vedligeholde -> brugervenlighed
• websites er dyanmiske, anvend interaktive facilliteter

Webdesign handler om at formidle information på en måde, der på afgørende punkter adskiller sig fra traditionelle medier. Websites understøtter interaktiv informationsformidling samt adgang til enorme mængder information på internettet. Et godt webdesign er kendetegnet ved, at det er nemt og hurtigt at finde information.

Der bør bruges megen tid på at definere formålet med Websitet, derefter bør du finde frem til underordnede idéer, der understøtter formålet. Også målgruppedefinition er vigtigt i starten af udviklingsfasen. Det kan være nødvendigt at tilpasse formål, underordnede idéer og målgruppe løbende under udviklingsarbejdet.

EDI har udgivet ”Håndbog i webform” hvorfra jeg har ladet mig inspirere til følgende retningslinier for websitedesignudvikling :

Dialogprincipper, dialog bør :

• tilpasses arbejdsopgaver, så bruger støttes i at udføre opgaven godt og effektivt
• være selvforklarende og umiddelbar forståelig
• være kontrollérbar, så bruger styrer retning og hastighed
• være tilpasset målgruppen, terminologi og formulering bør afspejle brugerens verden
• støtte og vejlede bruger i anvendelse af systemet
• være tolerent overfor fejlfinding
• kunne tilpasses brugers behov

Designretningslinjer :

• Skrift bør være ensartet i anvendelse af fonte og størrelse.
• Begræns anvendelse af kursiv, understregning, negativ tekst, blinkende ord, rulletekst, ord på højkant etc.
• 10 eller 12 pkt. er en god standardstørrelse for tekst.
• Farver, anvend ikke komplementærfarver, fx. gul – blå eller rød – grøn.
• Skriftfarve bør være tydelig ift. baggrundsfarve.
• Rolig baggrund bør foretrækkes.
• Links bør skifte farve når de har været anvendt.
• Information bør inddeles i logiske grupper og opstilles i logisk rækkefølge.
• 7 +-2 reglen bør anvendes når information grupperes, dvs. er der mere end 9 budskaber i en informationsgruppe bør gruppen formentlig opdeles i flere grupper, er der mindre end 5 budskaber i en informationsgruppe bør den sandsynligvis lægges sammen med andre informationsgrupper.
• Placering – lodret placering af informationsgrupper er at foretrække frem for vandret placering.
• Grafik er godt, en illustration siger mere end mange ord – men al med måde – for meget grafik kan virke forvirrende.
• Ensartethed bør afspejle anvendelse og udvælgelse af grafik.
• Beskriv grafik vha. attributten ”ALT=” i HTML.
• Tilgængelighed, text bør tilbydes i flere formater – fx. HTML og PDF.
• Top- og bund-link på hver side.
• Logon bør kvitteres med velkomsthilsen eller sigende fejlmeddelse.
• Skærmbilleder bør afspejle brugerens verden.
• Anvend afkrydsningsfelter, alternativknapper, dialogboxe, textboxe.
• Brug defaultværdier.
• Ledetexter placeres enten foran eller ovenover felt.
• Validér inddata, hvis det er muligt.
• Navigering realiseres med TAB-tast.
• Tastatur bør kunne udføre musens funktionalitet.
• Menustruktur bør være logisk gruppering af information, brug i øvrigt 7+-2reglen.
• Link bør have en kort og præcis beskrivelse.
• Link skal vedligeholdes.
• Hjælp bør være kontext-afhængig, dvs. beskrive det område musens markør står i.
• Hjælp-facilitet skal være brugerorienteret – hvad der er indlysende for udvikleren er ikke nødvendigvis indlysende for brugeren.
• Niveaudel hjælpetext.
• Meddelelser bør vises i et selvstændigt vindue, og bør formuleres kort og præcist i et aktivt sprog.
• Brugeren er centrum for website-udviklingen, det er ikke systemet der skal kontrollere brugeren, men brugeren der skal kontrollere systemet.

Til sidst skal websitet implementeres, dvs. analyse og design af hjemmesiden skal realiseres i et hjemmesideværktøj. HTML-kode, CSS-kode eller CMS-værktøj er nogle af de redskaber der anvendes til at implementere en hjemmeside og som vil blive gennemgået nedenfor.

 

HTML – et multimedieværktøj

I 1990 udvikler Tim Berners-Lee den første browser, der blev kaldt WWW. På det tidspunkt experimenteres der en del i brugervenlig og grafisk præsentation af texter m.m. Tim Berners-Lee er ansat ved atomforskningsinstituttet CERN og har til opgave at udvikle et værktøj, der kan gøre det let at tilegne sig information. I april 1993 beslutter CERN at frigive WWW-teknologien og HTMLstandarden. Det bliver nu muligt at formidle et budskab på en helt ny og revolutionerende måde. WWW og HTMLstandarden er :

• Et multimedieværktøj der udover at formidle text, kan formidle grafik, billeder, video, lyd etc.
• Let adgang til resten af Internettet, vhja. links er det nemt at surfe rundt på Internettet og tilegne sig viden fra de adskillige milliarder hjemmesider der er tilgængelige.
• Desuden understøtter HTML at Internettet kan bruges interaktivt, en facillitet der er viderudviklet og forfinet med diverse scripts, PHP o.lign.

HTML er ikke et programmeringsprog (som fx. Basic, Pascal og C). Programmeringssprog består også af koder og instruktioner, men de anvendes til at fortælle computeren – eller rettere processoren – hvad den skal lave på udvalgte data. HTML derimod er et opmærkningssprog, hvis instrukser og koder beskriver hvordan en browser skal præsentere et multimediedokument. HTML står for Hyper Text Markup Language. Så for at lave et HTMLdokument skal der tilføjes HTML-koder til dit oprindelige dokument hvorefter det kan vises i en browser. Se figur 1.

it_webdevelopment01

Figur 1, hjemmeside-dokumentet fra html-kode til server.

 

Det forudsættes at du har lavet et dokument du vil have lagt ud på nettet. I dette afsnit gennemgås hvordan du udfører trin II og III.

Det er muligt og kan også til tider være nødvendigt at skrive HTMLkoder direkte ind i sit dokument i en simpel editor, som fx. Notesblok, uden brug af hjælpemidler. Men det er besværligt og ressourcekrævende med stor sandsynlighed for mange fejl. Heldigvis findes der værktøjer der gør det noget nemmere at lave sit HTMLdokument. På dette kursus anvender jeg Netscape Composer og Stones Webwriter.

Netscape Composer er en WYSIWYG-editor (WYSIWYG = What You See Is What You Get) dvs. en arbejdsplads til dit dokument, der viser hvordan det vil blive præsenteret i en browser. Mens du arbejder med dokumentet, kan du anvende et af de værktøjer som editoren stiller til rådighed og du vil umiddelbart kunne se, hvordan ændringen vil blive præsenteret i en browser. Markerer du at en del af texten skal være fed, så vises den umiddelbart fed. Markerer du at der skal være et link, så vises der et link etc. Når du er færdig med at bearbejde dit dokument, gemmer du det som et HTMLdokument med alle dets koder og instruxer.

Men desværre er der forskel på browsere, de kan have enkelte afvigelser fra HTMLstandarden. Det betyder at et dokument lavet i Composer uden problemer kan vises i Netscapes browser, der hedder Navigator, men skal dokumentet vises i Opera, Internet Explorer eller en anden browser, så kan der forekomme utilsigtede afvigleser. Derfor er det engang imellem nødvendigt at tilføje HTMLkoder direkte i sit dokument, gerne i en editor der understøtter flere typer browsere. Heldigvis er Stones Webwriter et godt bud en sådan editor.

Det kan også være nødvendigt at anvende andre programmer under udviklingen af et HTMLdokument, fx. programmer til billedbehandling, tegninger, animationer etc. Tilsidst skal dokumentet lægges ud på nettet. Dokumentet skal gemmes på den server, hvorfra ens website er tilgængelig. For at overføre dokumenter fra ens egen computer til serveren skal man have et ftp-program, jeg anvender CuteFtp.

it_webdevelopment02

Figur 2 : Der anvendes adskillige programmer til udviklingen af en hjemmeside

 

HTML – et exempel

HTML er en mængde instruktioner der definerer hvordan browsere skal præsentere et givent dokument. Texten til en hjemmeside er i princippet en langsekvens af tegn, brudt op af koder, der bestemmer hvor der skal være linieskift, mellemrum, kursiv, spalter, formularer og meget, meget mere. Men den vigtigste egenskab ved HTML er, at du kan surfe på internettet. Med et enkelt klik på musen er du i stand til at springe fra en hjemmeside til en anden, uanset hvor i verden den befinder sig. Med hjemmesider lavet i HTMLkode har du nem adgang til enorme mængder information.

Som minimum består en hjemmeside af følgende koder :
<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Exemplet fortæller browseren at nu indlæser den et dokument skrevet i HTML-kode, i headeren er der ingen information om dokumentet. Og i body-delen er der hverken skrevet text, indsat billeder eller anden information som browseren skal gengive.

I det følgende kan du se et dokument anvende forskellige HTML-koder. I højremargenen beskriver jeg i kommentarkoder <!– dette er kommentarkode –>, hvad der sker undervejs.

<HTML> <!– startkode der fortæller at browseren indlæser et HTML-dokument –>

<HEAD> <!– i headeren ligger forskellig generel information om hele dokumentet –>

<TITLE>Html-kode-exempel</TITLE> <!– texten vises i browservinduets titelvindue –>

</HEAD> <!– her slutter headeren –>
<BODY> <!– her starter selve dokumentet –>

<P>Dette er et exempel på en ganske almindelig text i et html-dokument. Vhja. HTMLkoder bestemmer forfatteren til dokumentet, hvordan texten skal sættes op, hvor der skal være grafik og hvilke link der skal lægges ind i dokumentet.</P><BR>
<P> … </P> <!– start- og slutkode for et afsnit –>

<BR> <!– kode for et linjeskift –>
Det følgende er en liste over forskellige facilliteter der er mulige med HTML :

<UL> <!– startkode for en liste –>

<LI>Dette er første punkt i listen </LI> <!– LI-koden sætter punktmarkering –>

<LI>Dette er et <A HREF=”www.yahoo.dk”>link</A></LI>

<!– “A HREF= ” refferer til et andet sted på hjemmesiden eller til en helt anden hjemmeside –>

<LI>Og her vises et <IMG SRC=”../Image4_3.jpg” ALT=”computer” WIDTH=”10%”

HEIGHT=”7%”>billede<BR> <!– IMG SRC= fortæller at her skal der indsættes et billede –>

</LI></UL>

</BODY>

Ovenstående exempel vil i en browser komme til at se sådan ud :

Dette er et exempel på en ganske almindelig text i et html-dokument. Vhja.

HTMLkoder bestemmer forfatteren til dokumentet hvordan texten skal sættes op, hvor

der skal være grafik og hvilke link der skal lægges ind i dokumentet.

 

Det følgende er en liste over forskellige faciliteter, der er mulige med HTML :

• Dette er første punkt i listen
• Dette er et link
• Og her vises et billede : blomst_75dpi

For overskuelighedens skyld har jeg forsimplet koden, fx. har jeg udeladt hvordan HTML håndterer æ, ø og å. Vil du se den rå HTMLkode, så gå ind på hjemmeside, i browseren klikker du på Vis og vælg Kildekode fra menubjælken.

Koderne kan opdeles i 2 hovedgrupper :

Containerkoder, der har følgende opbygning : <KODEID> … </KODEID>

Seperatorkoder, der har følgende opbygning : <KODEID>

Exempelvis giver det mening at en textstreng kan gengives i kursiv og derfor har en start- og en slutkode, medens et linjeskift der kun gælder for en udvalgt textdel markeres med en seperatorkode.

Indsætning og typografiark

Skabeloner er ikke en del af html-standarden, men et værktøj der letter vedligeholdelsen af hjemmeside-layoutet. Med skabeloner kan du et sted definere, hvordan du generelt ønsker, at dit dokument skal se ud. Med <P>koden kan du bestemme en skabelon for et afsnit :

<P STYLE=”value”> STYLE-attributten tildeles værdien value, flere værdier adskilles af semikolon. En value kan være : font-family: skriftnavn, skrifttype, font-style: italic; font-weight: bold; ….
<IMG> indsætter et billede eller en animation på hjemmesiden.

attributter :

ALIGN=TOP, MIDDLE, BOTTOM, LEFT, RIGHT bestemmer hvor billedet skal placeres.

ALT=”text”, viser “text” hvis ikke browseren viser billedet.

SRC=sti angiver hvor billedet skal hentes fra – enten fra en lokal mappe eller fra en helt anden hjemmeside.

Hvis du vil lave en skabelon der gælder for et helt dokument, erklæres skabelonen i headeren efter følgende syntax :

<STYLE TYPE=TEXT/CSS>

kode1 {value}

kode2 {value}

</STYLE>
Hvis du vil anvende den samme skabelon for flere dokumenter opretter du en fil hvis indhold overholder følgende syntax :

kode1 {value}

kode2 {value}

For nemheds skyld navngives filen <identifier>.css. Dokumenter der skal anvende skabelonen, skal have følgende link :

<LINK REL=STYLE TYPE=TEXT/CSS SRC=sti> sti angiver hvor skabelonen skal hentes fra.

-kae/08
Oprettet maj 2008; opdateret maj 2008