Diaporama genre Powerpoint sur SPIP

Ce diaporama est tout simplement la retranscription en mode SPIP du système S5 d’Eric Meyer, grand gourou des standards du web, dont vous pouvez voir la demo directement.

Il a déjà fait l’objet d’une contrib que je n’ai pas essayé [1]. Mais je vous propose quand même ce squelette que j’utilise dans le cadre professionnel. J’ai modifié quelque peu les fichiers du système S5 : les feuilles de style bien sûr pour les adapter et le javascript (slide.js [2]) qui gère l’interaction avec l’utilisateur.

Ce squelette fonctionne pour une rubrique et toutes ses rubriques descendantes mais on peut l’adapter à d’autres usages : mot clés, etc.

Comment je m’en sers ?

J’ai un premier Powerpoint qui contient les liens vers chaque formation. Cela me permet d’avoir toute une arborescence de formations en un clic de souris et sans changer d’interface graphique.

-  les liens externes sont ouverts dans une autre fenêtre [3];
-  l’icône de la rubrique/formation est reprise dans toutes les pages;
-  un sommaire listant d’abord les sous formations ensuite les pages est géré automatiquement;
-  dans le pied de page il y a un chemin qui permet de remonter dans les powerpoints parents; c’est très pratique.
-  les articles peuvent avoir le même titre, cependant, il n’apparaitra qu’une seule fois dans le sommaire;

Dans la doc d’Eric Meyer, vous verrez qu’il y a tout un tas d’options que l’on peut activer en positionnant des divs.

Testé sur ces navigateurs

-  Firefox
-  Opera [4]
-  Internet explorer 6

Installation

Il faut installer le répertoire ui à la racine de votre site et placer le squelette rubrique-90.html dans votre répertoire des squelettes en prenant soin de le renommer en rubrique-[Votre numéro de rubrique].html.

Pour adapter la feuille de style, il faut modifier le fichier pretty.css et aucun autre.

Si vous utilisez cette contrib çà serait sympa de me prévenir.

Footnotes

[1De toutes façons je ne savais pas qu’elle existait

[2Ligne 401 : var vScale = 26 pour pouvoir afficher un peu plus de lignes

[3Utile pour ne pas perdre le support de formation mais aussi parce que çà bugue sur Firefox.

[4Il faut appuyer sur F11 car Opera gère cela en natif.

updated on 9 February 2010

Discussion

4 discussions

  • Tim Balcon

    Bonjour,

    J’ai mis en place le plugin S5 sur l’Intranet de mon lycée et cela fonctionne très bien.
    Je n’ai pas encore personnalisé les styles, mais ça n’est pas ça qui va être compliqué.

    Ca correspond à une fonctionnalité que je cherchais depuis plusieurs mois.

    Merci pour les infos, ça m’a bien aidé.

    Reply to this message

  • 1

    Bonjour,
    une petite question :
    est il possible de créer plusieur rubrique, par ex.

    rubrique-150.html
    rubrique-160.html

    chacune de ces rubriques auront plusieurs diaporamas

    Par avance Merci

    • balluche

      Oui, bien sûr. Cà fonctionne comme çà par défaut. Les rubriques deviennent des liens vers des documents au format diaporama. Tout ce qui se trouve sous une rubrique a le format Diaporama.

    Reply to this message

  • qliqiqim

    eu je croi ke vou vou aite tronper.
    powepion c un logitiel de poster en 3D!!!

    mci ^^

    Reply to this message

  • 1
    Patrick Dupouy

    Bonjour,

    J’ai utilisé votre plugin en local, puis en distant, suivant vos indications, mais il ne me propose que les icônes des powerpoints joints aux articles, qui ne s’ouvrent qu’en téléchargement.

    J’imaginais qu’ils s’ouvriraient dans la page de la rubrique et que l’on pourrait faire défiler les vignettes à l’aide des flèches en bas à droite.

    Pouvez vous être plus explicite dans vos recommandations?

    S’agit il des powerpoints de microsoft office (pps, ppt)?

    Merci pour toute réponse.

    • Le but de S5 n’est pas de présenter des Powerpoint mais de permettre d’afficher le contenu d’une page web “à la manière de”.

      Il faut donc saisir le contenu dans l’article et pas placer un Powerpoint en pièce jointe.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom