Ciao.
Nella lezione di oggi, parleremo di colori.
Prima di entrare, però, voglio solo ricordarvi che sono
uno scienziato informatico, e l'arte e il design non sono necessariamente il mio background principale.
Anzi, sono piuttosto pessima.
Quindi quello di cui ti parlerò oggi, quando parlo di colori,
è il modo migliore per codificare i colori.
Invece, quando sei davvero alla ricerca di
consigli su quali saranno le migliori combinazioni di colori.
Ti dirigero' in posti diversi online e
ti lascero' usare la tua esperienza per capire cosa va meglio l'uno con l'altra.
Ma iniziamo con il modo in cui usiamo i colori sulla tua pagina web.
Parliamo delle tre diverse convenzioni di colore di base,
le principali che le persone usano.
Convenzioni è solo un'altra parola per suggerimenti.
Non e' una regola.
Non devi seguire le regole che ti daro'.
È solo il modo in cui la maggior parte dei programmatori programma in modo
che possano capire cosa stai cercando di fare, quando guardano il tuo codice.
Un modo in cui si cn aggiungere colore è semplicemente usare la parola inglese.
Blu, rosso, giallo, ecc
Questi funzionano, e verranno visualizzati bene sulla tua pagina.
Il problema è che non è coerente tra le pagine.
Ciò che è giallo per un browser non è esattamente la stessa tonalità
di giallo per un altro browser.
Quindi, in generale, evitiamo i nomi dei colori quando il progetto finale è in arrivo.
Quando stai solo codificando e hackerando via,
vuoi solo far apparire qualcosa sullo schermo.
Nessun problema.
Usa blu o rosso o giallo, ma poi cosa vuoi fare.
E' cambiato quando ho intenzione di parlare di queste altre due convenzioni.
Il primo è chiamato esadecimale.
Esaal potresti riconoscere la parte decimale,
ecco come contiamo da zero a nove.
L' esadecimale significa solo che hanno sedici cifre invece di dieci.
Quindi puoi usare da zero a nove, ma poi anche A, B, C, D, E e F.
E F è un po 'come il numero più forte e più potente che puoi usare.
Quando fai esadecimale, è sempre impostato lo stesso,
dove hai un segno cancelletto seguito da tre o sei cifre.
Gli esempi che ho qui per voi sono sei cifre.
E il modo in cui funziona è che hai un valore rosso, verde e blu, e
più grande è il numero che inserisci lì, più rosso, verde o blu vedrai.
Ecco il mio esempio.
Ho un esempio di blu, rosso, ma
anche giallo perché a seconda di quanti di questi diversi valori si inseriscono,
può cambiare il colore che apparirà sul tuo schermo.
Ora esadecimale è probabilmente il modo più comune di fare i colori quando si
guardano le pagine di molte persone, ma un altro modo che sta arrivando molto è l'RGB.
Ancora una volta, è la stessa idea che abbiamo rosso, verde e blu,
ma invece di usare questo tipo di strani numeri esadecimali, lo zero a F,
invece stai usando numeri tra zero e uno.
Quindi qui ho fatto la stessa cosa, ne ho appena fatto uno, uno, e uno, uno.
Avrei potuto mettere altrettanto facilmente 0.5, 0.8, 0.6, e
questo cambierebbe la forza del colore.
Quindi qui ho rgb (0,0,1).
Uno dei motivi per cui le persone sono passate a rgb è che c'è
un'altra opzione chiamata rgba.
E per il tempo più lungo ho davvero dovuto pensare a cosa significasse e
ciò che rappresenta è la trasparenza alfa.
Quindi hai un quarto valore alla fine che dice, sai una cosa?
Voglio usare questo colore blu, ma voglio farlo vedere un po'.
Quindi, quando viene fuori,
se dovessi effettivamente farlo zero, sarebbe completamente vedere attraverso.
Se dovessi dargli un valore finale di uno,
sembrerebbe proprio come il normale valore rgb.
Ora una delle cose interessanti da notare è che, se stai guardando questo video in questo
momento e c'è qualcuno accanto a te che guarda il video sul loro schermo.
È assolutamente possibile che se guardi oltre, sembri diverso.
Devi ricordare che diversi monitor possono visualizzare i colori in
modi diversi, va bene?
Quindi voglio mostrarti un esempio molto veloce sul web
di come puoi vedere alcuni di questi diversi colori e come stanno funzionando.
Quello che ho portato qui è la mia pagina web del corso e va bene se non riesci a vederlo.
So che e' un po' piccolo.
Quello che voglio mostrarti è che io uso qualcosa chiamato Inspect Element
per guardare davvero la mia pagina, e guardare i colori,
e un modo davvero veloce per me per vedere come posso farlo sembrare diverso.
Quindi ho il mio topo, proprio qui.
Faccio clic con il pulsante destro del mouse e andro' a Ispezionare Element.
Ora, per alcuni di voi, questa parte potrebbe apparire di lato o sotto.
Puoi spostarlo cliccando su questo pulsante qui.
Ma come puoi vedere, metterò in evidenza il mio h1 e andrò qui fino allo span.
E puoi essere come oh, c'è il colore che sto usando.
Ho intenzione di andare avanti e fare clic su questo, e come si può vedere
posso effettivamente in tempo reale, tipo di gioco con cui diversi colori voglio.
Mi piace quello meglio del blu e
puoi vedere che sta cambiando il valore esadecimale per me laggiù.
Quindi, se volessi,
potrei trovare il colore perfetto, questo verde non è il colore perfetto.
Potrei trovare il colore perfetto, afferrare quel valore esadecimale e
inserire nel mio foglio di stile.
Ti danno anche l'opzione del valore RGBA in modo da
poterlo fare in qualsiasi modo tu voglia.
Mi piace usare l'elemento aspettarsi per giocare con i colori perché è
molto più facile quando puoi vedere cosa sta succedendo mentre lo stai progettando.
Se vuoi controllare qualcos'altro posso anche andare quaggiù, ogni cosa che
evidenzi puoi aggiungere colori, fare cose diverse lungo la stessa linea.
Quindi non lo suggerirei, ma aggiungerò un colore di sfondo.
E come potete vedere, hanno i nomi veri.
Perché è molto improbabile che se dovessi scorrere i diversi
valori esadecimali hai idea di cosa stia parlando.
E invece di usare effettivamente la parola beige, ancora una volta posso fare clic su quella casella.
Apparirà il valore esadecimale per me.
Quindi questo è dove può diventare davvero divertente e davvero male,
perché si può iniziare a cadere in questa tana del coniglio.
E tu sei tipo, oh mi piace questo colore.
No, questo colore e' meglio.
Stai iniziando, stai iniziando, scegli un colore, gioca con esso e
continua ad andare con esso.
Ma torniamo indietro.
Una delle cose che accade quando le persone usano il colore è che c'è questa
tendenza davvero naturale a voler usare il colore per enfatizzare qualcosa, o
spiegare quanto sia importante qualcosa.
Potresti aver visto quando hai compilato i moduli che dice
assicurarsi di compilare tutto ciò che è in rosso.
Beh, questo può essere un vero problema quando si tratta di accessibilità.
E voglio che tu ti assicuri che stai cercando di pensare al
modo più appropriato per usare il tuo colore quando stai progettando la tua pagina.
E una delle cose a cui devi pensare è che non è sufficiente pensare,
oh qualcuno può usare lo screen reader.
Userò i tag HTML per assicurarmi davvero
che possano raccogliere la semantica dalla pagina.
No, ci sono molte persone che riesaminano il tuo sito che non sono legalmente cieche.
Invece, sono ipovedenti o sono solo ciechi.
Sono, molte piu' persone sono daltonici di quanto tu possa mai avere.
Quindi vuoi assicurarti che quando stai usando la tua pagina,
stai pensando se i colori trasmettono significato o semplicemente stile.
Quindi pensa al tuo contrasto di colore e quale contrasto di colore è che
quando guardi una pagina è il testo su un buon colore per lo sfondo?
La maggior parte di noi sa intuitivamente quando qualcosa ha un contrasto di colore davvero scadente.
Ci stiamo strizzando gli occhi.
Ma ad essere onesti,
pochissimi di noi sanno qual è il livello esatto di dove devi andare.
Quindi quello che puoi fare è usare diversi strumenti
per quantificare il contrasto tra il testo e il suo colore di sfondo.
Ho messo due link qui.
Onda.waveaim.org e il controllo contrasto onda.
E ti mostrerò solo un rapido esempio di come puoi usarli
per controllare una pagina.
Quindi vado qui, e ho l'onda. webbing.org.
E si può andare avanti e si può digitare qualsiasi URL che si desidera proprio qui.
Andrò avanti e inserirò la mia pagina web personale da UMISH,
che potrebbe cambiare nel momento in cui questo viene fuori.
E, come puoi vedere, puoi andare qui e controllerà i tuoi stili,
controllerà il tuo diverso HTML.
Ma se controlli dove si trova il mio mouse, puoi anche controllare il contrasto.
E entrera' e dira', no, questo sembra buono.
Non sono stati rilevati problemi di contrasto del colore.
Sarai sorpreso di quanto, però, otterrai esempi.
Possono essere estremamente esigenti e se è davvero qualcosa che si sente fortemente
che si può vedere, assolutamente, attenersi con esso.
Ma vuoi prendere i loro suggerimenti con un granello di sale.
L' unica cosa di cui volevo davvero parlarti di nuovo,
è solo l'idea di non usare il colore da solo per trasmettere un significato.
Questo è un tipico tipo di grafico a barre per le persone a usare i colori per dire, hey questo è
quanto condividere è Apple iPhone, il Pre Palm, cose diverse lungo quella linea.
Quindi diamo un'occhiata a quello stesso grafico ma in scala di grigi.
E improvvisamente si può vedere che è praticamente inutile per chiunque stia davvero cercando di
scegliere queste parti nel mezzo dove i colori sono estremamente simili.
Invece, se hai intenzione di usare un grafico come questo,
non sto dicendo che non puoi, sto dicendo assicurati di fornire alternative.
Assicurati di avere un testo alternativo o di avere una didascalia o un
altro luogo in cui le persone possono collegarsi per ottenere queste informazioni.
Ok, so che non ho parlato molto dei diversi colori che puoi
usare, o dei diversi colori che vanno insieme, di nuovo,
perche' non e' una cosa di cui ho bisogno di farti la predica.
È qualcosa che puoi andare da solo e imparare.
Quello che volevo che tu capissi e' come funzionano quelle diverse convenzioni di colore.
Come sai che puoi usare esadecimale o RGB, RGBA, o
anche le parole stesse, ma vuoi tipo di allontanarti da questo.
Alla fine, quando hai finito,
quando hai i tuoi colori andando, non ti affezionare troppo a loro.
Perché sarai sorpreso da quanto spesso,
quando controlli il tuo sito usando un controllo di contrasto, che ciò che pensavi sia
davvero fantastico non è qualcosa che è accessibile a tutti.
Quindi divertiti con i colori.
Usa elemento ispeziona.
Tutti amano giocare con questi diversi elementi di design della tua pagina.
E spero che tu abbia imparato qualcosa qui che è utile mentre continui a
programmare e continui a disegnare il tuo sito.