Répartir une longue page html en plusieurs pages d'affichage

Bonjour,

Toujours mon projet de site mathématique : comme j'explique abondamment et que je fournis beaucoup d'exemples, je me rends compte que, pour ne pas lasser mes élèves par un déroulement trop long, il me faut découper un chapitre (représenté par son fichier html) en plusieurs pages d'affichage, tout en conservant un seul fichier html.

Quelle structure html me faut-il prévoir, en dehors des boutons Suivant et Précédent ?

Autrement dit, quelles balises dois-je préventivement placer dans mes fichiers pour délimiter les pages d'affichage en prévision du code (en javascript ? en php ?) que je développerai plus tard ?

Merci de votre aide.
Bonne journée

Bonjour Borcade,

J'ai vu passer un de tes sujet ces derniers jours. Bref, je ne comprends pas vraiment ta question.

Je pense que tu mets la charrue avant les boeufs. C'est à dire, les étapes du zoning et wireframe n'ont pas été faites. Je t'invite à consulter cet article :
Du zoning au mockup, itinéraire d’une maquette web

En faisant simple, tu peux très bien utiliser du PHP. Ces petites commandes ou type de variables devraient t'aider.
- require_once / include_once
- $_GET

À moins que tu n'aies besoin d'une réécriture d'url et d'une interface d'administration ? Dans ce cas là, il faut réfléchir autrement et se diriger vers un CMS tel que Joomla ou Drupal ou Wordpress. Bien que Wordpress ait la côte, je te conseille plutôt Drupal ou Joomla. L'avantage est que tu auras beaucoup moins de soucis de sécurité. Bien sûr, tu pourrais envisager un framework. Mais la courbe d'apprentissage est un peu élevée pour toi je pense.

Pour le Javascript (côté navigateur), il n'est pas utile pour le moment.

mp envoyé
Modifié par niuxe (08 May 2018 - 16:21)

Bonjour niuxe,
Merci de ta réponse et de tes indications.

Pour l'instant, je recopie mes manuscrits en html et utilise une feuille de style minimaliste permettant seulement de repérer l'imbrication des différents niveaux de texte par des bordures colorées sur le côté gauche.

Je n'en suis donc pas à concevoir une maquette web.
Cette conception viendra bien plus tard, lorsque j'aurai recopié un volume suffisamment important de documents.

Je structure mes documents à l'aide de <section> imbriquées.
(Je n'utilise de <div> que ponctuellement.)
Je pense donc que je vais créer dans mes documents un niveau supplémentaire de <section> contenant le texte que je désire afficher dans une page de lecture.

Lorsque j'en serai là, je gérerai effectivement les pages de lecture par du php en utilisant notamment les fonctions include_once et require_once.

Le fait de raisonner en pages d'affichage plus qu'en sections de niveau 2 ou de niveau 3 va m'apporter une aide précieuse pour la conception de la structuration du texte.

Oui je pense que c'est pas mal comme angle d'attaque. S'attaquer d'abord au contenu et après tout le reste.

As tu regardé si le Markdown avec un plugin complémentaire peut t'aider ? C'est une simple suggestion et peut être, cette approche ne peut te convenir.

« Oui je pense que c'est pas mal comme angle d'attaque. S'attaquer d'abord au contenu et après tout le reste. »

Merci de ta réponse, niuxe,

Le problème est que j'aurai un grand nombre de documents (au final, peut-être 200 ou 300, voire davantage).
Je dois donc bien penser d'emblée la structure html des documents de façon à, d'une part, acquérir un certain automatisme de saisie, d'autre part à ne pas devoir ensuite les restructurer un à un lors de la programmation de la dynamique parce que je me serais rendu compte que la structure initiale ne convient pas.

Dans un premier temps, je pense que le plus simple est d'attribuer un identifiant à chacune des pages d'affichage (Page1, Page2...) et d'utiliser en Javascript
document.getElementById(identifiant).style.display = block
et
document.getElementById(identifiant_de_ma_div).style.display = none

_______________

« As tu regardé si le Markdown avec un plugin complémentaire peut t'aider ? C'est une simple suggestion et peut être, cette approche ne peut te convenir. »

Un ami m'avait conseillé Asciidoc.
A priori, je préfère, peut-être à tort, travailler "dans le dur", directement en html.

Sinon, tu peux tout simplement faire une table des matières en tête de la page et mettre un lien de retour à la fin de chaque chapitre

...
<ul id="toc">
  <li><a href="#chapitre1">Chapitre 1</a></li>
  <li><a href="#chapitre2">Chapitre 2</a></li>
  ...
</ul>
...
<h2 id="chapitre1">Mon chapitre 1</h2>
<p>blablabla blablabla</p>
<p><a href="#toc"><abbr title="Table des matières">TOC<abbr></a></p>
...  
<h2 id="chapitre2">Mon chapitre 2</h2>
<p>blablabla blablabla</p>
<p><a href="#toc"><abbr title="Table des matières">TOC<abbr></a></p>
...

Modifié par Charlycoste (10 May 2018 - 13:01)

Merci Charlycoste

Dans la mesure où j'aurai un grand nombre de documents html longs, cette approche serait beaucoup trop coûteuse en temps de saisie (et ne serait pas vraiment adaptée au besoin de lire le texte de façon continue, en naviguant de page en page ; je rappelle qu'il s'agit de cours de maths et de corrigés explicatifs d'exercices).

Voici la solution que je compte in fine appliquer :

Je m'astreins pour chaque document à la structure suivante :
- Chaque section de niveau 2 ou 3 est incluse dans un bloc <section>.
- Chaque section possède un titre <h2> ou <h3>.
- En général, la balise venant immédiatement après la balise <section> est la balise de titre.
Toutefois, le bloc <section> peut contenir un bloc <div> (par exemple, dans un document destiné à des élèves de Terminale, pour signaler que la section s'adresse en particulier aux élèves de Terminale S). Le titre de la section est alors dans le <div>.
- Je place les boutons "Page précédente" et "Page suivante" en fin de section.

La structure html que je vais finalement adopter pour ces boutons, car de loin la moins coûteuse en temps de saisie — j'utilise un raccourci clavier qui saisit tout le bloc <div> —, est donc la suivante (_xx désigne le niveau de la section : 2 ou 3) :

<section class="Niveau_xx  Page">
<h_xx>Titre de la section</h_xx>
<!-- Texte de la section -->

<div class="SuivantPrecedent">
<p class="Precedent"><button type="button" onclick="Precedent()">Page précédente</button><span></span></p>
<p class="Suivant"><button type="button" onclick="Suivant()">Page suivante</button><span></span></p>
</div>

</section>

Le "cahier des charges" des fonctions Javascript Precedent() et Suivant() sera donc :
- déterminer la section mère du bouton ;
- déterminer la section de classe "Page" précédente ou suivante ;
- place dans le <span> le titre de la section appelée par le bouton ;
- effacer la section courante ;
- afficher la section appelée par le bouton.

Je pense que c'est tout à fait faisable en Javascript.
Êtes-vous du même avis ?