il (b)log da bere tutto in un sorso

Twittare o Plurkare, questo è il problema

E voi cosa ne pensate?

A parer mio, Twitter e Plurk sono due servizi fondamentalmente diversi. Twitter è nato come un “What are you doing?”, come si legge nell’homepage stessa si Twitter. Plurk, invece, è molto di più: permette di condividere video, immagini e altro. Inoltre, la possibilità di commentare una plurkata (o mamma, che brutta parola!) lo rende veramente un servizio di micro-blogging. Infine non guasta il fatto che Plurk sia pensato in maniera simpatica e divertente. L’unico punto a sfavore di Plurk è che difficilmente esisterà un client come Twhirl per questo servizio, senza la time-line strambalata (addio all’Italiano) si perde il 90% della divertimento nell’usare Plurk.

Twittare o Plurkare? La mia risposta a questa domanda, almeno per ora, è: nessuno dei due. Già da diverso tempo ho smesso di usare il mio account su Twitter perché da una parte mi accorgevo che perdevo troppo tempo a starci dietro (ogni scusa è buona per non studiare), dall’altra finiva che i miei tweet fossero sempre “sto studiando, ora impazzisco”. Figuriamoci Plurk, che come dice bene Giovy

Plurk è talmente “divertente” da essere dannoso per la vostra produttività

P.S.= prendete questo articolo alla IHMO!

Popularity: 26% [?] Condividi

Le mode colpiscono tutte i frangenti della società, compreso Internet. La moda attuale può essere riassunta in un unica parola generalizzante: web 2.01. In questo articolo elenco una piccola serie di linee guida da seguire se si vuole implementare un design in stile web 2.0, linee guida acquisite durante l’esperienza degli ultimi sei mesi di web designing.

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:

Esempi di colori in stile web2.0

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:

Esempi di colori in stile web2.0 ad alto contrasto

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:

Esempio di gradiente in perfetto stile web 2.0

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:
    Esempio di sfondo con un pattern vettoriale Esempio di sfondo con un pattern vettoriale Esempio di sfondo con un pattern vettoriale
    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.

Un esempio di titolo di un sito in stile web2.0

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:

Un esempio di contenuti in stile web.20

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

Popularity: 50% [?] Condividi

Qualcuno di voi starà pensando “ma questa notizia è vecchia”. È vero: lo segnalo semplicemente perché dopo una decina di giorni di utilizzo si è rilevato un servizio indispensabile per me.

DocSyncer - Synchronize Your Microsoft Office Documents with Your Google Docs Account

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.

DocSyncer: interfaccia per la gestione

Clicca sull’immagine per ingrandire

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

DocSyncer: apri in locale o on-line 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.

DocSyncer: Previus Version screenshot 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…

Popularity: 95% [?] Condividi

ipodEstratto di un dialogo avuto 10 minuti fa1

Tizio: Guarda,Vik, mi sono comprato l’iPod!
Io: Come? Ma non dicevi che si trattava di un gadget troppo alla moda2 per te?
Tizio: Si, è vero. Ma l’iPod è l’unico lettore mp3 che io conosca compatibile con last.fm, per cui…

Adesso si esagera3!

- Warning: Divide by 2.0.

Technorati tag: , ,

==
Crediti immagine: ipod by Oliver Lavery

  1. Questo si che è live blogging! Torna su
  2. Il tizio in questione si professa un anarchico/alternativo. Torna su
  3. Era un po’ che non scrivevo una sana stronzata su questo blog. Torna su
  4. No, non c’è una quarta nota. E che cacchio! Torna su

Popularity: 30% [?] Condividi

Io ho sempre utilizzato trackback e pinkback senza conoscere qual’è la reale differenza fra i due strumenti. Scommetto che anche molti di voi non la conoscono!

tastiera  illuminata
Foto derivata da: keyboard by ekieraM

Il wiki Intro Blog di Wordpress Italia ci viene incontro: leggete i punti riguardanti trackback e pingback e il gioco è fatto.

- Warning: Divide by zero.

Popularity: 43% [?] Condividi

Chi mi segue (chi mi segue?) saprà già che ho passato diversi giorni a casa con la febbre. Nel delirio cazzeggio ho anche disegnato alcune icone, ispirandomi alle icone tonde che utlizzo sia nel widget “Seguimi” che in quello “Rete Sociale”. Per ora ne ho pubblicate solo tre poche (in costante aggiornamento) per motivi di tempo (ora ho ricominciato a studiare e devo recuperare il tempo perso!).

my_icon_prewiev
Spero vi piacciano!

Dalla pagina Icone gratuite è possibile scaricare ciascuna icona in formato PNG (sfondo trasparente) con dimensioin 512×512 pixel, 128×128, 64×64 e 48×48. Come al solito le icone sono rilasciate sotto Licenza Creative Commons. Se ciò non bastasse ho riempito le mie sidebar di piccole icone di famfamfam. Semplicemente splendide!

Vi lascio con qualche sito dove trovare icone grautite:

  • IconFinder: il mio preferito. Permette di cercare singole icone in base ai tag associati. Tutte le icone sono in formato PNG.
  • Fasticon: numerosissimi stock di icone gratuite (ci sono anche a pagamento).
  • YellowIcon: pochi set di icone, ma veramente professionali.
  • 104 Standard PC Keyboard Key Icons: il nome già dice tutto.

- Warning: Divide by zero.

Technorati tag: , , , ,

Popularity: 29% [?] Condividi

Dopo templatr (che non spicca certo per facilità d’uso) nasce Logo Creator, applicazione web che permette di creare - in pochi secondi - un logo come questo:

Divide by zero by Logo Creator

Potrete scegliere fra cinque temi (se ne salvano solo 3 però) e varie opzioni, come:

  • tutti i colori presenti nell’immagine (sia del testo che dello sfondo);
  • la dimensione dell’immagine;
  • la dimensione e il font del carattere;
  • etc etc…

Logo Creator è gratuito, le immagini sono generate in formato PNG e non sono coperte da alcuna licenza, dunque potete farne quello che volete. Utilissimo per chi, come me, finisce per avere loghi assurdi nel proprio blog :P . A mio avviso, assolutamente da aggiungere al proprio delicius!

- Warning: Divide by zero.

Popularity: 19% [?] Condividi

Questo blog nasce dalla mia passione per l'informatica, nonché la mia materia di studio. Troverete anche articoli riguardanti altri argomenti: cinema (con alcuni miei amici teniamo un cineforum), fotografia, fatti universitari...
Aggiungi viklog a del.icio.us StumbleUpon Altro...

L’armonia nascosta è più potente di quella manifesta — Eraclito