Mode diaporama

ou par étape

L'auteur de ce sujet a trouvé une solution à son problème.
Staff
Auteur du sujet

Bonour,

Proposition

une des thématique forte de ce site est l'informatique. Or ce monde est fortement séquentiel. Expliquer un algorithme dans un tuto, un article ou meme le forum est assez courant. Par exemple sur la page d'acceuil le tuto sur le tri par selection commence par cela.

L'affichage choisi n'est pas très pratique pour la lecture : il faut scroller entre les items pour suivre l'algo avec en plus le risque de se perdre dans la ligne en cours de lecture. Mais on ne peut pas vraiment blamer l'auteur, on a pas de façons de faire mieux.

Je propose donc de rajouter une sémantique specifique pour gérer ce genre de blocs d'explications qui sont constitués d'une suite d'étape. Pour moi cela doit principalement être utilisé pour des descriptions d'algo mais le rendue revient plus ou moins à un diaporama, d'où le titre.

Implémentation possible

Pour lancer le débat, voici une première proposition.

Ecriture en zMarkdown

Je propose de ré-utiliser notre notation de blocs en l'étendant et les imbriquants :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[[diaporama]]
| [[etape]]
| | Le texte de mon étape 1 avec une belle image :
| | 
| | ![Ma figure](http://example.com/img.jpg)
| Titre: La première étape
| 
| [[etape]]
| | Le texte de mon étape 2 avec une autre image :
| | 
| | ![Ma figure](http://example.com/img2.jpg)
| Titre: Ma deuxième étape
| 
Titre: Mon super algo

C'est clairement un peu lourd mais ça évite de rajouter de la syntaxe et ça découragera les utilisations trops abusives. Mais je n'en suis pas super content, si quelqu'un a une meilleure idée…

Rendu HTML

Pour le rendue HTML, je propose un cadre, comme un diaporama reprenant :

  • Le titre de l'algo
  • Le titre de l'étape courante
  • Le contenu de l'étape courante
  • Une zone de navigation permetant de naviguer entre les étapes

On peut imaginer un rendue tel que

Mockup - Rendu diaporama

Accessibilité, sans JS et PDF

Pour permettre a tout le monde de consulter le contenu même sans JS d'activé, ou pour les PDF, on peut facilement dérouler le rendu :

Mockup - Rendu déplié

ce qui fait que l'information sera toujours disponible même si moins facile à suivre !

Implémentation

En première version, l'implémentation n'est pas affreuse. Une fois définit, le travail s'effectue à deux niveaux :

  • Dans le zMarkdown pour intérpéter les éléments
  • Au niveau du front pour faire le rendue des éléments.

Avis

J'attends maintenant vos avis :)

+15 -0
Staff
Auteur du sujet

L'idée est sympa. Par contre, le bouton de lecture auto doit être désactivé par défaut.

SpaceFox

Mon but était de donner une idée général, pas la spec qui peut mériter une zep. Si la case était coché, c'est que le truc pour faire un mockup que j'ai utilisé la cochait par défaut…

+0 -0

J’avoue ne pas être ultra fan. Je trouve le cas trop rare pour que ça vaille le coup, et ce sera utilisé à mauvais escient les trois quarts du temps.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[[diaporama]]
| [[etape]]
| | On collecte les slips
| Titre: Étape 1
| 
| [[etape]]
| | …
| Titre: Étape 2
|
| [[etape]]
| | Profit !
| Titre: Étape 3
| 
Titre: Nain voleur de slip

La répétition est la base de l’enseignement. — ☮ ♡

+0 -1

@simbilou : je pense que ça sera utilisé à très bon escient là où c'est censé servir, c'est-à-dire dans les tutos et articles. Maintenant, si quelqu'un décide de s'amuser avec dans les forums, il se fera masquer/sanctionner/etc. et puis voilà. Y'a pas mort d'hommes.

Améliorons la validation ! - ZdS, faut bien secouer, sinon la pulpe, elle reste en bas !

+4 -0

Désolé du déterrage, c'est peut-être une bête question mais en quoi ça poserait problème d'utiliser un diapo dans un forum ? Et si c'est si mauvais que ça, il n'y a pas moyen de simplement l'interdire dans les forums ?

Le hasard n'est que le nom donné à notre ignorance et n'existerait pas pour un être ominscient., Émile Borel

+0 -0
Staff
Auteur du sujet

On peut en effet l'interdire sur le forum. En pratique je pense que dans un premier temps se ne serait pas la peine : on essait, si il y a quelques abus on modère, si il y a trop d'abus on désactive.

Pour le reste la syntaxe ne me plait clairement pas. Mais de toute façon c'etait plus une idée long terme, il faut déjà qu'on finisse de revoir la chaine de traitement : avoir les pdf qui rendent correctement tous nos éléments est plus urgent qu'en rajouter :)

+0 -0

C'est sûr. Mais je ne comprends pas quel type d'abus il peut y avoir et pourquoi ce ne serait pas pertinent sur les forums. Pour reprendre ton exemple du tri dans un tuto, si quelqu'un revient sur les forums pour demander une explication supplémentaire, un diapo pourrait être tout aussi utile alors, non ?

Le hasard n'est que le nom donné à notre ignorance et n'existerait pas pour un être ominscient., Émile Borel

+0 -0
Staff
Auteur du sujet

Non mais ça on est d'accord, le risque d'abus viendrais plutot des gens qui s'en servent pour faire un diaporama de 100 000 photos (tres lourd), pour troller, etc. Mais pour moi ce sont des problèmes de modération et de toute façon ce n'est pas parce qu'un outils peut etre détourné qu'il faut l'empecher.

+0 -0

Non c'est sûr. Ceci-dit, ça ne ferait qu'alourdir la page (et la BDD) mais ça ne ferait rien de plus, si?

Le hasard n'est que le nom donné à notre ignorance et n'existerait pas pour un être ominscient., Émile Borel

+0 -0
Staff
Auteur du sujet

On peut aussi imaginer utiliser une syntaxe de bloc pour délimiter l'ensemble mais utiliser la syntaxe classique pour éditer le contenu. Par exemple quand tu utilise pandoc pour faire des slides, tu fais du contenu classique et un nouveau slide est généré a chaque fois qu'il trouve :

  • soit un titre de niveau 1
  • une barre horizontal

ça pourrait donner, en mixant toutes les possibilités :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
[[diaporama]]
| # La première étape
| 
| Le texte de mon étape 1 avec une belle image :
| 
| ![Ma figure](http://example.com/img.jpg)
| 
| Ma deuxième étape
| =================
|
| Le texte de mon étape 2 avec une autre image :
| 
| ![Ma figure](http://example.com/img2.jpg)
| 
| ------------
|
| Et voici un slide sans titre
|
Titre: Mon super algo

edit: l'avantage de cette syntaxe est qu'elle va correspondre au rendu du contenu déplié, sans le JS pour en faire un diaporama.

Édité par Kje

+6 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte