HTML5 a CSS3 v praxi

HTML5 a CSS3 v praxi

HTML5 – Už tam budeme?

HTML5 – Co s tím?

<audio> <video>

<video controls poster="image.png">
	<source src="video-small.mp4" 
		type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" 
		media="screen and (max-width:500px)" 
	/>
	<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
	<source src="video.ogv" type="video/ogg; codecs='theora, vorbis'"/>
	<source src="video.webm" type="video/webm; codecs='vp8, vorbis'" />
	<!-- embed flash jako fallback -->
</video>

<audio> <video> formáty

KlientWAVEMP3WebMOgg Vorbis / TheoraH264AACOpus
Firefox 3.5+✓✓✓
Firefox 15+✓✓✓✓
Chrome 9+✓✓✓✓
Safari 3+✓✓✓
Opera 10+✓✓
IE 9✓✓✓✓✓
iPhone / iPad✓✓✓
Android✓✓✓
Flash✓✓✓✓

<audio> <video> JS API

var a = new Audio("song.mp3");
a.canPlayType("audio/mpeg"); /* "", "maybe", "probably" */
a.play();

<canvas>

SVG

File API

/* první soubor vybraný uživatelem */
var file = document.getElementById("fileinput").files[0]; 

var reader = new FileReader();
reader.addEventListener("load", function() {  
	alert(reader.result);
});

reader.readAsDataURL(file);
/* readAsText(), readAsBinaryString(), readAsArrayBuffer() */

XMLHttpRequest 2

Application Cache

<html manifest="example.appcache">
CACHE MANIFEST

index.html
stylesheet.css
images/logo.png
scripts/main.js

localStorage

var saveGame = function() {
	localStorage.name = "player";
	localStorage.hitPoints = 7;
}
if (localStorage.name) { /* load */ }

navigator.geolocation

WebSockets

Media queries

@media screen and (min-height: 500px) { ... }
<link media="all and (max-device-width: 480px)" ... />

CSS selektory

a:checked, a:not(:target), img:nth-child(3n+2) { ... }

CSS transformace

@font-face

CSS efekty: stíny, oblé rohy, přechody

CSS transitions & animations

.anim li {
	-webkit-transition: padding 3s;
	-moz-transition: padding 3s;
	-o-transition: padding 3s;
	transition: padding 3s;
}

.anim li:nth-child(1):hover {
	padding-left: 50%;
}

Prostor pro otázky