HTML5 (Dutch)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 (Dutch)

on

  • 2,804 views

Er wordt al tijden veel over de nieuwe HTML 5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML 5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk ...

Er wordt al tijden veel over de nieuwe HTML 5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML 5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben we natuurlijk nog de vraag wat ik moet doen als ik tussen Silverlight en HTML 5 moet kiezen voor een nieuwe applicatie?

Statistics

Views

Total Views
2,804
Views on SlideShare
1,671
Embed Views
1,133

Actions

Likes
0
Downloads
5
Comments
0

7 Embeds 1,133

http://msmvps.com 1069
http://feeds.feedburner.com 44
http://html5support.nl 13
http://solver162.rssing.com 4
http://cc.bingj.com 1
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 (Dutch) Presentation Transcript

  • 1. Maurice de Beijer
  • 2. Waar gaan we het over hebben? Waarom? Wie beslist wat HTML 5 is? Hoe gaan browsers er mee om? Verschillende HTML 5 onderdelen
  • 3. Wie ben ik Maurice de Beijer. The Problem Solver. Microsoft CSD MVP. DevelopMentor instructor. Twitter: @mauricedb Blog: http://msmvps.com/blogs/ theproblemsolver/default.aspx Web: http://www.TheProblemSolver.nl E-mail: mauricedb@computer.org
  • 4. Waarom HTML 5 HTML is de meest verspreide UI technologie  Maar door browser verschillen lastig om mee te werken Minder bedrijven ondersteunen een enkel platform  Bring your own hardware  Smartphones en tablets ondersteunen geen plugins Men wil rijkere applicaties  Animaties  Communicatie  etc
  • 5. Wie gaat er eigenlijk over? De World Wide Web Consortium (W3C)  Was oorspronkelijk met XHTML2 bezig Web Hypertext Application Technology Working Group (WHATWG)  In 2004 begonnen uit onvrede met XHTML2 Vanaf 2009 samen bezig  Er wordt gewerkt aan “HTML The Living Standard” De W3C neemt een snapshot  Dat wordt HTML5
  • 6. Wanneer is het klaar? “The Web Hypertext Application Technology Working Group, expects HTML5 to reach W3C Candidate Recommendation Stage in 2012, and graduate to W3C Recommendation in 2022.”
  • 7. Wanneer is het klaar? “The Web Hypertext Application Technology Working Group, expects HTML5 to reach W3C Candidate Recommendation Stage in 2012, and graduate to W3C Recommendation in 2022.”
  • 8. Browsers Vraag niet welke browser HTML 5 ondersteunt  Geen enkele implementeert de hele standaard! Vraag welke browsers een bepaald deel implementeren  CanIUse.com En wat je kan doen met de overige browsers  HTML 5 Polyfills
  • 9. Modernizr “Modernizr is an open-source JavaScript librarythat helps you build the next generation of HTML5 and CSS3-powered websites.” http://www.modernizr.com/
  • 10. Polyfills “A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.”
  • 11. Maar welke browsers Yahoo Graded Browser Support http://browsershots.org/
  • 12. Google analytics - msmvps.org 762098 bezoekers laatste maand
  • 13. Google analytics - msmvps.org
  • 14. Onderwerpen Semantic markup Input elementen CSS3 Video & Audio Canvas Local storage Drag-Drop & File IO Geolocation Web Workers
  • 15. Semantic markup Het gaat om de data, niet hoe het er uit ziet! De meest gebruikte CSS classes bij <div> elementen  <div class=“nav”>  <div class=“section”>  <div class=“header”>  <div class=“footer”>  <div class=“article”>  <div class=“aside”>
  • 16. Semantic markup Nu zijn het HTML5 elementen  <nav>  <section>  <header>  <footer>  <article>  <aside>
  • 17. Input elementen De meeste data types moeten met: <input type="text" /> De browser kan helpen als het weet om wat voor data het gaat  search  url  number  datetime  Etc.
  • 18. Input elementen Softkeyboards passen zich aan
  • 19. CSS 3 Rounded corners .box {border-radius: 10px;} Drop shadows .box {box-shadow: 10px 5px 5px grey;} Gradients .box {background: linear-gradient(Yellow, Lime);} Multi column text article {column-count: 3; }
  • 20. CSS 3 Media queries @media screen and (max-width: 1024px) { aside { display: none; } } Transforms .box:hover {transform: scale(1.2);} Transitions .box {transition: transform 1s ease-in;}
  • 21. Video & Audio Er is een nieuw <video> en <audio> element Er is echter geen standaard encoding   OGV  WEBM  MP4 Meerdere <source> elementen opgeven  De browser kiest de eerste die werkt Zie Wikipedia voor browser ondersteuning
  • 22. Canvas Een vlak om op te tekenen  Op dit moment is er alleen een 2D context Primitives die je kunt tekenen  Lines  Rectangles  Arcs  Curves  Images  Paths
  • 23. Canvas De hele API wordt via JavaScript aangestuurd Zeer krachtig maar lastig om mee te werken  Er zijn nog niet veel tools Er is een AngryBirds versie mee gemaakt  http://chrome.angrybirds.com/
  • 24. Local storage - Web Storage Name – Value pair storage  Storage is per site  Het advies voor browsers is 5Mb max ruimte per site sessionStorage  Geldig gedurende de browser sessie localStorage  Blijft langer bestaan De value moet een string zijn! sessionStorage[data] = JSON.stringify({ value: 1 }); data = JSON.parse(sessionStorage[data]);
  • 25. Local storage - IndexDB Een object of NoSQL store in de database  Werkt alleen in Chrome en FireFox  Zie demo Er was een Web SQL Database  Is deprecated en vervangen door de IndexDB  Werkt nog wel in Webkit browsers (iOS)
  • 26. Drag-Drop Elementen verslepen in de browser  Ook files uit de Windows Explorer naar een HTML element Events voor  dragstart  dragenter  dragover  drop Argument bevat een dataTransfer object
  • 27. File IO File IO met een FileReader object File kan op verschillende manieren gelezen worden  readAsArrayBuffer()  readAsBinaryString()  readAsDataURL()  readAsText() Als de file gelezen is gaat het onload event af  De result property bevat de inhoud
  • 28. File IO Soms is een file te groot om helemaal te lezen Een Blob is een deel van een file  Met een file.slice() kan je een blob maken Een FileReader object kan ook met een blob werken
  • 29. Geolocation Waar is iemand?  Bijvoorbeeld om een location based search te doen De gebruiker moet toestemming geven Werkt zowel in desktop als mobiele browsers  Nauwkeurigheid kan sterk varieren Via het navigator object te vinden  navigator.geolocation.getCurrentPosition() De options ondersteunt enableHighAccuracy: true
  • 30. Geolocation De Position bevat minimaal  latitude  longitude  accuracy
  • 31. Web Workers JavaScript mag niet te lang duren van de browser Via een Worker() object kan een JavaScript file in de achtergrond gestart worden  Kan wel langer duren
  • 32. Web Workers Web Workers zijn beperkt in wat ze mogen doen  Niets met het document Mogen wel IO doen  XMLHttpRequest  FileReader  importScripts() Document kan berichten met worker uitwisselen  postMessage()  onmessage callback functie wordt aangeroepen Alle data wordt gekloond
  • 33. Conclusie HTML 5 heeft een grote toekomst  Get is de enige platform onafhankelijke UI techniek  Zelfs binnen Windows 8 is het belangrijk Diverse browsers ondersteunen verschillende onderdelen  Gebruik feature detection om te zien wat wel en niet  Gebruik polyfills om ontbrekende stukken aan te vullen Je hoeft niet te wachten tot het klaar is  Begin nu en maak betere web applicaties