Pagination groupe page statique

gegeweb · octobre 2015

Bonjour,

je cherche à faire une pagination avec des liens suivant / précédent pour naviguer dans des groupes de pages statiques.
Pour l'instant les liens sont en "dur" dans les pages statiques, mais dés que j'en ajoute une dans la catégorie il me faut tout refaire…

C'est pour naviguer dans les calendriers et parcours, ici :
http://www.scasb.org/parcours-01.html
http://www.scasb.org/calendrier-10-2015.html

Ah… et un peu d'aide aussi pour commencer à essayer d'écrire un plugin pour les parcours… ce serait top !

Histoire que je n'ai plus qu'il n'y ai plus que les gpx à uploader, le titre à définir et juste les feuilles de route à charger.

kowalsky · octobre 2015

Par rapport à l'usage qui est fait de ce groupe de pages statiques, ne serait-il pas plus simple de les convertir en articles avec une catégorie "calendrier". Tu gardes la page "Calendrier Sorties" comme page d'entrée et dedans tu n'affiches que les articles de la catégorie "calendrier" avec la fonction plxShow. En faisant cela il te sera facile d'avoir tes liens suivants/précédents pour passer d'un mois à l'autre sans faire d'autres modifications de code.

Pour les parcours, connais-tu http://www.openrunner.com/ ? Ils offrent la possibilité pour afficher un parcours sur un site web

Francis · octobre 2015

C'est l'occasion de poser une question qui me turlupine depuis longtemps...

Je pense que serait intéressant d'introduire pour les pages statiques :
- la même rigueur que dans les articles pour la création des catégories (cases à cocher ou autre)
- et la même souplesse dans leur utilisation (entre autres, un filtrage côté admin avec sélection de la catégorie par liste déroulante).

Maintenant, c'est peut-être plus facile à dire qu'à faire...

bazooka07 · octobre 2015

@kowalsky,

Je suis entièrement d'accord avec toi. Le plus simple est de créer une catégorie calendrier.
Il faut penser qu'on sera limité à une navigation linèaire. Mais la navigation en arborescence n'est pas demandé

Ensuite avec mon plugin myPager, on peut naviguer à l'intérieur de la catégorie. La version qui est publiée affiche déjà une liste déroulante d'articles de la catégorie.
Je viens de le modifier pour pouvoir naviguer avec les flèches gauche et droite du clavier.
Il a déjà une version de démo ici : http://jeveuxpartir.free.fr/pluxml/.
Je n'ai pas prévu de boutons mais cela ne me semble pas très compliqué.
Mais avant, je voudrais rajouter un titre pour afficher dans quel contexte on navigue: catégorie XXX, mot-clé YYY, archive2015/MM, etc, ..
Et en plus, gérer le doigt qui glisse sur les écrans mobiles tactiles.

Cordialement.

gegeweb · octobre 2015

Bonjour à tous,

oui mais non pour une catégorie d'articles.
Ça ne me convient pas car je ne veux pas de ces articles dans les archives.
Sinon je n'aurais pas utilisé des pages statiques pour ça.
L'avantage des pages statiques est de pouvoir utiliser des templates différents, donc des css différents, une sidebare différente, etc…
Et j'ai deux groupes de pages statiques comme expliqué plus haut. Les pages calendriers, les pages parcours.
Bon… je vais bien trouver comment faire une pagination dans un groupe de page. Ce doit pas être bien compliqué de récupérer la liste des pages dans le groupe dans un tableau, de fait la première et la dernière pour gérer la boucle ainsi que la liste complète.

@kowalsky, bien sur que je connais Openrunner, il est listé dans la page des liens.
Mais quand bien même je l'utiliserais j'aurais toujours une page à gérer par parcours.
Si je ne l'utilise pas c'est que ça ne répond pas au besoin et ça a été "rigolo" d'utiliser OpenLayer et AmCharts pour les profil. Je suis beaucoup plus libre de faire ce que je veux du coup et ne dépend pas d'un service tiers.

bazooka07 · octobre 2015

Bonjour,

Dans le template de la page statique, on appelle la fonction $plxShow->staticContent() pour générer la page
$plxShow->plxMotor->cible contient le numéro de la page statique courante, soit $x
$plxShow->plxMotor->aStats est un tableau indexé qui contient toutes les infos des pages statiques
$plxShow->plxMotor->aStats[$x]->group donne le nom du groupe, soit $groupname
Faire un "foreach" sur le tableau $plxShow->plxMotor->aStats pour trouver toutes les pages statiques dont le group == $groupname.

