Usare gli sprite CSS

Cosa sono gli sprite CSS? Una veloce spiegazione ed uno strumento per utilizzarli.

CSS SpritesL’utilizzo degli sprite CSS è una delle tecniche fondamentali da imparare quando si è alle prese con lo sviluppo di un sito. Consiste semplicemente nel riunire più immagini (spesso icone) in una più grande, come è possibile vedere nell’esempio qui a fianco (dove ho utilizzato alcune Silk Icons). Per selezionare quindi una singola immagine sarà sufficiente usare i CSS e la proprietà background-position.

Questa tecnica ha due vantaggi principali:

  1. diminuisce il numero di richieste HTTP al server migliorando le prestazioni del sito
  2. evita ritardi nel caricamento delle immagini usate per lo stato :hover dei link

Per velocizzare il lavoro e creare degli sprite CSS in pochi secondi, vi segnalo un fantastico CSS Sprite Generator che automatizza tutto il processo. Vi basterà caricare un file .zip contentente le immagini, impostare alcuni parametri come la distanza tra gli elementi ed il formato (png, gif o jpg), e lo strumento creerà anche le righe di CSS necessarie.

L’unico limite di questo tool è la dimensione del file da uploadare, che al momento non può superare i 500kb. Utile quindi per piccole immagini, mentre per files più ingombranti è necessario cercare altre alternative.

Installare in contemporanea IE6, IE7 e IE8

Avere le tre versioni di Internet Explorer su un unico computer è possibile, per la gioia dei web designer.

Internet Explorer: icona L’uscita di Internet Explorer 8 per gli sviluppatori significa soprattutto una cosa: un nuovo browser su cui dover testare i propri lavori. I browser Microsoft diventano quindi tre, ma come è possibile installarli in contemporanea?

La soluzione non è così complicata:

  • IE6 e le versioni precedenti possono essere installate con Multiple IE di Tredosoft
  • IE7 si ottiene grazie all’installer standalone fornito sempre da Tredosoft
  • IE8 viene installato con il normale aggiornamento di Windows

Questa soluzione ha qualche problema per quanto riguarda Internet Explorer 6, soprattutto con siti che fanno un uso intensivo di JavaScript, ma il rendering nella maggior parte dei casi è fedele all’originale.

Un’altra possibilità è data da uno strumento Microsoft chiamato Expression Web SuperPreview, ma vi permetterà solamente di avere IE6 in parallelo con uno degli altri due browser: o la versione 7 o la 8, ma non entrambe.

Altre alternative come installare delle virtual machine sono possibili, ma se non avete particolari esigenze meglio evitare di complicarsi la vita.

Su cosa succederà nei prossimi mesi è difficile fare delle previsioni, ma IE6 potrebbe anche continuare a resistere. E’ plausibile infatti che siano gli utenti di Explorer 7 ad aggiornare: gli altri se non l’hanno fatto fino ad ora difficilmente cambieranno idea, qualsiasi sia il motivo.

Intanto c’è chi ha già trovato il primo bug di Explorer 8: devo ancora verificare il problema, ma pare che visitando questa pagina con il nuovo browser Microsoft non venga visualizzato correttamente lo sfondo. I prossimi giorni saranno determinanti per farsi un’idea più chiara, leggendo le reazioni della rete.

HTC Dream e HTC Magic in Italia

Arrivano in Italia i nuovi smartphone HTC con Android, il sistema operativo di Google. Cosa cambia rispetto all’iPhone?

E’ sbarcato in Italia HTC Dream, il primo telefono con Android, il sistema operativo di Google di cui si parla da tempo, ma che non è stato ancora capace di conquistare una buona fetta di mercato in America.

Incuriosito dalla novità, ho voluto esaminare le caratteristiche tecniche di questo telefonino e del prossimo HTC Magic, che uscirà ad Aprile il 5 Maggio. Mi interessava soprattutto sapere le differenze con l’iPhone, il principale rivale del settore.

HTC Dream

HTC Dream
In Italia sarà l’HTC Dream ad aprire la strada ad Android: sarà venduto senza vincoli da Tim a 429€, un prezzo decisamente più alto rispetto a quanto ci si aspettava. Qualcuno parlava addirittura di prezzi intorno ai 100-200€: era un’utopia.

E’ lo smartphone di HTC munito di tastiera, che però mostra un design massiccio e più ingombrante rispetto all’iPhone.

HTC Magic

HTC Magic

Ad Aprile Il 5 Maggio sarà la volta di HTC Magic, la vera novità. Senza tastiera fisica, mostra un design più elegante, sarà venduto in bianco e nero (ricorda niente?) a 449€ sia da Vodafone che da Tim.

