Quello che ha colpito il sottoscritto, che da un paio di anni si occupa di Web Design, è stata l’ineguadetezza della veste grafica. Esploriamo i dettagli.

Il logo

Il logo di bing.com mi ha dato subito l’impressione di essere stato buttato li: non ha carattere e non ha spessore. Testo bianco con la il puntino sulla “i” arancione. Beh, tutto qui?

Se questo non bastasse, durante le ricerche il logo stesso è poco leggibile trovandosi sopra il particolare di una foto, basti vedere lo screenshot qui sotto.

bing logo poco leggibile

Un altro dettaglio non indifferente si nota disabiltanto le immagini: se nella homepage di Google c’è comunque un testo alternativo (Google, appunto) in bing non appare nulla.

Nessun testo alternativo

La favicon

La favicon è sicuramente il dettaglio peggio realizzato del motore di ricerca. Da una parte c’è un incorenza con il logo stesso: mentre il logo è bianco, la “b” della favicon è blu. Dall’altra la qualità della favicon stessa è molto bassa: basti guardarla con uno sfondo blu (o comunque colorato) e si notera immediatamente un piccolo bordo bianco che sgrana.

Zoom sulla pessima favicon

Il menu di navigazione

In alto a sinistra è visibile un menu che permette di navigare fra le varie sezioni del motore di ricerca – identicamente  a Google – come Web, Immagini e così via. La pagina attiva, per essere identificata dalle altre, ha il nome in grassetto. Non solo: la scritta appare 1 pixel più in alto delle altre (è un problema del Mac?). Scelta che trovo alquanto inconsueta e brutta – le linee (e dunque l’allineamento) sono molto importanti nel design.

Allineamento errato

Sfondo e gradienti

Lo sfondo di bing.com è costituito da un gradiente e da una foto.

Normalmente i gradienti si utilizzano per dare spessore ad una sezione del sito. Nel caso di bing questo non accade: il gradiente è incosistente. Se effettuiamo una ricerca ci accorgiamo subito che il suddetto gradiente è troppo forte – cioè, c’è troppa differenza fra il grigio scuro in alto e quello chiaro in basso. Inoltre, il gradiente è spezzato dal bianco: sembra un sito realizzato nel 98!

Poi ci sono le foto: le trovo di cattivo gusto. Ma questa è una considerazione del tutto personale.

Homepage di bing con commenti

Durante una ricerca

Il campo di ricerca

Il campo di ricerca non è al centro pagina. Stiamo scherzando?

Da ridire anche sul pulsante della form: troppo piccolo e senza label (una scritta come Cerca).

La ricerca per immagini

Cercando nelle immagini trovo buona la scelta – non solo dal punto di vista del web design – di caricare le immagini via AJAX, alleggerendo una pagina piena di elementi. Buona anche la possibilità di scegliere come visualizzare queste immagini: anteprime piccole, grandi, con testo, etc etc.

Conclusioni

Se bing è in beta il suo layout è decisament in alpha. Possibile che una azienda come la Microsoft non abbia dei designer professionisti?

Articoli correlati:

1. Logo Creator
2. Torniamo a parlare di Vista
3. Web design 2.0: alcune linee guida per un design in perfetto stile web 2.0

1. cataloga foto, video e tutti gli altri allegati perché sia più facile ritrovarli e condividerli;
2. aggiunge un campo di ricerca Google-powered alla pagina di scrittura delle e-mail.

Una volta installata l’estensione ed effettuata la registrazione a Xoopit, l’add-on indicizzerà tutte le nostre e-mail alla ricerca degli allegati. Per quanto riguarda immagini e video, verranno catalogati non solo qui file allegati nelle e-mail inviate o ricevute, ma anche quei file multimediali linkati da servizi come Flickr, Picasa e Youtube.

Finita l’indicizzazione sarà facile ritrovare foto, video e altri file come si vede dall’immagine seguente:

La raccolta di immagini, video e altri file

Selezionando, ad esempio, “Videos”, ci verrà mostrata la lista di video allegati o linkati, con una piccola icona che ci mostrerà da quale servizio questi video arrivano (nel mio caso, tutti da Youtube) o se sono stati allegati direttamente:

La lista dei video

Selezionando un video sarà possibile vederlo direttamente all’interno di Gmail, inoltrare il video, pubblicarlo su Facebook ed esplorare gli altri file ricevuti dallo stesso mittente.

Xoop.it: guardare un video direttamente da Gmail

