K3 Blogue 2.0 | Marketing Internet, E-Commerce, E-Communauté, Web 2.0

5 trucs pour optimiser la visibilité de son site Web et générer des opportunités d’affaires (leads)

Ce schéma présente 5 trucs pour optimiser son site Web.

1. Pensez ” Search engine optimization ” combiné avec du SMO “Social media optimization”
2. Créer un blogue pour mettre en valeur des produits et services de votre entreprise.
3. Multipliez les liens vers votre site en participant et commentant dans la blogosphère. (Voir : Linkbaiting)
4. Convertissez vos visiteurs en leads (opportunités) avec des leads generation landings pages.
5. Mesurer et optimisez avec des services Web de statistiques (Google Analytics) et de visualisation (Crazyegg).

Voir le billet original avec beaucoup plus d’information et de contenu :

5 astuces pour transformer son site Web en machine de guerre

Simple, clair, efficace !

K3Média de retour de PHP Québec 2008

Trois membres de l’équipe de développement de K3Média représentaient l’entreprise à la dernière conférence PHP Québec ayant eue lieu à Montréal. Jérôme Bascoul, Mathieu Ducharme et moi-même. Ce fut une belle réussite, l’événement faisant salle comble pour la première fois, ce qui démontre encore une fois l’implantation croissante de PHP dans la province.

Dans ce billet, je livrerai une petite synthèse de ma visite au Sofitel. Évidemment, sachez qu’il y a une énorme quantité d’information à notre disposition dans ce type d’événement. Chaque personne vient donc y chercher ce qui lui semble pertinent. En ce qui me concerne, je voulais rencontrer les vrais "pros". Ceux qui travaillent chez MySQL, qui ont les deux mains dans le noyau de PHP, qui produisent les innovations techniques nous permettant de demeurer créatifs et de livrer des applications de qualités. À ce chapitre, je n’ai pas été déçu.

Voici donc, chronologiquement, les détails :

JOUR 1 :

Performance-minded MySQL for PHP Developpers
Jay Pipes

Si la modélisation de base de données vous intéresse, sautez sur le dvd de cette conférence aussitôt qu’il sera disponible. Ou encore, cliquez ici pour en avoir un résumé de l’auteur. Jay Pipes travaille chez MySQL et il ne se contente pas de livrer les astuces éculées sur la bête. Il connaît visiblement le fonctionnement des différents engins (MyIsam, InnoDB…) et décrit en détail le fonctionnement interne d’une requête dans chaque cas. En plus de citer de multiples cas d’optimisation concrets de requêtes SQL ou de structure de données. Par exemple, les avantages à utiliser de multiples engins selon les tables et leur contenu, le partitionnement de données, la détection d’index inutiles, etc… Très intéressant et très pertinent.

Databases and SQL (un)patterns
Lukas Smith

Cela doit être difficile de voir la majorité de ses points se faire couvrir dans la présentation précédente. M. Smith s’est rapidement rendu compte que sa conférence était redondante avec la première et que plusieurs personnes assistaient aux deux, donc il a légèrement modifié sa présentation pour ajouter des éléments comparatifs entre MSQL, PostgreSQL et Oracle. Bien qu’intéressante, cette présentation n’avait pas la même profondeur que la première.

Rich desktop Applications
Raphaël Rougeron

Je ne savais que penser en lisant le résumé de ce séminaire car il semblait concerner des technologies propriétaires, mais il m’a grandement surpris. En fait, il s’agissait plutôt d’un comparatif entre Adobe Air et XulRunner. Clairement, le formateur penchait pour ce dernier, mais a joué le jeu de la description des deux, exemples à l’appui.

Bien que friand des solutions ouvertes, je dois avouer qu’Adobe air, était assez convaincant. Quelqu’un qui a des connaissances en HTML, Javascript, CSS, Actionscript peut recycler un projet, lui ajouter 2 lignes de codes et en faire une application desktop… impressionnant. L’intégration des différents outils d’Adobe n’est rien pour nuire.

XulRunner m’a semblé essouflé par rapport à la solution d’Adobe. Une syntaxe beaucoup plus aride (trop) pour le résultat escompté, lente à l’exécution, une pénétration du runtime très faible, bref alors qu’Adobe nous offre une solution clé en main, nous avons de l’autre côté une solution qui nous procurera de multiples migraines.

