Logo Khaganat

Les Trucs À Faire

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
fr:taf:web:ergonomie:nav_2:start [2016/09/14 06:46] – modification externe 127.0.0.1fr:taf:web:ergonomie:nav_2:start [2021/12/03 18:18] (Version actuelle) – modification externe 127.0.0.1
Ligne 5: Ligne 5:
 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. 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 qui rentrent en conflit avec le css et le javascript sur les divers cms.+L'actuelle est basée sur celle de framasoft. Elle utilise JQuery et bootstrap : ces deux trucs en particulier ajoutent pleins de <del>merdouilles</del> 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. Elle a été en partie épurée, mais cela ne suffit pas toujours.
Ligne 11: Ligne 11:
 S'il est possible d'avoir une barre aux fonctionnalités similaires, mais sans sa complexité, ce serait idéal. S'il est possible d'avoir une barre aux fonctionnalités similaires, mais sans sa complexité, ce serait idéal.
  
-Une solution serait peut-être de détecter si javascript est autorisé ou non, et de fournir une barre avec des jolis effets grâce à ce dernier, et une autre en remplacement qui soit vraiment accessible (tout en php ou html et css par exemple), quitte à ce qu'elle aie moins d'effet (genre les infobulles) ?+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 [[https://git.khaganat.net/zatalyz/site_internet/tree/master/kha_nav|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 [[http://www.yubo-flaneur.fr/khanat_site/khnav/|ici]], mis à jour directement via git. 
 + 
 +Lorsque gitlab est down je met à jour cette version à la main [[http://www.yubo-flaneur.fr/khaganat/khnav/|ici]] 
 + 
 + 
 +<WRAP center round box 90%> 
 +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) 
 +  * <del>Intégration de la recherche => renvoi vers une page pure recherche</del> : 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) 
 +  * <del>Créer le css accessibilité</del> : ajout d'un lien pour passer le menu 
 +  * <del>Ajout de la flèche "déplier le menu"</del> : elle est mal placée suivant les navigateurs mais elle est là. 
 +  * <del>Permettre le clic sur toute la longueur du menu, pas juste la police.</del> : 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. 
 + 
 + --- //[[wkh>wiki:user:zatalyz|zatalyz]] 2017/01/08 23:49// 
 +</WRAP> 
 + 
 +==== 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 ? ===== ===== Qui travaille dessus ? =====
-{{tag>pour:Osquallo}}+{{tag>pour:Zatalyz}} 
  
-Osquallo s'est proposé pour regarder ça à l'occasion, sans rien promettre en terme de délai. 
  
 ===== Compétences demandées ===== ===== Compétences demandées =====
Ligne 26: Ligne 76:
  
 ===== Tâches liées ===== ===== Tâches liées =====
-~~NOCACHE~~ <catlist -noHead -noAddPageButton >+
  
 ===== Commentaires ===== ===== Commentaires =====
  
  
-{{tag>statut:A_faire}}+ 
 +{{tag>statut:En_cours}}
  
CC Attribution-Share Alike 4.0 International Driven by DokuWiki
fr/taf/web/ergonomie/nav_2/start.1473835563.txt.gz · Dernière modification : (modification externe)
Licences Mentions légales Accueil du site Contact Inclusion