Hola. En la conferencia de hoy, vamos a estar hablando de colores. Sin embargo, antes de entrar realmente, sólo quiero recordarles que soy un científico de computación, y el arte y el diseño no son necesariamente mis antecedentes fundamentales. De hecho, soy bastante malo en eso. Así que de lo que voy a hablarte hoy cuando hablo de colores es la mejor manera de codificar colores. En cambio, cuando realmente estás buscando consejos sobre cuáles serán los mejores esquemas de color. Te voy a dirigir a diferentes lugares en línea y te dejaré usar tu propia experiencia para averiguar qué es lo que va mejor entre sí. Pero vamos a empezar con la forma en que usamos los colores en su página web. Hablamos de las tres convenciones básicas de color diferentes, las principales que usan las personas. Convenciones es sólo una palabra más para sugerencias. No es una regla. No tienes que seguir las reglas que te voy a dar. Es la forma en que la mayoría de los programadores programan para que puedan entender lo que estás tratando de hacer, cuando miran tu código. Una forma en que cn añadir color es simplemente usar la palabra en inglés. Azul, rojo, amarillo, etc. Estos funcionan, y aparecerán bien en tu página. El problema es que no es consistente en todas las páginas. Lo que es amarillo para un navegador no es exactamente el mismo tono de amarillo que otro navegador. Por lo tanto, en general, evitamos los nombres de color cuando su proyecto final está llegando. Cuando solo estás codificando y hackeando, solo quieres que aparezca algo en la pantalla. No hay problema. Usa azul o rojo o amarillo pero luego lo que vas a querer hacer. Cambió cuando estas otras dos convenciones de las que voy a hablar. El primero se llama hexadecimal. Es posible que reconozca la parte decimal, así es como contamos de cero a nueve. Hexa solo significa que tienen dieciséis dígitos en lugar de diez. Así que puedes usar de cero a nueve, pero también A, B, C, D, E, y F es como el número más fuerte y poderoso que puedes usar. Cuando haces hexadecimal, siempre se configura de la misma manera, donde tienes un signo de libra seguido de tres o seis dígitos. Los ejemplos que tengo aquí para ustedes son seis dígitos. Y la forma en que funciona es que tienes un valor rojo, verde y azul, y cuanto mayor sea el número que pones allí, más rojo, verde o azul verás. Así que aquí está mi ejemplo. Tengo un ejemplo de azul, rojo, pero también amarillo porque dependiendo de la cantidad de estos valores diferentes que ponga, puede cambiar el color que va a aparecer en su pantalla. Ahora hexadecimal es probablemente la forma más común de hacer colores cuando miras las páginas de muchas personas, pero otra forma que viene mucho es el RGB. De nuevo, es la misma idea que tenemos rojo, verde y azul, pero en lugar de usar este tipo de números hexadecimales extraños, el cero a F, en lugar de usar números entre cero y uno. Así que aquí he hecho lo mismo, acabo de hacer uno, uno y uno, uno. Podría haber puesto igual de fácilmente 0.5, 0.8, 0.6, y eso cambiaría la fuerza del color. Así que aquí tengo rgb (0,0,1). Una de las razones por las que la gente ha estado cambiando a rgb es que hay otra opción llamada rgba. Y durante mucho tiempo realmente tuve que pensar en lo que eso significa y lo que significa es transparencia alfa. Así que tienes un cuarto valor al final que dice, ¿sabes qué? Quiero usar este color azul, pero quiero hacer que se vea un poco. Así que cuando surja, si realmente fuera a cero sería completamente ver a través. Si le diera un valor final de uno, se vería igual al valor rgb regular. Ahora una de las cosas interesantes a tener en cuenta es que, si estás viendo este video en este momento y hay alguien a tu lado viendo el video en su pantalla. Es absolutamente posible que si miras, se vea diferente. Debe recordar que diferentes monitores pueden mostrar colores de diferentes maneras, ¿de acuerdo? Así que quiero mostrarte un ejemplo muy rápido en la web de cómo puedes ver algunos de estos diferentes colores y cómo funcionan. Lo que he traído aquí es mi página web del curso y está bien si no puedes verlo. Sé que es pequeño. Lo que quiero mostrarte es que estoy usando algo llamado Inspect Element para mirar realmente mi página, y mirar los colores, y una manera muy rápida de ver cómo puedo hacer que se vea diferente. Así que tengo mi ratón, justo aquí. Voy a hacer clic derecho, y voy a ir a Inspeccionar Elemento. Ahora, para algunos de ustedes, esta parte puede estallar hacia un lado o por debajo. Puedes moverlo haciendo clic en este botón aquí. Pero como pueden ver voy a resaltar mi h1 y bajar aquí hasta el lapso. Y puedes ser como oh, ahí está el color que estoy usando. Voy a seguir adelante y hacer clic en esto, y como pueden ver en realidad puedo en tiempo real, tipo de juego con el que diferentes colores quiero. Me gusta ese mejor que el azul y puedes ver que está cambiando el valor hexadecimal para mí allí abajo. Así que si quisiera, podría encontrar el color perfecto, este verde no es el color perfecto. Podría encontrar el color perfecto, tomar ese valor hexadecimal y ponerlo en mi hoja de estilo. También le dan la opción del valor RGBA para que pueda hacerlo de la manera que desee. Me encanta usar el elemento de espera para jugar con los colores porque es mucho más fácil cuando puedes ver lo que está sucediendo mientras lo estás diseñando. Si quieres verificar algo más, incluso puedo ir aquí abajo, cada cosa a medida que resaltes puedes agregar colores, hacer cosas diferentes a lo largo de la misma línea. Así que no sugeriría esto, pero voy a agregar un color de fondo. Y como pueden ver, tienen los nombres reales. Porque es muy poco probable que si fueras a desplazarte a través de los diferentes valores hexadecimales, tengas idea de lo que está hablando. Y en lugar de usar realmente la palabra beige, una vez más puedo hacer clic en esa casilla. Aparecerá el valor hexadecimal para mí. Así que aquí es donde puede ser muy divertido y muy malo, porque puedes empezar a caer por este agujero de conejo. Y tú estás como, oh, me gusta este color. No, este color es mejor. Estás empezando, estás empezando, solo elige un color, juega con él, y sigue con él. Pero volvamos. Una de las cosas que sucede cuando la gente usa el color es que existe una tendencia realmente natural a querer usar el color para enfatizar algo, o explicar lo importante que es algo. Es posible que hayas visto cuando rellenaste formularios que dice asegúrate de rellenar todo lo que está en rojo. Bueno, esto puede ser un problema real cuando se trata de accesibilidad. Y quiero que te asegures de que estás tratando de pensar en la forma más apropiada de usar tu color al diseñar tu página. Y una de las cosas que necesitas pensar es que no es suficiente pensar, oh alguien puede usar el lector de pantalla. Voy a usar etiquetas HTML para asegurarme de que puedan recoger la semántica de la página. No, hay mucha gente que está revisando tu sitio que no es legalmente ciego. En cambio, tienen discapacidad visual o simplemente son ciegos de color. Son, muchas más personas son de color ciego de lo que nunca conseguirías. Así que quieres asegurarte de que cuando estés usando tu página, estás pensando si los colores transmiten significado o simplemente estilo. Así que piense en su contraste de color y qué contraste de color es que cuando miras una página es el texto en un buen color para el fondo? La mayoría de nosotros intuitivamente sabemos cuando algo tiene un contraste de color realmente pobre. Estamos entrecerrando los ojos. Pero para ser honesto, muy pocos de nosotros sabemos cuál es el nivel realmente exacto de adónde tienes que ir. Así que lo que puede hacer es utilizar diferentes herramientas para ayudarle a cuantificar el contraste entre el texto y su color de fondo. He puesto dos enlaces aquí. El wave.waveaim.org y el comprobador de contraste Wave. Y te voy a mostrar un ejemplo rápido de cómo puedes usar estos para revisar una página. Así que voy aquí, y tengo el wave.webbing.org. Y puedes seguir adelante y puedes escribir cualquier URL que quieras aquí. Voy a seguir adelante y poner en mi propia página web personal de UMISH, que puede cambiar para el momento en que esto aparezca. Y, como puedes ver, puedes ir aquí y comprobará tus estilos, verificará tu HTML diferente. Pero si comprueba dónde está mi ratón, también puede verificar el contraste. Y entrará y dirá, no, esto se ve bien. No se detectaron problemas de contraste de color. Te sorprenderá cuánto, sin embargo, obtendrás ejemplos. Pueden ser extremadamente exigentes y si realmente es algo que sientes fuertemente que puedes ver, absolutamente, quédate con él. Pero quieres tomar sus sugerencias con un grano de sal. La única cosa de la que realmente quería hablar contigo de nuevo, es sólo esta idea de no usar el color solo para transmitir significado. Este es un tipo típico de gráfico de barras para que la gente use colores para decir, hey esta es la cantidad de compartir es Apple iPhone, el Pre Palm, diferentes cosas a lo largo de esa línea. Así que veamos ese mismo gráfico pero en escala de grises. Y de repente se puede ver que es casi inútil para cualquiera que realmente está tratando de elegir estas partes en el medio donde los colores son extremadamente similares. En cambio, si vas a usar un gráfico como este, no estoy diciendo que no puedas, estoy diciendo que asegúrate de proporcionar alternativas. Asegúrate de que tienes texto alternativo o que tienes un título o algún otro lugar donde la gente pueda enlazar para obtener esta información. Está bien, así que sé que no hablé mucho sobre los diferentes colores que puedes usar, o los diferentes colores que van juntos, de nuevo, porque eso no es algo de lo que necesito sermonearte. Es algo que puedes ir por tu cuenta y aprender. Lo que sí quería que entendieras es cómo funcionan esas diferentes convenciones de color. Cómo sabes que puedes usar hexadecimal o RGB, RGBA, o incluso las propias palabras, pero quieres alejarte de eso. Finalmente, cuando termines, cuando tengas tus colores en marcha, no te apeges demasiado a ellos. Porque te sorprenderá la frecuencia con la que, cuando revises tu sitio usando un corrector de contraste, que lo que pensabas que se ve muy bien realmente no es algo accesible para todo el mundo. Así que diviértete con los colores. Utilice el elemento inspeccionar. A todo el mundo le encanta jugar con estos diferentes elementos de diseño de su página. Y espero que hayas aprendido algo aquí que sea útil mientras continúas programando y sigues diseñando tu sitio.