Cas pratique : Vos avis sur Ajax, CSS, SEO et Web Accessibilité

(Pour info si vous n’avez pas beaucoup de temps pour lire ce message, passé à un autre post ! je me suis un peu lâché sur le contenu )

Bonjour à tous,

Cela fait quelque temps que je parcours les tutoriaux d'alsacreation (d'ailleurs encore bravo pour le travail accompli), et je trouve enfin le temps et la motivation de m'impliquer un peu plus dans le monde des technologies web que j'affectionne énormément.

Donc pour rentrer dans le vif du sujet , voilà un cas concret (mais un peu amélioré pour rendre le débat plus intéressant ) qui je l'espère permettra de débattre du thème que je vous propose
( Pour faire taire les potentielles mauvaise langue, ce cas est un cas concret que j'ai rencontré, mais ne concerne en rien mon site perso ) :

Donc, vous possédez un joli site web, plein de contenu (voir un peu trop), très visité, bien référencé, mais au style vieillissant. Vous souhaitez donc le dépoussiérer un peu en y ajoutant un look CSS plus moderne, ainsi que des composants Ajax (genre de joli menu déroulant, une gestion du contenu avec des onglets, des menus d'interaction qui s'agrandisse lorsque la souris passe dessus, etc....).

Niveau code, le net vous fournit tous les exemples que vous voulez, et par chance, vous êtes assez intelligent pour lire les modes d'emploi (plus ou moins complet) des différents Framework du moment. Donc finalement votre site fonctionne sur les navigateurs courant et en plus est super sexy. En claire, vous êtes content de votre boulot et ne regrettez pas du tout les 37 nuits blanches que votre nouveau design vous a fait passer.

Seulement voilà où sa coince : Vous commencer un peu a vous occuper de l'indexation de votre site et de la manière dont les moteurs de recherche "voient" votre site, et en plus vous demandez à votre pote de toujours, aveugle de naissance, de vérifier votre site avec son navigateur perso. Et là, vous vous rendez compte que la moitié du contenu de votre site n'est tout simplement pas visible !

Effectivement, il se trouve que malheureusement, les moteurs de recherche qui sont passés sur votre site n'index pas le contenu caché par une certaine propriété "display: none", qu'en plus il désactive le JavaScript, donc il ne voit que les contenus des onglets ouverts par défaut, et que le moteur de votre pote a un peu de peine avec l'organisation de votre contenu qui n'est pas (ou plus) tellement logique à cause de l'abus de technologie...

En plus, vous apprenez d'un de vos potes qui bosse pour un gros moteur de recherche, que votre site risque d'être black-lister parce que le moteur de recherche « pense » que vous faites du Cloaking(http://fr.wikipedia.org/wiki/Cloaking#D.C3.A9pistage)... Du coup, vous qui vouliez juste remettre un peu à neuf votre site, vous avez un peu l'impression de vous être fait arnaquer sur toute la ligne, et vous décidez qu'Ajax c'est le mal, que les CSS sont tout aussi diaboliques et qu'a partir de maintenant vous ne ferez plus que des sites moche en HTML 4 pur que même lynx pourra interpréter comme il faut !

Donc comme vous l'aurez surement compris, le thème est : Comment est-il possible d'utiliser les "nouvelles" technologies web tout en restant copain avec les moteurs de recherche et ceux qui ne veulent pas (ou ne peuvent pas) utiliser le navigateur ultime qui respecte tous les standards et est capable d'interpréter à la perfection toutes vos pages et "Facilité" d'interaction avec votre site ?

Voilà.. Je posterais très prochainement un message sur ce que j'ai moi même découvert sur le sujet. Juste le temps de boire un café et de laisser refroidir les doigts
Modifié par Mikerob (12 Dec 2008 - 15:26)

Mikerob a écrit :
que les CSS sont tout aussi diaboliques et qu'a partir de maintenant vous ne ferez plus que des sites moche en HTML 4 pur que même lynx pourra interpréter comme il faut !

Le CSS étant une amélioration progressive, si le code HTML 4 pur (qui est très bien), est valide, avec ou sans CSS y aura pas de différence pour les lecteur d'écran et les robots.

Pour ce qui est de l'AJAX, donc javascript, à partir du moment où on a une structure de site bien faite, sont implémentation ne devrait pas poser problème (grâce à une mothodologie d'amélioration progressive, encore, ou de dégradation élégante, mais je préfère la première méthode).

Pour l'exemple du contenu caché avec display:hidden, la solution la plus simple est de masquer, non pas en CSS au chargement de la page, mais avec JavaScript après le chargement. Le masquage faisant office de test pour savoir si JavaScript est activé et fonctionnel.

Je reviens donc sur mon sujet

En cherchant un peu d'information sur comment faire un site web avec des nouvelles technologies mais respectant les standards et permettant au moteur de recherche et autre navigateurs spécifique de surfer sur un tel site, j'ai trouvé des sites parlant de Progressive enhancement (un exemple en anglais : http://adactio.com/journal/959).

En gros l'idée décrite (et qui me plait bien ) est d'y aller par étape :

1. On fait le html avec les balises qui vont bien (listes, header, paragraphe, etc...)
2. On y met une couche de CSS qui permet de mieux présenter le contenu
3. On ajoute les effets javascript et on modifie un peu les css en conséquence

Cette démarche parait naturel annoncée comme ça, mais je suis sur que bcp de gens se lance directement dans le codage car ils pensent métriser suffisamment les css et autres pour créer directement une mise en page correcte. Qui n'a jamais commencé par créer les différentes zones de sa page (header, menus horizontal/vertical, pied de page,etc..) et a compléter après avec le contenu après ?

Sinon la remarque Yasashii (qui d'ailleurs parle aussi d'amélioration progressive ) concernant le masquage par javascript est à mon avis correcte. Je pense toutefois qu'il faut quand même prendre certaines précautions. Par exemple, lors de la création d'onglets, on peut masquer leurs contenus en utilisant le javascript, mais lorsque le javascript n'est pas interpréter, tout le contenu est bien visible, mais malheureusement superposé (donc illisible par une personne).

Dans se genre de cas, je pense qu'il peut être intéressant de créer 2 styles différents: un pour l'objet si ya pas de javascript, autre loader par javascript. Le défaut de cette méthode étant bien sur de dupliquer les définitions des styles et donc d'avoir des fichiers CSS plus volumineux...
Modifié par Mikerob (12 Dec 2008 - 16:37)

Mikerob a écrit :
Par exemple, lors de la création d'onglets, on peut masquer leurs contenus en utilisant le javascript, mais lorsque le javascript n'est pas interpréter, tout le contenu est bien visible, mais malheureusement superposé (donc illisible par une personne).

ça c'est dans le cas, où justement on a pensé le look de la page avant sa structure.

Et sincèrement y a moyen de faire des onglets sans que lorsque le JavaScript est désactivé ça se superpose.

Tout à fait d'accord avec toi,

a écrit :
Et sincèrement y a moyen de faire des onglets sans que lorsque le JavaScript est désactivé ça se superpose.

Oui c'est se que j'ai écris, mais pour ça le javascript doit changé le style de l'onglet non ? quoi que... après reflexion, on doit bien pouvoir dans certain cas, se contenter de jouer avec la propriété display...
Modifié par Mikerob (12 Dec 2008 - 17:25)

Yasashii a écrit :
... grâce à une méthodologie d'amélioration progressive, encore, ou de dégradation élégante, mais je préfère la première méthode

Hum ... intéressant n'est-ce pas la même chose en soit ?
L'un ne va pas sans l'autre : amélioration progressive implique dégradation élégante, non ?

yodaswii a écrit :


Hum ... intéressant n'est-ce pas la même chose en soit ?
L'un ne va pas sans l'autre : amélioration progressive implique dégradation élégante, non ?

+1... mais ça ne fonctionne pas forcément dans l'autre sens !

mistike a écrit :
+1... mais ça ne fonctionne pas forcément dans l'autre sens !

A mon sens si il y a dégradation élégante ça veut dire qu'il y a eu un processus d'amélioration au dessus donc pour moi c'est blanc bonnet et bonnet blanc. Cela n'engage que moi hein ^^.

a écrit :
Dans se genre de cas, je pense qu'il peut être intéressant de créer 2 styles différents: un pour l'objet si ya pas de javascript, autre loader par javascript. Le défaut de cette méthode étant bien sur de dupliquer les définitions des styles et donc d'avoir des fichiers CSS plus volumineux...

Pourquoi duplication des styles ? Il suffit de faire une feuille de style "de base" pour JS désactivé, puis de charger une seconde feuille de style (ou d'overrider les styles de la première d'une façon ou d'une autre) pour remettre "d'aplomb" les éléments pour JS activé

a écrit :
Pourquoi duplication des styles ? Il suffit de faire une feuille de style "de base" pour JS désactivé, puis de charger une seconde feuille de style (ou d'overrider les styles de la première d'une façon ou d'une autre) pour remettre "d'aplomb" les éléments pour JS activé

Oui on peut aussi, faut juste faire attention à la manière dont on redéfini le style, vu que certain navigateur "n'écrase" pas l'ancien style pour y appliquer le nouveau, mais change seulement les propriétés qui ont été redéfinie. . Mais bon le résultat estle même, on va multiplier les styles
Modifié par Mikerob (15 Dec 2008 - 09:43)

De manière générale Ajax c'est pas le mal, ce qui est le mal c'est mettre des display:none qui sont changer avec js!

Une solution c'est de mettre tout les styles fonctionnels dans le javascript (avec une fonction set_styles() pour faire plus efficace). Ce sont les styles nécessaires au bon fonctionnement du script donc ceux ci a priori sont les mêmes sur n'importe quel site ils sont "liés" au script.

Par exemple imaginons que j'ai une infobulle, j'ai toujours besoin que ma boite soit en position absolute avec un z-index élevé et par défaut caché, j'écrit donc dans mon js :

setStyles(toolTip,{      
  'position':'absolute',
  'z-index':'100',
  'display':'none'
});

Cela assure aussi le bon fonctionnement du script indépendamment de la feuille de style. Comme ça notre info bulle ne se retrouve pas en haut à gauche quand on installe le script.

Je vais également lui assigné la class 'tooltip' de cette manière je pourrais personnalisé couleur, bordures et autre dans ma feuille de style.
Par rapport au fait de faire un feuille de style spéciale cela dépend du nombre de styles, si il a une ou deux classe à personnaliser a mon avis ça sert a rien. Par contre si le script doit générer toute une interface alors oui c'est mieux que le js appelle également un fichier css.

Si le style est spécifique a js mais ne doit pas être appliqué sans js, par exemple pour cacher des éléments qui ne faut qu'ils soit cacher pour ton pote d'enfance le mieux c'est la technique de Gatsus35 :

document.documentElement.className+=" hasJS"

.maclasse {} /* version sans JS */
.hasJS .maclasse {display:none} /* version avec JS */

Si un classe est utilisée uniquement par le js alors cette classe doit être ajouté en javascript avec une fonction addClass(), de cette manière on différencie les styles du script des autres.
Modifié par matmat (15 Dec 2008 - 18:12)

Salut Matmat,

Ah? je connaissais pas la fonction setStyle() (si tu parle bien de la fonction prototype que j'ai trouvé ici). En général je chargais une feuille de style en JS ou alors je modifiais le className de mon élément. Mais l'idée d'utiliser prototype me plait bien . Concernant la technique de Gatsus35, elle a l'air pas mal, mais sa serai cool de donner le lien vers le poste complet

Le voici : http://forum.alsacreations.com/topic-5-34711-1-resolu-CSS-specifique-JavaScript-active.html

La fonction setStyles dont je parlais c'est en fait un truc tout simple:

function setStyles(el,val){
  for(var styles in val){
    if(styles == 'opacity')setOpacity(el,val[ styles ]);
		else el.style[ styles ] = val[ styles ];
  }
};
function setOpacity(obj,xOpacity){
  var zOpacity = (xOpacity >= 1)? 1 : Math.round(xOpacity*100)/100;
  obj.style.opacity = zOpacity;
	obj.style.MozOpacity = zOpacity;
	obj.style.KHTMLOpacity = zOpacity;
	obj.style.filter = 'alpha(opacity=' + (xOpacity*100) + ')';
};

Mais bon c'est vrai que tu la trouve aussi dans tout les frameworks (portotype, jquery, mootools...) sous différente forme.

Dans le cas ci dessus il faut que tu mettes les styles version js ( http://codepunk.hardwar.org.uk/css2js.htm ) et il y a des frameworks qui font la translation pour toi.
Modifié par matmat (16 Dec 2008 - 21:03)