(Il video visibile nello screenshot è http://it.youtube.com/watch?v=Smg-cthUtiM, imperdibile!).

Le stesse azioni sono disponibili per  le immagini; per tutti gli altri allegati verrà mostrata una lista con: icona associata al tipo di file, nome file, mittente o destinatario della mail, link alla mail stessa e tutto con la possibilità di inoltrare, scaricare o eliminare il file. Ovviamente sarà anche possibile effettuare ricerche fra i file e visualizzarli per mittente/destinatario.

Non è finita qui: come dicevo all’inizio del post, Xoopit aggiunge un piccolo campo di ricerca per includerne i risultati direttamente nella mail. Nell’esempio qui sotto, ho cercato “Wolverine” e ho incluso un link al trailer di X-Men Origins: Wolverine Trailer [True HD] nella e-mail.

Xoop.it: effettuare ricerche su Google e includere i risultati nelle e-mail

Una nota negativa, la ricerca è effettuata su Google.com e non .it, ma si può sopravvivere.

Sulla sicurezza

Utilizzare Xoopit significa dare ad una applicazione di terza parti i dati del nostro account Google. Il problema, però, non sussiste in quanto l’estensione utilizza una connessione sicura https esattamente come Gmail (se non lo avete già fatto, attivate l’opzione “Usa sempre https” da Impostazioni > Generali).

Enjoy!

Articoli correlati:

1. 15+ trucchi per effettuare ricerche avanzate in GMail
2. Conversione video online
3. Impostare GMail con IMAP su Samsung sgh i600
4. DocSyncer: sincronizzare i propri documenti con i Google Doc
5. Google: si avvicina il monopolio?

Se vi interessa, fate un salto sulla pagina dedicata a big arrow theme.

Nessun articolo correlato.

Ecco elencati alcuni trucchi per effettuare ricerche all’interno di GMail.

1. Cercare mail il cui mittente è (ad esempio) Mario Rossi:

from: Mario Rossi

2. Cercare mail il cui destinatario è (ad esempio) Marco Bianchi:

to: Marco Bianchi

3. Cercare mail il cui oggetto contiene la parola (ad esempio) mare:

subject: mare

4. Cercare solo nelle mail ancora da leggere:

is:unread

5. Cercare solo nelle mail già lette:

is:read

6. Cercare solo nelle mail contenute nell’etichetta la-mia-etichetta:

in:la-mia-etichetta

7. Cercare solo nel cestino:

in:trash

8. Cercare solo nelle mail contrassegnate come spam:

in:spam

9. Cercare ovunque (compreso Cestino e Spam):

in:anywhere

10. Cercare solo mail che hanno un allegato:

has:attachment

12. Cercare tutte le mail ricevute dopo una certa data, ad esempio, dopo il 30/11/2008:

after:2008/11/30

13. Cercare tutte le mail ricevute prima di una certa data, ad esempio, prima del 30/11/2008:

before:2008/11/30

14. Cercare email che contengono esattamente la frase Oggi andiamo al mare:

"Oggi andiamo al mare"

15. Eliminare dai risultati della ricerca tutte la mail che contengono la parola iPhone:

la tua ricerca -iPhone

16. Combinare più ricerche con gli operatori logici AND e OR. Ad esempio, cercare tutte le mail ricevute oppure inviate da Nicola Verdi che hanno un allegato:

(from:Nicola Verdi) OR (to:Nicola Verdi) has:attachment

Qualcuno conosce altri “trucchi”?

Articoli correlati:

1. Xoopit e Gmail: catalogare foto, video e allegati
2. Impostare GMail con IMAP su Samsung sgh i600

Provare per credere… Un sentito grazie a Sign In per la segnalazione.

Articoli correlati:

1. Generare Feed RSS da una base di dati o da una qualsiasi pagine sul web
2. Launchy 2.0 rilasciato
3. Launchy 2.0 Alpha 9
4. Launchy
5. La settimana in “Grafica” #1

A partire da una base di dati

Non so se vi è mai capitato di dover generare un feed RSS/Atom i cui contenuti sono a loro volta generati a partire da una base di dati. In questo caso ci viene in contro l’ottimo PHP Universal Feed Generator (che nome pomposo!): l’esempio d’uso presente nella pagina che ho linkato la dice lunga sulla semplicità e le potenzialità di queste classi PHP.

A partire da una qualsiasi pagina presente nel web

Nel caso in cui vogliate generare un Feed a partire da una qualsiasi pagina web i cui contenuti non gestite voi o comunque, per un motivo o per l’altro, non potete usare un generatore in PHP, le cose si complicano un pochino. È possibile utilizzare alcuni tool online.

FeedYes

FeedYes vi permette di far ciò con un procedimento veramente semplice, il servizio riesce a identificare senza troppe difficoltà i singoli elementi che diventeranno le entry del feed. Unico difetto: il servizio costa circa 25 $ all’anno!

Feed 43

Feed 43 (poi, perché proprio 43?), invece, necessita di alcuni passaggi di configurazione per il riconoscimento delle singole entry. Da una parte questo ci permette una maggiore precisione, dall’altra, nel caso il codice HTML sia mal strutturato, non riusciremo ad avere lo stesso risultato ottenuto con FeedYes. D’altro canto Feed 43 ha 2 tipi di account: uno di questi è completamente gratuito, la controindicazione è che in ogni elemento del Feed apparirà “Delivered by Feed 43″.

In ogni caso vi suggerisco di controllare che i Feed siano validi tramite Feed Validator e poi di renderli compatibili con qualsiasi browser o dispositivo tramite FeedBurner.

Qualcuno conosce altri generatori migliori di questi?

Articoli correlati:

1. Post di servizio: trasferimento (forzato) dei Feed
2. Problemino con BlogBabel
3. [i18n] Come realizzare un tema per Wordpress multilingua
4. Il Bloggatore

0) Il tempo dei 56k è finito

