CSS3: come usare le transizioni

Una guida sulle CSS3 transitions, disponibili già oggi sui browser più evoluti.

Leggendo CSS3 for Web Designers di Dan Cederholm ho avuto modo di approfondire alcuni moduli che pur non essendo ancora degli standard possono essere già utilizzati in maniera efficace.

La parte che riguarda le CSS3 transitions è una delle più interessanti, perché consente di creare semplici effetti grafici con poche righe di codice all’interno del foglio di stile. E’ assurdo installare interi framework JavaScript per un banale effetto dissolvenza: adesso è possibile evitarlo, con alcuni compromessi.

Continua a leggere CSS3: come usare le transizioni »

WordPress: personalizzare la pagina di scrittura post

Istruzioni per modificare la struttura delle pagine admin di Wordpress, nascondendo gli elementi inutili.

Se gestite un blog WordPress dando agli utenti la possibilità di registrarsi, avrete gli iscritti suddivisi su più ruoli. Normalmente WordPress mostra a tutti gli utenti registrati la stessa pagina di editing dei post, ma in alcuni casi potrebbe essere utile poterla personalizzare, nascondendo alcuni pannelli.

Sono infatti presenti dei box inutili per degli utenti alle prime armi: campi personalizzati, revisioni, trackback, tutti dettagli che creano solo confusione. E’ possibile modificare il layout delle pagine di amministrazione di WordPress tramite il pannello impostazioni schermo, ma è comunque una soluzione che solo gli utenti più esperti sono in grado di notare.

Continua a leggere WordPress: personalizzare la pagina di scrittura post »

Guida all’uso di HTML5

Tutte le indicazioni per utilizzare HTML5: semantica, CSS reset, tag video e compatibilità cross-browser.

Le sperimentazioni con HTML5 sono già iniziate da tempo, e nonostante serviranno ancora degli anni prima che la specifica diventi uno standard del W3C, si possono già trovare in rete molti esempi del suo utilizzo.

Dopo avere introdotto l’argomento su questo blog, ho approfittato di un piccolo progetto basato su Sweetcron per prepararmi e testare con mano lo stato attuale di HTML5. E’ così che è nata la nuova versione di 1la.it, lavoro che mi ha aiutato a mettere in ordine le idee per scrivere questa guida.

Continua a leggere Guida all’uso di HTML5 »

I migliori post del 2010

Una raccolta dei post più letti del 2010, ordinati per categoria.

Arrivati ormai vicini alla fine del 2010, mi pare giusto fare un po’ di ordine e recuperare dagli archivi di questo blog alcuni post. Ho fatto la scelta in base a due criteri: il numero di visite e l’argomento trattato, cercando di coprire più materie possibili.

Continua a leggere I migliori post del 2010 »

Alternative a Delicious

Yahoo! sta per chiudere alcuni servizi tra cui l’utilissimo Delicious: è obbligatorio cercare delle alternative valide.

La notizia è arrivata come un fulmine a ciel sereno: Yahoo! si prepara a chiudere Delicious insieme ad altri servizi. Tutto è iniziato su Twitter, dove è stata pubblicata la slide di uno staff meeting con elencati i servizi da chiudere. Tra questi appaiono Altavista, MyBlogLog, Yahoo! Bookmarks, Yahoo! Picks e appunto Delicious.

Continua a leggere Alternative a Delicious »

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

Zepto.js: framework JavaScript per iOs e Android

Un framework js in soli 2kb, con il supporto di tap, double tap e swipe.

Ogni sito ormai dovrebbe avere una versione mobile: qualche tempo fa avevo suggerito MobilePress come soluzione per blog e siti basati su WordPress. Non sempre però un plugin può soddisfare tutte le necessità: in certi casi è necessario realizzare soluzioni su misura, con un modello di interazione differente dal classico punta e clicca. Basti pensare al numero enorme di smartphone touchscreen che sono in circolazione in questo momento: perché non sfruttare le potenzialità che offrono?

È anche per questo motivo che è nato Zepto.js, un framework JavaScript per dispositivi mobili basati su webkit. Integrandolo nella versione mobile (e solo su quella) potrete interagire con tutti i cellulari basati su iOs e Android, praticamente la maggior parte del mercato mobile.

Anche se il progetto è ancora in beta, si fa notare il peso della libreria: solo 2kb (nella versione compressa). Dieci volte meno rispetto a jQuery o Prototype, che devono preoccuparsi di funzionare anche su altri browser come Internet Explorer.  Siete ancora convinti di utilizzare gli altri framework per un sito mobile?

Tra le altre caratteristiche di Zepto.js:

  • linguaggio compatibile con jQuery
  • supporto Ajax
  • riconoscimento di Tap, doppio Tap (pressione sullo schermo con un dito) e Swipe (scorrimento di un dito sullo schermo). Ad esempio:
  • Open Source

Tap e Swipe possono essere usati semplicemente così:

$('selettore').tap(function(){...});
$('selettore').doubleTap(function(){...});
$('selettore').swipe(function(){...});

Potete scaricare zepto.js dal sito ufficiale. Se volete approfondire trovate su SlideShare anche le slide con cui Thomas Fuchs ha presentato la sua creazione.

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 »

CSS design e standard di lavoro

Le linee guida della BBC per i “future media” includono diverse raccomandazioni sulla scrittura dei CSS. Simili pratiche sono solo inutili complicazioni?

Uno dei siti corporate che presta più attenzione ai dettagli è quello della BBC: all’apparenza semplice ed ordinato nonostante i numerosi contenuti, si basa su molte pagine di specifiche tecniche e linee guida che devono essere rispettate dai suoi sviluppatori.

Continua a leggere CSS design e standard di lavoro »