SWFAddress, SEO en de Flex Datagrid voor knippen en plakken coders

In dit artikel wordt uitgelegd hoe u deep links kunt instellen in uw Flex-toepassing die zowel door eindgebruikers als door zoekmachines kunnen worden bekeken.

Het is een tutorial voor alle andere knip-en-knippers die niet de tijd of energie hebben om echt te leren hoe een proxyklasse te maken voor gebruik met SWFAddress, en hoogstwaarschijnlijk geen programmeurs zijn door handel.


Eindresultaat voorbeeld

Laten we eens kijken naar het uiteindelijke resultaat waar we naartoe zullen werken, merk op hoe de browserbalk de titel van de pagina weergeeft, Begin:

Download de bronbestanden en gebruik ze als referentie terwijl u deze zelfstudie leest.


Achtergrond

Dit is mijn eerste Flex-zelfstudie en die kan ik alleen schrijven nadat ik het volgende voorbehoud heb gemaakt: ik ben eigenlijk maar een knip-en-plak-coder, zij het met bijna 10 jaar AS1, AS2 en nu AS3-ervaring, die heeft gegeven ik heb er een behoorlijk goed comfortniveau mee. Ik schrijf wel een paar functies, if-statements, vars en dergelijke, maar ik ben meer een hackmeister dan wat dan ook, wat soms leidt tot creatieve codering, terwijl andere keren tot verspilde tijd leiden aan dingen die ik niet heb lees voldoende over voordat je ermee experimenteert!

Deep linking gaat over veel meer dan alleen SEO; het gaat over bruikbaarheid. Ik denk veel meer na over het gebruik van een e-learning-app. Nu merk ik dat een Flex- of Flash-app je helemaal uit de app haalt als je op de knop Terug klikt, en bedenkt hoe ik niet wil dat mijn gebruikers die ergernis ervaren. Wie wil door al uw lessen scrollen op zoek naar de enige activiteit die ze opnieuw willen doen, of e-mail naar hun vriend?

Deep linking gaat over veel meer dan alleen SEO; het gaat over bruikbaarheid.

Dit is een tutorial voor alle andere knip-en-knippers die niet de tijd of energie hebben om echt te leren hoe een proxyklasse te maken voor gebruik met SWFAddress en hoogstwaarschijnlijk geen programmeurs door handel. Hoewel ik enkele tutorials van de SWFAddress-site kan waarderen die veel technische bijzonderheden geven over waarom je dingen goed moet doen en hoe slechte praktijken je app zullen breken, enz. - Soms heeft iemand gewoon een manier nodig om dingen te maken werk op een manier die ze kunnen begrijpen. Sommige van die artikelen doen je denken dat je onmogelijk een dieper linken kunt krijgen als je werkt, tenzij je zelf een hoop code kunt schrijven.

De reden dat ik mijn codeerervaring hiermee wil delen, is omdat ik googelde in het SWFAddress, datagrid en Flex, maar het mocht niet baten. Ik heb geen directe voorbeelden gevonden van iemand die met behulp van SWFAddress dynamische URL's uit hun datagrid binnen hun Flex-app maakt. Mijn man maakte grapjes dat het zo moest zijn omdat het zo voor de hand ligt dat niemand de moeite heeft genomen om erover te bloggen, maar omdat je Flex-voorbeelden, tutorials en code voor bijna elk standaard codeerprobleem kunt vinden, betwijfel ik dat ten zeerste. Dus hier ga je!


Stap 1: verzamel je tools

Je hebt de volgende items nodig om deze tutorial te voltooien:

  1. Uw Flex / Flash-gebouw-IDE (bijvoorbeeld: Flex Builder, Flash, FlashDevelop).
  2. SWFAddress 2.4 en SWFObject 2.2
  3. GAforFlash (Google Analytics-tracking voor Adobe Flash).
  4. Een goede spreadsheet-app.
  5. Een Apache- of PHP-installatie waarmee u kunt testen, of een website die u kunt uploaden en testen.
  6. Een goede zoek- en vervang-editor zoals Notepad ++ om de tekst op te ruimen die u uit de spreadsheets haalt.
  7. De gratis Vigos Gsitemap-maker.

