SWFAddress, SEO e Flex Datagrid per i codici taglia e incolla

Questo articolo mostra come impostare il deep linking nella tua applicazione Flex che può essere visto dagli utenti finali e dai motori di ricerca.

È un tutorial principalmente per tutti gli altri tagliatori e pastori che non hanno il tempo o l'energia per imparare veramente come creare una classe proxy da utilizzare con SWFAddress, e molto probabilmente non sono programmatori di mestiere.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo, notiamo come la barra del browser riflette il titolo della pagina, Inizio:

Scarica i file di origine e usali come riferimento mentre leggi questo tutorial.


sfondo

Questo è il mio primo tutorial su Flex, e uno che posso scrivere solo dopo aver affermato quanto segue: sono in realtà solo un coder taglia-e-incolla, anche se con quasi 10 anni di AS1, AS2 e ora l'esperienza AS3, che ha dato mi sento abbastanza bene con esso. Scrivo alcune funzioni, if-statement, vars e cose del genere - ma sono più di un hackmeister che altro, che a volte porta alla codifica creativa, mentre altre volte porta a perdere tempo in cose che non ho leggi abbastanza su prima di sperimentare!

Il deep linking è molto più che solo SEO; si tratta di usabilità. Penso molto di più sull'usabilità dopo aver costruito un'app di e-learning. Ora mi accorgo che quando un'applicazione Flex o Flash ti fa uscire completamente dall'app quando premi il pulsante Indietro, e pensi a come non voglio che i miei utenti provino fastidio. Chi vuole scorrere tutte le tue lezioni alla ricerca dell'unica attività che desidera fare di nuovo, o inviare un'e-mail ai propri amici?

Il deep linking è molto più che solo SEO; si tratta di usabilità.

Questo è un tutorial principalmente per tutti gli altri cut-and-pasters che non hanno il tempo o l'energia per imparare veramente come creare una classe proxy da usare con SWFAddress, e molto probabilmente non sono programmatori per mestiere. Mentre riesco ad apprezzare alcune delle esercitazioni del sito SWFAddress che danno un sacco di dettagli tecnici sul perché devi fare le cose correttamente, e su come le cattive pratiche interromperanno la tua app, ecc. A volte una persona ha solo bisogno di un modo per fare le cose lavorare in un modo che possono capire. Alcuni di questi articoli ti fanno pensare che non è possibile ottenere un deep linking working a meno che tu non possa scrivere una gran quantità di codice da solo.

La ragione per cui condividerò la mia esperienza di codifica su questo è perché ho cercato su google su SWFAddress, datagrid e Flex, senza alcun risultato. Non ho trovato esempi diretti di qualcuno che utilizza SWFAddress per creare URL dinamici dal proprio datagrid all'interno della propria app Flex. Mio marito ha scherzato sul fatto che sia perché è così ovvio che nessuno si è preso la briga di parlarne, ma dato che puoi trovare esempi di Flex, tutorial e codice per quasi tutti i problemi di codifica di base, ne dubito fortemente. Quindi qui vai!


Passaggio 1: riunisci i tuoi strumenti

Avrai bisogno dei seguenti elementi per completare questo tutorial:

  1. Il tuo IDE di costruzione Flex / Flash (ad esempio: Flex Builder, Flash, FlashDevelop).
  2. SWFAddress 2.4 e SWFObject 2.2
  3. GAforFlash (monitoraggio di Google Analytics per Adobe Flash).
  4. Una buona app per fogli di lavoro.
  5. Una configurazione Apache o PHP che puoi testare, o un sito web che puoi caricare e testare.
  6. Un buon motore di ricerca e sostituzione come Notepad ++ per ripulire il testo estratto dai fogli di calcolo.
  7. Il creatore gratuito di Vos Gsitemap.

Puoi anche scaricare il pacchetto di file per questo tutorial, che include un file chiave contenente gli esempi di actionscript dal basso: RoutingEvents.as.


Passaggio 2: Importa SWFAddress; Crea viste URL

