WEBDESIGN & WEBKOMMUNIKATION

Transkript

1 WEBDESIGN & WEBKOMMUNIKATION 23. februar 2012 #4 - Webtypografi og farve + CSS introduktion

2 PROGRAM FOR I DAG 1. Farve 2. WebTypografi 3. CSS 4. Selectors, inheritance, hierarkiet og specificitet 5. Næste uge

3 #1 Farve

4 PRIMÆRFARVERNE Additive Subtraktive Red Cyan Green Magenta Blue Yellow

5 SUBTRAKTIV + ADDITIV Subtraktiv (opsuger lys) Additiv (udsender lys)

6 PRINT + SKÆRM

7 CMY(K) CMYK (Cyan, Magenta, Yellow) til print CMY er nok, K står for black CMYK er en substraktiv farvemodel CMYK vil vi ikke arbejde med på dette kursus

8 RGB - RGB (Red, Green, Blue) til skærm - RGB er en additiv farvemodel - Normalt har hver af de tre farver en værdi fra Ved 0 bruger man intet af farven (sort) - Ved 255 bruger man hele farven (hvid) - RGB beskrives dermed med 3 talsæt af maksimalt 3 cifre. Eksempelvis R: 255, G: 123, B: 123 hvilket giver baggrundsfarven på dette slide. - Men man kan også beskrive RGB ved hjælp af det hexadecimale talsystem.

9 COLOR MODE

10 HEX #FF0000 Rød værdi Grøn værdi Blå værdi

11 EN NOTE OM WEBSIKRE FARVER - En websikker farve kan vises uden at farven skal "blandes" (dither) - Der findes 6 x 6 x 6 = 216 forskellige websikre farver. - Er mindre vigtige i dag.

12 FARVEDYBDE Oversigt over hvilken farvedybde der anvendes ved besøg på danske sites, juli måned Foreningen for Danske Internetmedier.

13 FARVEHJULET

14 PRIMÆR-, SEKUNDÆRE- OG TERTIÆRE FARVER

15

16

17

18 FARVETONE (HUE) Farvemætning Lys

19 FARVEHJULET

20 VALG AF FARVE FARVEVALG

21 FARVEVALG: MONOKROMATISK

22 FARVEVALG: ANALOGT

23 FARVEVALG: KOMPLEMENTÆR

24 FARVEVALG: TRIADISK

25 ENKLE TIPS - Brug en af førnævnte farvesystemer (eller en af de mange andre som eksisterer) til at skabe en farvepalette. - For større fleksibilitet kan du bruge toner af farverne i din palette, f.eks. 100%, 80%, 40%. - Eksperimenter og vælg først farve sent i designprocessen. - Det er ofte en god ide at arbejde simpelt - mere end fem farver gør det ofte for komplekst. - Vælg eksempelvis kun en basisfarve, en dominerende farve og en fremhævningsfarve.

26 TRIADISK FARVEPALETTE - Basisfarve (underordnet): Visuel svag farve som skal danne kontrast til indholdet (eller komplementær). - Dominerende farve: Definerer de kommunikative værdier i farvepaletten (brandfarve). - Fremhævningsfarve: Fremhævningsfarven kan ligge sig op af basisfarve og den dominerende farve. Men farven kan også adskille sig eksempelvis ved at være visuel markant og dermed konkurrere med den dominerende farve. Marc Boulton (2009)

27 FARVEPALETTE DONG

28

29 FARVEPALETTE - TELMORE

30

31 FARVEPALETTE - SONY

32

33 FARVEPALETTE - HENNING LARSEN

34

35

36

37 PHOTOSHOP

38 PRINT SCREEN

39 KULER.ADOBE.COM

40 COLR.ORG

41 PHOTOSHOPS MOSAIC FILTER

42 GRAYBIT.COM

43 GRAYBIT.COM

44 #2 Webtypografi

45 NYDELSES- OG NYTTELÆSNING - På www skal man være særlig opmærksom på sit valg af skrifttyper og brug af typografiske virkemidler. - Der er ofte fokus på funktionalitet, konsistens og effektivitet frem for eksempelvis afveksling og opdagelse når man taler typografi på www. - Tekstopsætningen og brugen af typografiske virkemidler er meget forskellig fra eksempelvis et magasin til en webside - men selvfølgelig også fra webside til webside. - Hav et skarpt øje på forskellen mellem display-egnede fonte og brødtekst-egnede fonte.

46 DISPLAY OG BRØDTEKST

47 DISPLAY OG BRØDTEKST - Du kan understrege et budskab og fortælle en historie med typografi. - Display typografi kan hjælpe til at slå tone og stil fast og hjælpe til at understøtte image og identitet. - Brødtekst er tekst som skal læses. Valget af skrifttyper og tekstopsætningen skal understøtte dette. - Det er derfor vigtigt at have fokus rettet mod læsbarhed frem for æstetik når man arbejder med brødtekst. - Tekstomsætningen er afgørende for om teksten opfattes lettilgængelig og nem at overskue eller svær og forvirrende. - Parametrer som skrifttype, størrelse, linielængde, liniehøjde, hierarki, kontrast og luft kan hjælpe til at gøre teksten mere læsevenlig.