Maintenant XulRunner possède de belle qualités. En plus d’être une technologie ouverte, il y est plus simple de créer des composantes réutilisables (XBL) et de mieux moduler notre application. De plus, avec l’arrivée prochaine de Firefox 3.0, le runtime XulRunner sera inclu avec le fureteur. Ainsi, le tiers des internautes l’auront sur leur station et pourraient potentiellement installer des applications l’utilisant. Le rendu du Javascript sera aussi grandement accéléré donc le problème de vitesse devrait se résorber. Il y a donc un avenir pour cette technologie, qui sert déjà de base aux extensions de Firefox de toute manière.

Je crois que M. Rougeron frappe dans le mille en nous conseillant d’ailleurs de débuter par le développement d’une simple extension Firefox avant d’y aller avec la totale application si l’on veut suivre la voie Xul.

Une partie de cette conférence était consacré aux API REST et RESTFull. Très intéressant.

PECL : The PHP Language Workbench
Sebastian Bergmann

Quelquefois, un séminaire nous parle d’un truc et bien que nous savons que nous ne nous en servirons pas, cela nous fait aboutir sur d’autres choses. C’est un peu ce qui c’est passé avec celui-ci.

De toutes les extensions PECL que nous avons vues, je retiens parse_tree qui permet d’aller chercher toutes les informations possibles et inimaginables en format XML sur unr page PHP. Seulement, sans l’intervention d’un fichier XSLT, ces informations sont inutilisables pour un être humain normalement constitué!

Je trouvais l’idée d’aller chercher les informations sur les pages PHP géniale, mais l’utilisation de parse_tree me semble trop complexe pour le gain d’optimisation que nous pourrions en tirer. J’ai donc trouvé une extension PEAR PHP_CodeSniffer qui me permettra d’aller chercher les optimisations possibles aux pages PHP sur nos serveurs. Belle trouvaille.

Breaking the rules
Morgan Tocker

Je suis toujours impatient d’assister à un séminaire de quelqu’un de chez MySQL. Mais, je dois avouer que j’ai été déçu par celui-ci. Je m’attendais à des notions avançées de dénormalisations par un spécialiste, mais il ne s’agissait que de trucs génériques sur comment épargner son serveur mySQL. En résumé, la plupart des astuces pointaient vers un motto : “Enlever des trucs de votre MySQL, il roulera plus vite.” Ne pas utiliser de constraints, de checks, de foreign keys, épargne bien sûr du travail côté base de donnée, mais il en donnera davantage côté PHP… S’agit-il d’un gain réel tant au développement qu’à l’utilisation? Il n’avait aucun chiffre, benchmark test à l’appui. Bref, je ne suis pas convaincu.

JOUR 2

API Design in PHP
David Sklar

Passionnant, cette conférence. Le développement d’API fait appel à de nouvelles problématiques et cet architecte logiciel de chez Ning nous a livré de judicieuses astuces sur la maintenance de leur propre API.

Alors que dans le commun des développement, il est plus simple d’effacer que d’ajouter, la réalité s’inverse dans le développement d’API. Impossible de supprimmer une méthode sans subir des plaintes des usagers qui l’utilisent toujours. Si vous voulez déprécier un truc, vous le laisser actif combien de temps? Cela peut rapidement devenir un casse-tête.

La mentalité de Ning est de prévilégier l’expérience client au-dessus même du développement. Donc, si une façon de faire peut rendre un client plus heureux, malgré une perte d’optimisation, ce choix sera fait. L’idée est que l’usager ne devrait jamais être frustré par l’utilisation de l’API. Je crois qu’il s’agit d’une bonne ligne de conduite puisqu’un API pourrait être ultra-fonctionnel, mais très difficile à utiliser pour l’usager. Son succès en serait donc affecté davantage qu’avec un léger compromis sur les performances.

Aussi, les méthodes aux longues listes de paramètres sont proscrites car cela perd en clarté et en facilité de maintenance. L’utilisation d’un array est recommandée.

