College 5

Markup:
CSS en HTML5
Hoorcollege Webdesign 5
16 mei 2014
Christof van Nimwegen
1
CSS: Waarom ook alweer….

HTML




was bedoeld voor documentstructuur
(text met verschillende levels in
headings en body text)
Plaatjes
Tabellen (ook gebruikt voor positioneren)
HTML 3.2


mogelijkheid om lettertypen, kleuren en vele andere visuale
aspecten te definieren.
De eigenlijke geboorte van web DESIGN (nu was de content niet
meer het belangrijkste, ook de presentatie)
2
Style sheets en style sheet talen




De plek van descriptive markup is helder
Maar waar komt de presentatie dan terecht?
Style sheets, geschreven in een style sheet
taal
Diverse style sheet talen



DSSSL, voor SGML
XSL, voor XML (XSL-FO, XSLT, XPath)
CSS, voor (X)HTML en XML
Voordelen CSS



Minder data download, kortere laadtijd
Schonere code is beter voor zoekmachines
Hoeft maar 1x iets te veranderen, dus:





Efficiëntie en tijdswinst in het ontwikkelproces
Makkelijker onderhoud
Meer vormgevingsmogelijkheden dan HTML
Cooler design
Responsivenses !
4
Cascading?



Diverse plekken voor style specificatie
Voorrangsregels bepalen welke style "wint"
Prioriteit (in afnemende volgorde)
 Inline style (in een HTML element
 Embedded style (in the <head> tag)
 Extern style sheet
 Browser standaardwaarden (default)
Cascading?
6
Locatie style sheet

Externe style sheet
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css"/>
</head>
<h1>Head!</h1>
<p>My text.</p>

Externe style sheetS
<head>
<link rel="stylesheet" type="text/css"
href="defaults.css"/>
<link rel="stylesheet" type="text/css"
href="specifics.css"/>
</head>
CSS Selectors

Selector: WAT krijgt een style?

x (elementen van een bepaald type, bv. lijst)


# (zaken die een ID hebben adresseren)


.error {color: red;}
* (alles)


#container {width: 960px;}
. (zaken die een CLASS hebben adresseren)


ul { color: red; }
* {margin: 0;}
…….heel veel meer
8
Gecombineerde Selectors




a.b
*.b
a#b
a, b
a met class attribute b
alle elementen met class attribute b
a met id attribute b
a of b

pseudo-classes, bij voorbeeld
 A:active
 A:visited
 A:visited:active
 …….

en nog veel meer in CSS3
9
CSS Property: welk eigenschap stylen?
color
red, yellow, rgb(212,120,20)
font-style
normal, italics, oblique
font-size
12pt, larger, 150%, 1.5em
text-align
left, right, center, justify
line-height
normal, 1.2em, 120%
display
block, inline, list-item, none


http://www.w3schools.com/cssref/
vaardigheid, oefening en opzoeken
 onze practicumoefeningen (basics)
 http://www.w3.org/Style/Examples/011/firstcss
 www.w3schools.com (maar zie ook
www.w3fools.com)
10
Dus…

Inline styles
<h1 style="font-family: 'Times New
Roman';">Head!</h1>
<p style="color: red; margin-left: 20px;">My
text.</p>

Interne style sheet
<head>
<style type="text/css">
h1 {font-family: 'Times New Roman';}
p {color: red; margin-left: 20px;}
</style>
</head>
[…]
<h1>Head!</h1>
<p>My text.</p>
Eenheden, lengtematen

Absolute eenheden




in, cm, mm
pt (point, 1pt=1/72in), pc (pica, 1pc=12pt)
px
Relatieve eenheden




body {font-size: 10pt;}
p
{border: 3px solid red;}
h1
{font-size: 1.8em;}
vw, vh, vm: viewport (CSS3) img {max-height: 95vh;}
em: huidige font size
ex: huidige hoogte van de kleine letter x
….
Centraal in CSS: Box model

algemeen model voor block elementen





vier zones
voor padding, border en margin 1 of 4 waarden
eenheden: px, em, pt, cm (gooi ze niet door elkaar)
tools als Firebug laten box-eigenschappen duidelijk
zien
boxen kun je positioneren
13
Bijvoorbeeld de vaksite
div.head {
background-image: url(titel.gif);
height: 70px;
background-repeat: no-repeat;
}
div.body {
position: absolute;
left: 190px;
margin: 0 1em 0 0;
}
div.menu {
font-size: 13px;
line-height: 19px;
position: absolute;
width: 190px;
background-image: url(menu.gif);
height: 953px;
background-repeat: no-repeat;
}
<body>
<div class="head"> </div>
<div class="menu">

</div>
<div class="body">
<h1>Webdesign</h1>
<h2>Laatste Nieuws</h2>
</div>
</body>
14

http://www.barelyfitz.com/screencast/html-training/css/positioning/
15
Specificiteit in actie
span {color: red;}
span span {color: blue;}
span.foo {color: green;}
span span.foo {color: turquoise;}
span.bar {color: maroon;}
<span class="foo">Hey!</span>
<span>Wow!
<span>Amazing!</span>
<span class="foo">Impressive!</span>
<span class="bar">k00l!</span>
<i>Fantastic!</i>
</span>
CSS 3
17
CSS 3 (sommigen waren er al in CSS2)









Animations / transities
Visuele effecten (border-radius, rgbacolor, boxshadow, text-shadow, gradient)
Ronde hoeken
Vrijheid fonts (ook Webfonts)
Border images
Aural style sheets?
Media queries
….en nog veel meer
En overal zijn tools voor!
18
Bijvoorbeeld: Web fonts

http://www.fontsquirrel.com/fonts/list/find_fonts
19
Fonts als icons
Waarom?



Afbeeldingen zorgen (meestal) voor meer
laadtijd)
Afbeeldingen zijn niet altijd even scherp
Fonts wel, ook bij inzoomen, of op een
Retina scherm
20
Fonts als icons!
Afbeelding-icon
Font-icon
Normaal
Zoom
Retina,
HiDPI
21
Fonts als icons
22
En andere effecten….
23
En ……
24
Google fonts
25
Bijvoorbeeld: Animaties (simpel)
26
Bijvoorbeeld: Animaties (iets fancier)
27
Maar…we zijn er nog niet (vanaf)….
Browser specifieke prefixed
properties




-webkit voor Chrome, Safari
-moz voor Firefox
-o voor Opera
-ms voor Internet Explorer).
Worden gebruikt om nieuwe, of
experimentele CSS te testen,
voordat ze officieel geaccepteerd
zijn door W3C.
28
Dus:
background: -webkit-linear-gradient(#ff0000, #000000);
background: -moz-linear-gradient(#ff0000, #000000);
background: -ms-linear-gradient(#ff0000, #000000);
background: -o-linear-gradient(#ff0000, #000000);
background: linear-gradient(#ff0000, #000000);
29
30
Vele tools!







http://css3generator.com/
http://www.css3maker.com/
http://westciv.com/tools/gradients/
http://font-combinator.com/
http://css3.mikeplate.com/
http://www.css3.me/
…..
31
Responsiveness
32
Responsiveness




Responsive webdesign: een einde aan de
mobiele versies?
Eigenlijk….conditioneel CSS
Ontwikkeltools zoals Gridset, Bootstrap!
Test tools zoals



http://mattkersley.com/responsive/
http://www.jamus.co.uk/demos/rwddemonstrations/
http://responsivetest.net/
33
HTML5
HTML5
35
HTML5

waarom was XHTML niet goed genoeg meer?
 documentgericht
 weinig interactie
 gebrekkige ondersteuning multimedia

een paar highlights
 minder scripting, minder code
 minder overhead, meer vrijheid
 living standard, klaar in 2022?
 Cross-platform ( tablet ,smartphone, a netbook, notebook or a
Smart TV).
 Webapplications that still work when you are not online.
Audio en video

in HTML5 geen externe plugins meer nodig
<audio controls="controls">
<source src="song.mp3" type="audio/mpeg"/>
Your browser does not support the audio tag.
</audio>
<video controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4"/>
<source src="movie.ogg" type="video/ogg"/>
Your browser does not support the video tag.
</video>
<video controls>
<source src="movie.mp4">
</video>
Nieuwe elementen, zoals


<header>, <nav>, <article>, <section>,
<aside>, <footer>, <canvas>
<progress>, <mark>, <summary>, <detail>
Dus….div? HTML5 Semantically
richer!!
39
HTML5: het einde van Flash?


<canvas>: Tekenen en animatie (wel met JS)
Interactief, flexibel, browser/platform, is een
web standaard (part of HTML5), develop once,
run everywhere, gratis, toegankelijke tools
40
Meer over HTML5?




All over the web
Colleges vak Webtechnologie
gebruik van HTML 5 wat handig is
Gebruik “gewone browsers (=Firefox 20.0)”
41
Hoofdpunten

CSS




rules, selectors, properties
overerving eigenschappen
box model, positionering, eenheden
HTML5




living standard
nieuwe elementen
multimedia
compatibiliteit
42
Vragen?
43

Download Report