Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to HTML5

Erik Frisk
September 05, 2013

Intro to HTML5

Erik Frisk

September 05, 2013
Tweet

More Decks by Erik Frisk

Other Decks in Programming

Transcript

  1. 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.
  2. New semantic tags <article> <section> <header> <footer> <aside> <nav> <figure>

    ... Useful for you, as well as for search engines and aggregators
  3. New tags for web apps <menu> <command> <datalist> <details> <summary>

    ... http://slides.html5rocks.com/#semantic-tags-2
  4. 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
  5. 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.
  6. 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
  7. 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>...
  8. 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>...
  9. 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">
  10. <!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:
  11. #container { background: white; display: box; width: 900px; height: 400px;

    } #main { background: pink; } #right-col { background: green; } #container #main #right-col Flexible Boxes
  12. #container { background: white; display: box; width: 900px; height: 400px;

    } #main { background: pink; width: 600px; } #right-col { background: green; } #container #main #right-col Flexible Boxes
  13. #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
  14. 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(); } }
  15. 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
  16. 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
  17. 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
  18. var wally = document.getElementsById('wally'); var friends = document.getElementsByClassName('friend'); var wallysDivs

    = wally.getElementsByTagName('div'); var friendsInFooter = document.querySelectorAll('footer .friend'); Selectors API
  19. 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); });