Journal Sortie de Smooth Slideshow v1.0: Bibliothèque javascript libre de slideshows (en fondu enchainé)...

Posté par  (site web personnel) .
Étiquettes :
0
23
juil.
2006

J'ai annoncé il y a peu sur mon blog l'arrivée d'une bibliothèque javascript que j'ai réalisé, capable de concurrencer les équivalents en flash... Voici l'extrait de l'annonce:



(vous pouvez aussi voir l'article originel sur mon site:
http://www.jondesign.net/articles/2006/jul/03/smooth-slidesh(...) )



En utilisant moo.fx et prototype.lite.js, ce système javascript de “slideshow” vous permet de placer sur votre site des présentations et autres vitrines simplement et avec des effets graphiques de qualité professionnelle.



Pourquoi choisir ce système plutot qu’une solution en Flash ?




  • Imaginons que vous voulez installer sur la première page de votre site une présentation animée de vos derniers produits, ou même d’un seul produit en montrant plusieurs de ses images sur votre page d’accueil. Restreindriez-vous l’accès à ces fonctions uniquement aux utilisateurs munis du plug-in Flash ?


  • Un autre point important est le fait qu’en utilisant ce script, vous aurez des pages conformes aux standards du W3C, ce qui est important pour l’accessibilité par exemple.



Wow cool ! Mais combien ça coûte ?



Rien du tout, cette bibliothèque est sous licence libre, sous licence GPL pour être précis.



Quels navigateurs sont supportés ?



Étant donné que je me suis basé sur la librairie moo.fx, le script est en quelque sorte indépendant du navigateur.
Je l’ai pleinement testé avec:




  • Firefox

  • Opera

  • Internet Explorer v6



Si vous souhaitez m’informer de la façon dont marche ce script sur les autres navigateur, contactez moi par mail ou par google talk à l’adresse jonathan.schemoul@gmail.com.



Où le trouver, comment l’installer et à quoi ca ressemble ?
Rendez-vous directement sur le site de la bibliothèque (en Anglais): http://smoothslideshow.jondesign.net/ !

  • # c'est beau !

    Posté par  . Évalué à 1.

    Beau travail ! Le résultat est simplement superbe ! Je ne peux pas juger le code ne codant pas en js mais franchement chapeau :)
    • [^] # Re: c'est beau !

      Posté par  (site web personnel) . Évalué à 3.

      Je suis pas super calé en Javascript mais de ce que j'en ai fait ca m'a l'air propre et organisé deja.

      Sinon je n'avais jamais utilisé moo.fx, mais ca m'a l'air pas mal du tout pour eviter de sortir prototype complet avec script.aculo.us

      Bravo donc :)
      • [^] # Re: c'est beau !

        Posté par  (site web personnel) . Évalué à 1.

        Merci à tous les deux (fufuu et Jean-Philippe), ça c'est du feedback que j'aime ;-) !

        De plus, moo.fx, n'est pas que plus léger, il est aussi plus rapide sur la transparence et les effets de menus par exemple... (moins de checks, etc...), et permet plus de contrôle sur ces effets...
  • # Libre != gratuit

    Posté par  . Évalué à 3.

    Wow cool ! Mais combien ça coûte ?
    Rien du tout, cette bibliothèque est sous licence libre, sous licence GPL pour être précis.


    Rapport entre libre et gratuit s'il vous plait ?? => aucun. Merci de ne pas alimenter la confusion déjà bien répandue sur le sujet.

    Ton soft est Libre et pour l'occasion il est aussi gratuit.

    Sinon, beau boulot.
    • [^] # Re: Libre != gratuit

      Posté par  (site web personnel) . Évalué à 6.

      Heuu difficile de faire du javascript libre sans qu'il soit gratuit, non ? Etant interprété par le navigateur, on à forcément les sources si l'on visite un site qui utilise ce script, et la GPL me permet de les utiliser si je respecte la licence...
      • [^] # Re: Libre != gratuit

        Posté par  . Évalué à 0.

        Là n'est pas la question. J'insiste juste sur le fait que Libre ne signifie pas gratuit. Il ne faut aller chercher plus loin des explications fumeuses.

        Je me bats assez comme ça avec les gens qui n'y connaissent rien. Donc si les personnes qui sont censées connaître cette subtilité se mettent elles-aussi à colporter cette idée, comment va-t-on s'en sortir :)
    • [^] # Re: Libre != gratuit

      Posté par  (site web personnel) . Évalué à 1.

      Tu as entièrement raison...

      J'avai écrit tout d'abord cette nouvelle en Anglais (pour le site de la lib.).
      La confusion entre libre et gratuit (même mot) étant encore plus grande en Anglais, je n'ais pas fait assez attention lors de ma traduction.

      En revanche, 95% des soft libres sont gratuits... Pas tous certes, mais beaucoup.
  • # konqui

    Posté par  (site web personnel) . Évalué à 4.

    Dommange que ça passe très mal avec konqueror.
  • # nickel

    Posté par  . Évalué à 2.

    Très joli, je venais juste d'intégrer le slideshow de dojo (une autre librairie js) à mon gestionnaire de photos mais je crois que je vais switcher. Pouvoir ajouter des informations est particulièrement sympathique.
    • [^] # Re: nickel

      Posté par  (site web personnel) . Évalué à 1.

      Heureux de l'apprendre !
      Si tu peux m'envoyer une adresse où voir le résultat une fois cette conversion finie, j'en serais ravi ;)
  • # Très sympa, petites suggestions

    Posté par  . Évalué à 5.

    Salut, et felicitation ! C'est vraiment sympa cette appli.

    Maintenant, étant moi même dans mes heure perdu un amateur de codage en JS, doublé d'un coté pointilleux sur le respect des standards W3C et de l'accessibilité, j'ai quelques suggestions à te soumettre.

    Une des principales critiques que l'on entend à propos du JS, c'est que ça pose des problèmes d'accessibilité.
    Ta librairies pourrait à ce niveau être un peu améliorée il me semble.

    Un point sur l'accessibilité

    Pour l'ajout d'images à un slideshow, tu demande de remplir un tableau JS. Ne serait-il pas préférable de charger des données tirées du fichier HTML ?
    Ainsi, si les images sont intégrées au document HTML, même si le JS est désactivé, les images peuvent être vue. Et les données se rapportant aux images également (titre, description, etc...). Ensuite, ta librairie JS peut récolter les informations, masquer les images d'origine et proposer une interface interactive comme tu l'a si bien fait.

    Au lieu de mettre dans la page HTML une balise vide <div id="mySlideshow"></div>, on pourrais très bien imaginer que la liste des images à afficher soient placées dans cette balise DIV.

    Pour la cohérence sémentique, je pense que ces images pourraient être placées dans une liste.

    Et pour éviter que les images soient chargées si le navigateur du visiteur utilise du JS (ce qui peut ralentir le chargement, surtout s'il y a beaucoup d'images, et il me semble que ton script gère le chargement des images non ?) tu peux placer le tout dans une balise <noscript>, ce qui fait que le tout sera ignoré en cas d'activation du Javascript chez le client (à verifier ce point tout de même). Par contre les client sans Javascript pourront voir le contenu et en profiter.

    exemple :

    <div id="mySlideshow">
      <noscript>
        <ul>
          <li>
            <a href="URL_de_destination.html" title="Titre de l'image">
              <img src="Fichier imge.jpg" alt="description de l'image" />
            </a>
          </li>

          etc....

        </ul>
      </noscript>
    </div>

    (le titre pourrait être placé dans la balise IMG ou A, peu importe. On pourrait également ajouter des attributs rel aux balises A ou IMG, pour associer d'autres informations complementaires)

    Il suffit ensuite de faire une simple fonction JS d'initialisation analysant le contenu de la balise #mySlideshow et en tirant les informations avec quelques outils DOM. (Tout cela se déroulant donc avant l'appel de la fonction initSlideShow(), ou étant intégré à cette fonction).




    Autre suggestion...

    Un point sur la simplicité d'utilisation

    La gestion de l'évenement 'onload' de la page pourrait il me semble être intégré à tes scripts. Ainsi, avec ma remarque précédente en plus, la seule ligne de code que l'on aurait à ajouter au document (en plus des lignes de chargements des fichiers JS) HTML pourrait être du genre :

    preLoadSlideShow('IdDeLaBaliseDivDuSlideShow');

    Cette ligne pourrait même être intégré direct au fichier JS, et si l'utilisateur veut la modifier il peux éditer le fichier JS. Ainsi on à une bonne séparation du HTML et du JS.
    Dans la fonction préload, tu te chargerais de lancer l'écoute de l'évenement onload, et d'enregistrer l'ID de la balise contenant les données du slideShow, pour analyse une fois la page HTML chargée.


    Et enfin, dernière choses ...

    Un point sur la manière de coder

    Tu devrais essayer de rendre ton code plus OO. On vois déjà que le principe est là, mais tout est séparé dans des fonctions multiples...
    Ca demanderais probablement pas grand chose pour obtenir la même chose, mais en OO.

    Tu devrais IMHO former une classe dans laquelle tout serait bien à sa place.
    Un avantage direct pour toi, c'est que t'aura plus X variables globales de déclarées (une s'eule suffit), et donc t'aura plus à te torturer l'esprit pour trouver des nom de variable sans redondance (et ça évite les noms très long, et les conflits de variables avec d'autres scripts.
    Et puis tu pourra tiré profit du coté OO du JS, qui est intéressant IMHO.

    Par contre, niveau performences, je n'ai aucune idée de l'impact que ça peu avoir. Quelqu'un saurait dire ??


    Si tu te demande ce que j'entend par plus OO, tu peux voir un exemple dans la lib Prototype que tu utilise. C'est en lisant cette lib que j'ai découvert le fonctionnement des objets JS, et ça à changé ma manière de faire du JS.




    Voila, c'était mes trois copek de contribution cognitive.

    En espèrant que ça pourra t'aider et t'inspirer pour la suite :)


    Et si t'as besoin d'coups d'main, de conseil, ou autre (je prétend pas être très doué, ou meileur que toi, mais une ame exterieur peut parfois aider :p), hésite pas à m'contacter, j'aime vraiment beaucoup l'concept et j'trouverais bien une tite poigné d'minutes pour répondre :)



    ++

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.