Risorse utili - Pagina 3 di 9

Raccolta di font open-source per @font-face

Una collezione di link utili da cui scaricare font liberamente utilizzabili con @font-face.

Utilizzare font personalizzati sui propri siti web ormai non è più un’utopia: con il supporto ormai diffuso della proprietà @font-face è possibile in pochi passi personalizzare un progetto senza dover ricorrere ai classici Arial e Georgia.

Ricordando che è comunque fondamentale preservare la leggibilità, uno dei punti critici è l’utilizzo di font protetti da copyright: non è infatti possibile pubblicarli su una pagina web se sono tutelati dal diritto d’autore. Per questo motivo le soluzioni possibili sono utilizzare servizi esterni come Typekit, oppure scegliere font open-source che non presentano alcun problema legale.

Se optate per la seconda ipotesi, questa raccolta di web font liberamente utilizzabili potrebbe tornarvi utile:

The league of Moveable Type: una collezione appena nata di font open-source disegnati in maniera specifica per l’utilizzo su web con @font-face.
Font Squirrel: una delle migliori raccolte attualmente disponibili. Sul sito sono presenti anche diversi strumenti utili per includere font nei propri progetti.
Google Fonts: Google mette a disposizione una buona raccolta di font, che è possibile includere sui propri siti direttamente dai server di Mountain View. Sono presenti comunque anche i link per il download.
Webfonts Wiki: offre un elenco abbastanza dettagliato di font utilizzabili con vari tipi di licenze come OpenFont, GNU, CC oppure open-source.
Fonthead: una discreta collezione di font gratuiti ed a pagamento.
Ten by twenty: tutti i font gratuiti di questo sito sono espressamente utilizzabili con @font-face; quelli a pagamento no.
Dafont: una delle più ampie collezioni di font gratuiti. Potete utilizzarli con @font-face, ma fate sempre attenzione ad eventuali clausole prima del download

Come utilizzare @font-face?

Avete trovato il font che fa per voi ma non sapete come includerlo sul vostro sito? Se la semplice guida che ho pubblicato vi risulta ancora troppo complessa, troverete fantastico il @font-face generator di Font Squirrel: dovrete solo caricare il font desiderato ed avrete immediatamente un kit pronto all’uso con tutti i file necessari.

Web Design e daltonismo: articolo su Your Inspiration Magazine

E’ uscito il terzo numero di YIM: anche in questo numero si parla di accessibilità.

Il progetto di Your Inspiration Magazine è importante nel panorama italiano: una rivista di qualità per web designer non è facile da realizzare, e le persone coinvolte nel progetto si stanno impegnando a fondo per creare qualcosa di veramente notevole. Ne avevo già parlato in occasione dello scorso numero, e torno volentieri a parlarne per una nuova uscita.

Anche questa volta sono stato coinvolto direttamente con un articolo su web design e daltonismo su cui mi farà molto piacere ricevere i vostri pareri. Avevo già affrontato l’argomento su questo blog, ma rimanevano ancora varie cose da sottolineare e questa mi è sembrata un’ottima occasione per poter parlare di accessibilità ad un più ampio numero di lettori.

In questo numero di YIM sono tanti gli articoli da leggere: dedicate un po’ di tempo a sfogliare la rivista e se vi piacciono i contenuti condividetela tra i vostri amici e conoscenti.

Link: Your Inspiration Magazine – Numero 3

I migliori regali di Natale online

I regali digitali perfetti per web designer e appassionati di tecnologia: account pro, abbonamenti e temi Wordpress.

Manca un mese a Natale ed inizia la classica corsa al regalo. Ogni anno su questo blog ho sempre proposto idee fuori dal comune per web designer e geek, ma quest’anno voglio introdurre un cambiamento. Perché legarsi necessariamente ad un bene fisico? Se il destinatario del vostro regalo è un appassionato di tecnologia e di internet, ci sono ottime possibilità che apprezzi di più un regalo digitale.

In questo articolo trovate una selezione dei migliori regali online per tutti i gusti, più un bonus finale per chi ancora non vuole separarsi dai beni fisici.

Continua a leggere I migliori regali di Natale online »

Your Inspiration Magazine: si parla di accessibilità

Anche un mio articolo sul secondo numero di Your Inspiration Magazine: la rivista digitale per web designer.

