Format de présentation moderne?

De nos jours, lorsque les casques VR font partie de notre réalité et que les voitures Tesla volent dans l'espace, vous pouvez utiliser toute la puissance des moteurs de navigateur pour créer des présentations vraiment interactives, multiplateformes et élégantes, plutôt que de créer un ensemble de pages PPTX ou, même pire, un document PDF dans le style "matériel d'illustration pour rapport explicatif et de calcul".

Depuis 2015, j'essaie de trouver le format de présentation optimal pour moi (en dehors des projets de fin d'études). Et maintenant, je pense que j'ai presque réussi. Tout a commencé avec PowerPoint et s'est terminé avec des cadres Web basés sur JavaScript.

Il existe plusieurs moteurs JavaScript qui peuvent être utilisés pour créer des présentations sympas: Marp , Reveal , glissement de terrain , hacker-slides , slidify et autres. Dans certains moteurs, vous pouvez utiliser Markdown, certains sont intégrés dans un IDE et certains ont leurs propres éditeurs. J'ai essayé les deux premiers moteurs.

À titre de démonstration, des exemples de diapositives et une vidéo sont disponibles.

Les deux moteurs mentionnés ci-dessus prennent en charge le format de texte brut Markdown. Le premier, Marp , vous permet de créer des présentations dans son propre IDE, ce qui est très pratique, mais la sortie est toujours un PDF statique. Le second, Reveal , est plus intéressant: il peut être utilisé pour créer des sites Web de présentation entiers - vous pouvez utiliser toute la puissance de JavaScript, HTML et CSS en plus de Markdown. Je parlerai principalement de Reveal dans cet article.

Vous pouvez voir l'évolution de mes présentations dans le référentiel https://github.com/KvanTTT/Presentations .

• Petite quantité de texte
• Utiliser des métaphores
• Minimalisme et design plat
• Accès en ligne
• Travail hors ligne
• Versions multiplateformes
• Diapositives en anglais
• Accès par lien
• Lien lisible
• Thèmes sombres et clairs
• Intégration avec les systèmes de contrôle de version (Git)
• Utilisation du format texte brut (Markdown)
• Diapositives
• Utiliser des emoji
• Images et schémas dans des formats appropriés (JPG, PNG, SVG)
  
  • Jpg
  • PNG
  • Svg
• Utiliser des IDE simples et pratiques
• Texte de présentation facile à imprimer
• Utilisation gratuite
• Fonctionnalités supplémentaires
• La présentation a l'air simple et cool
• Inconvénients
• Conclusion

Petite quantité de texte

Votre public ne lira pas le texte de la présentation à partir des diapositives, alors ne mettez pas de paragraphes entiers sur les diapositives. Parlez avec le public. Si vous ne savez pas s'il faut mettre un morceau de texte sur une diapositive ou non, jetez-le. Si nécessaire, écrivez un article dans lequel les détails seront expliqués. Il vaut mieux utiliser plus d'informations visuelles.

Utiliser des métaphores

Utiliser des métaphores, c'est bien. Le public doit être engagé dès le début de la présentation et rester éveillé. Cela peut être fait à l'aide d'images drôles. Mais sachez les limites: l'abondance de blagues peut être ennuyeuse et distrayante.

Minimalisme et design plat

Un des principes que j'ai emprunté. Il est à la mode maintenant et je l'aime aussi. Par conséquent, il est recommandé d'utiliser un petit nombre de couleurs de base (trois à cinq) lors de la création de présentations.

Accès en ligne

La présentation doit être disponible à partir du navigateur. Ainsi, vous n'aurez pas peur de perdre un lecteur flash, de planter votre ordinateur portable et d'autres adversités lors de la présentation.

Travail hors ligne

Une perte soudaine de connexion Internet n'est pas un gros problème. Cependant, vous avez toujours besoin du navigateur. Dans ce cas, toutes les images doivent être locales. Pour exécuter la présentation, il suffit de télécharger les sources depuis un référentiel GitHub.

