Præsentation er lastning. Vent venligst

Præsentation er lastning. Vent venligst

Grundlæggende Webdesign

Lignende præsentationer


Præsentationer af emnet: "Grundlæggende Webdesign"— Præsentationens transcript:

1 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

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

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

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 × (16) % 800 × (56) % 1024 × (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 Det bedste er selvfølgelig at indstille egen skærm til den ønskede opløsning

7 Mosaic – den første browser
Hentet fra

8 Browsere i dag Internet Explorer 6 Netscape 6.2 (+ 7 i beta-version)
Opera 6.05 (norsk) Amaya (W3C’s browser) Lynx tekstbrowser IT-h har – ved siden af IE – NS 4.76 på alle maskiner

9 Statistik over brug af browsere i dag
MSIE % MSIE % MSIE % MSIE % MSIE % Netscape % MSIE % ? 0.3 % Netscape % Opera % Netscape % Netscape % Opera % MSIE % 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
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.

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

19 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

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, s, 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, s. 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 En informationskanal? Et selskabeligt medie? Alternativer?
TV og computeren / internettet konvergerer mod hinanden. Stig Hjarvards artikel: “Fremtidens selskabelige medier” kan læses på

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

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

24 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

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 Form kontra funktion David Siegels oplæg 1. kapitel – en udfordring?
et epokalt skel?

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

28 “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”

29 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

30 Konfrontationen Modernisme funktion rationalitet alvor Postmodernisme
form leg ironi

31 Mies’ Seagrambuilding
Mies van der Rohe Seagram Building,

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

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

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


Download ppt "Grundlæggende Webdesign"

Lignende præsentationer


Annoncer fra Google