Accessibilità

Articolo sull'aggiornamento del contenuto attivo

 

Preparazione di siti web con contenuto attivo per i nuovi browser


Adobe

 

Creato:
31 Mar 2006
Livello Utente:
Tutti

Molti di voi sono già al corrente delle modifiche annunciate per Microsoft Internet Explorer e probabilmente vi state chiedendo cosa accadrà ai siti web che utilizzano contenuto e applicazioni incorporati ("attivi"). Il contenuto attivo può includere file Macromedia Flash, Shockwave o Adobe Acrobat. Probabilmente state iniziando a valutare come prepararvi al cambiamento.

Impatto dell'aggiornamento del browser sui siti

Quali saranno le conseguenze effettive dell'aggiornamento del browser? Quando diventeranno operative le modifiche? Sarà possibile continuare a visualizzare contenuto attivo nei prossimi giorni?

Gli utenti saranno in grado di visualizzare contenuto e applicazioni incorporati nella loro forma attuale fino a che non aggiornano i browser Internet Explorer sulle piattaforme Windows. L'aggiornamento del browser è stato distribuito inizialmente come pacchetto facoltativo a febbraio 2006. Dopo l'aggiornamento del browser, è necessario fare clic sul contenuto incorporato o "attivo" prima di potervi interagire. Per ulteriori informazioni, vedere le risorse* disponibili in Microsoft Developer Network (MSDN).

Non tutti i siti saranno influenzati dal cambiamento. Nel browser aggiornato viene richiesto di fare clic prima di visualizzare il contenuto attivo codificato tramite tag <object> , <embed> o <applet> che sono inline in un file HTML. Le pagine HTML che invece utilizzano tag generati da file di script esterni quali JavaScript, ad esempio siti che utilizzano script complessi di rilevazione Flash, dovrebbero continuare a funzionare regolarmente senza alcuna variazione.

Molti di voi desiderano correggere i siti per risolvere a priori il problema delle modifiche obbligatorie del browser. Siamo lieti di informarvi che è possibile applicare fin d'ora una delle varie soluzioni di progettazione alternative.

Requisiti

File di esempio

ScaricaScarica i file JavaScript (4 K ZIP)

Nota: questo archivio di esempio contiene tre file:

Introduzione alla correzione per la visualizzazione di contenuto attivo

Di seguito vengono riportati alcuni esempi di codice "prima e dopo", forniti dal team di sviluppo di Adobe, che è possibile utilizzare per aggiornare le pagine HTML dei siti web che includono contenuto attivo.

Codice da sostituire

Di seguito viene indicato un esempio di codice, un semplice tag <object>, che nel browser aggiornato non funzionerà come in precedenza.

<object classid="clsid:D27CDB6E..." ...>
    <param name="movie" value="foo.swf">
</object>

