Centrare un file swf in orizzontale e in verticale

Per eseguire questa operazione è sufficiente impostare il css come segue:

body{
margin:0;
padding:0;
text-align:center;
}


dopodichè si imposta il div che conterrà l'swf utilizzando dei valori negativi per quanto riguarda i margini di posizionamento. Supponendo ad esempio di avere un swf di 500 px per 500px, il nostro div sarà:

#cont{
margin-left:-250px;
margin-top:-250px;
width:500px;
height:500px;
text-align:center;
position:absolute;
top:50%;
left:50%;
}

I margini negativi sono pari alla metà delle misure dei lati del file swf

Continua...

[Hack] Uno sniffer universale di rilevazione del flash player

Esistono molti sniffer per rilevare la presenza e la versione del flash player installato.

Uno dei più usati è stato quello di moock.org, ma anche Adobe/Macromedia ha realizzato un detection kit di facile utilizzo.

In questo post riporto una idea alternativa di sniffer, tratta dal prezioso libro di Sham Bangal, "Flash Trucchi e Segreti" (scritto per Flash MX e MX 2004, continuo ancora oggi ad attingere da quel libro nonostante il susseguirsi di versioni e aggiornamenti : ) ).

L'hack si basa sull'utilizzo di un client-pull attraverso il meta tag "refresh", non utilizza javascript, ed è facile da configurare!

Di cosa abbiamo bisogno:

1 - La pagina indice del sito deve contenere nell'header il tag

< meta http-equiv="refresh" content="5" url="noflash.html">
e un file swf con delle azioni per caricare la pagina del sito in flash


2 - Dobbiamo creare la pagina noflash.html all'interno della quale dare le istruzioni adeguate per scaricare il flash player, oppure visualizzare la versione html del sito

In pratica, quando ci si collega alla index, l'swf tenta di eseguire il getURL, se non vi riesce, dopo 5 secondi, entra in azione il client-pull collegando l'utente a noflash.html


Prepariamo il file flash

L'utilizzo della semplice azione getURL() potrebbe non essere sufficiente, pensiamo ad esempio alla necessità nel vostro sito di riprodurre un video. Sebbene getURL() sia supportato dalla versione 2 del player, il video lo è dalla versione 5. Indirizzeremmo pertanto l'utente sul sito flash anche se ha installato versioni antecedenti alla 5!

Useremo quindi la variabile d'ambiente $version supportata fin dalla versione 4 del player, quindi più sicura del metodo getVersion() e System.capabilities.version, supportati solo dalle versioni 5 e 6.

In tutti i casi, otterremo una stringa che riporta la piattaforma e la versione, esempio
"WIN 6,0,21,0".

La versione del player si trova in corrispondenza della posizione 4, ovvero il 5° carattere separato da virgola.

Supponendo di voler far accedere al sito flash solo gli utenti che abbiano installato una versione >= della 5, andremo a scrivere il seguente codice:


var V:String=eval($version);
if(V.substr(4,1)>=5){
getURL(sitoflash.html);
}else{
getURL(sitonoflash.html)
}



Da notare che con questo procedimento, e diveramente dagli script classici in javascript, non dovremo preoccuparci di andare ad aggiornare il file flash man mano che vengono rilasciate nuove versioni del player!

Grazie Sham!



P.S
Per maggiori info consultare anche le seguenti technote di adobe:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14294&sliceId=2

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507

Continua...

Explorer 6 e la duplicazione di caratteri

Mi è capitato abbastanza spesso di realizzare pagine html e di vedere, su IE6, uno "strano" comportamento (sarebbe strano andasse tutto bene....):
in alcune circostanze vengono clonate delle porzioni di testo e posizionate di alcune 10ine di px più avanti. Il comportamento è abbastanza fastidioso, perchè in vista codice dal browser, anche visualizzando il codice generato, non si ha alcuna traccia di questo testo duplicato.
Tutto quello che è possibile rilevare è quello che IE6 mostra a video.

Le circostanze nelle quali ho verificato questo bug sono sostanzialmente due:

1 - Presenza di più div con floating (la duplicazione di testo avviene sempre sull'ultimo div)

2 - Presenza di div con la proprietà display:none (in questo caso, oltre alla duplicazione dei caratteri, mi è capitato che la distanza fra il div precedente a quello "nascosto" e quello successivo fosse la stessa che ci sarebbe stata con il div con display:block


Esaminiamo le cause.

Il fattore scatenante pare essere la presenza di commenti nel codice, cioè la cosa più innoqua e stupida del mondo!

Quando IE6 trova più di un commento nidificato fra due div che flottano, duplica una cosa come gli ultimi due caratteri di testo per ogni commento oltre al primo!!!

Un altro fattore che genera la duplicazione è la presenza di elementi, come segnalato sopra con la proprietà display su none.


Vediamo le soluzioni.

1 - Utilizzare i commenti condizionali al posto di quelli tradizionali
Commento tradizionale: < !-- commento -- >
Commento condizionale: < !--[if !IE]-- >Commento< !--[endif]-- >

Che equivale a istruire IE di ignorarli :)

Oltre a questo,

Inserire un right-margin di -3px nell'ultimo div che flotta, se il float è su left, l'opposto se è su right
Una cosa del tipo:


< style="float: left;">< /div >
< style="float: left;">< /div >
< style="float: left; margin-right: -3px;">< /div >


Per approfondire l'argomento,
http://www.positioniseverything.net/explorer/dup-characters.html

Continua...

Blog Under Restyling

Partendo da un template di blogger, ho iniziato a personalizzare la grafica. Rispetto a myspace non c'è paragone, la pagina è strutturata, si riesce a leggere il codice anche senza visualizzare le anteprime.

Vediamo che viene fuori! :)
Continua...

Presentazioni

Ciao a tutti, mi chiamo Flavio, sono un web designer, realizzo siti più o meno dal 2000, e ho finalmente deciso di aprire un blog!

Credo di avere qualcosa da raccontare sul mio quotidiano lavorativo, esperienze tecniche ma anche professionali e umane, ma soprattutto, credo di avere molto da imparare da tutti voi. Spero che questo blog possa esservi utile.... Un saluto, a presto!
Continua...