Il confronto con iPhone

Quello che interessa di più è l’analisi delle differenze con lo smartphone Apple, il vero rivale.

Software

I modelli HTC hanno inevitabilmente la meglio dal punto di vista dell’apertura a software di terze parti: usando Android, sarà molto più facile installare qualsiasi cosa su questi telefonini. Su iPhone o si passa attraverso l’App Store o si esegue il jailbreak invalidando la garanzia, non ci sono altre vie.

Tastiera fisica

Se siete amanti della tastiera, il Dream è l’unico che la possiede, ma è importante fare alcune considerazioni sull’ergonomia. Presenta infatti alcuni problemi di maneggevolezza, dovuti alla sporgenza sulla destra del telefonino con la trackball ed i tasti di navigazione. Non è raro trovarsi a sfiorare la trackball o un tasto scrivendo sulla tastiera. Considerando che con l’iPhone OS 3.0 che sarà rilasciato a Giugno, la tastiera virtuale sarà sempre disponibile anche in modalità ingrandita ruotando il telefono, la scelta è da valutare con attenzione.

Touchscreen

E per quanto riguarda il touchscreen? Una cosa importante da sottolineare è che entrambi gli HTC hanno uno schermo capacitivo, come quello dell’iPhone: sensibile allo sfioramento con le dita e non alla pressione, cosa che sui sistemi con Windows Mobile o sui più recenti Nokia (ad esempio il 5800 Xpress Music) farà dannare più di un utente. L’esperienza d’uso di uno schermo simile è sicuramente migliore: personalmente non comprerei mai un telefono con touchscreen resistivo a meno di non preferire il pennino come strumento di input.

Parlando di multitouch c’è un’altra nota importante da considerare: è presente solo su iPhone e non sui due HTC. Una mancanza non da poco. La prima cosa che mi è venuta in mente è la scrittura sulla tastiera virtuale dell’HTC Magic: non sarà possibile premere due lettere in sequenza veloce.

La batteria

La batteria dell’iPhone può essere sostituita solo portandolo in assistenza, quello degli HTC è intercambiabile: un punto a favore per questi ultimi. Per quanto riguarda la durata però, non aspettatevi miracoli, anzi. La durata dichiarata dell’HTC Magic in standby è addirittura inferiore a quella dell’iPhone: difficilmente arriverà a due giorni di autonomia: la possibilità di avere più applicazioni in background si fa sentire in questo senso.

Esperienza d’uso

Il vero vantaggio dell’iPhone è il sistema operativo: è su questo campo che avviene il vero scontro con i telefonini con Android. Il successo di un dispositivo viene decretato dalla sua facilità d’uso e dalla velocità di risposta, e probabilmente sarà l’HTC Magic il rivale più agguerrito.

A seguire potete vedere un video tour di questo smartphone, dove si nota l’ottima velocità di risposta oltre all’integrazione ben realizzata con tutti i servizi Google, da YouTube a Google Maps:

Aggiornamento del 25 Marzo 2009: è stato pubblicata un’altra videorecensione dell’HTC Magic molto interessante. Bello anche il confronto con l’iPhone l’iPod Touch, che risulta di dimensioni simili anche se ovviamente più sottile: la velocità di risposta sembra comunque eccellente. Ecco il video:

Conclusioni

La scelta, considerando che il prezzo non è così differente tra i vari dispositivi, dipende dalle vostre preferenze. Fondamentale documentarsi, provare i dispositivi e capire quale risponde alle vostre esigenze: è inutile comprare un iPhone per l’estetica se pensate di non riuscire a scrivere con una tastiera virtuale, in quel caso molto meglio l’HTC Dream.

Cercate di scoprire tutte le piccole differenze che possono interessarvi, senza dare per scontato che gli smartphone Android siano meno “chiusi”. Un esempio? Le cuffie dell’HTC Magic usano un connettore proprietario, quindi niente jack standard da 3,5mm per i vostri auricolari preferiti.

Aggiornare l’interfaccia di un sito web

Rinnovare l’interfaccia di un sito spesso è un trauma per gli utenti abituali: meglio procedere per gradi?

Aggiornare l’interfaccia di un sito web spesso ha ripercussioni importanti sugli utenti abituali. Dopo un breve periodo di apprendimento è facile imparare la posizione degli elementi nelle pagine, per questo motivo qualsiasi cambiamento può essere problematico.

