Lidt om oplægget

• Hypertekst• Links• Om at strukturere indhold• Øvelse: Navigation og links

– med en analytisk vinkel

Nettet er noget særligt

• Nettet er et fleksibelt medie– Skærmens størrelse– Skærmbilledets opløsning– Vinduernes størrelse– Skrifttyper i OS– Browserens brugerindstillinger

Forestillinger om viden

• Vannevar Bush's artikel i Atlantic Monthly, 1945.

• Eksplosiv vækst i viden• Behov for systemer til at indeksere,

organisere og genfinde viden• MEMEX -> Cern og World Wide

Web

Kilde: Vannevar Bush. As we may think. Atlantic Monthly. 1945

Vannevar Bush

Theodore Nelson om hypertekst

“By hypertext I mean non-sequential writing - text that branches and allows choices to the reader, best read at an interactive screen. As popularly conceived, this is a series of text chunks connected by links which offer the reader different pathways.” *

* Nelson, Theodore: Literary Machines. Swarthmore, Self-published, 1981.

Principper i hypertekstKommentarer, fodnote, biografi, alternativ

fremstillingsmåde, lignende værker, komplet værk

In the book ’The language of new media’. Lev Manovich discusses the differences between new and old media. He identifies five principles of New Media:

1. Numerical Representation

2. Modularity

3. Automation

4. Variability

5. Transcoding

•Indholdsfortegnelse

•Kapiteleksempel fra bog

•Online boghandler

•Det komplette værk

Hypertekst-anker:

Brug af links

Emne

Kilde: William Horton: Designing and Writing Online Documentation. John Wiley & Sons, New York. 1994

• Emne:Hele emnet, alle ord, billeder og lyde

• BlokDel af et emne: Afsnit, grafik, et stykke musik mm.

• PunktEt udeleligt stykke information: Et ord, del af grafik, filmframe.

Lexia, Node eller knudepunkt

Brug af links

Emne BEmne A

Punkt til emne

Uddybning, zoome ind.

Brug af links

Emne-til-emne links

Frem (?) Emne BEmne A

Sekventiel rækkefølge, sammenligne ting og begreber, til underemner mm.

Brug af links

Emne BEmne A

Punkt-til-blok links

Forklaring af term i en kontekst, ordforklaring med lignende ord, referenceliste blandt andre referencer af samme forfatter mm.

Brug af links

Emne BEmne A

Punkt-til-punkt links

Alle instanser af et ord -> næste ord. 'se figur'-link

Brug af links

Emne BEmne A

Blok-til-emne links

Fra overordnet til mere detaljeret beskrivelse (videndifferentiering), f.eks. vejledningBilledzoom (relevance-enhanced image-reduction)

Brug af links

Emne B Emne A

Blok-til-blok links

Tekst- eller grafikblokke der tilbyder supplerende information, blokke der illustreres i en sammenhæng og forklares i en anden, tips mm.

Brug af links

Emne B Emne A

Emne-til-blok links

Linker emne til hvor det bliver diskuteret i en sammenhæng og ikke kun nævnt (f.eks. I en liste)

Veje i hypertekster

Énvej( Unidirectional )

Emne BEmne A

Veje i hypertekster

Tovejs( Bidirectional )

Emne BEmne A

Veje i hypertekster

Mange til én

Emne B

Emne AEmne A

Emne AEmne A

Veje i hypertekster

Emne B

Emne AEmne B

Emne BEmne B

Én til mange

Eksempler ??? 1

Hypertekst og -medier

Eksempel: Ishøj kommune

Videoklip, animationer, film.

Tale, lydeffekter, baggrundsmusik

Grafik og fotografier

Levende billeder

Tekst Lyd

Still-billeder

Sdfg g jgklj gj gkj g kjg jkdkjfgæl jgk kdjhgkj gh hg h jgh jhkgjh kgj hjgh kjhk jhgkjh kgjh klgj h kjhkgjh lkjglk jahlkjfgl kjg kh kjhgkajhgkj hkadjhfgk j jhjdfhgkajhdfkgh akfjgh ghal kjfgh hgkj hkgjh khadfkj oeirutoiruhafgaaaahggojgjsdfgj ouweoi ojwoj oj owji jgk jljggggggopwj ojjgdjgoi

Sdfg g jgklj gj gkj g kjg jkdkjfgæl jgk kdjhgkj gh hg h jgh jhkgjh kgj hjgh kjhk jhgkjh kgjh klgj h kjhkgjh lkjglk jahlkjfgl kjg kh kjhgkajhgkj hkadjhfgk j jhjdfhgkajhdfkgh akfjgh ghal kjfgh hgkj hkgjh khadfkj oeirutoiruhafgaaaahggojgjsdfgj ouweoi ojwoj oj owji jgk jljggggggopwj ojjgdjgoi oieuroijoj

Navigation

• Hvor er jeg?• Hvor kan jeg gå hen?• Hvordan kommer jeg derhen?• Hvordan kommer jeg tilbage til

hvor jeg kom fra?

Netsider skal være selvforklarende!(Jennifer Fleming: Web Navigation. O’reilly. 1999)