Cela serait une fonction intéressante à rajouter à la classe PlxShow. Pas trop difficile.

Bon courage.

gegeweb · octobre 2015

Merci pour la piste !

Voilà ce que ça donne (pour l'instant, va falloir améliorer) dans la template de la page statique :

[== PHP ==]
	<?php
	$pages = Array();
	$id = $plxShow->plxMotor->cible;
	foreach($plxShow->plxMotor->aStats as $k=>$v) {
		if($v['active'] == 1 and $v['group'] == $plxShow->plxMotor->aStats[$id]['group']) {
			array_push($pages,  ["id"=>$k, "url"=>$v['url'], "name"=>$v['name']]);
		}
	}
	foreach($pages as $k=>$v) {
		if ($v['id'] == $id) {
			$prev = '<a href="'.$plxMotor->urlRewrite('?static'.$pages[$k-1]['id'].'/'.$pages[$k-1]['url']).'" title="'.$pages[$k-1]['name'].'">«</a>';
			$next = '<a href="'.$plxMotor->urlRewrite('?static'.$pages[$k+1]['id'].'/'.$pages[$k+1]['url']).'" title="'.$pages[$k+1]['name'].'">»</a>';
		}

	}
	?>
	<div id="pagination">
		<span class="p_page"><?php echo $prev; ?></span>
		<span class="p_page"><?php echo $next; ?></span>
	</div>

Effectivement, rajouter la pagination pour les groupes de pages statiques ne devrait pas être compliqué, mais je ne me suis pas encore vraiment intéressé au code de pluXML.

gegeweb · octobre 2015

Avec le test pour revenir sur la première page quant on arrive sur la dernière, et inversement :

[== PHP ==]
<?php
$pages = Array();
$id = $plxShow->plxMotor->cible;
foreach($plxShow->plxMotor->aStats as $k=>$v) {
	if($v['active'] == 1 and $v['group'] == $plxShow->plxMotor->aStats[$id]['group']) {
		array_push($pages,  ["id"=>$k, "url"=>$v['url'], "name"=>$v['name']]);
	}
}
$nb_pages = count($pages);
foreach($pages as $k=>$v) {
	if ($v['id'] == $id) {
		if ($k == 0) { $pid = $nb_pages - 1; } else { $pid = $k -1; }
		if ($k == $nb_pages - 1) { $nid = 0; } else { $nid = $k + 1; }
		$prev = '<a href="'.$plxMotor->urlRewrite('?static'.$pages[$pid]['id'].'/'.$pages[$pid]['url']).'" title="'.$pages[$pid]['name'].'">«</a>';
		$next = '<a href="'.$plxMotor->urlRewrite('?static'.$pages[$nid]['id'].'/'.$pages[$nid]['url']).'" title="'.$pages[$nid]['name'].'">»</a>';
	}
}
?>

bazooka07 · octobre 2015

Bonjour,

Pour un premier essai, c'est plutôt encourageant.
Côté visiteur, 2 petites remarques :
- Pas sûr qu'il aime qu'on le fasse tourner en boucle comme une bourrique.
- S'il y a une longue enfilade de pages dans le groupe, c'est bien de se situer dans le parcours, ainsi la fin parait moins lointaine

Après, on peut factoriser la génération de la balise <a> pour en mettre davantage sans forcer

Voilà ton code revisité à ma sauce :

[== PHP ==]
<div id="pagination">
<?php

function printBouton($page, $pageCurrent, $label) {
	$href = ($pageCurrent) ? '#' : $plxShow->plxMotor->urlRewrite('?static'.$page['id'].'/'.$page['url']);
	$alert = ($pageCurrent) ? ' onclick="alert(\'Halte\');"' : '';
	$title = $name;
	echo <<< EOT
	<a href="$href" title="$title">$label</a>
EOT;
}

$id = $plxShow->plxMotor->cible;
$group = $plxShow->plxMotor->aStats[$id]['group'];
$pages = Array();
foreach($plxShow->plxMotor->aStats as $k=>$v) {
	if($v['active'] == 1 and $v['group'] == $group) {
		array_push($pages,  array("id"=>$k, "url"=>$v['url'], "name"=>$v['name']));
	}
}

$nb_pages = count($pages);
if ($nb_pages > 1) {
	printBouton($pages[0], $pages[0]['id'] == $id, '&lt;');
	if ($nb_pages > 2) {
		for ($i=1; $i<$nbpages-2; $i++)
			printBouton($pages[$i], $pages[$i]['id'] == $id, 'O');
	}
	$dernier = $nb_pages-1;
	printBouton($pages[$dernier], $pages[$dernier]['id'] == $id, '&gt;');
}
?>
</div>

Et pour la feuille de style CSS :

[== CSS ==]
#pagination {text-align: center;}
#pagination a {display: inline-block; width: 2em; background-color: white; text-align: center; border: 1px solid black;}
#pagination a[onclick^='alert'] {background-color: #lightGray;}

Désolé, j'ai pas suffisamment de pages statiques dans un groupe pour tester ce code mais il ne doit pas trop y avoir de bugs.
Par contre, s'il y a trop de pages en enfilade, les boutons <a> peuvent déborder de l'écran. Mais limiter le nombre de boutons est plus compliqué. Je le gère dans mon plugin myPager.

P.S.: Attention, ne mettre AUCUN caractère après "EOT;". voir heredoc sur Google

A++

gegeweb · octobre 2015

Ah, mais ce n'est qu'un début.

Pendant qu'on est dans la pagination, il y a un bug de le plugin plxMyPager (que j'étudiais justement pour voir comment faire pareil) pour les pages entre 10 et 19 à cause de la règle remplace 'page1' par '' dans l'url.