De plus, il est recommandé de débuter les noms de méthodes, de propriétés et de namespaces avec un préfixe identifiant clairement l’API (XN est celui de Ning). Ceci fait en sorte que les gens instinctivement n’altéreront pas ces items.

Comme Ning est un API RESTFull, il leur est facile d’inclure le numéro de la version de l’API demandée dans l’URL et de conserver plusieurs branches de l’API. Ainsi, les usagers utilisant des méthodes dépréciées pourront continuer d’utiliser la version voulue sans qu’elle ne soit "traînée" dans les branches futures.

Comme par exemple :

XN/ATOM/1.0/CONTENT…

Aussi, encore plus qu’ailleurs, l’importance est à la documentation détaillée de l’application. PHPDocumentor est une solution largement utilisée. Les tests unitaires sont aussi primordiaux dans ce type d’entreprise. Ning est récemment passé de Simpletest à PHPUnit pour les capacité accrues de ce dernier. Le fait de pouvoir automatiser des séquences de tests et de déclencher une notification à la moindre défaillance permet de déceler plus facilement une coquille qui s’est glissée dans quelque chose qui fonctionnait très bien autrefois, précisément le genre de bogue qui frustre les usagers d’un API. PHPUnit s’est d’ailleurs avéré être un outil fort prisé par plusieurs conférenciers.

Graph-Oriented Programming with PHP
Sebastian Bergmann

Ce séminaire présentait le "workflow engine" d’eZ Systems. Il s’agissait d’une présentation très "high level" et théorique sur le projet de thèse de doctorat de M. Bergmann. Je dois avouer que j’aimes voir des cas concrets et du code me démontrant les bénéfices d’une innovation. Je suis resté sur ma faim.

Pour en savoir davantage.

PHP and memcached – Giving your database server a break
Marc Wandschneider

La mise en cache… Le genre de truc que l’on connait tous sans jamais être parfaitement à l’aise avec tous les dillemmes que cela soulève. Cette formation réponds à plusieurs interrogations concernant une des façon les plus populaires d’accélérer l’accès à vos données, memcached.

À la base étonnemment simple, son concept est de réduire les allers-retours au disque dur, le maillon faible de la chaîne en terme de rapidité pour la lecture d’informations provenant de votre base de donnée. Memcached va utiliser votre mémoire vive qui est immensément plus rapide. Il s’agit tout simplement d’un gigantesque array contenant les informations que vous y déposez. Lors d’une requête, memcached va d’abord vérifier si votre valeur est dans l’array, sinon exécute la requête à la base. Tout simple.

Toutefois, memcached est bourré de trous. Par exemple, comme il ne s’agit que d’un giga-array, zéro sécurité. Aucune authentification possible. Ou si vous voulez barrer une entrée temporairement le temps qu’une transaction se termine, impossible de le faire via ce système. Faites très attention à ce que vous mettez dans votre cache.

L’autre faille est que pour être rapide, memcached doit être installé localement, grugeant des ressources précieuses de votre serveur. Bien sûr, il est paramétrable. Mais, pour être pleinement efficace, plusieurs serveurs doivent être greffé à votre memcached. Facebook a agi de la sorte. Ils ont des dizaines de serveurs dédiés à un memcached. Malheureusement, tous n’ont pas les moyens de Facebook.

Malgré tout, pour stocker de petites données bien choisies ne nécessitant pas de sécurité, memcached peut s’avérer un bon choix. À cela j’ajouterais toutefois le MySQL Query Cache. De cette manière, si jamais la donnée n’est pas trouvée dans l’array de memcached, un second niveau de caching se trouverait plus loin lors de la requête si cette entrée n’a pas subi de modification depuis.

Help! I found a bug in my code!
Derick Rethans

Toujours en version beta, xdebug est une extension PEAR permettant au développeur d’aller quérir davantage d’informations sur une erreur survenue en cours d’exécution ou encore d’optimiser son code.

Vous pouvez personaliser les indications d’erreurs fatales vous parvenant en paramétrant xdebug. Je vous invite à aller chercher le PDF de la conférence pour visualiser les différentes possibilités. Notez bien que le message d’erreur n’est pas nécessairement celui que vous auriez normalement, mais bien celui issu du compilateur PHP, souvent plus complet aux yeux du développeur.

Aussi, parmi les choses intéressantes, avec xdebug, vous serez en mesure d’identifier des écarts de temps, par exemple, combien de temps une fonction PHP a mis de temps à s’exécuter. Vous serez aussi en mesure de retracer les pointes de l’usage de la mémoire.

Comme je suis un visuel de nature, j’ai vraiment adoré l’idée d’activer le "profiling" et d’utiliser KCacheGrind pour visualiser les goulots d’étranglement de la page en un clin d’oeil. Idéal lorsqu’une page semble ramer sans raison.

Who am I? - The age of digital identity
Rob Richards

Ce spécialiste de la sécurité informatique, maniaque du respect de la vie privée sur le web a livré une conférence très intéressante sur OpenId versus les Information Cards (openinfocards pas celles de Microsoft!), Bien que l’on sentait son penchant pour l’une des deux solutions, il a livré une bonne description et une bonne analyse des deux plateforme. Je dois avouer que je ne connaissais aucune de ces technologies avant ce séminaire et j’en ai appris énormément. Bien qu’instructif, il reste encore beaucoup de travail pour que ce genre de techno devienne un standard sur le web. Premièrement, l’accessibilité de la chose. Ce n’est pas demain la veille que la personne plus ou moins “computer literate” va utiliser les information cards. Même le formateur s’y est repris à 5 fois pour que cela finisse par fonctionner! Bref, cela demeure pour l’instant une techno de “geeks”.

Côté sécurité aussi cela pose de nombreuse questions. OpenID est à mes yeux un danger public. Il faut vous procurer un ID auprès d’un fournisseur et vous authentifier chez lui à chacune de vos authentification, transaction sur le web… Je ne tiens pas à ce que Verisign ou quiconque possède de telles informations sur moi. Cela serait cent fois pires qu’un espiogiciels planté sur ma station. Et même si je fais confiance à Verisign, à qui sera-t-elle vendue dans le futur? Où irons mes infos? Un non-sens en terme de sécurité. OpenId a fait exactement ce contre quoi elle lutte. Bref, ils se sont plantés.

Concernant les information cards, cette techno a du potentiel si l’on peut traîner ses cartes avec soi, ce qui n’est pas encore le cas. Cela revient donc à dire que cette techno s’adresse pour le moment à ceux qui sauront héberger leurs identités chez eux afin d’en profiter partout. Un truc de “geeks” vous dis-je! Fort prometteur toutefois. Je retournerai voir où ils en sont l’an prochain.

Montreal Adobe User Group

Écouter des films en .iso

Encore une entrée "technique" dans mon blog, je sais. Je jure que ma vie est plus intéressante que ça

Par exemple, j’aime bien écouter des films. Souvent je vais les
écouter sur mon ordinateur, puisque ma télévision y est branchée.
Parfois, un film se présente sous forme d’image VCD (.iso, .img ou
équivalent) ou DVD, et c’est assez compliqué de se rendre au contenu.
En fait, c’était compliqué. Hmmm plutôt, ça n’a jamais été compliqué
mais je n’en savais rien

Écouter des films en .iso, solution #1
Graver le VCD ou DVD sur média (je conseille k3b)
Attendre
Lire le CD/DVD

Solution #2, cool mais pas vraiment amélioré
"Monter" l’image sur le disque

Lire le contenu du mount point /mnt/image

Solution #3, que j’ai découvert hier

Cool!

Sauvegarde du mot de passe pour accesD

Il y a quelques jours, mes collègues et moi discutions du service
"Acces D" de Desjardins. Nous sommes tous d’accord qu’il s’agit d’un
service dont on ne pourrait plus se passer. J’ai beaucoup de difficulté
à m’imaginer me rendre en personne à une caisse (ou même à un guichet)
pour payer des factures…

Un petit truc qui nous irritait tous est que le mot de passe n’est pas
sauvegardé dans Firefox. Je comprends les raisons de sécurité derrière
ce choix mais sincérement, si quelqu’un se rend jusque sur mon PC, ce
n’est probablement pas le dernier de mes soucis…

