Tag: Customiser

2 weeks since my last English post, 1 month before my real new post (the last was only translation of older posts). During this time I was busy to translate these posts, busy at work in Fluidesign, busy to live in LA.

During the last days, I developed my first own jQuery plugin: nyroModal.

Why a new plugin of this kind when there is already too many?

4 answers:

• There is no too much using jQuery, most of them use Prototype/Scriptaculous
• Most of them aren't too customizable as expected
• When you find a bug, it's difficult to contact the developer -who often ask some Paypal donations- or understand the code to fix it
• Because it's still pleasant for his ego to realize the things by himself

My plugin provides all the features I saw in the differents plugins I tried. In bulk:

• Ajax Request
• Display an hidden DOM element
• Image
• Gallery
• Form
• Iframe

But I also added some stuff I don't believe see elsewhere, or not enough:

• You can target the content inside an Ajax request or a form
• Forms works with a file upload
• Background color is modifiable dynamically
• Display an error message if needed
• Ability to resize from an Ajax Request

Moreover I took care about the ability to customize the modal, to allow everybody to change the way the elements are animated. There is alos many possible callbacks to done every JavaScript action tou need. Thus every animation function could be fully rewritten and everything is documented: all available settings and the full modal process to allow each developer to understand how it works et to do what ever he want. I probably create more callback than necessary but better more than not enough!

And yes, it's already the 1.1 version because I showed it to my Fluidesign colleagues and all told me the transition -especially for the gallery- didn't look so good. So I created 2 new animations callback the same evening to get round of that.

• Project Page (en)
• Project Page (fr)
• Google Code Page
• jQuery Plugin Page

If you have any suggestions, bug, improvement idea or if you use it, don't hesitate to let a comment. I'll be glad to answer it.

PS : I know, I didn't search too far for the name...

Version française de ce billet

Bientôt un mois que je n'ai pas publié de billet en français. Occupé à traduire des billets en anglais, occupé à développer chez Fluidesign, occupé à vivre à Los Angeles.

Et puis ces derniers temps, je me suis aussi attelé à développer mon premier plugin jQuery : nyroModal.

Alors pourquoi un nouveau plugin de ce genre alors qu'il en existe déjà tant ?

4 réponses :

• Il n'en existe pas tant que ça sous jQuery, la plupart étant sur Prototype/Scriptaculous
• La plupart ne sont pas autant personnalisable qu'il ne le laisse entendre
• Lorsqu'on trouve un bug, il est difficile de contacter le développeur (qui demande souvent un peu de Paypal) ou d'appréhender le code d'un autre pour le corriger
• Parce qu'il est toujours plaisant pour son égo de réaliser les choses soi-même.

Mon plugin reprend donc l'ensemble des fonctionnalités que j'ai pu voir dans les différents plugins que j'ai testés. En vrac :

• Requête Ajax
• Affichage d'un élément du DOM caché
• Image
• Galerie
• Formulaire
• Iframe

Mais j'ai aussi ajoutés des choses que je ne crois pas avoir vu ailleurs, ou pas assez souvent :

• Il est possible de cibler l'élément affiché au sein d'une requête Ajax ou d'un formulaire
• Les formulaires fonctionnent même avec un upload de fichiers
• La couleur de fond est paramétrable dynamiquement
• Affichage d'un message d'erreur si besoin
• Possibilté de modifier la taille de la modale depuis une requête Ajax

De plus, j'ai beaucoup prêté attention à la personnalisation, pour permettre à chacun de modifier la façon dont sont animés les éléments. Il y a aussi de nombreux callback possible pour effectuer toutes les actions JavaScript dont vous avez besoin. Ainsi, toutes les fonctions d'animations sont entièrement redéfinissable et tout est documenté : l'ensemble des paramètres disponibles et le processus complet de la modale pour permettre à toute personne de comprendre comment il fonctionne et d'en faire ce qu'il en veut. J'ai sans doute créer plus de callback que nécessaire, mais de cette façon tout est possible.

Et oui, on en est déjà à la version 1.1 puisque je l'ai montré à mes collègues de bureau et tous m'ont dit que les transitions (pour la gallerie notamment) n'était vraiment pas bon. J'ai donc créer deux nouvelles fonctions d'animation le soir même pour pallier à cela.

• La page du projet (en)
• La page du projet (fr)
• La page google code du projet
• La page dans le répertoire des plugins jQuery

Si vous avez une suggestion, un bug, une idée d'amélioration ou si l'utiliser sur votre site, n'hésitez pas à laisser un commentaire. J'y répondrai avec plaisir.

PS : hé oui, je ne suis pas allé chercher bien loin pour le nom...

English version of this post

Depuis un peu plus de 3 mois, on n'avait pas de nouvelles de TinyMCE. Je m'étais promené sur le site pour essayer de trouver une roadmap mais je n'avais pas trouvé.