Il faut modifier la boucle à la ligne 64 :

[== PHP ==]
for($i=$start;$i<=$stop;$i++) {
	$url = $this->plxMotor->urlRewrite("?".$arg_url.($i<=1?"":"page".$i));
	if($i==$this->plxMotor->page)
		echo "<span class=\"p_current\">".$i."</span>";
	else
		echo "<span class=\"p_page\"><a href=\"".$url."\" title=\"".$i."\">".$i."</a></span>";
}

gegeweb · octobre 2015

Sinon, voilà où j'en suis, ça peut du coup se rajouter dans le template (main ou footer) de n'importe quelle page statique, puisque on teste si le groupe n'est pas une chaine vide, on peut améliorer… (je vais voir si je peux en faire un plugin, pas encore très à l'aise avec)
Pour mes pages Parcours la boucle n'est pas génante. Pour les calendriers en revanche, oui.

[== PHP ==]
<?php
$pages = Array();
$id = $plxShow->plxMotor->cible;
if ($plxShow->plxMotor->aStats[$id]['group']) {
	foreach($plxShow->plxMotor->aStats as $k=>$v) {
		if($v['active'] == 1 and $v['group'] == $plxShow->plxMotor->aStats[$id]['group']) {
			array_push($pages,  ["id"=>$k, "url"=>$v['url'], "name"=>$v['name']]);
		}
	}
	$nb_pages = count($pages);
	foreach($pages as $k=>$v) {
		if ($v['id'] == $id) {
			$page = $k + 1;
			($k == 0) ? $pid = $nb_pages - 1 :  $pid = $k - 1;
			($k == $nb_pages - 1) ? $nid = 0 : $nid = $k + 1;
			$prev = '<a href="'.$plxMotor->urlRewrite('?static'.$pages[$pid]['id'].'/'.$pages[$pid]['url']).'" title="'.$pages[$pid]['name'].'">«</a>';
			$next = '<a href="'.$plxMotor->urlRewrite('?static'.$pages[$nid]['id'].'/'.$pages[$nid]['url']).'" title="'.$pages[$nid]['name'].'">»</a>';
		}
	}
?>
<div id="pagination">
	<span class="p_prev"><?php echo $prev; ?></span>
	<span class="p_page p_current"><?php $plxShow->staticGroup(); echo " ".$page." sur ".$nb_pages; ?></span>
	<span class="p_next"><?php echo $next; ?></span>
</div>
<?php
}
?>

gegeweb · octobre 2015

Et voici la version (quasi) définitive, largement inspiré de la présentation (et du code) de plxMyPager que j'utilise.
Bon… peut-être un plugin ? (je sais pas encore faire) Voir une fonction dans le core pour ajouter la pagination des pages statiques ?

