RankLab Studio – SEO – Web Design

Color Jack è un sito che propone uno studio dei colori tramite l’utilizzo di Canvas e JavaScript.

Attraverso degli applicativi semplici e intuitivi permette di creare e visualizzare in tempo reale cromie di vario tipo, dai colori pastello a quelli Web Safe, ovvero sfruttando dei colori visibili allo stesso modo anche su vecchi PC con scheda grafica capace di mostrare non più di 256 colori.

Sebbene questo studio sia il risultato di qualche funzione JavaScript, attraverso l’ultimo applicativo presentato, chiamato sfera, sono riuscito a creare accostamenti a mio avviso interessanti per una base cromatica adatta a un sito professionale.

Se devo essere sincero, però, non sono convinto che questo tool sia effettivamente utile e vi spiego subito perchè:

• I colori sono quelli mostrati dal mio schermo che ha le sue caratteristiche, è possibile che in un altro tipo di monitor questi risultino troppo simili tra loro o completamente diversi dalle mie aspettative
• La mancata possibilità di cambiare il colore di sfondo, attualmente nero, potrebbe impedire una corretta valutazione di tinte apparentemente troppo accese magari più che delicate su uno sfondo bianco.

Pensando quindi alla realizzazione di siti web accessibili quindi anche a ipovedenti o a veri e propri daltonici mi chiedo se sia possibile utilizzare applicativi di questo tipo per scegliere colori adatti a tutti o modificarli al fine di ottenere solo contrasti oggettivamente validi per il W3C.
Autore: Stefano Martini
Technorati tags: colori, cromia, standard W3C, siti web accessibili

Queste poche, ma fondamentali regole vi aiuteranno a iniziare meglio la progettazione del vostro sito web. Sono solo alcuni consigli da chi lavora nel settore del web da oltre 10 anni.

Nulla a che vedere con il concetto con cui si realizzavano siti web negli anni ’80 e ’90.

1. No al contatore utenti: il contatore non ha nessuno scopo a meno quello di far apparire il tuo sito come quello di un amatore, anche se con i tuoi lavori vuoi dare ai visitatori delle informazioni sul tuo sito, probabilmente non è il caso di far sapere anche questa informazione (specialmente se il sito non è molto visitato).Se proprio vuoi sapere quante persone hanno visitato il tuo sito, chiedi al tuo host di attivare le funzionalità per creare le statistiche. I dettagli disponibili rendono le funzionalità del semplice contatore decisamente antiquate e ridotte.

2. Dimentica i testi lampeggianti o in movimento: l’unico posto in cui i testi lampeggianti risultano adatti è sulle insegne di bar o nei siti internet realizzati nella metà degli anni 90. Non sono comunque particolarmente attraenti e le persone non si aspettano molto da siti con questa caratteristica.
Riguardo alla discussione fra la realizzazione di contenuti online e la versione stampabile, tenete bene a mente che la velocità di lettura di un testo a schermo è di ¼ rispetto alla velocità su carta. Questo dimostra che nel web, dobbiamo dire quello che vogliamo in modo chiaro e semplice.

3. Inserisci intestazioni con un criterio: uno degli elementi fondamentali della pagina web è l’intestazione. All’interno del marcatore TITLE è necessario specificare il titolo della pagina che appare nel titolo della pagina e fra i risultati dei motori di ricerca.

I visitatori fanno attenzione ai titoli della pagina, quindi fai attenzione al fatto che siano chiari… se realizzi una pagina su come prendersi cura dei cani ed il tuo si chiama ‘birillo’; non chiamare la tua pagina “birillo ed i suoi simpatici amici” ma dovresti chiamare la tua pagina con un titolo del tipo “Come prendersi cura dei cani”

4. Non forzare le persone a scaricare l’ultimo versione del browser o plugin particolari per vedere il tuo sito: a meno che tu abbia un sito bello da far paura, non ha senso ridurre il numero di contatti a causa di funzioni particolari del browser o per l’uso di animazioni in Flash.

