Ottava lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

1. HTML5 e Css3 [8]
Matteo Magni

2. E' Possibile?

3. Qualcono pensa di si...
Media Tags

4. Video
<video src="video/big_buck_bunny.mp4"/>
<video src="video/big_buck_bunny.ogv"/>

5. Native controls
<video
src="video/big_buck_bunny.mp4"
controls/>

6. More codecs
<video controls>
<source src="video/big_buck_bunny.mp4"/>
<source src="video/big_buck_bunny.ogv"/>
</video>

7. Audio
<audio
src="audio/ImmigrantSong.mp3"
controls/>

8. More Codecs
<audio controls>
<source src="audio/ImmigrantSong.mp3"
type='audio/mpeg; codecs="mp3"'>
<source src="audio/ImmigrantSong.ogg"
type='audio/ogg; codecs="vorbis"'>
</audio>

9. Browser support
Internet Explorer 9.0+ MP3, AAC
Chrome 6.0+ Ogg Vorbis, MP3, WAV†
Firefox 3.6+ Ogg Vorbis, WAV
Safari 5.0+ MP3, AAC, WAV
Opera 10.0+ Ogg Vorbis, WAV

10. Native Geolocation
http://dev.w3.org/geo/api/spec-source-v2
navigator.geolocation.getCurrentPosition(
function(position){
alert(position.coords.latitude);
alert(position.coords.longitude);
});

11. Geolocation
+
Google Maps
http://html5demos.com/

12. Canvas
Canvas è una estensione dell'HTML standard che
permette il rendering dinamico di immagini bitmap
gestibili attraverso un linguaggio di scripting
(wikipedia)

13. <canvas id="myCanvas" width="578"
height="200"></canvas>
<script>
var canvas =
document.getElementById('myCanvas'
);
var context =
canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>

14. Storage
● http://html5demos.com/storage
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
sistema alternativo ai normali cookie, chiamato
Web Storage, più efficiente, il quale consente un
notevole risparmio di banda;

15. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me