Slide 1
Slide 1 text
Intro to HTML5
...because it seems to be catching on
leanmachine.se ▪ [email protected] ▪ 2013-09-06
Slide 2
Slide 2 text
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.
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
What is HTML5?
The 5th
revision of
HTML
CSS3
New
JavaScript
APIs
+ +
Slide 5
Slide 5 text
The 5th Revision of HTML
Slide 6
Slide 6 text
New semantic tags
...
Slide 7
Slide 7 text
New semantic tags
...
Useful for you, as well as for search
engines and aggregators
Slide 8
Slide 8 text
New tags for web apps
...
http://slides.html5rocks.com/#semantic-tags-2
Slide 9
Slide 9 text
New input types
...
http://slides.html5rocks.com/#new-form-types
Slide 10
Slide 10 text
New input types
...
http://slides.html5rocks.com/#new-form-types
On mobile they bring
up the most “useful”
keyboard mode.
Slide 11
Slide 11 text
Some more fancy tags
http://slides.html5rocks.com/#canvas-2d
Slide 12
Slide 12 text
Some more fancy tags
Used for advanced dynamic
graphics rendering. Kind of like
Flash but written in JavaScript.
http://slides.html5rocks.com/#canvas-2d
Slide 13
Slide 13 text
Self-closing tags
Optional to close:
...
Forbidden to close (“void tags”):
![]()
...
...
Slide 14
Slide 14 text
Self-closing tags
Optional to close:
...
Forbidden to close (“void tags”):
![]()
...
...
Slide 15
Slide 15 text
Inline SVG
Slide 16
Slide 16 text
Simplified DOCTYPE
Slide 17
Slide 17 text
Simplified DOCTYPE
Compare with HTML 4.01:
Slide 18
Slide 18 text
Bonus: Speech input!
Slide 19
Slide 19 text
CSS3
Slide 20
Slide 20 text
border-radius: 4px;
Border radius
Slide 21
Slide 21 text
border-radius: 50px;
Border radius
Slide 22
Slide 22 text
box-shadow: 1px 1px 0px pink;
Box shadow
Slide 23
Slide 23 text
box-shadow: 1px 1px 0px pink, -1px -1px 0px green;
Box shadow
Slide 24
Slide 24 text
Hello
text-shadow: 1px 1px 0px pink;
Hello
Text shadow
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
background: url(image-1.jpg) no-repeat;
background-size: 100% 100%;
image-1.jpg ->
Background sizing
Slide 27
Slide 27 text
#container
#container {
background: white;
display: box;
width: 900px;
height: 400px;
}
Flexible Boxes
Slide 28
Slide 28 text
#container {
background: white;
display: box;
width: 900px;
height: 400px;
}
#main {
background: pink;
}
#right-col {
background: green;
}
#container
#main #right-col
Flexible Boxes
Slide 29
Slide 29 text
#container {
background: white;
display: box;
width: 900px;
height: 400px;
}
#main {
background: pink;
width: 600px;
}
#right-col {
background: green;
}
#container
#main #right-col
Flexible Boxes
Slide 30
Slide 30 text
#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
Slide 31
Slide 31 text
h1:before, h1:after {
content: "*";
color: pink;
}
*Hello*
Pseudo elements
Slide 32
Slide 32 text
@font-face {
font-family:'Lobster13';
src: url(Lobster13.otf);
}
h1 {
font-family:'Lobster13';
}
H
Web fonts
Slide 33
Slide 33 text
div {
width: 100px;
}
div:hover {
width: 800px;
}
Transitions
Slide 34
Slide 34 text
div {
width: 100px;
}
div:hover {
width: 800px;
}
Transitions
Slide 35
Slide 35 text
div {
width: 100px;
transition: width 2s ease-in-out;
}
div:hover {
width: 800px;
}
Transitions
Slide 36
Slide 36 text
div {
width: 100px;
transition: width 2s ease-in-out;
}
div:hover {
width: 800px;
}
Transitions
Slide 37
Slide 37 text
div {
transform: rotate(45deg);
}
Transforms
Hi
Slide 38
Slide 38 text
Don’t forget vendor prefixes
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
Slide 39
Slide 39 text
New JavaScript APIs
Slide 40
Slide 40 text
window.localStorage.setItem('name', 'Bob');
var name = window.localStorage.getItem('name');
Local Storage
Slide 41
Slide 41 text
Application Cache
...
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();
}
}
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
Native drag-and-drop
(even to/from desktop)
http://www.html5rocks.com/en/tutorials/dnd/basics/
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
Canvas (2D and 3D with WebGL)
http://diveintohtml5.info/canvas.html
Slide 47
Slide 47 text
var wally = document.getElementsById('wally');
var friends = document.getElementsByClassName('friend');
var wallysDivs = wally.getElementsByTagName('div');
var friendsInFooter = document.querySelectorAll('footer .friend');
Selectors API
Slide 48
Slide 48 text
// JavaScript
document.getElementById("audio").muted = false;
Audio
Slide 49
Slide 49 text
// JavaScript
document.getElementById("video").play();
Video
Slide 50
Slide 50 text
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);
});
Slide 51
Slide 51 text
Useful links
http://slides.html5rocks.com/
http://diveintohtml5.info/
http://caniuse.com/