Versions multiplateformes

Cela fonctionne sur Windows , Mac , Linux , Android , iOS Oui, vous pouvez parcourir les diapositives même sur le téléphone pendant la présentation!

Diapositives en anglais

Dans une bonne présentation, il y a peu de texte et c'est simple. Votre exposé en russe (ou toute autre langue non anglaise) avec des diapositives en anglais sera clair pour la plupart des spectateurs qui connaissent l'anglais élémentaire. Il est facile de traduire l'audio, mais assez difficile de changer la vidéo.

Accès par lien

Les auditeurs peuvent ouvrir la présentation sur leur appareil pendant la conversation. Sur la diapositive de titre, vous pouvez mettre un court lien kvanttt.imtqy.com vers le site principal, où il est facile de trouver un lien complet vers la présentation.

Lien lisible

Du lien vers la présentation https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html, ce qui suit est immédiatement clair:

• Auteur: kvanttt
• Date de publication: 2018-05-15
• Format: présentations (il peut également y avoir, par exemple, des articles , des échantillons )
• Langue: anglais
• Titre: Analyseurs de code source-comment-généralisables-sont-ils
• Vous pouvez également vous référer à n'importe quelle page de la présentation en utilisant le signe numérique #/5 .

Thèmes sombres et clairs

Pour la meilleure adaptation à l'éclairage ou à l'ambiance. Vous pouvez également créer le vôtre.

Vous pouvez également modifier le style des transitions entre les diapositives.

Intégration avec les systèmes de contrôle de version (Git)

Git est l'un des systèmes de contrôle de version les plus populaires. À l'aide de Git, vous pouvez valider des modifications, créer et fusionner des branches, comparer différentes versions de fichiers (diff), identifier les auteurs de chaînes spécifiques (blâme) et faire beaucoup d'autres choses. Git n'est pas très simple, mais les capacités de base peuvent être maîtrisées rapidement.

GitHub peut être configuré de sorte que lorsque vous poussez vers les gh-pages ou la branche principale, le site est immédiatement publié sur un hébergement statique dans le domaine imtqy.com ce qui est très pratique.

Voici le dossier source: https://github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they

Utilisation du format texte brut (Markdown)

Il s'agit d'un format de texte simple - les balises et autres syntaxes complexes sont facultatives. C'est quelque chose comme Python pour les rédacteurs techniques :) D'autre part, il est facile de comparer différentes versions car il s'agit d'un format texte, et vous pouvez utiliser des outils de programmation standard comme Pull Request | Fusionnez la demande ou valide simplement les modifications dans la branche appropriée.

Markdown permet de décrire facilement:

• différents styles de texte ( italique , gras , barré , lien , devis, code snippet ),
• rubriques
• listes, ordonnées et non ordonnées,
• tables
• spoilers,
• des éléments supplémentaires qui peuvent varier en fonction de la mise en œuvre. Si nécessaire, vous pouvez également utiliser des balises HTML.

 <!-- .slide: style="text-align: left;" --> # ️ Text fingerprinting with zero-length characters Be c​aref​ul wh​at yo​u copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. F​or exam​ple, I have ins​erted 5 such characters in​to thi​s string, c​an you tel​​l? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> --- 

Diapositives

Pendant la présentation, vous pouvez appuyer sur S et regarder les notes préparées et la diapositive suivante. Vous pouvez également contrôler la durée de votre conversation à l'aide de la minuterie. Les notes peuvent être affichées sur le deuxième moniteur.

Utiliser des emoji

Emoji peut être utilisé pour associer des diapositives à des images visuelles. Malheureusement, ils ne sont toujours pas pris en charge sur Habr, vous ne verrez donc pas les emoji dans le titre au-dessus de ce paragraphe.

Images et schémas dans des formats appropriés (JPG, PNG, SVG)

Jpg

Format de compression avec perte, adapté aux photos et aux images complexes avec des dégradés et une palette riche. Mauvais pour les dessins et les graphiques avec du texte et des signes. Bon pour le fond.