Quest’estate è stata avviata un’interessante iniziativa made in Italy: è nata infatti Your Inspiration Magazine, una rivista digitale realizzata dai ragazzi di Your Inspiration Web.

Il primo numero è stato pubblicato per sondare il terreno e stabilire degli obiettivi: adesso che l’esperimento è stato avviato con successo si comincia a fare sul serio.

Mi fa molto piacere essere stato invitato a dare il mio contributo, ed è proprio per questo motivo che troverete anche un mio articolo tra quelli del numero di settembre. Il titolo è “Accessibilità: quali sono gli errori più comuni?”.

Vi invito a dare un’occhiata al progetto: in passato altri hanno provato a realizzare qualcosa di simile, ma nessuna rivista ha raggiunto degli standard così elevati (ricordate che è tutto gratis).

Il progetto grafico è eccellente così come il sito, e partecipano all’iniziativa autori di tutto rispetto. Non voglio citare nessuno perché c’è davvero l’imbarazzo della scelta: tra l’altro nei prossimi numeri ci saranno anche interessanti new entry. Io vi posso già dire che darò il mio contributo anche nel numero di ottobre: è ancora presto per parlarne, ma continuerò a scrivere di accessibilità della rete.

Se avete commenti sulla rivista o sul mio articolo non esitate a scrivermi. Trovate il numero di settembre a questo indirizzo: buona lettura!

User Experience: diagrammi e grafici

Una collezione per chi si interessa a UX e web design: dalla progettazione di un sito alla sua realizzazione.

In passato era già capitato di discutere di User Experience: in Italia se ne parla ancora poco, ma è un aspetto fondamentale per la realizzazione di un buon progetto web.

Se siete interessati ad approfondire l’argomento, ho raccolto una serie di grafici e diagrammi da applicare soprattutto all’ambito web, tra cui la fantastica UX Wheel di Magnus Revang.

Tutti descrivono in maniera più o meno dettagliata le competenze necessarie per realizzare un sito web completo, illustrando la strada da percorrere. Non è sempre facile tenere presenti gli obiettivi finali: questi diagrammi possono essere d’aiuto anche per capire l’utilità di certe attività durante lo sviluppo.

Studi di usabilità, attenzione per l’accessibilità e per l’architettura dell’informazione: sono tutte parti fondamentali della creazione di un sito se si vuole offrire un’esperienza positiva all’utente finale.

I diagrammi

UX Wheel

Praticamente d’obbligo stamparla e tenerla sempre presente. Descrive le varie fasi creative associando i risultati a dei processi produttivi, per arrivare ad ottenere un valore finale.

UX Honeycomb

Al contrario del diagramma precedente qui non viene identificato un processo produttivo, ma un insieme di fattori che contribuiscono al raggiungimento di una user experience positiva. Non esiste infatti solo l’usabilità.

UX Treasure Map

Peter Morville ha raccolto in un unico schema molti fattori, rappresentando il tutto come un percorso da seguire per raggiungere l’obiettivo.

The Fundamentals of Experience Design

Un modello di grande impatto visivo dove vengono riunite le persone, le loro attività, ed il contesto di queste attività. Sotto le annotazioni superficiali esistono poi livelli più approfonditi: basta voler scavare.

Questi sono alcuni dei diagrammi più interessanti pubblicati anche su UX Booth qualche giorno fa. Se volete approfondire il discorso fate riferimento al post completo, dove troverete altro materiale. In aggiunta, voglio condividere anche le risorse che seguono.

The Disciplines of User Experience

Un diagramma che vuole rappresentare tutte le discipline coinvolte nel raggiungimento di una user experience positiva. Interessante la domanda che si pone l’autore nel post: cosa può essere indentificato come UX Design, escludendo le varie attività da cui è costituito (visual design, interaction design, ecc.)? E’ difficile identificare infatti l’UX Design come un’attività separata ed autonoma, a meno che ci si limiti a considerarlo come semplice coordinamento.

User Experience Diagram Rationalization

Luke Wroblewski ha riunito in un unico schema il lavoro fatto da altri esperti del settore per rappresentare gli obiettivi, i processi e le discipline coinvolte nella realizzazione di un prodotto. Tutto in una sola immagine.

Se conoscete altre risorse simili segnalatele nei commenti, sono a vostra disposizione.

10K Apart: un’applicazione web in 10kB

