search

laowantong / d3_stuff

0 stars 0 forks source link

Transfert du style du site officiel #9

Open laowantong opened 6 years ago

laowantong commented 6 years ago

Contexte

Je vais progressivement mettre en ligne le plan d'études en une page de chaque filière. Chacune de ces pages est automatiquement traduite en HTML à partir d'un texte-source Markdown, lui-même généré à partir de ma base. Je n'ai pour l'instant publié que la page de la licence info. Le CSS repose sur l'un des thèmes prédéfinis, Leap Day.

Par ailleurs, le site officiel du DFHI-ISFATES a son propre style, spécifié dans ce guide de design (preprint).

Ce qui est à faire

Annexes

Addenda au guide de design

J'ajoute quelques informations qui ne sont pas, ou pas données sous cette forme dans le guide de design.

Markdown et balises HTML

Normalement, on peut mettre directement des balises HTML dans un texte Markdown. Par exemple, <kbd>ceci</kbd> qui donne ceci. Le transpiler de GitHub « assainit » l'entrée en ignorant toutes les balises autres que celles-ci :

h1 h2 h3 h4 h5 h6 h7 h8 br b i strong em a pre code
img tt div ins del sup sub p ol ul table thead tbody
tfoot blockquote dl dt dd kbd q samp var hr ruby
rt rp li tr td th s strike summary details

Je n'attends pas que les enseignants qui remplissent les descriptifs de leur module utilisent ce genre de balises. Par contre, au moment où je construis le Markdown d'un plan d'études, il se peut que je sois amené à en insérer automatiquement moi-même. Pour l'instant, j'ai juste employé la balise <sub> pour obtenir les « sous-titres » dans les tables des modules des UE :

Bases de données relationnelles Relationale Datenbanken

Donc, cette balise devrait être ajoutée à votre CSS minimal pour Markdown (peut-être dans un fichier séparé, ou au moins une zone séparée de la feuille de style ?). Et pour la suite, il faut garder à l'esprit qu'en « détournant » certaines balises HTML de leur sémantique normale, nous pouvons aller plus loin que Markdown.

laowantong commented 6 years ago

Bonsoir à vous deux ! Est-ce que ça vous intéresserait de travailler là-dessus ? Ce n'est pas directement lié au plan d'études interactif, même si une partie du travail sur les CSS sera sans doute le même. Ça vous demandera pas mal de lecture de code (CSS) et quelques décisions de design (notamment pour les tables). Je ne pense pas que ce soit trop difficile quand on connaît CSS. On en discute demain ?

Lyokolux commented 6 years ago

Nous sommes chaud patate. Nous allons adapter le thème from scratch (pour le design). On utilise le code source de la page Informatique comme référence.

laowantong commented 6 years ago

Ah ah, ok :smile:, bon courage à vous ! Mais la référence pour le CSS est plutôt le site officiel du DFHI-ISFATES. Effectivement, pour le HTML, c'est le lien que tu dis.

Lyokolux commented 6 years ago

Est-ce que le HTML peux être modifié (simplifié) ? Le convertisseur Markdown-->Html propose un code prédéfini à l'avance ? Par exemple, la <div class="wrapper"> dans le <body> est-elle modifiable ? Ou alors, on ne touche pas au code HTML. L'intêret est de rendre le tout plus HTML5.

laowantong commented 6 years ago

Non, on n'a aucune prise là-dessus. Sans doute que le convertisseur Markdown -> HTML utilisé par GitHub n'est pas vraiment cutting edge.

laowantong commented 6 years ago

Exemple du tag summary:

<details>
  <summary>Cliquez-moi.</summary>
  Ici, on ne peut mettre que du HTML pur (les balises Markdown ne sont pas interprétées)
</details>

... produit :

Cliquez-moi. Ici, on ne peut mettre que du HTML pur (les balises Markdown ne sont pas interprétées)
Lyokolux commented 6 years ago

Premier push, j'ai finalement repris le design de base.

Je pense que laisser un plus grand espace est préférable pour les grands écrans. J'y ai ajouté un peu de couleur bleu au niveau des titres. Cela change de la monotonie de la page.

Prochaine étape : le design des listes à puces.

laowantong commented 6 years ago

@Lyokolux pas mal, je t'ai mis un petit commentaire sur le commit.

Je me suis bookmarké ceci récemment, c'est à lire: https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

johannchopin commented 6 years ago

Où puis je voir le push Grand Guidoux ? Histoire de pouvoir continuer le code si bien commencé 😉 Je ne l'avais pas repris sur une clé ce soir là 😢

Lyokolux commented 6 years ago

@johannchopin dans les commits, puis dans la branche appropriée : https://github.com/laowantong/d3_stuff/commits/transfer-official-style

laowantong commented 6 years ago

Je partage l'interrogation de Johann. As-tu bien fait, non seulement un commit, mais un push (ou sync sois GitHub Desktop) ? Le dernier push dans cette branche date du 26 mars.

Lyokolux commented 6 years ago

Oui oui, c'est bien le code vieux de plusieurs semaines. C'est en mars qu'on a travaillé dessus. @johannchopin je pense que tu ne navigues pas dans la bonne branche, c'est pour cela que tu ne l'avais pas trouvé.

J'arrive pas à styliser correctement les listes à puces. Elles devrait avoir un rond bleu comme sur le site de l'ISFATES. Bon, c'est juste une question de temps.