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.
REALIZZARE UN VERO SITO CROSS-BROWSER
Uno dei principali problemi che lo sviluppatore web si trova ad affrontare nella fase di realizzazione di un sito è sicuramente costituito dalla diversità di browser (programmi di navigazione su Internet) diffusi ed utilizzati.
Attualmente i browser più impiegati sono Internet Explorer, Mozilla Firefox (che è stato ufficialmente nominato successore di Netscape Navigator, oramai abbandonato), Google Chrome, Safari ed Opera; la questione è resa ancora più complicata dalle differenti versioni di questi software nel senso che ad esempio Internet Explorer – tutt’ora il più diffuso – si trova alla versione 8 ma le statistiche dicono che esiste ancora un elevato numero di utenti che impiegano la 7, la 6 e persino a 5.5. Questo problema è meno sentito per gli altri browser giacché è lecito supporre che gli utenti dei programmi alternativi siano più sensibili alle esigenze di aggiornamento, inoltre è proprio per I.E. che si pone il grave problema dei bachi che hanno via via caratterizzato i rilasci.
Già perché le qualità di I.E. 8, tanto vantate da Microsoft, altro non sono se non le correzioni dei bug di cui sono state affette le versioni 5.x e 6 (in gran misura!) ed anche la 7, nonostante le ottimistiche dichiarazioni dei tecnici del colosso di Redmond a proposito della loro eliminazione: chi scrive ha ad esempio constatato il ricorrere del Peek-a-boo bug anche sotto I.E. 7!
Non da oggi, quindi, allo sviluppatore si pone il problema di decidere come affrontare la questione dei bachi. Se da un lato è oggettivamente corretto tralasciare le problematiche connesse alle versioni più datate di browser (sarebbe assurdo preoccuparsi oggi di Netscape 4 o di I.E. 4.01), nel caso di un sito generalista e quindi posto all’attenzione di una platea quanto più possibile ampia di fruitori occorre realizzare un risultato che sia realmente cross-browser, per assicurare una corretta fruizione del sito stesso e dei suoi contenuti.
Il CORSO BASE DI WEB DESIGN & ADOBE DREAMWEAVER® proposto da INSTANT WEBSITES si occupa nella sua parte iniziale proprio di queste tematiche, definendo in maniera dettagliata lo scenario operativo nel quale si muove il web designer relativamente appunto ai vari browser e alle altre tematiche tecniche similari (velocità di connessione degli utenti, disponibilità dei plugin, Javascript e framework ecc.).
Inoltre, nella fase di studio dell’XHTML, vengono presi in considerazioni i suddetti bachi e le relative soluzioni, per evitare quando possibile il ricorrere del problema o quantomeno per correggerlo. Un sito di qualità è un sito conforme alle raccomandazioni internazionali del W3C e fruibile correttamente in tutte le sue parti: la realizzazione di un sito avente queste caratteristiche è appunto l’obiettivo del nostro corso.
Il prossimo Corso Base è in calendario a partire dal 26 gennaio 2010, fermo restando che possono essere organizzati corsi individuali previo accordo.
Del Corso Base si è occupato un recente articolo in questo blog, che vi invitiamo a leggere.
Per maggiori dettagli ed informazioni, vi invitiamo a visitare la pagina Corsi del sito ed a contattarci senza impegno ai numeri telefonici 0200618547 (tariffa urbana da tutta Italia) o 3479684755, oppure tramite il modulo presente nella pagina Contatti del sito.
Frames addio e tabelle … demoni da scacciare?
E’ notizia di questi giorni: HTML 5 non includerà più i tag relativi ai frames. Certo, gli sviluppatori già evitavano l’uso dei frames come la peste da tempo e quindi si tratterà semplicemente di una presa d’atto della obsolescenza di un dispositivo deprecabile per una serie di motivi molto concreti. Discorso chiuso. Non ci mancheranno.
Più complesso, invece, il discorso riguardante le tabelle. I puristi dei CSS hanno smesso di impiegarle per la realizzazione dei layout a favore dei più flessibili e precisi tag div ed anche l’impiego per il semplice inquadramento dei contenuti di pagina è considerato da taluni in maniera negativa.
Personalmente, credo che in questo – così come su quasi tutto … – sia preferibile trovare una posizione intermedia che tenga da un lato conto dello sviluppo tecnologico e della necessità di evitare le “zuppe di codice” e, dall’altro, permetta di adottare senza preclusioni di tipo quasi ideologico soluzioni tecniche semplici ed efficaci.
Io non uso più da tempo il tag table per realizzare dei layout. Da quando ho acquisito una buona pratica dei CSS-P, semplicemente non ne sento più il bisogno e oltretutto è chiaro che i fogli di stile consentono un controllo molto superiore dei layout complessi.
Quando però mi trovo a dovere inquadrare dei contenuti all’interno di un div definito tramite CSS, non disdegno l’uso delle tabelle se questa soluzione si prospetta come più semplice ed immediata.
A titolo di esempio, prendiamo una pagina con molte miniature fotografiche cliccando le quali si aprono delle altre pagine del sito. Se le foto sono soggette a frequente aggiornamento è preferibile usare una lista non ordinata debitamente formattata tramite CSS, come ho fatto in questa pagina: http://www.lebarbiedifulvia.it/html/barbies/fantasy.html (fra le molte per le quali ho usato questa soluzione). In tale modo è infatti possibile aggiungere immagini in qualsiasi punto della lista senza dovere spostare le altre, inoltre se la pagina ha dimensione elastica le miniature si riallineano in automatico (a ciascuna voce li dell’elenco si assegna un float: left; mentre a ciascuna immagine si applica la regola: display: block; per affiancarle). Se però non si prevedono aggiornamenti e soprattutto il tempo disponibile per sviluppare il codice è molto ristretto, è molto più facile usare una tabella ed inserire le miniature nelle singole celle: è forse una strada tecnicamente errata? Assolutamente no…
HTML 5 manterrà l’uso delle tabelle e questo può fare comodo. Quindi, se non ci sono controindicazioni e nemmeno limitazioni, usiamole senza paura dei … demoni.