Garanti par les laboratoires Lexpage    —  Guybrush

Discussions

Sass et les navigateurs

Guybrush 8343 Bob
Bonjour,

Ayant eu quelques déboires récemment avec "Impress" de LibreOffice, et ayant pour habitude d'utiliser Beamer pour mes présentations (autrement dit, de l'ultra-classique pas très "vendeur"), je me suis récemment tourné vers des frameworks JS pour écrire mes slides de présentation. J'ai du pas mal customisé le bouzin pour arriver à intégrer ce que je voulais (notamment unsemantic pour les grilles, animate.css, des éléments de bootstrap pour la typo, quelques hacks pour mieux gérer les fragments, etc.).

Là, j'arrive à un point où mon "custom.css" qui contient quelques règles devient un peu complexe à maintenir, surtout pour la gestion des couleurs. J'aimerai donc utiliser Sass qui est clairement fait pour ça (et que j'ai appris à apprécier avec Lexpage), mais je n'ai pas envie d'avoir à compiler à chaque fois mon document, vu que le but est de l'afficher directement dans le browser.

La question est donc : (pour ceux qui voulaient zapper l'intro ^^) existe-t-il un moyen de pouvoir inclure une feuille Sass et qui soit automatiquement interprétée et convertie dans le navigateur ? J'ai googlé un peu, mais je n'ai rien trouvé de probant (y a bien un compilateur Sass, mais j'aimerai vraiment un truc "clé en main", où limite j'insère le script dans mon <head>, et il s'occupe de convertir les <link rel="sass_stylesheet"> pour la page en cours).
Fabe 607 Geek
Je n'ai aucune idée pour ta question sass, mais je suis intéressé par la lib js que t'as utilisé :-D

Je suis en train de "convertir" ma boîte de Beamer vers Remarkjs, pour versionner nos slides en Markdown plutôt qu'en LaTeX, il m'a fallu refaire un peu de Javascript pour récupérer quelques features de beamer (notamment la génération des slides d'agenda entre les \section, tout ça...)


Ce message a été modifié 1 fois. Dernière modification : 14 janvier 2017 à 08:49 par Fabe.

Guybrush 8343 Bob
lab.hakim.se/reveal-js/#/

Dessus, j'ai ajouté un support pour animate.css (mais pas encore pour des nested-fragments), quelques éléments typographiques (.info, .warning, .danger, .success, ... à la bootstrap, les versions framed de ces trucs là, un support pour les figures arrondies/circulaires, du placement/alignement, de la taille (smallest/smaller/small/big/bigger/biggest), etc. etc. des machins un peu classique.

C'est pas encore fini (j'aimerai pouvoir déclarer un ordre partiel pour l'affichage des fragments, sans avoir à tout numéroter manuellement, et en tenant compte de la hiérarchie des fragments), mais ça avance. Dès que j'ai fini, je mettrai ça sur Github, sans doute via un truc compatible avec cookiecutter (github.com/audreyr/cooki…).
Guybrush 8343 Bob
Possible de faire un petit retour à propos de RemarkJS ?
Pour des mises en page plus avancées, il y a moyen de "hacker" d'une manière ou d'une autre ?

Je suis coincé avec RevealJS : je n'arrive pas à avoir un rendu correct à l'impression, or je dois souvent fournir les slides en PDF pour "archive"... Théoriquement, c'est censé être supporté, mais visiblement, cela ne marche que sous Chrome (et j'utilise FF uniquement). Par ailleurs, j'ai du plonger à plusieurs reprises dans le code source pour implémenter un vrai support pour les fragments (éléments qui s'affichent petit à petit), et c'est une vraie horreur : c'est codé dans un mix js/css tout simplement hideux ^^
Fabe 607 Geek
GuybrushPossible de faire un petit retour à propos de RemarkJS ?
Je l'avais qualifié à la place de reveal car il paraissait plus simple d'obtenir un fichier HTML se suffisant à lui même. En effet c'est simple pour les parties CSS/JS mais je me retrouve logiquement un peu coincé avec les autres médias (images, vidéos).
Sauf à mettre en place une usine à gaz pour compiler les images en base64 et les remplacer par des data uri dans le markdown...
GuybrushPour des mises en page plus avancées, il y a moyen de "hacker" d'une manière ou d'une autre ?
Oui, en gros en faisant du Javascript pour retoucher au DOM après le passage de Remark
GuybrushJe suis coincé avec RevealJS : je n'arrive pas à avoir un rendu correct à l'impression, or je dois souvent fournir les slides en PDF pour "archive"... Théoriquement, c'est censé être supporté, mais visiblement, cela ne marche que sous Chrome (et j'utilise FF uniquement).
Je pense que t'auras le même souci avec Remark. Perso j'utilise le "Print as PDF" de Chrome qui donne un super résultat.

Le site de remark recommande sinon Decktape qui supporte Remark et aussi Reveal, mais je n'ai pas testé. Je suis preneur de ton retour, si tu le fais :-)
Guybrush 8343 Bob
Je vais sûrement le tester parce que l'export en pdf (ou autre) est un must-have pour moi.

