SWFAddress, SEO et la grille de données Flex pour les codeurs Cut and Paste

Cet article explique comment configurer des liens profonds dans votre application Flex pouvant être vus par les utilisateurs finaux ainsi que par les moteurs de recherche..

Il s’agit principalement d’un tutoriel destiné aux autres utilisateurs qui n’ont ni le temps ni l’énergie nécessaire pour vraiment apprendre à créer une classe de proxy à utiliser avec SWFAddress, et qui ne sont probablement pas programmeurs par métier..


Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler, remarquons comment la barre de navigation reflète le titre de la page., Début:

Téléchargez les fichiers source et utilisez-les comme référence pendant que vous lisez ce tutoriel..


Contexte

C’est mon premier tutoriel Flex, et je ne peux l’écrire qu'après avoir formulé la mise en garde suivante: je ne suis qu’un codeur couper-coller, même si je possède déjà près de 10 ans d’expérience AS1, AS2, et maintenant AS3, qui moi un assez bon niveau de confort avec elle. J'écris quelques fonctions, déclarations-if, vars et des choses comme ça - mais je suis plus un hackmeister qu'autre chose, ce qui conduit parfois à un codage créatif, tandis que d'autres fois entraînent une perte de temps pour des choses que je n'ai pas connues en savoir assez sur avant d'expérimenter!

Les liens profonds représentent beaucoup plus que le simple référencement. il s'agit de la facilité d'utilisation. Je pense beaucoup plus à la convivialité après avoir construit une application e-learning. Maintenant, je remarque quand une application Flex ou Flash vous fait complètement fuir lorsque vous appuyez sur le bouton Précédent, et je pense à la façon dont je ne veux pas que mes utilisateurs fassent l'expérience de ce désagrément. Qui veut faire défiler toutes vos leçons à la recherche de l'activité à revendre ou envoyer un courrier électronique à un ami?

Les liens profonds représentent beaucoup plus que le simple référencement. il s'agit de la facilité d'utilisation.

Il s’agit d’un didacticiel destiné principalement à tous les autres cut-and-pasters qui n’ont ni le temps ni l’énergie nécessaire pour réellement apprendre à créer une classe de proxy à utiliser avec SWFAddress, et qui ne sont probablement pas programmeurs par métier. Bien que je puisse comprendre certains des didacticiels du site SWFAddress qui donnent beaucoup de détails techniques sur les raisons pour lesquelles vous devez faire les choses correctement et sur les mauvaises pratiques qui vont casser votre application, etc., parfois une personne a simplement besoin d'un moyen de faire des choses. travailler d'une manière qu'ils peuvent comprendre. Certains de ces articles vous font penser qu'il est impossible de travailler en profondeur si vous ne pouvez pas écrire vous-même une bonne quantité de code..

La raison pour laquelle je vais partager mon expérience de codage à ce sujet est parce que j'ai fouillé dans SWFAddress, Datagrid et Flex, sans succès. Je n'ai trouvé aucun exemple montrant que quelqu'un a utilisé SWFAddress pour créer des URL dynamiques à partir de leur grille de données dans leur application Flex. Mon mari a plaisanté en disant que cela doit être parce que c'est tellement évident que personne n'a pris la peine de bloguer à ce sujet, mais comme vous pouvez trouver des exemples Flex, des tutoriels et du code pour presque tous les problèmes de codage de base, j'en doute fortement. Alors voila!


Étape 1: rassemblez vos outils

Vous aurez besoin des éléments suivants pour compléter ce didacticiel:

  1. Votre IDE de construction Flex / Flash (par exemple: Flex Builder, Flash, FlashDevelop).
  2. SWFAddress 2.4 et SWFObject 2.2
  3. GAforFlash (Suivi Google Analytics pour Adobe Flash).
  4. Une bonne application de tableur.
  5. Une configuration Apache ou PHP avec laquelle vous pouvez tester, ou un site Web sur lequel vous pouvez télécharger et tester.
  6. Un bon éditeur de recherche et de remplacement tel que Notepad ++ pour nettoyer le texte que vous retirez des feuilles de calcul.
  7. Le créateur gratuit de Vigos Gsitemap.

