De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Client side representation 1 Webtechnologie Lennart Herlaar.

Verwante presentaties


Presentatie over: "Client side representation 1 Webtechnologie Lennart Herlaar."— Transcript van de presentatie:

1 Client side representation 1 Webtechnologie Lennart Herlaar

2 Inhoud Werkpaarden Luxe paarden Stylesheets, CSS (Webdesign en usability)

3 Client side representation 3 Webtechnologie Lennart Herlaar

4 Ojas Oja 1: Markup Scheiding van presentatie en structuur / semantiek Toegankelijkheid, onderhoudbaarheid, verwerkbaarheid, onontkoombaarheid Consistentie, diversificatie, efficiëntie Oja 2: HTML id en class attribuut Een HTML document is een boom html headbody title h1 p ab p

5 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 Style sheet talen lijken soms programmeertalen! Transformaties

6 Het XML / XSL landschap DTDXMLXSLT (X)HTML XMLPDF LaTeXXSL-FO ValiderenTransformeren CSS

7 Componenten style sheet taal Selectors Aan welke structuurelementen wijs je een style toe? Properties Welke style eigenschappen betreft het? Values en units Welke waarde in welke eenheid krijgt de property? Value propagation mechanisme Hoe werken waardes door bij ontbreken / conflicten? Formatting model Hoe worden onderdelen op de "pagina" geplaatst?

8 Cascading Style Sheets Presentatie sterk vermengd met structuur HTML 3.2 introduceerde de tag Browser specifieke interne style sheets CSS1 al in 1996 een W3C standaard Implementatie in browsers verliep moeizaam CSS2, CSS2.1, CSS3, CSS4 CSS2.1 nog altijd niet volledig geïmplementeerd

9 Locatie style sheet Inline styles Interne style sheet h1 {font-family: 'Times New Roman';} p {color: red; margin-left: 20px;} […] Head! My text. Head! My text.

10 Locatie style sheet Externe style sheet Externe style sheets Head! My text. h1 {font-family: 'Times New Roman';} p {color: red; margin-left: 20px;} Head! My text.

11 Selectors Syntax style sheet regels Selector kan gecompliceerd zijn In de basis een element Of een class attribuut Of een id attribuut Of een combinatie Of … selector {property_1: value_1; property_2: value_2; … property_n: value_n;} Fout! Welkom!.error {color: red;} p.error {color: red;} p {color: red;} #first {color: green;} p.dwarf {size: 5px;} p.giant {size: 20px;}.dark {color: black;} Snow white is a normal person. Grumpy is a dwarf. Scary big guy.

12 Selectors Een selector vormt een conditie Als de volledige selector van toepassing is, kan de style worden toegepast Veel verschillende mogelijkheden a.b : element a met class b *.b : alle elementen met class b (of gewoon.b) a#b : element a met id b a, b : element a of b a b : element b met ancestor a a > b : element b met parent a

