1 / 36

Lidt om oplægget

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.

benard
Download Presentation

Lidt om oplægget

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lidt om oplægget • Hypertekst • Links • Om at strukturere indhold • Øvelse: Navigation og links • med en analytisk vinkel

  2. 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

  3. 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 Vannevar Bush Kilde: Vannevar Bush. As we may think. Atlantic Monthly. 1945

  4. 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.

  5. Principper i hypertekst Kommentarer, fodnote, biografi, alternativ fremstillingsmåde, lignende værker, komplet værk Hypertekst-anker: • Indholdsfortegnelse • Kapiteleksempel fra bog • Online boghandler • Det komplette 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

  6. Brug af links • Emne: Hele emnet, alle ord, billeder og lyde • Blok Del af et emne: Afsnit, grafik, et stykke musik mm. • Punkt Et udeleligt stykke information: Et ord, del af grafik, filmframe. Emne Lexia, Node eller knudepunkt Kilde: William Horton: Designing and Writing Online Documentation. John Wiley & Sons, New York. 1994

  7. Brug af links Punkt til emne Emne A Emne B Uddybning, zoome ind.

  8. Brug af links Emne-til-emne links Emne A Emne B Frem (?) Sekventiel rækkefølge, sammenligne ting og begreber, til underemner mm.

  9. Brug af links Punkt-til-blok links Emne A Emne B Forklaring af term i en kontekst, ordforklaring med lignende ord, referenceliste blandt andre referencer af samme forfatter mm.

  10. Brug af links Punkt-til-punkt links Emne A Emne B Alle instanser af et ord -> næste ord. 'se figur'-link

  11. Brug af links Blok-til-emne links Emne A Emne B Fra overordnet til mere detaljeret beskrivelse (videndifferentiering), f.eks. vejledning Billedzoom (relevance-enhanced image-reduction)

  12. Brug af links Blok-til-blok links Emne B Emne A Tekst- eller grafikblokke der tilbyder supplerende information, blokke der illustreres i en sammenhæng og forklares i en anden, tips mm.

  13. Brug af links Emne-til-blok links Emne B Emne A Linker emne til hvor det bliver diskuteret i en sammenhæng og ikke kun nævnt (f.eks. I en liste)

  14. Veje i hypertekster Énvej ( Unidirectional ) Emne A Emne B

  15. Veje i hypertekster Tovejs ( Bidirectional ) Emne A Emne B

  16. Veje i hypertekster Mange til én Emne A Emne A Emne A Emne B Emne A

  17. Veje i hypertekster Én til mange Emne B Emne B Emne A Emne B Emne B Eksempler ??? 1

  18. Hypertekst og -medier Still-billeder Levende 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 oieuroijoj Grafik og fotografier Videoklip, animationer, film. 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 Lyd Tekst Tale, lydeffekter, baggrundsmusik Eksempel:Ishøj kommune

  19. 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)

  20. 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

  21. 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

  22. 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

  23. Gode egenskaber ved links • 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?).

  24. Gode egenskaber ved links • 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)

  25. Gode egenskaber ved links • Et link bør indgå som en naturlig del af teksten (Komplementær ift. ’Klik her’ link). Eksemplarisk:Exploratorium Problematisk:Network Advertising Initative

  26. Gode egenskaber ved links • 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!

  27. Gode egenskaber ved links • 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

  28. Gode egenskaber ved links • 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

  29. Gode egenskaber ved links • 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) ??? )

  30. Gode egenskaber ved links • 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?)

  31. Gode egenskaber ved links • 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)

  32. Gode egenskaber ved links • 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

  33. 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.

  34. Øvelse • Undersøg netsidens links (50%): www.6omdagen.dk

  35. Links til offentlige netsteder mm. Danmarks meteorologiske institut Risø Suså kommune Brande.dk - portal Kommunernes landsforening Brande kommune Bedst på nettet Adgangforalle.dk - Skærmoplæser Colorfilter - test for farveblindhed W3C - World Wide Web Consortium IT- og Telestyrelsen: Skærmopløsning IT- og Telestyrelsen: Farveblindhed Arbejde ved skærme - Arbejdstilsynet

  36. Navigationssyndromer • Indlejret digression • Museumssyndromet • Tunnelsyn • Indiana Jones-syndromet Tilbage til hovedtekst

More Related