1 / 27

HTML5 miniworkshop

HTML5 miniworkshop. Kim van Dessel – Niels de Blaauw – Noraly Oonk. Intro. Kim van Dessel – Niels de Blaauw – Noraly Oonk. HTML. CSS. content. presentatie. Kim van Dessel – Niels de Blaauw – Noraly Oonk. HTML 2.0. HTML 3.2. HTML 4.0. XHTML 1.0. HTML 5.0. HTML 4.0. HTML.

cora
Download Presentation

HTML5 miniworkshop

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. HTML5 miniworkshop Kim van Dessel – Niels de Blaauw – Noraly Oonk

  2. Intro Kim van Dessel – Niels de Blaauw – Noraly Oonk

  3. HTML CSS content presentatie Kim van Dessel – Niels de Blaauw – Noraly Oonk

  4. HTML 2.0 HTML 3.2 HTML 4.0 XHTML 1.0 HTML 5.0 HTML 4.0 HTML HTML 5.0 CSS 1.0 CSS 2.0 CSS 2.0 CSS 3.0 1993 1995 1997 2000 2001 2007 heden Kim van Dessel – Niels de Blaauw – Noraly Oonk

  5. HTML5 De nieuwe elementen Kim van Dessel – Niels de Blaauw – Noraly Oonk

  6. Structuur HTML4.0 HTML5.0 <header> <divid=“header”> <nav> <divid=“nav”> <aside> <section> <divid=“side”> <divid=“section”> <article> <divid=“article”> <footer> <divid=“footer”> Kim van Dessel – Niels de Blaauw – Noraly Oonk

  7. Figuur Het makkelijk implementeren van Beeld, muziek of fotomateriaal. Figuur Content [img, Q, Video etc] Legenda Kim van Dessel – Niels de Blaauw – Noraly Oonk

  8. HTML5 doctype De doctype in HTML5 is makkelijker dan ooit. <!DOCTYPE html> Kim van Dessel – Niels de Blaauw – Noraly Oonk

  9. HTML5 html openen HTML open was altijd vrij omstreden, dit is ook aanzienlijk vereenvoudigd. <htmlxmlns=http”// www.w3.org/1999/xhtml> <html> Kim van Dessel – Niels de Blaauw – Noraly Oonk

  10. ‘ NIEUWE API S Kim van Dessel – Niels de Blaauw – Noraly Oonk

  11. Drag en Drop Api Met de drag en drop api kunnen er elementen van de ene plaats naar de andere plaats gesleept worden. Kim van Dessel – Niels de Blaauw – Noraly Oonk

  12. getElementbyClassName Je kunt elementen die dezelfde class hebben als compleet element/array opslaan. Dit maakt de performance van de website een stuk beter. Kim van Dessel – Niels de Blaauw – Noraly Oonk

  13. Cross document messaging Binnen HTML5 kunnen documenten op verschillende domeinen toch met elkaar communiceren. Main document Uitwendig IFRAME Kim van Dessel – Niels de Blaauw – Noraly Oonk

  14. Canvas Met deze API kan er direct in de browser getekend worden. de vormen zijn in vector en kunnen als een soort Flash geanimeerd worden. <canvas id=“canvas” width=“150 height=“150”> fallback content </canvas> function draw(){ var canvas = document.getElementById(“canvas”); if (canvas.getContext){ var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0, 200, 0.5)”; ctx.fillRect (30, 30, 55, 50); } } Kim van Dessel – Niels de Blaauw – Noraly Oonk

  15. CSS3 Kim van Dessel – Niels de Blaauw – Noraly Oonk

  16. Transparantie De opacity kan benoemd worden met een waarde tussen 1 en 0 wat staat voor een percentage van 100% tot 0 %. div {color: #f00; opacity: 1.0;} div {color: #f00; opacity: 0.5;} Kim van Dessel – Niels de Blaauw – Noraly Oonk

  17. RGBA kleur In CSS3 kan ook RGB benoemd worden met als vierde waarde de alpha color. div {color: rgb(0,255,0);} div {color: rgba(0,255,0,0.5);} Kim van Dessel – Niels de Blaauw – Noraly Oonk

  18. Meerdere background-images In CSS3 is het mogelijk om meerdere backgroundimages te gebruiken. background: url(body-top.png) top leftno-repeat, url(body-bottom.png) bottomleftno-repeat, url(body-middle.png) leftrepeat-y; Kim van Dessel – Niels de Blaauw – Noraly Oonk

  19. Kolom wijdte en kolom tussenruimte Je kunt de tekst makkelijk opmaken in een kolommen lay-out. column-width: 200px; column-gap: 20px; Loremipsumdolorsitamet, consecteturadipiscingelit. Vivamustinciduntpurussitametdiamconvallis at rutrum ante tempus. Pellentesqueegetultricies tellus. Vestibulum ut bibendum Loremipsumdolorsitamet, consecteturadipiscingelit. Vivamustinciduntpurussitametdiamconvallis at rutrum ante tempus. Pellentesqueegetultricies tellus. Vestibulum ut bibendum Kim van Dessel – Niels de Blaauw – Noraly Oonk

  20. Rotate Het roteren van een object. transform: rotate(30deg); Kim van Dessel – Niels de Blaauw – Noraly Oonk

  21. Scale Het schalen van een object. transform: scale(0.5,2.0); Kim van Dessel – Niels de Blaauw – Noraly Oonk

  22. Skew Een zijde van het vlak verleggen. transform: skew(-30deg); Kim van Dessel – Niels de Blaauw – Noraly Oonk

  23. De workshop Kim van Dessel – Niels de Blaauw – Noraly Oonk

  24. Deel 1 Puzzelen met website onderdelen. Kim van Dessel – Niels de Blaauw – Noraly Oonk

  25. Deel 2 Opplakken gepuzzeld ontwerp. Kim van Dessel – Niels de Blaauw – Noraly Oonk

  26. Deel 3 Ontwerp vertalen naar HTML5 met behulp van een template. Kim van Dessel – Niels de Blaauw – Noraly Oonk

  27. Einde Kim van Dessel – Niels de Blaauw – Noraly Oonk

More Related