To Infinity... and Beyond!

BLOG

Vous trouverez dans ce laboratoire des articles, librairies et tutoriaux autour de certaines technologies émergentes : JavaScript et notamment la programmation de plugins jQuery et de modules node.JS. CouchDB. L'Internet des Objets. Le Cloud.

Quelques suggestions pour tirer le plus de partie du contenu

  • Abonnez-vous au flux RSS
  • Aller sur Git pour récupérer les sources des articles
  • Réagissez aux articles, ou contactez-nous pour parler de votre projet

ColourLovers Wizard

Résumé

Dans cet article, vous allez découvrir comment utiliser l’API ColourLovers avec jQuery pour personnaliser aisément les fonds de page de vos sites Web.
La librairie ColourLoversWizard d’EIDOLON LABS sera mise à contribution pour rechercher des motifs répétables et des palettes de couleurs librement utilisables, et les appliquer directement sur la page visualisée.
Le but de cet article est de réussir l’implémentation d’une personnalisation contrôlée par les utilisateurs eux-même.

ColourLovers : le site, la communauté

Le fond de page de ce blog est un bon exemple du rendu d’un motif répétitif créé par la communauté ColourLovers.
ColourLovers est une communauté de 639 582 membres (à l’heure ou je vous parle), ayant créé 1 638 241 palettes et 1 600 003 motifs répétables.
En fait, voici la première application de l’API. Si vous voulez mettre à jour ces statistiques, attendez un peu et cliquez ici :


var colourLoversWizard = new ColourLoversWizard();

colourLoversWizard.displayStats({
  "lovers"   : "#lovers",
  "palettes" : "#palettes",
  "patterns" : "span.patterns"
});

$("#cmd_refresh_stats").click(colourLoversWizard.refreshStats);
  

Ces statistiques sont sans aucun doute l’usage le moins intéressant que nous puissions faire de l’API, mais elles donnent à réfléchir : 1 600 003 motifs, ma foi ce n’est pas rien (je ne connais aucune bibliothèque qui vous en donne autant) et qui plus est, librement utilisables !

Les motifs répétables (patterns)

Venons en tout de suite au coeur du sujet : tapez maintenant un mot clé pour effectuer une recherche de motifs sur le site ColourLovers. Quand vous aurez validé votre recherche, vous devriez assister au chargement en direct d’un carousel de vignettes représentant les motifs correspondant à votre recherche.
En cliquant sur chacune de ses vignettes, vous les appliquerez immédiatement au fond de page de ce blog.


colourLoversWizard.searchForm({
  type    : "patterns", 
  input   : "#frm_search_patterns", 
  display : "#display_patterns",
  applyOn : "body"
});
  

Les palettes de couleurs

Un autre outil indispensable à tout web designer est l’outil de création de palettes/thèmes, comme par exemple kuler d’Adobe. Et bien rassurez-vous, ColourLovers propose aussi cet outil ! Les palettes de couleurs définissent l’identité d’un site, d’une marque, et on peut ensuite les décliner en logos, motifs..
Attention maintenant, reculez vous de quelques mêtres car l’expérience que nous allons tenter risque de faire très mal aux yeux ! Sur le même principe que le formulaire précédent, nous allons maintenant invoquer la recherche de palettes, avec cette fois-ci une latitude beaucoup plus grande puisque nous allons ajouter tous les paramètres disponibles à notre formulaire. (reportez-vous pour comprendre le sens de chaque paramètre à la documentation en ligne ici : Palette Search Parameters)
Et enfin, nous allons définir le mode d’application de chacune des couleurs de nos palettes sur les éléments de notre page en leur associant un sélecteur CSS en fonction de l’attribut à modifier (couleur du texte, arrière-plan, bordure)..


colourLoversWizard.searchForm({
  type     : "palettes", 
  input    : "#frm_search_palettes", 
  display  : "#display_palettes",
  colorMap : [ // let's define here how the 5 colours will apply on our page
    // 1st color will define the color of our titles
    [{color: "h1, h2, h3, h4, h5"}],
    
    // 2nd color will define the text color of the rest of the page 
    // and the color of our header's background
    [{color: "body"}, {background: "header"}],  

    // 3rd color will define the background for both our articles and asides
    [{background: "article, aside"}],

    // 4th color will define the background of our navigation bar
    [{background: "nav"}],

    // 5th color will define the background of our footer..
    [{background: "footer"}]
  ]
});

$("#more_palettes").click(function() {
  colourLoversWizard.getNextPage("#frm_search_palettes");
});
  

Utilisation avancée

Regardons maintenant les différentes options et hooks disponibles pour personnaliser encore plus votre expérience ColourLovers.


var colourLoversWizard = new ColourLoversWizard({
  loadingGif: "path/to/my.gif", // define your own animated gif for loading 
                                // patterns and palettes vignettes
  

});
  

(...)

Eidolons
The noiseless myriads,
The infinite oceans where the rivers empty,
The separate countless free identities, like eyesight,
The true realities, eidolons.
Walt Whitman - Leaves of Grass