1. No category

WEBDESIGN & WEBKOMMUNIKATION
23. februar 2012
#4 - Webtypografi og farve + CSS introduktion
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PROGRAM FOR I DAG
1. Farve
2. WebTypografi
3. CSS
4. Selectors, inheritance, hierarkiet og specificitet
5. Næste uge
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
#1
Farve
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PRIMÆRFARVERNE
Additive
Red
Subtraktive
Cyan
Green
Magenta
Blue
Yellow
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
SUBTRAKTIV + ADDITIV
Subtraktiv (opsuger lys)
Additiv (udsender lys)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PRINT + SKÆRM
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
COLOR MODE
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
HEX
#FF0000
Rød værdi
Grøn værdi
Blå værdi
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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/
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEHJULET
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PRIMÆR-, SEKUNDÆRE- OG TERTIÆRE FARVER
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVETONE (HUE)
Farvemætning
Lys
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEHJULET
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
VALG AF FARVE
FARVEVALG
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEVALG: MONOKROMATISK
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEVALG: ANALOGT
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEVALG: KOMPLEMENTÆR
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEVALG: TRIADISK
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEPALETTE DONG
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEPALETTE - TELMORE
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEPALETTE - SONY
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FARVEPALETTE - HENNING LARSEN
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PHOTOSHOP
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PRINT SCREEN
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
KULER.ADOBE.COM
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
COLR.ORG
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PHOTOSHOPS MOSAIC FILTER
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
GRAYBIT.COM
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
GRAYBIT.COM
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
#2
Webtypografi
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
DISPLAY OG BRØDTEKST
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
VÆLG EN PASSENDE SKRIFTTYPE
Henrik Birkvig (1999)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
Antallet af
skrifttyper
Antallet af skrifttyper
som normalt benyttes
på nettet
Teague, J. (2010): Fluid Web Typography
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
WORKHORSES
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
DE KLASSISKE WEBSIKRE FONTE
De 10 skrifttyper inkluderet i Web Core Fonts (Microsoft 1996)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
Teague, J. (2010): Fluid Web Typography
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
Teague, J. (2010): Fluid Web Typography
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
Teague, J. (2010): Fluid Web Typography
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
NYE WEB WORKHORSES
Download de nye gratis Vista-fonte her
http://www.itu.dk/people/stg/WDWK-E2010/ekstra/vistawebfonts.zip
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
WHAT THE FONT
http://new.myfonts.com/WhatTheFont/
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
@font-face
@font-face {
font-family : "NavnPaaSkrifttype";
src : url("NavnPaaSkrifttype.ttf")
format("Formattype");
}
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
BROWSER UNDERSTØTTELSE
Web Fonts Format browser
support: http://webfonts.info/
wiki/index.php?title=@fontface_browser_support
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
WOFF understøttes indtil videre i Internet
Explorer 9, Firefox 3.6+ og Chrome 6+
TrueType
WOFF
SVG
OpenType
EOT (Embedded Open Type)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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...
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
GOOGLE WEB FONTS
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FONT SQUIRREL
http://www.fontsquirrel.com/
fontface/generator
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
CUFÓN
http://cufon.shoqolate.com/generate/
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
SIFR
(Scalable Inman Flash Replacement)
http://wiki.novemberborn.net/sifr/
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
BILLEDEGENERERING
FLIR (Facelift Image Replacement)
P+C DTR (PHP + CSS Dynamic Text Replacement)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
#3
CSS
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FORSKELLIGE LAG
Præsentation
CSS
Beskriver
strukturen i
dokumentet
Tilføjer
interaktivitet,
instant feedback
og dynamik.
Leverer indhold via
databaseforespørgsler,
beregninger osv.
Leverer information om
hvordan dokumentets
skal se ud
Struktur
HTML5
Adfærd
Eksempelvis JavaScripzt, jQuery, AJAX
Dynamisk
Eksempelvis PHP + SQL
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
KONTROL FRA EN ENKEL FIL
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
FJERNER UNØDVENDIG KODE
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
MEDIATYPE
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
CSSZENGARDEN
http://www.csszengarden.com/
CSSZENGARDEN
http://www.csszengarden.com/
CSSZENGARDEN
http://www.csszengarden.com/
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
CSS3 BROWSER UNDERSTØTTELSE
http://
fmbip.com
/litmus/
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
SYNTAKSEN
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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;}
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
#5
Selectors, inheritance, hierarkiet og specificitet
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
SELECTORS ER MÅDEN VI
BYGGER BRO MELLEM VORES
HTML-ELEMENTER OG VORES
CSS-FORMATERING
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
SELECTORS
- Kroge til ens (X)HTML elementer.
- Forskellige typer:
- Element selectors
- Contextual selectors
- Class and id selectors
- Pseudoselectors
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
ELEMENT TYPE SELECTORS
- Den mest basale selector-type, enkeltstående eller
grupperet.
h1 {
color: blue;
}
h1, h2, p {
color: blue;
}
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
INHERITANCE
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PARENTS + CHILDREN
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
INHERITANCE
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
CONTEXTUAL SELECTORS
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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 }
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
ID + CLASS SELECTORS
- Krogene som knyttes til element-indikatorerne i (X)HTML
dokumentet.
- ID: #idnavn
#idnavn { color: blue; }
- Class: .classnavn
.classnavn { color: blue; }
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
INDIKATORER & SELEKTORER
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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).
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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).
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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>
<!-- @import url(styles/mystyles.css); -->
</style>
</head>
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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)
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
Næste gang:
Projekt idebørs
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
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.
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann
PÅ GENSYN
Og held og lykke med CSS
Webdesign & webkommunikation #4, IT Universitetet F2012, Sigurd Trolle Gronemann