U kunt ook het bestandspakket downloaden voor deze zelfstudie, die een sleutelbestand bevat met de voorbeelden van actiescript van onderaf: RoutingEvents.as.


Stap 2: Importeer SWFAddress; URL-weergaven maken

Omdat ik me concentreer op de datagrid en SEO voor deze tutorial; Ik neem aan dat u al weet hoe u de URL-weergaven voor SWFAddress maakt. Als u dat niet doet, kunt u de code bekijken voor het maken van de URL-weergaven in de RoutingEvents.as bestand opgenomen voor deze tutorial om te zien hoe ik het heb gedaan.


Stap 3: Maak uw Datagrid-variabele

Ik wist meteen dat ik mijn pagina-URL's moest koppelen aan een variabele in de XML die mijn gegevensverzameling bevat. Het is gemakkelijk om die variabele naar de URL te laten schrijven. Ik heb een var gemaakt van het attribuut dat ik wilde gebruiken uit de XML voor mijn pagina-URL's:

 [Bindbaar] private var slug: String

Zo geweldig dat ik snel de URL's voor mijn datagrid-items kon instellen, wat meteen resulteerde in de prettige ervaring dat mijn datagrid-klikken de URL in mijn browser daadwerkelijk veranderen.

Maar deep linking bestaat natuurlijk uit twee dingen: uw browser laten weten wat u wilt zien en uw browser vertelt uw app wat IT wil zien. Het tweede deel bleek veel moeilijker te zijn.

Waar ik na een paar dagen sleutelen eindelijk aan terugdeinsde, was dat wanneer je vanuit je browser direct naar een URL in je app navigeert - je app geen idee heeft welke gegevens je wilt weergeven. Je app weet alleen wat je communiceert via de URL en wat je hebt ingesteld als de regels die moeten worden gevolgd als bepaalde waarden in die URL worden gevonden. Dus als je meer dan één gegevensbron of xml-bestand hebt, zoals de meest gecompliceerde apps doen - zul je voorwaarden moeten instellen voor de presentatie van de exacte gegevens die de URL-eisen vereisen om de weergave die de URL is te laten slagen aanvragen.

Aanvankelijk dacht ik naïef dat door dat gewoon te gebruiken naaktslak var Ik kon SWFAddress vertellen om naar die waarde te zoeken en vervolgens naar het indexnummer van de overeenkomstige invoer in de datagrid te gaan. Maar dat in te stellen en de variabele op het juiste moment correct door te geven - gebeurde alleen na uitgebreide vallen en opstaan; tonnen Alert.show (slug) en andere meldingen om te zien wat er op dat moment werd gepasseerd, en enkele geweldige code die ik online vond om een ​​datagrid-rij met een bepaalde waarde overeen te laten komen, ga dan naar de index om de waarde.

Ik ben het eens met een van de meer gecompliceerde artikelen / tutorials die te vinden zijn op de SWFAddress-website: je moet je variabelen heel voorzichtig kiezen wanneer je ze met SWFAddress gebruikt. Zorg ervoor dat ze een aantal goede informatie bevatten - informatie die u kunt analyseren in zaken als paginatitels en unieke ID's voor een datagrid- of lijstitem. Mijn activityId variabele van mijn XML bleek de perfecte var te zijn, omdat alle activityIds voor een gegeven les zijn:

  1. uniek
  2. de lesnaam bevatten
  3. bevatten het activiteitstype

Een aantal voorbeelden van activiteits-id's:

  • present_verbsvocab
  • present_verbsquiz
  • weather_worksheet

Deze informatie is nu wat SWF-adres gebruikt om naar de juiste les en individuele activiteit te navigeren.