Et aujourd'hui, qu'est-ce qui tombe dans mon netvibes ?
L'annonce de la sortie de la version 3 alpha 1

Et les changements sont réjouissants :

• Réécriture complète du code (d'où le passage à la version 3) avec nettoyage en profondeur
• Réduction de 33% de la taille totale des scripts
• Réduction de 75% des requêtes au serveur
• Les popups sont maintenant personnalisables à souhait lors d'une ouverture inline (popup Ajax)
• Les plugins peuvent maintenant ajouter des éléments au menu contextuel, avec des sous-menus possibles
• Chargement à la demande des éléments et non tout au chargement
• Tous les éléments d'affichages passent maintenant par CSS (les images des boutons par exemple). Ce qui veut dire que la personnalisation sera encore amélioré à ce niveau là
• Les listes déroulantes (pour sélectionner la police par exemple) sont maintenant crées en javascript. On peut donc voir la police sur chaque ligne comme dans votre éditeur de texte favori

Et encore plein d'autres.

Je n'ai pas encore eu le temps de regarder en profondeur comment cette nouvelle mouture marche, mais on nous dit :

From a pure feature point of view, this release might not be very impressive, but if you are interested in JavaScript and do a lot of custom development, this is the release you have been waiting for.

En français :

Du point de vue des fonctionnalités, cette version ne sera pas vraiment impressionnante, mais si vous vous intéressez au JavaScript et à la personnalisation de TinyMCE, c'est la version que vous attendiez.

Dès que j'ai le temps, je fais un petit tour des nouvelles fonctionnalités JavaScript.

Vous pouvez d'ores et déjà voir la démo de cette dernière version : attention, les fichiers de langue n'étant pas encore prêt, vous verrez sans doute des choses bizarres...

Edit : Sans avoir de timeline véritablement défini, l'équipe de Moxiecode pense sortir une version finale à la fin du mois. Ils travaillent à la correction de bug, à la documentation et un tutoriel sur comment passer de la version 2 à la version 3.

Firefox est un outil de travail, absolument indispensable à tout développeur. Suite à une petite discussion avec Miho, je vais vous faire ici un tour complet de tous les plugins et astuces d'affichage que j'utilise pour en tirer le meilleur parti.

Les extensions
Firefox propose une très grand nombre d'extensions. Certains sont très utiles, d'autres un peu moins, mais toutes trouvent des utilisateurs. Je vais donc vous lister ici celles que j'ai installés, par ordre de préférence/utilisation.

• FireBug permet de déboguer HTML, CSS, JavaScript et Ajax très simplement et très rapidement. Malheureusement, je ne l'utilise pas car cette extension augmente considérablement la taille en mémoire de mon Firefox, passant très rapidement de 70-80Mo à plus de 300 ! Il intègre les fonctionnalités de Dom Inspector et Live HTTP Headers et en a bien d'autres. Visitez le site officiel pour tout savoir.
• Web Developer est un autre incoutournable du développement web. Permet de désactiver images, javascript, CSS et tout plein d'autres choses, d'afficher toutes sortes d'information sur la page (taille totale des script, des images, de la page), vider le cache en 2 clics, redimenssionner la fenêtre, valider la page et encore plein d'autres choses. Là encore je ne peux que vous encourager à visiter le site officiel
• Dom Inspector permet de voir l'architecture de votre page HTML telle qu'elle est actuellement, avec les modifications éventuelles qu'auront réalisé des éventuels scripts.
• Live HTTP Headers affiche toutes les requêtes envoyées par Firefox avec toutes les infos qui vont avec. Par requêtes, comprenez chargement de page HTML, image ou script, mais aussi requêtes Ajax, flash ou tout autre chose dans le même genre.
• Tab Mix Plus ajoute plein de configurations à la gestion des onglets. Pour moi c'est le mode fenêtre unique, les popups ouvertes en onglet, l'ouverture automatique en onglet automatique et plein d'autres trucs.
• CustomizeGoogle ajoutera plein de petites fonctionnalités à vos recherches Google, comme un compteur de positions, des liens vers d'autres moteurs, vers Wayback Machine, de supprimer les pubs, etc...
• GooglePreview ajoute la fonctionnalité qui manque à l'extension précédente, l'affichage des vignettes des sites dans les résultats.
• Full Fullscreen vous offre la possibilité de visualiser vos sites sans absolument rien d'autre.
• FoxyTunes contrôle votre lecteur média dans la barre d'état de Firefox, utile pour toujours garder la main dessus.
• Custom Buttons offre la possibilité de créer vos propres boutons avec vos propres actions, écrites en JavaScript (j'y reviendrai dans un prochain billet). Il se trouve en bas de la liste car je viens de le découvrir...

L'interface
Tout d'abord j'ai un windows XP customisé afin de réduite au maximum la barre des tâches et la barre de titre pour libérer un maximum de place au contenu même de chaque fenêtre.
De plus j'utilise un thème Mini pour Firefox afin de rendre les polices, menu et icônes au minimum et encore gagner de la place.
Je me retrouve donc avec un espace d'affichage des pages web de 676 par 1280 pixels (si si, c'est Photoshop qui le dit !) pour une résolution d'écran de 1280 par 800. Je gagne 43 pixels par rapport à une configuration de base, thème Windows et Firefox compris. Ca paraît petit, mais j'ai l'impression que c'est énorme.
J'ai donc un espace maximal pour visualiser les pages. De plus je trouve ces deux thèmes beaucoup plus jolis que ceux de bases, surtout pour celui de Windows et son bleu qui m'arrache les yeux...

Les petits plus... qui font beaucoup !
Puisque j'utilise Tab Mix Plus pour n'avoir qu'une seule fenêtre, j'ai paramétrer la barre des onglets pour être toujours visibles, avec des taille d'onglet petites, affichant la barre de chargement et changeant de style si la page n'a pas été vue. Lorsque j'utilise la recherche de Firefox, entre une nouvelle adresse, clique sur un lien externe sur un site ou ouvre une nouvelle page depuis une autre application, j'ai un nouvel onglet qui s'ouvre pour ne jamais perdre la page sur laquelle j'étais.

J'ai positionné les boutons de Web Developper tout en haut à gauche, sur la même ligne que le menu général de Firefox, ce qui a pour effet de rendre toutes les fonctionnalités accessibles en un clic.

Pour finir, voici un petit screenshot de mon Firefox tout joli tout beau.

Dans la même idée, j'ai modifié la position des boutons de Thunderbird pour gagner encore aussi de la place, et de l'efficacité, en supprimant les boutons non utilisé et en plaçant les plus utilisé (indésirables et répondre) plus proche des messages.

Et vous, des astuces dans le même genre ? Des extensions que vous utilisez chaque seconde ?

Sur mon blog, j'ai mis en place des headers qui changent à chaque appel. Voici ma petite analyse par rapport à cet élément qu'on peut mettre facilement en place sur un site.

1) Dans quels cas on rencontre ça ?
Commençons par regarder quelques exemples :

