Categoria ‘Sviluppo’


Classe Javascript per il rilevamento di Flash

Anche se non si realizza un sito interamente in Flash, alcuni componenti possono presentarsi comunque all’interno della pagina, come banner, claim, visori RSS, ecc… Eco quindi un modo semplice per verificare se Flash è attivo e installato. Proponiamo qui un metodo che non necessità di più pagine, come proposto dalla stessa Adobe. Faremo in modo di risolvere tutto all’interno di un’unica pagina.

La classe qui presentata permette anche di risolvere l’ultimo problema nato con Explorer, ovvero quello dell’attivazione di un controllo ActiveX. Per risolverlo basta utilizzare Javascript per inserire il componente Flash, proprio quello che fa la nostra classe.

La prima cosa di cui abbiamo bisogno è una simpatica classe Javascript che ci permetterà di eseguire tutti i controlli necessari:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!--
  /*
  ** Detect Flash Class & Path insertFlash Object
  **
  */

var df = {
  __release: "1.0",
  _isIE: ( (navigator.appVersion.indexOf("MSIE") != -1) ? true : false),
  _isWin:( (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false),
  _isOpera:( (navigator.userAgent.indexOf("Opera") != -1) ? true : false),
 
  getSwfVer: function (i) {
    // Le versioni di NS/Opera dalla 3 in poi verificano la presenza del plug-in Flash nell'array dei plug-in
    if (navigator.plugins != null && navigator.plugins.length > 0) {
      if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
        var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
            var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
        var descArray = flashDescription.split(" ");
        var tempArrayMajor = descArray[2].split(".");
        var versionMajor = tempArrayMajor[0];
        var versionMinor = tempArrayMajor[1];
        if ( descArray[3] != "" ) var tempArrayMinor = descArray[3].split("r");
        else var tempArrayMinor = descArray[4].split("r");
        //
            var versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
              var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
          } else  var flashVer = -1;
    }
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
    else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
    else flashVer = -1;
    //
    return flashVer;
  },
 
  detectFlashVer:function (reqMajorVer, reqMinorVer, reqRevision) {
    var reqVer = parseFloat(reqMajorVer + "." + reqRevision);
    for (var i=25;i>0;i--) { 
      if (this._isIE && this._isWin && !this._isOpera) var versionStr = VBgetSwfVer(i);
      else var versionStr = this.getSwfVer(i);
      if (versionStr == -1 ) return false;
      else if (versionStr != 0) {
        if(this._isIE && this._isWin && !this._isOpera) {
          var tempArray         = versionStr.split(" ");
          var tempString        = tempArray[1];
          var versionArray      = tempString .split(",");      
        } else var versionArray = versionStr.split(".");
        //
        var versionMajor      = versionArray[0];
        var versionMinor      = versionArray[1];
        var versionRevision   = versionArray[2];
       
        var versionString     = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
        var versionNum        = parseFloat(versionString);
            // è la versione maggiore >= versione maggiore richiesta è la versione minore >= versione minore richiesta
        if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) return true;
        else return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );
      }
    }
    return (reqVer ? false : 0.0);
  },
 
  // TO DO
  insertFlash: function(n,w,h) {
    if( this.detectFlashVer(8,0,0) ) {
      n += ".swf";
      document.write( '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,29,0" width="'+w+'" height="'+h+'">\n' );
      document.write( '<param name="movie" value="'+n+'" />\n');
      document.write( '<param name="quality" value="auto" />\n' );
      document.write( '<embed src="'+n+'" width="'+w+'" height="'+h+'" quality="auto" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>\n' );
      document.write( '</object>\n');
    } else document.write( '<a id="flash_alternate" target="_blank" href="http://www.adobe.com/go/getflashplayer"></a>' );
  }
};

//-->

Come al solito, Internet Explorer (7) si differenzia e vuole un codice appositamente strutturato in VBScript:

[vb]

[/vb]

