Post on 13-Jun-2015
4DotNet Developers Day
Sessie over HTML5 door Dennis Vroegop
(c) 2011 Dennis Vroegop
HTML5Het nieuwe web?
Over mij…Dennis VroegopProgrammeer sinds 1981
(professioneel sinds 1992)Voorzitter dotNedMicrosoft Surface MVP
(c) 2011 Dennis Vroegop
HTML51991: HTML1994: HTML21996: css1 + JavaScript1997: HTML41998: css22000: XHTML2002: Table-loos design2005: AJAX2009: HTML5
(c) 2011 Dennis Vroegop
Semantiek<body>
<header><hgroup>
<h1>Titel</h1><h2>subtitel</h2>
</hgroup></header>
<nav><ul>
<li>item</li></ul>
</nav><section>
<article><header>
<h1>titel</h1></header><section>
Item blabla bla</section>
</article><article>
</section>
(c) 2011 Dennis Vroegop
Link descriptions<link rel=“alternate”
href=http://rss.xml/><link rel=“icon” href=“/facicon.ico” /><link rel=“pingback”
href=“http://...”/>
<a rel=“external” href=“http://...”/><a rel=“license”
href=http://license...”/><a rel=“tag” href=“http://tags....” />
(c) 2011 Dennis Vroegop
Audio en VideoLet op codecs!Niet alles wordt overal ondersteund<audio id=“audio” src=“audio.mp3”
controls><video id=“video” src=“movie.webm”
autoplay>
(c) 2011 Dennis Vroegop
Inline SVGVector based graphics
(c) 2011 Dennis Vroegop
StorageWindow.localStorage.setItem(‘key’,
‘value’)
textArea.value = window.localStorage.getItem(‘key’);
(c) 2011 Dennis Vroegop
SocketsVar socket = new
WebSocket(‘ws://destrato.com/echo’);Socket.onopen = function(event) {
socket.send(‘tekst’);};Socket.onmessage = function(event) {
window.alert(event.data);}
(c) 2011 Dennis Vroegop
Web WorkersVar worker = new
Worker(‘myThread.js’);Worker.onmessage = function(event) {
alert(event.data);}Worker.postMessage(‘data’);
(c) 2011 Dennis Vroegop
Drag ‘n Dropdocument.addEventListener('dragstart'
, function(event) { event.dataTransfer.setData('text', ‘mijn tekst'); event.dataTransfer.effectAllowed = 'copy'; }, false);
(c) 2011 Dennis Vroegop
OS Drag ‘n Dropdocument.querySelector('#drop').addE
ventListener('drop', function(e) { var reader = new FileReader(); reader.onload = function(evt) { document.querySelector('img').src = evt.target.result; }; reader.readAsDataURL(e.dataTransfer.files[0]); }, false);
(c) 2011 Dennis Vroegop
Form elementen<input type=“”/>
(c) 2011 Dennis Vroegop
CSSTekst wrapping
text-overflow: ellipsisColumns
-webkit-column-count: 2Rounded borders
border-radius: 5px;Gradients:
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(yellow), color-stop(0.5, white), color-stop(0.8, red))
(c) 2011 Dennis Vroegop
Transforms-webkit-transform: rotateY(45deg);-webkit-transform:perspective(200px);-webkit-transform:scaleX(25);
(c) 2011 Dennis Vroegop
Transitions-webkit-transition: opacity 1s ease-in-
out
(c) 2011 Dennis Vroegop
CanvasTekenen op het formOok 3D
(c) 2011 Dennis Vroegop
Conway’s LifeDemo
(c) 2011 Dennis Vroegop
Conclusie
(c) 2011 Dennis Vroegop
Q&AAls ik iets vergeten ben…
(c) 2011 Dennis Vroegop
Bedankt!
(c) 2011 Dennis Vroegop
Contactdennis@vroegop.orgTwitter: @dvroegophttp://blogs.vroegop.org http://www.dotned.nl
(c) 2011 Dennis Vroegop