Stap 4: Maak een sectie variabele indien nodig

Voor andere dingen, zoals secties, kun je die instellen met behulp van SWFAddress als je setter / getter (ik gebruik deze term losjes, omdat ik eerlijk gezegd niet zeker weet of dit voldoet aan de technische definitie van een setter / getter! [Ed: je kunt vinden uit met deze tutorial;)]) - in mijn geval stel ik de variabele genaamd in sectie wanneer een gebruiker op een datagrid-item in die sectie klikt, of naar een nieuwe sectie navigeert, haal ik die waarde uit de URL als iemand naar die sectie navigeert. In mijn geval zijn mijn hoofdsecties:

  • kinderen
  • begin
  • tussen-
  • nieuwsbrief

Deze secties zijn ingesteld in mijn handleSWFAddress () functie:

 private function handleSWFAddress (event: SWFAddressEvent): void case "/ childrens": section = "childrens" break; 

Stap 5: geef de variabelen door via uw Datagrid Click-gebeurtenis

Dan passeer ik in mijn klikgebeurtenis voor de datagrid de sectie en naaktslak variabelen op als de URL:

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

Stap 6: Geef uw titel door aan de browser via de Datagrid Click-gebeurtenis

Het instellen van de titel was iets lastiger, omdat ik de titel van de les wilde gebruiken die geen deel uitmaakt van de uitgeklede XML die ik gebruik voor deze demo-app. Daarom heb ik een kenmerk toegevoegd dat alleen in de eerste keer aanwezig hoeft te zijn rij van mijn XML om de titel van de les in te stellen.

Hier is de code van mijn datagrid-klikgebeurtenis die dit mogelijk maakt:

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

De getItemAt (0) is een leuke kleine functie waarmee ik een titel voor de browser in slechts de eerste rij van elk XML-bestand kan plaatsen, waardoor de pagina's een betere beschrijving krijgen. Nu in plaats van mijn lesactiviteitspagina's te lezen:

Woordenschat Activiteit

Ze lazen:

Huidige werkwoorden Spaanse les - Woordenschat Activiteit

Dit werkt omdat getItemAt (0) haalt het eerste knooppunt uit het XML-bestand op.


Stap 7: parseer uw Datagrid Variabele Strings in uw SWFAddress-handler