Salviamo questi due file (df.js e df.vbs nella cartella js) e includiamoli nella nostra pagina (index.html, index.php o default.html, ecc…) all’interno del TAG HEAD.

1
2
<script language="javascript1.2" type="text/javascript" src="js/df.js"></script>
<script language="VBScript" type="text/vbscript" src="js/df.vbs"></script>

Ora abbiamo tutto il necessario e possiamo spostarci nella pagina che conterrà l’oggetto Flash. Posizionatevi nel punto dove Flash sarà visualizzato e inserite il seguente codice:

1
<script language="javascript1.2" type="text/javascript">df.insertFlash("flash/splash","900","122");</script>

Nell’esempio abbiamo assunto che esista un file splash.swf nella cartella flash! Notate che non è necessario inserire l’estensione swf. I due numeri 900 e 122 sono le dimensioni.

Ancora meglio sarebbe supportare il caso – remoto – dove Javascript è stato disabilitato. In questa circostanza potete scegliere di procedere in due modi:

1. Inseire direttamente in codice OBJECT/EMBED
2. Notificare che Javascript è disabilitato

Nel primo caso perdiamo il controllo sulla presenza di Flash ed Explorer richiederà di attivare il controllo ActiveX. Tuttavia il filmato sarà visibile, se Flash è installato.

Nel secondo caso possiamo mostrare un’immagine e/o notoficare che con Javascript spento non è possibile verificare la presenza del Plug-in Adobe Flash. Ad esempio, scegliendo la soluzione numero 1:

1
2
3
4
5
6
7
8
9
10
<div id="claim">
    <script language="javascript1.2" type="text/javascript">df.insertFlash("flash/splash","900","122");</script>
  <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="122">
            <param name="movie" value="flash/splash.swf" />
            <param name="quality" value="high" />
            <embed src="flash/splash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="122"></embed>
    </object>
  </noscript>
</div>

Rilevare Flash e gestire le numerose alternative, come spiegato su Flash detect: come rilevare Flash, non è proprio comodissimo, speriamo almeno che la cosa non andrà a peggiorare con il tempo.

Continua...

HTML dinamico con Javascript

Scrivere codice HTML dinamicamente all’interno di una pagina è possibile ed utile. Il modo più diretto e conosciuto è quello di utilizzare documenti.write() o un contenitore DIV predisposto ad accettare codice inserito tramite innerHTML. In alternativa è possibile agganciarsi ad un TAG esistente ed utilizzare il DOM per aggiungere o rimuovere elementi all’interno della pagina. Ad esempio immmaginiamo di voler caricare un nuovo file Javascript senza utilizzare scripting lato server e quindi il ricaricamento della pagina. La funzioni qui sotto, ad esempio, aggiunge un file Javascript alla vostra pagina, passato come parametro (comprensivo di path).

1
2
3
4
5
6
function addScripting(s) {
 var scriptNode = document.createElement('script');
 document.getElementsByTagName("head")[0].appendChild(scriptNode);
 scriptNode.language='javascript';
 scriptNode.src=s;
}

Similmente è possibile aggiungere un foglio di stile alla nostra pagina, indicato dalla variabile cssfile:

1
2
3
4
5
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', cssfile );
document.getElementsByTagName('head')[0].appendChild(cssNode);

Continua...

Flash detect: come rilevare Flash

Come si può determinare se un browser ha installata la versione corretta del Plugin Adobe Flash? Per fare questo esistono – notoriamente – 5 tecniche:

  • Affidarsi alla caratteristica auto-installante dei TAG OBJECT ed EMBED
  • Utilizzare uno script (Javascript e/o VBScript) appositamente fornito da Adobe
  • Utilizzare un artifizio con un solo filmato Flash
  • Non fare nulla ;)
  • Far scegliere all’utente

Continua...

Ajax senza HTTPRequest