La raison pour laquelle Firefox ne garde pas en mémoire le mot de
passe, même si on a configuré le logiciel pour retenir tous les mots de
passe possible, est que le site d’acces D utilise une propriété
(non-conforme, propriétaire à Firefox/Netscape) autocomplete="off" qui permet au site de choisir à la place de l’utilisateur s’il veut oui ou non utiliser le feature d’auto complétion des mots de passe pour un champs donné.

Je vois donc dans cette discussion un problème technique à résoudre et en 5-10 minutes, grâce à GreaseMonkey j’ai un petit script d’une ligne (ok… 3) qui permet de sauvegarder ce mot de passe.
Voici le code.

Pour le faire fonctionner, vous devez télécharger le plugin GreaseMonkey pour Firefox.
Ce plugin permet, comme vous pouvez le voir dans le code précédent, de
rouler des scripts arbitraires sur des sites web en particulier. Le
site http://userscripts.org contient une foule de script assez cool pour plusieurs sites populaire (et moins populaire)

Ensuite, simplement ouvrir ce fichier "AccesD password autocomplete"
et l’installer grâce à l’interface de GraseMonkey. Voilà, le mot de
passe sera maintenant sauvegardé (si vous avez activé l’option des mots
de passe dans Firefox)

AJAX, Prototype et Esperluettes

Petite astuce javascript jour

Il est très facile de créer des requêtes AJAX avec la librairie Prototype.

Toutefois, ceci ne fonctionnera pas si une des variables (dans ce cas: x, y ou z) contient le symbole esperluette (ampersand, &). Si on veut envoyer du code HTML, il y a de fortes chances que ce symbole se retrouve dans notre requête.

(Disons qu’on veut poster le contenu de l’éditeur HTML FCKEditor par une requête AJAX avec Prototype…)

La solution est toute simple, grâce au hash de prototype.

Ainsi, grâce a la méthode toQueryString() de l’objet H (que l’on crée
simplement avec la fonction "$H"), on s’assure que notre POST sera
construit correctement.

Comment ajouter à votre agrégateur RSS un flux en provenance de YouTube

Je me suis levé en ce beau dimanche matin ensoleillé avec une idée en tête. Celle d’ajouter à mon agrégateur RSS les flux provenant des usagers de YouTube dont je regarde fréquemment les vidéos, question de savoir rapidement lorsqu’ils en ajoutent un nouveau. Je me rend donc sur YouTube mais malheur! L’icône ne figure nul part et il n’y a aucune mention RSS sur le site… Me disant qu’il n’y a pas plus Web 2.0 que Youtube, il doit bien y avoir un &%*$ de moyen… Je continue mon investigation dans la section "Help" en y entrant "rss" comme terme de recherche: "Your search - rss - did not match any answers in our Help Center." C’est finalement sur Google que j’ai trouvé la solution que voici.

Obtenir un flux RSS à partir:

• D’un tag
  Par exemple, si vous désirez obtenir le flux RSS pour le tag k3media vous devez utiliser la formule suivante: feed://www.youtube.com/rss/tag/k3media.rss

• D’un usager
  Vous devez utiliser la formule suivante feed://www.youtube.com/rss/user/[insert username here]/videos.rss
  Par exemple, si vous désirez créer un flux RSS pour l’usager K3MediaInc vous devrez entrer feed://www.youtube.com/rss/user/K3MediaInc/videos.rss

Vous pouvez aussi obtenir des flux RSS par catégorie, vidéos les plus regardés, les plus populaires, etc. sur cette page trop bien cachée!

Test de Kubuntu Feisty Fawn (7.04) Herd 1 avec VMWare Player

La première version pré-alpha de Kubuntu 7.04 (Feisty Fawn) a été annoncée aujourd’hui. Il faut être assez téméraire pour rouler une version qui en est encore à 4-5 mois de sa sortie prévue, mais je voulais absolument voir les nouveautés auxquelles nous pourrons nous attendre. Mais plutôt que de mettre en péril mon poste de travail et mes données, j’ai opté pour la solution "virtualisation".

Voici donc un micro-tutoriel pour installer Kubuntu Feisty Fawn Herd 1 dans un environnement virtual VMware. Les instructions sont pour (K)Ubuntu mais il serait assez facile de les adapter à n’importe quel environnement qui peut rouler VMWare Player (donc même Windows!).