La sfida? Realizzare una web app minimalista e concorrere alla vincita di 3000$.

Con l’arrivo della banda larga e l’aumento della velocità di connessione, internet è stato affollato da applicazioni e siti web molto più pesanti del necessario. Qualcuno potrebbe erroneamente pensare: “A cosa serve l’ottimizzazione quando ci sono connessioni ADSL disponibili?”

Questo atteggiamento è sbagliato, e proprio per fare un salto nel passato e tornare a realizzare applicazioni ben ottimizzate è stato lanciato il concorso 10K Apart. Ci sono più di 10000$ in premi per i concorrenti: l’invito è quello di proporre delle applicazioni web che non occupino più di 10 kilobyte.

L’introduzione sul sito infatti recita:

It’s time to get back to basics — back to optimizing every little byte like your life depends on it. Your challenge? Build a web app in less than 10 kilobytes.

E’ possibile appoggiarsi a delle librerie esterne per migliorare le proprie creazioni dal punto di vista grafico e funzionale: jQuery, Prototype e Typekit sono ammesse, e non influiranno sul conteggio dei 10kB.

Se volete partecipare avete tempo fino al 25 agosto. Intanto è possibile già vedere sul sito ufficiale le web app proposte, in attesa di conoscere il vincitore.

Personalizzare i font con Typekit

Poche righe di JavaScript sono sufficienti per personalizzare il proprio sito usando font alternativi.

Da diverso tempo sto sperimentando l’uso di Typekit, un servizio che permette di utilizzare font diversi dai soliti noti (Arial, Verdana, Georgia…) in modo compatibile con tutti i principali browser. Il funzionamento è semplice e si basa su font-face e JavaScript, eliminando il problema relativo ai copyright dei font che sono interamente ospitati sui server di Typekit.

I risultati del test

Sono molto soddisfatto dei risultati ottenuti sul mio blog personale, dove sto effettuando le prove. La configurazione è semplice, e l’account trial gratuito permette di fare test senza problemi, mettendo a disposizione più di un centinaio di font (sono oltre 400 negli account a pagamento). La libreria disponibile tra l’altro cresce nel tempo, perché ne vengono progressivamente aggiunti sempre di nuovi.

Quali sono i possibili svantaggi da considerare? Sicuramente il peso della pagina, che a seconda del font scelto cambia notevolmente. Utilizzando il font Droid Serif, nelle sue forme Regular e Italic, ho una pagina che pesa ben 79kb in più del normale. Le cose potrebbero cambiare senza usare il corsivo, ma è necessario comunque fare attenzione a dettagli come questo. Il peso dei font aggiuntivi è comunque sempre visibile nel pannello di amministrazione di Typekit, non è quindi un dettaglio nascosto, da calcolare autonomamente.

Prima di scegliere un font inoltre è bene verificarne l’aspetto sui vari browser: non sempre il rendering è ottimale, soprattutto su Internet Explorer.

Questi però non sono problemi relativi a Typekit, ma fattori da considerare quando si usano font alternativi. L’unico limite del servizio, con l’account trial, è l’inserimento di un piccolo badge in basso a destra sul sito, e la banda mensile di 5Gb per i font.

Scegliere Typekit o usare i CSS?

L’alternativa CSS-only è sempre praticabile: ne avevo parlato nel 2008 quando solo Safari supportava certe proprietà e adesso potrebbe essere la soluzione ideale. Il problema però è l’esistenza di un copyright su quasi tutti i font, spesso anche quelli gratuiti, che non sempre possono essere utilizzati liberamente.

Un altro limite della soluzione autonoma è dato dalle solite differenze tra browser. Firefox supporta Web Open Font Format e TrueType, Safari e Chrome supportano solo TrueType, Explorer supporta EOT, mentre Safari Mobile (iPhone e iPad) usano SVG. Un grande caos, che obbliga lo sviluppatore a includere un font in tutti questi formati per avere risultati coerenti.

Per questo motivo soluzioni come Typekit sono l’ideale: certo, c’è da considerare una minima spesa aggiuntiva se non si vuole usare l’account gratuito con i relativi limiti, ma i vantaggi esistono.

Ci sono anche altre soluzioni alternative, come Typotheque (che concede licenze anche per la stampa) e Kernest, ma non le ho provate personalmente. Ve le segnalo se siete interessati a sperimentare, in attesa di altri servizi come Fontdeck.

