En caso del diseño de webs

Bienvenido a la clase de diseño de webs. La primera del diseño de páginas web es: no hables sobre Comic Sans MS. La segunda regla es: NO hables sobre Comic Sans MS. La tercera regla es: NUNCA escribas “color” con U.

• El módulo muestra un trozo de código en CSS en una pantalla.
• Basándote en la información recibida, tienes que Aceptar (✓), Considerar (Δ), o Rechazar (✗) el código.

Paso 1: Selecciona la página web

Encuentra la página cuyo código está en el módulo. Usa la parte del Selector en el código (la parte antes de {) para quedarte con una opción, y luego apúntate su Umbral.

Edison Daily (sitio de noticias) Elementos: body, a, h3, blockquote IDs: #header, #comments Clases: .post, .title, .author Umbral: #00FF00	Buddymaker (red social) Elementos: div, span, img, a IDs: #msg, #cover, #content, #sidebar Clases: .post, .title, .share Umbral: #8040C0
PNGdrop (servidor de imágenes) Elementos: div, img IDs: #main, #comments, #fullview Clases: .username, .share, .large Umbral: #BADA55	BobIRS (salas de chat) Elementos: ul, ol, img, b, i IDs: #sidebar Clases: .avatar, .username Umbral: #03E61E
Vidhost (servidor de vídeos) Elementos: div, iframe, b, i IDs: #main, #rating, #comments Clases: .username, .share, .channel Umbral: #60061E	Go Team Falcon online (juego online) Elementos: body, iframe IDs: #rating, #comments Clases: .rating, .fullscreen Umbral: #501337
Stufflocker (nube) Elementos: div, h3, img, iframe IDs: #sidebar, #download Clases: .menu, .author Umbral: #B020E5	Steel Nexus (foro) Elementos: body, div, img, blockquote IDs: #header, #content, #sidebar Clases: .avatar, .reply Umbral: #BEA61E

Paso 2: encuentra el color objetivo

Busca el primer color que se muestre en el archivo CSS, y luego esa la tabla siguiente para ver el valor hexadecimal de ese color. Dicho valor es el color objetivo que necesitarás después. Si no has encontrado ningún color, usa #7F7F7F.

Color	Valor	Color	Valor	Color	Valor
Blue	#0000FF	Yellow	#FFFF00	Red	#FF0000
Green	#00FF00	White	#FFFFFF	Orange	#FFA500
Purple	#800080	Magenta	#FF00FF	Gray	#808080

Nota: el valor hexadecimal se denota en formato #RRGGBB.
(R para Red/Rojo, G para Green/Verde, B para Blue/Azul)

Paso 3: calcula la puntuación del sitio

Calcula la puntuación del sitio de la siguiente manera:

• Empieza con el número de líneas de código dentro de las {llaves}. Es una buena idea contar los punto y comas porque indican el fin de una línea de código.
• Añade tres puntos más si:
  • El valor R del color objetivo es menor que el valor R del umbral.
  • El valor G del color objetivo es mayor o igual que el valor G del umbral.
  • El valor B del color objetivo es mayor que el valor B del umbral.
• 2 puntos más por cada margin/padding.
• 1 punto más por cada border/border-radius excepto si es 0px o 50%.
• 1 punto menos por cada z-index sin position.
• 1 punto más por cada font-family, excepto si es “Comic Sans MS”, el cual en vez resta 5 puntos.
• 2 puntos más por cada box-shadow/text-shadow excepto si es none.
• Multiplícalo todo por 2 si los botones son de colores, o resta 3 si son grises.
  • Si está activado el modo daltónico, en vez multiplica por 2 si hay botones blancos, y resta 3 si hay botones negros.
• Si la puntuación es negativa o 0, suma 16 hasta que sea positiva.
• Ves sumando los dígitos del número hasta que te quedes con un solo dígito. Luego usa la tabla de abajo para ver qué boton hay que pulsar.

Aceptar (✓)	Considerar (Δ)	Rechazar (✗)
2, 3, 5, 7	6, 8	1, 4, 9