Vous pouvez également télécharger le package de fichiers de ce didacticiel, qui comprend un fichier de clés contenant les exemples ActionScript décrits ci-dessous: RoutingEvents.as.


Étape 2: Importez SWFAddress; Créer des vues URL

Depuis que je me concentre sur la datagrid et le référencement pour ce tutoriel; Je suppose que vous savez déjà comment créer les vues URL pour SWFAddress. Si vous ne le faites pas, vous pouvez consulter le code de création des vues d’URL dans RoutingEvents.as fichier inclus pour ce tutoriel pour voir comment je l'ai fait.


Étape 3: Créez votre variable de grille de données

Je savais dès le départ que je devais lier les URL de ma page à une variable présente dans le XML qui remplit ma grille de données. Obtenir cette variable pour écrire à l'URL est facile. J'ai créé une variable à partir de l'attribut que je voulais utiliser à partir du XML pour les URL de ma page:

 [Bindable] private var slug: String

Tellement bien, j'ai été capable de définir rapidement les URL de mes éléments de grille de données, ce qui a immédiatement donné une expérience agréable de voir mes clics de grille de données modifier réellement l'URL de mon navigateur..

Mais bien sûr, les liens profonds consistent en deux choses: indiquer à votre navigateur ce que vous voulez voir, et votre navigateur indiquer à votre application ce que le service informatique souhaite voir. La deuxième partie s'est avérée beaucoup plus difficile.

Ce qui m’a finalement fait réfléchir, après des jours de bricolage, c’est que lorsque vous accédez à une URL dans votre application directement à partir de votre navigateur, votre application n’a aucune idée des données que vous souhaitez afficher. Votre application ne connaît que ce que vous communiquez via l'URL et ce que vous avez défini comme règles à suivre si certaines valeurs sont trouvées dans cette URL. Ainsi, si vous avez plusieurs sources de données ou fichiers XML, comme le font la plupart des applications assez compliquées, vous devrez définir les conditions de présentation des données exactes requises par l'URL afin de pouvoir afficher correctement le nom de l'URL. demandant.

Au début, je pensais naïvement qu’en utilisant simplement limace var Je pourrais dire à SWFAddress de rechercher cette valeur, puis d'aller au numéro d'index de l'entrée correspondante dans la grille de données. Mais mettre cela en place et faire en sorte que la variable soit correctement transmise au bon moment - ne s’est produite qu’après de nombreux essais et erreurs; des tonnes de Alert.show (slug) et d'autres alertes pour voir ce qui était réellement passé à quelle heure, et du code génial que j'ai trouvé en ligne pour faire correspondre une ligne de grille de données à une valeur particulière, puis faites défiler jusqu'à l'index afin d'afficher le valeur.

Je suis d'accord avec l'un des articles / tutoriels les plus compliqués que l'on trouve sur le site Web SWFAddress: vous devez choisir vos variables avec le plus grand soin lorsque vous les utilisez avec SWFAddress. Assurez-vous qu'elles contiennent de bonnes informations, informations que vous pouvez analyser dans des éléments tels que les titres de page et des identificateurs uniques pour un élément de liste de données ou une grille de données. ma activitéId Les variables de mon XML se sont avérées être la variable parfaite, car toutes les activityIds pour une leçon donnée sont:

  1. unique
  2. contenir le nom de la leçon
  3. contenir le type d'activité

Quelques exemples d'activitéIds:

  • present_verbsvocab
  • present_verbsquiz
  • Feuille de météo

Cette information est maintenant ce que SWFAddress utilise pour accéder à la bonne leçon ainsi qu’à une activité individuelle..


Étape 4: Créer une variable de section si nécessaire

Pour d'autres choses comme les sections, vous pouvez les configurer en utilisant SWFAddress en tant que setter / getter (j'utilise ce terme vaguement aussi franchement, je ne suis pas sûr que cela corresponde à la définition technique d'un setter / getter! [Ed: vous pouvez trouver avec ce tutoriel;)]) - dans mon cas, je mets la variable appelée section Lorsqu'un utilisateur clique sur une entrée de la grille de données dans cette section ou navigue vers une nouvelle section, cette valeur est extraite de l'URL si quelqu'un accède à cette section. Dans mon cas, mes sections principales sont:

  • les enfants
  • en commençant
  • intermédiaire
  • bulletin

