Intro to HTML5

Intro to HTML5 ...because it seems to be catching on
leanmachine.se ▪ [email protected] ▪ 2013-09-06

HTML5 brings the native so!ware experience to the web. It
even allows you to make apps that work oﬀline... ... and use hardware acceleration for graphics.

What is HTML5? The 5th revision of HTML CSS3 New
JavaScript APIs + +

The 5th Revision of HTML

New semantic tags <article> <section> <header> <footer> <aside> <nav> <figure>
...

New semantic tags <article> <section> <header> <footer> <aside> <nav> <figure>
... Useful for you, as well as for search engines and aggregators

New tags for web apps <menu> <command> <datalist> <details> <summary>
... http://slides.html5rocks.com/#semantic-tags-2

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

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.

Some more fancy tags <video> <audio> <canvas> http://slides.html5rocks.com/#canvas-2d

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

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

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

<!DOCTYPE html> <html> <head></head> <body></body> </html> Simplified DOCTYPE

<!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:

<input type="text" x-webkit-speech> Bonus: Speech input!

border-radius: 4px; Border radius

border-radius: 50px; Border radius

box-shadow: 1px 1px 0px pink; Box shadow

box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box
shadow

Hello text-shadow: 1px 1px 0px pink; Hello Text shadow

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

background: url(image-1.jpg) no-repeat; background-size: 100% 100%; image-1.jpg -> Background sizing

#container #container { background: white; display: box; width: 900px; height:
400px; } Flexible Boxes

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

} #main { background: pink; width: 600px; } #right-col { background: green; } #container #main #right-col Flexible Boxes

} #main { background: pink; width: 600px; } #right-col { background: green; box-flex: 1; } #container #main #right-col Flexible Boxes

h1:before, h1:after { content: "*"; color: pink; } *Hello* Pseudo
elements

@font-face { font-family:'Lobster13'; src: url(Lobster13.otf); } h1 { font-family:'Lobster13'; }
H Web fonts

div { width: 100px; } div:hover { width: 800px; }
Transitions

div { width: 100px; transition: width 2s ease-in-out; } div:hover
{ width: 800px; } Transitions

div { transform: rotate(45deg); } Transforms Hi

Don’t forget vendor prefixes -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);

New JavaScript APIs

window.localStorage.setItem('name', 'Bob'); var name = window.localStorage.getItem('name'); Local Storage

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

Native drag-and-drop (even to/from desktop) http://www.html5rocks.com/en/tutorials/dnd/basics/

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

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

Canvas (2D and 3D with WebGL) http://diveintohtml5.info/canvas.html

var wally = document.getElementsById('wally'); var friends = document.getElementsByClassName('friend'); var wallysDivs
= wally.getElementsByTagName('div'); var friendsInFooter = document.querySelectorAll('footer .friend'); Selectors API

<audio id="audio" src="sound.mp3" controls></audio> // JavaScript document.getElementById("audio").muted
= false; Audio

<video id="video" src="movie.webm" autoplay controls></video> // JavaScript
document.getElementById("video").play(); Video

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

Useful links http://slides.html5rocks.com/ http://diveintohtml5.info/ http://caniuse.com/

leanmachine.se ▪ [email protected] ▪ 2013-09-06

Intro to HTML5

Intro to HTML5

More Decks by Lean Machine

Other Decks in Programming

Featured

Transcript