2. FORELÆSNING

1. 2. FORELÆSNING Grundlæggende Webdesign – nettet som server-klient medie – en web sites væsen Bjarne Sandstrøm IT-højskolen 5.9.2002

2. Plan for i dag • Vi vil se på, hvad server-klient kommunikationen betyder for en websites tekniske udformning • En websites kommunikative væsen

3. Server vs klient Web- server Browser • Den transmitterede HTML-kode bliver vist på betingelser, der sættes af brugerens browser-type, versionsnummer og opsætning. • Brugeren bestemmer fx individuelt, med hvilke skrift-typer og i hvilken størrelse en web-side skal vises, og om grafiske elementer overhovedet skal vises. HTML

4. Kommunikationsform • Browseren fortolker html-koden • HTML-koden indeholder: • <tags> • Dokumentets tekst • Links til billeder, som IKKE ligger i html-dokumentet • Links til andet

5. Skærmstørrelse og -opløsning Skærmstørrelse i ’fysiske’ tommer: 14”, 15”, 17”, 19”, 21” … 17” (og 19”) er de mest udbredte størrelser. Udbreddelsen af bærbare computere og TFT-skærme vil bremse den ellers generelle vækst. Skærmopløsning i det relative mål ’pixel’: 640 × 480 5 (16) % 800 × 600 50 (56) % 1024 × 768 33 (22) % 1152 × 846 1280 × 960 (1,65) %

6. Layout af lille skærmbillede på stor skærm • Lav et baggrundsbillede i det ønskede format til Windows ’skrivebord’: • 1) Lav en ny fil i det ønskede pixel-format i Photoshop; 2) Select All (Ctrl-A); 3) vælg Edit/Stroke og tegn en linje omkring feltet; 4) gem filen som *.BMP. 5) Indsæt billedet som baggrund: Egenskaber/ Skrivebord/ Baggrund. Husk at sætte placering til Centrer. • Download Screenruler fra www.kagi.com/microfox • Det bedste er selvfølgelig at indstille egen skærm til den ønskede opløsning

7. Mosaic – den første browser Hentet fra www.dejavu.org

8. Browsere i dag • Internet Explorer 6 • Netscape 6.2 (+ 7 i beta-version) • Opera 6.05 (norsk) • Amaya (W3C’s browser) • www.w3.org/Amaya/User/BinDist.html • Lynx tekstbrowser • http://lynx.browser.org • IT-h har – ved siden af IE – NS 4.76 på alle maskiner

9. Statistik over brug af browsere i dag • ? 0.3 % • Netscape 0.3 % • Opera 6.04 0.1 % • Netscape 4.51 0.1 % • Netscape 4.79 0.1 % • Opera 6.3 1.2 % • MSIE 4.01 0.1 % • MSIE 6.0 57.3 % • MSIE 5.5 18.3 % • MSIE 5.0 11.8 % • MSIE 5.01 9.5 % • MSIE 4.01 0.5 % • Netscape 6.1 0.5 % • MSIE 5.21 0.4 % En anden statistik siger summarisk (og forskelligt): MS 71 %; Netscape 27 %

10. Ex på forskel mellem browserne IE sætter en bredere kant end NS. IE og NS fortolker pladsen til en eventuel scrollbar forskelligt. IE NS

11. Browservindue ved 800×600 pixel 760 420

12. Browserindstillinger i IE 5.0 Funktioner/Internetindstillinger/Skrifttyper …/Avanceret [Vis/Tekststørrelse/]

13. En websites væsen

14. Hvad er en web-site? • Et reklameskilt? • En brochure? • En database? • En on-line kontakt? • En nyhedskilde? • Et pædagogisk medie? • Et underholdningsmedie? • ?

15. Metaforer for webbet som medie • “Frontpage” - en avis • “GoLive” - et tv • “Dreamweaver” - en drøm - et fantasme - et simulakrum

16. Webbets domæner • .gov - offentlige institutioner • .org - organisationer • .edu - uddannelses institutioner • .mil - militære organisationer • .net - kommunikationsleverandører • .com - kommercielle virksomheder

17. Meyrowitz Medium Theory Elektronisk kultur oralitetens tilbagevenden; uafhængig af tid og rum; spontan oplevelse; medleven; følelser. Skriftkultur åbne, foranderlige; ikke-lokale fællesskaber; indlæring; tilbagetrækning; ideer. Orale samfund lukkede, traditions bestemte; tilstedeværelse; spontan færdighed; social deltagelse.