Ricordo ancora il mio primo corso di HTML/CSS (parliamo del 1999) in cui ci insegnarono una ferrea regola sull’uso di immagini all’interno di siti: utilizzare rigorosamente gif, ogni immagine doveva avere una dimensione massima di 4KB, senza mai superare un totale di 20KB (che era già troppo!). Ormai quei tempi sono superati: finalmente anche in Italia l’ADSL sta diventando una realtà di massa. Dunque, non facciamoci troppi problemi nell’uso di immagini per il layout delle pagine. Ora c’è chi usa un immagine di più di 150KB come header…

1) Colori

Usare colori pastello a basso contrasto, qui il grigio chiaro da fa re: dunque utilizzare colori che si allontanano il meno possibile dal bianco. Ecco alcuni esempi:

Come si vede nell’esempio, la prima cifra del codice esadecimale è sempre una f, in questo modo siamo sicuri il colore risultante sia sempre molto leggero. Per lavorare bene con questi colori leggerissimi è necessario regolare ad hoc la luminosità e il contrasto del nostro schermo, se abbiamo ancora un vecchio CRT molto meglio.

Un’altra possibilità è quella di usare un forte contrasto fra colore di sfondo e colore del carattere. In questo caso il suggerimento è quello di usare come sfondo dei grigi molto scuri, magari grigo/blu, invece usando come colore del carattere qualcosa di più acceso rispetto ai colori precedenti. Ad esempio:

Il consiglio è comunque di non basare tutto il sito su questi ultimi colori, ma di usarli solo per la sidebar o per moduli che si vuole mettere in evidenza.

3)Gradienti

Se si usano delle immagine di sfondo o comunque all’interno del layout è buona norma non usare mai colori piatti ma utilizzare dei gradienti, in particolare quelli che io chiamo “gradienti invisibili” perché sono gradienti fra due colori molto simili eppure danno quel tocco di classe in più che non guasta mai. Solitamente il colore più chiaro sta in alto, ma questo si può cambiare, l’importante che se decidete una versione o il viceversa rispettiate tale “regola” per tutti gli elementi grafici. Un esempio semplice semplice:

Di solito per questi gradienti si usano colori anche molto più vicini di quelli nell’esempio. Assolutamente da evitare, invece, i gradienti da sinistra a destra o viceversa, piuttosto in obliquo.

4) Sfondo

Per lo sfondo del body ci sono principalmente 3 possibilità:

1. Il corpo del sito con sfondo bianco mentre il body un colore di contrasto: un grigio, un azzurro, un marrone. In questo caso meglio usare colori più forti, comunque senza esagerare.
2. Usare per tutto un “bianco sporco”:
   
   Clicca sull’immagine per ingrandire
3. Usare un pattern di sfondo, a me non piacciono molto ma sono richiestissimi. Alcuni esempi fatti un po’ alla svelta:
   
   Clicca sulle immagini per ingrandirle

5)Titolo del sito

Usate un immagine: testo tutto maiuscolo con font sottile. Se il titolo del sito/blog è composto da più parole non separatele con lo spazio ma usate colori diversi per ogni parola.