[== PHP ==]
<?php
/*
*	Pagination pour les pages statiques
*/
$pages = Array();
$page_id = $plxShow->plxMotor->cible;
if ($plxShow->plxMotor->aStats[$page_id]['group']) {
	echo '<div id="pagination">';
	foreach($plxShow->plxMotor->aStats as $k=>$v) {
		if($v['active'] == 1 and $v['group'] == $plxShow->plxMotor->aStats[$page_id]['group']) {
			array_push($pages,  ["id"=>$k, "url"=>$v['url'], "name"=>$v['name']]);
		}
	}
	$nb_pages = count($pages);
	$last_p = $nb_pages - 1;
	
	foreach($pages as $k=>$v) {
		if ($v['id'] == $page_id) {
			$no_page = $k + 1;
			$stop_p = $k + 2;
			if( $stop_p < 4 ) $stop_p = 4;
			if( $stop_p > $last_p ) $stop_p = $last_p;
			$start_p = $stop_p - 4;
			if($start_p < 0 ) $start_p = 0;
			($k == 0) ? $prev_id = $last_p : $prev_id = $k - 1;
			($k == $last_p) ? $next_id = 0 : $next_id = $k + 1;

			echo '<span class="p_page"> Page '.$no_page.' sur '.$nb_pages.'</span>';
			
			if ( $k > 1 ) echo '<span class="p_first"><a href="'.$plxMotor->urlRewrite('?static'.$pages[0]['id'].'/'.$pages[0]['url']).'" title="'.$pages[0]['name'].'">'.L_PAGINATION_FIRST.'</a></span>';
			if ( $k > 0 ) echo '<span class="p_prev"><a href="'.$plxMotor->urlRewrite('?static'.$pages[$prev_id]['id'].'/'.$pages[$prev_id]['url']).'" title="'.$pages[$prev_id]['name'].'">'.L_PAGINATION_PREVIOUS.'</a></span>';
			if ( $start_p > 0 ) echo '<span class="p_page">...</span>';

			
			for( $i = $start_p; $i <= $stop_p; $i++ ) {
				if ( $k == $i ) echo '<span class="p_current">'.$no_page.'</span>';
				else echo '<span class="p_page"><a href="'.$plxMotor->urlRewrite('?static'.$pages[$i]['id'].'/'.$pages[$i]['url']).'" title="'.$pages[$i]['name'].'">'.($i +1).'</a></span>';
			}
			
			if ($k < $last_p and $stop_p < $last_p) echo '<span class="p_page">...</span>';
			if ($no_page < $nb_pages) echo '<span class="p_next"><a href="'.$plxMotor->urlRewrite('?static'.$pages[$next_id]['id'].'/'.$pages[$next_id]['url']).'" title="'.$pages[$next_id]['name'].'">'.L_PAGINATION_NEXT.'</a></span>';
			if ($no_page < $last_p) echo '<span class="p_last"><a href="'.$plxMotor->urlRewrite('?static'.$pages[$last_p]['id'].'/'.$pages[$last_p]['url']).'" title="'.$pages[$last_p]['name'].'">'.L_PAGINATION_LAST.'</a></span>';
		}

	}
	echo '</div>';
}
?>

bazooka07 · octobre 2015

Bonjour,

Désolé, je t'ai passé du code avec quelques bugs.

Tu peux télécharger un template opérationnel ici : http://kazimentou.fr/divers/static-pagination.zip

La démo est là : http://jeveuxpartir.free.fr/pluxml/index.php?static004/voyage-princier

Dès que j'ai un moment, je modifie mon plugin myPager. Comme cela, on pourra utiliser les flèches du clavier ou le swipe horizontal sur les écrans tactiles (tablettes et smartphone)

A++

gegeweb · octobre 2015

bazooka07 a écrit:

Bonjour,

Désolé, je t'ai passé du code avec quelques bugs.

Tu peux télécharger un template opérationnel ici : http://kazimentou.fr/divers/static-pagination.zip

Merci, mais comme j'utilise déjà plxMyPager en complément de la pagination de base de PluXML je suis parti sur quelque chose qui reprend la présentation actuelle pour garder une cohérence sur le site.
D'ailleurs pourquoi, à l'image de plxMyPager, ne pas étendre les fonctionnalités de la pagination de base et ne pas garder les classes css de bases ?
Et pourquoi utiliser jQuery et du Javascipt ?

Je vais en revanche m'inspirer du code pour proposer ma version.

J'ai dans l'idée d'en faire un plugin aussi, mais je n'ai pas encore tout à fait assimilé comment ça fonctionne.

Résultat visible ici : SCASB | Parcours n°05

bazooka07 · octobre 2015

Bonjour,

J'ai du mal à me faire à l'aspect esthétique de plxMyPager :
Angles carrés comme dans Windows 8 ou les camions construits au XIXe siècle
des libellés en français sur les boutons. un '<' est plus vite compris que 'précèdent'. Qu'en pensent nos petits chinois qui ne lisent pas le français ?
"page x sur y" casse la symétrie de la pagination
des boutons apparaissent et disparaissent au gré de la navigation. Cela distrait le visiteur.
Ceci dit, les goûts et les couleurs, ça ne se discute pas comme on dit.

