Oggi parliamo un po’ di font. Scegliere un carattere da utilizzare per un progetto non è affatto cosa scontata e semplice da fare. Spesso infatti mi ritrovo a combattere con me stesso per cercare un font che sia adatto al tipo di comunicazione che voglio dare al logo, o comunque al progetto grafico, che sto realizzando.

Le librerie di caratteri spesso possono essere molto costose, ma per fortuna il web mette a disposizione molti siti e fonti dove si possono trovare font scaricabili gratuitamente di ottimo livello. Con questo articolo voglio condividere con te quelle che sono i siti che più utilizzo per questo scopo.

DaFont.com

E’ sicuramente il sito che ha il più largo database di caratteri scaricabili gratuitamente sia per Windows che per Mac OSX. E’ quello che utilizzo da più tempo e permette anche di poter visualizzare un’anteprima della parola che vogliamo scrivere con il font che cerchiamo.

Google Web Fonts

Da qualche tempo ormai anche Google si è occupata della questione realizzando un servizio decisamente utile. Ospitando direttamente sui suoi server i font, possiamo incorporare nel nostro progetto web caratteri che altrimenti normalmente un visitatore non visualizzerebbe sul suo browser. Grazie a Google Web Fonts quindi i nostri progetti web possono raggiungere un livello decisamente più avanzato, ma ovviamente le stesse fonts sono scaricabili anche in locale per essere utilizzate con programmi di editing.

TenByTwenty

E’ il sito di Ed Merritt, un designer della costa meridionale della Gran Bretagna. Sul suo sito potrete trovare alcuni font gratuiti, pochi ma buoni. Infatti Ed realizza font di elevata qualità. Da scaricare tutti!

Font Squirrel

E veniamo al pezzo forte. Font Squirrel è senza ombra di dubbio il miglior sito per scaricare font gratuite. Il perché non è solo nel fatto che il loro database è eccezionale, ma anche dal fatto che tutti i font presenti sono totalmente liberi da diritti e quindi utilizzabili per scopi commerciali. Molti font infatti sono gratuiti, ma utilizzabili solo per scopi non commerciali, in pratica non potete rivenderli. Con Font Squirrel invece il lavoro duro è già stato fatto, puoi scegliere qualunque font senza pensieri!

Ormai ci siamo, HTML5 è decisamente in arrivo e non possiamo pensare di rimanere indietro. Occorre iniziare a far pratica con i nuovi tag e prendere confidenza con quello che sarà il linguaggio di markup standard nei prossimi anni. Smashing Magazine ha parlato poco tempo fa di un tema gratuito per WordPress realizzato interamente e in modo eccellente tramite HTML5, ma prima di analizzarlo e studiarlo insieme, facciamo un po’ di chiarezza su cosa sono HTML5 e i nuovi CSS3.

Partiamo dalle definizioni che possiamo trovare su Wikipedia:

HTML5

L’HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in fase di definizione (draft) presso il World Wide Web Consortium. La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. L’intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili.
L’HTML5 si propone come evoluzione dell’attuale HTML 4.01 ed è stato concepito in alternativa all’ormai fallito XHTML 2. Il World Wide Web Consortium ha annunciato che sarà pronto per il luglio 2014

CSS3

Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C. L’introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.

Le specifiche CSS 3 non sono state ancora pubblicate, sebbene il W3C pubblichi costantemente informazioni sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di alcuni bug di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per realizzare i bordi arrotondati la cui realizzazione affligge i webdesigner da tempo.

Il tema Yoko in HTML5

Come accennato, Smashing Magazine ha dato visibilità ai ragazzi di ElmaStudio che hanno realizzato un ottimo lavoro con il loro tema gratuito Yoko. Yoko è un tema realizzato totalmente in HTML5 e presenta diverse caratteristiche che lo rendono un’ottima base di partenza per studiare questo nuovo linguaggio di mark up.

Le caratteristiche principali di Yoko sono:

