Top Banner
HTML5 e Css3 [8] Matteo Magni
15

HTML5 e Css3 - 8 | WebMaster & WebDesigner

May 12, 2015

Download

Technology

Matteo Magni

Ottava lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: HTML5 e Css3 - 8 | WebMaster & WebDesigner

HTML5 e Css3 [8]Matteo Magni

Page 2: HTML5 e Css3 - 8 | WebMaster & WebDesigner

E' Possibile?

Page 3: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Qualcono pensa di si...Media Tags

Page 4: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Video

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

Page 5: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Native controls

<video 

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

Page 6: HTML5 e Css3 - 8 | WebMaster & WebDesigner

More codecs

<video controls>

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

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

</video>

Page 7: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Audio

<audio 

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

Page 8: HTML5 e Css3 - 8 | WebMaster & WebDesigner

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>

Page 9: HTML5 e Css3 - 8 | WebMaster & WebDesigner

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

Page 10: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Native Geolocation

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

navigator.geolocation.getCurrentPosition(function(position){

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

});

Page 11: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Geolocation +

Google Maps

http://html5demos.com/

Page 12: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Canvas

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

gestibili attraverso un linguaggio di scripting (wikipedia)

Page 13: HTML5 e Css3 - 8 | WebMaster & WebDesigner

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

Page 14: HTML5 e Css3 - 8 | WebMaster & WebDesigner

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;

Page 15: HTML5 e Css3 - 8 | WebMaster & WebDesigner

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

[email protected]