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 fufuu . Évalué à 1.
[^] # Re: c'est beau !
Posté par Jean-Philippe (site web personnel) . Évalué à 3.
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 Jonathan Schemoul (site web personnel) . Évalué à 1.
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 Xavier Maillard . Évalué à 3.
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 dawar (site web personnel) . Évalué à 6.
[^] # Re: Libre != gratuit
Posté par Xavier Maillard . Évalué à 0.
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 Jonathan Schemoul (site web personnel) . Évalué à 1.
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 LaFleche (site web personnel) . Évalué à 4.
[^] # Re: konqui
Posté par Jonathan Schemoul (site web personnel) . Évalué à 1.
(Je recherche des gens pouvant m'aider à tester et debuguer smootslideshow sous d'autres navigateurs)
[^] # Re: konqui
Posté par Gaël GUENNEBAUD (site web personnel) . Évalué à 2.
# nickel
Posté par epsout . Évalué à 2.
[^] # Re: nickel
Posté par Jonathan Schemoul (site web personnel) . Évalué à 1.
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 Nicolas Deveaud . Évalué à 5.
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.