Grundlæggende Webdesign 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

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

Server vs klient Web- Browser server HTML 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.

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

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) %

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

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

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

Statistik over brug af browsere i dag 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 % ? 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 % En anden statistik siger summarisk (og forskelligt): MS 71 %; Netscape 27 %

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

Browservindue ved 800×600 pixel 760 420

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

En websites væsen

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

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

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

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

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. Orale samfund alle opholder sig samme sted; minimal social adskillelse; Skriftkultur lokalitet er ingen betingelse; skel mellem analfabeter og læsekyndige; Elektronisk kultur oralitetens tilbagevenden; grænsen mellem forskellige grupper ophæves;

To typer elektroniske medier 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

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.

En informationskanal? Et selskabeligt medie? Alternativer? 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

Psykologiske indstillingstyper ‘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"

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

De to bøgers fokus Lynch & Horton David Siegel 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

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

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

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

“Dekoration og forbrydelse” 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”

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

Konfrontationen Modernisme funktion rationalitet alvor Postmodernisme form leg ironi

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

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

Information eller splash? 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?

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

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?

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