• Completamente compatibile e testato con Chrome, Firefox, Safari, Internet Explorer 8 e superiori
• Scritto con HTML5 e CSS3
• Layout reattivo (non supportato per versioni di IE inferiori alla 9, ma si possono usare le librerie Respond.js di Scott Jehl o CSS3-Mediaqueries-js di Wouter van der Graaf per farlo funzionare su versioni più vecchie di IE)
• i recentissimi WordPress post formats (aside, gallery, image, video, link e quote. Maggiorni informazioni sulla guida ufficiale allo sviluppo di WordPress)
• Pagina delle opzioni per il tema, sfondo ed immagine di header customizzabili
• Sotto menu opzionali
• Widget per link sociali customizzati per promuovere il feed RSS, o il tuo profilo Facebook, Twitter, Flickr, Vimeo, LinkedIn o Delicious
• Template per pagina a larghezza totale
• Utilizzo di Google Web fonts (Droid Sans e Droid Serif)
• Commenti annidati con supporto a Gravatar
• Shortcode per colonne multiple, box informazioni disponibili in 3 colori e testo evidenziato

Attualmente è disponibile in Inglese, Tedesco e Francese…se qualcuno volesse aggiungere l’italiano, contatti i ragazzi di ElmaStudio.

Yoko è un ottimo tema per chi volesse iniziare un blog con una tecnologia altamente al passo con i tempi, ma anche un’ottima risorsa per chi volesse sviluppare un suo primo tema HTML5 per WordPress partendo da una base di sviluppo altamente customizzabile e scritta in modo eccellente. Il tema inoltre è minimale, ha quindi grandi  margini di modifica, sia grafica che dal punto di vista del codice.

Puoi scaricare Yoko dal sito ufficiale di ElmaStudio.

Ne io ne Fabrizio abbiamo mai perso occasione per elogiare le qualità di WordPress, uno dei prodotti opensource più riusciti di sempre e motore di tutto il network Splesh!. Dal 2003 ad oggi è diventato una delle piattaforme più usate con più di 45 milioni di siti che ne sfruttano le caratteristiche e godono delle sue qualità, tra cui progetti importanti come Mashable o blog di realtà come PlayStation, eBay o Mozilla.

In otto anni WordPress è evoluto sotto ogni aspetto: sicurezza, funzionalità, usabilità e in generale qualità grazie allo sforzo di tantissimi volontari e grazie a Matt Mullenweg che 8 anni fa rese disponibile online la prima versione di questo ottimo CMS. Qualche tempo fa ho scritto una email a Matt ringraziandolo di quanto ha fatto con WordPress, grazie a lui è nato Splesh!, la mia amicizia con Fabrizio e gran parte dei miei progetti (e successi) sul web sono dovuti a lui. Mi ha risposto con un simpatico “:)”…ma considerando che non mi sarei mai aspettato una risposta è più che sufficiente!

In un articolo di qualche giorno fa, Mashable ha riproposto gli screenshot dell’interfaccia delle varie versioni di WordPress, dalla prima release resa pubblica, la 0.7.1, alla recente versione 3.2 in beta, per rivedere insieme come è evoluta la sua interfaccia. Per semplicità le riporto tutte qui:

WordPress 0.7.1

WordPress 1.0.1

WordPress 1.2

WordPress 1.5

WordPress 2.0

WordPress 2.1

WordPress 2.2

WordPress 2.3

WordPress 2.5

WordPress 2.7

WordPress 3.0

WordPress 3.2beta

E si torna a parlare di risorse gratuite, in particolare di icone. Quando si realizza un prodotto web, come in ogni altro lavoro, il dettaglio fa la differenza tra l’ottimo e l’eccellente. Ecco perché personalmente presto molta attenzione alla scelta del set di icone da utilizzare per ogni progetto. Voglio oggi condividere con te i 3 siti che maggiormente utilizzo per scaricare il set giusto di icone, o per prendere ispirazione per le mie. Clicca sulle immagini per accedere ai siti.

Iconshock

Iconfinder

Findicons

Navigando per il web a volte si fanno delle scoperte che non ti aspetti. Ieri stavo cercando tutt’altro quando mi sono imbattuto in uno script realizzato in Flash davvero interessante. Cu3er (che si legge “cuber”) è infatti uno slideshow con transizioni tridimensionali realizzato grazie a Flash, ActionScript e XML. La particolarità di Cu3er sta proprio nella facilità di personalizzazione; grazie al file xml infatti, possiamo personalizzare ogni aspetto dello slideshow e delle transizioni da effettuare tra un’immagine e la seguente.

Cu3er permette molte possibilità di personalizzazione come ad esempio il countdown per il cambio di slide, i tasti next and previous o la textbox descrittiva della slide

