Intro to HTML5

1. Intro to HTML5 ...because it seems to be catching on leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06
2. HTML5 brings the native so!ware experience to the web. It even allows you to make apps that work offline... ... and use hardware acceleration for graphics.
4. What is HTML5? The 5th revision of HTML CSS3 New JavaScript APIs + +
5. The 5th Revision of HTML
6. New semantic tags <article> <section> <header> <footer> <aside> <nav> <figure> ...
7. New semantic tags <article> <section> <header> <footer> <aside> <nav> <figure> ... Useful for you, as well as for search engines and aggregators
8. New tags for web apps <menu> <command> <datalist> <details> <summary> ... http://slides.html5rocks.com/#semantic-tags-2
9. New input types <input type="email"> <input type="url"> <input type="date"> <input type="time"> <input type="color"> <input type="range"> <input type="tel"> ... http://slides.html5rocks.com/#new-form-types
10. New input types <input type="email"> <input type="url"> <input type="date"> <input type="time"> <input type="color"> <input type="range"> <input type="tel"> ... http://slides.html5rocks.com/#new-form-types On mobile they bring up the most “useful” keyboard mode.
11. Some more fancy tags <video> <audio> <canvas> http://slides.html5rocks.com/#canvas-2d
12. Some more fancy tags <video> <audio> <canvas> Used for advanced dynamic graphics rendering. Kind of like Flash but written in JavaScript. http://slides.html5rocks.com/#canvas-2d
13. Self-closing tags Optional to close: <html> <head> <body> <p> <li> <option> <thead> <th> <tbody> <tr> <td> <tfoot>... Forbidden to close (“void tags”): <br> <img> <input> <col> <command> <hr> <keygen> <link> <meta>...
14. Self-closing tags Optional to close: <html> <head> <body> <p> <li> <option> <thead> <th> <tbody> <tr> <td> <tfoot>... Forbidden to close (“void tags”): <br> <img> <input> <col> <command> <hr> <keygen> <link> <meta>...
15. Inline SVG <svg xmlns="http://www.w3.org/2000/svg"> <circle id="greencircle" cx="30" cy="30" r="30" fill="green" /> </svg> <img src="green-circle.svg" height="64" alt="Nice green circle">
16. <!DOCTYPE html> <html> <head></head> <body></body> </html> Simplified DOCTYPE
17. <!DOCTYPE html> <html> <head></head> <body></body> </html> Simplified DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Compare with HTML 4.01:
18. <input type="text" x-webkit-speech> Bonus: Speech input!
19. CSS3
20. border-radius: 4px; Border radius
21. border-radius: 50px; Border radius
22. box-shadow: 1px 1px 0px pink; Box shadow
23. box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box shadow
24. Hello text-shadow: 1px 1px 0px pink; Hello Text shadow
25. background: url(image-2.jpg) 0 0 no-repeat, url(image-1.jpg) 100% 0 no-repeat; image-1.jpg -> <- image-2.jpg Multiple backgrounds
26. background: url(image-1.jpg) no-repeat; background-size: 100% 100%; image-1.jpg -> Background sizing
27. #container #container { background: white; display: box; width: 900px; height: 400px; } Flexible Boxes
28. #container { background: white; display: box; width: 900px; height: 400px; } #main { background: pink; } #right-col { background: green; } #container #main #right-col Flexible Boxes
29. #container { background: white; display: box; width: 900px; height: 400px; } #main { background: pink; width: 600px; } #right-col { background: green; } #container #main #right-col Flexible Boxes
30. #container { background: white; display: box; width: 900px; height: 400px; } #main { background: pink; width: 600px; } #right-col { background: green; box-flex: 1; } #container #main #right-col Flexible Boxes
31. h1:before, h1:after { content: "*"; color: pink; } *Hello* Pseudo elements
32. @font-face { font-family:'Lobster13'; src: url(Lobster13.otf); } h1 { font-family:'Lobster13'; } H Web fonts
33. div { width: 100px; } div:hover { width: 800px; } Transitions
34. div { width: 100px; } div:hover { width: 800px; } Transitions
35. div { width: 100px; transition: width 2s ease-in-out; } div:hover { width: 800px; } Transitions
36. div { width: 100px; transition: width 2s ease-in-out; } div:hover { width: 800px; } Transitions
37. div { transform: rotate(45deg); } Transforms Hi
38. Don’t forget vendor prefixes -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
39. New JavaScript APIs
40. window.localStorage.setItem('name', 'Bob'); var name = window.localStorage.getItem('name'); Local Storage
41. Application Cache <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> demo.appcache: CACHE MANIFEST /theme.css /logo.gif /main.js ... var appCache = window.applicationCache; appCache.update(); // Attempt to update the user's cache. ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // The fetch was successful, swap in the new cache. if (confirm('A new version of this site is available. Load it?')) { window.location.reload(); } }
42. var socket = new WebSocket('ws://html5rocks.websocket.org/echo'); socket.onopen = function(event) { socket.send('Hello, WebSocket'); }; socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert('closed'); } WebSocket
43. Native drag-and-drop (even to/from desktop) http://www.html5rocks.com/en/tutorials/dnd/basics/
44. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map: map}); map.setCenter(latLng); }, errorHandler); } Geolocation
45. window.addEventListener('deviceorientation', function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma; }, false); Device orientation http://slides.html5rocks.com/#slide-orientation
46. Canvas (2D and 3D with WebGL) http://diveintohtml5.info/canvas.html
47. var wally = document.getElementsById('wally'); var friends = document.getElementsByClassName('friend'); var wallysDivs = wally.getElementsByTagName('div'); var friendsInFooter = document.querySelectorAll('footer .friend'); Selectors API
48. <!-- HTML --> <audio id="audio" src="sound.mp3" controls></audio> // JavaScript document.getElementById("audio").muted = false; Audio
49. <!-- HTML --> <video id="video" src="movie.webm" autoplay controls></video> // JavaScript document.getElementById("video").play(); Video
50. History API link.addEventListener('click', function(event) { event.preventDefault(); history.pushState({url: this.href}, null, this.href); goToPage(this.href); }); window.addEventListener('popstate', function(event) { goToPage(event.state.url); });
51. Useful links http://slides.html5rocks.com/ http://diveintohtml5.info/ http://caniuse.com/
52. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06