Cell. +39 3479684755
Il Blog di Instant Websites
Come usare il tag video di HTML5
Introduzione
Una delle novità più interessanti di HTML5 sarà costituita dal nuovo tag video, che consentirà appunto l’esecuzione di file video senza richiedere interfacce Flash o QuickTime.
Ciò risulta ancor più importante dal momento che numerosi tablet e smartphone non supportano la tecnologia di Adobe Flash, rendendo non fruibili i contenuti che dipendono dal relativo plugin.
La struttura base del tag <video> è la seguente:
<video><source src=”…”></video>
Tuttavia, in questa fase di sviluppo finale di HTML5, necessario predisporre il file video in più formati per garantire la compatibilità con i diversi browser.
Questi formati sono: .mp4, .ogv, .webm.
Siti per dispositivi mobili: offrire contenuto alternativo di qualità
L’ampia diffusione guadagnata da smartphone, tablet ed altri dispositivi mobili negli ultimi tempi pone lo sviluppatore di fronte all’esigenza di garantire la fruibilità dei contenuti del sito attraverso una serie di piattaforme piuttosto diverse tra loro per dimensioni fisiche e caratteristiche tecniche.
In realtà è possibile distinguere – un po’ grossolanamente magari – tra due categorie di dispositivi: i tablet da un lato, che per via della risoluzione video garantiscono di per sé un’esperienza utente simile a quella ottenuta su un desktop o un laptop, e gli smartphone dall’altra, che per le piccole dimensioni dello schermo richiedono una versione del sito costruita ad hoc (se il committente lo ritiene necessario e se è disposto a pagare per essa!).
Nel primo caso – cioè per iPad e simili – il principale problema tecnico è costituito dunque dal mancato supporto di Adobe Flash, che ha fatto molto discutere per l’insensatezza della decisione.
Piaccia o non piaccia, Flash era divenuto uno standard per la realizzazione di contenuti animati ed interfacce video; può darsi che HTML5 sia destinato a soppiantarlo nel tempo ma i siti sviluppati con l’uso di Flash sono talmente numerosi che rinunciare al supporto di questa tecnologia è apparsa un’idea arrogante e fondamentalmente ingiustificata.
A parte questo, su cui credo ci sia poco da dibattere (a meno che si appartenga alla categoria di quelli che “Apple non sbaglia mai” … ma qui sconfiniamo nell’ideologia) possiamo solo prendere atto della situazione e, qualora si usi Flash per alcuni contenuti del sito, cercare di fornire contenuto alternativo di qualità.
Fino a qualche tempo fa, era giudicato sufficiente porgere all’utente il cui browser fosse sprovvisto di Flash Player (o fosse provvisto di una versione obsoleta) un invito più o meno gentile a scaricare il software; la possibilità di inserire un messaggio personalizzato derivava dalla modalità di inserimento del contenuto Flash tramite SWFObject con conseguente possibilità, appunto, di prevedere un contenuto alternativo.
Questa prassi derivava dal fatto che il mancato supporto degli elementi in Flash era sicuramente imputabile all’assenza del plugin nel browser usato.
Oggi, invece, possiamo sfruttare questa opportunità tecnica per aggiungere contenuto alternativo agli utenti che navigano il sito su iPad o altro dispositivo privo di supporto con Flash, garantendo nel contempo una buona esperienza anche a coloro che in realtà usano il PC ma non hanno Flash Player installato (mosche bianche, secondo i dati forniti da Adobe, ma pur sempre presenti).
Questo contenuto dovrà essere di qualità, cioè tale da sostituire l’elemento Flash in maniera da non fare neppure percepire l’assenza di quest’ultimo (fin dove possibile).
Nel caso dunque in cui si utilizzi la libreria SWFObject il procedimento tecnico sarà il seguente:
– nella sezione head della pagina:
<script type=“text/javascript” src=“js/swfobject.js”></script>
<script type=“text/javascript”>
swfobject.embedSWF(“swf/filmato.swf”, “box”, “400″, “300″, “9.0.0″);
</script>
e nella sezione body:
<div id=”box”>
<!– contenuto alternativo –>
…
<!– /contenuto alternativo –>
</div>
Il contenuto alternativo, inserito nel div chiamato #box nell’esempio di cui sopra, verrà automaticamente visualizzato qualora sia impossibile mostrare quello in Flash e cioè filmato.swf.
Naturalmente questa tecnica è applicabile solo qualora gli elementi in Flash siano solo alcuni nella pagina; per i siti sviluppati interamente sulla base di questa tecnologia sarà indispensabile sviluppare una versione apposita in XHTML.
CSS3, HTML5, Flash, jQuery … sarà rivoluzione?
La prossima introduzione a tutti gli effetti della nuova versione di HTML, cioè la 5, e dei Cascading Style Sheet, cioè la 3, lasciano presagire una sorta di rivoluzione nel campo dello sviluppo web per via dei nuovi strumenti che verranno messi a disposizione dei web designer.
Fin da oggi è possibile iniziare a sperimentare alcune delle nuove proprietà dei CSS3, poiché a) queste dovrebbero essere definite nella loro versione definitiva, b) i browser più intelligenti già le supportano, c) nel caso dei browser meno intelligenti (vale a dire IE, ma qualcuno ne dubitava?) la degradazione non comporta problemi di visualizzazione.
Ci siamo ad esempio occupati nel precedente articolo della proprietà fontface che consente di utilizzare font non standard nelle pagine web.
Questa è supportata persino da IE, addirittura nelle sue versioni più vecchie, quindi è utilizzabile da subito.
Un’altra proprietà interessante che andrà a risolvere un problema annoso – e diciamo con sincerità, noioso – è border-radius: questa permette di arrotondare gli angoli di un box in base ad un certo valore di raggio e può essere applicata a tutti gli angoli ovvero solo ad alcuni.
Vediamo un semplice esempio di un contenitore con tutti e quattro i bordi arrotondati:
#angoli-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
-moz-border-radius: 10px; /* per Firefox */
-webkit-border-radius: 10px; /* per Safari e Google Chrome */
border-radius: 10px; /* per IE9 */
}
ed un altro con i soli angoli inferiori arrotondati:
#angoli-inferiori-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
border: 1px solid #333333;
-moz-border-radius: 0 0 10px 10px; /* per Firefox */
-webkit-border-radius: 0 0 10px 10px; /* per Safari e Google Chrome */
border-radius: 0 0 10px 10px; /* per IE9 */
/*
Le ultime tre righe equivalgono a:
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
*/
}
In questa pagina sono presenti entrambi gli esempi: visualizzandola con Internet Explorer 8 e precedenti, gli angoli non risulteranno arrotondati mentre con tutti gli altri browser l’effetto funziona.
Un’altra questione che ha agitato le acque del web design è rappresentata dall’ostracismo attuato da Apple nei confronti di Flash, non supportato da iPhone né da iPad.
Qualcuno si è affrettato a dichiarare la morte di Flash, con comprensibile scarsa soddisfazione di Adobe; altri hanno affermato che la necessità di questo strumento verrà comunque meno per via delle opportunità offerte dai framework come jQuery e dallo stesso HTML5 che promette di gestire i file multimediali.
Chi scrive non è d’accordo su queste visioni estreme. Flash ha tuttora la sua utilità, a patto che non se ne abusi, soprattutto perché può compromettere la fruibilità di un sito (e la sua accessibilità).
jQuery è un framework duttile ed efficiente ma non sempre di facile utilizzo: i plugin richiedono numerosi test per accertarne la loro efficacia cross-browser e l’applicazione di più d’uno nella stessa pagina può generare incompatibilità.
L’ottica più corretta per uno sviluppatore web che deve garantire la massima fruibilità possibile per il proprio lavoro è ancora costituita dalla scelta dello strumento di volta in volta migliore per ottenere un certo risultato in termini di leggerezza della pagina, universalità tra i vari browser (o quantomeno degradazione accettabile), qualità del risultato ottenuto.
Tutti questi argomenti vengono trattati nell’ambito del nostro Corso Base di Web Design organizzato da INSTANT WEBSITES a Milano.
Il prossimo corso comincerà il 25 gennaio 2011.
Potete trovare i dettagli in queste pagine: http://www.instantwebsites.it/corsi.html e http://www.corsiwebdesign.it/corsobase.php