À propos de la Conception Web

Bienvenue au cours de conception de sites web. La première règle de la conception de sites web est la suivante : vous ne parlez pas de Comic Sans MS. La deuxième règle est la suivante : Vous ne devez pas parler de Comic Sans MS.

• Le module affiche un extrait de fichier CSS sur un écran.
• Sur la base des informations fournies, Accepter (✓), Envisager (Δ) ou Refuser (✗) le code.

Étape 1 : Sélectionner le site web

Retrouver le site web sur lequel ce code a été cité. Utiliser la partie Sélecteur du code (la partie avant {) pour le réduire à un site, puis noter sa valeur Seuil.

Edison Daily (site d’informations) Éléments : body, a, h3, blockquote IDs : #header, #comments Classes : .post, .title, .author Seuil : #00FF00	Buddymaker (réseau social) Éléments : div, span, img, a IDs : #msg, #cover, #content, #sidebar Classes : .post, .title, .share Seuil : #8040C0
PNGdrop (hébergement d’images) Éléments : div, img IDs : #main, #comments, #fullview Classes : .username, .share, .large Seuil : #BADA55	BobIRS (salon de discussion) Éléments : ul, ol, img, b, i IDs : #sidebar Classes : .avatar, .username Seuil : #03E61E
Vidhost (hébergement de vidéos) Éléments : div, iframe, b, i IDs : #main, #rating, #comments Classes : .username, .share, .channel Seuil : #60061E	Go Team Falcon online (jeu en ligne) Éléments : body, iframe IDs : #rating, #comments Classes : .rating, .fullscreen Seuil : #501337
Stufflocker (stockage en ligne) Éléments : div, h3, img, iframe IDs : #sidebar, #download Classes : .menu, .author Seuil : #B020E5	Steel Nexus (forum) Éléments : body, div, img, blockquote IDs : #header, #content, #sidebar Classes : .avatar, .reply Seuil : #BEA61E

Étape 2 : Trouver la couleur cible

Trouver le nom de la première couleur dans le fichier CSS, puis utiliser le tableau suivant pour déterminer une valeur hexadécimale de cette couleur. Cette valeur est la Couleur Cible qu’il faudra plus tard. Si aucun nom de couleur n’est affiché, utiliser #7F7F7F.

Couleur	Valeur hex	Couleur	Valeur hex	Couleur	Valeur hex
Bleu	#0000FF	Jaune	#FFFF00	Rouge	#FF0000
Vert	#00FF00	Blanc	#FFFFFF	Orange	#FFA500
Violet	#800080	Magenta	#FF00FF	Gris	#808080

Note : La valeur hexadécimale est indiquée au format #RRVVBB.

Étape 3 : Calculer le score du site

Calculer le score du site comme suit :

• Commencer par le nombre de lignes à l’intérieur des {accolades}. Compter les points-virgules est une bonne idée car c’est un terminateur de ligne.
• +3 points chacun pour :
  • La valeur R de la Couleur Cible est inférieure à la valeur R du seuil.
  • La valeur V de la Couleur Cible est supérieure ou égale à la valeur V du seuil.
  • La valeur B de la Couleur Cible est supérieure à la valeur B du seuil.
• +2 points pour chaque margin/padding.
• +1 point pour chaque border/border-radius sauf si c’est 0px ou 50%.
• -1 point pour chaque z-index sans une position.
• +1 point pour chaque font-family sauf si c’est “Comic Sans MS”, qui donne -5 points.
• +2 points pour chaque box-shadow/text-shadow sauf si c’est none.
• x2 les points si les boutons du module sont colorés, ou -3 points s’ils sont gris.
  • Si le mode Daltonien est actif, à la place x2 les points pour les boutons blancs, et -3 pour les boutons noirs.
• Si le score est maintenant négatif ou 0, +16 jusqu’à ce qu’il soit positif.
• Additionner les chiffres du score jusqu’à ce qu’il ne reste plus qu’un seul chiffre. Utiliser le tableau suivant pour trouver le bouton où appuyer.

Accepter (✓)	Envisager (Δ)	Refuser (✗)
2, 3, 5, 7	6, 8	1, 4, 9