Choix technique

Bonjour,

ça fait quelque temps que je passe sur le forum pour chercher quelque astuces pour la mise en pages, j'ai donc fini par m'inscrire.

J'aimerai quelque avis sur certain points.

Je développe actuellement un site web qui a pour but d'afficher de grosses quantités d'informations. J'ai une formation minimal en web, mais je manipule quand même les technologies de bases (CSS, HTML, JAVASCRIPT).

Il y a plein de site sur internet qui préconise de séparer le HTML du javascript, c'est à dire de ne plus utiliser les "onXXX" dans les balises HTML.

J'ai fait quelques essaies avec les JQuery, mais les performances sont vraiment mauvais. (ex : jstree, 1200 elements 240sec de chargement et message "faut-il arreter le script").

Lorsque le serveur renvoi du javascript "à l'ancienne" (<div onclick="mafonction()">text</div>), mes pages ce charge beaucoup plus rapidement.

ça me parait un peu logique si le serveur renvoi une page "prête à l'affichage", elle s'affichera plus rapidement qu'un page modifié par la javascript. Je me demandes donc si les Jquery sont vraiment une bonne idée.

Concernant l'accessibilité, je me demandais si l'ajax ne posait pas de problème pour les lecteurs d'écran.

Bonjour et bienvenue,

petites confusions : séparer le code JS du code HTML du code CSS est une chose.
Utiliser un script externe JS pour ajouter des onXXX (ou des .click() et cie en jQuery) en est une autre, qui suppose que la page fonctionne avant cela sans ce bout de JS (JS non-obstrusif).
Les deux sont de bonnes choses mais n'ont pas le même but.

Pour ce qui est des performances, j'ai lu qu'il valait mieux ne mettre à jour le DOM qu'un minimum de fois, voire une si possible plutôt que N fois ... mais ce n'est peut-être pas tout le temps possible. Un peu comme avec SQL : on interroge pas une BDD 1 ligne à la fois plusieurs dizaines ou milliers de fois ; on l'interroge une seule fois et on traite le résultat ensuite.

EDIT: Concernant AJAX, deux points peuvent poser problème.
D'une part les mises à jour d'un morceau de page (possibles à tout moment de la lecture de la page) peuvent se faire sans que le lecteur d'écran ni le non-voyant en soit informé. Ça concerne aussi le malvoyant si la mise à jour se fait en dehors du bout de page affiché ... Pour cela il y a ARIA mais c'est encore assez jeune.
D'autre part, il y a le JS non-obstrusif. Pour que AJAX fonctionne, il faut que JS soit activé ; qu'affiche ta page sans JS : une version alternative avec la même information ? Ce point concerne tout le monde, que l'on soit utilisateur de postes sans JS par décision de la DSI, par choix (NoScript) ou de ces non-voyants qui désactivent JS (deux études de WebAIM semblent montrer que 85% des non-voyants activent JS, ceci dit mais ça en ferait 15% sans, à la louche)
Modifié par Felipe (30 Aug 2010 - 15:36)

Bonsoir,

Merci de ta réponse.

J'aimerais quelques précisions sur ce que tu appels du JS non-obstrusif, es-que cela correspond au faite que sans le JavaScript la page est complètement visible (déplier les menu, afficher tous les sections d'un formulaire...) ?

Comment peut-on savoir si le JavaScript est activé ou non (es-que c'est possible directement depuis le serveur) pour adapter la navigation du site en fonction (confirmation avec de l'ajax pour modification, sinon confirmation sur une page charge) ?

"j'ai lu qu'il valait mieux ne mettre à jour le DOM qu'un minimum de fois" c'est que fait (es sensé faire) jstree, il applique le style et les fonctionnalités supplémentaires une fois la page chargée, pourtant traité 1200 entrées ça n'a pas l'air d'être son fort.

"Pour que AJAX fonctionne, il faut que JS soit activé qu'affiche ta page sans JS : une version alternative avec la même information ?" l'AJAX et le JavaScript servent a deux chose dans mes pages, actualiser de manière automatique dans les cadres en fonction des action de l'utilisateur dans la page et d'accélérer la navigation (en ne rechargeant que ce qui a besoin de l'être). Si le JavaScript est désactivé la navigation ne se fait que partiellement (c'est aussi pour cela que je voudrais pourvoir savoir si le js est activé).

J'avais pensé mettre des liens vers les pages sur mes zones d'interaction AJAX, avec un fonction JavaScript "magique" qui empêcherai la navigation traditionnel si l'AJAX et le JavaScript sont disponible, tu pouvais m'éclairer aussi sur ce point.

Hello,

yanmar a écrit :
J'aimerais quelques précisions sur ce que tu appels du JS non-obstrusif, es-que cela correspond au faite que sans le JavaScript la page est complètement visible (déplier les menu, afficher tous les sections d'un formulaire...) ?

Oui : plus généralement le JavaScript (sauf dans des cas bien précis comme par exemple une application web) devrait être facultatif et donc être rajouté en surcouche (tout comme le css). Pour une mise en page un peu complexe (ce qui semble être ton cas) on peut utiliser l'astuce suivante (ce n'est qu'un exemple pour montrer que l'on peut ensuite utiliser la classe hasJS dans les CSS, classe qui n'existe que quand le JS est activé).

yanmar a écrit :
Comment peut-on savoir si le JavaScript est activé ou non (es-que c'est possible directement depuis le serveur) pour adapter la navigation du site en fonction (confirmation avec de l'ajax pour modification, sinon confirmation sur une page charge) ?

En plus de la réponse précédente : le JavaScript est un langage client donc le serveur n'a aucun moyen de savoir s'il est ou non activé. Pour préciser encore, un formulaire doit fonctionner sans JS donc toutes les vérifications et actions doivent être faites côté serveur. Le Javascript couplé à l'Ajax permettent simplement de rendre cela plus ergonomique.

yanmar a écrit :
pourtant traité 1200 entrées ça n'a pas l'air d'être son fort.

Il faut dire qu'avec ou sans JS ça fait beaucoup : je suppose que tu n'as pas moyen de découper cela en plusieurs pages ?

yanmar a écrit :
J'avais pensé mettre des liens vers les pages sur mes zones d'interaction AJAX, avec un fonction JavaScript "magique" qui empêcherai la navigation traditionnel si l'AJAX et le JavaScript sont disponible, tu pouvais m'éclairer aussi sur ce point.

Normalement la classe hasJS devrait suffire à cacher ces liens... et sinon on peut les désactiver avec quelque chose comme

$("a.liens").onclick(function() { return false; });

Merci pour les réponses,

je prend en compte les remarques et vous tiens au courant. Vos réponses m'ont permis d'y voir un peu plus clair.