Dal momento che mi concentro sul datagrid e SEO per questo tutorial; Presumo che tu sappia già come creare le visualizzazioni URL per SWFAddress. In caso contrario, è possibile consultare il codice per creare le visualizzazioni URL in RoutingEvents.as file incluso per questo tutorial per vedere come l'ho fatto.


Passaggio 3: crea la tua variabile Datagrid

Sapevo che dovevo legare gli URL della mia pagina a una variabile presente nell'XML che popola il mio datagrid. Ottenere quella variabile per scrivere sull'URL è facile. Ho creato una var dall'attributo che volevo utilizzare dall'XML per gli URL della mia pagina:

 [Legenda] slug var privato: stringa

Così bello, sono stato in grado di impostare rapidamente gli URL per i miei oggetti datagrid, che hanno immediatamente portato alla piacevole esperienza di vedere i miei clic datagrid in realtà modificare l'URL nel mio browser.

Ma ovviamente il deep linking consiste in due cose: dire al tuo browser cosa vuoi che veda, e il tuo browser che dice alla tua app cosa vuole vedere IT. La seconda parte si è dimostrata molto più difficile.

Quello che alla fine ho avuto il mio cervello in giro dopo giorni di armeggiare, è stato che quando navighi verso un URL all'interno della tua app direttamente dal tuo browser - la tua app non ha idea di quali dati vuoi che vengano visualizzati. La tua app sa solo cosa comunichi tramite l'URL e cosa hai impostato come regole da seguire se determinati valori vengono trovati in quell'URL. Quindi, se hai più di un'origine dati o un file xml, come fanno le app più complicate, dovrai impostare le condizioni per presentare i dati esatti che le richieste URL sono presenti al fine di servire correttamente la visualizzazione che l'URL è richiedendo.

All'inizio pensavo ingenuamente che semplicemente usassi quello lumaca var Potrei dire a SWFAddress di cercare quel valore, quindi andare al numero di indice della voce corrispondente nel datagrid. Ma impostarlo e ottenere la variabile correttamente trasmessa al momento giusto, è avvenuta solo dopo numerosi tentativi ed errori; tonnellate di Alert.show (slug) e altri avvisi per vedere cosa è stato effettivamente passato a che ora, e qualche grande codice che ho trovato online per abbinare una riga datagrid con un valore particolare, quindi scorrere fino all'indice per mostrare il valore.

Sono d'accordo con uno degli articoli / tutorial più complicati trovati sul sito web di SWFAddress: devi scegliere le variabili con molta attenzione quando li usi con SWFAddress. Assicurati che contengano alcune informazioni valide: informazioni che puoi analizzare in termini di titoli di pagina e identificatori univoci per un oggetto dati o un elenco. Mio ActivityID variabile dal mio XML si è rivelata la var perfetta, perché tutti gli activityIds per una determinata lezione sono:

  1. unico
  2. contiene il nome della lezione
  3. contenere il tipo di attività

Alcuni esempi di attività:

  • present_verbsvocab
  • present_verbsquiz
  • weather_worksheet

Questa informazione è ora ciò che SWFAddress sta usando per navigare verso la lezione giusta e l'attività individuale.


Passaggio 4: creare una variabile di sezione se necessario

Per altre cose come le sezioni, puoi impostarle usando SWFAddress come setter / getter (sto usando questo termine liberamente, francamente non sono sicuro che questo soddisfi la definizione tecnica di un setter / getter! [Ed: puoi trovare con questo tutorial;)]) - nel mio caso ho impostato la variabile chiamata sezione quando un utente fa clic su una voce datagrid in quella sezione, o naviga verso una nuova sezione, quindi ottengo quel valore di nuovo fuori dall'URL se qualcuno naviga verso quella sezione. Nel mio caso le mie sezioni principali sono:

  • bambini
  • inizio
  • intermedio
  • notiziario

Queste sezioni sono impostate nel mio handleSWFAddress () funzione:

 handle di funzioni privateSWFAddress (event: SWFAddressEvent): void case "/ childrens": section = "childrens" break; 

