Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML/CSS

Baae851973798a0cd027b5661e19c2e3?s=47 Gregory
June 03, 2014

 HTML/CSS

Workshop HTML/CSS bij Digipinguïns

Baae851973798a0cd027b5661e19c2e3?s=128

Gregory

June 03, 2014
Tweet

Transcript

  1. HTML/CSS Digipinguïns, 3 juni 2014

  2. None
  3. Mijn naam is Gregory

  4. Ik werk voor mijn webdesign studio www.desikn.be

  5. Ik tweet als @desiknr

  6. HTML Inhoud (Content) CSS Opmaak (Style) JAVASCRIPT Gedrag (Behaviour)

  7. HTML

  8. GESCHIEDENIS RICH MEDIA WEB FORMS 2.0 SEMANTICS

  9. GESCHIEDENIS

  10. HTML (HyperText Markup Language) is de universele taal van het

    wereldwijde web.
  11. Sir Tim Berners-Lee schreef in 1991 een document “HTML Tags”,

    waarin minder dan een dozijn elementen beschreven werd om webpagina's te maken. Tags bestonden al in SGML (Standard Generalized Markup Language).
  12. Van HTML in 1991 tot HTML 4.01 in 1999. XHTML

    (Extensible Hypertext Markup Language) was HTML als XML, maar Internet Explorer ondersteunde geen XHTML. XHTML 2 was de toekomst.
  13. XHTML 2 en HTML 5 (met spatie) werden ontwikkeld door

    W3C. HTML5 (zonder spatie) werd ontwikkeld door WHATWG. World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG)
  14. HTML5 “Candidate Recommendation” (CR) in 2012. HTML5 “Proposed Recommendation” (PR)

    in 2022.
  15. HTML5 is voortzetting van HTML 4.01.

  16. Vereenvoudiging

  17. HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  18. HTML5 <!DOCTYPE html>

  19. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="bestand.js"></script> <link

    rel="stylesheet" type="text/css" href="bestand.css">
  20. HTML5 <meta charset="UTF-8"> <script src="bestand.js"></script> <link rel="stylesheet" href="bestand.css">

  21. Syntaxis <!DOCTYPE html> <html> <head> <title>Mijn eerste HTML-pagina</title> </head> <body>

    <h1>Hello world!</h1> <p>Een regel met paragraaf-tags.</p> Een tweede regel zonder paragraaf-tags,<br /> met een regeleind na de komma en <a href=”pagina.html”>een link</a>. </body> </html>
  22. None
  23. HTML5 demo's HTML5 demo's en voorbeelden html5demos.com

  24. RICH MEDIA

  25. Canvas

  26. Het canvas element is een variabele om dynamische afbeeldingen te

    creëren. De inhoud kan op ieder moment geüpdatet worden via JavaScript. Ideaal voor tools en games die vroeger een plugin zoals bv. Flash nodig hadden. <canvas id=”mijn-eerste-canvas” width=”320” height”240”></canvas> speckyboy.com/2011/12/07/20-amazing-implementations-of-html5-canvas
  27. Audio

  28. Een audio bestand in een webpagina plaatsen. <audio src=”mijn-audio-bestand.ogg” loop

    controls></audio> <audio autoplay loop controls> <source src=”mijn-audio-bestand.ogg”> <source src=”mijn-audio-bestand.mp3”> </audio>
  29. Video

  30. Een video bestand in een webpagina plaatsen. <video src=”mijn-video-bestand.webm” controls

    width=”320” height=”240”></video> <video autoplay controls width=”320” height=”240” poster=”mijn-video-poster.jpg”> <source src=”mijn-video-bestand.webm”> <source src=”mijn-video-bestand.mp4”> </video>
  31. Browser controls

  32. WEB FORMS 2.0

  33. Input type “text” attributen

  34. Placeholder Plaatst tekst in een veld. <label for=”hobbies”>Uw hobbies</label> <input

    id=”hobbies” name=”hobbies” type=”text” placeholder=”bv. Vogels kijken”>
  35. Placeholder in Firefox

  36. Required Verplicht u om het veld in te vullen. <label

    for=”wachtwoord”>Uw wachtwoord</label> <input id=”wachtwoord” name=”wachtwoord” type=”password” required>
  37. Required in Firefox

  38. Autofocus Plaatst cursor in een veld. <label for=”nieuws”>Deel uw laatste

    nieuws ...</label> <input id=”nieuws” name=”nieuws” type=”text” autofocus>
  39. Autofocus in Firefox

  40. Autocomplete Automatisch aanvullen van velden. <input name=”eenmalig-token” type=”text” autocomplete=”on”>

  41. Datalist Mengt een input met een select. <label for=”wereld”>Mijn wereld</label>

    <input id=”wereld” name=”wereld” type=”text” list=”planeten”> <datalist id=”planeten”> <option value=”Mercurius”> <option value=”Venus”> <option value=”Aarde”> <option value=”Mars”> <option value=”Jupiter”> <option value=”Saturnus”> <option value=”Uranus”> <option value=”Neptunus”> </datalist>
  42. List in Firefox

  43. Input types

  44. HTML 4.01 <input id=”naam” name=”naam” type=”text”> <input id=”wachtwoord” name=”wachtwoord” type=”password”>

    <input id=”keuze” name=”keuze” type=”radio”> <input id=”keuze” name=”keuze” type=”checkbox”> <input id=”annuleren” name=”annuleren” type=”reset”> <input id=”versturen” name=”versturen” type=”submit”>
  45. Het type attribuut wordt uitgebreid in HTML5. Indien niet ondersteunt

    door browser gedraagt het zich als een tekst-veld.
  46. Contact informatie <input id=”e-mail” name=”e-mail” type=”email”> <input id=”website” name=”website” type=”url”>

    <input id=”telefoon” name=”telefoon” type=”tel”>
  47. Email in Opera

  48. Email op iPhone

  49. URL op iPhone

  50. Tel op iPhone en Android

  51. Zoeken <input id=”zoeken” name=”zoeken” type=”search”>

  52. Search in Safari

  53. Search op iPhone

  54. Sliders en spinners <input id=”aantal” name=”aantal” type=”range”> <input id=”aantal” name=”aantal”

    type=”number”>
  55. Range in Chrome

  56. Number in Opera

  57. Number op iPhone en Android

  58. Datum en tijd <input id=”datum” name=”datum” type=”date”> <input id=”datum” name=”datum”

    type=”datetime”> <input id=”datum” name=”datum” type=”datetime-local”> <input id=”datum” name=”datum” type=”month”> <input id=”datum” name=”datum” type=”week”> <input id=”datum” name=”datum” type=”time”>
  59. Date in Opera

  60. Datetime in Opera

  61. Datetime-local in Opera

  62. Month in Opera

  63. Week in Opera

  64. Time in Opera

  65. Kleurkiezer <input id=”kleur” name=”kleur” type=”color”> Nu ook in Firefox vanaf

    versie 29.
  66. Color in Opera

  67. SEMANTICS

  68. De semantiek of betekenisleer is een wetenschap die zich bezighoudt

    met de betekenis van symbolen.
  69. Nieuwe elementen

  70. Mark Markeren van een woord of zin in bv. zoekresultaten.

    <h1>Zoekresultaten voor 'Pinguïns'</h1> <ol> <li><mark>Pinguïns</mark> zijn een orde van niet-vliegende zeevogels.</i> </ol>
  71. Time Tijd, dagen, weken en jaar aanduiding. <time datetime=”2013-06-03”>03 juni

    2014</time>
  72. Meter Iets dat al gemeten is. <meter>9 van de 10

    pinguïns</meter> <meter max=”10”>9 pinguïns</meter>
  73. Progress Vooruitgang of iets dat bezig is te meten. Uw

    profiel is <progress>60 %</progress> compleet. <progress min=”0” max=”100” value=”60”></progress>
  74. Structuur

  75. Structuur gaat over inhoud, niet over plaats!

  76. Header Bevat inleidende inhoud of navigatie. <section> <header> <h1>Een mooie

    presentatie</h1> </header> <p>De presentatie over HTML5.</p> </section>
  77. Footer Informatie over het bevattende element. <section> <header> <h1>Een mooie

    presentatie</h1> </header> <p>De presentatie over HTML5.</p> <footer> <p>Door Gregory</p> </footer> </section>
  78. Main Bevat de hoofdinhoud. <main> <p>De presentatie over HTML5.</p> </main>

    Het <main> element mag maar één maal voorkomen in het document. Het <main> element mag geen descendant van <article>, <aside>, <footer>, <header> of <nav> element zijn.
  79. Aside Inhoud dat los staat van de hoofdinhoud. <aside>Presentaties</aside>

  80. Nav Navigatie. <nav> <ul> <li><a href=”http://cgcvzw.be/”>Home</a></li> <li><a href=”presentaties”>Presentaties</a></li> <li><a href=”over-ons”>Over

    ons</a></li> <li><a href=”contact”>Contact</a></li> </ul> </nav>
  81. Section Gelijkaardig gerelateerde generieke inhoud. <section> <header> <h1>Een mooie presentatie</h1>

    </header> <main> <p>De presentatie over HTML5.</p> </main> <footer> <p>Door Gregory</p> </footer> </section> Het <section> element moet een heading bevatten.
  82. Article Gelijkaardig gerelateerde specifieke inhoud. <article> <header> <h1>Een mooie presentatie</h1>

    </header> <p>De presentatie over HTML5.</p> <footer> <p>Gepubliceerd <time date=”2013-05-25” pubdate>Zaterdag, 25 mei 2013</time> Door Gregory</p> </footer> </article> Het <article> element moet een heading bevatten.
  83. CSS

  84. GESCHIEDENIS TRANSITIONS EN TRANSFORMS FORMS VERRIJKEN RESPONSIVE WEBDESIGN

  85. GESCHIEDENIS

  86. CSS (Cascading Style Sheets) is een mogelijkheid om de vormgeving

    van webpagina's los te koppelen van hun feitelijke inhoud. csszengarden.com
  87. Het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid

    van het overerven van opmaak-eigenschappen.
  88. Vanaf het begin van het World Wide Web heeft elke

    browser zijn eigen interne stylesheet gehad, die er voor zorgde dat de tags in een document werden geïnterpreteerd. Stylesheets bestonden al sinds SGML (Standard Generalized Markup Language).
  89. Håkon Wium Lie stelde in 1994 CHSS voor. Bert Bos

    werkte aan SPP.
  90. Van CSS1 in 1996 tot CSS2.1 in 2011.

  91. CSS3 bestaat uit modules. 2012-06-19: Media Queries 2011-09-29: Namespaces 2011-09-29:

    Selectors Level 3 2011-06-07: Color
  92. Microsoft Internet Explorer 5.0 voor MacIntoch was in 2000 eerste

    browser met volledige CSS1 ondersteuning.
  93. Syntaxis

  94. tagname.classname:pseudoclass { gespecificeerde stijlen } a.pinguin:hover { background-color: black; color:

    white; }
  95. Box model

  96. Box model

  97. Margin: maakt een gebied rond de border vrij Border: een

    boord rond de padding en content Padding: maakt een gebied rond de content vrij Content: inhoud van de 'box', zoals tekst en afbeeldingen
  98. Box model demo <!DOCTYPE html> <html> <head> <title>Box model demo</title>

    <style> .boxmodel { background-color: ivory; border: 5px solid gold; margin: 10px; padding: 20px; width: 300px; } </style> </head> <body> <div class=”boxmodel”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet metus vulputate, rhoncus risus vitae, semper sapien. </div> </body> </html>
  99. None
  100. TRANSITIONS EN TRANSFORMS

  101. Transitions

  102. Voor overgangseffecten bij interacties. a.pinguin { padding: 5px 10px; background:

    #9c3; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.5s; } a.pinguin { padding: 5px 10px; background: #9c3; transition: background 0.3s ease 0.5s; }
  103. Transforms

  104. Voor transformaties in 2D. ul.galerij li a:hover img { transform:

    scale(1.5) rotate(-10deg); transform-origin: bottom left; } ul.galerij li a:hover img { transform: scale(1.5) skew(-5deg, 30deg); } ul.galerij li a:hover img { transform: scale(1.5) translate(20px, 40px); }
  105. Voor transformaties in 3D. div { transform: rotateY(130deg); } div

    { transform: scale3d(0.5, -0.5, 1.5); } div { transform: perspective(600px); }
  106. FORMS VERRIJKEN

  107. Selectors, gradients en animaties

  108. Forms verrijken met selectors fieldset:last-child { margin: 0; } fieldset

    input[type=”text”] { border-radius: 5px; padding: 5px 10px; } fieldset input[type=”submit”] { border-radius: 5px; padding: 5px 10px; }
  109. Forms verrijken met gradients fieldset input[type=”submit”] { background: linear-gradient(#999, #333);

    border: none; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); color: #fff; font-weight: bold; padding: 5px 10px; text-shadow: 0 1px 1px rgba(255,255,255,0.8); }
  110. Forms verrijken met animaties fieldset input[type=”submit”]:hover, fieldset input[type=”submit”]:focus { animation-name:

    pulse; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } fieldset input[type=”submit”]:hover, fieldset input[type=”submit”]:focus { animation: pulse 1.5s infinite ease-in-out; }
  111. RESPONSIVE WEBDESIGN Foto Happy Cog

  112. Responsive webdesign (RWD) Het ontwerp van een responsive website schaalt

    mee met de afmetingen van een scherm. <meta name="viewport" content="width=device-width, initial-scale=1" />
  113. Foto Happy Cog Responsive webdesign

  114. Technieken

  115. Media queries Media queries geven de webpagina een indicatie van

    de afmetingen van het apparaat waarop de website wordt geladen. /* Smartphones (portrait and landscape) */ @media screen and (min-width: 320px) and (max-width: 480px) { /* Gespecifieerde stijlen */ } /* Tablets (portrait) */ @media screen and (max-width: 768px) { /* Gespecifieerde stijlen */ }
  116. Breekpunten Zijn browserbreedtes (viewports) die een media query declaratie hebben

    om de lay-out te veranderen eens de breedte van de browser in dat gedeclareerde gebied is. Breekpunten staan niet vast.
  117. Flexibele grids Zorgen ervoor dat breedtes en hoogtes van elementen

    niet in pixels worden bepaald, maar in relatieve eenheden als percentages en em's.
  118. Mobile first Is een ontwerpfilosofie waarvan men eerst voor kleinste

    scherm ontwerpt (bv. smartphone) en vervolgens de mogelijkheden opgeschaald worden naarmate de viewport groter wordt.
  119. Grid

  120. Desktop, tablet en mobile

  121. Front-end frameworks

  122. Bootstrap getbootstrap.com Foundation foundation.zurb.com

  123. Unsemantic unsemantic.com Skeleton getskeleton.com

  124. None
  125. HTML5 Shiv / HTML5 Shim HTML5 Shiv is een JavaScript

    workaround om HTML5 elementen in versies lager dan Internet Explorer 9 een stijl te geven. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> code.google.com/p/html5shim
  126. Validatie

  127. W3C Validator W3C Markup Validation Service validator.w3.org

  128. X-UA-Compatible Valideert niet! <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> Verstuur header over

    HTTP (in een .htaccess bestand). Header set X-UA-Compatible "IE=edge" 456bereastreet.com/archive/201103/x-ua-compatible_and_html5
  129. HTML5 en CSS3 vandaag

  130. Can I use... Compatibiliteitstabellen voor ondersteuning van HTML5, CSS3, SVG

    en meer in desktop en mobiele browsers. caniuse.com
  131. Vendor prefix CSS vendor prefixen of CSS browser prefixen zijn

    een manier voor browsers om ondersteuning aan nieuwe en/of experimentele CSS features te geven tijdens een overgangsperiode. button { -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
  132. HTML-editors

  133. Tekst HTML-editors Bluefish bluefish.openoffice.nl Brackets brackets.io Sublime Text sublimetext.com

  134. Wysiwyg HTML-editor BlueGriffon bluegriffon.org

  135. HTML-editor voor animaties Google Web Designer google.com/webdesigner

  136. Do websites...

  137. Do websites need to look exactly the same in every

    browser? NO! dowebsitesneedtolookexactlythesameineverybrowser.com
  138. Do websites need to be experienced exactly the same in

    every browser? Nope. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  139. None
  140. Dank u voor uw aandacht!

  141. Bronnen HTML5 for Web Designers (Jeremy Keith) CSS3 for Web

    Designers (Dan Cederholm) Wikipedia (www.wikipedia.org) W3 Schools (www.w3schools.com)