Cell. +39 3479684755
Il Blog di Instant Websites
Inserire un filmato Flash al 100% con margini nella pagina
Ci siamo già occupati in un precedente articolo di questo blog di come inserire un filmato Flash in una pagina XHTML senza usare il tag embed, che impedisce la validazione rispetto a XHTML 1.0 Transitional, adottando lo script SWFObject.
Il vantaggio aggiuntivo di questa soluzione, oltre alla convalida della pagina, è che è possibile inserire un testo alternativo al filmato stesso: se l’utente non dispone del plugin Flash Player e/o ha Javascript disattivato, verrà visualizzato appunto questo contenuto. In questo modo a) è possibile avvertirlo della necessità di installare il plugin, b) si può inserire un testo riepilogativo dei contenuti di pagina a beneficio dei motori di ricerca.
Riepiloghiamo sinteticamente come procedere tramite il metodo di pubblicazione dinamica di SWFObject:
a) scarichiamo lo script dalla pagina http://code.google.com/p/swfobject/ e lo copiamo in una cartella del nostro sito, ad esempio /js;
b) creiamo nel nostro foglio di stile un box destinato a contenere il filmato Flash;
c) inseriamo il seguente codice 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>
dove “box” è il nome del div contenitore, 400×300 sono le dimensioni del filmato e del div #box e 9.0.0 è la versione minima di Flash Player richiesta per eseguire correttamente il filmato.
d) nella sezione body della pagina inseriremo il contenuto alternativo:
<body>
<div id=”box”>
<!– Qui il contenuto alternativo –>
<p>Per visualizzare correttamente questa pagina, dovete avere il plugin Flash Player versione 9 o successiva installato nel vostro PC</p>
<p>…</p>
</div>
Per inserire un filmato a tutta pagina, è sufficiente indicare “100%””100%” nell dimensioni, sia nel sopra riportato codice di SWFObject sia nelle proprietà del box contenitore.
Talvolta però possiamo avere bisogno di inserire il filmato al 100%, ottenendone cioè un ridimensionamento in funzione della viewport dell’utente, lasciando un margine nella pagina (ad esempio quando il filmato ha un bordo colorato e non si vuole che aderisca al confine della pagina).
Come procedere? Non è ovviamente sufficiente impostare un padding al selettore <body> perché l’interpretazione del box model da parte di tutti i browser più recenti farebbe sì che tale padding fosse aggiunto al 100% di dimensione del contenitore, estendendolo oltre lo spazio disponibile della pagina e provocando la comparsa delle barre di scorrimento.
Ragionando sempre in termini percentuali, procederemo così nel foglio di stile:
#box{
/* Contenitore per il filmato Flash. La sua pubblicazione avviene tramite SWFObject; le dimensioni del filmato sono impostate a 98% in altezza per consentire di inserire un margine superiore e quindi inferiore. Per fare questo, si applica il posizionamento relativo con un offset superiore dell’1% che, di fatto, centra verticalmente il contenitore poiche’ per differenza anche il margine inferiore sara’ pari all’1%. */
height: 98%;
width: 100%;
position: relative; /* Permette di impostare l’offset superiore */
top: 1%; /* (100% – 98%)/2 */
overflow: hidden;
}
ed il codice relativo a SWFObject nella pagina XHTML diventerà analogamente:
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript”>
swfobject.embedSWF(“swf/filmato.swf”, “box”, “98%”, “98%”, “9.0.0”);
</script>
In questo modo, a qualsiasi risoluzione video dell’utente il filmato verrà ridimensionato a tutta pagina lasciando però dei margini sul lato corto dello schermo, cioè quello verticale.
SWFObject ovvero la soluzione ideale per i filmati Flash
Gli sviluppatori di siti web e, in particolare, gli utilizzatori di Dreamweaver, sono bene al corrente della difficoltà concernente l’inserimento di filmati Flash in una pagina web.
Utilizzando infatti la funzione Inserisci – Oggetto multimediale – Flash contenuta in Dreamweaver CS3, si determina l’aggiunta del tag embed e quindi, in fase di validazione rispetto a XHTML 1.0 Transitional, l’avviso spietato ma inevitabile: “Il nome tag: embed non trovato nelle versioni attualmente attive”.
In parecchi si sono quindi mossi per risolvere il problema, ammesso che sia veramente tale e cioè ammesso che la validazione completa sia davvero una necessità per il Cliente.
La soluzione più valida, tra quelle che ho personalmente sperimentato, è SWFObject arrivato alla versione 2.1.
Si tratta di un leggerissimo script (JS) che consente di inserire un filmato Flash in una pagina senza ricorrere a tag deprecati e con estrema facilità, sulla base di una delle due procedure proposte e cioè static o dynamic publishing.
In pratica, con dynamic publishing si tratta semplicemente di:
1) richiamare la libreria tramite il codice:
<script type=“text/javascript” src=“swfobject.js”></script>
nella sezione <head> della pagina;
2) creare tramite CSS un box ID per il filmato ed inserirlo nella pagina , prevedendo il contenuto alternativo destinato a chi non disponga del plugin Flash Player e/o di javascript attivato;
3) inserire il filmato nel box tramite Javascript, con un codice del tipo:
<script type=“text/javascript”>
swfobject.embedSWF(“filmato.swf”, “box”, “400”, “300”, “9.0.0”);
</script>
dove filmato.swf è il nome del file Flash, box è il nome del contenitore, 400×300 sono le dimensioni del filmato e 9.0.0 è la versione minima richiesta del player (sono possibili altri parametri, vedi documentazione).
Se l’utente non ha il plugin Flash Player e/o ha Javascript disattivato, la degradazione è ottima perché viene mostrato il contenuto alternativo previsto dallo sviluppatore (tipicamente: “Scarica il plugin qui … attiva Javascript”).
E’ da notare che a livello di CSS, il box può anche avere dimensione definita in automatico; è inoltre possibile usare come dimensioni il valore 100% e determinare la scalatura delle dimensioni in funzione di quelle disponibili nel browser dell’utente.
Il dubbio che può essere sollevato è relativo, intuitivamente, al fatto che la visualizzazione corretta del filmato è subordinata non solo alla disponibilità del plugin da parte del PC dell’utente, bensì anche al funzionamento di Javascript che non deve essere disattivato.
A me personalmente questo pare un problema assolutamente secondario. Quanti sono i computer con JS disattivato in realtà? Inoltre: se l’utente per qualsiasi motivo ha deciso di rinunciare a JS, è molto probabile che abbia disattivato anche l’operatività dei plugin che gestiscono i contenuti multimediali ed il contenuto attivo in generale.
In soldoni: un utente di questo tipo sa bene che non potrà vedere granché al di là del testo semplice e non sarà certo il nostro sito a creare eccezione.
SWFObject con la relativa documentazione tecnica, può essere reperito qui: http://code.google.com/p/swfobject/
Un’ultima osservazione: la beta di CS4 non utilizza più il tag embed bensì, proprio, JS per inserire i filmati Flash a conferma che questa è la strada giusta.