Come molti sviluppatori Web sanno, prima dell’avvento dell’oggetto XMLHttpRequest, il problema del ricaricamento di una pagina Web veniva risolto con la tecnica dei FRAME o IFRAME nascosti. Questo artifizio ha permesso per molti hanni di risolvere alcune problematiche di interfaccia altrimenti irrisolvibili. Un vantaggio nell’uso dei FRAME nascosti, tra l’altro, era la possibilità di mantenere l’HISTORY del browser! Cosa che l’oggetto XMLHttpRequest non permette.

Oltre a tecniche HTML che ricorrono a FRAME o IFRAME nascosti, esiste la possibilità di usare Flash come sub-canale di comunicazione tra la pagina e il Server. Alcune esperienze in tale direzione sono tuttora in sviluppo (vedi ad esempio Fjax). L’idea è quella di “nascondere” un filmato Flash all’interno della pagina HTML (come accadeva con i FRAME) e comunicare con esso tramite Javascript (o VBScript per il solo ambiente Microsoft).

Tuttavia questa tecnica nascoste una serie di insidie. Prima di tutto costringe l’utente finale ad installare il PlugIn di Flash, e quindi non rappresenta una soluzione HTML (pura) pulita. Inoltre richiede comunque l’uso spinto di Javascript come interfaccia tra Flash e la pagina, quindi tanto vale la pena usare l’oggetto XMLHttpRequest. Quando poi si inizia a scrivere un framework in ActionScript viene voglia di realizzare tutto in Flash. Ecco che la variante all’oggetto XMLHttpRequest comincia ad avere poco senso.
In definitiva se non si vuole usare l’oggetto XMLHttpRequest, conviene affidarsi all’ormai consolidata tecnica dei FRAME nascosti. Addirittura c’è chi usa proprio una tecnica mista: XMLHttpRequest + IFRAME!

Tuttavia, oramai, Ajax (nella forma dell’oggetto XMLHttpRequest) ha riscosso un così grande successo che in futuro l’oggetto XMLHttpRequest verrà sia supportato che migliorato dai produttori di browser (come Microsoft, Mozilla, Opera, ecc…). In pratica XMLHttpRequest diventerà un componente di default (come accade già in FireFox) all’interno del browser, raggiungibile via Javascript! Quindi perchè non usarlo?

Continua...

Protopage v3: qualcosa di nuovo all’orizzonte

Su Ajaxan.com è comparso un articolo interessante su un’esperienza londinese davvero simpatica. Protopage è un piccolo sistema operativo dedicato allo condivisione. Il motore dell’ambiente è ben scritto e l’interfaccia risulta estremamente facile da usare. Questo è sicuramente un bell’esempio di come il Web sta evolvendo. Tuttavia rimangono ancora insidie di compatibilità, vedi ad esempio Explorer 7, ma la strada sembra densa di sorprese.

Continua...

Usare Microsoft Internet Explorer 6 e 7 contemporaneamente

Sul Blog di IE7 è uscito un articolo (IE6 and IE7 Running on a Single Machine) che potrebbe migliorare le notti insonni di molti sviluppatori Web! Microsoft si è resa conto (fortunatamente) che l’avvento di Internet Explorer 7 causa, di fatto, l’abbandono della precedente versione 6. Infatti non è possibile far convivere entrambi i browser sulla stessa macchina. Per gli utenti finali questo non è un problema, ma per gli sviluppatori Web che vogliono mantenere una compatibilità con la versione 6 è un vero e proprio disastro. La soluzione, proposta su vari altri Blog, è quella di utilizzare una macchina virtuale, come VMWare o Virtual PC della setssa Microsoft.

L’indicazione è quella di installare sulla macchina reale principale l’ultima release del browser, la versione 7. Dotarsi poi di un player o di un software di virtualizzazione così da far girare virtualmente in questo ambiente separato la vecchia versione 6 di explorer.

NOTA BENE:

