Outils pour utilisateurs

Outils du site


issue98:c_c

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
issue98:c_c [2015/07/06 15:08] andre_domenechissue98:c_c [2015/07/07 13:30] (Version actuelle) – [4] auntiee
Ligne 9: Ligne 9:
 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. 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é Slides ([Ndt : diapositives]). Slides propose trois3 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 fonctionnec'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 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 ====== ====== 2 ======
Ligne 89: Ligne 89:
 • 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 ====== ====== 4 ======
Ligne 108: Ligne 108:
 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. 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 utiliser 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.+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.
  
  
issue98/c_c.1436188127.txt.gz · Dernière modification : 2015/07/06 15:08 de andre_domenech