1 / 32

Client side representation

Client side representation. Webtechnologie. Lennart Herlaar. Inhoud. Werkpaarden Luxe paarden Stylesheets , CSS (Webdesign en usability). Client side representation. Style sheets, CSS. Webtechnologie. Lennart Herlaar. Ojas. Oja 1: Markup

artie
Download Presentation

Client side representation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Client side representation Webtechnologie Lennart Herlaar

  2. Inhoud • Werkpaarden • Luxepaarden • Stylesheets, CSS • (Webdesign en usability)

  3. Client side representation Style sheets, CSS 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 eenboom html head body title h1 p p b a

  5. Style sheets en style sheet talen • De plek van descriptive markup is helder • Maar waarkomt de presentatiedanterecht? • 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 talenlijkensomsprogrammeertalen! • Transformaties

  6. Het XML / XSL landschap • Valideren • Transformeren DTD XML XSLT XSL-FO LaTeX XML PDF CSS (X)HTML

  7. Componenten style sheet taal • Selectors • Aanwelkestructuurelementenwijs je een style toe? • Properties • Welke style eigenschappenbetreft het? • Values en units • Welkewaarde in welkeeenheidkrijgt de property? • Value propagation mechanisme • Hoe werkenwaardes door bijontbreken / conflicten? • Formatting model • Hoe wordenonderdelen op de "pagina" geplaatst?

  8. Cascading Style Sheets • Presentatiesterkvermengd met structuur • HTML 3.2 introduceerde de <font> tag • Browser specifieke interne style sheets • CSS1 al in 1996 een W3C standaard • Implementatie in browsers verliepmoeizaam • CSS2, CSS2.1, CSS3, CSS4 • CSS2.1 nogaltijdnietvollediggeïmplementeerd

  9. Locatie style sheet • Inline styles • Interne style sheet <h1 style="font-family: 'Times New Roman';">Head!</h1> <p style="color: red; margin-left: 20px;">My text.</p> <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>

  10. Locatie style sheet • Externe style sheet • Externestyle sheets <head> <linkrel="stylesheet" type="text/css" href="mystyle.css"/> </head> <h1>Head!</h1> <p>My text.</p> <head> <linkrel="stylesheet" type="text/css" href="defaults.css"/> <linkrel="stylesheet" type="text/css" href="specifics.css"/> </head> <h1>Head!</h1> <p>My text.</p> h1 {font-family: 'Times New Roman';} p {color: red; margin-left: 20px;}

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

  12. Selectors • Een selector vormteenconditie • Als de volledige selector van toepassing is, kan de style wordentoegepast • Veelverschillendemogelijkheden • a.b : element a met class b • *.b : alleelementen 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;} ulul 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 plekkenvoorspecificatie style • Voorrangsregelsbepalenwelke style "wint" • Prioriteit (in afnemendevolgorde) • Inline style • Embedded style • Externe style sheet • User style, User Agent style • Nietgespecificeerde styles wordenaaneen lager niveauovergelaten • Cascading Author style

  15. Cascading! • Binnenéénniveauwint de meestspecifieke style • id voor class, class voorelementnaam • En daarna de laatstgedefinieerde • Watalsergeen style gedefinieerdwordt? • 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 daarvindt • Doe hetzelfdeéénniveauhogervoor 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;} <span class="foo">Hey!</span> <span>Wow! <span>Amazing!</span> <span class="foo">Impressive!</span> <span class="bar">k00l!</span> <i>Fantastic!</i> </span>

  17. Box model • Document gemodeleerdalshiërarchie van boxes • Properties van de boxes zijnaanpasbaar • Block level boxes • 4 zones • Width, height • Margin, border, padding: 1 tot 4 waarden • Defaults, maar nietaltijdgelijkaan 0 • Boxes kun je tot in detail positioneren • Je site is feiteeenaantalgoedgepositioneerde boxes met elk eeneigenfunctie

  18. Positionering • Document gemodeleerdalshiërarchievan boxes • Lijkt op maar is nietgelijkaan de document boom • Boxes wordenvolgenseenbepaalde flow geplaatst • Block level versus inline level elementen • Normale flow: inline naastelkaar, block onderelkaar • 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…) • Relatieveeenheden • vw, vh, vmin, vmax: viewport (CSS3) • em: huidige font size • ex: huidigehoogte 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 zijnuiteraardookrelatief • containing block versus font size • Overerving van de berekendewaarde • Niet van het percentage • Onderandere van belangbijgebruik van em • Line height van h1? • Cumulatiefkarakter van em body {font-size: 10pt; line-height: 2em;} h1 {font-size: 15pt;} li {font-size: 0.8em;} Responsive design

  21. CSS3 (en CSS4) • Modulaireopzet • 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 verschillendefasen van het standaardisatieproces • Effecten, UI, selectors, media queries, fonts, … • Vendor specific properties • -moz-, -webkit-, -o-, -ms-

  22. Afgerondehoeken • Vroeger… <div class="foo"> <div class="inner"> <div class="inner2"> <div class="inner3"> </div> </div> </div> </div> Hello World Hello World .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;}

  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(rgba(0,0,255,.1), black); box-shadow: 20px 20px 15px -10px rgba(255,100,0,1);} .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);}

  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:hover{width: 200px; height: 200px; transform: rotate(180deg);} .foo{width: 100px; height: 100px; transition: width2s, height 2s, transform 4s;}

  28. Animations • Op basis van "at-rules" • @keyframes • Zonder JavaScript! .foo {animation: myanim 5s;} @keyframesmyanim { 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 {font-family: nws;} .foo {column-count: 3;} @font-face {font-family: nws; src: url('Sansation_Light.ttf');} @font-face {font-family: nws; src: url('Sansation_Bold.ttf'); font-weight:bold;}

  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;} tr:nth-child(2n+1) {background-color: #99ff99;} .foo:nth-child(3n+2) {outline: .2em solid #8f0;}

  31. Selectors • Pseudo-classes • :root, :empty, :enabled, :disabled, :checked, … <input type="radio" id="m" value="male" name="gndr"/> <label for="m">Male</label><br/> <input type="radio" id="f" value="female" name="gndr"/> <label for="f">Female</label> input:checked + label {text-shadow: 0 0 .5em red;}

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

More Related