Première étape: Création d’une image virtuelle.

Il y a quelques temps déjà, VMWare a annoncé une version gratuite de son logiciel VMWare Player. Ce logiciel permet de faire rouler des images de système d’exploitation mais ne permet malheureusement pas la création de ces images (d’où le nom Player…) Heureusement, par contre, qu’un petit logiciel libre permet de créer facilment ces images: QEMU. (Pour plus de robustesse, il faudra les produits commerciaux de VMWare…)

Installer QEMU dans Kubuntu est comme d’habitude très simple. Soit de rechercher ce programme dans le gestionnaire d’installation ou de taper la commande

On doit s’assurer d’installer une version égale ou supérieure à 0.8 pour pouvoir créer des images compatibles vmplayer. C’est le prgramme qemu-img qui fera le travail pour nous donc voici un exemple de commande pour créer une partition de 5 giga-octets:

Deuxième étape: Installation de Kubuntu dans l’image virtuelle.

Il faudra tout d’abord télécharger l’ISO. Voici la page officielle: http://cdimage.ubuntu.com/kubuntu/releases/feisty/.

Ensuite il faudra créer l’instruction pour charger cet iso dans l’image virtuelle. Éditer le fichier kubuntu.vmx:

Troisième étape: Installation de VMware Player.

Évidemment, il faudra également installer le logiciel qui nous permet
de faire fonctionner cette image. Dans le gestionnaire d’installation,
il faut rechercher vmware-player ou simplement taper:

Quatrième étape: Faire rouler Kubuntu Feisty Fawn Herd 1 (7.04)

Ne reste plus qu’à exécuter vmware player et d’ouvrir le fichier .vmx
créé plus haut. C’est à ce moment qu’on peut se rendre compte que
c’était une bonne idée d’utiliser une machine virtuelle puisque apt-get est brisé, ainsi que dbus

Les Microsummaries - Nouveauté Firefox 2.0

Je ne crois pas avoir besoin d’annoncer que la version 2.0 du navigateur web Firefox est sortie depuis 2 jours. Bien qu’il s’agisse principalement d’une version de "maintenance", quelques nouveaux features ont vu le jour.

Parmi ceux-ci; les microsummaries. Ces derniers sont de simple petit micro-résumés de la page web, qui se mettent à jour régulièrement. Mot-clé: micro. En fait, ils devraient être assez court pour entrer dans l’espace réservé aux bookmarks (signets ou favoris).

Je ne suis pas encore 100% vendu au concept, mais je peux facilement
voir quelques utilisations assez cool. L’exemple souvent cité est sur
un site d’enchère, pouvoir facilement voir le prix actuel de l’item
directement dans les bookmarks.

Puisque chaque nouvelle petite technologie vaut la peine d’être apprise et comprise, voici un petit tutoriel pour intégrer un microsummary
sur un site web. Je vais utiliser ce blog à titre d’exemple. Je vais
ajouter le dernier billet du blog dans le résumé. Vous allez voir que
c’est extrêmement facile.

Première étape, signaler au navigateur qu’un microsummary existe sur la page actuelle:

<head>   <link rel="microsummary" href="micro.php" /></head>

Ensuite, il ne s’agit que de générer le texte qui sera afficher dans le résumé à partir du fichier PHP que nous avons référencé:

<?// Les microsummaries doivent être de type texteheader('Content-type: text/plain');

$lastBlogPost = getLastBlogPost();echo ‘K3Blogue/ ‘.$lastBlogPost->titre.’ - ‘.   $lastBlogPost->nom_auteur.’ (’.   $lastBlogPost->date_blogue.’)';?>

C’est aussi simple que ça!

Si vous ajoutez ce blog à vos favoris / bookmarks (ctrl + D), le dialogue suivant apparaîtra:

Notez bien la petite flèche vers le bas qui permet d’ajouter le live title comme bookmark.
Ensuite dans vos bookmarks vous verrez le dernier billet du blog à chaque fois que vous consulterez vos bookmarks.

Ne reste plus qu’à trouver des utilisations plus créative de cette nouveauté de Firefox!

