Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue98:c_c [2015/07/05 22:03] – [3] fredphil91
+++ issue98:c_c [2015/07/07 13:30] (Version actuelle) – [4] auntiee
@@ Ligne 7: / Ligne 7: @@
 Technically, the format for Reveal.JS is purely HTML. However, copying the sections from the demo file, and adjusting it for your needs, is sufficient. If you prefer a GUI way, there is a “visual editor” called Slides. Slides offers 3 tiers of pricing, the first of which is free. Depending on your needs, the free option may be sufficient. In any case, my recommendation is always to learn something the “hard way” (read: the code, or the command-line), and then fall back to helpers, IDEs, or visual editors once you understand how everything works, which is why I’ll focus on the manual method.**
-Au cours du dernier mois, on m'a demandé de créer une présentation sur un projet de conception de sites Web, comprenant divers sites Web et outils externes. J'avais plusieurs options - Google Diapositives, LibreOffice, LaTeX Beamer, ou tout autre logiciel classique de diaporama. Cependant, comme je voulais afficher des vues en direct des sites, j'ai cherché un logiciel moderne qui permettrait cela - et découvert Reveal.JS. C'est un environnementde présentation en Javascript - il est écrit en HTML, et supportte donc les iFrame (et diverses autres options intégrées pour l'affichage de contenu multimédia). Après l'avoir utilisé, et avoir obtenu exactement ce que je voulais comme résultat, j'ai pensé qu'il serait idéal de partager ces connaissances dans l'article de ce mois.
+Au cours du dernier mois, on m'a demandé de créer une présentation sur un projet de conception de sites Web, comprenant divers sites Web et outils externes. J'avais plusieurs options : Google Diapositives, LibreOffice, LaTeX Beamer, ou tout autre logiciel classique de diaporama. Cependant, comme je voulais afficher des vues en direct des sites, j'ai cherché un logiciel moderne qui permettrait cela, et j'ai découvert Reveal.JS. C'est un environnement de présentation en Javascript, il est écrit en HTML, et supporte donc les iFrame (et diverses autres options intégrées pour l'affichage de contenu multimédia). Après l'avoir utilisé et avoir obtenu exactement ce que je voulais comme résultat, j'ai pensé qu'il serait idéal de partager ces connaissances dans l'article de ce mois.
-Puis-je utiliser cela sans connaissances HTML ?
+Puis-je l'utiliser sans connaissances HTML ?
-Techniquement, le format de Reveal.JS est purement HTML. Cependant, cela peut suffire de recopier des sections du fichier de démonstration et de les adapter à vos besoins. Si vous préférez une interface graphique, il y a un « éditeur visuel » appelé Diapositives. Diapositives propose 3 niveaux de prix, dont le premier est gratuit. Selon vos besoins, l'option gratuite peut suffire. En tout cas, ma recommandation est toujours d'apprendre quelque chose « à la dure » (lire : le code, ou la ligne de commande), puis d'utiliser ensuite des utilitaires et autres éditeurs visuels une fois que vous comprenez comment tout fonctionne, c'est pourquoi je vais me concentrer sur la méthode manuelle.
+Techniquement, le format de Reveal.JS est purement HTML. Cependant, vous pouvez trouver suffisant de recopier des sections du fichier de démonstration et de les adapter à vos besoins. Si vous préférez une interface graphique, il y a un « éditeur visuel » appelé Slides [Ndt : diapositives]. Slides propose 3 niveaux de prix, dont le premier est gratuit. Selon vos besoins, l'option gratuite peut suffire. En tout cas, ma recommandation est toujours d'apprendre quelque chose « à la dure » (lire : le code ou la ligne de commande), puis d'utiliser ensuite des utilitaires et autres éditeurs visuels une fois que vous avez compris comment tout fonctionne ; c'est pourquoi je vais me concentrer sur la méthode manuelle.
 ====== 2 ======
@@ Ligne 55: / Ligne 55: @@
 cd reveal.js
-• npm install (installe toutes les dépendances décrites dans le fichier package.json)
+• npm install (installe toutes les dépendances décrites dans le fichier package.json) ;
-• grunt serve (exécute la tâche grunt « serve », qui est le serveur)
+• grunt serve (exécute la tâche grunt « serve », qui est le serveur).
 • Visitez http://localhost:8000 pour voir la présentation.
@@ Ligne 82: / Ligne 82: @@
 Créer votre propre présentation
-Cela peut se faire de deux façons - écrire un fichier index.html à la main en suivant la mise en forme du fichier de démonstration, ou tout simplement prendre le index.html existant (ou une copie de celui-ci), et l'ajuster à vos besoins. Le secret est de vérifier la syntaxe des diapositives que vous souhaitez émuler/régler. Par exemple - pour faire des dispositives verticales, le <section></section> doit être dans un <section></section>.
+Cela peut se faire de deux façons : écrire un fichier index.html à la main en suivant la mise en forme du fichier de démonstration, ou tout simplement prendre le index.html existant (ou une copie de celui-ci), et l'ajuster à vos besoins. Le secret est de vérifier la syntaxe des diapositives que vous souhaitez émuler/régler. Par exemple, pour faire des dispositives verticales, le <section></section> doit être dans un <section></section>.
 Voici une liste rapide des choses à garder à l'esprit :
-• le parent le plus extérieur doit être un <div class=”reveal”></div>
+• le parent le plus extérieur doit être un <div class=”reveal”></div> ;
-• le parent de deuxième niveau doit être <div class=”slides”></div>
+• le parent de deuxième niveau doit être <div class=”slides”></div> ;
-• chaque diapositive est un <section></section> (les diapositives verticales sont imbriquées)
+• chaque diapositive est un <section></section> (les diapositives verticales sont imbriquées) ;
-• placez tous les textes non en-tête et non-listes dans des balises de paragraphe (<p></p>).
+• placez tous les textes non en-tête et non-listes dans des balises de paragraphe (<p></p>) ;
-• les notes (pour la vue du présentateur) doivent être dans un <aside class = "notes"></> dans le <section></section> (diapositive) auquel elles appartiennent.
+• les notes (pour la vue du présentateur) doivent être dans un <aside class = "notes"></aside> dans le <section></section> (diapositive) auquel elles appartiennent.
 ====== 4 ======
@@ Ligne 105: / Ligne 105: @@
 http://slides.com/
 Visual editor**
+Suivant le nombre de fonctionnalités que vous avez intégrées dans votre présentation, vous pouvez ensuite régler le tableau des dépendances dans les balises <script></script>. C'est également là que vous configurez les paramètres. Pour une liste complète des réglages, voir le dépôt github. Rappelez-vous aussi : l'exportation au format PDF est uniquement prise en charge sur Chrome (et, très probablement, Chromium). Si vous ne voulez pas intégrer un lien, ouvrez simplement la page avec l'URL suivante pour charger les feuilles de style d'impression correctes, pour que vous puissiez imprimer la page et l'enregistrer au format PDF : http://localhost:8000/?print-pdf.
+Espérons que cet article sera utile à certains, en particulier ceux qui aiment se servir de nouveaux outils passionnants pour les tâches banales. Si vous avez des questions, des problèmes ou des demandes, faites-les moi connaître, s'il vous plaît, sur lswest34+fcm@gmail.com. Comme toujours, je suis aussi ouvert à des demandes pour de futurs articles.
+Pour aller plus loin
+http://lab.hakim.se/reveal-js/#/
+Page d'accueil Reveal.JS.
+http://slides.com/
+Éditeur visuel.