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.

Notes

[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.

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é.

    Répondre à ce 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.

    Répondre à ce message

  • qliqiqim

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

    mci ^^

    Répondre à ce 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.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 9 février 2010