lidt om oplægget
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/1.jpg)
Lidt om oplægget
• Hypertekst• Links• Om at strukturere indhold• Øvelse: Navigation og links
– med en analytisk vinkel
![Page 2: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/2.jpg)
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
![Page 3: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/3.jpg)
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
![Page 4: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/4.jpg)
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.
![Page 5: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/5.jpg)
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:
![Page 6: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/6.jpg)
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
![Page 7: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/7.jpg)
Brug af links
Emne BEmne A
Punkt til emne
Uddybning, zoome ind.
![Page 8: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/8.jpg)
Brug af links
Emne-til-emne links
Frem (?) Emne BEmne A
Sekventiel rækkefølge, sammenligne ting og begreber, til underemner mm.
![Page 9: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/9.jpg)
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.
![Page 10: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/10.jpg)
Brug af links
Emne BEmne A
Punkt-til-punkt links
Alle instanser af et ord -> næste ord. 'se figur'-link
![Page 11: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/11.jpg)
Brug af links
Emne BEmne A
Blok-til-emne links
Fra overordnet til mere detaljeret beskrivelse (videndifferentiering), f.eks. vejledningBilledzoom (relevance-enhanced image-reduction)
![Page 12: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/12.jpg)
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.
![Page 13: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/13.jpg)
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)
![Page 14: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/14.jpg)
Veje i hypertekster
Énvej( Unidirectional )
Emne BEmne A
![Page 15: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/15.jpg)
Veje i hypertekster
Tovejs( Bidirectional )
Emne BEmne A
![Page 16: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/16.jpg)
Veje i hypertekster
Mange til én
Emne B
Emne AEmne A
Emne AEmne A
![Page 17: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/17.jpg)
Veje i hypertekster
Emne B
Emne AEmne B
Emne BEmne B
Én til mange
Eksempler ??? 1
![Page 18: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/18.jpg)
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
![Page 19: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/19.jpg)
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)
![Page 20: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/20.jpg)
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
![Page 21: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/21.jpg)
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
![Page 22: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/22.jpg)
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
![Page 23: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/23.jpg)
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?).
![Page 24: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/24.jpg)
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)
![Page 25: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/25.jpg)
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
![Page 26: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/26.jpg)
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!
![Page 27: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/27.jpg)
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
![Page 28: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/28.jpg)
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
![Page 29: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/29.jpg)
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) ??? )
![Page 30: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/30.jpg)
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?)
![Page 31: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/31.jpg)
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)
![Page 32: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/32.jpg)
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
![Page 33: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/33.jpg)
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.
![Page 34: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/34.jpg)
Øvelse
• Undersøg netsidens links (50%):
www.6omdagen.dk
![Page 35: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/35.jpg)
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
![Page 36: Lidt om oplægget](https://reader035.vdocuments.pub/reader035/viewer/2022062322/5681456f550346895db24124/html5/thumbnails/36.jpg)
Navigationssyndromer
• Indlejret digression• Museumssyndromet• Tunnelsyn• Indiana Jones-syndromet
Tilbage til hovedtekst