Se si sostituisce il tag con uno script che richiama il codice presente all'esterno della pagina HTML, come descritto nei due metodi seguenti, il tag dovrebbe continuare a funzionare correttamente anche nella versione aggiornata di IE. Per ulteriori informazioni, vedere le risorse disponibili in Microsoft Developer Network (MSDN) all'indirizzo msdn.microsoft.com/ieupdate/*.

I test eseguiti sulla correzione JavaScript ne hanno confermato la compatibilità con i browser comuni attualmente disponibili. Per verificare che la soluzione sia adatta alle esigenze degli utenti dei vostri siti, consultate la tabella di riepilogo dei risultati dei test.

Soluzione JavaScript esterna 1: per occorrenze di contenuto incorporato singole o limitate

Se un sito contiene solo un elemento o pochi elementi di contenuto incorporato, è possibile utilizzare la seguente soluzione. Per implementare questa soluzione più semplice, è necessario creare un unico file JavaScript (JS) esterno per ogni pagina del sito che contiene contenuto incorporato.

Nota: se una pagina contiene più di un elemento di contenuto incorporato, creare funzioni separate (vedi Passaggio 1) all'interno del file JS esterno per eseguire l'istruzione document.write e quindi visualizzare i tag di ogni singolo elemento di contenuto. Si noti inoltre che questa soluzione non è inclusa nei file di esempio. Per creare il nuovo codice dal codice esistente nella pagina HTML corrente, è sufficiente osservare le istruzioni riportate di seguito.

La procedura è la seguente:

  1. Creare e includere il file JS esterno nel sito. In questo esempio il file viene denominato foo.js. Lo script deve eseguire l'istruzione document.write per visualizzare tutti i tag object/embed precedentemente inclusi nel file HTML:

    function RunFoo()
    {
        document.write('<object classid="clsid:D27CDB6E..." ...>\n');
        document.write('<param name="movie" value="foo.swf" />\n');
        document.write('</object>\n');
    }
    
  2. Aggiungere un'istruzione JavaScript INCLUDE che fa riferimento al file JavaScript dal Passaggio 1 alla sezione <head> della pagina web che incorpora il contenuto.

    <script src="[path]/foo.js" type="text/javascript"></script>
    
    
  3. Sostituire ogni tag <object> , <embed> o <applet> con una chiamata ai file esterni appropriati come indicato di seguito:

    <script type="text/javascript">RunFoo();</script>
    
    

Soluzione JavaScript esterna 2: per più occorrenze di contenuto incorporato

Se il sito contiene molti elementi di contenuto attivo o se il contenuto è stato incorporato in vari modi, è consigliabile utilizzare questa soluzione poiché offre alcuni vantaggi importanti. È possibile utilizzare un unico file JS esterno per l'intero contenuto Flash e Shockwave incorporato, invece di creare un file per ogni file interessato dall'aggiornamento del browser (come nella soluzione 1). Il file JS contiene funzioni specifiche che incorporano il contenuto attivo in base ai parametri ricevuti dalla pagina principale.

Per implementare questa soluzione, è necessario eseguire le tre operazioni seguenti:

  1. Copiare il file JS esterno che contiene le funzioni di soluzione alternativa in una posizione condivisa all'interno del sito web. In questo esempio il file viene denominato AC_RunActiveContent.js. È possibile assegnargli altri nomi a scelta.

    ScaricaScarica i file JavaScript (4 K ZIP)

    Il codice del file AC_RunActiveContent.js utilizza argomenti da passare (vedi punto 3) per costruire una stringa di tag completa che viene scritta nel documento.

  2. Aggiungere un'istruzione JavaScript INCLUDE che fa riferimento ai file JavaScript condivisi del punto 1, e precisamente alla sezione <head> di ogni pagina web del sito che include un tag object/embed.

    <script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>
  3. Sostituire ogni istanza dei tag <object> e <embed> presenti nelle pagine con le chiamate di funzione appropriate. Di seguito vengono riportate le due chiamate di funzione che è possibile scegliere: una per il contenuto Flash e una per il contenuto Shockwave.

    AC_FL_RunContent(
        "att1Name","att1Value", 
        "att2Name","att2Value", 
        ... 
        "attnName","attnValue" 
    );
    AC_SW_RunContent( 
        "att1Name","att1Value", 
        "att2Name","att2Value", 
        ... 
        "attnName","attnValue" 
    );
    

    Nota: per utilizzare queste funzioni, è necessario attivare JavaScript. Per consentire agli utenti di browser in cui JavaScript è disattivato di visualizzare il contenuto attivo, nidificare ogni funzione contenente i tradizionali tag <object>/<embed> all'interno di tag <noscript>, come descritto nella sezione Informazioni per gli utenti che hanno disattivato JavaScript.

    Durante la sostituzione dei tag object e embed con queste nuove chiamate di funzione, modificare le coppie di argomenti, rappresentate da "att1Name" e "att1Value", in modo da includere gli attributi e i corrispondenti valori appropriati dei tag originali, ad esempio movie, id, bgcolor ecc. È possibile visualizzare un esempio di questo codice per uno specifico file Flash nel file SampleActiveContent.html incluso nel pacchetto di file di esempio disponibile per il download.

    Quando si modifica la chiamata di funzione per il passaggio dell'attributo "movie", non includere l'estensione del file nel nome del filmato. Passare il nome del filmato come indicato di seguito:

    "movie", "foo".

    L'estensione appropriata verrà aggiunta dal codice JavaScript esterno.

    Se si passano parametri a un file Flash, probabilmente sarà presente un attributo "movie" originale simile al seguente:

    foo.swf?username=Bob&color=red

    Per passare correttamente gli attributi "name" e "color", includerli come argomenti nella funzione come indicato di seguito, ricordandosi di omettere l'estensione del file:

    "foo?username=Bob&color=red"

    Controllare di elencare gli argomenti nelle coppie name/value. È necessario passare al codice AC_RunActiveContent.js un numero pari di elementi, altrimenti l'operazione avrà esito negativo. Vengono inoltre inserite automaticamente le impostazioni necessarie, ad esempio classid e mimeType, come risultato della chiamata di funzione specifica del lettore. Se è necessario aggiornare il valore di una di queste impostazioni, modificare i valori contenuti nelle funzioni AC_FL_RunContent() o AC_SW_RunContent() che è possibile trovare all'interno del codice AC_RunActiveContent.js. All'interno della pagina HTML desiderata, passare solo gli argomenti relativi ai parametri facoltativi.

    Di seguito viene illustrato un esempio di sostituzione di un tag object/embed inline standard per la riproduzione di un file Flash con il metodo descritto. Se, ad esempio, il codice da sostituire è il seguente:

    <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="550" height="400" align="middle">
        <param name="allowScriptAccess" value="sameDomain" /> 
        <param name="movie" value="foo.swf" /> 
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
    <embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>

    Inserire la chiamata di funzione riportata di seguito:

    <script type="text/javascript" >
    AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','550','height','400','align','middle','src','foo','quality','high','bgcolor','#ffffff','name','foo','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','foo' );
    </script> 
    
    

Informazioni per gli utenti che hanno disattivato JavaScript

Entrambi i metodi descritti in precedenza sono basati su JavaScript. Tuttavia, è probabile che una ridotta percentuale di utenti abbia disattivato JavaScript nei browser utilizzati. In questi casi limitati non è possibile utilizzare le tecniche consigliate finora e gli utenti non saranno in grado di visualizzare alcun tipo di contenuto incorporato. Un aspetto da considerare è la probabilità che la maggior parte degli utenti di IE che hanno disattivato JavaScript abbiano disattivato anche il supporto ActiveX. Gli utenti che hanno disattivato ActiveX non sono comunque in grado di vedere il contenuto Flash e Shockwave visualizzato nei browser. La migrazione alle tecniche JavaScript per il contenuto incorporato non è pertanto in grado di modificare o influenzare l'esperienza di tali utenti. Gli sviluppatori devono occuparsi solo degli utenti che hanno disattivato JavaScript ma attivato ActiveX.

Per fornire supporto a questa ridotta percentuale di utenti con JavaScript disattivato e ActiveX attivato, inserire i tag <object> e <embed> direttamente nel codice HTML all'interno di un tag <noscript>. Il tag <noscript> è un tag standard che fornisce codice alternativo a prova di errore per gli utenti che hanno disattivato JavaScript. Di seguito viene riportato un esempio di un filmato Flash standard incorporato nidificato in un tag <noscript>:

<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="foo" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="foo.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
<embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

Gli utenti che hanno disattivato JavaScript devono fare clic sul contenuto per attivarlo nel browser aggiornato quando visitano una pagina con codice simile al precedente. Dopo questa operazione, potranno interagire con il contenuto come facevano in passato.

Soluzione per altri tipi di contenuto attivo

Nei file di esempio allegati a questo articolo è incluso anche un file JavaScript denominato AC_ActiveX.js. Se si applicano i metodi descritti in precedenza, non è necessario utilizzare questo script per visualizzare il contenuto Flash o Shockwave. Tuttavia, gli sviluppatori che utilizzano altri tipi di contenuto attivo per le pagine web possono eseguire questo script per consentire all'utente di visualizzare il contenuto senza doverlo attivare manualmente con un clic. Si tratta di una sorta di script generico compatibile con un'ampia gamma di contenuti. La procedura di utilizzo di questo script è molto simile a quella descritta in precedenza per il file AC_RunActiveContent.js.

Per implementare questo script, includere innanzitutto i file esterni nella sezione <head> della pagina HTML utilizzando il seguente codice:

<script src="[path]/AC_ActiveX.js" type="text/javascript"></script> 
<script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>

Quindi, come per il metodo Flash/Shockwave, sostituire il codice <object> e <embed>, modificando le coppie di attributi e valori in base al contenuto:

<script type="text/javascript">
     AC_AX_RunContent( 'classid','clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFB','width','150','height','100','src','fakefile.foo' );
</script>

Nota: è possibile trovare un esempio di codice simile a questo nel file HTML di esempio SampleActiveContent.html incluso nel pacchetto di file di esempio disponibile per il download.

Centro per sviluppatori di contenuto attivo: il punto di riferimento per restare aggiornati!

Noi di Adobe riteniamo che, seguendo uno dei metodi illustrati, sarete in grado di implementare in modo appropriato le correzioni necessarie nei vostri siti. Ma vogliamo esserne certi, ed è per questo che continueremo a fornirvi tutte le informazioni necessarie non appena disponibili. Vi consigliamo quindi di visitare regolarmente questo sito per essere sempre aggiornati sui nuovi metodi di visualizzazione di contenuto attivo e altre informazioni rilevanti.

Informazioni sull'autore

Il presente contenuto è stato creato da Adobe Systems, Inc.