Passaggio 5: passa le variabili tramite il tuo evento Click di Datagrid

Poi nel mio evento click per il datagrid, passo il sezione e lumaca variabili come l'URL:

 selectedRow = Row (myD slug = selectedRow.activityId; SWFAddress.setValue ("/" + section + "/" + slug);

Passaggio 6: passare il titolo al browser tramite l'evento di clic Datagrid

Impostare il titolo era leggermente più complicato, perché volevo usare il titolo della lezione che non è in realtà parte dell'XML smontato che sto usando per questa app demo - quindi ho aggiunto un attributo che deve essere presente solo nel primo riga del mio XML per impostare il titolo della lezione.

Ecco il codice dal mio evento clickagratis che rende questo possibile:

 SWFAddress.setTitle (myDG.dataProvider.getItemAt (0) .title + "Spanish Lesson -" + selectedRow.lessonTitle);

Il getItemAt (0) è una bella piccola funzione che mi ha permesso di inserire un titolo per il browser solo nella prima riga di ogni file XML, che offre una descrizione migliore delle pagine. Ora invece delle mie pagine di attività didattiche che leggono:

Attività di vocabolario

Leggono:

Presente verbi lezione di spagnolo - attività di vocabolario

Funziona perché getItemAt (0) recupera il primo nodo dal file XML.


Passo 7: Analizza le tue stringhe di variabili Datagrid nel tuo gestore SWFAddress

Per usare il tuo lumaca valore efficace, devi estrarlo dal tuo URL. Così ho finalmente capito che avevo bisogno di un nuovo variabile, che chiamo slugAdd. Lo uso nel mio gestore SWFAddress:

 handle di funzioni privateSWFAddress (event: SWFAddressEvent): void var path: String = SWFAddress.getPath (); var slugAdd: String = SWFAddress.getPath (); slugAdd = slugAdd.replace (/ \ / childrens \ // g, ""); slugAdd = slugAdd.replace (/ \ / begin \ // g, ""); slugAdd = slugAdd.replace (/ \ / intermediate \ // g, ""); slugAdd = slugAdd.replace (/ \ / newsletter \ // g, ""); //Alert.show (slugAdd)

Questo parsing di stringhe è così semplice qui - ma deve essere esatto per funzionare! Il tuo slugAdd deve essere identico al valore di slug, in modo che la funzione di corrispondenza dei datagrid funzioni e gli URL ti indirizzino alla riga corretta. Guardando un po 'più da vicino, stiamo sostituendo semplicemente String. Prendi un URL come:

http://www.myapp.com/main.html#/childrens/present_verbsvocab

E dopo che lo fai

 slugAdd = slugAdd.replace (/ \ / childrens \ // g, "")

Se esegui il Alert.show (slugAdd) - otterrete

present_verbsvocab

(Sono consapevole del fatto che il mio uso del trattino basso nel mio valore di slug non è la migliore prassi per nominare le convenzioni per gli URL, che richiedono che io usi il trattino invece - ma abbiamo più di 1000 lezioni nella nostra app principale che usa questo, quindi me lo sto attaccando).

La cosa da ricordare sul sostituire() la funzione in AS3 è che il valore della stringa deve essere contenuto tra le barre -

 slugAdd.replace (/ childrens / g, "myReplacementText");

? e se vuoi sostituire anche una barra in avanti, devi sfuggire a quei personaggi usando una barra rovesciata prima di essa. È così che ti ritrovi

 slugAdd = slugAdd.replace (/ \ / childrens \ // g, "")

Il g parte dice di fare la sostituzione su tutti personaggi e non solo il primo, e il "" è per la tua sostituzione, che nel mio caso non aveva alcun valore. Per maggiori informazioni, controlla i LiveDocs su String.replace () e RegExp.

Sembra così semplice ora, ma ci sono voluti molti google per cercare di capire che non dovevo usare una lunga e complicata funzione solo per eliminare alcuni valori da una stringa. Caramba Vorrei aver trovato un tutorial come questo prima di iniziare :) Alrighty quindi ora abbiamo il nostro slug, o l'URL che stiamo ricevendo dal file XML del datagrid, passato come una nuova var chiamata slugAdd. Ma abbiamo ancora bisogno di fare qualcosa con questa variabile.


Passaggio 8: Ottieni il tuo Datagrid per visualizzare la riga corretta e attivare tutti gli eventi

Ci sono fondamentalmente tre funzioni essenziali che rendono il mio lavoro di deep linking SWFAddress (non ho intenzione di coprire il SWFAddress.setValue () perché è così facile e ovvio che penso che un uomo delle grotte potrebbe usarlo :)

Funzione uno: handleSWFAddress ()

 handleSWFAddress (evento: SWFAddressEvent): void

Il tuo cavallo di battaglia per tutte le cose di navigazione. Averlo come evento sembra essere importante, poiché all'inizio ho usato un altro esempio online che non ha usato questa distinzione, e questo sicuramente funziona meglio.

Funzione due: getSelectedItem ()

 getSelectedItem (): void

Questo deve essere chiamato dopo i dati sono già compilati o nel gestore di risultati per la chiamata dati. Il tempismo è molto importante qui, altrimenti i tuoi articoli non verranno caricati quando gli utenti digitano l'URL direttamente nel browser invece di fare clic sulla tua app! Questa funzione corrisponde a un URL in arrivo con un elemento specifico da un datagrid.

Funzione tre: itemfromAddress ()

 itemfromAddress (): void

Questo è ciò che effettivamente fa qualcosa con la voce datagrid - replicando il mio gestore di click datagrid in un non evento funzione, dal momento che non è possibile chiamare una funzione basata su eventi da un'altra funzione.

Prendiamo questi in ordine di come verranno utilizzati se qualcuno inserisce un URL nel browser, cercando i dati dalla tua app. Dato che questo tutorial si concentra sulla navigazione del tuo datagrid - pubblicherò questo esempio dal mio handleSWFAddress () anche se puoi vedere il resto se guardi il RoutingEvents.as file incluso con il download per questo tutorial.

 caso "/ childrens /" + slugAdd:

Questo codice di seguito è il codice di Google Analytics che è facile aggiungere direttamente accanto a SWFAddress.

 tracker.trackPageview ("/ childrens /" + slugAdd);

Questa istruzione if controlla se il myURL variabile che nutre il mio HTTPService la chiamata dati è ciò di cui abbiamo bisogno per questa sezione e, se questa variabile non è già impostata, è molto probabile perché l'utente sta navigando tramite URL e l'app non è ancora stata caricata, quindi dobbiamo dire all'app quali dati questo URL è mi aspettavo di vedere. Non vorremmo rimuovere i dati di dataProvider se l'utente è già nell'app e navigare attraverso il datagrid, motivo per cui abbiamo bisogno del Se dichiarazione. Inoltre, nel caso in cui siano stati da qualche altra parte nella nostra app con altri dati, e navigare tramite URL a questa vista - abbiamo bisogno di chuck quei dati, aggiornare il datagrid e inviare nuovamente il HTTPService chiamata dati - altrimenti finiremo con dati extra nel nostro datagrid che rovinerà la nostra corrispondenza di lumaca variabili con slugAdd variabili.

 if (myUrl! = 'data / childrens_updown.xml') myUrl = 'data / childrens_updown.xml' invalidateDisplayList (); lessonsDataProvider.removeAll () lessonsDataProvider.refresh () httpService.send (); myDG.dataProvider = lessonsDataProvider; myDG.validateNow () //Alert.show(" Ho cambiato i dati in "+ myUrl)

Se l'utente sta inserendo tramite URL, ha già eseguito il getSelectedItem () funzione alla fine della loro chiamata dati. Ma se quei dati sono già stati caricati e stanno ancora cercando di navigare attraverso il browser invece di cliccare sul datagrid, dovranno abbinare quell'URL del browser con l'attività che il browser si aspetta di vedere, quindi dobbiamo chiamare questa funzione in quel caso:

 getSelectedItem () currentState = "class1State"

Stiamo impostando il nostro sezione variabile qui per assicurare che quando un utente fa clic attraverso l'app, il corretto sezione sarà aggiunto all'URL,

 section = interruzione "childrens";

Quindi guardiamo di nuovo il codice tutti insieme:

 caso "/ childrens /" + slugAdd: tracker.trackPageview ("/ childrens /" + slugAdd); if (myUrl! = 'data / childrens_updown.xml') myUrl = 'data / childrens_updown.xml' invalidateDisplayList (); lessonsDataProvider.removeAll () lessonsDataProvider.refresh () httpService.send (); myDG.dataProvider = lessonsDataProvider; myDG.validateNow () getSelectedItem () currentState = "class1State" section = "childrens" break;

Ora diamo un'occhiata al pezzo di bellezza che ha fatto davvero funzionare il tutto. L'ho modificato da un pezzo di codice scritto da Anuj Gakhar sul suo blog Flex: Come preselezionare un oggetto in DataGrid:

 funzione privata getSelectedItem (): void //Alert.show ("Sto facendo un getSelectedItem") var slugAdd: String = SWFAddress.getPath (); slugAdd = slugAdd.replace (/ \ / childrens \ // g, ""); slugAdd = slugAdd.replace (/ \ / begin \ // g, ""); slugAdd = slugAdd.replace (/ \ / intermediate \ // g, ""); slugAdd = slugAdd.replace (/ \ / newsletter \ // g, ""); //Alert.show (slugAdd) //Alert.show (myDG.dataProvider.length + "dataProvider length") var gData: Object = myDG.dataProvider; if (slugAdd) for (var i: int = 0; i < myDG.dataProvider.length; i++)  if (myDG.dataProvider[i].activityId == slugAdd)  myDG.selectedItem = myDG.dataProvider[i]; //Alert.show (myDG.selectedItem.activityId + " " + slugAdd + " index = " + myDG.selectedIndex) myDG.validateNow(); myDG.scrollToIndex(i); itemfromAddress()    

Questi avvisi mi hanno davvero aiutato, poiché in origine avevo questo codice in cima al mio handleSWFAddress () funzione, che non ha funzionato. Questa funzione doveva essere chiamata alla fine del gestore dei risultati di dataProvider, che a sua volta doveva essere chiamato dai miei switch contenenti il slugAdd variabile acquisita da SWFAddress. Altrimenti i dati non ci sono ancora e il tuo getSelectedItem () non troverà alcun elemento che corrisponda al valore URL che è stato acquisito.

E infine, la funzione che lega il mio SWFAddress alla gestione di tutti insieme agli eventi che cambiano ciò che l'utente vede: itemfromAddress (). Questo cambia la lezione SWF visualizzata nel mio SWFLoader, proprio come farebbe se un utente cliccasse su una riga diversa nel datagrid.

 funzione privata itemfromAddress (): void swfLoader.unloadAndStop (); SoundMixer.stopAll (); selectedRow = Row (myDG.selectedItem); swfLoader.source = selectedRow.fileName; 

Passaggio 9: assicurarsi che DataProvider sia corretto e che i dati siano elencati una sola volta

Mi sono imbattuto in un altro problema: nel mio caso, ho scoperto che il caricamento dei dati nel mio datagrid principale su init dell'applicazione avrebbe causato problemi durante il tentativo di cambiare i dati quando le persone tentano di accedere a dati diversi direttamente tramite URL. Gli stessi dati che avrebbero caricato correttamente quando hanno fatto clic sull'app, sono diventati inaccessibili se hanno provato a utilizzare lo stesso URL direttamente su una nuova pagina in cui l'app non era ancora stata caricata. Questo mi ha causato un'intera giornata di dolore mentre aggiungevo ancora un altro gruppo di avvisi al mio codice, e ho cercato di capire quale fosse il problema con il caricamento dei dati.

Alla fine, per il mio dataProvider che è dinamico, ho dovuto lasciare questo vuoto sull'iniziale dell'app. Ciò significava cambiare la schermata iniziale da uno con i dati a uno senza. L'altra soluzione potrebbe essere quella di usare un altro dataProvider, ma ho deciso che non avevo bisogno di farlo, in quanto una schermata statica funziona meglio la schermata principale dell'app.

Ho anche capito che dovevo usare quelli Se istruzioni per verificare se il dataProtider corretto era già caricato o meno.

Mentre giravo il cervello attorno a SWFAddress, dovevo ricordare a me stesso che il browser non ha idea di quali dati si stia tentando di caricare a meno che tu Dillo quali dati dovrebbero essere lì. Di per sé, la tua variabile slugAdd non significa niente. Ma una volta che acquisisci quel valore e metti la variabile in gioco nel tuo handleSWFAddress () funzione, puoi facilmente abbinarlo al tuo indice di datagrid ed eseguire qualcosa come la funzione click per il tuo datagrid.

Un'altra cosa che dovevo fare era mantenere i miei dati in lista due volte nel datagrid, che può essere un problema quando si invia lo stesso HTTPService richiesta in diverse parti della tua app. Ho trovato che questo funziona bene per mantenere datagrids da non riuscire a rimuovere l'XML dalla richiesta precedente di dati.

 lessonsDataProvider.removeAll () lessonsDataProvider.refresh () httpService.send (); myDG.dataProvider = lessonsDataProvider; myDG.validateNow ()

Fare il Rimuovi tutto() sulle lezioniDataProvider (il nome del mio HTTPService richiesta variabile) era la chiave per eliminare le voci XML duplicate. Mentre non sono sicuro che devi continuare a fare il httpService.send () ogni volta che vuoi caricare un set di dati specifico direttamente da un URL anziché solo nel dentro() dell'app, farlo come funziona, quindi è quello con cui sono rimasto. Ho due richieste di dati in diverse parti dell'app (lezioniDataProvider e lessonsDataProvider6, lasciate dal mio ridicolo SEI HTTPService richiede di iniziare con :) - quindi se hai solo una richiesta di dati, forse questo non è necessario (nell'altra parte della mia app, httpService6.send () è necessario).


Passaggio 10: preparazione per l'implementazione SEO

Ora per il lavoro aggiuntivo piuttosto aggravante che dovevo fare per rendere la mia app SEO friendly. Di per sé, SWFAddress offre esattamente zero vantaggi SEO. Le tue pagine non entreranno in Google, Yahoo o qualsiasi altro motore di ricerca. No ands, ifs o buts. Perché? Perché l'intero schema di collegamento profondo di SWFAddress dipende da questi frammenti di "hash": il cancelletto # che viene utilizzato in ogni pagina creata da SWFAddress. E Google ignora tutto dopo quel simbolo, quindi il robot non vedrà mai nulla di diverso dalla tua pagina principale. Non importa quanti URL hai.

E l'esempio SEO fornito dagli utenti di SWFAddress non lo rende esattamente una cosa intuitiva per replicarlo usando i propri dati. L'idea che avresti bisogno di ricreare il tuo sito in HTML per nasconderlo sotto il tuo altro sito - è in realtà solo un'opzione per le persone che hanno un sito web Flash o qualcosa del genere. Per chiunque abbia un'app di Flex seria piuttosto che un sito di sbuffi di qualche tipo, è un po 'uno scherzo. Come esattamente dovresti costruire un sito alternativo quando tutto è basato su attività SWF alimentate da XML?

Ma ho capito che non dovevo creare altro che un link, un titolo e una descrizione che è solo un'altra versione dello stesso titolo, e usando un foglio di calcolo che è quello che uso per costruire tutto il mio unità didattiche comunque, potrei facilmente tagliare e incollare i valori corrispondenti agli URL della mia app Flex.


Passaggio 11: Scarica il pacchetto PHP SEO alternativo; Segui breve tutorial

I file che ho usato per la mia implementazione SEO per SWFAddress sono stati modificati dal pacchetto trovato su pokd.org. Il tutorial per l'utilizzo di questi file è breve, semplice e facile da seguire. Puoi trovare il tutorial qui. La versione SEO di Asual.com non ha funzionato affatto per me, e ho trovato altre persone lamentarsi della stessa cosa. Non perdere tempo: scarica la versione da pokd.org, o usa i file trovati nel pacchetto di download per questo tutorial. Ho troncato un po 'i miei file per mostrare solo le mie prime due sezioni: childrens e begin, per rendere i file più facili da leggere.


Passaggio 12: Disattiva Javascript nel tuo browser per i test

Devi disattivare javascript nel tuo browser per testare la versione non Flex / Flash del tuo sito! Questo e rende visibile l'overflow della divisione principale. A meno che non si disponga di un sito di 5 o 10 pagine, l'overflow nascosto rende impossibile il test. I file SEO aggiuntivi che utilizzerai consistono di 2 file PHP, 1 file .htaccess e 1 file Javascript aggiuntivo che deve essere inserito nel tuo / SWFAddress cartella all'interno del tuo flex / Bin-release cartella).


Passaggio 13: crea i tuoi URL SEO e i tuoi titoli di pagina tramite foglio di calcolo

Apri l'applicazione per fogli di calcolo e apri il file intitolato swfaddress_seo_index.ods o .xls che troverai nel pacchetto di download per questo tutorial. Modificali in base alle tue esigenze. Questo è il foglio di calcolo in cui ho inserito i valori per l'URL della mia applicazione, le sezioni e il lumaca indirizzi per creare tutto il swf_link [a hrefs] necessario per il index.php file (Avrai bisogno del tuo intero URL "pulito" per ogni link senza il main.html # così come il titolo della tua pagina). Taglia e incolla dall'app del foglio di calcolo in Notepad ++ o in qualsiasi editor di codice di testo che utilizzi, e assicurati di non avere tabulazioni o spazi non necessari e che tutto sia corretto per incollarlo nel tuo file PHP.

Il mio nuovo URL completo appare nel browser, nota che il simbolo dell'hash (#) non è più disponibile:

http://www.instaspanish.com/dev/demo/childrens/up_downvocab


Passaggio 14: aggiungi i tuoi collegamenti e titoli al file Index.php

Siccome ho più di 70 pagine, ho scelto solo di mettere le sezioni su index.php pagina. Le altre demo che ho visto includono tutte le pagine del sito, ma questi sono piccoli siti. Incluso un link ad ogni pagina sul tuo index.php significa che ogni volta che il bot di Google visita una singola pagina, vedrà tutti quei link. Questa è una cattiva idea. Quindi metti solo le tue pagine principali nel index.php pagina, e lascia che il datasource.php prenditi cura di tutto il resto.


Passaggio 15: crea le tue dichiarazioni switch tramite foglio di calcolo

Dai un'occhiata al foglio di calcolo intitolato swfaddress_seo_datasource.ods o .xls nei file per questo progetto. Questo esempio mostra come ho tagliato e incollato i valori dal mio database per popolare le istruzioni switch. Dopo aver compilato questo foglio di lavoro con i propri valori, utilizzare un editor di codice come Notepad ++ per rimuovere eventuali schede aggiuntive e verificare la corretta formattazione prima di incollare nel file PHP.


Passaggio 16: aggiungi le istruzioni dello switch al file Datasource.php

Le dichiarazioni switch sono piuttosto semplici, anche se nel mio caso volevo includere anche il contenuto di ogni file XML che alimenta le mie attività educative, al fine di utilizzare quelle parole chiave in ogni file visto dai motori di ricerca. Gli esempi che ho visto hanno tutti ipotizzato che qualcuno si sarebbe seduto e avrebbe creato descrizioni di pagine uniche per ogni file rappresentato in datasource.php file, ma questa è un'opzione terribilmente dispendiosa in termini di tempo per qualcuno con dozzine o centinaia di voci datagrid nel proprio sito Flex. Così ho creato una nuova pagina content.php che utilizza una descrizione di pagina diversa a seconda di quale attività si trova nell'URL. Inoltre, accludo la stampa dall'XML per qualsiasi pagina che abbia anche un file XML associato.

 caso '/ inizio': echo ('

Questa sezione è per le persone dai 10 anni in su che vogliono iniziare con le basi in un corso di spagnolo di 18 settimane. Alcuni punti salienti: pronuncia e accenti verbi e tempi verbali che iniziano a parlare Fogli di lavoro e quiz spagnoli Demo di eLearning spagnolo Insta Beginning Spanish Lesson.

'); rompere; caso '/ childrens / up_downvocab': echo ('

Lezione di spagnolo per bambini - Su e giù - Elenco di vocaboli sulle lezioni

'); $ xml_file = 'http://www.instaspanish.com/dev/activities/assets/lessons/up_down/xml/hover_word_list.xml'; givemeText (); outputXML (); rompere;

Passaggio 17: modifica il tuo file .htaccess

Il file .htaccess deve essere regolato in base alla cartella di base per la configurazione particolare del server. Ad esempio, la mia cartella di test XAMPP all'interno di / htdocs è chiamato instademo, quindi il mio .htaccess ha questa linea per il RewriteBase:

RewriteBase / instademo

L'applicazione Flex sul mio server live è contenuta anche in una sottocartella e non nella mia cartella Inizio, quindi la riga sopra in quel caso punta a questa cartella. Si noti che inizia con una barra in avanti ma non avere una barra finale.


Passaggio 18: testare localmente il sito PHP di SEO

Accendi XAMPP o qualsiasi altra cosa tu usi per la tua configurazione locale Apache / PHP, e metti i tuoi file di implementazione PHP, .htaccess, javascript e Flex in una sottocartella del / htdocs cartella o qualsiasi altra configurazione utilizzata come cartella per i file Web. Se vuoi testare il sito SEO, dovrai farlo disattivare javascript. Questo è il motore di ricerca della versione che vedrà, così come qualsiasi visitatore web che non abbia javascript o Flash abilitato. Assicurati di non vedere errori PHP e che i tuoi link funzionino correttamente.


Passaggio 19: crea la tua Sitemap

La Sitemap è la cosa più facile da creare. Prendi il swfaddress_link valori dal tuo swfaddress_seo_index.ods o .xls foglio di calcolo. Incollale tutti in Notepad ++ o nell'editor di codice ed esegui una ricerca e sostituisci per rimuovere spazi o tabulazioni, quindi aggiungi l'URL completo. Nel mio caso, ho preso valori come:

/ Bambini / up_downvocab

/ Bambini / up_downlesson1

/ beginningpresent_verbslesson1

/ beginningpresent_verbslesson2

E li ho cambiati in:

http://www.instaspanish.com/dev/demo/childrens/up_downvocab

http://www.instaspanish.com/dev/demo/childrens/up_downlesson1

http://www.instaspanish.com/dev/demo/beginningpresent_verbslesson1

http://www.instaspanish.com/dev/demo/beginningpresent_verbslesson2

Salva questo file come .testo file, quindi apri il tuo programma Vigos Gsitemaps e importa questi URL per creare la tua Sitemap di Google.


Passaggio 20: invia la tua Sitemap a Google

Le tue pagine SEO hanno una migliore possibilità di essere trovate rapidamente da Google se invii una sitemap. Se non ne hai già uno, crea un account Strumenti per i Webmaster su Google.com. Da lì puoi facilmente aggiungere il tuo sito web e inviare la sitemap XML che hai già creato nel programma Gsitemap.


Conclusione

Spero che questo tutorial abbia aiutato ad offrire alcuni esempi e una road map per chiunque abbia difficoltà con SWFAddress e un datagrid Flex. Se stai seguendo il tutorial e vuoi dare un'occhiata più da vicino al codice dagli esempi, assicurati di dare un