48 VÆLG EN PASSENDE SKRIFTTYPE Henrik Birkvig (1999)

49 Antallet af skrifttyper Antallet af skrifttyper som normalt benyttes på nettet Teague, J. (2010): Fluid Web Typography

50 WORKHORSES

51 DE KLASSISKE WEBSIKRE FONTE De 10 skrifttyper inkluderet i Web Core Fonts (Microsoft 1996)

52 Teague, J. (2010): Fluid Web Typography

53 Teague, J. (2010): Fluid Web Typography

54 Teague, J. (2010): Fluid Web Typography

55 NYE WEB WORKHORSES Download de nye gratis Vista-fonte her

56 WHAT THE FONT

57 { font-family : "NavnPaaSkrifttype"; src : url("navnpaaskrifttype.ttf") format("formattype"); }

58 BROWSER UNDERSTØTTELSE Web Fonts Format browser support:

59 WOFF understøttes indtil videre i Internet Explorer 9, Firefox 3.6+ og Chrome 6+ SVG TrueType WOFF OpenType EOT (Embedded Open Type)

60 KOPI BESKYTTELSE! DRM (Digital Rights Management) EULA (End User License Agreement) IP (Intellectual Property) Er du i tvivl om du må bruge skrifttypen så lad være...

61 GOOGLE WEB FONTS

62 FONT SQUIRREL fontface/generator

63 CUFÓN

64 SIFR (Scalable Inman Flash Replacement)

65 BILLEDEGENERERING P+C DTR (PHP + CSS Dynamic Text Replacement) FLIR (Facelift Image Replacement)

66 #3 CSS

67 FORSKELLIGE LAG Præsentation CSS Leverer information om hvordan dokumentets skal se ud Beskriver strukturen i dokumentet Tilføjer interaktivitet, instant feedback og dynamik. Struktur HTML5 Adfærd Eksempelvis JavaScripzt, jquery, AJAX Leverer indhold via databaseforespørgsler, beregninger osv. Dynamisk Eksempelvis PHP + SQL

68 KURSETS AFGRÆNSNING Præsentation CSS Vi koncenterer os kun om disse to lag på dette kursus Struktur HTML5 Adfærd Eksempelvis JavaScripzt, jquery, AJAX Dynamisk Eksempelvis PHP + SQL

69 KONTROL FRA EN ENKEL FIL

70 FJERNER UNØDVENDIG KODE

71 MEDIATYPE

72 FORDELE VED CSS - Kontroller præsentationen, altså måden hvorpå dokumentet bliver vist - Adskil præsentation fra indhold: - Muliggør at ændre præsentation henover et helt website fra en enkel fil. - Muliggør at angive forskellig styling alt efter medie. - Forbedrer tilgængeligheden.

73 CSSZENGARDEN

74 CSSZENGARDEN

75 CSSZENGARDEN

76 CSSZENGARDEN

77 CSS v Version 1 (1996): - Font, color, background, margin, padding, border, float - Manglende browsersupport. - Version 2 (1998): - Positioning (absolute, relative, fixed, z-index), mediatype (print, handheld), selections. - Version Version 3: - Nye browsere understøtter allerede en række nye CSS 3 muligheder. - Vertikal tekst, font resourcer, kolonner, animationer, lydeffekter, skygge og afrundede hjørner, 3d-parametre, udvidet boksmodel.

78 CSS3 BROWSER UNDERSTØTTELSE fmbip.com /litmus/

79 SYNTAKSEN

80 SYNTAKSEN Deklarationer fordelt på flere linjer (nemmest at læse): p { font-size: 12px; font-family: Verdana, sans-serif; } Deklarationer samlet på en linje p {font-size: 12px; font-family: Verdana, sans-serif;}

81 #5 Selectors, inheritance, hierarkiet og specificitet

82 SELECTORS ER MÅDEN VI BYGGER BRO MELLEM VORES HTML-ELEMENTER OG VORES CSS-FORMATERING

83 SELECTORS - Kroge til ens (X)HTML elementer. - Forskellige typer: - Element selectors - Contextual selectors - Class and id selectors - Pseudoselectors

84 ELEMENT TYPE SELECTORS - Den mest basale selector-type, enkeltstående eller grupperet. h1 { } color: blue; h1, h2, p { } color: blue;

85 INHERITANCE

86 PARENTS + CHILDREN

87 INHERITANCE

88 CONTEXTUAL SELECTORS