Hvad gør links?

• Støtter skimning af sider• Fungerer som guide til netstedets

indhold og hvad læseren kan forvente at finde

• Støtter læserens navigation på siden

• Inviterer læseren til at springe væk fra hovedteksten

Linktyper på en netside*

• Strukturelle links– National geographic– New York Times

• Associative links– Alertbox

• ’Se også’ links (example)– Natural History Highlights (bottom of page)– New York Times (bottom of article pages)

* Kilde: Jakob Nielsen’s bog Designing Web Usability, 2000

Netstedets struktur

• Er menuerne genkendelige? (se gode links)

• Giver menuerne mening? (se gode links)

• Kan man fornemme en struktur?• Er strukturen for smal og dyb?

www.politi.dk • Er strukturen for bred og lav?

www.brande.dk

Gode egenskaber ved links

1.Et link skal fremstå utvetydigt: HER ER ET LINK! (typografi, kontekst).

Eksemplarisk: Exploratorium

Problematisk: RUC’s subpages (Hvor er der links på siden?), Health on the Net Foundation (Hvad er links og hvad er ikke?).

Gode egenskaber ved links

2.Linkets destination bør være klart

for læseren (ikke 'Klik her').

Eksemplarisk: Natural Museuem of natural History, Alertbox.com

Problematisk: American Red Cross (bottom of page)

Gode egenskaber ved links

3.Et link bør indgå som en naturlig del af teksten (Komplementær ift. ’Klik her’ link).

Eksemplarisk: Exploratorium

Problematisk: Network Advertising Initative

Gode egenskaber ved links

4.Et link bør placeres der hvor det giver bedst mening.

Eksemplarisk: Australian war memorial

Problematisk: National center for Post Traumatic Disorders / veterans – Linket i det første afsnit!

Gode egenskaber ved links

5.Links bør ikke være for lange. Lange links gør det svært at læse teksten (for meget fremhævning = ingen fremhævning).

Problematisk: If you click this link you get access to our the database and other online ressources picked by specialists in the field

Gode egenskaber ved links

6.Adskil links der står tæt på hinanden tydeligt (brug tekst mellem de enkelte links eller brug punktlister).

Eksemplarisk:

Problematisk: æbler, pærer, bananer, appelsiner, blommer, nektariner

• Æbler

• Pærer

• Bananer

• Appelsiner

• Blommer

• Nektariner

Gode egenskaber ved links

7.Links der henviser til samme side bør hedde det samme.

Problematisk: American Institute of Physics (under International Catalog of Sources: 'What is ICOS?', ICOS, International Catalog of Sources (ICOS) ??? )

Gode egenskaber ved links

8.Link og destinationsside bør understøtte hinanden, f.eks. Vha. nøgleord.

Eksemplarisk: Dream Anatomy

Problematisk: Astronomy Department at the University of Washington (Explore your sky?)

Gode egenskaber ved links

9.Farveskemaer til links bør være konsistente (ubesøgte-, besøgte- , aktive- og hover links).

Problematisk: openDemocracy (Se breadcrumbs i artikler over overskriften og forskellige farver i brødtekst og højremenu. Besøgt link bliver ikke vist)

Gode egenskaber ved links

10. Tilføj ekstra information hvis linket fører til andet indhold og ikke en html-side.

Problematisk: Institute for Democracy, Politics and the Internet, Skanderborg kommune -> Selvbetjening -> blanketter

Gode egenskaber ved links

1. Et link skal fremstå utvetydigt: HER ER ET LINK! (typografi, kontekst).

2. Linkets destination skal være klart for læseren (ikke 'Klik her'). 3. Et link bør indgå som en naturlig del af teksten (Komplementær ift.

’Klik her’ link).4. Et link bør placeres der hvor det giver bedst mening.5. Links bør ikke være for lange. Lange links gør det svært at læse

teksten (for meget fremhævning = ingen fremhævning).6. Adskil links der står tæt på hinanden tydeligt (brug tekst mellem de

enkelte links eller brug punktlister). 7. Links der henviser til samme side bør hedde det samme.8. Link og destinationsside bør understøtte hinanden, f.eks. vha.

nøgleord.9. Farveskemaer til links bør være konsistent (ubesøgte-, besøgte- ,

aktive- og hover links).

10. Tilføj ekstra information hvis linket fører til andet indhold og ikke

en html-side.

Øvelse

• Undersøg netsidens links (50%):

www.6omdagen.dk

Links til offentlige netsteder mm.

Danmarks meteorologiske institutRisøSuså kommuneBrande.dk - portalKommunernes landsforeningBrande kommuneBedst på nettetAdgangforalle.dk - SkærmoplæserColorfilter - test for farveblindhedW3C - World Wide Web ConsortiumIT- og Telestyrelsen: SkærmopløsningIT- og Telestyrelsen: FarveblindhedArbejde ved skærme - Arbejdstilsynet

Navigationssyndromer

• Indlejret digression• Museumssyndromet• Tunnelsyn• Indiana Jones-syndromet

Tilbage til hovedtekst