Cell. +39 3479684755

Il Blog di Instant Websites

Autore: 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.

CORSO AVANZATO DI WEB DESIGN & ADOBE DREAMWEAVER®

INSTANT WEBSITES amplia la propria gamma di corsi con la nuova proposta relativa al CORSO AVANZATO DI WEB DESIGN E ADOBE DREAMWEAVER®.

Rivolto a chi ha già frequentato il Corso Base ed ha quindi un’adeguata conoscenza delle regole fondamentali dell’ XHTML, il Corso Avanzato di Web Design e Adobe Dreamweaver® si occupa della progettazione e sviluppo di layout complessi quali: layout a 2 e 3 colonne, a dimensione fissa e liquidi. Verrà inoltre affrontato l’argomento relativo all’utilizzo di script PHP per l’approntamento di pagine dinamiche. Il Corso Avanzato costituisce dunque l’ideale completamento dello studio intrapreso nel Corso Base.

Il programma è dunque il seguente:

  • I layout complessi: 2 colonne a larghezza fissa; 1 colonna liquida ed una a larghezza fissa; 3 colonne a larghezza fissa; 1 colonna liquida e 2 a larghezza fissa
  • Il server di prova PHP: installazione ed uso di EasyPHP
  • L’inclusione di pagine esterne tramite PHP ed il test tramite server di prova
  • L’installazione di uno script PHP: Piwik (sistema di statistiche)

E’ possibile scaricare il programma del corso in formato pdf.

Il corso si svolge in un singolo incontro da 4 ore.
Per questo motivo, il corso viene organizzato a richiesta presso la nostra sede corsi di Milano (zona Jenner/Nigra) o altra sede concordata.

Il costo del corso di gruppo è di Euro 120,00 +4% rivalsa INPS, senza applicazione dell’IVA.
Sono previste condizioni particolari per l’iscrizione cumulativa di gruppi di 2 o più persone.

Inoltre, fino al 31/03/10 coloro i quali hanno già seguito il Corso Base hanno diritto ad uno sconto di 20 Euro, sicché il costo di iscrizione diventa di Euro 100,00 +4% rivalsa INPS.

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.

Categorie
Archivi