Ho fatto qualche prova e devo dire che in pochissimo tempo (davvero questione di minuti) si può realizzare uno slideshow di grande impatto visivo, ideale per attirare l’attenzione dei tuoi visitatori. Qui trovi una demo che ho realizzato seguendo le facili istruzioni del sito per configurare a tuo piacimento Cu3er.

Se vuoi, puoi scaricare Cu3er gratuitamente.

Con il nuovo sistema operativo per i dispositivi mobili di Apple, iOS4, è ora possibile impostare un’immagine di sfondo non solo per la schermata iniziale, ma anche per la home. Possiamo ora visualizzare la fotografia che preferiamo come sfondo per le nostre app. Forse ti sarai accorto che la rubrica settimanale iPhoneWallpapers è ferma da un po’. Ma non è morta! In realtà le uscite sono cambiate da settimanali a “casuali”

E questo di oggi ne è un esempio. Troverai dopo il salto 3 nuove immagini che si aggiungeranno alla già ricca collezione di sfondi per il tuo iPhone.  Sono macro dal tema “bucolico” che ho realizzato in questi giorni di vacanza, che ne pensi? Come stanno sul tuo iPhone?

Come promesso nel precedente articolo, eccovi il layout del sito proposto per il contest di Liquida che (aimè) non ho vinto.

Devo dire che il vincitore merita tutti i miei complimenti. Il suo lavoro mi piace davvero molto e probabilmente rispecchia più della mia proposta il brief proposto dai ragazzi del gruppo Banzai.

Potrai usare il file come preferisci, modificarlo, ripubblicarlo sul web (ovviamente non riproponendo il logo di Liquida, non è di mia proprietà) e distribuirlo e persino venderlo. E’ tuo.

Il file contiene moltissimi livelli, ma non ti sarà difficile usarlo, infatti è tutto organizzato in cartelle, partendo da una organizzazione del tipo header, body, footer e sidebar. Ti basterà effettuare CTRL+click sinistro del mouse per spostarti alla sezione a cui appartiene il livello sul quale avrai cliccato.

Magnetize è un servizio che ho trovato girovagando in rete, e dopo averlo provato, ho deciso di recensirlo. Mi è sembrato di un’usabilità unica e velocissimo da impostare. In pochi minuti il mio Business Card Website (te li ricordi? Te ne ho parlato qualche mese fa) era online con tanto di flusso status da Twitter, link al mio blog, una piccola biografia e i contatti.

Vediamo nel dettaglio come funziona.

Una volta registrato il proprio utente e password (non richiede nessuna conferma via email, quindi nessuna perdita di tempo), c’è un breve wizzard dove ti verrà chiesto di inserire i dati che vorrai visualizzare all’interno della tua pagina, quali siti linkare e l’account di Twitter per agganciare il sito al tuo flusso di stati.

Tra questi passaggi, da notare il pannello per la scelta del tema. Ve ne sono molti, anche se solo 4 (di cui 3 con molti varianti di colori) sono disponibili per gli utenti free, e vi basterà cliccare per vederlo già in azione sul vostro tema senza fastidiose finestre popup per le anteprime.

Conclusioni

Magnetize è un servizio davvero facile da usare, con una velocità ed usabilità strabilianti. In poco tempo abbiamo il nostro biglietto di presentazione online e siamo pronti per condividerlo. Purtroppo penso che questo genere di servizi rimanga inutile per chi con il web ci lavora, pensate come sarebbe presentarsi con un prodotto già sviluppato da terzi piuttosto che con un sito disegnato da soli. Tuttavia, per tutti quei liberi professionisti che potrebbero aver bisogno di presentarsi a potenziali clienti tramite email ad esempio, avere un punto di raccolta con tutti i propri dati e un breve curriculum di presentazione in modo così facile può essere un’ottima soluzione.

I seguenti esempi di pubblicità creativa sono stati raccolti da abduzeedo.com estraendoli da Creative Ad Awards. Hanno tutti come tema le mani e sfruttano questa parte del nostro corpo per comunicare, tramite effetti e giochi fotografici, il loro messaggio.

Penso sia un’ottima fonte di ispirazione che ho pensato valesse la pena riproporti. Buon divertimento!

