HTML5 Overview
Upcoming SlideShare
Loading in...5
×
 

HTML5 Overview

on

  • 3,683 views

 

Statistics

Views

Total Views
3,683
Views on SlideShare
1,868
Embed Views
1,815

Actions

Likes
0
Downloads
12
Comments
0

9 Embeds 1,815

http://msmvps.com 1086
http://www.scoop.it 682
http://feeds.feedburner.com 21
http://html5support.nl 15
http://www.html5support.nl 5
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 2
http://www.dataclips.com 1
http://tip.gr 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 Overview HTML5 Overview Presentation Transcript

  • Maurice de Beijer
  • Waar gaan we het over hebben? Waarom HTML5? Wie beslist wat HTML5 is? Hoe gaan browsers er mee om? Verschillende HTML5 onderdelen
  • Wie ben ik Maurice de Beijer. The Problem Solver. Microsoft CSD MVP. DevelopMentor instructor. Twitter: @mauricedb of @HTML5Support Blog: http://msmvps.com/blogs/ theproblemsolver/default.aspx Web: http://www.HTML5Support.nl E-mail: mauricedb@computer.org
  • Waarom HTML5 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
  • 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
  • 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.”
  • 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.”
  • Hoe zit het met de browsers? Yahoo Graded Browser Support
  • Google analytics - msmvps.org 762098 bezoeken laatste maand
  • Google analytics - msmvps.org
  • Wat werkt in welke browser? CanIUse.com
  • Modernizr “Modernizr is an open-source JavaScript librarythat helps you build the next generation of HTML5 and CSS3-powered websites.” http://www.modernizr.com/
  • Polyfills “A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.”
  • Google Chrome Frame Gebruik Google Chrome binnen Internet Explorer 6 of hoger Wordt alleen gebruikt als er specifiek om gevraagd wordt  Kan ook voor specifieke versies van IE <meta http-equiv="X-UA-Compatible" content="chrome=1"> Doet niets als Chrome Frame niet geinstalleerd is.
  • Onderwerpen Semantic markup Input elementen CSS3 Video & Audio Canvas Local storage Drag-Drop & File IO Geolocation Web Workers Offline Web applications Server Sent Events & WebSockets
  • 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”>
  • Semantic markup Nu zijn het HTML5 elementen  <nav>  <section>  <header>  <footer>  <article>  <aside>
  • 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.
  • Input elementen Softkeyboards passen zich aan http://bit.ly/InputElements
  • 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; }
  • 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;}
  • 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
  • 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
  • Canvas De hele API wordt via JavaScript aangestuurd Zeer krachtig maar lastig om mee te werken  Er zijn nog niet veel tools  Adobe® Illustrator® plugin  Leonardo Sketch Er is een AngryBirds versie mee gemaakt  http://chrome.angrybirds.com/
  • 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]);
  • Local storage - IndexedDB 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 IndexedDB  Werkt nog wel in Webkit browsers (iOS)
  • 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
  • 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
  • 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
  • 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
  • Geolocation De Position bevat minimaal  latitude  longitude  accuracy
  • 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
  • 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
  • Offline Web Applications Een web app kan ook draaien zonder dat er een netwerk verbinding is Via een cache manifest wordt er bepaald wat voor offline beschikt is De cached resources komen altijd uit de cache  Het manifest wordt gebruikt om de cache bij te werken  Dit gebeurt pas nadat de pagina getoond is  Alleen als de inhoud van het manifest anders is
  • Offline Web Applications Manifest bevat secties voor:  Cache (default)  Network  Fallback Het manifest moet het juiste mime type hebben: text/cache-manifest
  • Server Sent Events Push communicatie van de Server naar de browser  Gebruik standaard technieken om data naar de server te sturen. Alles is gewoon HTTP verkeer  Is eigenlijk gewoon long polling  Pas op met verbindingen die te lang open blijven (30 seconden to max 2 minuten)
  • Server Sent Events EventSource object  Functies:  close()  Events  onmessage  onopen  onerror  Gaat ook af als de verbinding gesloten wordt
  • WebSockets Duplex communictatie tussen de browser en de server Geen HTTP verkeer  Begint wel als HTTP verkeer  Server doet een upgrade naar WS dmv een “101 Switching Protocols” response Ondersteuning is nog beperkt  Alleen Chrome en FireFox (met prefix)
  • WebSockets WebSocket object  Functies:  send() om data te sturen  Kan ook binary data zijn!  close()  Events voor als er wat gebeurt  onmessage  onopen  onclose  onerror
  • Conclusie HTML 5 heeft een grote toekomst  Het 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