Tekst til nettet Digitale Medier E2006 23/11. MENU DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tekst på nettet Opsummering på kursets.

Præsentationer af emnet: "Tekst til nettet Digitale Medier E2006 23/11. MENU DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tekst på nettet Opsummering på kursets."— Præsentationens transcript:

1 Tekst til nettet Digitale Medier E2006 23/11

2 MENU DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tekst på nettet Opsummering på kursets webdesigndel

3 PINLIGT? DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Ryk sider ned i undermappe med navnet "ovelser". Indsæt no-robots-tag som nævnt på blog

4 TEKSTERNE DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Kommentarer? Validitet? Reliabilitet?

5 EKSEMPLER

6

7

8

9

10

11 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Netbrugere skanner teksten Nøgleord bør fremhæves Mellemrubrikker bør være meningsfulde (ikke smarte) Lister er gode Den "omvendte nyhedstrekant" bør anvendes

12 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Internettet runder 100 millioner hjemmesider I slutningen af oktober rundede antallet af hjemmesider på nettet for første gang 100 millioner. 1 million af dem indeholder porno. Det engelske Internet-registreringsfirma 'Netcraft' startede med at registrere hjemmesider i 1995. Dengang var der 18.000 hjemmesider. I dag er der mere end 100 millioner hjemmesider med domænenavn og indhold på siderne. På 11 år er der altså kommet cirka 600 gange flere hjemmesider. I maj 2004 nåede antallet af hjemmesider for første gang op på 50 millioner. Og derefter tog det kun to et halvt år, før antallet var fordoblet. Lettere at lave hjemmesider Rich Miller fra Netcraft mener, at den voldsomme vækst i antallet af hjemmesider delvist skyldes væksten i antallet af bloggere og småforretninger, som laver hjemmesider.

13 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING

14 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Teksten bliver stående Brug absolutte tidsangivelser - Ikke "Kommer snart" - Ikke "på onsdag" - Ikke "næste semester" - Gerne "oktober 2007" - Gerne "Efterårssemestret 2007"

15 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Husk navigation Du ved ikke hvor læseren har været Brødkrummesti

16 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Brug nyhedstrekanten Konklusion Uddybning

17 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Skriv kort (tænk på udskrift)

18 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Brug klare mellemrubrikker

19 PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tænk på målgruppens behov (de er ofte konkrete) - Pas på "infrequently asked questions"

20 DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Spørgsmål?

21 MENU DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tekst på nettet Opsummering på kursets webdesigndel

22 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Vi har arbejdet med den "fremtidssikrede" XHTML 1.0 Strict Et XHTML-dokument består af En dokumenttype-deklaration Et rod-element En header En ’body’ Et element er indsat i XHTML-koden vha. tags F.eks.: Digitale medier Med attribut: Digitale medier

23 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Man begår ofte fejl fordi man Glemmer at lukke tomme elementer, f.eks. Glemmer at lukke almindelige elementer, f.eks. Her er et afsnit<img src… Nester elementer forkert, f.eks. meget vigtigt Glemmer at specificere alt-atributten for et billede, f.eks. Placerer tekst direkte i body’en, f.eks. Her er min side Placerer et block-element i et inline-element, f.eks. Introduktion Glemmer anførselstegn omkring attribut-værdier, f.eks. Bruger store bogstaver i element- eller attributnavne, f.eks. afsnit Lader browseren ”cache” siden

24 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING To primæreelement-typer Block-elementer Definerer selvstændige ”blokke” på siden Medfører typisk et linieskift Inline-elementer Udgør den største gruppe Aftvinger ikke linieskift Primært … og …

25 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Generiske elementer Bruges til at skabe nye elementer … bruges til at skabe et block-element … bruges til at skabe et inline-element Id-atributten bruges til unikke elementer Class-atributten bruges til en kategori ITU’s telefonnummer er: 72 18 50 00

26 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tabeller bør ikke bruges til layout Tabeleksempel: Verdens klart kedeligste tabel Kolonne 1 Kolonne 2 celle 1 celle 2 celle 3 celle 4

27 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING 600 px 400 px 800 px 600 px 768 px 1024 px

28 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING DIGITALE MEDIER JPEG PNG GIF

29 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Style sheet XHTML- dokument Typisk anvendes en separat fil som de enkelte XHTML- dokumenter refererer til CSS

30 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING En regel består af selector { property: value; } Deklaration p {font-size: 11px; font-weight: bold; color: #c06;} p {font-size: 11px; font-weight: bold; color: #c06; } svarer helt til:

31 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Content area Padding Margin Outer edge Border Inner edge Width Height CSS

32 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING CSS CSS bruges til at styre layout og udseende (XHTML holdes semantisk så vidt muligt) … Menu id="content">Indholdsfe lt … #Menucol { position: absolute; width: 150px; left: 121px; top: 127px; } #content { position: absolute; left: 291px; top: 127px; width: 561px;}

33 OPSUMMERING DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Dreamweaver Templates anvendes til at holde visse side-elementer ens Enhver ændring i template1.dwt vil afspejles i forside.html og omddk.html

34 DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Spørgsmål?