11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'utilise JavaScript et un fichier XML pour générer le contenu d'une page de mon site, et bien évidement les contenus ainsi générés passent à la trappe lors du référencement de mon site.
Chez code.google, on nous parle d'une méthode utilisant la création de snapshots des pages dynamique (créer un instantané de la page dynamique, une fois celle ci remplie, telle qu'elle sera visible sur le navigateur client).
Mais les quelques tutos (ici) expliquant la chose laissent pas mal de zones d'ombre je trouve.

Concrètement, j'ai une page "Realisations.html" contenant 3 divs aux ID suivants : Web / Graphisme / Programmation.
Un système d'onglets permet de passer une de ces div en display : block et les 2 autres en display : none.
On peut donc imaginer que j'ai 3 pages différentes.
J'en conclu que je dois créer 3 snapshots :

_ Réalisations - Web,
_ Réalisations - Graphisme,
_ Réalisations - Programmation.

Pas de problème pour la création des snapshots, mais je me pose les questions suivantes :

_Comment nommer les nouvelles pages ainsi créées?
_Où les placer dans l'arborescence de mon site?
_Comment indiquer a googlebot, via mon sitemap, que le snapshot "Réalisations - Web" correspond à un clique sur l'onglet Web de ma page Realisations.html?

Merci d'éclairer ma lanterne Smiley smile
Bonjour,

La solution consiste plutôt à développer un site dont tous les contenus sont accessibles en parcourant le HTML, donc avec une structure correcte, des liens hypertexte classiques et des requêtes HTTP «normales». Au final, tu dois avoir une version de ton site utilisable sans JavaScript.

Ensuite, tu peux rajouter une surcouche JavaScript avec des requêtes HTTP faites directement en JavaScript (XHR/Ajax), de la manipulation du DOM pour injecter les contenus récupérés ainsi, etc.

Les anglo-saxons parlent de progressive enhancement pour ce type d'usage de JavaScript. C'est considéré comme une bonne pratique avec des avantages pour le référencement, dans une certaine mesure pour l'accessibilité, et enfin la structuration du code (le mieux à mon sens étant de faire de la négociation de contenu en retournant une page HTML pour les requêtes classiques et un objet JSON lorsque du JSON est demandé... on interroge ainsi toujours les mêmes URL).
Salut Florent V, et merci pour ta réponse.

Effectivement la manière dont j'ai construit mon site ne me permet pas (et je le déplore) une navigation sans JavaScript.
Mais je suis loin d'être un expert dans le domaine du développement web et c'est la solution qui m'est tout de suite venu a l'esprit pour respecter ces critères :

_Ne pas utiliser de langage serveur,
_Ne pas recharger la page "Realisations.html" lorsque je changes de section,
_Ne pas imposer au visiteur une page hyper lourde.
_Une construction automatique de ma page, lorsque j'ajoute une entrée.

Après, si tu peux m'aiguiller rapidement sur une façon plus mature d'arriver à mes fins, je suis preneur et j'ai soif d'apprendre. Smiley langue

A l'heure actuel, il me suffit de modifier un fichier XML pour ajouter un nouvel "article", pouvant contenir de la vidéo, une galerie d'images, un canvas 2D / 3D...
Le code JavaScript se charge de "créer virtuellement" chez le visiteur les pages nécessaires en fonction de la catégorie de réalisations demandée, du nombre d'articles par pages désirés etc...

Peut être est il possible de respecter le principe de progressive enhancement tout en gardant les points forts de mon code actuel?
The_Moye a écrit :
A l'heure actuel, il me suffit de modifier un fichier XML pour ajouter un nouvel "article", pouvant contenir de la vidéo, une galerie d'images, un canvas 2D / 3D...
Le code JavaScript se charge de "créer virtuellement" chez le visiteur les pages nécessaires en fonction de la catégorie de réalisations demandée, du nombre d'articles par pages désirés etc...

OK si tu veux stocker tes informations dans des XML plutôt que dans une base de données, ça n'a pas d'importance. Mais si tu veux que ton site soit utilisable sans JavaScript, ce qui est la seule solution correcte pour qu'il soit indexable, il te faut du code côté serveur qui fasse sensiblement la même chose que tu fais côté client en JavaScript.

The_Moye a écrit :
Peut être est il possible de respecter le principe de progressive enhancement tout en gardant les points forts de mon code actuel?

Disons que vu que tu n'as pas construit en progressive enhancement, il va falloir défaire des choses ou du moins dupliquer pas mal de logique (mêmes fichiers XML, mais tout une logique côté serveur qui duplique ce que tu fais aussi côté client en JavaScript).
C'est un peu comme si tu me demandais «ok, je connaissais pas les normes antisismiques... mais il y a sans doute un moyen de rajouter de l'antisismique à mon immeuble?» (bah non, il faut construire en respectant ces normes dès le départ). Ou bien c'est comme tenter de rajouter de l'accessibilité à un site web... ça ne se rajoute pas, ça doit se faire dès le départ et tout au long du projet.

Ce que tu as fait en JavaScript est sans doute très bien d'un point de vue ergonomie. Mais si ce n'est pas conçu comme une surcouche d'un code serveur déjà fonctionnel, c'est raté pour le référencement.