Attualmente, con l’uso appropriato dei CSS e dell’XHTML puoi realizzare una serie di pagine dall’aspetto accattivante senza dover effettuare modifiche sostanziali alla struttura se browser obsoleti come Netscape 4 sono utilizzati da un discreti numero di utenti.

5. Pensaci due volte prima di usare i frame: nei vecchi tempi era utile ricorrere ai frame anche a causa della ridotta capacità dell’HTML di realizzare layout efficaci. Ora con la tecnica del posizionamento CSS supportata correttamente dai maggiori browsers non è necessario usare i frame per il 99% dei siti.

Chi realizza un sito web per la prima volta ha comunque problemi a realizzarlo correttamente e tende a rendere il sito più complesso del necessario, creando infine una serie di problemi per l’indicizzazione della pagina attraverso i motori di ricerca.

6. No ai trucchetti per giocare i motori di ricerca: nel passato sono stati sviluppati una serie di metodi discutibili al fine di acquisire un rank (posizionamento) elevato con i motori di ricerca. Fra le tecniche utilizzate c’era quella di inserire centinaia di parole chiave con il testo invisibile (stesso colore di sfondo, con posizionamento negativo o con determinati tag HIDDEN nel foglio di stile.

Queste tecniche hanno avuto un successo limitato nel passato ma ora non sono più valide. Cercare di giocare Google (il re dei motori di ricerca) significa portare il tuo sito verso una fine orribile! Non possiamo spiegare, in questo articolo come ottenere un posizionamento elevato, ma tieni a mente questo concetto: un buon contenuto presentato in modo onesto, è alla base di un elevato rank ed un traffico elevato sul tuo sito.

7. Chat rooms: molti visitatori non danno credito alle chat rooms. E la cosa peggiore di una chat room è avere una chat room vuota! Chi ha voglia di entrare in un club in cui non c’è nessuno? Se non hai un sito con decine di migliaia di visitatori al mese, anche se uno degli argomenti trattati necessita la realizzazione di una chat room, lascia perdere.

8. Introduzioni Flash: sono colpevole come la maggior parte dei web designer perchè anche io ne facevo un uso pesante fino a qualche anno fa. Fino a pochi anni fa, le introduzioni in Flash erano dappertutto, anche se non sono sicuro se qualcuno sapeva perchè era necessario realizzarle, ma il collegamento ‘skip intro’ è il secondo pulsante più cliccato nei siti oggi!

Non perdete tempo con la realizzazione di introduzioni Flash e a mio modesto avviso Flash dovrebbe essere utilizzato solo in occasioni speciali dove si vuole dare un tocco di animazione e interattività per colpire l’utente in una zona particolare del sito e comunicare un messaggio emotivo.

9. Pagine in costruzione: non scordare che se la pagina non è completa, non metteterla online. Se esiste un link che porta a quella pagina, togli il collegamento fino a quando la pagina non è pronta. Se la tua pagina è quasi pronta per farlo notare ai tuoi visitatori, segnala una data con gli ultimi aggiornamenti e inserisci al più presto i contenuti mancanti. Soprattutto non inserire una di quelle stupide immagini ‘under construction’ con lo scavatore o l’omino che scava….ma che scava nella ricerca del tuo sito?

10. Non utilizzare uno sfondo musicale sulle tue pagine web! Ad alcuni che realizzano siti web piace l’idea di un piccolo sottofondo musicale per dare un maggiore carattere alla pagina. Se si tratta dei siti di MTV o della Disney, questa scelta è ottimale. Ma nella maggioranza dei casi non è una buona idea per due buone ragioni:

1. I file sonori sono tipicamente ‘pesanti’, e richiedono un elevato tempo di scaricamento.
2. Alcuni computer non hanno le casse attive, così costringi queste persone a scaricare materiale che non utilizzano.

Se proprio intendi inserire una colonna sonora nel tuo sito, utilizza almeno con l’opzione di poterla accendere o spegnere. In questo caso ti consigliamo di realizzare una struttura in Flash, la maggioranza dei browser hanno il plug-in di Flash e Flash supporta i file compatti mp3.

Naturalmente, se desideri dare agli utenti la possibilità di ascoltare musica, come l’ultima registrazione della tua band o la registrazione di un’intervista, la soluzione migliore è creare una versione podcast del file mp3 da scaricare in streaming o leggere con un lettore gratuito.

11. Tieniti sempre aggiornato sulle ultime tecniche in termine di codice e script ma non esagerare e riversarle tutte nello stesso sito, sopratutto se non lo richiede. Servizi come i feed RSS, il podcast o la gestione di immagini con tecnologia ajax (ligthbox, thickbox, ecc…) sono tutte tecniche molto attraenti del nuovo web, ma sono da utilizzarsi con parsimona per non farle inflazionare.
Autore: Stefano Martini

Technorati tag: siti web, flash, css, xhtml, web design, google, mp3, frame

I colori sono la sostanza del mondo che ci circonda da sempre ed è proprio attraverso la loro presenza che in noi scaturiscono e vengono evocate miriadi di sensazioni, emozioni, ricordi.

Anche nel mondo di Internet inconsciamente riportiamo le stesse emozioni e la scelta dei colori nella realizzazione grafica dei siti web e la sua localizzazione hanno un rapporto estremamente correlato in funzione degli usi e costumi della posizione geografica in cui il sito deve operare.
Navigando su Internet, vedo spesso che per molte persone, i colori e il loro significato sono qualcosa da non prendere in forte considerazione. D’altronde, anche nella vita quotidiana quando andiamo ad usare e scegliere dei colori, a volte facciamo errori di valutazione…perchè non conosciamo bene il significato dei colori.
Il modo di percepire i colori è un fenomeno conosciuto dalla scienza. Ci sono delle particelle recettive nella retina del nostro occhio che permettono di tradurre la differente frequenza della luce che la colpisce (luce che a sua volta si è riflessa e/o rifranta sulle superfici degli oggetti).

Gli stimoli che poi vengono comunicati al cervello e che vengono convertiti nei colori che conosciamo.

I colori ‘hue’ sono quelli rappresentati nella loro forma pura. I colori ‘shade’ sono i colori a cui è stato aggiunto un tocco di ombra, come se la luce fosse stata in parte coperta o come se gli fosse aggiunto un tocco di nero. Al contrario quelli ‘tint’ sono i colori a cui è stato aggiunta una percentuale variabile di bianco.

Inoltre bisogna tenere conto che il nostro occhio è molto sensibile al colore verde in condizioni notturne.

I colori comunicativi sul Web

Quello che è di maggiore interesse quando si progetta di un sito web è il potere suggestivo che i colori sono in grado di comunicare.

Sappiamo tutti che il rosso è un colore caldo, questo perchè viene associato con il fuoco. Al contrario il blue è un colore freddo perchè e il colore del cielo e dell’acqua. Il verde è un colore fresco, lo associamo liberamente all’erba e alla folta vegetazione. Tutte le associazioni descritte sono programmate nella nostra memoria.

Facciamo un semplice esempio, se chiedete a qualcuno, quale sia il suo colore preferito, almeno il 70% delle persone vi dirà?che il colore che preferisce è il blue.

Questo perchè il loro incontro con questo colore è stato estremamente piacevole negli anni formativi. Ricorda le giornate di sole, passati a giocare spensieratamente.

Il rosso è il colore del pericolo, del fuoco, della rabbia. Nel giallo, noi facciamo un’associazione con i fiori primaverili, e la luce del sole. Tutti i colore hanno un’associazione mnemonica con sensazioni che abbiamo accumulato durante la nostra esperienza. Queste pre-costituite ed istintive risposte emotive ai colori è quasi universalmente riconosciuta, a meno di alcune variazioni “locali”.

Per esempio le persone che vivono in un ambiente a carattere desertico avranno un differente sentimento estetico per le sfumature di verde o per piante dai colori molto vivi, come invece il nero che per noi europei viene inteso come qualcosa di negatovo, per gli orientali è segno di abbondanza.

Ricordiamoci sempre che:

• I colori sono comunicativi
• I colori giocano con le nostre percezioni e desideri
• Le parole e i colori hanno un rapporto comune

Grafica e Colori nei siti web

L’uso di esempi già pronti permette di arrivare ad una scelta di successo molto più facilmente di una scelta arbitraria da una palette praticamente infinita che possiamo trovare all’interno di un qualunque programma di grafica.

Le prime pagine studiate per il web facevano uso solo del bianco e del nero. Ora forse stiamo esagerando dalla parte opposta, avendo a disposizione virtualmente di ben 16 milioni di colori, per questo consiglio l’uso della Palette Web, che consiste in solo 216 colori.

I colori presenti in questa palette usano solo le variazioni di colore equivalenti a 00, 33, 99, CC, FF secondo la notazione esadecimale. Il problema per alcuni sarà comunque quella di avere a che fare con troppi pochi colori.

Restringere la palette (la varietà di colori da usare) è la giusta via per riuscire a far lavorare bene i colori insieme.

Il problema è sicuramente quello che una palette ridotta a 8 bit impedisce di scegliere colori con sfumature intermedie.

Se utilizzate immagini cercate la combinazione dei colori utilizzata su queste per usare colori adatti (palette generator) .

Non abbiamo bisogno di tanti colori ma solo di pochi colori, di cui uno principale e quindi qualcuno un po’ più chiaro e qualcuno un po’ più scuro rispetto a questo ed al massimo di due o tre colori che gli facciano da contrasto.

Per riuscirci da soli, naturalmente ci occorrono delle immagini correlate all’argomento che intendiamo elaborare, Oggetti naturali, immagini che vi sembrano adatte, quindi scannerizzarle (se non le avete già in formato digitale). L’uso dello strumento contagocce (disponibile in qualunque programma di fotoritocco, vi permetterà di selezionare e di apprendere le caratteristiche cromatiche del colore principale che vi interessa, e delle variazioni che vi servono per definire la vostra tavolozza. Una volta definiti i vari colori create con questi dei quadratini, sotto all’immagine, per avere un’idea. Salvatelo come GIF in modo da preservare la palette e quindi usatela come campione per il vostro lavoro.

Ogni palette creata con questo metodo risulterà armoniosa, sarà luminosa o cupa come l’argomento richiede ed inoltre vi garantisce uno schema di colori sicuramente di successo.

Buon lavoro.

Autore: Stefano Martini

Technorati tag: color, graphic, siti web, web palette, gif

Ancora non ci credo, 45 milioni di euro spesi, per un portale senza personalità, alla faccia di chi ci deve rappresentare, [...] speriamo siano stati meno, molti meno!

Italia.it, leggendo da vari blog e forum, ha solo difetti e sono pienamente daccordo: il logo sembra un cetriolo, la struttura del codice del sito è anacronistica ed in pochi giorni le modifiche sono già state varie.
Le prime ore di Italia.it non fanno altro che moltiplicare le tinte fosche che avevano attorniato l’esordio del sito tra il pubblico. Che Italia.it non nascesse sotto una buona stella lo si era capito fin da subito e forse il peso del fato è in questo caso stato incisivo: il sito voluto da vari governi, promosso da vari governi, finanziato e sviluppato da vari governi, nasce proprio nel momento in cui il Governo cade. A volte, il destino…Il Governo ha fatto però appena in tempo a presentare il logo prima della crisi che sta portando al nuovo voto di fiducia. In poche ore il noto “it” è divenuto il marchio più criticato e mal voluto del paese, smontato sotto ogni punto di vista e con pesanti accuse di plagio non prive di motivazioni. Tutto viene immediatamente soppesato sui costi: un centinaio di migliaia di euro per un logo tanto inefficiente appare il primo spreco, ma il clamore nasce dal fatto che il logo era solo la prima crepa di un abisso che stava per aprirsi poche ore più tardi.

Nel momento in cui Italia.it si è presentato le voci possibiliste circa una sua riuscita erano legate perlopiù ad un inconscio patriottismo che vedeva nelle bellezze della nazione le uniche bontà del progetto. Poi si è susseguita solo una serie infinita di critiche che su Edit hanno sviluppato una discussione senza precedenti per il blog ed ha visto nascere in contorno tutta una serie di iniziative di immediato successo. Alcune delle critiche sviluppatesi:

• «l’uso insulso delle tabelle annidate per costruire il layout. tecnicaglie dirà qualcuno, [...] eppure è un indizio tra tanti e non meno rilevante del pressappochismo che emerge lampante da quel progetto» (IMHO, dove è segnalato un clone del sito costruito con XHTML e CSS invece del rozzo scheletro tabellare adottato dall’originale);
• la caccia al responsabile ha probabilmente messo alle strette coloro i quali hanno messo avanti la faccia inserendo il proprio nome nella pagina “chi siamo”: nel giro di poche ore la pagina è stata modificata più volte e ad ogni update ne è scomparso un pezzo trasformando il “chi siamo” in “indovina chi siamo“;
• la prima vittima del sito è l’intro musicale. Criticata per gusto, peso, utilità ed opportunità, l’animazione è scomparsa figliando a cascata l’eliminazione di tutte le altre animazioni che bloccavano il sito e la navigazione degli utenti;
• se i difetti nella forma non bastassero, ecco anche una segnalazione relativa alla sicurezza del sito. Gianni Amato, dopo una serie di verifiche, sentenzia: «il sito nuovo di zecca è soggetto ad una vulnerabilità Cross Site Scripting a causa di un superficiale controllo degli input dell’utente. Il filtro esiste ma i tag filtrati non sono sufficienti ad impedire la manipolazione di uno script javascript per sferrare un attacco XSS».

La chiave di lettura migliore, la stessa sospettata più volte, è suggerita da un insider che ha confidato al blog Scandalo Italiano il proprio punto di vista sulla vicenda: «giustamente tutti i creativi e webdesigner della blogosfera sono insorti al momento della pubblicazione del portale. [...] Ma credo che un approccio così tecnico sia limitato.

Il punto è che non bisogna partire dal presupposto che i 45 milioni di euro siano stati investiti nello sviluppo web e che ci stiano lavorando da anni». Il problema, insomma, non può limitarsi ai difetti sotto gli occhi di tutti, ma va cercato anche e soprattutto nelle firme che hanno smosso a monte i famigerati 45 milioni di euro dalle sale dei bottoni.

Sinceramente pensavo di trovarmi difronte a un progetto web professionale, [...] la voce forte del web 2.0, il web accessibile a tutti, pensavo di trovare grafica pulita ed elegante e vedere un nuovo modo di concepire le applicazioni web-top, [...] nulla di tutto questo.

Pensavo di trovare un portale con informazioni fluide e semplici da cercare, insomma penso troppo e mi sono illuso.
Ma allora anche il nostro piccolo portale dedicato alle Vacanze Low Cost, vale cosi tanto? Almeno gli URL sono “umani” e la grafica beh… fate voi.

Cominciamo bene la splash page già da errori di validazione

• Logo… ah si il cetriolo
  
• Immagini sgranate e di bassa qualità
• Rewrite degli URL inesistente
  
• Assenza di feed RSS di scelta tra i vari canali informativi
  
• Validazione del codice HTML 4.01 Strict assente in molte poagine
  
• Link spesso interrotti
  

«Non potete fare a meno di cantare un’aria di Rossini anche fuori dalla doccia? Una buona bottiglia di vino è il primo regalo che vi viene in mente da fare e da ricevere? Non appena esce un raggio di sole correte a comprarvi un nuovo costume da bagno? Davanti a un pezzo di parmigiano inziate a declamare poesie?»
Con queste testi i turisti faranno a botte per venire in Italia… un bel salto di qualità come immagine e promozione sul web…

Complimenti a chi ha gestito il progetto e ha scelto i collaboratori…almeno uno dei 22 punti della Legge Stanca si potevano rispettare?