Et pourquoi pas Javascript ?
A mon sens Javascript est un langage plus agréable que PHP. Certains font tourner des serveurs avec Javascript (nodeJs) mais cela reste encore confidentiel.
Javascript fonctionne très bien sur tous les navigateurs côté visiteur et est bien normalisé.
Quand on lit un article, j'utilise un hook dans le template pour générer une pagination dans un formulaire. Quand le visiteur demande une page, je vérifie avec Javascript qu'il ne demande pas une page avant la 1ère page ou une page après la dernière page avant de soumettre le formulaire. Cela permet de l'avertir plus rapidement que sa demande est incorrecte que d'aller interroger le serveur à travers le net.
Dans le dernier développement de mon plugin, j'ai besoin de javascript pour 2 choses:
gérer les touches gauche et droite du clavier pour passer à l'article précèdent ou à l'article suivant. Je trouve assez agréable de lire directement en enfilade les articles d'une catégorie sans avoir besoin de revenir au sommaire de la catégorie. Idem pour des mots-clés ou des archives, Et même quand on vient de la page d'accueil.
Je gère également le balayage (swipe) du doigt sur un écran tactile de tablette ou un smartphone.

Et Jquery ?
Pour zoomer des photos ou gérer un diaporama, j'utilise colorBox. qui fait appel à jQuery. Mais colorBox a un problème : il n'a pas de comportement modal. Quand on affiche une photo en grand dans un diaporama en avant plan, il ne capture pas les événements du clavier. Au lieu de faire défiler les photos avec les touches fléchées, on voit les articles défiler en arrière plan. En plus, j'ai besoin de Jquery et d'une autre bibliothèque pour gérer les écrans tactiles.

A++

kowalsky · octobre 2015

bazooka07 a écrit:

Et pourquoi pas Javascript ?
...
Et Jquery ?

Parce que tous les navigateurs web n'utilisent pas Javascript ou Jquery.

En utilisant ces technologies, à la place de HTML/PHP/CSS, pour assurer des fonctionnalités essentielles comme la navigation à l'intérieur d'un site, sans prévoir d'alternative, c'est une partie des visiteurs qui vont se retrouver bloqués.

Ce qui est dommageable. Un peu comme avec tous les sites réalisés intégralement en Flash

bazooka07 a écrit:

Je trouve assez agréable de lire directement en enfilade les articles d'une catégorie sans avoir besoin de revenir au sommaire de la catégorie.

Tout à fait d'accord avec ta remarque. C'est une fonctionnalité qui manque sur PluXml, mais il y a le plugin ArtPS qui corrige cela.

L'as-tu essayé ?

gegeweb · octobre 2015

bazooka07 a écrit:

Bonjour,
J'ai du mal à me faire à l'aspect esthétique de plxMyPager :
Angles carrés comme dans Windows 8 ou les camions construits au XIXe siècle
des libellés en français sur les boutons. un '<' est plus vite compris que 'précèdent'. Qu'en pensent nos petits chinois qui ne lisent pas le français ?
"page x sur y" casse la symétrie de la pagination
des boutons apparaissent et disparaissent au gré de la navigation. Cela distrait le visiteur.
Ceci dit, les goûts et les couleurs, ça ne se discute pas comme on dit.

plxMyPager vient compléter la navigation standard de pluXML, le rendu visuel des liens p_page, p_first, p_next… se gère via la personnalisation des styles CSS.
Les libellés, ça utilise aussi la config de base de pluXML, il suffirait de permettre leur modification (déjà possible en modifiant la valeur des constantes utilisées) ou personnalisation dans la config du plugin, comme il est déjà possible d'inclure ou non certaines parties.
Quant-à la position du 'Page x sur x' ça n'est pas très compliqué à déplacer sous le bandeau de navigation dans les n° de page.
Afficher ou non la totalité des pages ? Dans mon cas particulier, j'ai aujourd'hui 34 pages 'Parcours', ça va augmenter… 14 pages calendriers, qui vont augmenter aussi (nous gardons le passé en archive), donc afficher la totalité serait contre productif à cet endroit.

Bref… pour ma part je trouve dommage de développer un 'add-on' qui n'exploite pas ce qui existe déjà.

Mais chacun fait comme il veut !
L'essentiel étant que j'ai trouvé une solution à une question que je ne suis visiblement pas le seul à me poser. Je suis tombé sur plusieurs questions relative à la pagination dans les pages statiques. Avec toujours la même réponse : détourner l'usage des catégorie d'articles.

Finalement, ça n'était pas si complexe que ça.