Evitate il riflesso sotto il titolo, ha un po’ stufato. Se ne sentite proprio la necessità fate sì che sia appena appena visibile.

6)Carattere del contenuto

Se stiamo parlando di un blog o comunque di un sito pieno di contenuti in senso di testo non c’è cazzi: dimensione del font 12px e colore nero. Ma se il sito ci permette di farlo, perché il testo è poco, usiamo un carattere grande, magari non nero. Differenziamo titolo, preambolo/introduzione e tutto il resto. Meglio farlo vedere che spiegarlo:

Clicca sull’immagine per ingrandire

7)AJAX

E pensare che AJAX è una tecnologia vecchia come i javascript stessi… Ma si è diffusa solo negli ultimi anni grazie al fatto che i PC degli utenti sono sempre più potenti per cui non c’è alcun rischio nell’usare una massiccia quantità di codice client-side. Massiccia si, ma state attenti a non esagerare: basti pensare a prototype (incluso in Wordpress) che pesa più di 100 KB. Ecco una lista di javascript framework utili per inserire quelche effetto grafico nel nostro sito/blog (e non solo):

• jQuery (il re di tutti i JS framework!) e ThickBox
• Prototype
• mootools (implementa la “catena” di effetti, ovvero ad un elemento si possono assegnare una sequenza di diversi effetti), ancora meglio se in coppia con moo.rd
• YUI – Yahoo! User Interface Library (probabilmente il più completo di tutti i framework)
• ext (molto interessanti i GWT)
• lightbox 2 (io lo odio, però è molto in voga!)
• shadowbox (leggero e molto adattabile!)

Il più interessante è proprio questo ultimo perché non solo è leggero e con ottime prestazione (altro che lightbox!), ma è anche possibile configurarlo per basarsi su uno qualsiasi dei framework prima elencati (non proprio tutti) ed è compatibile con rel=”lightbox”. Peccato che io non riesca a farlo funzionare in questo blog . Lo potete vedere in azione in questo blog, ringrazio Il Bonzo per l’aiuto e la disponibilità!

8)Ombre

L’ombra degli oggetti grafici (icone, bottoni, etc…) meglio sotto l’oggetto stesso, come se questo fosse appoggiato su una superficie. In ogni caso usare ombre l-e-g-g-e-r-i-s-s-i-m-e!

8)Creatività

Queste sono solo alcune linee guida, posso tornare utili come no. Tanto senza un po’ di creatività (e di pazienza) nel mondo della grafica non si va da nessuna parte.

E ricordatevi che:

I bravi artisti copiano, i grandi artisti rubano. [I pirati della Silicon Velley]

No, non sto incitando a copiare il codice HTML/CSS altrui ^__^ dico solo che non c’è niente di male nell’ispirarsi ad un sito che ci piace.

Un articolo molto interessante sull’argomento e ricco di esempi lo trovate qui (in inglese).

[1] Mi trovo d’accordo con Paperino, però io la definirei sia una buzzword che una buzz word! Torna su

Articoli correlati:

1. 20 pennelli gratuiti per Photoshop in stile Grunge
2. Logo Creator
3. Bing dal punto di vista del Web Designer

DocSyncer è un servizio per la sincronizzazione dei propri documenti con quelli dell’account Google. Niente di più, niente di meno. Una volta inscritti e installato il software verrà automaticamente effettuato l’upload di tutti i documenti presenti nella propria cartella Documenti (scusate lo sciogli lingua) in Google Doc.

Clicca sull’immagine per ingrandire

A questo punto sarà possibile scegliere dall’interfaccia se aprire ogni singolo file tramite Google o in locale.

Non fatevi ingannare dalla scritta “Open File in Microsoft Word”, se i DOC sono associati a OO Writer funziona comunque!

Ogni modifica effettuata ad un file verrà automaticamente sincronizzata dall’applicativo appena avviato e con disponibilità di una connessione. In questo modo ogni volta che non disponete del vostro computer potrete modificare i file direttamente online con Google Doc per poi sincronizzare il tutto dopo, oppure lavorare tranquillamente offline con Office o OpenOffice e DocSync effettuerà da solo l’aggiornamento dei file. In un secondo momento potrete selezionare anche quale cartelle sincronizzare, persino l’intero hard disk. I file supportati sono: .DOC, .DOCX, .XLS, .XLSX, .PPT, .PPTX, .PPS, .PPSX, .ODT, .ODS, .TXT, .RTF, .HTML , .CSV Ma il punto di forza di DocSyncer è Previus Version: dopo ogni modifica salvata ad un documento è possibile visualizzare la lista di tutte le versioni precedenti e ripristinarne una di esse.