L’esempio più recente è quello di Facebook: ha stravolto l’homepage, e nonostante gli avvertimenti che anticipavano l’aggiornamento le critiche non si sono fatte attendere. Migliaia di utenti insoddisfatti della nuova interfaccia si sono fatti sentire, reclamando quella precedente.

Evoluzione continua

La soluzione in molti casi potrebbe essere semplice: invece di aggiornare tutto in una volta, meglio procedere per gradi, apportando modifiche minori. In questo modo gli utenti saranno capaci di abituarsi al cambiamento, anzi molti non noteranno nemmeno le nuove funzionalità finchè non le troveranno casualmente.

E’ la pratica adottata da molte applicazioni web in beta costante (qualcuno ha detto Gmail?), che non possono permettersi di rimanere statiche nel tempo. Grazie ai feedback degli utenti le modifiche arrivano gradualmente, correggendo problemi ed introducendo nuove funzionalità.

Il nuovo spaventa

Un altro aspetto da considerare è il “fattore novità”. Molti si lasciano facilmente spaventare dal nuovo, finendo magari per scoprire che non è così male dopo un normale periodo di apprendimento.

Per questo motivo le critiche vanno sempre valutate con attenzione, cercando di intuire il male minore. Se un’interfaccia ha realmente bisogno di essere aggiornata introducendo importanti cambiamenti, gli utenti se ne accorgeranno col tempo: l’importante è rendere la transazione meno traumatica possibile.

Se avete intenzione di aggiornare il vostro blog, o avete un sito destinato a cambiare look, una soluzione potrebbe quindi essere farlo per gradi. Mantenere degli elementi dell’interfaccia comuni tra le due versioni è una scelta saggia, in modo che i visitatori possano orientarsi facilmente.

Uno Screen Reader per i test

Tutto il necessario per effettuare dei test con uno screen reader sul proprio computer.

Utilizzare uno screen reader per i test sul proprio computer è fondamentale: se non ne avete mai sperimentato uno vi consiglio di farlo. E’ difficile rendersi conto di cosa voglia dire finchè non si prova personalmente.

Come effettuare dei test?

Proprio in questi giorni ha parlato dell’argomento anche Roger Johansson, citando due interessanti articoli in inglese che spiegano dettagliatamente i passi da seguire:

Le istruzioni sono semplici, anche perchè i software da utilizzare sono gratuiti. Personalmente vi consiglio JAWS, quello più diffuso, che può essere usato gratuitamente in sessioni di 40 minuti.

Questo il necessario:

  1. Una virtual machine per avere un ambiente di test isolato dal resto, che può essere facilmente messo in standby e ripristinato quando serve
  2. Un browser che supporti le WAI-ARIA, come Firefox 3 o il futuro Internet Explorer 8
  3. Una configurazione ideale dello screen reader scelto, per la quale vi consiglio di seguire il link segnalato in precedenza

Cosa pensano gli utilizzatori di screen reader?

Sperimentare il funzionamento di uno screen reader può servire anche a capire meglio i risultati del sondaggio di WebAIM, effettuato con circa 1100 utenti.

E’ un documento importante per comprendere le caratteristiche di un sito accessibile. Non sempre è facile trarre conclusioni univoche, perchè ogni utente ha le sue preferenze personali, ma alcuni dati sono indicativi: basti pensare che Flash è stato considerato un ostacolo difficile da comprendere dal 71.5% dei partecipanti, e che il 76% usa i titoli (headings) per muoversi nelle pagine.

La qualità dei vostri siti potrebbe migliorare anche con delle piccole modifiche: perchè non fare un test con uno screen reader?

Exciter, nuovo tema per WordPress

Disponibile per il download il mio nuovo tema per Wordpress, in italiano ed inglese.

Exciter screenshot

DownloadDemo

Sono contento di poter finalmente annunciare il rilascio del mio nuovo tema per WordPress: Exciter.

E’ un template a colonna singola, minimalista ma efficace per chi vuole un blog focalizzato esclusivamente sui contenuti. Le pagine sono raggiungibili da un menu posizionato nell’header, ma non esiste una vera e propria sidebar.

Le widget infatti appaiono distribuite su due colonne all’interno del footer, che può essere personalizzato facilmente dall’amministrazione di WordPress. Se volete cambiare le widget presenti di default, il mio consiglio comunque è di inserirle in egual numero in modo che la grafica sia bilanciata correttamente.

Supporta tutte le nuove funzioni di WordPress 2.7, i post sticky ed i commenti nidificati e paginati.