Comme je le disais ne reste plus qu'à en faire un plugin, ou pourquoi pas inclure cette fonctionnalité dans une prochaine version de pluXML.
Quant-à la gestion des pages statiques dans le menu, avec menu déroulant, je vais me pencher aussi sur la question… parce que pour ma part plutôt que le titre de la catégorie, je voudrais le lien, soit vers la premières page, soit vers une page de même nom que la catégorie…

Merci toutefois (et quand même !) de 1) m'avoir mis sur la piste, 2) pour le *.zip de ton implémentation qui va me permettre de comprendre comment en faire une version facilement installable/utilisable et très probablement me mettre sur la piste de la "fabrication" d'un plugin/hook.

bazooka07 · octobre 2015

Bonjour,

Pas de souci, il en faut pour tous les goûts.
Les 2 plugins ont un rendu esthétique et des fonctionnalités différentes.

Du coup, Pluxml pourra contenter plus de personnes

34 parcours, 100 parcours ? Même pas peur

Ma pagination gére sans broncher 34 articles sur un site. Et une liste d'articles ou de pages statiques se gèrent avec la même pagination.
Je m'inquiète plus sur l'affichage de 100 pages statiques dans la partie admin, vu qu'on ne peut pas filtrer par catégorie comme pour les articles.

Ravi de t'avoir aidé. N h'ésites pas à demander pour faire ton premier plugin.

@kowalsky,

S'il y a un humain derrière le navigateur, il y a de fortes chances que Javascript soit activé, surtout si on utilise une tablette ou un smartphone. Bien sûr, il y aura toujours une poignées d'irréductibles pour utiliser IE7 ou Lynx
Reste les robots explorateurs de Google et Cie. Mais dans ma dernière mise à jour, ils vont pouvoir se faire les dents sur <link rel="prev" href=".." />, Idem pour next. Et là, cela devrait bien booster le référencement.

Cordialement.

kowalsky · octobre 2015

bazooka07 a écrit:

Bien sûr, il y aura toujours une poignées d'irréductibles pour utiliser IE7 ou Lynx

Puisque tu en parles, je suis persuadé que l'utilisateur de Lynx aimerait bien profiter de Javascript comme le reste de l'humanité qui n'a pas besoin de synthèse vocale pour consulter un site web, mais que malheureusement son handicap visuel ne le lui permet pas. Maintenant de là à le qualifier d’irréductible...

Bref.

L'essentiel étant de pouvoir passer d'une page à l'autre dans les parcours :P

gegeweb · octobre 2015

Bonjour,

kowalsky a écrit:

Puisque tu en parles, je suis persuadé que l'utilisateur de Lynx aimerait bien profiter de Javascript comme le reste de l'humanité qui n'a pas besoin de synthèse vocale pour consulter un site web, mais que malheureusement son handicap visuel ne le lui permet pas. Maintenant de là à le qualifier d’irréductible...

Bon… évitons de rentrer dans un troll^Wdébat stérile ou querelle de clocher.

JavaScript reste utile (et même et surtout dans mes pages "parcours") dans certains cas, en complément du HTML.
Pour la navigation, je pense que ce n'est pas la bonne approche… Mais ce n'est que mon avis.

kowalsky a écrit:

L'essentiel étant de pouvoir passer d'une page à l'autre dans les parcours :P

Naviguer dans un groupe de pages statiques serait une formulation plus juste.
Parce que jusqu'à présent, hormis pour grouper les pages dans les menus je ne voyais pas trop l'intérêt des groupes.

Par contre… puisqu'on en est à dériver sur l'accessibilité pour les déficients visuels, je dois avouer que j'ai un peu négligé ce point pour l'instant… Hors nous allons accueillir dans le club des déficients visuels (en tandem) et du coup je me demande si la présentation des feuilles de routes sous forme de tableaux, solution (à priori) de facilité est une bonne approche.
Par contre présenter ça à l'écran de la même manière en utilisant des listes par exemple, pour que coté navigation textuelle il y ait du cohérence avec les différentes variantes ce suivant avec leurs étapes respectives je n'ai pas encore trouvé comment faire…

kowalsky · octobre 2015

gegeweb a écrit:

Bonjour,

puisqu'on en est à dériver sur l'accessibilité pour les déficients visuels, je dois avouer que j'ai un peu négligé ce point pour l'instant… Hors nous allons accueillir dans le club des déficients visuels (en tandem) et du coup je me demande si la présentation des feuilles de routes sous forme de tableaux, solution (à priori) de facilité est une bonne approche.
Par contre présenter ça à l'écran de la même manière en utilisant des listes par exemple, pour que coté navigation textuelle il y ait du cohérence avec les différentes variantes ce suivant avec leurs étapes respectives je n'ai pas encore trouvé comment faire…