• Ville de Besançon : l'image incluse dans le header change selon la catégorie dans laquelle on se trouve. Cette image est en rapport avec la catégorie (Ex: dans "Loisirs et Cultures" : un concert dans la ville et des enfants sur des vélos). Toutes les images sont construites par une composition de 2 images avec 1 transition en dégradé.
• Electrolux : 1 image par page, toutes plus ou moins sur le thème printanier.
• Leap Frog Interactive (création de sites aux USA) : les header toutes dans les teintes vertes sont en rapport avec la partie dans laquelle on est. Parfois, elle disparait.
• Allociné : Parfois on a droit à d'imenses header (qui se prolonge très loin dans la page) aux couleurs d'un film pour en faire la promo.

2) Dans quels buts ?
Comme on vient de le voir dans les exemples précédents, il peut y avoir un but bien précis (la publicité) ou simplement de rendre le site un peu plus attrayant, en ajoutant une pointe de "fraîcheur", de "renouveau" au site à chaque page; chaque page est ainsi incluse complétement dans le site par la charte graphique du site, mais personnalisé par ce header (que l'on voit forcément) qui change tout le temps.

3) Des variantes ?
On peut très bien imaginer des headers en flash, dont les animations changent à chaque page. j'ai déjà vu aussi des sites (je n'ai pas de lien sous la main) qui changent en fonction de l'heure qu'il est. On peut aussi étendre le système au site complet et/ou à un pied de page (footer) qui changera en accord avec le header. A vous de laisser libre court à vos imaginations

4) Ma conclusion
Ajouter des headers changeant, je l'ai dit, c'est très simple à mettre en place. Ca ne prend que deux secondes, ça n'enlève rien au site, puisque la charte graphique est toujours là, mais ça ajoute un petit plus qui peut faire revenir ou rester plus longtemps le visiteur. Dans le cas d'une image dans un cadre définie, le lieu du changement est limité à ce cadre et ne perturbe aucunement le passage d'une page à une autre. On ne se rend pas forcément compte. Et si ce n'est pas conscient, l'inconscient sera là pour mémoriser les changements et se dire (pures spéculations, je ne suis pas expert dans le domaine) "Ah, y'a eu du changement là, c'est sympa, ce n'est pas toujours pareil".
C'est pour ses raisons que j'ai mis en place ce système sur mon blog, et que je vais le mettre en place sur d'autres sites, et le proposer pour mes futurs projets. En plus, vous savez qu'ici, vous pouvez ajouter vos propres headers, ce qui permet encore une petite personnalisation en plus pour ceux qui veulent...

En 2 mots : "une petite chose qui ne coûte rien, simple et discrete qui apporte un petit plus au site"