Share
Anche se creare un sito Web completamente basato su Flash non è una buona idea per una serie di motivi, ciò non significa che non si debba utilizzare affatto Flash. Mi piace pensare a Flash come una spezia. Mettere alcune spezie qua e là potrebbe migliorare il gusto del tuo sito web rendendolo più piacevole e interattivo per i tuoi visitatori. Naturalmente, come tutti sappiamo, mettere troppe spezie nel nostro piatto può portare problemi. Quindi, Flash dovrebbe essere usato con moderazione. Vediamo come questo può essere fatto.
L'obiettivo di ogni sito Web è il contenuto che le persone possono leggere e apprezzare e che è compreso anche dai motori di ricerca e dai robot. Quindi, alcuni Flash sono quasi sempre soddisfacenti. Ma troppo Flash è meno utile per i motori di ricerca, rispetto all'HTML. I media Flash possono essere inclusi ovunque in un tema WordPress: nell'intestazione, in un post o in una pagina, in una barra laterale o nel piè di pagina. Dipende totalmente da te e dalle tue preferenze e necessità personali. La cosa veramente importante qui non è dove la userai piuttosto che come la userai. E questo è lo scopo di questo tutorial. Per mostrarti vari modi di incorporare i media Flash nei tuoi siti Web con WordPress e come eseguire correttamente questi metodi. Iniziamo con quello più essenziale, che è una base per gli altri.
SWFObject è una libreria JavaScript che offre due metodi ottimizzati per incorporare i file SWF in pagine Web: un approccio basato sul markup e un metodo basato su JavaScript. Utilizza JavaScript non invadente per rilevare Flash Player ed evitare il contenuto SWF rotto, ed è progettato per rendere i file SWF di incorporamento il più semplici possibile. Supporta l'uso di contenuti alternativi per mostrare contenuti a persone che navigano sul Web senza plug-in, per aiutare i motori di ricerca a indicizzare i contenuti o per indirizzare i visitatori alla pagina di download di Flash Player. Tutto questo è alimentato da un piccolo file JavaScript.
SWFObject è il metodo di inclusione Flash più popolare ed efficiente oggi disponibile. È ampiamente utilizzato da siti Web di alto profilo come YouTube, Microsoft Windows e Skype.
Perché dover capire quale codice markup e JavaScript usare può essere un lavoro noioso, SWFObject ti fornisce un generatore di SWFObject aggiuntivo per fare questo lavoro per te. Puoi trovare le ultime versioni di SWFObject e SWFObject Generator su Google Code. Scarica SWFObject e la versione HTML di SWFObject Generator. La principale differenza tra la versione HTML e AIR è che l'ultima ha funzionalità di copia negli appunti e può salvare la tua pagina HTML sul tuo disco rigido.
Quando si estrae il contenuto di swfobject_2_2.zip otterrai una cartella chiamata SWFObject che contiene i seguenti file:
Inoltre puoi scaricare il file SWF che useremo per il resto del tutorial su Free Flash Animations. Rinominalo in nosmoke.swf in breve.
OK. È tutto pronto. Andiamo avanti.
Ora devi caricare tutti i file necessari sul tuo server. Questi sono swfobject.js, expressInstall.swf e nosmoke.swf. Inseriscili nella cartella del tema attivo. In questo caso questo è il TwentyEleven cartella dei temi. Se ne hai molti .swf i file puoi metterli in una sottocartella.
Per creare e inserire il codice necessario in WordPress, segui questi passaggi:
Accentsconagua
tag nella sezione body del codice. Tutto da a viene selezionato Copialo.
- Nella barra laterale di WordPress Dashboard, fai clic sulla freccia a destra di Aspetto. Quindi, fare clic su Editor.
- Sul lato destro dello schermo, ora hai un elenco di tutti i modelli che si trovano nella directory principale della cartella del tema. Clicca sul titolo del desiderato .php file (in questo caso footer.php). Questo lo carica nell'editor di temi.
- Incolla il codice che hai copiato dal generatore di codice nel file modello appropriato. In questo esempio proprio sopra il
- Per il contenuto principale, selezionare e copiare quanto segue:
- Torna in WordPress, apri header.php facendo clic su Aspetto> Editor> header.php. Incolla il testo selezionato nella sezione principale sopra il
Il generatore di codice crea il codice per te in base alle scelte che fai. Genera il codice all'interno della struttura di base di una pagina HTML. Il codice generato è conforme agli standard Web e supporta l'integrazione di contenuti alternativi. Gli elementi JavaScript nel viene creato un tag che contiene l'oggetto e il metodo / informazione dell'oggetto annidato che delinea quali .swf deve essere riprodotto, la larghezza e l'altezza di esso, e quale contenuto alternativo da visualizzare se non viene trovata la versione appropriata di Flash Player. Si noti che la codifica speciale viene utilizzata per tenere conto delle esigenze di Internet Explorer, ad esempio: Adesso nosmoke.swf l'animazione apparirà su ogni pagina sotto il piè di pagina. Naturalmente, questo è un esempio fittizio, ma lo sto usando solo per scopi di presentazione, perché può essere fatto più velocemente e più facilmente. Ovviamente sarà necessario aggiungere alcune regole di stile per ottenere un aspetto migliore. Vedrai quanto brevemente.
Passaggio 4 Spiegazione della configurazione di SWFObject
Pubblicazione statica e dinamica
La pubblicazione statica utilizza il markup per incorporare sia il contenuto SWF che il contenuto alternativo e utilizza JavaScript non invadente per risolvere una serie di problemi che non possono essere risolti con il solo markup. Promuove l'effettiva creazione di markup conformi agli standard e pertanto si rivolge in particolare agli sviluppatori di standard web. Questo meccanismo di incorporamento dei contenuti Flash non si basa su un linguaggio di scripting, quindi il tuo contenuto Flash può raggiungere un pubblico significativamente più ampio. Se hai installato il plug-in Flash, ma hai JavaScript disabilitato o usi un browser che non supporta JavaScript, sarai comunque in grado di vedere il tuo contenuto Flash.
La pubblicazione dinamica utilizza il markup per definire solo contenuto alternativo e utilizza JavaScript non invadente per sostituirlo con il file SWF se è installata la versione minima di Flash Player e se è disponibile un supporto JavaScript sufficiente. La pubblicazione dinamica è meno prolissa della pubblicazione statica e si integra molto bene con le applicazioni basate su script. Se hai installato il plug-in Flash, ma hai JavaScript disabilitato o usi un browser che non supporta JavaScript, vedrai il contenuto alternativo al posto del tuo contenuto Flash incorporato.
Devi decidere qual è la soluzione migliore per te in base ai tuoi obiettivi e bisogni.
Utilizzando l'installazione di Adobe Express
Adobe Express Install è un meccanismo incorporato in Flash Player che consente di scaricare la versione più recente del plug-in Flash direttamente senza dover accedere al sito Web di Adobe. Express Install è una funzionalità opzionale per gli autori Web e visualizza una finestra di dialogo di download standardizzata quando un visitatore ha già installato Flash Player 6.0.65 o versioni successive su piattaforme Win o Mac, ma è richiesta una versione successiva del plug-in. Express Install utilizza una finestra di conferma pop-up ed è quindi una funzionalità opzionale che può essere attivata dagli autori web. Se si fa clic su Sì, Express Install aprirà una finestra di dialogo di download con la richiesta di chiudere tutte le finestre del browser. Dopo aver installato Flash Player, riaprirà la finestra del browser e reindirizzerà alla pagina in cui è stata avviata l'installazione rapida. Se fai clic su No, SWFObject ripristinerà il contenuto alternativo.
È possibile attivare l'Installazione rapida controllando la casella di controllo Installazione di Adobe Express e regolando il percorso verso expressInstall.swf file, se necessario. Per verificare se questa funzione funziona e vederla in azione, basta fare questo piccolo trucco: cambia la versione Flash richiesta in qualcosa di più grande della versione più recente di Flash Player (ad esempio, 14.0.0). E otterrai questo risultato:
Il messaggio ti dice che il contenuto richiede Adobe Flash Player 11.1, perché questa è in realtà l'ultima versione del plugin (al momento) e la versione 14.0 non esiste ancora.
Passaggio 5 Spiegazione della definizione di SWFObject
In SWFObject Generator puoi trovare una serie di attributi e parametri aggiuntivi disponibili. Sono nascosti di default. Pertanto, per accedervi, fai clic su "altro" nella parte inferiore dell'area di definizione del file SWF. Dopodiché dovresti vedere quanto segue:
A seconda delle tue scelte fatte qui, il tuo contenuto Flash si comporterà e apparirà diverso. Per una descrizione di cosa fa un determinato attributo o parametro, passa con il mouse sopra il suo nome.
L'attributo name è utile quando devi fare riferimento al tuo filmato Flash usando il linguaggio di scripting. Come ho detto prima potrebbe essere necessario aggiungere uno stile aggiuntivo al contenuto Flash. Per fare ciò basta aggiungere un valore per l'attributo di classe come "flashmovie". Questa classe verrà aggiunta all'elemento tag oggetto nel codice generato. Quindi, ora devi solo aggiungere la seguente regola di stile nel tuo foglio di stile del tema:
object.flashmovie // il tuo codice css qui
Passaggio 6 Utilizzo del generatore online di SWF incorporato
C'è un altro modo semplice per ottenere il codice di rilevamento necessario - utilizzando un generatore online. Un buono si può trovare su embed-swf.org. È basato su SWFObject HTML e JavaScript Generator. Per elaborare segui questi passaggi:
- Apri il Configuratore. L'interfaccia è divisa in cinque schede.
- Digitare i parametri desiderati in ogni scheda
- Fai clic sulla scheda Esporta. Qui puoi scegliere un modello di esportazione. Se si desidera utilizzare il proprio modello HTML, selezionare Personalizzato. Per sapere come crearne uno, consultare la documentazione.
- Ora fai clic su Mostra codice HTML. Il tuo codice HTML appare. Fare clic su Download per salvare il file sul disco rigido.
Se necessario, è possibile ripristinare le impostazioni predefinite in qualsiasi momento facendo clic sul collegamento nell'angolo in alto a sinistra. Inoltre hai la possibilità di esportare / importare le impostazioni salvate per un facile riutilizzo.
Non devi preoccuparti per il swfobject.js file. Lasciare l'opzione predefinita per SWFObject che utilizzerà il comando swfobject.js file ospitato da Google.
Passaggio 7 Utilizzo di Kimili Flash Incorpora
Secondo il suo sito web, Kimili Flash Embed è:
... un plugin per i popolari sistemi di blogging open source che ti consente di posizionare facilmente filmati Flash sul tuo sito. Basato sul codice JavaScript SWFObject, è conforme agli standard, facile da usare per i motori di ricerca, altamente flessibile e completo, oltre che facile da usare.
L'installazione del plugin è semplice:
- Nel Dashboard espandi il menu Plugin e fai clic su Aggiungi nuovo
- Nella barra di ricerca digita "flash embed"
- Quando vedi Kimili Flash Incorpora fai clic su Installa
- Dopo l'installazione, vai su Plugin e attivalo o fai semplicemente clic su Attiva ora
Ora per aggiungere contenuti flash nei tuoi post o pagine, procedi nel seguente modo:
- Crea un nuovo post / pagina o apri uno esistente
- Passa alla visualizzazione HTML
- Ora per aggiungere un'animazione Flash, utilizza il seguente shortcode, sostituendo i parametri path, ye x con il rispettivo percorso, altezza e larghezza del swf:
[kml_flashembed movie = "/ percorso / to / tuo / film.swf" /]
- Il parametro del film è l'unico richiesto: altezza e larghezza sono opzionali. Anche se è più efficiente dimensionare il tuo .swf durante l'esportazione, i parametri di altezza e larghezza verranno ridimensionati a .swf file. Se lo fai, assicurati di mantenere i numeri in proporzione per evitare la distorsione.
Kimili Flash Embed Tag Generator è una versione modificata del generatore di codice HTML e JavaScript SWFObject 2 ed è integrato strettamente in WordPress, rendendo molto facile la creazione di tag KFE con la formattazione corretta.
Aggiunta di Flash tramite KFE Tag Generator:
- Per avviare Tag Generator, un'interfaccia simile a una procedura guidata che ti aiuterà a creare il tag KFE necessario, fai clic sul pulsante con l'icona di Flash Player. (è necessario passare alla modalità Visual per vederlo)
- Apparirà una finestra simile a SWFObject Generator
- Tutto quello che devi fare è compilare i parametri richiesti e quindi fare clic su Genera
È possibile configurare le impostazioni predefinite nel menu Amministratore. Scegli Impostazioni> Kimili Flash Embed.
Le opzioni qui sono praticamente le stesse, eccetto quelle per JavaScript in basso. È possibile modificare la prima opzione su "No", se già ne hai swfobject.js referenziato altrove nel tuo codice. Se si sceglie di usare Kimili Flash Embed per creare un riferimento a swfobject.js selezionando "Sì", avrai quindi due opzioni da cui fare riferimento al file: Google Ajax Library o Internal. Clicca su "cos'è questo?" per vedere quali sono le differenze. Quando sei pronto, fai clic su Opzioni di aggiornamento.
Passaggio 8 Fornire contenuti alternativi
In questi giorni i principali fornitori di motori di ricerca come Google e Yahoo! può indicizzare contenuti testuali e collegamenti all'interno di file SWF durante la navigazione attraverso gli stati di un'applicazione, come se fossero veri visitatori. Allora perché hai ancora bisogno di utilizzare contenuti alternativi per aiutare i motori di ricerca a indicizzare i tuoi contenuti? Questo è per un paio di motivi.
- Innanzitutto, non tutti i motori di ricerca sono in grado di indicizzare il contenuto Flash.
- In secondo luogo, poiché un file SWF è solitamente pieno di contenuti multimediali, ci sarà ancora molto contenuto che rimarrà invisibile ai motori di ricerca. È ancora necessario utilizzare contenuti alternativi per visualizzare materiale descrittivo per le persone con minore supporto tecnologico e per aiutare i visitatori a trovare la pagina di download di Flash Player.
- Infine, è probabile che i motori di ricerca indicizzino sia il contenuto Flash che i contenuti alternativi. Sebbene, dal punto di vista di un autore web, il contenuto duplicato sia considerato una best practice perché consente di creare contenuti web accessibili al pubblico più ampio possibile, per cercare nei fornitori di motori offre alcune sfide difficili, come ad esempio per decidere quali risultati mostrare nei loro elenchi dei motori di ricerca. Quando crei contenuti ottimizzati per i motori di ricerca, dovresti sempre tenere a mente questa dualità. Assicurati che il tuo contenuto HTML rispecchi fedelmente il tuo contenuto Flash e lascia che un motore di ricerca decida quali contenuti possono essere mostrati come risultati di ricerca migliori.
Ad esempio, per creare migliori contenuti alternativi potresti fare quanto segue:
- Usa la stessa identica copia e link come nel tuo contenuto Flash
- Aggiungi immagini e descrizioni testuali al contenuto Flash
- Aggiungi copia per spiegare dove è possibile scaricare Flash Player
- Aggiungi CSS per disegnare e posizionare il tuo HTML al fine di preservare l'identità visiva della pagina web.
Per impostazione predefinita, SWFObject 2 Generator pubblica il seguente contenuto alternativo:
Ciò si traduce in un pulsante "Get Adobe Flash Player" per indicare ai visitatori dove possono scaricare il plug-in. Per testare questo è necessario disabilitare il plug-in di Flash Player. In Firefox vai a Componenti aggiuntivi> Plugin. Trova Shockwave Flash e fai clic sul pulsante "Disattiva". Ora quando ricarichi la pagina dovresti vedere quanto segue:
Puoi sostituire il codice predefinito con questo:
Ora se i visitatori navigano nella pagina senza plug-in Flash, vedranno un'immagine invece dell'animazione attuale:
I motori di ricerca e i visitatori che navigano sul Web in un browser di testo o con immagini disabilitate vedranno il contenuto come in questo screenshot:
Se si dispone di un banner con diversi stati, è possibile acquisire un'immagine per ciascuno di essi e quindi inserire tali immagini come contenuto alternativo. Potrebbe assomigliare a questo:
Per un'animazione o un contenuto video puoi usare lo stesso principio. Puoi acquisire diverse immagini chiave e usarle per descrivere il contenuto della tua animazione / video. Ecco lo schema di base:
Descrition of frame 1- Descrition of frame 2
- Descrition of frame 3
Le persone senza il plug-in Flash vedranno una sequenza di immagini con descrizioni e le persone che navigano sul Web in un browser di testo o con le immagini disattivate vedranno una serie numerata di descrizioni.
Un altro modo per farlo è includere una miniatura del video e una descrizione testuale del film.
Inoltre, puoi aggiungere alcune righe di copia al tuo contenuto alternativo spiegando che l'esperienza utente interattiva o audiovisiva desiderata richiede l'ultima versione di Flash Player, con un link alla pagina di download.
Si consiglia inoltre di creare regole di stile aggiuntive per garantire che l'identità visiva o il layout di una pagina Web rimangano intatti. Basti pensare ai contenuti alternativi come un'opportunità per comunicare con il pubblico di destinazione, sebbene potrebbero non avere il supporto tecnologico mirato.
Conclusione
Questo è tutto. Ora sai come incorporare facilmente e correttamente i contenuti Flash nel tuo sito web alimentato con WordPress. Il contenuto può essere qualsiasi cosa - animazione, applicazione, film, gioco e tutto ciò che desideri e di cui hai bisogno. Con un po 'di immaginazione puoi rendere il tuo sito davvero interessante, da un lato, e comunque utile, dall'altro.
Descrition of frame 1