A List Apart in italiano

Nasce la versione italiana di A List Apart, la rivista online per i lavoratori del web.

Ho scoperto la notizia per caso, notando l’account Twitter: è appena nata la versione italiana di A List Apart, una delle voci più autorevoli sul web per i professionisti del web design. Il sito italiano ripropone da Febbraio 2010 tutti gli articoli del sito originali, traducendoli.

E’ un’ottima notizia per chi ha problemi di lingua (anche se l’inglese è ormai un must per chi vuole lavorare sul web) e per la diffusione di questo magazine, che da anni si distingue dalla massa pubblicando due lunghi articoli a settimana.

Il progetto è gestito da Valeria e Carlo Brigatti, a cui ho rivolto qualche domanda.

Ecco le risposte di Valeria:

Come è nata l’idea di Italian ALA? E’ stato complicato realizzarla?

Ho conosciuto A List Apart quando ho cominciato ad occuparmi di web design. Ho da subito trovato gli articoli pubblicati molto interessanti ed istruttivi. Circa un anno e mezzo fa, mi è venuta l’idea di creare una versione italiana del sito, che traducesse sistematicamente tutti gli articoli pubblicati da A List Apart, per offrire alle persone che si occupano di web, ma non padroneggiano l’inglese a sufficienza, la possibilità di tenersi aggiornati agevolmente. Così ho contattato Jeffrey Zeldman e ho proposto la mia idea, che è stata subito accolta con favore, ma ci è voluto più di un anno perché il team di A List Apart avesse chiara in mente la direzione che il mio progetto avrebbe dovuto prendere. Così, a gennaio sono stata ricontattata per dare il via all’operazione.

Chi siete? Cercate collaboratori?

l team di Italian A List Apart è costituito da me e da Carlo Brigatti. Carlo si occupa della gestione tecnica del sito e del suo sviluppo. Inoltre, è l’autore delle bellissime illustrazioni che accompagnano ogni articolo. Io collaboro con Carlo per la parte tecnica (più che altro fornisco direttive che vengono da lui trasformate in realtà :) ) ed eseguo le traduzioni.

Per il momento riusciamo a gestire il carico di lavoro piuttosto bene. Non percepiamo nessun compenso per il lavoro che svolgiamo, quindi preferiamo gestircelo noi fintanto che saremo in grado.

Potete comunque aiutare Italian A List Apart facendolo conoscere nel web italiano e partecipando alle discussioni degli articoli sul nostro sito. Inoltre, a breve saranno disponibili degli spazi pubblicitari che potranno essere acquistati da chi fosse interessato (Happy Cog – creatrice di A List Apart – ci autorizza a tenere i compensi derivanti dalla pubblicità sul sito).

Come mai il sito è basato su Joomla! e non su ExpressionEngine come l’originale?

Come ho già accennato, non abbiamo un budget per Italian A List Apart e per abitudine Carlo ed io lavoriamo con CMS open source e free, pertanto ci siamo orientati fin da subito verso questa scelta. Nello specifico, Carlo conosce molto bene Joomla! e pertanto si è deciso di utilizzarlo come sistema di gestione dei contenuti.

Trovate la versione italiana di A List Apart su italianalistapart.com

Regali di Natale: alcune idee interessanti

Qualche regalo utile per geek ed appassionati di tecnologia.

Dopo i suggerimenti degli anni scorsi, torna l’appuntamento con il post dedicato ai regali di Natale. Ho riunito alcune idee originali, sperando possano tornare utili a qualcuno: non sono oggetti per tutti, ma potrebbero fare felici molti geek.

GelaSkins

Cover di tutti i tipi, realizzate da più di 100 artisti, per computer portatili, iPhone, Blackberry ed iPod. Alcune sono più vistose, e sinceramente non so se sarei disposto a coprire un MacBook con una pellicola così appariscente, ma quelle per smartphone sono veramente belle.

Sito web: GelaSkins

T-Shirt: Binary Tree e Dexter

Ho scelto due magliette tra le tante disponibili online: Binary Tree e Dexter. I siti di riferimento spediscono anche in Italia, ed hanno diversi altri modelli interessanti.

Retro Floppy Disk Notebook

Il nome dice tutto: un semplice blocco note con la forma di un vecchio floppy da 3.5”. Per nostalgici.

