I colori del web e del mondo

La scelta dei colori da utilizzarsi nello sviluppo di un qualsiasi progetto è sempre un’operazione estremamente critica. In questa mini guida indico alcuni elementi che possono agevolare un giusto approccio alla problematica in questione. Ciò vale sia in un contesto specifico come quello relativo ad un progetto web sia più in generale in relazione ad un qualsiasi ambito produttivo.

In linea generale, con particolare riferimento al linguaggio HTML e quindi per lo sviluppo di pagine web, il valore di un colore può essere espresso sia attraverso un numero esadecimale che tramite uno dei seguenti sedici nomi di colori:

 

Black = “#000000” Green = “#008000”
Silver = “#C0C0C0” Lime = “#00FF00”
Gray = “#808080” Olive = “#808000”
White = “#FFFFFF” Yellow = “#FFFF00”
Maroon = “#800000” Navy = “#000080”
Red = “#FF0000” Blue = “#0000FF”
Purple = “#800080” Teal = “#008080”
Fuchsia = “#FF00FF” Aqua = “#00FFFF”

Il valore esadecimale deve essere preceduto dal simbolo # e si parla in questo caso di codifica RGB, dalle iniziali dei colori in lingua inglese:  Red, Green, Blue. Così, come facilmente osservabile dalla tabella in oggetto, il valore #FFFF00 e Yellow si riferiscono entrambi al giallo.

Il codice RGB  prevede la composizione di un unico colore attraverso le tre componenti fondamentali di rosso (Red), verde (Green) e blu (Blue) utilizzando un numero esadecimale a due cifre (da 00 a FF). Tale sistema è noto con modello additivo in quanto si passa dall’assenza di colore (il nero) alla massima espressione del colore (il bianco) aggiungendo man mano gradazioni di colore. Basta un attimo di riflessione per collegare questo sistema a quanto avviene con i classici sistemi di visualizzazione elettronici in cui si parte effettivamente dal nero, come elemento iniziale dello schermo di visualizzazione, nel momento in cui esso risulta spento.

Ogni colore in esadecimale è così espresso nella forma:

 

#RRGGBB

 

dove RR, GG, BB rappresentano rispettivamente le due cifre esadecimali per le componenti rosso, verde e blu. Si ha così che il codice #000000, avendo tutte le componenti a zero, indica il nero,mentre #FFFFFF, con tutte le componenti al valore massimo FF rappresenta il bianco, #FF0000 con la sola componente rossa al massimo rappresenta il rosso, e così via miscelando tra loro le varie componenti. Con tale sistema è possibile creare oltre 16 milioni di differenti combinazioni di colore.

Un diverso approccio alla gestione dei colori prevede un modello sottrattivo per cui si passa dalla massima presenza di colore, ovvero il bianco, all’assenza totale di colore, ovvero il nero. Il nome, sottrattivo, deriva appunto dall’aspetto per il quale si sottrae luminosità allo stato iniziale man mano che si aggiungono componenti di colore. Anche in questo caso è estremamente intuitivo collegare questo tipo di sistema ad una tecnologia di rappresentazione visiva riconoscendo tale approccio applicato normalmente alla stampa. Infatti, di norma, in fase di stampa partiamo dal foglio bianco per arrivare, come massima combinazione di colori al nero. I colori utilizzati in questo schema sono normalmente il ciano, il giallo e il magenta, in inglese, Cyan, Magenta, Yellow, da cui il nome dello schema CYM. Per produrre il nero si applicano al massimo le componenti dei tre colori citati. Tuttavia, il colore nero ottenuto non è sempre soddisfacente per cui a tali colori si aggiunge una quarta componente di nero puro ottenendo un sistema noto come CYMK.

Ovviamente, non è sufficiente conoscere i modelli ed i codici dei colori per produrre una composizione degli stessi che sia gradevole all’occhio e consistente per lo specifico progetto. In tale ambito, ci vengono in aiuto alcuni specifici strumenti che ci consentono di realizzare una scelta oculata grazie alla guida di una serie di vincoli che legano tra loro i colori. Infatti, la teoria dei colori è più complessa di quanto si possa immaginare. Per avere un’idea di tali strumenti e della complessità della scelta è possibile fare riferimento ai seguenti due strumenti web:

http://paletton.com/

https://color.adobe.com/

