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

HTML/CSS

 HTML/CSS

Workshop HTML/CSS bij Digipinguïns

Desikner

June 03, 2014
Tweet

More Decks by Desikner

Other Decks in Technology

Transcript

  1. 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).
  2. 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.
  3. 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)
  4. 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>
  5. 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
  6. 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>
  7. 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>
  8. Placeholder Plaatst tekst in een veld. <label for=”hobbies”>Uw hobbies</label> <input

    id=”hobbies” name=”hobbies” type=”text” placeholder=”bv. Vogels kijken”>
  9. Required Verplicht u om het veld in te vullen. <label

    for=”wachtwoord”>Uw wachtwoord</label> <input id=”wachtwoord” name=”wachtwoord” type=”password” required>
  10. Autofocus Plaatst cursor in een veld. <label for=”nieuws”>Deel uw laatste

    nieuws ...</label> <input id=”nieuws” name=”nieuws” type=”text” autofocus>
  11. 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>
  12. 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”>
  13. Het type attribuut wordt uitgebreid in HTML5. Indien niet ondersteunt

    door browser gedraagt het zich als een tekst-veld.
  14. 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”>
  15. 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>
  16. Meter Iets dat al gemeten is. <meter>9 van de 10

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

    profiel is <progress>60 %</progress> compleet. <progress min=”0” max=”100” value=”60”></progress>
  18. Header Bevat inleidende inhoud of navigatie. <section> <header> <h1>Een mooie

    presentatie</h1> </header> <p>De presentatie over HTML5.</p> </section>
  19. 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>
  20. 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.
  21. 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.
  22. 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.
  23. CSS

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

    van webpagina's los te koppelen van hun feitelijke inhoud. csszengarden.com
  25. 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).
  26. Microsoft Internet Explorer 5.0 voor MacIntoch was in 2000 eerste

    browser met volledige CSS1 ondersteuning.
  27. 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
  28. 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>
  29. 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; }
  30. 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); }
  31. Voor transformaties in 3D. div { transform: rotateY(130deg); } div

    { transform: scale3d(0.5, -0.5, 1.5); } div { transform: perspective(600px); }
  32. 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; }
  33. 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); }
  34. 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; }
  35. 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" />
  36. 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 */ }
  37. 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.
  38. Flexibele grids Zorgen ervoor dat breedtes en hoogtes van elementen

    niet in pixels worden bepaald, maar in relatieve eenheden als percentages en em's.
  39. 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.
  40. 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
  41. 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
  42. Can I use... Compatibiliteitstabellen voor ondersteuning van HTML5, CSS3, SVG

    en meer in desktop en mobiele browsers. caniuse.com
  43. 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; }
  44. Do websites need to look exactly the same in every

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

    every browser? Nope. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  46. Bronnen HTML5 for Web Designers (Jeremy Keith) CSS3 for Web

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