Retro Floppy Disk Notebook

Drobo

Drobo è una soluzione interessante (ma non altrettanto economica) per il backup dei propri dati. E’ un hub in cui possono essere inseriti fino a quattro hard disk SATA da 3.5”: grazie ad una soluzione proprietaria chiamata BeyondRAID garantisce la sicurezza dei dati anche in caso uno dei dischi interni si rompa. Può essere collegato ad un computer tramite Usb 2.0 o Firewire 800.

Data Robotics: Drobo

My Book World Edition

Questo è stato un mio recente acquisto: il Western Digital My Book World Edition è un hard disk di rete, che collegato tramite cavo ethernet al router permette di essere letto e scritto da tutti i computer della casa. Lo consiglio come soluzione alternativa per chi ha bisogno di un disco di backup. Ha anche alcune funzioni supplementari interessanti, come la possibilità di programmare dei download gestiti automaticamente dal disco: basta fornirgli l’url del download e scaricherà il file senza bisogno di lasciare il computer acceso. I file possono essere letti anche in remoto grazie al servizio MioNET di Western Digital.

Western Digital My Book World Edition

Sony Reader Pocket Edition

Questo Natale gli eBook reader sono tra gli oggetti tecnologici più chiacchierati: basta seguire le discussioni su Friendfeed per notare l’attenzione del mondo geek a riguardo. Uno dei più compatti è il PRS-300 della Sony, che però in questo momento non è ancora disponibile in Italia. Se andate all’estero, dategli un’occhiata: permette la lettura di praticamente tutti i formati conosciuti, compresi i .pdf, che possono essere caricati direttamente sul dispositivo.

PRS-300: Sony Reader Pocket Edition

Kindle DX

Parlando di eBook Reader, non poteva mancare il Kindle di Amazon. E’ sicuramente una soluzione più costosa, che ha dalla sua alcuni vantaggi come il grande schermo, ma anche dei difetti. Non è infatti possibile caricare file direttamente sul lettore, ma è necessario convertirli passando per Amazon.

Amazon Kindle DX

Videogames su Play.com

Per chi ha una console, play.com è il sito da tenere sempre presente. In questo periodo le offerte prenatalizie non mancano: ci sono titoli in vendita a meno di 20€, ma anche le ultime novità intorno ai 50€. Batman: Arkham Asylum, Mass Effect, Dead Space, ed i più recenti Modern Warfare 2, Assassin’s Creed 2 e Dragon Age: Origins.

Sito web: play.com

Se avete altri regali da suggerire lasciate un commento, potreste aiutare qualcuno nella scelta. Trovate anche altre idee nei post dedicati ai regali natalizi del 2008 e del 2007.

Pirobox: la nuova versione

Un ottimo plugin per la visualizzazione di immagini, realizzato in Italia.

Pirobox è un plugin di jQuery per la creazione di gallerie di immagini. E’ una creazione tutta italiana, e ne avevo già parlato in passato su questo sito. Mi ha fatto molto piacere scoprire che Diego Valobra, il suo creatore, ne ha appena rilasciato la nuova versione con alcuni miglioramenti:

diminuito il peso del codice, per una maggiore velocità di caricamento: da 25kb a 11kb
implementata la navigazione da tastiera
controllo sui link errati, che non fermano lo script ma visualizzano un’immagine di avviso
riposizionamento automatico delle immagini durante lo scroll della pagina
png fix per Explorer 6

Tutto questo si aggiunge all’ottimo lavoro che Diego aveva già fatto. Sono notevoli anche le opzioni di personalizzazione: tre skin sono già pronte (nera, bianca e trasparente), e c’è la possibilità tramite alcuni parametri di decidere la posizione delle frecce di scorrimento nelle gallerie di immagini (alla base dell’immagine o ai lati della pagina).

Se nel vostro prossimo progetto avete bisogno di uno script simile a Lightbox per mostrare anteprime di immagini, provate Pirobox. Alcuni dettagli come la navigazione da tastiera possono fare la differenza, e l’implementazione non richiede tag aggiuntivi nel codice: è sufficiente una classe html per abilitare lo script, in modo semplice e pulito.

Per vedere le demo e le caratteristiche di questo plugin in dettaglio vi rimando alla pagina ufficiale di Pirobox.