Si vedrà come risulta maggiormente agevole la scelta di determinate combinazioni in quanto guidati, ad esempio,  in modo automatico dal legame che esiste tra i colori cosiddetti primari  (così denominati in quanto essi non possono essere ottenuti dalla mescolanza di altri colori) ed i colori secondari che appunto si ottengono dalla combinazione di colori primari. Per agevolare tali operazioni i colori vengono disposti di norma su di una sorta di rosa dei colori (ache detta scala cromatica dei colori )in cui i colori si collocano per vicinanza cromatica. In tal modo, determinate coppie di colori possono essere scelte in base alla vicinanza oppure in base al fatto che si trovino ad essere in un certo senso completamente diversi tra loro. Tali colori collocati sulla rosa dei colori in posizione opposta vengono definiti colori complementari.

Per finire questo breve viaggio nel mondo dei colori vi segnalo un interessante post di Jesse Miller che potete trovare all’indirizzo:

https://www.jenreviews.com/color-meaning/

Il post ha come titolo “Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean” ovvero il significato dei colori con un particolare accento rivolto all’ambito del simbolismo e del condizionamento psicologico che i colori realizzano su di noi. Un viaggio davvero interessante che vale la pena di fare a costo di un eventuale piccolo sforzo di traduzione dall’originale inglese.

 

Carlo A. Mazzone

Supportaci condividendo sui social il nostro articolo!

Il successo di un tipo di dati: il casting delle variabili in C

di Carlo A. Mazzone

Il nome dell’articolo potrebbe suggerire un qualcosa collegato al mondo dello spettacolo: niente di più lontano dalla verità. Il casting, nel contesto informatico, non ha assolutamente a che fare con la selezione di un certo sviluppatore come attore in un qualche film ma piuttosto con l’attribuzione del tipo di dati più adatto ad una data variabile per una determinata circostanza implementativa.

Inizio con una semplice constatazione: talvolta il risultato di certe operazioni tra tipi di dati può dare risultati del tutto inaspettati. Ma andiamo con ordine ponendoci questa domanda: cosa accade quando assegno ad una variabile il valore di un’altra variabile appartenente ad un tipo di dati diverso?

Mi spiego meglio; quando scrivo qualcosa del tipo:

x=y;

se x ed y sono dello stesso tipo, semplicemente il valore di y viene copiato in x. Tuttavia, se x è ad esempio di tipo intero ed y di tipo float inevitabilmente la parte frazionaria di y verrà persa nell’assegnazione del valore ad x, al limite con un avvertimento (warning) da parte del compilatore.

Ad esempio, il seguente codice:

int main(int argc, char *argv[])

{

int x;

float y=5.5;

x=y;

printf(“Il valore di x e’: %d\n”, x );

printf(“Il valore di y e’: %.2f\n”, y );

return 0;

}

produrrà come output:

Il valore di x e’: 5

Il valore di y e’: 5.50

In generale, infatti, le uniche conversioni che non generano problemi sono quelle che consentono di ampliare la dimensione di una variabile. Ad esempio, nessun problema, ovviamente, nel caso contrario quello appena visto in cui assegniamo un intero ad una variabile float ottenendo come risultato che la variabile float avrà come parte intera il valore intero del numero assegnato e come parte frazionaria il valore zero.

Il valore di x e’: 6

Il valore di y e’: 6.00

Questi tipi di conversione vengono detti conversioni implicite in quanto realizzate automaticamente dal compilatore. In altri casi, però, è necessario “forzare” un tipo di variabile ad essere diversa da quella che risulterebbe in maniera naturale: si parla allora di conversione esplicita. Tali conversioni vengono definite in modo gergale cast oppure casting, ed usando a volte espressioni come “castare una variabile”.

Vi propongo allora una situazione tipica:

int main(int argc, char *argv[])

{

int x=7, y=2;

float d;

d=x/2;

printf(“Il valore di d e’: %.2f\n”, d );

return 0;

}

poiché d è stata dichiarata come float ci si aspetterebbe come risultato il valore 3,5. Sbagliato! L’operazione di divisione tra due interi viene appunto intesa come un fatto “privato” tra interi che da come risultato un valore intero, nel nostro caso il valore 3, che solo successivamente viene assegnato alla variabile con la virgola d. Tale problema è comunissimo e si verifica ad esempio nel caso in cui si deve calcolare la media di un dato numero di elementi interi per il quali, nonostante si prevede una variabile di tipo float si otterrà comunque un numero intero. Per risolvere la situazione si usa allora il casting di cui vi dicevo con la seguente sintassi:

