5045 sujets

Sémantique web et HTML

Bonjour,
Je suis enseignant à domicile en maths et suis en train de saisir le contenu d'un futur site dans lequel je recopie mes (nombreux) manuscrits de cours et de corrigé d'exercices.
(Pour les expressions mathématiques, j'utilise le script Javascript MathJax qui permet de saisir des expressions directement dans le code html à l'aide d'une syntaxe somme toute assez intuitive et simple. Je recommande.)
Pour l'instant, j'en suis à la saisie au kilomètre et n'ai pas encore conçu de css.

Comme je reproduis l'approche pédagogique spécifique de mes cours oraux, mes articles, accompagnés de nombreux exemples de résolution, sont souvent longs.

Pour ne pas rebuter mes élèves, il est indispensable que je puisse masquer un bon nombre de sections (principalement balises <section> et quelques <div>) en donnant la possibilité de les développer et de les réduire à souhait.

Quelle(s) structure(s) me conseillerez-vous de saisir dans mon html sachant que je traiterai la mise en forme en css et la "mécanique" de développement-réduction plus tard ?

Vous remerciant d'avance pour vos conseils (toujours) pertinents et éclairés,
Boris
Le coté "réduire ou non" ce gère en JavaScript (et bien plus facilement en jquery).

Je te renvoi vers ce lien pour comprendre la logique
Merci Jencal de cette piste.
Est-ce qu'il est cependant possible de placer un bouton Développer en début de section ou de div et un bouton Réduire en fin de section ou de div et ne pas attribuer d'identifiant à la section ou au div ? (Il faut bien évidemment que le bouton Développer soit affiché. Smiley smile
J'ai en effet beaucoup trop de portions de texte devant être développées - réduites pour attribuer un identifiant à chacune d'elles.
Tu peux le faire en pur CSS si tu n'as pas trop de blocs de texte à cacher :
https://codepen.io/bazooka07/pen/pVJNgz
Sinon on peut
soit insérer les balises qui vont bien côté serveur avec du PHP,
soit côté navigateur avec quelques lignes en javascript en jouant avec les class.
Modifié par bazooka07 (20 Apr 2018 - 11:25)
Bonjour,

Vous en rêviez, le W3C l'a fait ! En effet, il existe un balisage html dont la fonction est... TINDIN... de faire très exactement ceci :
<details>
  <summary>intitulé du paragraphe</summary>
  Contenu du paragraphe
  ...
</details>
Seulement il y a un hic, IE, Edge et Opera Mini (rien d'étonnant) restent de mauvais élèves et ne l'ont pas implémentés. Table de compatibilité

Autrement, uniquement en Css et sans élément de formulaire il y a une solution un brin plus complexe à mettre en oeuvre mais diablement efficace. Je vous invite à jeter un coup d’œil ici.

Le plus dur maintenant, c'est de choisir Smiley biggrin
Modifié par Greg_Lumiere (20 Apr 2018 - 11:45)
Greg_Lumiere a écrit :
Bonjour,
Autrement, uniquement en Css et sans élément de formulaire il y a une solution un brin plus complexe à mettre en oeuvre mais diablement efficace. Je vous invite à jeter un coup d’œil ici.

Il y a un grain de sable sur le brin Smiley biggrin
Tu ne peux afficher qu'une définition à la fois
Cela remplace des boutons radios, pas des checkboxes.

Sinon <summary> est bon à savoir.
Reste à exclure les mauvais élèves Smiley lol
Modifié par bazooka07 (20 Apr 2018 - 12:04)
bazooka07 a écrit :

Il y a un grain de sable sur le brin Smiley biggrin
Tu ne peux afficher qu'une définition à la fois
Cela remplace des boutons radios, pas des checkboxes.


Oui, c'est à la fois un inconvénient et à la fois un avantage.
L'inconvénient tel que tu l'évoque est qu'on ne puisse avoir tous les volets ouverts simultanément (si tant est que ce soit vraiment un inconvénient sauf si on veut absolument faire apparaître deux informations simultanément...).

Toutefois cela présente un avantage ergonomique car selon la méthode des checkboxes, qu'arrive-t'il lorsque tu as déplié toutes les boites et que tu souhaite revenir en haut de page en scrollant ? Je ne te le fais pas dire, l'épopée peut-être très longue.

Dans le fond une méthode n'est pas pire que l'autre, c'est simplement l'usage dont on veut en faire et le comportement recherché qui détermine la techno à utiliser. Smiley biggrin
Merci de toutes ces indications !
Greg_Lumiere a écrit :

Dans le fond une méthode n'est pas pire que l'autre, c'est simplement l'usage dont on veut en faire et le comportement recherché qui détermine la techno à utiliser. Smiley biggrin

Tout à fait juste, Greg !

Les sections peuvent être assez longues (par exemple une démonstration détaillée).
La réduction de la zone doit donc pouvoir être effectuée en bas de section ou de div de façon à ne pas imposer de remonter la partie affichée pour pouvoir la refermer.

D'autre part, l'élève peut tout à fait garder présentes plusieurs parties affichées si elle ou s'il estime que cela aide à sa compréhension. Je ne peux donc lui imposer de refermer une portion de texte pour ouvrir une autre.

En définitive, je vais, dans ma saisie au kilomètre,placer dans un premier temps des boutons html d'ouverture et de fermeture (j'ai bien évidemment enregistré des macros de saisie) :
<button type="button" onclick="Develop()" class="D_R">Développer</button>

<button type="button" onclick="Reduce()" class="D_R">Réduire</button>

et voir, dans un deuxième temps, comment écrire le code javascript ad hoc.

Merci encore.
Modifié par Borcade (20 Apr 2018 - 13:01)