Je ferai un retour, promis :-)
Guybrush 8343 Bob
C'est pas très concluant. Il faut un PhantomJS forké pour le faire tourner... :(

Sinon, j'ai regardé Remark.js. C'est sympathique, mais difficilement hackable. Par exemple, il est impossible (?) de faire des animations pour les slides. On peut attaquer ça via CSS, mais alors la version imprimable foire, et si on le fait via JS, on ne dispose pas d'assez de callbacks pour s'en sortir (notamment, beforeHideSlide & co reçoit uniquement le slide courant, impossible de connaître le slide qui va apparaître, donc impossible de faire glisser le slide dans la bonne direction). Plus embêtant, un peu comme Reveal.js, c'est un mélange d'astuce JS/CSS qui fait que "ça marche", ce qui rend les choses plutôt délicates.

Le fait que les "fragments" (morceaux à afficher progressivement) soient en fait traduits sous forme de nouvelle slide avec un "morceau en plus" rend le hack d'autant plus difficile : impossible de faire la distinction entre deux slides consécutives, et une slide dupliquée à cause de la présence d'un fragment. Même si j'ai regardé à cela dans le cadre des transitions entre slides, ça pose aussi souci lors de l'impression : chaque étape de la progression dans une slide est exportée sous la forme d'une nouvelle slide. Donc une liste à puces avec 10 éléments qui s'affichent progressivement générera 10 slides dans la version imprimée (c'est cohérent avec ce qu'on a à l'écran, mais pas pratique en pratique :-D).
Fabe 607 Geek
GuybrushPar exemple, il est impossible (?) de faire des animations pour les slides.
Ah je sais, pas. De mon côté il s'agit de supports de formation, je n'ai pas été intéressé par le fancy même si je vois l'intérêt des transitions de Reveal.

En revanche, le presenter mode et le mode cloné sont une tuerie.
GuybrushDonc une liste à puces avec 10 éléments qui s'affichent progressivement générera 10 slides dans la version imprimée (c'est cohérent avec ce qu'on a à l'écran, mais pas pratique en pratique ).
Pour le coup c'est pile poil ce qu'il me fallait, on a des formateurs qui vont utiliser la version PDF plutôt que HTML, il faut qu'ils aient le déroulé de la même manière qu'avec le HTML.
Par contre je n'ai pas trouvé de solutions pour mettre les presenters notes dans le PDF :-/


Ce message a été modifié 1 fois. Dernière modification : 15 janvier 2017 à 17:10 par Fabe.

Guybrush 8343 Bob
J'ai continué à hacker un peu RevealJS. J'ai réussi à faire un vrai système pour gérer les animations (via data-animate, data-duration et data-delay). Ca supporte les animations sur les slides, sur les fragments, et sur les éléments imbriqués (bref, tout ce qu'on attend d'un tel système).

En parallèle, j'ai réussi à faire fonctionner le mode Speaker note (il fallait effectivement utiliser un serveur local plutôt que l'ouvrir dans Firefox directement, car y a un accès au filesystem. Mais python -m SimpleHTTPServer fait l'affaire), et j'ai résolu le souci d'impression en PDF au passage (via une imprimante virtuelle et un mode "continu" dans les slides). Bref, je suis content :-D
Tchou 3555 Bob
GuybrushLa question est donc : (pour ceux qui voulaient zapper l'intro ^^) existe-t-il un moyen de pouvoir inclure une feuille Sass et qui soit automatiquement interprétée et convertie dans le navigateur ? J'ai googlé un peu, mais je n'ai rien trouvé de probant (y a bien un compilateur Sass, mais j'aimerai vraiment un truc "clé en main", où limite j'insère le script dans mon <head>, et il s'occupe de convertir les <link rel="sass_stylesheet"> pour la page en cours).
Je réponds tard, mais : oui, ça existe, du moins ça existait quand je me suis mis à Sass. C'est un script js à mettre dans ton html, et tu linke tes .scss directement, ça les décompile à la volée dans ton browser. Ça a par contre un coût évident en performances (que l'on pourra probablement qualifier d'abyssales). Non, je ne me rappelle pas du nom, je n'ai pas utilisé.

Une approche probablement meilleure (sous réserve que celui qui fait les modifs CSS soit un développeur avec une connaissance minimale de la ligne de commande) serai pour résoudre ton problème d'avoir un grunt watch ou un gulp watch (ou un "l'outil à la mode" watch, je sais plus quel est le parfum du mois ce mois-ci et l'outil indispensable qu'il faut abandonner tous les autres), un petit programme qui écoute un répertoire et quand il voit du changement dedans va lancer une procédure (dans ce cas : si mon repertoire sass a de l'activité, relance une compilation sass sur les trucs nouveaux).

Sur les diaporamas : outre une réponse "il faut les buter, même si c'est pas du powerpoint®™", je n'ai pas d'expérience dans le domaine, je pourrais pas t'aider.

Répondre

Vous devez être inscrit et identifié.