Per quanto riguarda la grafica ho cercato di fare una cosa molto semplice e caratterizzata da un menù di navigazione verticale fisso.  Come sfondo ho usato un immagine a tutto schermo che ho “drogato” con un div sovrapposto, della stessa grandezza della pagina, con un pattern che crea una sorta di “griglia” sovrapposta. Questo stratagemma, oltre a creare un bell’effetto grafico, mi permette anche di utilizzare immagini di qualità inferiore (e quindi peso inferiore) senza sacrificare troppo la resa visiva.

Il logo è stato creato utilizzando una texture ramata e del semplice  testo. La stessa texture, inscurita, l’ho utilizzata sia per lo sfondo del menu di navigazione sia per lo sfondo delle pagine.

Le varie pagine sono in realtà “categorie” di wordpress che ho usato per raccogliere e visualizzare tutti i prodotti inseriti a catalogo. La struttura è sempre la stessa per ogni pagina: al layout della home ho aggiunto un riquadro scrollabile che contiene titolo della categoria, descrizione e i vari articoli. Ho usato uno sfondo trasparente texurizzato in modo da preservare l’effetto di profondità dato dallo sfondo. E’ possibilie visualizzare una foto ingrandita del prodotto tramite una lightbox che ho creato implementando il plug-in jquery “colorbox”.

Infine sul menu compaiono le pagine (che secondo progetto dovrebbero essere solo una) che hanno un layout identico a quello delle categorie.

Un appunto. Lo scoller delle pagine è stato personalizzato solo per chrome e safari (che essendo basati su webkit mi permettono di utilizzare del codice css “sperimentale”) per una questione di budget. Per personalizzarlo per tutti i browser avrei dovuto creare uno scroller in javascript, cosa che ho preferito non fare.

Trovate il sito, insieme agli altri, sulla pagina ”portfolio” di questo blog

Per la conversione dei video da inserire nelle nostre pagine consiglio Freemake Video Converter scaricabile direttamente dal sito ufficiale in versione gratuita.

Il tag <video> è una delle novità a mio avviso più fruibili e interessanti dell’ HTML5 e già molti (tra cui un colosso come Youtube) stanno abbandonando Flash e introducendo questa tecnologia. C’è da dire che questa tecnologia offre una serie di vantaggi come ad esempio

• utilizzo di tecnologie non proprietarie
• potenziale compatibilità con tutti i sistemi operativi
• funziona su Iphone


<video src="filmato.mp4" width="320" height="240" controls="controls">
</video>

E’ facile intuire che src=”filmato.mp4″ rappresenta la sorgente del filmato, nel nostro caso un mp4, mentre controls=”controls”, sta a significare che vogliamo utilizzare l’interfaccia di controllo standard del nostro browser. Gli attributi width ed height sono i soliti che troviamo su qualunque tipo di tag. Ecco una lista degli attributi disponibili.

Proprio per questioni di compatibilità a volte è necessario definire più sorgenti per un video. Ecco che allora ci viene comodo utilizzare quest’altro tipo di dichiarazione

<video width="320" height="240" controls="controls">
<source src="filmato.ogg" type="video/ogg" />
<source src="filmato.mp4" type="video/mp4" />
Il tuo browser non supporta il tag video. Aggiornalo!
</video>
In questa dichiarazione abbiamo sostituito a src=”"  i tag <source>. I tag sono contenuti in <video></video> così come un testo che verrà visualizzato solo nel caso il browser non supporti il tag <video> stesso. Ecco una panoramica della compatibilità dei browser con i vari formati.

Come si fa adesso a controllare un video?Come si possono ricavare informazioni sul video stesso?Come si può utilizzare più tracce audio per un singolo video ?Tutto questo è possibile grazie a javascript e ai controlli DOM associati al tag video.Vediamo per prima cosa gli attributi.
Attributi di visualizzazione

• src (string): Il file sorgente
• poster (URL): Un immagine da visualizzare prima che il video venga riprodotto
• controls (boolean): Si stanno utilizzando i controlli standard del browser?
• videoWidth, videoHeight (integer): Le dimensioni del video originale

Attributi di riproduzione

• currentTime (float): Il tempo di riproduzione attuale
• startTime* (float): Il tempo iniziale del video (può non essere 0 nel caso di streaming per esempio)
• duration (float): La durata del video in secondi
• paused (boolean): Il video è in pausa?
• ended (boolean): Il video è finito?
• autoplay (boolean):E’ settato l’autoplay?
• loop (boolean): E’ settata la riproduzione loop?
• autobuffer (boolean):Il browser deve cominciare a caricare il video immediatamente?
• seeking (boolean): Is the browser currently seeking in the video?
• defaultPlaybackRate* (float): La velocità di riproduzione di default
• playbackRate* (float):La velocità corrente di riproduzione: 1.0 è normale, 2.0 è due volte più velocemente in avanti, -3.0 è tre volte più velocemente all’indietro
• seekable* (TimeRanges): An object of ranges in which the browser can seek (more about this below)
• buffered* (TimeRanges): An object of ranges which are already buffered
• played* (TimeRanges): An object of ranges which the user has already played