E’ presente anche qualche riga di JavaScript per abilitare lo scrolling fluido all’interno delle pagine, spostandosi con le ancore HTML. Potete vedere l’effetto cliccando sul link “top” all’interno del footer, che rimanda all’inizio della pagina corrente (è lo stesso effetto del “torna su” presente in questo sito).

Sono riuscito solo recentemente a trovare il tempo per completarlo dopo l’annuncio di Ottobre 2008, ma spero che il risultato finale vi piaccia: aspetto volentieri critiche e commenti!

Potete scaricare Exciter sia in inglese che in italiano: per l’occasione trovate aggiornata anche la sezione di questo sito dedicata ai temi WordPress.

Animazioni e trasformazioni CSS

Con i CSS sarà possibile trasformare ed animare gli elementi di una pagina web. Cosa succederà a JavaScript?

Qualche tempo fa la Apple ha presentato al CSS Working Group del W3C una proposta riguardante transizioni ed animazioni con i CSS.  Il tutto è stato preso in considerazione ed inserito nel documento che mostra i progressi del gruppo.

Ma di cosa stiamo parlando? Sono novità interessanti e prioritarie o l’introduzione di queste proposte potrebbe aumentare la confusione?

Le novità

Trasformazioni CSS

Pur non essendo incluse nell’ultima proposta, le trasformazioni CSS sono comunque correlate. La proprietà transform consente infatti di spostare, ruotare o ridimensionare un elemento della pagina.

Transizioni CSS

Questo modulo gestisce le transizioni tra pseudo-classi, come potrebbe essere il passaggio allo stato :hover di un link e viceversa. Per la transizione è possibile specificare un determinato periodo di tempo (transition-duration), il passaggio non sarà quindi istantaneo. Ad esempio un link potrebbe cambiare colore sfumando.

Animazioni CSS

Se già con il modulo dedicato alle transizioni è possibile associare ad un oggetto dei brevi movimenti, con questo modulo si possono raggiungere risultati ancora più complessi.

Definendo gli eventi associati ad una determinata animazione, è possibile infatti indicare quali siano le proprietà che cambiano, il loro valore, e per quanto tempo.

Esempi pratici

Mi rendo conto che con queste novità sia facile fare confusione. Per chiarirsi le idee basta avere installato Safari: il browser Apple infatti supporta queste funzioni con dei comandi proprietari (con il prefisso -webkit-).

Per trasformazioni e transizioni questo è uno dei migliori esempi disponibili. Se invece volete vedere un’animazione CSS, la trovate in questa pagina, ma vi servirà una delle ultime nightly build di Safari (anche Safari 4 beta).

Possibili problemi

Siamo sicuri che queste novità siano positive per gli sviluppatori? Fino ad ora la parte interattiva di una pagina era gestibile con JavaScript (lasciamo da parte Flash): introdurre dei nuovi meccanismi di controllo direttamente nei CSS potrebbe generare diversi problemi.

Compatibilità tra i browsers

Inutile dirlo, se già adesso ci sono problemi ad ottenere risultati equivalenti sui vari browser, occupandosi esclusivamente dell’aspetto visivo delle pagine, cosa succederà quando il discorso riguarderà anche l’interazione tra vari elementi? Queste proprietà saranno di fatto inutilizzabili, a meno che non si voglia ricorrere a JavaScript per ottenere risultati simili sui browser che non le supportano. Ma allora perchè non usare direttamente JavaScript?

Interazione con JavaScript

Separando l’aspetto dell’interazione tra CSS e Javascript, si presenta un altro problema: l’interazione tra i due mondi. Non è possibile (al momento) intercettare un oggetto quando è nel mezzo di un’animazione CSS, ma nemmeno sapere se una transizione sia già avvenuta.

Accessibilità

I problemi non mancano nemmeno per quanto riguarda l’accessibilità. Già adesso per uno screen reader non è facile sapere tutto ciò che succede in una pagina, soprattutto se certi script AJAX vengono realizzati senza seguire le specifiche. Introdurre altre complicazioni aumenterà inevitabilmente le difficoltà per alcune categorie di utenti.

Conclusioni

Le possibilità offerte da trasformazioni, transizioni e animazioni CSS potrebbero essere interessanti, ma sarà bene valutarne pro e contro quando sarà il momento di utilizzarle. Il fatto che esista una determinata tecnologia, non significa che debba essere per forza utilizzata.

La tentazione potrebbe essere forte, perchè con poche righe di CSS sarà possibile animare facilmente gli elementi della pagina, ma la cosa migliore sarà continuare a gestire le interazioni esclusivamente con JavaScript, così come HTML e CSS sono riservati rispettivamente a contenuto e presentazione.