13 Selectors, properties, values h1, h2, h3 {color: white; background-color: black; width: 100%; text-align: center;} img {float: right; margin-left: 40px;} p.book:first-line {font-style: italic;} a {text-decoration: none;} a.outside:hover {color: green; background-color: #ccffcc;} ul ul li {margin: 0px;} table.schedule td, th {text-align: center; border: solid 1pt;}.b {font: italic small-caps bold 14pt/16pt arial, sans-serif;}

14 Cascading? Diverse plekken voor specificatie style Voorrangsregels bepalen welke style "wint" Prioriteit (in afnemende volgorde) Inline style Embedded style Externe style sheet User style, User Agent style Niet gespecificeerde styles worden aan een lager niveau overgelaten Cascading Author style

15 Cascading! Binnen één niveau wint de meest specifieke style id voor class, class voor elementnaam En daarna de laatst gedefinieerde Wat als er geen style gedefinieerd wordt? De style van de parent (inheritance; scoping) Of de ingebakken default style (initial value) HTML is een boom Start bij het blad Gebruik de styles die je daar vindt Doe hetzelfde één niveau hoger voor unknown styles CSS reset

16 Specificiteit in actie span {color: red;} span span {color: blue;} span.foo {color: green;} span span.foo {color: turquoise;} span.bar {color: maroon;} Hey! Wow! Amazing! Impressive! k00l! Fantastic!

17 Box model Document gemodeleerd als hiërarchie van boxes Properties van de boxes zijn aanpasbaar Block level boxes 4 zones Width, height Margin, border, padding: 1 tot 4 waarden Defaults, maar niet altijd gelijk aan 0 Boxes kun je tot in detail positioneren Je site is feite een aantal goed gepositioneerde boxes met elk een eigen functie

18 Positionering Document gemodeleerd als hiërarchie van boxes Lijkt op maar is niet gelijk aan de document boom Boxes worden volgens een bepaalde flow geplaatst Block level versus inline level elementen Normale flow: inline naast elkaar, block onder elkaar Aanpasbaar display: inline, block position: static, fixed, relative, absolute (maar…) float: left, right, none Met generieke containers de kracht van CSS

19 Eenheden, lengtematen 'Absolute' eenheden in, cm, mm pt (point, 1pt=1/72in), pc (pica, 1pc=12pt) px (maar…) Relatieve eenheden vw, vh, vmin, vmax: viewport (CSS3) em: huidige font size ex: huidige hoogte van de kleine letter x rem: root em (CSS3) body {font-size: 10pt;} p {border: 3px solid red;} h1 {font-size: 1.8em;} img {max-height: 95vh;}

20 Alles is relatief… Percentages zijn uiteraard ook relatief containing block versus font size Overerving van de berekende waarde Niet van het percentage Onder andere van belang bij gebruik van em Line height van h1? Cumulatief karakter van em body {font-size: 10pt; line-height: 2em;} h1 {font-size: 15pt;} li {font-size: 0.8em;} Responsive design

21 CSS3 (en CSS4) Modulaire opzet Selectors Level 3/4, Values and Units Level 3, Basic Box Model Level 3 Backgrounds and Borders Level 3/4, Text Level 3 2D/3D Transformations, Transitions Meer dan 50 CSS modules In verschillende fasen van het standaardisatieproces Effecten, UI, selectors, media queries, fonts, … Vendor specific properties -moz-, -webkit-, -o-, -ms-

22 Afgeronde hoeken Vroeger….foo {background: url(img/topright.png) top right no-repeat;}.foo.inner {background: url(img/bottomright.png) bottom right no-repeat;}.foo.inner2 {background: url(img/topleft.png) top left no-repeat;}.foo.inner3 {background: url(img/bottomleft.png) bottom left no-repeat;} Hello World

23 Border radius, border image.foo {border-radius: 10px;}.foo {border-radius: 25px 40% 0 40%;}.foo {border-image: url(border.png) 30 round;}.foo {border-image: url(border.png) 30 stretch;}

24 Border image

25 Borders, backgrounds.foo {background: linear-gradient(-45deg, white, #f09 20%, black); box-shadow: 20px 20px 15px -10px rgba(100,255,0,.5);}.foo {background: radial-gradient(#ff0, transparent);}.foo {background: linear-gradient(rgba(0,0,255,.1), black); box-shadow: 20px 20px 15px -10px rgba(255,100,0,1);}

26 2D transformations Translate, rotate, skew, scale, matrix.foo {transform: rotate(30deg);}

27 3D transformations, transitions Transformations in 3D varianten "beschikbaar" Daarnaast transitions Dynamische transformations.foo {width: 100px; height: 100px; transition: width 2s, height 2s, transform 4s;}.foo:hover {width: 200px; height: 200px; transform: rotate(180deg);}

28 Animations Op basis van Zonder JavaScript!.foo {animation: myanim myanim { 0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px;}}

29 Text effects, columns, fonts.foo {text-shadow: 5px 5px 5px red;}.foo {text-shadow: 0px 0px.2em black;}.foo {column-count: {font-family: nws; src: {font-family: nws; src: url('Sansation_Bold.ttf'); font-weight:bold;}.foo {font-family: nws;}

30 Selectors Pseudo-classes :only-child, :nth-child, :nth-of-type, :last-child, ….foo:nth-child(odd) {outline:.2em solid #8f0;}.foo:nth-child(3n) {outline:.2em solid #8f0;}.foo:nth-child(3n+2) {outline:.2em solid #8f0;} tr:nth-child(2n+1) {background-color: #99ff99;}

31 Selectors Pseudo-classes :root, :empty, :enabled, :disabled, :checked, … Male Female input:checked + label {text-shadow: 0 0.5em red;}

32 Box model revisited Box sizing 50% + 50% = 100% ?.foo {box-sizing: content-box; width: 50%; border: 1em ridge red;}.foo {box-sizing: border-box; width: 50%; border: 1em ridge red;}.foo {box-sizing: border-box; width: 50%; border: 1em ridge red; margin: 1px;} IE x, met x < 6 Fratsenmodus (quirks mode)


Download ppt "Client side representation 1 Webtechnologie Lennart Herlaar."

Verwante presentaties


Ads door Google