Upload
benard
View
40
Download
0
Embed Size (px)
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 Presentation
Citation preview
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