Logo Khaganat
Traductions de cette page?:

Création d'une nouvelle barre de navigation générale

Description

La barre actuelle de navigation générale est à la base de nombreux bugs. L'alléger, ou en créer une nouvelle, ferait du bien partout.

L'actuelle est basée sur celle de framasoft. Elle utilise JQuery et bootstrap : ces deux trucs en particulier ajoutent pleins de merdouilles d'appels trop généralistes qui rentrent en conflit avec le css et le javascript sur les divers cms.

Elle a été en partie épurée, mais cela ne suffit pas toujours.

S'il est possible d'avoir une barre aux fonctionnalités similaires, mais sans sa complexité, ce serait idéal.

La seule fonctionnalité où javascript est nécessaire est pour permettre de cliquer sur la barre, ce qui la laisse dépliée ; on peut aussi se passer complètement de javascript et dans ce cas, elle se déplie lorsqu'on passe dessus. Cela marche bien si le css est bien fait. Quelque soit le choix retenu, la barre doit être utilisable avec uniquement du html (ou php, c'est pareil) et du css.

Les appels de styles doivent être toujours préfixés par le nom de la barre, afin d'éviter les conflits sur des choses très utilisés dans les autres pages. Donc par exemple khanav_dropdown et pas dropdown, parce que c'est quelque chose que bootstrap propose par ailleurs…

Il faut impérativement que ce soit visuellement correct sur Firefox et Chromium, si possible sur tous les navigateurs récents et toutes les résolutions d'écrans. Non, pas besoin de supporter IE6.

Pour les petits écrans (smartphones), ce serait sans doute mieux de proposer une feuille css séparée, qui mettrait juste une icone de menu dans un coin ; en cliquant dessus cela déplie/replie le menu.

Côté accessibilité, soit les infobulles sont virées (les mettre dans du JS ?), soit il faut trouver comment faire pour que ce ne soit pas pénible, par exemple une ancre invisible, accessible uniquement en mode texte, qui permet de “sauter” le menu et aller direct au contenu ? Car si un malvoyant se fait lire le menu chaque fois qu'il va d'une page à une autre, il va devenir dingue. Comme pour les smartphones, l'idée est peut-être de lui faire un seul lien “menu”, qui ouvrira le menu ?

Une première tentative a été faite dans le dépot site internet/kha_nav. Je manque de compétences. Tout les appels sont là, le visuel est acceptable sur firefox, mais l'ensemble s'emmêle n'importe comment, des détails ne vont pas… Il sera sans doute plus simple de reprendre de zéro pour quelqu'un qui s'y connaît.

Sur ce dépôt : les fichiers “header.php”, “index.php” et “style_gen.css” sont là pour donnez une idée de ce que ça donne. Accéder directement au dossier “kha_nav” depuis un navigateur (si votre ordi héberge une instance de php) permet de voir un “site”, avec la barre et son intégration. “footer.php” et “search.php” sont deux fichiers qui seront réellement utilisés tel quel sur les pages ; ça fait partie de la touche “Khaganat” de retrouver ça partout, comme “kh_nav.php” Le dossier “img” sera un lien symbolique vers le dossier img sur le serveur, où on met tout ce qui nous sert sur les sites.

Mise à jour au 3 janvier 2016

La barre est assez fonctionnelle, il faut à présent que Zat l'intègre dans les divers CMS.

Une seule chose à (re)voir : l'intégration de la fonction de recherche ; il vaut mieux renvoyer vers une autre page spéciale “recherche”, par exemple située sur khaganat.net/search.php.

Il faudrait aussi voir comment faire que cette barre soit accessible. On doit prendre en compte les handicaps visuels sur un truc aussi basique.

Un aperçu peut être visible ici, mis à jour directement via git.

Lorsque gitlab est down je met à jour cette version à la main ici

Problèmes actuels de la nouvelle barre, à corriger :

  • écran petit en hauteur ⇒ impossible d'aller dans le bas du menu
  • problème de clignotement ? (uniquement dans le cas précédent : l'ajout de l'ascenseur fait clignoter)
  • Intégration de la recherche ⇒ renvoi vers une page pure recherche : plus ou moins, faut demander à osqua pour intégrer sa super recherche…
  • revoir le css mobile (impossible de sélectionner les détails de la partie khanat)
  • Créer le css accessibilité : ajout d'un lien pour passer le menu
  • Ajout de la flèche “déplier le menu” : elle est mal placée suivant les navigateurs mais elle est là.
  • Permettre le clic sur toute la longueur du menu, pas juste la police. : propriété display:inline-block sur les liens

Travail en cours sur https://liev.re/tests/kanav2017 ; j'ai bidouillé un peu de cosmétique.

zatalyz 2017/01/08 23:49

Mise à jour au 2 mars 2020

La barre avait été déployé sur certains cms mais avec dokuwiki c'était le bazar, pas fini… bref.

Depuis, Tycho nous a fait une nouvelle barre générée via django. Rebelote, on va l'intégrer, à un moment. C'est typiquement un job adaptée à Zatalyz, qui connaît bien le bazar et sait pourquoi et où ça va coincer…

Vérifier quand même la partie accessibilité, je crois qu'il manque un bout.

Qui travaille dessus ?

Compétences demandées

  • Php, html, css. Javascript ?
  • Notions sur l'accessibilité.

Difficulté estimée ou temps restant à y passer

2-3 jours ?

Tâches liées

Commentaires

CC Attribution-Share Alike 4.0 International Driven by DokuWiki
fr/taf/web/ergonomie/nav_2/start.txt · Dernière modification : 2021/12/03 19:18 de 127.0.0.1

Licences Mentions légales Accueil du site Contact