Microsoft mette a disposizione anche un file con un ambiente già virtualizzato, scaricabile all’indirizzo:
http://go.microsoft.com/fwlink/?LinkId=70868

Questo file si traduce in un .vhd file, non utilizzabile con VMWare. Inoltre chi possiede un Windows XP Home – come vedrà – non potrà utilizzare Virtual PC 2004 di Microsoft che richiede almeno Windows XP Professional (sul sito questa informazione è indicata davvero male!).

Tuttavia, quasi a voler essere un pesce d’aprile, il 1 Aprile 2007 questa macchina virtuale non sarà più utilizzabile! Nel Blog viene comunque sottolineato che il team di sviluppo spera di poter rilasciare in futuro ulteriori aggiornamenti di queste macchine virtuali preconfezionate.

Morale, questa soluzione è comunque approssimativa e non soddisfa davvero tutti! Andrebbe permesso l’uso di VMWare e quindi rilasciata una macchina virtuale compatibile con questo software, palesemente concorrente a Virtual PC 2004 – da poco rilasciato free da Microsoft ;) – o travare un modo per convertire il file .vhd di Microsoft in un file accettabile per VMWare. Se avete suggerimenti…

Continua...

Internet Explorer 7 e Opera: un mondo a parte

Conitnua a stupire la totale differenza di resa tra i vari browser in commercio. IE7 tratta i PNG (ad 8 bit o 24) in modo differente da FireFox. Anche Opera non è esente da qualche strana manifestazione a riguardo. Nel particolare i PNG usati come sfondo sono resi in modo differente da IE7, Opera e FireFox. Quest’ultimo è quello che si comporta meglio di tutti e a tal proposito sarebbe ora di nominarlo browser del “secolo”! Complimenti al team di sviluppo.

IE7 crea un simpatico effetto di taglio su un’immagine PNG usata come sfondo in repeat-x. Se provate a creare un immagine di 200×200 pixel con una sfumatura che va dal nero (0×000000) a grigio (0xeeeeee) in verticale e la posizionate nel CSS come sfondo del body in ripetizione orizzonale (repeat-x), impostando come sfondo del body il colore 0xeeeeee – ovvero la fine della sfumatura, noterete che solo FireFox rende perfettamente lo stacco, IE7 e Opera mostrano un simpatico effetto di taglio (ma leggermente diverso!!!): in pratica si vede la fine della nostra immagine 200×200 e l’inizio dello sfondo a colore piatto.

Un modo per risolvere il problema è quello di salvare la nostra immagine in GIF…

Ma i PNG non erano supportati da IE7?

Continua...

Il futuro prossimo venturo di Ajax

Ajax, per qualcuno, è stata una rivoluzione. Per alcuni programmatori “navigati” è stato solo un modo diverso di fare quello che prima si realizzava sfruttando il TAG HTML IFRAME (o i FRAME stessi nascosti). Evidentemente hanno tutti ragione. Ajax è stata una rivoluzione perchè è capitato in un momento particolare, dove la diffusione della banda-larga e la maturità del Web (web 2.0?) hanno permesso un approccio completamente diverso rispetto al passato.

La proliferazione delle Web Applications da parte di grandi gruppi come Microsoft, Yahoo, Google ed altri, dimostra quanto si stia investendo in questo nuovo approccio. Il futuro – prossimo venturo – di Ajax è quindi luminoso, denso di novità e colpi di scena.

I browser e gli scripting server (come PHP) potranno dare ausilio a questo nuovo modo di vedere il Web e le sue risorse! Applick.com ne è una dimostrazione lampante!

Continua...

Internet Explorer 7 (IE7): PNG e CSS ancora lontani?

A Redmond devono avere qualche grosso problema di comprendonio! Risulta magnificamente assurdo che sul finire dell’anno 2006 ancora non ci siano le basi per una – anche – approssimata compatibilità tra IE7 e Firefox! Nonostante il rilascio ufficiale – anche se con un set limitato di localizzazioni – di Internet Explorer 7, l’engine di rendering delle pagine soffre ancora di evidenti difetti di programmazione! Senza infierire entrando in numerosi dettagli elenco solo due clamorosi bachi ancora presenti in questo rilascio ufficiale!!