Avete mai visto uno di quei proiettori di fogli lucidi che si usavano fino a una decina di anni fa? Consistevano in un piano luminoso sul quale poggiare un foglio di plastica trasparente su cui veniva disegnato uno schema, slide o grafico, che tramite un gioco di specchi veniva proiettato su un piano verticale come un muro o un telo bianco.

Ecco, Photoshop funziona proprio come quei fogli lucidi che qui vengono chiamati livelli.Quando lavorate con Photoshop avete la possibilità di lavorare su più livelli sovrapponibili, su ogni livello potete realizzare un elemento che comporrà l’immagine finale del progetto. Nella pila di livelli quindi, quello posto più in alto sarà il più visibile, mentre quello in basso sarà coperto da quelli posti sopra di esso.

Questo permette un più facile controllo e organizzazione del lavoro in quanto si ha la totale padronanza su ogni elemento dell’immagine (se si fa corrispondere ad ogni elemento un livello).

Quando create un nuovo file, vi viene chiesto cosa usare come background. Il background atri non è che il livello posto più in basso ed il primo (ed unico per ora) a far parte del vostro nuovo file. Se scegliete di renderlo trasparente, il file verrà visualizzato con una serie di quadratini bianchi e grigi che indicano la porzione del file totalmente vuota. Ricordate al momento del salvataggio che la zona trasparente viene interpretata solo da determinati tipi di file come le PNG o le GIF. Altri formati come il più comune JPG sostituiranno la trasparenza con il bianco.

La Palette

La palette dei livelli è sicuramente molto complessa, cerchiamo di esaminarla pezzo per pezzo:

Opzioni di fusione
E’ un elenco di algoritmi matematici che, applicati ai singoli pixel del livello, creano svariati effetti con i pixel sottostanti. Ad esempio l’opzione “Moltiplica” effettuerà la moltiplicazione aritmetica del valore numerico del colore di ogni singolo pixel con la risultante di quelli sottostanti. Fate qualche prova per comprendere meglio cosa possono fare.

Opzioni di blocco
Ogni livello può essere bloccato in 4 modalità:

• blocca pixel trasparenti: non permette la modifica dei pixel vuoti (quindi delle aree di quel livello trasparenti)
• blocca immagine: non permette la modifica dei pixel pieni (quindi si può modificare solo le aree vuote)
• blocca posizione: permette la modifica del livello con pennello, gomma, selezioni e riempimenti ma non la posizione all’interno dell’area di lavoro.
• blocca: non permette alcuna azione sul livello

Visibilità
Permette di visualizzare o nascondere il livello, niente di difficile da capire qui

Menù ad icone a fondo palette
Sono le icone che permettono la gestione dei livelli, vediamole singolarmente:

• attivabile solo dopo aver selezionato due o più livelli, permette la concatenazione di questi.
• permette l’attivazione di uno o più effetti da applicare al livello come ombra, bagliore, sovrapposizione di texture. Ogni effetto ha un set di opzioni regolabili, nel caso dell’ombra si può controllarne la distanza, il colore, l’opacità, la dimensione o il disturbo.
• associa una maschera al livello (detta appunto “maschera di livello”). Sulla maschera si lavora solo con bianco e nero e permette di nascondere le parti del livello corrispettive alle parti della maschera colorate di nero.
• i livelli di regolazione e riempimento sono livelli che permettono la regolazione di singole componenti dell’immagine come i livelli di grigio, la saturazione, il contrasto i canali o l’esposizione.
• crea un gruppo, ogni gruppo (cosi come i livelli) si può rinominare e può contenere un numero infinito di livelli e sottogruppi. Utilissimo per ordinare il lavoro quando il numero di livelli cresce.
• di facile comprensione, sono l’icona per creare un nuovo livello vuoto
• per eliminare uno o più livelli. Cliccando sull’icona vi viene chiesto di confermare l’eliminazione del livello selezionato, potete anche eliminarlo trascinandolo direttamente sull’icona.

Opacità e riempimento
L’opacità è misurata in percentuale, al 100% il livello è totalmente visibile, allo 0% diventa come nascosto. Il riempimento invece gestisce l’opacità dei soli pixel del livello riempiti al 100%.

Menù contestuale
Visualizza l’elenco di funzioni base ed avanzate relative ai livelli. Oltre ai soliti “nuovo” o “elimina”, vi sono anche le funzioni di merge e animazione.