WEBDESIGN & WEBKOMMUNIKATION

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

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

#1 Farve

PRIMÆRFARVERNE Additive Subtraktive Red Cyan Green Magenta Blue Yellow

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

PRINT + SKÆRM

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

RGB - RGB (Red, Green, Blue) til skærm - RGB er en additiv farvemodel - Normalt har hver af de tre farver en værdi fra 0-255 - 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.

COLOR MODE

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

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.

FARVEDYBDE Oversigt over hvilken farvedybde der anvendes ved besøg på danske sites, juli måned 2009. Foreningen for Danske Internetmedier. http://www.fdim.dk/

FARVEHJULET

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

FARVETONE (HUE) Farvemætning Lys

FARVEHJULET

VALG AF FARVE FARVEVALG

FARVEVALG: MONOKROMATISK

FARVEVALG: ANALOGT

FARVEVALG: KOMPLEMENTÆR

FARVEVALG: TRIADISK

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.

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)

FARVEPALETTE DONG

FARVEPALETTE - TELMORE

FARVEPALETTE - SONY

FARVEPALETTE - HENNING LARSEN

PHOTOSHOP

PRINT SCREEN

KULER.ADOBE.COM

COLR.ORG

PHOTOSHOPS MOSAIC FILTER

GRAYBIT.COM

#2 Webtypografi

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.

DISPLAY OG BRØDTEKST

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.

VÆLG EN PASSENDE SKRIFTTYPE Henrik Birkvig (1999)

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

WORKHORSES

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

Teague, J. (2010): Fluid Web Typography

NYE WEB WORKHORSES Download de nye gratis Vista-fonte her http://www.itu.dk/people/stg/wdwk-e2010/ekstra/vistawebfonts.zip

WHAT THE FONT http://new.myfonts.com/whatthefont/

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

BROWSER UNDERSTØTTELSE Web Fonts Format browser support: http://webfonts.info/ wiki/index.php?title=@fontface_browser_support

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

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

GOOGLE WEB FONTS

FONT SQUIRREL http://www.fontsquirrel.com/ fontface/generator

CUFÓN http://cufon.shoqolate.com/generate/

SIFR (Scalable Inman Flash Replacement) http://wiki.novemberborn.net/sifr/

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

#3 CSS

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

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

KONTROL FRA EN ENKEL FIL

FJERNER UNØDVENDIG KODE

MEDIATYPE

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.

CSSZENGARDEN http://www.csszengarden.com/

CSS v. 1+2+3 - 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 2.1 - 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.

CSS3 BROWSER UNDERSTØTTELSE http:// fmbip.com /litmus/

SYNTAKSEN

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

#5 Selectors, inheritance, hierarkiet og specificitet

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

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

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

INHERITANCE

PARENTS + CHILDREN

INHERITANCE

CONTEXTUAL SELECTORS

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 }

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

INDIKATORER & SELEKTORER

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.

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.

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.

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

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.

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

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

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.

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>

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

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

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.

Næste gang: Projekt idebørs

TIL NÆSTE GANG - Læsning: - (G) HTML5 & CSS3 Visual QuickStart Guide (Castro & Hyslop): Introduction, kap. 9 og kap. 11. - (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. 18.00.

PÅ GENSYN Og held og lykke med CSS