(tipo_dati) espressione

Ad esempio, nel nostro caso sarà sufficiente scrivere:

d=(float)x/2;

per ottenere in stampa il valore desiderato ed atteso di 3,5.

Supportaci condividendo sui social il nostro articolo!

CodeBlocks: installazione sotto Ubuntu

Code::Blocks è un ottimo IDE gratuito per scrivere applicazioni in C e C++. Esso è disponibile sia per Windows che per Linux. Tale caratteristica lo può far preferire in alcuni contesti rispetto a soluzioni come quelle offerte dall’ambiente Microsoft Visual C++ anch’esso gratuito nella versione Express .

L’installazione sotto Windows è estremamente semplice e non richiede nessun chiarimento particolare. In questo brevissimo tutorial vi propongo l’installazione dell’ambiente in questione sotto la distribuzione Linux Ubuntu.

Per prima cosa è necessario scaricare dal sito http://www.codeblocks.org/ la versione desiderata (32 o 64 bit). Da notare come siano disponibili pacchetti anche per le distribuzioni Debia, Fedora e Suse.

Il file scaricato è un archivio compresso (tar.gz). E’ quindi necessario decomprimerlo. A tal fine è possibile utilizzare il tasto destro del mouse sul file in questione e scegliere la voce “Estrai qui”. Verrà creata una cartella contenente i vari file necessari con estensione .deb

Un corretto ordine di installazione potrebbe essere il seguente:

libcodeblocks0_8.02-0ubuntu1_i386.deb
libwxsmithlib0_8.02-0ubuntu1_i386.deb
libwxsmithlib0-dev_8.02-0ubuntu1_i386.deb

e successivamente gli altri pacchetti. Questo a causa del fatto che alcuni pacchetti ne richiedono altri per l’installazione.

Per l’installazione dei singoli file/pacchetto è possibile fare doppio click sui singoli file nell’interfaccia grafica oppure usare (via terminale) il comando:

sudo apt-get install nomepacchetto

dove nomepacchetto è il nome dei vari file da installare.

A questo punto dovrebbe essere possibile lanciare l’ambiente CodeBlocks dal menu principale (voce Applicazioni -> Programmazione).

Provate a compilare una semplice applicazione di tipo console con il classico “Hello world!”.

Nel caso dovesse manifestarsi, con la prima compilazione, l’errore:

Linking console executable: bin/Debug/test1

/bin/sh: g++: not found

usate da terminale il comando:

sudo apt-get install g++

Buona programmazione a tutti.

Carlo Mazzone

Supportaci condividendo sui social il nostro articolo!

Lorem ipsum e creazione di pagine web

Spesso in una pagina web, quando siamo alle prese con la disposizione dei contenuti, abbiamo bisogno di un insieme di testi di prova. E’ stato dimostrato che inserire in una data pagina contenuti testuali comprensibili distrae colui che li guarda; questi, infatti, viene incuriosito dai contenuti e perde di vista il “contenitore”. Ciò che si vuole ottenere durante la fase di creazione di un dato stile di pagina, al contrario, è di far concentrare l’osservatore sugli aspetti grafici ed organizzativi (colore del testo, disposizione ed allineamento dei paragrafi, ecc. ) .

In tutti questi casi si utilizza il cosiddetto “Lorem ipsum”. Si tratta di un insieme di parole della lingua latina utilizzate già a partire dal 1500 per prove di stampa. Più precisamente le parole sono estrapolate da un testo di Cicerone del 45 a.c.

Di seguito vi riporto una parte del brano originale dell’opera in cui sono evidenziate, in grassetto, le parole estrapolate.

 

«Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga…. »

Considerando solo le parole in grassetto si ottiene quanto segue:

«Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»

Il tutto è evidentemente incomprensibile anche per un latinista ; )

E’ da sottolineare comunque il fatto che trattandosi di un testo pseudocasuale ne esistono diverse versioni. In giro per la rete si trovano diversi servizi web (ed anche software) per generare il testo in questione: giusto per segnalarne uno vi riporto il sito www.lipsum.com .

Per maggior chiarezza vi riporto l’esempio reale di una pagina che utilizza il Lorem ipsum per mostrare la propria tipologia di impaginazione.

Carlo Mazzone

Supportaci condividendo sui social il nostro articolo!