Altri attributi

• volume (float): Il volume corrente—da 0.0 a 1.0
• muted (boolean):Il video è muto?Questo attributo ha la precedenza sul volume
• readyState (int): State of the video (explanation below)
• networkState (int): State of the network (explanation below)
• error (MediaError): Un oggetto MediaError se qualcosa va storto

* L’attributo non funziona con Firefox al momento della stesura dell’articolo

Alcuni di questi attributi sono di sola lettura mentre altri possono essere anche riscritti e in ogni caso è intuitivo immaginare quali lo siano e quali invece no. E’ interessante invece come questi attributi possano essere usati

var myvid = document.getElementById(‘vid’);
myvid.muted = false;
myvid.currentTime = 0.0;
if (myvid.ended) { … }

Semplice codice javascript.Possiamo leggere eventuali errori utilizzando questo codice javascript

var myvid = document.getElementById(‘vid’);
if (myvid.error) {
switch (myvid.error.code) {
case MEDIA_ERR_ABORTED:
alert(“You stopped the video.”);
break;
case MEDIA_ERR_NETWORK:
alert(“Network error – please try again later.”);
break;
case MEDIA_ERR_DECODE:
alert(“Video is broken..”);
break;
case MEDIA_ERR_SRC_NOT_SUPPORTED:
alert(“Sorry, your browser can’t play this video.”);
break;
}
}

prendendo in riferimento i seguenti errori

MEDIA_ERR_ABORTED (1) L’utente ha annullato la riproduzione delmedia
MEDIA_ERR_NETWORK (2) Errore di rete
MEDIA_ERR_DECODE (3) Errore di codifica, probabilmente il video è corrotto
MEDIA_ERR_SRC_NOT_SUPPORTED (4) Il formato non è supportato.

Analizziamo i network states e i ready states. Eccone, ancora una volta, un elenco


NETWORK_EMPTY (0) Non ancora inizializzato
NETWORK_IDLE (1) La rete non viene utilizzata in questo momento (per esempio per il fatto che il video è gia stato caricato)
NETWORK_LOADING (2) Il Browser sta caricando i dati dalla rete
NETWORK_LOADED (3) I dati sono stati caricati
NETWORK_NO_SOURCE (4) Il vidoe non può essere caricato o non è stato trovato
HAVE_NOTHING (0) Non è disponibile nessun dato
HAVE_METADATA (1) La durata e le dimensioni del video sono disponibili
HAVE_CURRENT_DATA (2) I dati per la posizione corrente sono disponibili
HAVE_FUTURE_DATA (3) I dati sono disponibili sia per la posizione corrente che per quelle successive, quindi la riproduzione può iniziare.
HAVE_ENOUGH_DATA (4) Sono disponibili abbastanza dati per riprodurre tutto il video


Per utilizzarli useremo le funzioni myvideo.getReadyState() e myvideo.getNetworkState() nel modo “simile” ma un pò “diverso” (scusate è il mio cervello che ogni tanto fa sti scherzetti). Veniamo adesso agli eventi e al modo di utilizzarli.

loadstart: Il Browser comincia a caricare i dati
progress: Il Browser sta caricando i dati
suspend: Il Browser non carica dati ed è in attesa
abort: Il caricamento dei dati è stato annullato
error: Si è verificato un errore
emptied: Dati non presenti inaspettatamente
stalled : Il trasferimento dei dati è in stallo
play : Il video è stato fatto partire(nel caso di play())
pause: Il video è stato messo in pausa(nel caso di pause())
loadedmetadata : I metadati sono stati caricati
loadeddata : I dati sono stati caricati
waiting: In attesa per ulteriori dati
playing : Il video è in esecuzione
canplay: Il video pu essere fatto partire
canplaythrough: Ci sono abbastanza dati per eseguire tutto il video
seeking: seeking is true (browser seeks a position)
seeked seeking is now false (position found)
timeupdate: currentTime è stato modificato
ended : il video siè concluso
ratechange: Il tasso di playback è stato cambiato
durationchange: La durata del video è cambiata (per i flussi streaming)
volumechange: Il volume è cambiato

Per utilizzare gli eventi con javascript utilizziamo la solita maniera.Qui per esempio eseguiremo un azione nel momento in cui il volume viene modificato,

myvideo.video.addEvent('volumechange',function(){
esegui azioni;
});


Eccoci alla fine dell’articolo. Spero che vi possa aiutare a realizzare progetti originali e creativi e ovviamente, se ci sono dubbi, commentate data la filosofia altamente WEB 2.0 di questo blog . Un saluto a tutti i lettori, date un occhio agli altri articoli magari e fatevi un giro sul blog, ma giusto così per darmi un pò di soddisfazione .
Alla prossima, Aurelio “DxW” (Petrone anche, se proprio volete)!

Inoltre potete trovare maggiori info sui video (ovviamente in inglese) sulla pagina ufficiale del w3c dedicata all’argomento.
Articolo basato in parte sul lavoro di

- ChipWreck.de
- Gleenk.com
- Opera DEV
- W3C