Créer une présentation et la diffuser dans son site avec… JETPACK

L’extension Jetpack propose des fonctions indispensables (formulaire de contact, statistique, partage, visibilité des widgets…), d’autres moins (mosaïque d’image) et enfin il y a une troisième catégorie : les fonctions « gadget ». « C’est totalement inutile et donc rigoureusement indispensable ! » comme dirait Jérome Bonaldi, donc voyons comment l’utiliser !

Remplacer gratuitement Powerpoint et Slideshare !!!

La première utilité du module « Presentation » est comme son nom l’indique de pouvoir créer des pages qui pourront ainsi être projetées, exactement des diapos PowerPoint ou Keynote. Ces pages seront visible sous forme d’un diaporama interactif intégré dans sa page et pouvant occuper tout l’écran. Voilà un exemple :

[presentation width=500 height=313]
[slide transition= »down » bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/bg-gd6d.jpg »]

Presentations Shortcode Plugin

with JETPACK

[/slide][slide bgcolor=#CEE4EA]
Who doesn’t love awesome presentations?

This presentations plugin provides shortcodes to let you quickly and easily put together amazing presentations!

Supported features include:

  • Choosing slide transitions
  • Rotating and scaling slides for extra awesomeness
  • Setting presentation backgrounds with solid colors or images
  • Setting transition durations and sizes

[/slide]
[slide bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/bg-arrow.jpg »]

Viewing

Presentations can be navigated either using the onscreen arrows, or by using keyboard arrow keys.
Tab or space will also navigate the slideshow forward.Fullscreen mode is toggled using the icon on the lower right.

Hitting ESC on the keyboard will also exit fullscreen.


[/slide]
[slide]
To begin, simply start with the presentation shortcode. Then put all your individual slide content inside slide shortcodes and you are good to go!
[/slide]
[slide transition= »down »]

Down

The default transition!
[/slide]
[slide transition= »right »]

Right

[/slide]
[slide transition= »up »]

Up

[/slide]
[slide transition= »left »]

Left

[/slide]
[slide]

Or none!

Which only really works when fading is enabled.
[/slide]
[slide rotate=45]
Rotation

Slides can be rotated using [ slide rotate= ] where the value is in degrees.
[/slide]
[slide]
Scaling

Emphasize your big ideas or explain the tiny details using [ slide scale= ].
[/slide]
[slide scale=5]
Backgrounds

Solid color backgrounds can be set using slide bgcolor= where the value can be any valid HTML color.

Alternatively slide bgimg= with a valid image url will set it as the background, stretching the image to fill the slide.
[/slide]
[slide fade=off]
Fading

Fading between is enabled by default. It can easily be disabled via slide fade= with a value of “off” or “false”.
[/slide]
[slide]
Enjoy making your own presentations 🙂

[/slide]
[/presentation]

Voir le code


Code utilisé pour la présentation ci-dessus.
Attention, j’ai rajouté un espace autour des crochets !

[ slide transition= »down » bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/bg-gd6d.jpg » ]
<h3>Presentations Shortcode Plugin</h3>
<h4>with JETPACK</h4>
[ /slide ][ slide bgcolor=#CEE4EA ]
Who doesn’t love awesome presentations?

This presentations plugin provides shortcodes to let you quickly and easily put together amazing presentations!

Supported features include:
<ul>
<li>Choosing slide transitions</li>
<li>Rotating and scaling slides for extra awesomeness</li>
<li>Setting presentation backgrounds with solid colors or images</li>
<li>Setting transition durations and sizes</li>
</ul>
[ /slide ]
[ slide bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/bg-arrow.jpg » ]
<h3>Viewing</h3>
[ twocol_one ]Presentations can be navigated either using the onscreen arrows, or by using keyboard arrow keys.
Tab or space will also navigate the slideshow forward.Fullscreen mode is toggled using the icon on the lower right.

Hitting ESC on the keyboard will also exit fullscreen.[ /twocol_one ] [ twocol_one_last ][ /twocol_one_last ]
[ /slide ]
[ slide ]
To begin, simply start with the presentation shortcode. Then put all your individual slide content inside slide shortcodes and you are good to go!
[ /slide ]
[ slide transition= »down » ]
<h2>Down</h2>
The default transition!
[ /slide ]
[ slide transition= »right » ]
<h2>Right</h2>
[ /slide ]
[ slide transition= »up » ]
<h2>Up</h2>
[ /slide ]
[ slide transition= »left » ]
<h2>Left</h2>
[ /slide ]
[ slide ]
<h2>Or none!</h2>
Which only really works when fading is enabled.
[ /slide ]
[ slide rotate=45 ]
Rotation

Slides can be rotated using [ slide rotate= ] where the value is in degrees.
[ /slide ]
[ slide ]
Scaling

Emphasize your big ideas or explain the tiny details using [ slide scale= ].
[ /slide ]
[ slide scale=5 ]
Backgrounds

Solid color backgrounds can be set using slide bgcolor= where the value can be any valid HTML color.

Alternatively slide bgimg= with a valid image url will set it as the background, stretching the image to fill the slide.
[ /slide ]
[ slide fade=off ]
Fading

Fading between is enabled by default. It can easily be disabled via slide fade= with a value of “off” or “false”.
[ /slide ]
[ slide ]
Enjoy making your own presentations 🙂

[ /slide ]
[ /presentation ]


Pour intégrer une présentation

Ce module fonctionne tout naturellement avec des shortcodes et des variables qui permettent d’en ajuster le comportement :

  • Sélectionner différentes transitions
  • Effets de rotation et zoom
  • Image ou couleur de fond
  • Durée de transition

On est donc en présence d’un outil minimaliste, mais complet et qui peut rendre d’autres services, comme nous allons le voir.

Les shortcodes à utiliser

Pour créer une présentation, utilisez simplement :
[ presentation ]

Pour créer une diapo, utilisez :
[ slide ]

Tous les [ slide ] doivent être encadrées par le shortcode [ presentation ], sinon les diapositives ne seront pas affichées.

Les paramètres tels que la hauteur, la largeur et la durée de transition (en seconde) peuvent tous être configurés en utilisant les attributs respectifs dans le shortcode [ presentation ] .

Par exemple:

Pour créer une présentation de dimension 600 × 375 (comme dans l’exemple ci-dessus), utilisez:
[ presentation width=600 height=375 ]

Pour définir une durée de transition pour chaque diapositive égale à 5 secondes, utilisez:
[ presentation duration=5 ]

Les codes de transition et d'habillage en détail

Quelques effets de transition

Voici une liste des effets de transition disponibles (à utiliser avec modération…) :

Pour créer une transition qui se déplace vers le bas (la transition par défaut), utilisez:
[ slide transition="down" ]

Pour créer une transition qui se déplace à droite, utilisez:
[ slide transition="right" ]

Pour créer une transition qui se déplace de bas en haut, utilisez:
[ slide transition="up" ]

Pour créer une transition qui se déplace à gauche, utilisez:
[ slide transition="left" ]

Pour ne pas afficher de transition, utilisez:
[ slide transition="none" ]

L’effet rotation et mise à l’échelle

Vous pouvez faire pivoter et modifier la taille des diapositives pour créer différents effets. Pour faire pivoter une diapositive, utilisez:

[ slide rotate= ]

La valeur est en degrés. Par exemple: [ slide rotate=45 ].

Pour redimensionner une diapositive, utilisez:

[ slide scale= ]

Par exemple: [ slide scale=5 ] ou [ slide scale=1.75 ].

Effet de fondu enchainé

Fondu enchaîné entre les diapositives est activée par défaut. Pour le désactiver, utilisez:

[ slide fade="off" ] ou [ slide fade="false" ]

Pour le réactiver, utilisez:

[ slide fade="on" ] ou [ slide fade="true" ]

Fond de diapo

Vous pouvez habiller un diaporama avec un fond de couleur ou une image personnalisée. Pour définir une couleur unie, utilisez:

[ slide bgcolor= ]

La valeur est une couleur HTML valide. Par exemple: [ slide bgcolor=#d3e7f8 ].

Pour définir une image de fond, utilisez:

[ slide bgimg= ]

La valeur est l’adresse URL de l’image valide. la taille de l’image s’ajustera automatiquement à la diapositive.

Astuce: Toutes ces options peuvent être réglées sur la balise [ presentation ] pour les définir comme paramètres par défaut.


Lecture de la présentation

Vous pouvez visionner une présentation en plein écran en cliquant sur l’icône à quatre flèche en bas à droite du diaporama. La touche ESC du clavier permet alors de quitter le mode plein écran.

Pour naviguer, on peut utiliser les flèches à l’écran ou les touches fléchées du clavier. Vous pouvez également utiliser les touches tabulation ou d’espace pour afficher la diapositive suivante.

Et pour les diaporamas photos, on a le droit ???

C’est une utilisation intéressante de cette fonctionnalité : intégrer un diaporama photo avec fonction zoom plein écran. C’est très simple à mettre en place et en plus on peut rajouter du texte, comme ici :

[presentation width=500 height=313]
[slide bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb12.jpg » transition= »right »]

Formation WordPress

pour l’IIM

[/slide]
[slide transition= »right » bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb19.jpg »]
[/slide]
[slide transition= »right » bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb06.jpg »]
[/slide]
[slide transition= »right » bgimg= »http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb03.jpg »]
[/slide]
[/presentation]

Voir le code


Code utilisé pour le diaporama… pas compliqué, non ?
Attention, j’ai rajouté un espace autour des crochets !

[ presentation width=500 height=313 ]
[ slide bgimg="http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb12.jpg" transition="right" ]
<h2>Formation WordPress</h2>
<h3>pour l'IIM</h3>
[ /slide ]
[ slide transition="right" bgimg="http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb19.jpg" ]
[ /slide]
[ slide transition="right" bgimg="http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb06.jpg" ]
[ /slide]
[ slide transition="right" bgimg="http://www.gd6d.fr/wordpressfr/wp-content/uploads/2013/09/LangageWeb03.jpg" ]
[ /slide ]
[ /presentation ]

Conclusion

Au final, Le shortcode « Presentation » proposé avec JetPack est une fonction intéressante à connaître. Elle peut rendre de nombreux services. Gageons qu’elle sera l’outil indispensable de tout développeur WordPress pour ses propres présentations ! A voir au prochain WordCamp ?

PS : Attention, j’ai été confronté à un petit bug (avec Woothemes ??). Après chaque présentation, la balise < section > se referme et la mise en page explose ! J’ai dû rajouter dans le code html la balise correspondante pour ré-ouvrir la section…

Article source « Shortcode : presentation » sur le support de WordPress.com

Tags:

9 Responses to “Créer une présentation et la diffuser dans son site avec… JETPACK”