Boot Camp permet donc, officiellement et facilement, d’installer Windows XP sur un Macintel. D’aucuns pensent que c’est la ruine de Mac OS X, car les logiciels ne seront plus portés sur Mac, d’autres y voient au contraire enfin une possibilité de switcher en douceur.
La meilleure réaction que j’aie lu à ce sujet est sans doute celle de Daniel Glazman, qui se dit enfin « converti » … Je pense que je vais faire comme lui ; à moi le MacBook Pro !
Fluxiom est une application de gestion de contenu en ligne. Développée par Thomas Fuchs, l’auteur de la librairie script.aculo.us, elle est pour l’instant en phase de test… mais la vidéo de démonstration est impressionante. L’équivalent de l’application de bureau la plus riche et de la plus complète est disponible sur le Web, en pur XHTML/CSS/Javascript ; animations, contrôles utilisateurs, Ajax et interactivité sont au rendez-vous. Une merveille, jetez-y un coup d’oeil !
Ce billet présente la librairie Javascript script.aculo.us. Cette librairie permet très facilement :
Bref, une merveille, simple d’utilisation, qui peut donner à un site web un réel plus en terme d’ergonomie. Lisez le billet complet pour une présentation détaillée et quelques exemples d’utilisation de la librairie.
Les animations “candy-eye” sont de plus en plus fréquentes dans les pages web. Si elles sont gratuites, elles distraient l’utilisateur… mais elles peuvent aussi améliorer l’ergonomie d’un site complexe en mettant l’accent sur le comportement.
script.aculo.us fournit quelques effets de base, ainsi qu’une multitude de combinaisons d’effets. Implémenter un effet est très simple ; voyons par exemple comment ajouter un effet de fondu à un bloc quelconque :
[xml]<p onclick="new Effect.Fade(this)">Cliquez moi</p>
C’est tout ! Tous les autres effets sont implémentables de la même façon. Vous trouverez sur script.aculo.us une page de démonstration de tous les effets ; pour voir comment cela peut améliorer l’ergonomie, rendez vous sur script.aculo.us, decsendez un peu, et tapez moins de trois lettres dans le champ de recherche.
Le drag/drop est extrêment pratique lorsqu’il s’agit de trier ou de réorganiser des éléments. Il peut aussi être utilisé sur les sites d’achat en ligne, pour ajouter des éléments au panier de manière intuitive. script.aculo.us propose différents contrôles pour implémenter facilement des méthodes de tri. Imaginons par exemple que nous voulions trier une liste :
[xml]<ul id="list"> <li id="item_1">I'm number 1</li> <li id="item_2">I'm number 2</li> <li id="item_3">I'm number 3</li></ul><script type="text/javascript"> Sortable.create('list');</script>
Cela suffit à créer un effet Sortable. On peut également rajouter une demi-ligne de Javascript pour envoyer automatiquement une requête Ajax après avoir terminé le tri, pour par exemple sauvegarder le nouvel ordre des éléments :
[xml]<script type="text/javascript">Sortable.create( 'list', {onUpdate:function(){ new Ajax.Request( '/list.php', {parameters: Sortable.serialize('list')} )} };</script>
A chaque fin de tri (lorque l’élément est relâché), une requête Ajax sera envoyée à la page “list.php”, contenant en paramètre l’ordre des éléments. Il est alors facile de sauvegarder l’ordre des éléments, par exemple dans une base de donnée. Voici un exemple de Tri de liste avec callback Ajax.
On peut également trier des éléments entre deux listes différentes, en les mélangeant éventuellement.
Les sliders implémentent un contrôle absent de HTML. Cela permet de modifier avec précisions des valeurs, dans un certain intervalle. De même que pour le Tri, il est possible d’envoyer une requête Ajax contenant la valeur du Slider lorsqu’il est modifié. La démo proposée est assez moche, mais tout est stylable à vonlonté avec un peu de CSS.
Un autre contrôle très sympathique est le champ auto-éditable. Popularisés par le site Flickr, ils vous permettent d’éditer un texte en cliquant simplement dessus. Le texte devient alors éditable, et peut être sauvegardé sans même recharger la page, grâce à Ajax. Un exemple sera sans doute plus clair, vous pouvez en trouver un au milieu de cette page.
Tout d’abord, si vous voulez avoir une définition précise de ce que recouvre le terme Ajax, rendrez-vous sur Wikipedia:Ajax.
script.aculo.us est basé sur la librairie Prototype, qui possède de multiples fonctions très pratiques. Elle permet entre autre d’envoyer facilement des requêtes Ajax fonctionnant dans la plupart des navigateurs. Un exemple type d’utilisation des fonctionnalités Ajax de Prototype est :
[xml]<script type="text/javascript">new Ajax.Request( url, { method: 'get', parameters: 'data=somestuff', onComplete: showResponse });</script>
On peut difficilement faire plus simple : ce code envoie une requête
Ajax de base, avec les paramètres spécifiés, et apelle la fonction
showReponse lorsque la réponse à la requête a été reçue. On peut
également utiliser l’objet Ajax.Updater pour spécifier en plus l’id
d’un élément, dont le contenu sera mis à jour avec le résultat de la
requête.
En ce basant sur ce système, script.aculo.us propose un système d’auto-complétion facile à mettre en oeuvre. Cet outil permet par exemple d’afficher un aperçu des résultats dans un champ de recherche, lorsque l’utilisateur a déjà tapé quelques lignes. Cela s’implémente d’une manière semblable à un Tri, c’est à dire en une seule ligne. Il suffit de définir le champ que l’on veut auto-compléter, l’adresse de la page du serveur renvoyant le contenu de l’aperçu, et cela suffit. Le résultat est quelque chose de très proche d’une application logicielle classique. Vous pouvez essayer la démonstration ici.
Impossible en ce moment de parler d’Ajax et de Javascript sans mentionner ajaxWrite, un traitement de texte entièrement en ligne permettant d’éditer des documents Word avec une interface très similaire.
Il existe d’autres librairies que script.aculo.us, bien sûr, proposant des fonctionnalités semblables. On peut citer Rico, qui comporte des effets très intéressants, comme la LiveGrid. Je préfère néanmoins script.aculo.us, pour sa simplicité d’utilisation et le nombre impressionnant de fonctionnalités qu’elle comporte.
Il ne me reste plus qu’à vous souhaiter bonne chance dans votre découverte de script.aculo.us et de l’Ajax !
Après 6 longs mois de travail, “Viens voir ce site !” est enfin lancé ! Il s’agit d’un site destiné aux créatifs et professionnels de la publicité, réalisé pour le compte de Comkillers. J’ai du reprendre une ancienne version du site, qui avait été codée très rapidement (et donc très mal), alors il y a beaucoup de choses moches… Mais également des tas de fonctionnalités sympatiques : galerie, books, Lightbox pour les images, Player Flash pour les sons, etc.
Il y a également pas mal d’Ajax, qui est utilisé un peu partout :
Le tout réalisé dans les règles du Hijax : implémentation d’une version standard fonctionnant sans script activé, avant d’insérer du Javascript non obstrusif pour activer l’Ajax. Je vous reparlerai sans doute des techniques et librairies utilisées dans un autre billet.
Bref, vous pouvez aller jeter un coup d’oeil, et éventuellement me dire ce que vous en pensez. Pour information, le site a été testé sous IE 5.5/6/7b, Firefox 1.0*/1.5*, Opera 8, Konqueror, Safari 1.2/1.3 et Netscape 7.
Bonjour, bienvenue sur le blog de Pierre de La Morinerie, alias KemenAran. Il a pour but de présenter un peu mes projets passés et en cours, et de partager des techniques et des connaissances.
Have fun !