HTML5, door Dennis Vroegop op de 4DotNet Developers Day

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


HTML51991: HTML1994: HTML21996: css1 + JavaScript1997: HTML41998: css22000: XHTML2002: Table-loos design2005: AJAX2009: HTML5


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>


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....” />


Audio en VideoLet op codecs!Niet alles wordt overal ondersteund<audio id=“audio” src=“audio.mp3”

controls><video id=“video” src=“movie.webm”

autoplay>


Inline SVGVector based graphics


StorageWindow.localStorage.setItem(‘key’,

‘value’)

textArea.value = window.localStorage.getItem(‘key’);


SocketsVar socket = new

WebSocket(‘ws://destrato.com/echo’);Socket.onopen = function(event) {

socket.send(‘tekst’);};Socket.onmessage = function(event) {

window.alert(event.data);}


Web WorkersVar worker = new

Worker(‘myThread.js’);Worker.onmessage = function(event) {

alert(event.data);}Worker.postMessage(‘data’);


Drag ‘n Dropdocument.addEventListener('dragstart'

, function(event) { event.dataTransfer.setData('text', ‘mijn tekst'); event.dataTransfer.effectAllowed = 'copy'; }, false);


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);


Form elementen<input type=“”/>


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))


Transforms-webkit-transform: rotateY(45deg);-webkit-transform:perspective(200px);-webkit-transform:scaleX(25);


Transitions-webkit-transition: opacity 1s ease-in-

out


CanvasTekenen op het formOok 3D


Conway’s LifeDemo


Conclusie


Q&AAls ik iets vergeten ben…


Bedankt!


[email protected]: @dvroegophttp://blogs.vroegop.org http://www.dotned.nl


Technology

HTML5, door Dennis Vroegop op de 4DotNet Developers Day