18. Meyrowitz Medium Theory (fortsat) Et medie er som et rum, hvor kommunikation foregår. Nye medier er nye rum, som inkluderer og ekskluderer mennesker på forskellig vis – og skaber nye roller. Skriftkultur lokalitet er ingen betingelse; skel mellem analfabeter og læsekyndige; Elektronisk kultur oralitetens tilbagevenden; grænsen mellem forskellige grupper ophæves; Orale samfund alle opholder sig samme sted; minimal social adskillelse;

19. TV den fælles nyheds- og underholdningskanal push-medie medie, domineret af store kapitalinteresse medie for fælles underholdning offentligt medie oralt billedmedie Computeren / internettet kanalen for individuel informationssøgning pull-medie medie for herredømmefri kommunikation medie for individuel beskæftigelse privat / intimt medie stumt tekstmedie To typer elektroniske medier

20. Edward T. Hall om skærmens størrelse Intim afstand Skærm under 10” Arbejde og fritid; Små praktiske opgaver; tidsfordriv; interpersonel kommunikation. For 1-2 pers. Notater, emails, telefoni, chat, spil, udregning. Personlig afstand Skærm:10-19” Arbejde og fritid; Alene / sammen. Store opgave og små oplevelser; For 1-3 personer. Internet, tekst- behandling, radio, tv, video, spil, emails. Social afstand Skærm: 20-29” Fritid; fælles underholdning og information; store oplevelser. For 2-6 personer. Spillefilm, leje- video, weekend underholdning, koncert, fodboldkamp. Offentlig afstand Skærm over 35” Fritid; Fælles underholdning uden for hjem og hverdag. For mange mennesker, der ikke alle kender hinanden. Spillefilm.

21. Alternativer? • En informationskanal? • Et selskabeligt medie? • TV og computeren / internettet konvergerer mod hinanden. • Stig Hjarvards artikel: “Fremtidens selskabelige medier” kan læses påhttp://us.uvm.dk/gymnasie//udvikling/haefte11/haefte11.html

22. ‘At søge’ > at have et spørgsmål > at søge information > at anvende søgemaskine > at gå målrettet > at læse > at fordybe sig > at bruge nettet som database > < ‘At surfe’ < at være nysgerrig < at søge oplevelse < at følge diverse links < at flanere < at iagttage < at orientere sig < at bruge nettet som "computerspil" Psykologiske indstillingstyper

23. tekstbaseret kode > sprogets linje > < grafisk skærm < billedets flade IT's to fremtrædelsesformer Brugerens to orienteringsformer • begreber > • < ikoner

24. Lynch & Horton Den informative site At tilfredsstille brugerens behov Sitens struktur Tekst Transparens og hurtig adgang til den ønskede oplysning David Siegel Den fascinerende site At forføre, lokke og overtale brugeren Sidens layout Grafik En totaloplevelse De to bøgers fokus

25. Lynch & Horton David Siegel • Den totale proces • Udviklingsprocessen • Interface design • Site Design • Page Design • Typografi • Web-skrivning • Webgrafik • Multimedier • Æstetiske highlights • Billedbehandling • Sidelayout • Typografi • Galleri • Kreative designløsninger

26. David Siegels oplæg • 1. kapitel • Form kontra funktion • – • en udfordring? • et epokalt skel?

27. Modernismens princip • “Form Følger Funktion” • Form Follows Function • Louis Sullivan, “Skyskraberens fader”

28. Modernismens princip • Den rationelle helhedsplan går forud for detaljen. • Enkelhed fremfor mangfoldighed • Det funktionelle går forud for det dekorative. • Mellem funktion og dekoration går grænsen mellem åbenhed og tildækning, dvs. mellem sandhed og løgn. “Dekoration og forbrydelse”

29. Modernisme Mies van der Rohe “Less is more” Postmodernisme Robert Venturi “Less is a bore” Konfrontationen Postmodernismens kimpunkt “Learning from Las Vegas” Robert Venturis bog fra 1972

30. Modernisme funktion rationalitet alvor Postmodernisme form leg ironi Konfrontationen

31. Mies’ Seagrambuilding Mies van der Rohe Seagram Building, 1954-58

32. Michael Graves’ PSB Michael Graves: Public Service Building in Portland, Oregon, 1980-82

33. En homepages funktion • Hvad skal den fortælle brugeren? • Hvordan skal den appellere til brugeren? Information eller splash? • Hvordan får en site sin egen identitet? • Hvordan skiller den sig som enhed og helhed ud fra det øvrige web?

34. Siegels indgangstunnel Menu-side Indgang 1 2 3 I n d h o l d s s i d e r

35. Siegels udgangstunnel Menu-side 3 2 1 Udgang I n d h o l d s s i d e r Har en website en udgang?

36. Næste gang • Emne • At skrive til internettet • læs • Lynch & Horton kap. 6 / Editorial Style • JakobNielsen: kap. 3