Ces sections sont définies dans mon handleSWFAddress () une fonction:

 fonction privée handleSWFAddress (event: SWFAddressEvent): void case "/ childrens": section = "childrens" break; 

Étape 5: Transmettez les variables via votre événement Click de la grille de données

Puis, dans mon événement click pour la grille de données, je passe le section et limace variables sur comme l'URL:

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

Étape 6: Transmettez votre titre au navigateur via l’événement Click de la grille de données

La définition du titre était un peu plus compliquée, car je voulais utiliser le titre de la leçon, qui ne fait en fait pas partie du code XML simplifié que j'utilise pour cette application de démonstration. J'ai donc ajouté un attribut qui doit uniquement figurer dans la première. ligne de mon XML afin de définir le titre de la leçon.

Voici le code de mon événement clic DataGrid qui rend cela possible:

 SWFAddress.setTitle (myDG.dataProvider.getItemAt (0) .title + "Leçon d'espagnol -" + selectedRow.lessonTitle);

le getItemAt (0) est une jolie petite fonction qui m’a permis de mettre un titre pour le navigateur dans la première ligne de chaque fichier XML, ce qui donne une meilleure description des pages. Maintenant, au lieu de lire mes pages d'activité pédagogique:

Activité de vocabulaire

Ils lisent:

Leçon d'espagnol des verbes présents - Activité de vocabulaire

Cela fonctionne parce que getItemAt (0) récupère le premier noeud du fichier XML.


Étape 7: Analyser vos chaînes variables de grille de données dans votre gestionnaire d’adresses SWF