Avec une approche sensibilisée sur l'accessibilité web, on va s'assurer que le site est bien structuré, fonctionnel et lisible.

Une astuce pour commencer sans grand moyen : désactiver le CSS et les scripts dans son navigateur et voir le rendu obtenu. S'il est possible de s'y retrouver facilement, c'est gagné.

PluXml, dans sa version 5.4, est accessible par défaut : on va y retrouver un entête, un menu, un corps d'article/page et un pied de page. La navigation entre ces différentes parties peut se faire sans problème à l'aide de la souris ou des touches de navigation (flèches de direction ou tabulation).
Il s'agit donc pour toi de t'assurer que cela continue dans le corps de l'article/page statique.

La plus-value que tu peux apporter sera par exemple de t'assurer que l'ordre de lecture reste structuré et compréhensible. Tu utilises déjà les titres pour structurer tes pages : Titre 1, Titre 2. Tu utilises aussi un fil d’Ariane qui indique à ton lecteur à quel endroit il se trouve.

Concernant la lisibilité : appliquer un équivalent texte à chaque image (balise "title" ou "alt") décrivant l'image (ce que tu fais). S'assurer que les liens tombent sous le sens, par exemple tu as plusieurs liens identiques qui pointent vers des URL différentes comme pour le premier parcours de 75km. Une approche accessible serait de les modifier en "traces GPX pour un parcours de 75 km" et "feuille de route pour un parcours de 75 km". Pareil pour les liens vers Strava qui sont tous libellés "strava". Bien sûr ça peut faire un peu répétitif de voir :

traces GPX :
traces GPX pour un parcours de 75 km
traces GPX pour un parcours de 66 km
traces GPX pour un parcours de 54 km
traces GPX pour un parcours de 47 km

mais tu n'es pas obligé de tout afficher grâce au helper "hide" : <span class="hide">traces GPX pour un parcours de </span> ou aussi avec l'attribut "alt" du lien.

Les tableaux quand ils sont bien structurés ne posent pas de problème d'accessibilité non plus.
En regardant rapidement, il y a peut-être un soucis avec les tiens : visuellement, on comprend bien l'ordonnancement avec une lecture verticale des 4 parcours par code couleur et un comparatif des étapes avec kilométrage.

Mais pour une machine, la lecture va se faire horizontalement et là ça va coincer. On s’aperçoit aussi qu'il manque un titre (th) à la seconde ligne qui n'est pas du contenu : localité (texte sous-entendu mais manquant) et km.

Affichage sans CSS (le rendu est bien en colonne mais je ne trouve pas l’équivalent de la balise html <pre> pour un bon formatage en BBcode) :

75 km 	66 km 	54 km 	47 km
 	km 	 	km 	 	km 	 	km
Ballainvilliers (local SCASB)	0,0 	Ballainvilliers (local SCASB)	0,0 	Ballainvilliers (local SCASB)	0,0 	Ballainvilliers (local SCASB)	0,0
Villejust	6,5 	Villejust	6,5 	Villejust	6,5 	Villejust	6,5
la Folie Bessin	10,8 	la Folie Bessin	10,8 	la Folie Bessin	10,8 	la Folie Bessin	10,8
Beauvert	13,9 	Beauvert	13,9 	Beauvert	13,9 	Beauvert	13,9
le Déluge	14,7 	le Déluge	14,7 	le Déluge	14,7 	le Déluge	14,7
Janvry	17,4 	Janvry	17,4 	Janvry	17,4 	Janvry	17,4
Briis-sous-Forges	21,0 	Briis-sous-Forges	21,0 	Briis-sous-Forges	21,0 		
Courson-Monteloup	25,1 	Vaurigneuse	23,5 				
St-Maurice-Montcouronne	27,3 	la Fontaine aux Cossons	25,1 				
St-Chéron	31,0 						
le Marais	35,4 	le Marais	26,9 				
Angervilliers	38,6 	Angervilliers	29,8

Affichage textuel :

75 km
66 km
54 km
47 km
 
km
 
km
 
km
 
km
Ballainvilliers (local SCASB)
0,0
Ballainvilliers (local SCASB)
0,0
Ballainvilliers (local SCASB)
0,0
Ballainvilliers (local SCASB)
0,0
Villejust
6,5
Villejust
6,5
Villejust
6,5
Villejust
6,5
la Folie Bessin
10,8
la Folie Bessin
10,8
la Folie Bessin
10,8
la Folie Bessin
10,8
Beauvert
13,9
Beauvert
13,9
Beauvert
13,9