Om uw te gebruiken naaktslak waarde effectief is, moet u het uit uw URL halen. Dus ik heb eindelijk door dat ik een nieuwe variabele, die ik bel slugAdd. Ik gebruik dit in mijn SWFAddress-handler:

 private function handleSWFAddress (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 (/ \ / nieuwsbrief \ // g, ""); //Alert.show (slugAdd)

Deze tekenreeksanalyse is hier zo eenvoudig, maar het moet exact zijn om te kunnen werken! Jouw slugAdd moet identiek zijn aan uw slakwaarde, zodat uw datagrid match-upfunctie zal werken, en uw URL's zullen u naar de juiste rij brengen. Dus een beetje dichterbij - we doen een eenvoudige String-vervanging. U neemt een URL zoals:

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

En nadat je het gedaan hebt

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

Als u de Alert.show (slugAdd) - je zult krijgen

present_verbsvocab

(Ik ben me ervan bewust dat mijn gebruik van het onderstrepingsteken in mijn slakkenwaarde niet de beste methode is voor het benoemen van conventies voor URL's, die vereisen dat ik de scheutje in plaats daarvan - maar we hebben meer dan 1000 lessen in onze hoofdapp die dit gebruiken, dus ik blijf erbij).

Het ding om te onthouden over de vervangen() functie in AS3 is dat uw String-waarde moet worden ingesloten tussen forward slashes -

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

? en als je ook een voorwaartse schuine streep zelf wilt vervangen, moet je aan die personages ontsnappen door er een neerwaartse schuine streep voor te gebruiken. Dat is hoe je eindigt

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

De g deel vertelt het om de vervanging te doen allemaal karakters en niet alleen de eerste, en de "" is voor uw vervanging, wat in mijn geval helemaal geen waarde was. Voor meer informatie, bekijk de LiveDocs op String.replace () en RegExp.

Dit lijkt nu zo eenvoudig, maar het vergde veel google-zoeken naar mij om erachter te komen dat ik geen enkele grote, lang gecompliceerde functie hoefde te gebruiken om enkele waarden uit een string weg te halen. Caramba Ik wou dat ik een dergelijke tutorial had gevonden voordat ik begon :) Alrighty dus nu hebben we onze slug of de URL die we krijgen van het XML-bestand van de datagrid, doorgegeven als een nieuwe var genaamd slugAdd. Maar dat moeten we nog steeds doen do iets met deze variabele.


Stap 8: zorg dat uw Datagrid de juiste rij weergeeft en alle gebeurtenissen activeert

Er zijn in wezen drie essentiële functies die ervoor zorgen dat mijn SWFAddress deeplink-koppeling werkt (ik ga het SWFAddress.setValue () niet behandelen omdat het zo eenvoudig en voor de hand liggend is dat ik denk dat een grimmige man het kan gebruiken :)

Functie een: handleSWFAddress ()

 handleSWFAddress (event: SWFAddressEvent): void

Je werkpaard voor alle navigatiespullen. Het hebben als een evenement lijkt belangrijk te zijn, omdat ik in eerste instantie een ander online voorbeeld gebruikte dat dit onderscheid niet gebruikte, en dit werkt beslist beter.

Functie twee: getSelectedItem ()

 getSelectedItem (): void

Dit moet worden gebeld na de gegevens zijn al ingevuld, of in uw resultatenhandler voor uw gegevensoproep. Timing is heel hier van belang, anders kunnen uw items niet worden geladen wanneer mensen de URL rechtstreeks in de browser typen in plaats van door uw app te klikken! Deze functie komt overeen met een inkomende URL met een specifiek item uit een datagrid.

Functie Drie: itemfromAddress ()

 itemfromAddress (): void

Dit is wat eigenlijk doet iets met de datagrid-ingang - het repliceren van mijn datagrid-klikbehandelaar in een niet evenement functie, omdat u een op gebeurtenissen gebaseerde functie niet vanuit een andere functie kunt aanroepen.

Laten we deze in volgorde nemen van hoe ze worden gebruikt als iemand een URL in de browser typt, op zoek naar gegevens uit uw app. Aangezien deze tutorial is gericht op het navigeren van uw datagrid - ik zal dit voorbeeld van mijn plaatsen handleSWFAddress () ook al kun je de rest zien als je naar de RoutingEvents.as bestand bij de download voor deze zelfstudie.

 case "/ childrens /" + slugAdd:

Deze code hieronder is de Google Analytics-code die gemakkelijk naast het SWF-adres kan worden toegevoegd.

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

Deze if-verklaring controleert of het myURL variabele die mijn voedt HTTPService data-oproep is wat we nodig hebben voor deze sectie, en als deze variabele nog niet is ingesteld, komt dit hoogstwaarschijnlijk omdat de gebruiker navigeert via URL en de app nog niet is geladen, dus we moeten de app vertellen welke gegevens deze URL is verwacht te zien. We willen de data van de dataProvider niet verwijderen als de gebruiker al in de app zit en door de datagrid navigeert. Daarom hebben we de gegevens nodig als uitspraak. Ook, voor het geval ze ergens anders in onze app met andere gegevens zijn geweest en via URL naar deze weergave navigeren - we moeten die gegevens klappen, het datagrid vernieuwen en de gegevens opnieuw verzenden HTTPService data-oproep - anders komen er extra gegevens in onze datagrid die onze matching van zullen verpesten naaktslak variabelen met slugAdd variabelen.

 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("Ik heb gegevens gewijzigd in "+ myUrl)

Als de gebruiker via URL invoert - ze hebben de. Al uitgevoerd getSelectedItem () functie aan het einde van hun data-oproep. Maar als die gegevens al zijn geladen en ze proberen nog steeds via de browser te navigeren in plaats van op de datagrid te klikken, moeten ze die browser-URL matchen met de activiteit die de browser verwacht te zien, dus we moeten deze functie aanroepen in dat geval:

 getSelectedItem () currentState = "class1State"

We bepalen onze sectie variabele hier om te verzekeren dat als een gebruiker door de app klikt, het juiste is sectie wordt toegevoegd aan de URL,

 sectie = "childrens" -onderbreking;

Dus laten we de code opnieuw allemaal samen bekijken:

 case "/ 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;

Laten we nu kijken naar het stukje schoonheid dat het hele ding heeft laten werken. Ik heb dit aangepast van een stuk code geschreven door Anuj Gakhar op zijn blogartikel Flex: Hoe een item in DataGrid vooraf te selecteren:

 private function getSelectedItem (): void //Alert.show ("Ik doe een getSelectedItem") var slugAdd: String = SWFAddress.getPath (); slugAdd = slugAdd.replace (/ \ / childrens \ // g, ""); slugAdd = slugAdd.replace (/ \ / begin \ // g, ""); slugAdd = slugAdd.replace (/ \ / intermediate \ // g, ""); slugAdd = slugAdd.replace (/ \ / nieuwsbrief \ // 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()    

Deze meldingen hebben me echt geholpen, omdat ik deze code oorspronkelijk als eerste had handleSWFAddress () functie, die niet werkte. Deze functie moest worden aangeroepen aan het einde van de resulthandler van mijn dataProvider, die op zijn beurt moest worden aangeroepen door mijn switches die de slugAdd variabele vastgelegd door SWFAddress. Anders zijn de gegevens er nog niet en uw getSelectedItem () vindt geen items die overeenkomen met de URL-waarde die is vastgelegd.

En tot slot, de functie die mijn SWF-adres bindt, alles afhandelt met gebeurtenissen die veranderen wat de gebruiker ziet: itemfromAddress (). Hiermee wijzigt u de SWF-les die wordt weergegeven in mijn SWFLoader, net zoals wanneer een gebruiker op een andere rij in de datagrid zou klikken.

 private function itemfromAddress (): void swfLoader.unloadAndStop (); SoundMixer.stopAll (); selectedRow = Rij (myDG.selectedItem); swfLoader.source = selectedRow.fileName; 

Stap 9: Zorg ervoor dat DataProvider correct is en dat gegevens maar één keer worden vermeld

Ik kwam een ​​ander probleem tegen: in mijn geval merkte ik dat het laden van gegevens in mijn hoofddatagrid op het init van de app problemen zou veroorzaken bij het omschakelen van die gegevens wanneer mensen proberen toegang te krijgen tot verschillende gegevens direct via URL. Dezelfde gegevens die prima zouden worden geladen wanneer ze door de app klikten, werden ontoegankelijk als ze probeerden dezelfde URL rechtstreeks te gebruiken op een nieuwe pagina waarop de app nog niet was geladen. Dit zorgde voor een hele dag verdriet, terwijl ik weer een aantal meldingen aan mijn code toevoegde en probeerde uit te zoeken wat het probleem was met het laden van de gegevens.

Uiteindelijk moest mijn gegevensprovider dynamisch zijn en moest ik dit leeg laten aan het begin van de app. Dit betekende het veranderen van mijn startscherm van een met gegevens naar een zonder. De andere oplossing zou kunnen zijn om een ​​andere dataProvider te gebruiken, maar ik besloot dat ik dat niet hoefde te doen, omdat een statisch scherm sowieso beter werkt op het startscherm van de app.

Ik kwam er ook achter dat ik die moest gebruiken als om te controleren of de juiste dataProvider al was geladen of niet.

Toen ik mijn hersens rond SWFAddress kreeg, moest ik mezelf er nogmaals aan herinneren dat de browser geen idee heeft welke gegevens je probeert te laden, tenzij je vertel het welke gegevens zouden daar moeten zijn. Op zichzelf, je variabele slugAdd betekend niks. Maar als je eenmaal die waarde hebt vastgelegd en de variabele in het spel hebt gezet in je handleSWFAddress () functie, kunt u het gemakkelijk vergelijken met uw datagrid-index en zoiets als uw klikfunctie voor uw datagrid uitvoeren.

Een ander ding dat ik moest doen was ervoor zorgen dat mijn gegevens niet twee keer in de datagrid worden vermeld, wat een probleem kan zijn als je hetzelfde verzendt HTTPService aanvragen in verschillende delen van uw app. Ik vond dat dit mooi werkt om te voorkomen dat datagrids de XML van het vorige gegevensverzoek verwijderen.

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

Doet het Verwijder alles() op de lessonsDataProvider (de naam van mijn HTTPService verzoekvariabele) was de sleutel tot het verwijderen van dubbele XML-vermeldingen. Hoewel ik niet zeker weet of je het moet blijven doen httpService.send () elke keer dat u een specifieke dataset rechtstreeks vanuit een URL wilt laden in plaats van alleen in de in het() van de app, het doen zoals dit werkt, dus dat is wat ik deed. Ik heb echter twee dataverzoeken in verschillende delen van de app (lessonsDataProvider en lessonsDataProvider6, overgebleven van mijn belachelijke SIX HTTPService verzoeken dat ik begon met :) - dus als je maar één gegevensverzoek hebt, is dit misschien niet nodig (in het andere deel van mijn app, httpService6.send () is noodzakelijk).


Stap 10: Voorbereiding op SEO-implementatie

Nu voor het nogal verzwarende extra werk dat ik moest doen om mijn app SEO vriendelijk te maken. Op zichzelf biedt SWFAddress precies nul SEO-voordeel. Uw pagina's komen niet in Google, Yahoo of een andere zoekmachine. Geen ands, ifs of buts. Waarom is dat? Omdat het hele deep linking-schema van SWFAddress afhankelijk is van deze 'hash'-fragment-dingen - het hekje # dat wordt gebruikt op elke pagina die door SWFAddress wordt gemaakt. En Google negeert alles na dat symbool, dus de robot zal nooit iets anders zien dan je hoofdpagina. Het maakt niet uit hoeveel urls je hebt.

En het SEO-voorbeeld van de SWFAddress-gebruikers maakt het niet echt intuïtief om het te repliceren met uw eigen gegevens. Het idee dat u uw site opnieuw moet maken in HTML om te verbergen onder uw andere site - is eigenlijk alleen een optie voor mensen die een Flash-website hebben of zoiets. Voor iedereen met een serieuze Flex-app in plaats van een bladerdeegwebsite van een of andere soort, is dat een beetje een grap. Hoe precies zou u een alternatieve site moeten bouwen als alles gebaseerd is op SWF-activiteiten gevoed door XML?

Maar ik kwam erachter dat ik echt niets anders hoefde te bouwen dan een link, een titel en een beschrijving die gewoon een andere versie van dezelfde titel is, en door een spreadsheet te gebruiken die ik gebruik om al mijn leseenheden zou ik de waarden die overeenkomen met mijn Flex-app-URL's eenvoudig kunnen knippen en plakken.


Stap 11: Download alternatief SEO PHP-pakket; Volg korte handleiding

De bestanden die ik gebruikte voor mijn eigen implementatie van SEO voor SWFAddress zijn aangepast vanuit het pakket dat is gevonden op pokd.org. De zelfstudie voor het gebruik van deze bestanden is kort, duidelijk en gemakkelijk te volgen. Je kunt de tutorial hier vinden. De SEO-versie van Asual.com werkte helemaal niet voor mij, en ik heb gemerkt dat andere mensen klagen over hetzelfde. Verspil geen tijd: download de versie van pokd.org of gebruik de bestanden in het downloadpakket voor deze zelfstudie. Ik heb mijn eigen bestanden een beetje afgekapt om alleen mijn eerste twee secties weer te geven: kinderen en begin, om de bestanden leesbaarder te maken.


Stap 12: Schakel Javascript uit in uw browser om te testen

U moet schakel JavaScript uit in uw browser om de niet-Flex / Flash-versie van uw site te testen! Dat en maak de overloop van de hoofddivisie zichtbaar. Tenzij u een site van 5 of 10 pagina's hebt, is testen onmogelijk als u de overloop verborgen houdt. De extra SEO-bestanden die u gaat gebruiken bestaan ​​uit 2 PHP-bestanden, 1 .htaccess-bestand en 1 extra Javascript-bestand dat in uw / SWFAddress map in je flex / Bin afgifte map).


Stap 13: maak uw SEO-URL's en paginatitels via spreadsheet

Open uw spreadsheetapplicatie en open het bestand met de titel swfaddress_seo_index.ods of .xls die u kunt vinden in het downloadpakket voor deze zelfstudie. Pas ze aan uw behoeften aan. Dit is de spreadsheet waarin ik de waarden voor mijn toepassings-URL, de secties en het naaktslak adressen om alle swf_link [a hrefs] te maken die nodig zijn voor de index.php bestand (u hebt uw volledige "opgeschoonde" URL nodig voor elke koppeling zonder de main.html # evenals uw paginatitel). Knip en plak vanuit je spreadsheetapp in Kladblok ++ of welke tekstcodebewerker je gebruikt, en zorg ervoor dat je geen onnodige tabbladen of spaties hebt en dat alles er goed uitziet om in je PHP-bestand te plakken.

Mijn nieuwe volledige URL's zien er als volgt uit in de browser, houd er rekening mee dat het hash-symbool (#) nu weg is:

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


Stap 14: Voeg uw links en titels toe aan het Index.php-bestand

Omdat ik meer dan 70 pagina's heb, heb ik ervoor gekozen om alleen de secties op de pagina te plaatsen index.php pagina. De andere demo's die ik heb gezien, bevatten alle pagina's van de site, maar dit zijn kleine sites. Inclusief een link naar elke pagina op uw index.php betekent dat elke keer dat de Google-bot een afzonderlijke pagina bezoekt, deze al deze links te zien krijgt. Dat is een slecht idee. Plaats daarom alleen uw hoofdpagina's in de index.php pagina, en laat het datasource.php zorg voor de rest.


Stap 15: Maak uw Switch-overzichten via spreadsheet

Bekijk de spreadsheet met de titel swfaddress_seo_datasource.ods of .xls in de bestanden voor dit project. Dit voorbeeld laat zien hoe ik waarden uit mijn database heb gesneden en geplakt om de switchinstructies te vullen. Nadat u deze spreadsheet met uw eigen waarden hebt ingevuld, gebruikt u een codebewerker zoals Notepad ++ om eventuele extra tabbladen te verwijderen en de juiste opmaak te controleren voordat u in uw PHP-bestand plakt.


Stap 16: schakelverklaringen toevoegen aan uw Datasource.php-bestand

De switchstatements zijn vrij eenvoudig, hoewel ik in mijn geval ook de inhoud van elk XML-bestand wilde opnemen dat mijn educatieve activiteiten voedt, zodat die zoekwoorden in elk door de zoekmachines gezien bestand kunnen worden gebruikt. De voorbeelden die ik heb gezien, gingen er allemaal vanuit dat iemand zou gaan zitten en unieke paginabeschrijvingen maken voor elk bestand dat wordt weergegeven in de datasource.php bestand, maar dat is een vreselijk tijdrovende optie voor iemand met tientallen of honderden datagrid-items op hun Flex-site. Daarom heb ik een nieuwe content.php-pagina gemaakt met een andere paginabeschrijving, afhankelijk van de activiteit in de URL. Ook voeg ik de afdruk van de XML toe voor elke pagina waaraan ook een XML-bestand is gekoppeld.

 case '/ begin': echo ('

Deze sectie is voor mensen van 10 jaar en ouder die willen beginnen met de basis in een Spaanse cursus van 18 weken. Enkele hoogtepunten: uitspraak en accenten werkwoorden en tijden beginnen Spaanse werkbladen en quizzen te spreken Insta Spaanse eLearning-demo Begin van de Spaanse les.

'); breken; case '/ childrens / up_downvocab': echo ('

Spaanse les voor kinderen - omhoog en omlaag - Leswoordenlijst

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

Stap 17: Bewerk je .htaccess-bestand

Het .htaccess-bestand moet worden aangepast op basis van de basismap voor uw specifieke serverconfiguratie. Bijvoorbeeld mijn XAMPP-testmap binnenin / htdocs wordt genoemd instademo, dus mijn .htaccess heeft deze regel voor de RewriteBase:

RewriteBase / instademo

De Flex-toepassing op mijn live-server bevindt zich ook in een submap en niet in mijn thuismap, dus de bovenstaande regel wijst in dat geval naar deze map. Merk op dat het begint met een schuine streep, maar doet niet hebben een trash.


Stap 18: Test uw SEO PHP-site lokaal

Start XAMPP op of wat u ook gebruikt voor uw lokale Apache / PHP-installatie en plaats uw PHP-, .htaccess-, javascript- en Flex-implementatiebestanden in een submap van de / htdocs map of wat je setup gebruikt als de map voor webbestanden. Als u de SEO-site wilt testen, moet u dat doen zet javascript uit. Dat is de versiezoekmachine die bots zullen zien, evenals elke webbezoeker die geen javascript of Flash heeft ingeschakeld. Controleer of je geen PHP-fouten ziet en of je links correct werken.


Stap 19: Maak uw sitemap

De sitemap is het gemakkelijkst om te maken. Neem de swfaddress_link waarden van uw swfaddress_seo_index.ods of .xls spreadsheet. Plak ze allemaal in Notepad ++ of je code-editor en voer een zoekopdracht uit en vervang om spaties of tabbladen te verwijderen en voeg vervolgens je volledige URL toe. In mijn geval nam ik waarden als:

/ Kinderen / up_downvocab

/ Kinderen / up_downlesson1

/ beginningpresent_verbslesson1

/ beginningpresent_verbslesson2

En veranderde ze naar:

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

Sla dit bestand op als een .tekst bestand en open vervolgens uw Vigos Gsitemaps-programma en importeer deze URL's om uw Google Sitemap te maken.


Stap 20: Dien uw sitemap in bij Google

Uw SEO-pagina's hebben een grotere kans om snel door Google te worden gevonden als u een sitemap indient. Als u er nog geen heeft, maakt u een account voor Webmasterhulpprogramma's op Google.com. Van daaruit kunt u gemakkelijk uw website toevoegen en de XML-sitemap indienen die u al hebt gemaakt in het Gsitemap-programma.


Conclusie

Ik hoop dat deze tutorial heeft geholpen met het aanbieden van enkele voorbeelden en een routekaart voor iedereen die worstelt met SWFAddress en een Flex-datagrid. Als u de zelfstudie volgt en de code van de voorbeelden van dichterbij wilt bekijken, moet u eerst het hoofdbestand bekijken in het brondownloadpakket dat we in de codevoorbeelden hebben gebruikt: RoutingEvents.as.

Hoewel het enige tijd kost om te implementeren, zijn de voordelen van een volledig diepgelinkte en in een zoekmachine geïndexeerde toepassing eno