• Consultez le wiki officiel de Mozilla: http://wiki.mozilla.org/Microsummaries
• Téléchargez maintenant Firefox 2.0: http://www.getfirefox.com

 

Les sliders script.aculo.us, Internet Explorer et K3Soft

Avec K3Soft, nous avons une librairie générale qui permet de
transférer les éléments de la database dans un tableau HTML
(présentable sur un site web) avec toutes ces propriétés intactes. Il
s’agit d’un mode de visualisation standard auquel les gens sont
habitués; la représentation tabulaire de l’information. Lorsqu’il y a
beaucoup d’information, un système de pagination a été instauré.

Cliquer sur des pages pour naviguer n’est pas la meilleure navigation
mais demeure néanmoins un bon compromis pour un système HTML/PHP.
Aujourd’hui j’ai amélioré cet élément de l’interface en ajoutant un peu
de JavaScript, et rapidement grâce à la librairie script.aculo.us.

Scriptaculous est un framework JavaScript basé sur prototype, le système derrière Ruby On Rails. Cette librairie offre plusieurs classes intéresantes d’effet, d’animation etc… Pour notre slider, ce sont les classes de drag & drop et le slider qui nous intéressait.

Créer un slider s’est avéré être extrêmement simple, puisque la librairie fait tout le travail. Voici un bout de code exemple:

<script type="text/javascript" language="javascript">document.write('<div id="slidePages"><div id="slideTrack"><div id="slideHandle"></div></div></div>');new Control.Slider(   'slideHandle',   'slideTrack',   {      axis:'horizontal',      range:$R(0,pageMax, false),      values: pageRange,      sliderValue: page,      onSlide:function(v) {         $('slideInfo').innerHTML=(v+1);      },

      onChange:function(v){         // EFFECTUER UNE COMMANDE ICI          // (par exemple, changer window.location)      }   });</script>

C’est tout ce qu’il y a à faire. Slider instantanné, gracieuseté de scriptalicious.
Slider instantanné dans Firefox/Opera/Konqueror… Internet Explorer refuse de coopérer si facilement…

En fait, l’exemple ci-haut fonctionne, si vous ne vous trouvez pas à l’intérieur d’une table HTML. Ça rend la session de debug assez complexe puisque

1. Tous les exemples sur lesquels il est basé fonctionnent
2. La documentation de script.aculo.us n’en fait pas mention
3. Aucune erreur javascript ne s’affiche; le slider s’affiche mais ne fonctionne pas
4. Qui peut s’imaginer que l’élément table cause *encore* des problèmes.

Ce n’est qu’après beaucoup de test que j’ai pu constater que tout
fonctionne bien si l’on sort les éléments div à l’extérieur du tableau.
Le slider fonctionne désormais, mais ne se retrouve pas à la bonne
position. Un petit peu de JavaScript pour le repositionner (facilement
grâce à la librairie prototype)

// sliderId = le slider que l'on veut positionner// refId = Objet de référence, dans le tableaufunction resizeSlider(sliderId, refId){   var p = (Position.cumulativeOffset($(refId)));   $(sliderId).style.top = (p[1])+’px’;   $(sliderId).style.left = p[0]+($(refId).offsetWidth/2)      -($(sliderId).offsetWidth/2)+’px’;}

Ne pas oublier de s’assurer que le div "slidePages", dans l’exemple précédent, soit en position:absolute.

Puisque le positionnement est absolu (et en javascript, de plus, une
dernière petite ligne de code pour s’assurer que tout fonctionne bien
lorsque l’utilisateur redimensionne sa fenêtre:

window.onresize = function(){    resizeSlider('sliderPages', 'referenceObject');};

Le slider scriptaculous va désormais fonctionner sans problème avec Internet Exporer!

Toutefois, ici, nous voulons toujours que chaque site web que nous
développons soit accessible si l’utilisateur a choisi de ne pas
autorisé le JavaScript. Notre solution est de garder la navigation par
page, et remplacer celle-ci par le slider en JavaScript.

Résultat, sans JavaScript:

La même page, avec JavaScript:

Cette modification sera visible bientôt pour tous nos clients utilisant K3Soft pour toutes les tables de l’admin. (Librairies, Produits, Images etc…)