PNG

Format de compression sans perte, adapté aux images avec de grandes zones homogènes et une palette de couleurs limitée. Pas besoin de l'utiliser pour les photos, car la taille du fichier sera beaucoup plus grande. Bon pour les captures d'écran.

Svg

Pour une raison quelconque, beaucoup de gens oublient SVG, qui présente les avantages suivants:

• mise à l'échelle de l'image à n'importe quelle taille sans perte de qualité;
• intégration avec Git (format texte);
• vous pouvez changer les couleurs, les polices et d'autres éléments directement dans le fichier;
• petite taille de fichier.

Pris en charge par tous les navigateurs modernes - et même Habr! Malheureusement, il ne peut être téléchargé sur Habr qu'indirectement .

Notez que la plupart des images de cet article sont au format SVG.

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generated by graphviz version 2.38.0 (20140413.2041) --> <!-- Title: cfg Pages: 1 --> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <!-- 27 --> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == &quot;admin&quot;</text> </g> <!-- 33 --> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == &quot;validkey&quot;</text> </g> 

Utiliser des IDE simples et pratiques

Par exemple, Visual Studio Code avec des plugins. L'aperçu à gauche, la version finale (rendu) à droite ou dans le navigateur. Il existe un plugin de vérification orthographique, des plugins de génération de contenu (TOC), des tables de formatage et autres.

Texte de présentation facile à imprimer

Le texte des diapositives et des notes peut être facilement imprimé (par exemple, pour la formation). Il s'agit d' un texte simple avec un minimum de déchets.

Utilisation gratuite

Tous les outils, formats et hébergement statique .imtqy.com sont gratuits. Et même cette image

Fonctionnalités supplémentaires

Dans le moteur révéler.js , d'autres fonctionnalités sont également disponibles

• Diapositives verticales: vous pouvez faire défiler non seulement latéralement, mais aussi verticalement.
• Possibilité de créer une présentation sans écrire de code à l'aide de slides.com .
• Possibilité de visualiser plusieurs diapositives à la fois pour une navigation facile.
• Utilisation de différents types de mosaïque d'arrière-plan, utilisation de la vidéo comme arrière-plan.
• Diaporama automatique.
• Et quelques autres fonctionnalités .

Vous pouvez également expérimenter avec une version interactive.

La présentation a l'air simple et cool

Oui, bien sûr, il y a des défauts mineurs dus au moteur imparfait et pas assez de mains capables d'un développeur non frontend :) Mais, à mon avis, cela semble bon. Si vous n'êtes pas d'accord, veuillez laisser un commentaire.

Inconvénients

Bien sûr, tout a des inconvénients, et cette approche ne fait pas exception:

1. Exportation maladroite au format PDF , vous devez modifier la sortie. Cependant, est également disponible‌ .
2. Aucune exportation vers PPTX .
3. Pas très facile à maîtriser, surtout pour les non-programmeurs et les développeurs non frontend (idéalement, vous devez connaître HTML et CSS ).
4. Pas très facile de faire des modifications. Mais vous pouvez l'adapter et l'automatiser.
5. Les emoji ne sont pas affichés de la même manière partout (par exemple, vous ne verrez pas les emoji dans cette phrase).
6. Le moteur est encore brut.

Conclusion

Il me semble que les futures présentations seront comme ceci: interactives, sous la forme de sites Web faciles à éditer pour les programmeurs et les concepteurs. Essayons de rapprocher cet avenir!

Soit dit en passant, les articles peuvent également être écrits à l'aide de Git et Markdown et hébergés sur GitHub ou GitLab. J'écrirai à ce sujet plus tard.

Si vous avez des corrections ou des ajouts, veuillez écrire vos commentaires ci-dessous. Je vais les considérer et éventuellement inclure dans l'article.

Les sources de l'article sont disponibles sur GitHub - veuillez envoyer Pull Request si vous trouvez une erreur. Pour la conversion au format habr.com, j'utilise la bibliothèque MarkConv .