89 CONTEXTUAL SELECTORS - Descendant selector (tager fat i alle efterkommere) li em { color: blue; } li a em { color: blue; } - Child selector (IE7+) (tager fat i et barn af en bestemt forælder) li > em { color: blue; } - Adjacent sibling selector (IE7+) (tager fat i efterfølgende søskende) h1 + h2 { margin-top: -5mm }

90 ID + CLASS SELECTORS - Krogene som knyttes til element-indikatorerne i (X)HTML dokumentet. - ID: #idnavn #idnavn { color: blue; } - Class:.classnavn.classnavn { color: blue; }

91 INDIKATORER & SELEKTORER

92 ELEMENT INDIKATORER ID & CLASS - Meningsskabende elementer er fundamentet men er dog slet ikke udtømmende for ens behov. - ID og Class er skabt til at give dokumentet struktur samt som kroge for ens CSS kode. - Hermed kan man skabe sine egne elementer, hvis der ikke er et passende i det forudbestemte udvalg af elementer.

93 ID - Bruges til at give et unikt navn til et specifikt element. - Må kun bruges én gang i hvert (X)HTML dokument. - Er anvendelige til at identificere gennemgående strukturelementer, som eksempelvis menu og indholdsklynger. - Det er muligt at rette ens CSS mod det element, som er navngivet med id, deraf krog metaforen. - Tænk CSS, men tænk også struktur - element indikatorerne er til for begge dele.

94 CLASS - Kan modsat id tildeles så mange elementer som nødvendigt i ens dokument. - Er dermed anvendelig når ens indhold skal grupperes henover et dokument. - Et element kan tildeles både et class og et id, id er mere dominerende end class. - En enkel CSS stil kan dermed tildeles alle de elementer, som man ønsker.

95 PSEUDOCLASS SELECTORS a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: none;} - Rækkefølgen skal være: - :link, :visited, :hover, :active - Flere pseudoclasses (IE7+) - :focus - :first-child - Eller i kombination: a:focus:hover

96 PSEUDOELEMENT + ATTRIBUTE SELECTORS - Pseudoelement selectorer: - Første linje og første tegn :first-line, :first-letter - Indsæt indhold før og efter (IE7+): :before, :after - Attribut selectorer (IE7+): - Muliggør at sende styling mod specifikke attribut typer eller værdier.

97 TILFØJ CSS TIL HTML - 3 måder: - Inline: Styling tilføjes inden for element tagget som en attribut (bør undgås). - Embedded: Styling tilføjes inden for HTML dokumentets head tag. - Eksternt style sheet: Separat dokument indeholdende al styling (mest udbredt).

98 INLINE Stylingen tilføres kun det anførte element <h1 style= color: red >This is a red header</h1> <h2 style= color: red; font-family: Courier New,serif >This is a red header with another font</h2> Undgå brug af inline styling (med mindre du har behov for at skabe dominans i en kaskade/hieraki).

99 EMBEDDED <style> </style> Stylingen tilføjes inden for (X)HTML dokumentets head-tag og virker dermed kun i det dokument. <head> <style type= text/css > h1 {color: red;} p {color: blue; font-size: 12px;} </style> <title>stylesheets embedded in HTML</title> </head> Undgå brug af embedded styling undtagen når det er for at udnytte hierarkiet.

100 EKSTERNT <style> </style> Stylingen tilføjes inden for (X)HTML dokumentets head tag og virker dermed kun i det dokument. <head> <link rel= stylesheet href= styles/mystyles.css media= screen type= text/ css /> </head> <head> <style> </style> </head> url(styles/mystyles.css); -->

101 SET MEDIATYPE <link rel= stylesheet href= styles/mystyles.css media= screen type= text/ css /> - screen (til visning på computerskærme) - projection, tv - print (til udskrivning) - handheld (til mobiltelefoner, PDA er) - speech eller aural, braille eller empossed (blindskrift) - all

102 HIERARKIET/KASKADEN - Browserens (default) indstillinger - Brugerens indstillinger ( reader style sheet ) - Eksternt stylesheet #2: link) - Embedded styles - Inline styles -!important (#1: bruger, #2: udvikler) - Specificitet (Selector order) - Regel rækkefølge (Rule order)

103 SPECIFICITET - De mest specifikke selectors vinder. - Rækkefølge fra med mest specifikke til mindst: 1. ID selectors (#) 2. Class selectors (.) 3. Contextual selectors (space, >, +) 4. Individuelle element selectors (p, h1, em ) - Regel rækkefølge: - Sidste regel vinder.

104 Næste gang: Projekt idebørs

105 TIL NÆSTE GANG - Læsning: - (G) HTML5 & CSS3 Visual QuickStart Guide (Castro & Hyslop): Introduction, kap. 9 og kap (WSG) Web Style Guide : Kap. 6, Page Structure + Kap. 7, Page Design - Arbejd selv: - Aflever dagens øvelse som et link på bloggen under din hjælpelærers underside inden tirsdag d. 21. februar kl

106 PÅ GENSYN Og held og lykke med CSS