Prima di tutto i PNG vengono resi differentemente dai GIF… e, peggio ancora, in position absolute subiscono strani contorni a seconda di come gira a IE!! Evidente baco? O follia di qualche junior-developer?

Sul fronte CSS la pseudo classe :hover continua a non essere supportata su tutti i TAG, nonostante molti blog la diano per funzionante! Ma su quale sistema? Vedi W3C…
Un semplice p:last-child è praticamente ignorato! Giustamente Microsoft ha supportato p:first-child. Ora, se implementi il first che cosa ti costa implementare anche last? Mistero…

L’apice dell’assurdo, poi, lo si ottiene con le liste puntate! Udite udite! IE7 si comporta esattamente come IE6! Della serie: vi siete portati appresso codice fallato? Troppi copia e incolla evidentemente! Se definitie una lista con i canonici UL LI e un’immagine personalizzata come list-point, non provate ad usare un float sull’elemento LI, l’immagine scomparirà misteriosamente, esattamente come accadeva su IE6!! L’unico, manco a dirlo, a rendere il tutto corretto è il solito – vecchio – FireFox!

Sul blog di IE7 sono numerose le lamentale. Nonostante sia apprezzato lo sforzo del pachiderma Microsoft di aprire un blog durante lo sviluppo di un software come IE7, rimane tuttavia il dubbio dell’efficacia di questa mossa. Hanno davvero ascoltato le richieste degli utenti-sviluppatori? Il blog di IE7 è stato aperto con troppo ritardo?

Ancora una volta non ci resta che attendere una service-pack prossima ventura…

Continua...

Adobe alla riscossa: Flash 9 e Photoshop Lightroom! I beta anche degli exe…

Dopo aver acquisito Macromedia, Adobe crea i suoi Labs, laboratori di sviluppo! Sulla scia del successo ottenuto da Microsoft con il suo Blog su Internet Explorer 7 – che gli ha (e ci ha) risparmiato un bel po di services pack – anche Adobe adotta la tecnica della beta version. In effetti, ed era ora, invece di attendere gli ormai lunghissimi tempi di sviluppo di un software (sia esso tradizione, sia una Web Application) perchè non proporre agli utente la versione ancora in sviluppo? In questo modo si ha un feedback in tempo reale sulle effettive qualità del software che si sta sviluppando.

Tuttavia, per onestà, le software haouse dovrebbero abbassare un po’ i prezzi dei loro software, visto che il beta testing – che si paga o si pagava – lo facciamo noi utenti!!

Con Adobe Soundbooth beta si va a sovrascrivere il noto SoundEdit. Adobe Photoshop Lightroom è un nuovo prodotto rivolto ai fotografi professionisti, con tanto di demo video online. Flash 9 con ActioneScript 3 compare anch’esso in versione alpha da scaricare! Nonostante sia indicato preview! Per il mobile troviamo Flash Lite 2.1 Authoring Update, che tuttavia sembra un rilascio definitivo più che un’anticipazione. A parte questa piccola miscellanea di beta, alfa e upgrade credo che l’iniziativa sia buona, se non ottima.
Insomma per i curiosi che vogliono anticipare i tempi e non vedono l’ora di assaporare una nuova versione di un software, Adobe Labs è un luogo di sicuro divertimento! Sottolineo nuovamente la tendenza a far partecipare gli utenti finali alle fasi di sviluppo, tendenza che deve la sua diffusione alla Web 2.0 generation. Molto probabilmente sarà una modalità che nel prossimo futuro si diffonderà a macchia d’olio ovunque è possibile. Si potrebbe provare un’appartamente o un’autombile prima che venga rilasciata, ad esempio…

Continua...



Stop SOPA