HTML5 e Css3 - 8 | WebMaster & WebDesigner

HTML5 e Css3 [8]Matteo Magni

E' Possibile?

Qualcono pensa di si...Media Tags

Video

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

Native controls

<video 

src="video/big_buck_bunny.mp4" controls/>

More codecs

<video controls>

<source src="video/big_buck_bunny.mp4"/>

<source src="video/big_buck_bunny.ogv"/>

</video>

Audio

<audio 

src="audio/ImmigrantSong.mp3" controls/>

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>

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

Native Geolocation

http://dev.w3.org/geo/api/spec-source-v2

navigator.geolocation.getCurrentPosition(function(position){

alert(position.coords.latitude);alert(position.coords.longitude);

});

Geolocation +

Google Maps

http://html5demos.com/

Canvas

Canvas è una estensione dell'HTML standard che permette il rendering dinamico di immagini bitmap

gestibili attraverso un linguaggio di scripting (wikipedia)

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

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;

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me