Clicca sull’immagine per ingrandire

Per quanto riguarda la privacy è possibile attivare un opzione che permette l’upload la modifica e il download tutto attraverso sessioni sicure SSL. Se, come me, vi capita di dover modificare documenti da computer altrui o pubblici vi consiglio fortemente di provare il servizio, il quale – nonostante sia in beta (è una moda) – non mi ha mai dato problemi di alcun tipo. E poi è gratis… Mi pare che gli screenshot inclusi in questo articolo esprimano meglio delle mie parole le potenzialità di di DocSyncer. Ah, unico difetto non da poco conto: il software attualmente è disponibile solo per piattaforma Windows purtroppo…

Articoli correlati:

1. Google Sync per Windows Mobile
2. Google: si avvicina il monopolio?
3. 5 inviti per Google Wave
4. Google BuzzOne
5. Xoopit e Gmail: catalogare foto, video e allegati

Donkeys with computers in Greece by davesag

Per iscriversi ci vuole un attimo: segnalate il vostro blog con l’apposito form, dopodiché sarà sufficiente inserire l’antipixel nel proprio blog e il gioco è fatto.

Visto che mi trovo voglio comunque dire 2 cose alla redazione de Il Bloggatore:

1. Un maggiore controllo sulla presenza di articoli non inerenti all’informatica. Ne ho visti un paio.
2. Da quando esiste Internet per antipixel si intende un immagine di 80×15 pixel. Per questo ne ho disegnate due mentendo i colori di quello già esistente: , . Se vi piacciono potete farne l’uso che preferite.

In bocca al lupo a tutta la redazione de Il Bloggatore.

- Warning: Divide by zero.

Technorati tag: Il Bloggatore, web, feed, informatica

Articoli correlati:

1. Post di servizio: trasferimento (forzato) dei Feed
2. Generare Feed RSS da una base di dati o da una qualsiasi pagine sul web
3. Problemino con BlogBabel

Oggetto: Finalmente un’email utile!!!e nn la solita catena del cavolooo!!!

Corpo: SE GOOGLE AVESSE UNO SCHERMO NERO [in Italiano no?], VISTA LA GRANDE QUANTITA’ DI
PERSONE CHE LO USANO, SI CALCOLA CHE SI RISPARMIEREBBERO CIRCA
750MEGAWATT/ORA.
COME RISPOSTA A QUESTO GOOGLE HA CREATO UNA VERSIONE IN NERO, CHIAMATA
BLACKLE, CON ESATTAMENTE LE STESSE FUNZIONI DI QUELLA IN BIANCO, CON
UN CONSUMO DI ENERGIA MINORE…
FALLO SAPERE E USALO, OGNI PICCOLA COSA CONTA.
Ecco la Versione italiana di google con schermo nero, con risparmio
energetico ,provare per credere!!!!

http://www.nerooogle.com/

(se il link non funziona cercate “nero google” sul motore di ricerca)

Se cliccate sul link vedrete una versione a sfondo nero e testo grigio chiaro di Google. Come riporta il sito stesso si tratta di un’iniziativa italiana “per il risparmio energetico” che non ha alcun legame con Google.

Mi viene da fare un paio di considerazioni:

1. Io non credo che mettere sfondo nero al mio schermo LCD faccia sì che questo consumi meno… Mica per rappresentare il nero si spengono dei pixel!!!
2. Ammettendo che fosse vero, perché non creare un tema nero per iGoogle invece di un sito che sfrutta la Google Custom Search?
3. Penso che Neroogle sia il logo più brutto che io abbia mai visto. Inoltre hanno inserito il Trade Mark. L’avranno davvero pagato?

Si, oggi sono proprio acido. Ma mi sbaglio?

[UPDATE] Se cercate BLACKLE scoprirete che esistono altri siti che anno avuto questa idea: Beackle.com, GoogleLightOff.com, …

Ah, se non si fosse capito lo studio mi sta distruggendo l’ultimo neurone… Per cui non so quando riuscirò a pubblicare il secondo episodio della rubrica Vista features.

- Warning: Divide by zero.

Technorati tag: Neroogle, catene, risparmio energetico, stronzate

Articoli correlati:

1. Google BuzzOne