A review of the state of the fast-moving HTML5, CSS3, and JavaScript landscape, how these exciting new technologies are being implemented in browsers today, and a glimpse of some of the things we can look forward to in coming years.
James Pearce heads developer relations at Sencha. He is a technologist, writer, developer and practitioner, who has been working with the mobile web for over a decade. Previously he was the CTO at dotMobi and has a background in mobile startups, telecoms infrastructure and management consultancy. James is the creator of tinySrc, the WordPress Mobile Pack, WhitherApps, modernizr-server and confess.js, and has written books on mobile web development for both Wiley and Wrox.
27. Progress and meters
<progress max="10"></progress>
<progress max="10" value="6"></progress>
Thursday, November 3, 11
28. Progress and meters
<meter max="10" value="7"></meter>
<meter min="5" max="10" value="7"></meter>
Thursday, November 3, 11
29. Progress and meters
<meter max="10" high="8" value="1"></meter>
<meter max="10" high="8" value="9"></meter>
Thursday, November 3, 11
30. Data Attributes
<div id='el' data-smell='fish'></div>
<script>
var el = document.getElementById('el');
console.log(el.dataset);
</script>
Thursday, November 3, 11
31. Data Attributes
<script>
el.dataset.generalAppearance = 'slimy';
console.log(el.outerHTML);
</script>
Thursday, November 3, 11
32. Contenteditable
<div contenteditable=""></div>
Thursday, November 3, 11
35. Video
<video width="320" height="240" controls="">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Thursday, November 3, 11
36. Audio
<audio autoplay="" controls="">
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
Thursday, November 3, 11
38. Web Sockets
var socket = new WebSocket(
'ws://echo.websocket.org'
);
socket.onopen = function(e) {
socket.send('Echo... echo...');
};
socket.onmessage = function(e) {
console.log(e.data);
};
Thursday, November 3, 11
39. Server-sent Events
var source = new EventSource('/status.php');
source.onmessage = function (e) {
console.log(e.data);
};
data: My messagenn
data: Line 1n
data: Line 2nn
Thursday, November 3, 11