Une solution envisageable serait de séparer les 4 parcours en 4 tableaux dont l'entête serait la seconde ligne (localité et km), la première ligne se transformant en titre 3 pour la structure et que tu positionnerais cote à cote en CSS pour un rendu visuel mais qui resteront indépendants en rendu textuel.

Après faut voir comment sont générés les-dit tableaux

C'est pas évident dit comme ça, mais tu as un atout majeur si vraiment tu veux te lancer la dedans : tu pourras t'appuyer sur le retour direct des adhérents du club pour t'aider à optimiser tout cela.

bazooka07 · octobre 2015

Bonjour,

Bonne question !!!

Wikipédia n'y fait pas clairement référence. Voici un lien pour démarrer : http://www.accessiweb.org/
Sinon, j'avais commencé à rassembler il y a un petit moment quelques liens sur le sujet sur une page google+: https://plus.google.com/u/0/113418154774324056596/posts

Quelqu'un a-t-il un synthétiseur vocal qui marche bien avec Firefox ou Chrome sous Ubuntu ?

gegeweb · octobre 2015

kowalsky a écrit:

Après faut voir comment sont générés les-dit tableaux

Pour l'instant… c'est plutôt "artisanal" (et fastidieux).
Puisque j'ai récupéré ça depuis des tableur.
Et j'y vais à coup de chercher/remplacer pour générer le code HML.

Mais il est envisagé une autre approche pour automatiser le tout à l'ajout de nouveaux parcours.
Je pensais fichier texte csv (mais pourquoi pas xml) avec les étapes, et coordonnées (pour calculer la distance automatiquement).
Du coup je pourrais récupérer un tableau à deux valeurs, localité et distance.

Je me doutais bien que ça n'allait pas aller !

Je vais ressortir Lynx du placard.

Pfff… y'a du boulot !

kowalsky · octobre 2015

gegeweb a écrit:

Je vais ressortir Lynx du placard.

Sans aller jusque là, et si tu utilises Firefox, il existe différents modules comme Wave Toolbar qui fonctionnent sur le même principe que le module Web Developper et aident à évaluer l'accessibilité d'un site.

bazooka07 · octobre 2015

@gegeweb,

Je peux ressortir mon plugin du placard si tu veux :
http://forum.pluxml.org/viewtopic.php?id=4480
http://kazimentou.fr/pluxml-plugins/

@kowalsky,
Merci pour l'info.
Mais impossible d'accéder à http://wave.webaim.org/. Mais j'ai un bloqueur de pub aussi (ublock)

A++

kowalsky · octobre 2015

Salut Bazooka07

bazooka07 a écrit:

Mais impossible d'accéder à http://wave.webaim.org/.

J'ai le même problème pour accéder au site, zont peut-être oublié de payer la facture du serveur

mais le module reste fonctionnel via une installation depuis Mozilla

gegeweb · octobre 2015

Version 1.0 du plugin fonctionnelle \o/ !
Ne reste plus qu'à ajouter la personnalisation à l'image de plxMyPager.

Edit 22/10/2015 :
staticPagination 1.1 sur mon dépot tout neuf.

Version 1.1 : Ajout de la configuration pour personnaliser les éléments à afficher.

bazooka07 · octobre 2015

Bonjour,

Congratulations comme disent les Américains.

J'attendais que tu publies ton premier plugin avant de publier la mise à jour de mon plugin préféré

J'ai encore un petit bug à corriger avant de publier. Mais c'est déjà opérationnel ici :
http://www.jeveuxpartir.net/pluxml/index.php?static4/voyage-princier

A++

bazooka07 · octobre 2015

Bonjour,

Le petit bug est corrigé. Le plugin est téléchargeable sur mon dépôt. Voir discussion dans le groupe plugins "Une pagination un peu plus fun"

A++

gegeweb · octobre 2015

@bazzoka07, voilà comme ça y'a le choix !

Bon… je commende à essayer de mettre des option de configuration.
config.php OK, j'ai bien l'indication 'plugin non configuré' et que je sois sur mon serveur local (un MAMP) ou sur le serveur de l’hébergeur quand je clique sur 'Configuration' j'ai un 'accès interdit'. Je dois louper un truc quelque part !

bazooka07 · octobre 2015

D'après les traces dans ton plugin, il y a le dessin d'ume pomme sur ton micro.
Je connais pas trop OS X mais c'est un peu comme FreeBSD ou Linux.

Vérifie que ton serveur web a des droits en lecture.

Pagination groupe page statique

Réponses