1 / 34

Tekst til nettet Digitale Medier E2006 23/11

Tekst til nettet Digitale Medier E2006 23/11. MENU. Tekst på nettet Opsummering på kursets webdesigndel. DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING. PINLIGT?. Ryk sider ned i undermappe med navnet "ovelser". Indsæt no-robots-tag som nævnt på blog.

zaide
Download Presentation

Tekst til nettet Digitale Medier E2006 23/11

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. Tekst til nettetDigitale Medier E200623/11

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

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

  4. TEKSTERNE Kommentarer? Validitet? Reliabilitet? DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

  5. EKSEMPLER

  6. EKSEMPLER

  7. EKSEMPLER

  8. EKSEMPLER

  9. EKSEMPLER

  10. EKSEMPLER

  11. PRINCIPPER 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 DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

  12. PRINCIPPER 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 hjemmesiderRich 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. DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

  13. PRINCIPPER DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

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

  16. PRINCIPPER Brug nyhedstrekanten Uddybning Konklusion DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

  18. PRINCIPPER Brug klare mellemrubrikker DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

  20. Spørgsmål? DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

  22. OPSUMMERING 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.:<p>Digitale medier</p> Med attribut: <p id="indhold">Digitale medier</p> DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

  24. OPSUMMERING • 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 <em>…</em> og <strong>…</strong> DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

  25. OPSUMMERING • Generiske elementer • Bruges til at skabe nye elementer • <div>…</div> bruges til at skabe et block-element • <span>…</span> bruges til at skabe et inline-element • Id-atributten bruges til unikke elementer • Class-atributten bruges til en kategori <p>ITU’s telefonnummer er: <span class="telefon">72 18 50 00 </span> DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

  26. OPSUMMERING • Tabeller bør ikke bruges til layout • Tabeleksempel: • <table cellpadding="5" cellspacing="10"border="3"> • <caption>Verdens klart kedeligste tabel</caption> • <tr> • <th>Kolonne 1</th><th>Kolonne 2</th> • </tr> • <tr> • <td>celle 1</td><td>celle 2</td> • </tr> • <tr> • <td>celle 3</td><td>celle 4</td> • </tr> • </table> DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

  28. OPSUMMERING DIGITALE MEDIER JPEG PNG GIF DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

  29. OPSUMMERING CSS Typisk anvendes en separat fil som de enkelte XHTML-dokumenter refererer til Style sheet XHTML-dokument XHTML-dokument XHTML-dokument <link rel="stylesheet" type="text/css" media="all"href="css/24_pc_ns.css" /> DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

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

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

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

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

  34. Spørgsmål? DIGITALE MEDIER: FORMIDLING OG DESIGNSØGEMASKINER OG OPTIMERING

More Related