Pour utiliser votre limace valeur efficacement, vous devez l'extraire de votre URL. Alors j'ai finalement compris qu'il me fallait un Nouveau variable, que j'appelle limaceAjouter. J'utilise ceci dans mon gestionnaire SWFAddress:

 fonction privée handleSWFAddress (event: SWFAddressEvent): void chemin var: String = SWFAddress.getPath (); var slugAdd: String = SWFAddress.getPath (); slugAdd = slugAdd.replace (/ \ / enfants \ // g, ""); slugAdd = slugAdd.replace (/ \ / début \ // g, ""); slugAdd = slugAdd.replace (/ \ / intermediate \ // g, ""); slugAdd = slugAdd.replace (/ \ / newsletter \ // g, ""); //Alert.show (slugAdd)

Cette analyse de chaîne est si simple ici - mais elle doit être exacte pour fonctionner! Votre limaceAjouter doit être identique à votre valeur slug, pour que votre fonction de correspondance de grille de données fonctionne et que vos URL vous conduisent à la bonne ligne. Donc, en regardant un peu plus près, nous faisons un simple remplacement de chaîne. Vous prenez une URL comme:

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

Et après vous

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

Si vous exécutez le Alert.show (slugAdd) - tu auras

present_verbsvocab

(Je suis conscient que mon utilisation du trait de soulignement dans la valeur slug n'est pas une pratique recommandée pour les conventions de dénomination des URL, qui exigent que j'utilise le tiret au lieu de cela - mais nous avons plus de 1000 leçons dans notre application principale qui l'utilisent, alors je m'en tiens à cela).

La chose à retenir sur le remplacer() fonction dans AS3 est que votre valeur de chaîne doit être contenue entre les barres obliques -

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

? et si vous souhaitez également remplacer une barre oblique elle-même, vous devez échapper à ces caractères en utilisant une barre oblique inverse avant celle-ci. C'est comme ça que tu finis avec

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

le g une partie lui dit de faire le remplacement sur tout caractères et pas seulement le premier, et le "" est pour votre remplacement, ce qui dans mon cas n'avait aucune valeur. Pour plus d'informations, consultez les LiveDocs sur String.replace () et RegExp.

Cela semble si simple maintenant, mais il a fallu beaucoup de recherche sur Google pour comprendre que je n'avais pas à utiliser une fonction longue et compliquée pour effacer certaines valeurs d'un String. Caramba J'aurais aimé trouver un tutoriel comme celui-ci avant de commencer :) Très bien, nous avons maintenant notre slug, ou l'URL que nous obtenons du fichier XML de la grille de données, transmise sous la forme d'une nouvelle var appelée limaceAjouter. Mais il faut encore faire quelque chose avec cette variable.


Étape 8: Demandez à votre grille de données d'afficher la ligne correcte et de déclencher un événement

Trois fonctions essentielles permettent à SWFAddress de créer des liens profonds (je ne couvrirai pas SWFAddress.setValue () car c’est tellement simple et évident que je pense qu’un homme des cavernes pourrait l’utiliser :)

Fonction un: handleSWFAddress ()

 handleSWFAddress (event: SWFAddressEvent): void

Votre bête de somme pour tout ce qui concerne la navigation. En faire un événement semble être important, car au début, j'ai utilisé un autre exemple en ligne qui n'utilisait pas cette distinction, et cela fonctionne certainement mieux..

Fonction deux: getSelectedItem ()

 getSelectedItem (): void

Cela doit s'appeler après les données sont déjà renseignées ou dans votre gestionnaire de résultats pour votre appel de données. Le timing est très important ici, sinon le chargement de vos éléments échouera lorsque les utilisateurs saisiront l’URL directement dans le navigateur plutôt que de cliquer sur votre application! Cette fonction correspond à une URL entrante avec un élément spécifique d'une grille de données..

Fonction trois: itemfromAddress ()

 itemfromAddress (): void

C'est ce que fait Est-ce que quelque chose avec l'entrée de la grille de données - la réplication de mon gestionnaire de clic de la grille de données dans un non un événement fonction, car vous ne pouvez pas appeler une fonction d'événement à partir d'une autre fonction.

Prenons-les dans l'ordre dans lequel elles seront utilisées si quelqu'un tape une adresse URL dans le navigateur, recherchant les données de votre application. Puisque ce tutoriel est axé sur la navigation dans votre grille de données, je posterai cet exemple depuis mon handleSWFAddress () même si vous pouvez voir le reste si vous regardez le RoutingEvents.as fichier inclus avec le téléchargement pour ce tutoriel.

 case "/ enfants /" + slugAdd:

Ce code ci-dessous est le code Google Analytics facile à ajouter à côté de SWFAddress..

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

Cette instruction if vérifie si le myURL variable qui nourrit mon HTTPService L'appel de données est ce dont nous avons besoin pour cette section, et si cette variable n'est pas déjà définie, c'est probablement parce que l'utilisateur navigue via une URL et que l'application n'a pas encore été chargée. Nous devons donc indiquer à l'application les données correspondant à cette URL. s'attendre à voir. Nous ne voudrions pas supprimer les données de DataProvider si l'utilisateur est déjà dans l'application et navigue dans la grille de données, c'est pourquoi nous avons besoin de si déclaration. De plus, juste au cas où ils auraient été ailleurs dans notre application avec d'autres données, et naviguer via cette URL vers cette vue, nous devons les jeter, actualiser la grille de données et renvoyer le HTTPService appel de données - sinon nous allons nous retrouver avec des données supplémentaires dans notre grille de données qui gâcher notre correspondance limace variables avec limaceAjouter les variables.

 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("J'ai changé les données en "+ myUrl)

Si l'utilisateur entre via l'URL - ils ont déjà exécuté le getSelectedItem () fonctionner à la fin de leur appel de données. Mais si ces données sont déjà chargées et qu'ils tentent toujours de naviguer via le navigateur au lieu de cliquer sur la grille de données, ils devront faire correspondre cette URL à l'activité que le navigateur s'attend à voir. Nous devons donc appeler cette fonction. dans ce cas:

 getSelectedItem () currentState = "class1State"

Nous mettons notre section variable ici pour assurer que lorsqu'un utilisateur clique sur l'application, le bon section sera ajouté à l'URL,

 section = "childrens" break;

Alors regardons le code à nouveau tous ensemble:

 case "/ enfants /" + slugAdd: tracker.trackPageview ("/ enfants /" + 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;

Maintenant, regardons la beauté qui a vraiment fait fonctionner l’ensemble. J'ai modifié cela à partir d'un morceau de code écrit par Anuj Gakhar sur son entrée de blog Flex: Comment présélectionner un élément dans DataGrid:

 fonction privée getSelectedItem (): void //Alert.show ("Je fais un getSelectedItem") var slugAdd: String = SWFAddress.getPath (); slugAdd = slugAdd.replace (/ \ / enfants \ // g, ""); slugAdd = slugAdd.replace (/ \ / début \ // g, ""); slugAdd = slugAdd.replace (/ \ / intermediate \ // g, ""); slugAdd = slugAdd.replace (/ \ / newsletter \ // g, ""); //Alert.show (slugAdd) //Alert.show (myDG.dataProvider.length + "longueur du fournisseur de données") 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()    

Ces alertes m'ont vraiment aidée, car j'avais à l'origine ce code en haut de ma liste. handleSWFAddress () fonction, qui n'a pas fonctionné. Cette fonction devait être appelée à la fin du gestionnaire de résultats de mon fournisseur de données, qui à son tour devait être appelé par mes commutateurs contenant le limaceAjouter variable capturée par SWFAddress. Sinon, les données ne sont pas encore là et votre getSelectedItem () ne trouvera aucun élément correspondant à la valeur d'URL capturée.

Et enfin, la fonction qui lie la gestion de SWFAddress à des événements qui modifient ce que voit l'utilisateur: itemfromAddress (). Cela modifie la leçon SWF affichée dans mon SWFLoader, comme si un utilisateur cliquait sur une autre ligne de la grille de données..

 fonction privée itemfromAddress (): void swfLoader.unloadAndStop (); SoundMixer.stopAll (); selectedRow = Row (myDG.selectedItem); swfLoader.source = selectedRow.fileName; 

Étape 9: Assurez-vous que dataProvider est correct et que les données ne sont répertoriées qu'une fois.

J'ai rencontré un autre problème: dans mon cas, j'ai constaté que le chargement de données dans ma grille de données principale sur l'init de l'application causerait des problèmes lors de la tentative de commutation de ces données lorsque des personnes tentent d'accéder à différentes données directement via une URL. Les mêmes données, qui se chargeaient très bien quand elles cliquaient dans l'application, devenaient inaccessibles si elles essayaient d'utiliser la même URL directement sur une nouvelle page où l'application n'avait pas encore été chargée. Cela m'a causé une journée entière de deuil alors que j'ajoutais encore un groupe d'alertes à mon code et tentais de comprendre le problème du chargement des données..

En fin de compte, pour mon fournisseur de données dynamique, je devais laisser ce champ vide dans l'init de l'application. Cela signifiait que je devais passer de l’écran d’accueil avec les données sans écran L'autre solution pourrait être d'utiliser un autre fournisseur de données, mais j'ai décidé de ne pas en avoir besoin, car un écran statique fonctionne mieux que l'écran d'accueil de l'application..

J'ai aussi compris que je devais utiliser ces si instructions pour vérifier si le dataProvider correct était déjà chargé ou non.

Alors que je maîtrisais bien SWFAddress, je me suis rappelé que le navigateur n’a aucune idée des données que vous essayez de charger, à moins que dis le quelles données devraient être là. En soi, votre variable limaceAjouter ne signifie rien. Mais une fois que vous capturez cette valeur et mettez la variable en jeu dans votre handleSWFAddress () fonction, vous pouvez facilement le faire correspondre à votre index de grille de données et effectuer quelque chose comme votre fonction de clic pour votre grille de données.

Une autre chose que je devais faire était d'empêcher que mes données soient répertoriées deux fois dans la grille de données, ce qui peut poser problème lorsque vous envoyez le même message. HTTPService demander dans différentes parties de votre application. J'ai trouvé que cela fonctionne bien pour empêcher les datagrids de ne pas supprimer le XML de la requête de données précédente.

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

Faire le Enlever tout() sur le lessonsDataProvider (le nom de mon HTTPService variable de requête) était la clé pour éliminer les entrées XML en double. Bien que je ne sois pas sûr que vous deviez continuer à faire la httpService.send () chaque fois que vous souhaitez charger un ensemble de données spécifique directement depuis une URL plutôt que dans le init () de l'application, le faire comme ça fonctionne, alors c'est ce que je suis resté avec. J'ai cependant deux demandes de données dans différentes parties de l'application (lessonsDataProvider et lessonsDataProvider6, laissées de mon ridicule SIX HTTPService demandes que j'ai commencées avec :) - donc si vous n'avez qu'une seule demande de données, peut-être que ce n'est pas nécessaire (dans l'autre partie de mon application, httpService6.send () est nécessaire).


Étape 10: Préparation à la mise en œuvre du référencement

Maintenant, pour le travail supplémentaire plutôt aggravant que je devais faire afin de rendre mon application conviviale pour le référencement. En soi, SWFAddress n'offre aucun avantage en matière de référencement. Vos pages n'entreront pas dans Google, Yahoo ou tout autre moteur de recherche. Pas d'and, de si ou de mais. Pourquoi donc? Parce que le schéma de liaison en profondeur de SWFAddress dépend de ces fragments "hash" - le signe dièse # utilisé dans chaque page créée par SWFAddress. Et Google ignore tout ce qui se trouve après ce symbole. Le robot ne verra donc jamais autre chose que votre page principale. Peu importe le nombre d'URL que vous avez.

Et l'exemple de référencement fourni par les gens de SWFAddress ne permet pas exactement de le reproduire de manière intuitive en utilisant vos propres données. L'idée selon laquelle vous auriez besoin de recréer votre site en HTML pour vous cacher sous votre autre site n'est en réalité qu'une option pour les personnes ayant un site Web Flash ou quelque chose du genre. Pour quiconque ayant une application Flex sérieuse plutôt qu'un site Web en forme de bouffée, c'est une blague. Comment exactement êtes-vous supposé construire un site alternatif lorsque tout est basé sur des activités SWF alimentées par XML?

Mais j’ai réalisé que je n’avais vraiment besoin de construire autre chose qu’un lien, un titre et une description qui n’était qu’une autre version du même titre, et en utilisant un tableur qui est ce que j’utilise pour construire tous mes objets. unités de cours de toute façon, je pourrais facilement couper et coller les valeurs correspondant aux URL de mes applications Flex.


Étape 11: Téléchargez le package de référencement alternatif pour PHP; Suivre le didacticiel court

Les fichiers que j'ai utilisés pour ma propre implémentation de SEO pour SWFAddress ont été modifiés à partir du package trouvé sur pokd.org. Le didacticiel d'utilisation de ces fichiers est court, simple et facile à suivre. Tu peux trouver le tutoriel ici. La version SEO de Asual.com ne fonctionnait pas du tout pour moi et j'ai constaté que d'autres personnes se plaignaient de la même chose. Ne perdez pas votre temps: téléchargez la version à partir de pokd.org ou utilisez les fichiers présents dans le package de téléchargement pour ce tutoriel. J'ai un peu tronqué mes propres fichiers pour ne montrer que mes deux premières sections: childrens et début, afin de faciliter la lecture des fichiers..


Étape 12: désactivez Javascript dans votre navigateur à des fins de test

Vous devez désactiver javascript dans votre navigateur afin de tester la version non Flex / Flash de votre site! Cela et rendre visible le débordement de la division principale. Sauf si vous avez un site de 5 ou 10 pages, masquer le débordement rend le test impossible. Les fichiers de référencement supplémentaires que vous allez utiliser sont constitués de 2 fichiers PHP, d'un fichier .htaccess et d'un fichier Javascript supplémentaire qui doit être placé dans votre ordinateur. / swfaddress dossier à l'intérieur de votre flex / bin-release dossier).


Étape 13: Créez vos URL de référencement et vos titres de page via une feuille de calcul

Ouvrez votre tableur et ouvrez le fichier intitulé swfaddress_seo_index.ods ou .xls que vous trouverez dans le package de téléchargement de ce tutoriel. Modifiez-les pour répondre à vos propres besoins. C’est la feuille de calcul où j’ai entré les valeurs de mon URL d’application, les sections et le limace adresses pour créer tous les swf_link [un hrefs] nécessaires à la index.php file (vous aurez besoin de votre URL "nettoyée" complète pour chaque lien sans le main.html # ainsi que le titre de votre page). Coupez et collez votre application de feuille de calcul dans Notepad ++ ou l'éditeur de code texte que vous utilisez, et assurez-vous de ne pas avoir d'onglets ou d'espaces inutiles et que tout semble correct pour le coller dans votre fichier PHP..

Mes nouvelles URL complètes ressemblent à ceci dans le navigateur. Notez que le symbole de hachage (#) a maintenant disparu:

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


Étape 14: Ajoutez vos liens et vos titres au fichier Index.php

Comme j’ai plus de 70 pages, j’ai seulement choisi de mettre les sections sur index.php page. Les autres démonstrations que j'ai vues incluent toutes les pages du site, mais il s'agit de petits sites. Y compris un lien vers chaque page de votre index.php Cela signifie que chaque fois que le bot Google visite une page individuelle, il voit tous ces liens. C'est une mauvaise idée. Donc, ne mettez que vos pages principales dans le index.php page, et laissez le datasource.php s'occuper du reste.


Étape 15: Créez vos instructions de commutation via une feuille de calcul

Jetez un coup d’œil à la feuille de calcul intitulée swfaddress_seo_datasource.ods ou .xls dans les fichiers de ce projet. Cet exemple montre comment j'ai coupé et collé des valeurs de ma base de données afin de renseigner les instructions switch. Une fois que vous avez rempli cette feuille de calcul avec vos propres valeurs, utilisez un éditeur de code tel que Notepad ++ pour supprimer tous les onglets supplémentaires et vérifier le formatage correct avant de coller dans votre fichier PHP..


Étape 16: Ajoutez des instructions de commutateur à votre fichier Datasource.php

Les instructions relatives aux commutateurs sont assez simples, bien que dans mon cas, je veuille également inclure le contenu de chaque fichier XML qui alimente mes activités pédagogiques, afin d’utiliser les mots-clés de chaque fichier consulté par les moteurs de recherche. Les exemples que j'ai vus ont tous supposé que quelqu'un s'asseyait et crée des descriptions de page uniques pour chaque fichier représenté dans le datasource.php fichier, mais c’est une option extrêmement fastidieuse pour une personne possédant des dizaines ou des centaines d’entrées de grille de données sur son site Flex. J'ai donc créé une nouvelle page content.php qui utilise une description de page différente en fonction de l'activité trouvée dans l'URL. J'ajoute également l'impression imprimée à partir du XML pour toute page à laquelle un fichier XML est également associé..

 case '/ begin': echo ('

Cette section est destinée aux personnes âgées de 10 ans et plus qui souhaitent commencer par les bases d'un cours d'espagnol de 18 semaines. Quelques faits saillants: prononciation et accents verbes et temps commençant à parler feuilles de travail et questionnaires espagnols Démo Insta eLearning en espagnol Début de la leçon d'espagnol.

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

Leçon d'espagnol pour enfants - Haut et Bas - Liste de vocabulaire des leçons

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

Étape 17: Éditez votre fichier .htaccess

Le fichier .htaccess doit être ajusté en fonction du dossier de base pour la configuration de votre serveur. Par exemple, mon dossier de test XAMPP à l’intérieur de / htdocs est appelé instademo, donc mon .htaccess a cette ligne pour le RewriteBase:

RewriteBase / instademo

L'application Flex sur mon serveur live est également contenue dans un sous-dossier et non dans mon dossier personnel. La ligne ci-dessus indique alors ce dossier. Notez que cela commence par une barre oblique mais ne fait pas avoir une barre oblique.


Étape 18: Testez votre site de référencement PHP local