Une palette de couleurs

OpenClassrooms

Formation

En Semi-présenciel Paris

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Les meilleurs cours en Multimédia

Afficher tout

Afficher tout

Description

  • Typologie

    Formation

  • Méthodologie

    En semi-présentiel

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Dans ce tutoriel, vous allez apprendre à faire une palette de couleurs pour votre site web ; c'est un peu normal, vu le titre :p .
Elle vous permettra de proposer un large panel de couleurs à vos visiteurs pour par exemple personnaliser la couleur du texte. Enfin, vous lui trouverez bien une utilité ^^ .
Et puis ce sera un bon entraînement en Javascript : donc vous avez tout à y gagner ! :D

Préparation

Bon : j'espère que vous êtes prêts psychologiquement à subir ce petit tuto car il va y avoir des lignes, des calculs compliqués à comprendre :) .

Mais ne vous inquiétez pas, on va y aller en douceur ^^ .

C'est parti. :pirate:

Matériel

Nous avons besoin :

  • de quelques notions en JavaScript et HTML ;

  • d'un éditeur de texte (Notepad++, Bloc-notes, ...) ;

  • de quelques images ;

  • de vous et de votre ordi.

Et voilà. Avec tous ces ingrédients, on va arriver à ceci :

Palette de couleurs toute en Javascript

Voici ici les images dont vous aurez besoin :

  • degrade ;

  • degrade n-b ;

  • curseur1 ;

  • curseur2.

Ouvrez chaque lien, puis allez dans fichier Enregistrer sous pour chaque image.
Mettez-les toutes dans un même dossier.

Le corps

Vous mettrez tout le code dans un même fichier palette.html
Commençons par le corps du fichier (ou BODY) :

<script type="text/javascript"> // ici, nous glisserons le code plus tard </script> <style type="text/css"> /* ici, nous glisserons le code plus tard aussi ^^ */ </style> <body> <div id="barre" class="skin_barre" onmousedown="clique('barre')"> </div> <div id="curseur1" class="skin_curseur1" onmousedown="clique('barre')"> </div> <div id="carre" class="skin_carre" onmousedown="clique('carre')"> </div> <div id="curseur2" class="skin_curseur2" onmousedown="clique('carre')"> </div> <form> <input type="text" id="resultat" class="skin_resultat" size=20 name="affichage_couleur" value="255,0,0" /> </form> </body>

Bon : je crois que des explications s'imposent. :p

Chaque élément de la palette sera un div, excepté la case affichant la couleur qui sera un input.

ID

Voici un schéma pour vous représenter chaque div par son id:

Class

Voici les styles CSS à utiliser pour mettre en forme la palette de couleurs :

<style type="text/css"> .skin_barre /* on reprend le nom qu'on a mis dans 'class=' */ { width:30px; height:300px; /* on définit la taille du div (celle de l'image) */ top:20px; left:23px; /* et sa position initiale */ position:absolute; /* le div n'est plus fixe mais libre */ background-image:url('degrade.jpg'); /* on définit ici l'image à afficher dans le div */ cursor:s-resize; /* et enfin on définit le curseur à afficher lorsque la souris passe sur ce div */ } /* ===== de même pour les autres ===== */ .skin_curseur1 { width:45px; height:15px; position:absolute; top:12px; left:15px; cursor:s-resize; background-image:url('curseur1.png'); } .skin_carre { width:300px; height:300px; position:absolute; top:20px;left:60px; cursor:move; background-color:red; /* on définit la couleur initiale du carré */ background-image:url('degrade n-b.png'); } .skin_curseur2 { width:20px; height:20px; position:absolute; top:10px; left:350px; cursor:move; background-image:url('curseur2.png'); } .skin_resultat { position:absolute; top:330px; left:60px; border:1px solid black; /* dessine un cadre noir autour du 'input' et d'un pixel d'épaisseur */ background-color:red; text-align:center; /* on aligne le texte au centre */ } </style>

On définit initialement la couleur rouge.

OnMouseDown

Et le onmousedown="" nous permet d'appeler des fonctions Javascript : ici, c'est pour déplacer les curseurs.
Ne vous inquiétez pas : on va le voir après.

Le script

Nous allons maintenant nous occuper du code Javascript.

Initialisation des variables

On initialise les variables dont nous aurons besoin.

var clic=false; //Cette variable nous indique si l'utilisateur clique sur la barre. var clic2=false; //Cette variable nous indique si l'utilisateur clique sur le carré. var r=255,g=0,b=0; //Variables qui stockeront la couleur en rgb. var r_1=255,g_1=0,b_1=0; // Variables secondaires rgb. var blanc=0,noir=1; // Le pourcentage de noir et de blanc entre 0 et 1 appliqué à la couleur (ici, pour le noir, 1 signifie qu'il n'y en aura pas, et 0 totalement : c'est l'inverse) var x=360,y=20; //position initiale de curseur2 (dans le carré).

Petite info sur le rgb (en anglais red,green,blue) rouge vert bleu : ce sont les 3 couleurs primaires, elles sont définies par un nombre entre 0 et 255. Plus d'infos ...

La fonction clique()

Petite précision :
lorsque je mets // ... , ça signifie que j'inclus le code précédemment écrit.

// ... (tout le code précédemment) function clique(objet) { if(objet=="barre") // si l'utilisateur clique sur la barre ... { clic=true; // ...alors on met true (vrai) à clic } else // sinon l'utilisateur clique sur le carré ... { clic2=true; // ...alors on met true (vrai) à clic2 } } La fonction position()

Avant de continuer, on va avoir besoin d'une fonction qui nous permette de savoir la position (x,y) de la souris (il y a des différences selon le navigateur).

// ... function position(axe,event) { // event contient les évènements de la page (on s'en sert pour la position du curseur) var e = event || window.event; // on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur if(axe=="x") //si on demande x { var rep=e.clientX; // position x de la souris. } else // sinon y { var rep=e.clientY; // position y de la souris. } return rep; // on renvoie la valeur de rep. }

Maintenant, on peut commencer le plus gros du travail. :soleil:

Les fonctions calcul() et afficher()

C'est avec ces deux fonctions qu'on calculera et affichera la couleur en utilisant les coordonnées des 2 curseurs.

// ... document.onmousemove=calcul; // lorsque la souris bouge n'importe où dans le document, on appelle la fonction calcul. document.onmousedown=calcul; // lorsque la souris clique n'importe où dans le document, on appelle la fonction calcul. document.onmouseup=function() { clic=false;clic2=false; } // si l'utilisateur relâche le bouton de la souris, alors les variables clic et clic2 redeviennent fausses (false).

STOP ! Ne nous précipitons pas, il faut comprendre avant de faire. :ange:

Avant de vous étaler la grande et incompréhensible :-° fonction calcul(), je vais vous expliquer le principe :) .

Choix de la couleur

Regardez bien cette image :

Il y a au total 6 sous-dégradés.

Donc 6 transitions.

Si la souris de l'utilisateur se situe dans le sous-dégradé n°6, on calculera la variable G (car il n'y a qu'elle qui varie ici) :

  • 255,255,0

  • 255,0,0

Et par exemple si la souris se trouve aux 50 % du n°6, eh bien G = 255/2 = 128 (environ).
Et logiquement, 255,128,0 est bien orange. En quelque sorte, c'est le milieu entre le rouge et le jaune.

Ce n'est pas très simple, je l'avoue :p , mais essayez avec d'autres exemples et ça va rentrer !

Vous pouvez aussi essayer avec la palette de couleurs de Paint pour voir comment évoluent les variables RGB.

Ajout de noir et de blanc

En RGB, le noir est déterminé par 0,0,0 et le blanc par 255,255,255.
Plus on augmente une variable, plus elle se rapproche du blanc, et inversement pour le noir.
C'est de cette manière qu'on pourra éclaircir ou assombrir la couleur.

La position du curseur dans le carré :

  • x représentera le noir ;

  • y représentera le blanc.

Allez, vous allez tenir le coup ! Finissons-en avec ces 2 abominables fonctions. :pirate:

Structure

Commençons par voir la structure de calcul() :

// ... function calcul(event) // event contient les événements de la page (on s'en sert pour la position du curseur). { if(clic && position('y',event)<=320 && position('y',event)>=20) // on appelle position() pour connaître la position de la souris. { // BLOC 1 afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'. } if(clic2) // si l'utilisateur clique sur le carré... { if(position('y',event)>20 && position('y',event)<320) { // BLOC 2 } if(position('x',event)>60 && position('x',event)<360) { // BLOC 3 } afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'. } } function afficher() // ici on gère l'affichage de la couleur { // BLOC 4 }

Bon : allons-y par étape (bloc), sinon on ne s'y retrouvera plus. :D :

BLOC 1

Ce bloc s'exécute lorsque l'utilisateur clique sur la barre.
Et que le curseur reste dans les limites de celle-ci :
la barre commence à y=20px et fait 300 px, donc fini à y=320px.

document.getElementById("curseur1").style.top=position('y',event)-7; //on change la position du curseur (top) en même temps que la souris. // c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve. if((position('y',event)-20)<=50) // 1/6 (50px) { r=255; g=0; b=Math.round((position('y',event)-20)*255/50); } else if((position('y',event)-20)<=100) // 2/6 (100px) { r=Math.round(255-((position('y',event)-70)*255/50)); g=0; b=255; } else if((position('y',event)-20)<=150) // 3/6 (150px) { r=0; g=Math.round((position('y',event)-120)*255/50); b=255; } else if((position('y',event)-20)<=200) // 4/6 (200px) { r=0; g=255; b=Math.round(255-((position('y',event)-170)*255/50)); } else if((position('y',event)-20)<=250) // 5/6 (250px) { r=Math.round((position('y',event)-220)*255/50); g=255; b=0; } else if((position('y',event)-20)<=300) // 6/6 (300px) { r=255; g=Math.round(255-((position('y',event)-270)*255/50)); b=0; } document.getElementById("carre").style.backgroundColor="rgb("+r+","+g+","+b+")"; // On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.

Dans chaque sixième, on ne modifie qu'une seule variable (se référer au tableau).
Prenons l'exemple du 1er :

if((position('y',event)-20)<=50)

si la position y de la souris (-20 car la barre commence à top:20px) est plus petite que 50 px, donc plus petit que 1/6...

Il n'y a que la variable b qui varie (les autres sont constantes), et on la définit comme ceci :

b=Math.round((position('y',event)-20)*255/50); // Math.round renvoie l arrondi

On fait le produit en croix pour avoir b.

position(y)

50

b

255

b = position(y) * 255 / 50.

Plus y se rapproche de 50, plus b se rapproche de 255.

Puis dans le 2e : (2/6).

else if((position('y',event)-20)<=100) //si la position y de la souris est plus petite que 100 px, donc plus petite que 2/6... r=Math.round(255-((position('y',event)-70)*255/50)); //position('y',event)-70 car on retire encore les 20 px et on inclut les 50 px précédents.

Ici, r=255 et on veut le diminuer.
Plus y se rapproche de 100, plus r se rapproche de 0.

Produit en croix : r = position (y) * 255/50.
>> Mais on veut que ça diminue, donc on retire le résultat au maximum : r = 255 - (position (y) *255/50).

Et on fait la même chose pour le reste en alternant toujours "augmentation", "diminution".

BLOC 2

Ce bloc s'exécute si la souris reste dans ses limites verticales (le carré commence à y=20px et fait 300 px de hauteur, donc fini à y=320px).

document.getElementById("curseur2").style.top=(position('y',event)-10)+"px"; // on déplace curseur2 et on lui retire son milieu (comme pour curseur 1) y=position('y',event); // on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs. BLOC 3

Ce bloc s'exécute si la souris reste dans ses limites horizontales (le carré commence à x=60px (left) et fait 300 px de largeur, donc finit à x=360px).

document.getElementById("curseur2").style.left=(position('x',event)-10)+"px"; // on déplace curseur2 et on lui retire son milieu (comme pour curseur 1) x=position('x',event); // on enregistre la position x de la souris dans la variable 'x' pour que la fonction afficher() puisse faire ces calculs. BLOC 4

Et enfin la fonction afficher() :

noir=Math.round( (x-60)*100/300)/100; // on calcule le pourcentage de noir appliqué à la couleur en divisant la position 'x' du curseur dans le carré par sa largeur (-60...

Catégories liées

  • Cours harmonie couleurs
  • Cours Multimédia
  • Cours Multimédia a distance
  • Formation a distance
  • Cours Multimédia (75) Paris
  • Cours (75) Paris
  • Formations OpenClassrooms

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Une palette de couleurs

Prix sur demande

Les meilleurs cours en Multimédia

Afficher tout

Afficher tout