Share
Flash è uno strumento che consente a designer e sviluppatori di creare siti Web sorprendenti (come avrai visto). Tuttavia, non è sempre facile creare o gestire un sito Flash. Discuteremo i pro e i contro di farlo.
Flash è un ottimo strumento di animazione, è possibile utilizzare le interpolazioni e / o l'animazione fotogramma per fotogramma per creare animazioni. JQuery in questi giorni può creare alcune animazioni eleganti (fai clic sui collegamenti per le transizioni), ma dubito che jQuery sia in grado di creare una transizione simile a quelle trovate sul sito Web di Davi-T.
Dall'avvento di Flash CS4 è possibile lavorare in 3D (beh, in qualche modo) il 3D in Flash CS4 consente di spostare gli oggetti nello spazio 3D, tuttavia questi oggetti non avranno profondità. Fortunatamente ci sono diverse librerie ActionScript che sono in grado di creare una grafica 3D sorprendente. Basta dare un'occhiata al sito di Papervision3D. Ci sono naturalmente altre librerie oltre a Papervision3D, come Away3D e FIVe3D.
Con Flash non è così difficile accedere alla webcam e / o al microfono. Se volessimo utilizzare uno di questi, Flash sarebbe la soluzione più semplice (online).
Se hai mai sviluppato un sito HTML / CSS, probabilmente hai riscontrato incongruenze tra i browser. Fortunatamente i siti Flash non hanno alcuna incongruenza nei browser, ci sono solo due cose necessarie per far funzionare un sito Flash. Il browser deve avere il plugin (corretto) di Flash Player installato e idealmente JavaScript deve essere abilitato (in realtà JavaScript non è necessario per far funzionare Flash, tuttavia JavaScript è spesso usato in combinazione con Flash, come SWFObject e SWFAddress).
Quindi questo è un grosso problema? Non proprio. Adobe dichiara sul proprio sito che il contenuto di Flash Player raggiunge il 99% dei desktop abilitati a Internet. E W3Schools afferma che nel gennaio 2008 solo il 5% aveva JavaScript disabilitato. Nel corso degli anni questo importo è stato in costante diminuzione. È sicuro dire che la stragrande maggioranza degli utenti sarà in grado di utilizzare il tuo sito Flash, e discuteremo in seguito come rendere il tuo sito utilizzabile per le persone senza il plugin Flash Player e / o JavaScript.
Fortunatamente c'è una soluzione a questo, vale a dire SWFObject. SWFObject è uno script JavaScript che è in grado di visualizzare un contenuto alternativo per le persone che non hanno il plugin (corretto) di Flash Player, discuteremo più approfonditamente su SWFObject durante la parte SEO di questo articolo.
Ok, scusate ragazzi, non ho menzionato una piccola incoerenza del browser. A causa di una sentenza brevettuale, plug-in che vengono caricati con l'uso di
Anche in questo caso SWFObject può aiutarci a rimuovere questo comportamento di attivazione per clic. Semplicemente incorporando un filmato Flash con SWFObject, il clic per attivare il comportamento scompare. Su Kirupa c'è un ottimo tutorial che spiega come utilizzare SWFObject per risolvere il problema di incorporamento.
Con qualsiasi sito che possiedi o possiedi, vorrai la libertà di gestire il contenuto al suo interno. La cosa più importante è che tu vada dinamico; carica i tuoi contenuti esternamente in modo da essere libero di cambiarli tutte le volte che è necessario. Utilizza campi di testo statici solo se sei sicuro di non modificare il testo all'interno di quei campi.
È molto comune archiviare il contenuto in un file XML, quindi all'interno del sito Flash caricherete questo file XML e mostrerete il suo contenuto.
Ecco un esempio, abbiamo il nostro file XML chiamato content.xml:
Ciao, mi chiamo Daniel.
Quindi potremmo accedere ai suoi contenuti all'interno di Flash con uno script simile al seguente:
Accentsconagua
// crea il nostro campo di testo var bio_text: TextField = new TextField (); bio_text.width = 400; bio_text.height = 400; addChild (bio_text); // la nostra richiesta var request: URLRequest = new URLRequest ('content.xml'); // carica la nostra richiesta var loader: URLLoader = new URLLoader (request); // al termine del caricamento del caricatore, chiamare la funzione displayContent loader.addEventListener (Event.COMPLETE, displayContent); function displayContent (event: Event) // memorizza i dati del loader in una variabile denominata xml var xml: XML = new XML (event.target.data); var xmlList: XMLList = new XMLList (xml); // cambia il testo di bio_text in quello che c'è dentro tags bio_text.text = xml.bio; Ora che il nostro contenuto è archiviato esternamente (non all'interno del nostro sito Flash), è più facile gestirlo.
Fortunatamente ci sono naturalmente Content Management Systems (CMS) appositamente creati per Flash, che semplificano notevolmente la gestione dei contenuti. Su Designm.ag c'è un buon articolo da leggere, 15 delle soluzioni CMS Flash più promettenti.
Prima ancora di iniziare a discutere di SEO, è importante sapere come funzionano i motori di ricerca. Piccoli programmi "strisciano" sul Web alla ricerca di contenuti che possono essere indicizzati a un motore di ricerca. Questi programmi sono chiamati bot, spider, formiche e probabilmente anche qualcos'altro.
Questi bot indicizzeranno il contenuto HTML di una pagina, tuttavia (ecco il problema) Flash è semplicemente incorporato nell'HTML di una pagina, quindi il bot del motore di ricerca non ha idea di cosa ci sia dentro. Se vogliamo che i motori di ricerca indicizzino il nostro sito, dobbiamo indirizzarli verso contenuti HTML che possono indicizzare.
Quindi ora possiamo veramente iniziare a parlare di SEO, che cos'è il SEO in realtà? Bene, Wikipedia riesce a spiegarlo chiaramente:
L'ottimizzazione dei motori di ricerca (SEO) è il processo per migliorare il volume o la qualità del traffico verso un sito Web dai motori di ricerca tramite risultati di ricerca "naturali" o non pagati ("organici" o "algoritmici").
Fondamentalmente abbiamo un problema che stiamo cercando di risolvere:
"Come posso rendere i contenuti del mio sito Flash accessibili ai motori di ricerca?"
Fortunatamente ci sono diverse soluzioni. Passiamo attraverso di loro uno per uno:
SWFObject è uno script JavaScript che consente di visualizzare un contenuto alternativo all'utente, se non ha (o non è aggiornato) un plug-in Flash Player. E se l'utente non ha JavaScript, si degrada con grazia. SWFObject ha tre vantaggi:
Comunque SWFObject ha un piccolo problema, mostrerà un contenuto alternativo per l'intero film Flash, ovviamente è un po 'troppo per visualizzare tutti i contenuti del nostro sito flash su una pagina come contenuto alternativo. Idealmente vorremmo visualizzare l'alternativa per la pagina specifica che il bot o l'utente sta visitando.
Ora non ho trovato una soluzione ben documentata, tuttavia ho deciso di utilizzare una combinazione di rilevamento Flash e SWFAddress. Lasciatemi prima spiegare cos'è SWFAddress.
George Kendros spiega nel suo tutorial Costruire un modello di sito web semplice usando il punto SWFAddress su cosa fa SWFAddress:
SWFAddress è una libreria Javascript / ActionScript che ti dà la possibilità di modificare l'URL del browser, aggiungere voci al suo elenco cronologia e attivare gli eventi di ActionScript quando l'URL cambia. Consente inoltre ai motori di ricerca di trovare contenuti specifici nel tuo sito.
Con SWFAddress possiamo utilizzare i cosiddetti deep linking. Un link diretto è un collegamento che punta a una pagina specifica anziché alla home page. Questo significa che possiamo usare SWFAddress per collegarci a una pagina specifica all'interno del nostro sito Flash.
Quindi cosa facciamo?
Per prima cosa costruiremo un sito HTML, questo sito HTML sarà per i bot e gli utenti che non possono visualizzare il nostro sito Flash. Useremo anche uno script di rilevamento Flash, che reindirizzerà l'utente al sito Flash, se l'utente ha il plug-in Flash Player corretto. Il reindirizzamento utilizzerà il deep linking, quindi possiamo reindirizzare l'utente alla stessa pagina, ma all'interno del sito Flash.
Come possiamo rilevare se l'utente ha installato il plugin Flash Player corretto? Bene, c'è un articolo su Kirupa chiamato Flash Detection Scripts. Lì troverai uno script di rilevamento Flash, che ho modificato un po ':
function redirect (version, flash_url) var MM_contentVersion = version; var plugin = (navigator.mimeTypes && navigator.mimeTypes ["application / x-shockwave-flash"])? navigator.mimeTypes ["application / x-shockwave-flash"]. enabledPlugin: 0; if (plugin) var words = navigator.plugins ["Shockwave Flash"]. description.split (""); per (var i = 0; i < words.length; ++i) if (isNaN(parseInt(words[i]))) continue; var MM_PluginVersion = words[i]; var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion; else if (navigator.userAgent && navigator.userAgent.indexOf ("MSIE")> = 0 && (navigator.appVersion.indexOf ("Win")! = -1)) document.write (' \ N '); // FS nasconde questo da IE4.5 Mac dividendo il tag document.write ('on error resume next \ n'); document.write ('MM_FlashCanPlay = (IsObject (CreateObject ("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion))) \ n'); document.write (' \ N '); if (MM_FlashCanPlay) window.location.replace (flash_url); else // nulla deve essere fatto, resta in questa pagina Nella nostra pagina HTML possiamo ora chiamare con JavaScript il reindirizzamento della funzione, che richiede solo due parametri, ovvero la versione di Flash Player, e l'URL della pagina che deve essere reindirizzato se l'utente ha il plugin Flash Player corretto. Diciamo che abbiamo la seguente pagina HTML:
Di Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
Ci concentreremo sull'ottava riga. Quello che succederà è il seguente; se l'utente ha Flash Player 10, reindirizzerà l'utente a http://www.example.com/#/about e successivamente SWFAddress utilizzerà il deep linking per visualizzare la pagina corretta, all'interno del sito Flash.
La creazione di un sito Web Flash è dura, per molteplici motivi. Per prima cosa dovrai dedicare molto tempo alla codifica di tutto, dobbiamo scrivere codice per quasi tutto. Abbiamo bisogno di codificare la grafica dinamica, abbiamo bisogno di codificare il layout, mantenendo le cose posizionate dove vogliamo. Abbiamo bisogno di codificare e / o animare le transizioni tra le pagine. Dobbiamo caricare il contenuto e anche visualizzarlo. Creare un sito Flash richiede molto tempo ed è complicato, non prendertelo alla leggera.
Fortunatamente per noi ci sono diversi framework che possono rendere più semplice lo sviluppo di un sito Flash. Questi framework potrebbero differire in ciò che offrono, ma ogni framework può aiutare ad alleggerire il carico di lavoro in un'area specifica.
Ecco alcuni framework che potrebbero aiutarti durante lo sviluppo:
Adoro i siti Flash, quando sono fatti correttamente, sono semplicemente incredibilmente belli, tuttavia c'è una cosa molto importante da ricordare:
I siti riguardano il contenuto che comunicano all'utente, Flash fornisce solo un modo per visualizzare quel contenuto.
Cosa intendo esattamente con questo? Bene, un blog vuole che le persone leggano i post, quindi il suo design deve funzionare in un modo che permetta all'utente di leggere facilmente un post. Flash non è necessario per questo.
Tuttavia, se hai intenzione di creare un sito portfolio fotografico, allora vuoi mostrare il contenuto (immagini) in modo facile e semplice all'utente. Fare clic sui collegamenti e attendere che le immagini vengano caricate non è una grande esperienza utente. Flash è una possibilità per fornire il contenuto in modo più intuitivo. Il sito di Lesse Pedersen utilizza una grande navigazione per servire il contenuto (immagini) all'utente.
C'è anche un ottimo post sul sito Wake Up Later chiamato 6 Luoghi in cui Flash non appartiene, credo che tutti voi dovreste leggere.
Mi sono divertito ancora una volta a scrivere per Activetuts +, spero che tu abbia imparato qualcosa e perché non partecipare alla discussione? Lascia un commento, e puoi ovviamente trovarmi su Twitter, @DanielApt.
