Web Design - Pagina 3 di 13

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

Quando il redesign di un sito non funziona

Il caso di CSS3.info e della sua nuova grafica.

CSS3.info è uno dei siti da seguire per chi vuole rimanere aggiornato sulle ultime novità dei CSS3. Diversi mesi fa ha cambiato proprietario, e come era lecito aspettarsi è arrivato il momento del redesign del sito. Niente di strano, se non fosse che la nuova grafica dopo due settimane dal lancio ha raccolto un centinaio di commenti, quasi tutti negativi.

Quando viene pubblicata la nuova versione di un sito le critiche non mancano mai: ogni cambiamento spaventa. Basti pensare a quello che successe con il redesign di Facebook. In questo caso però il contenuto dei commenti non lascia dubbi: c’è qualcosa che non va, e molti di questi pareri sono ben motivati.

Scelte grafiche sbagliate

L’obiettivo dichiarato dal proprietario è quello di avere una grafica più professionale, pagine più leggere ed una nuova navigazione. Se per gli ultimi due punti l’obiettivo è stato raggiunto, le scelte di design si sono rivelate decisamente sbagliate.

Essendo un sito frequentato in buona parte da web designer, basta scorrere i commenti per trovare alcune critiche sensate, come:

colori male abbinati (testo blu su sfondo nero)
design troppo piatto
header vuoto
ombreggiature usate senza criterio

Il confronto con il passato è impietoso: pur non essendo straordinario, il precedente layout era gradevole e chiaro. Inserire un vecchio screenshot nel post che annunciava la nuova versione è stata decisamente una mossa suicida.

L’errore più grave è stato commesso cercando di utilizzare ovunque proprietà dei CSS3 solo perché sono l’argomento del sito. Avere la possibilità di utilizzare una feature non significa che questa debba essere per forza introdotta, anzi.

Versione beta sì, ma senza esagerare

Un altro problema, che evidenzia una gestione decisamente poco seria, è dato dalla prematura messa online di un layout dove mancano totalmente alcuni elementi fondamentali.

Nel momento in cui scrivo manca un box di ricerca, il footer del sito è vuoto, e diverse pagine hanno ancora un aspetto approssimativo.

Non c’è niente di male nel pubblicare un sito nella sua versione beta, magari facendo delle correzioni anche grazie alle segnalazioni dei visitatori, ma c’è comunque una bella differenza tra un design perfezionabile ed uno approssimativo.

Quali sono i vostri pareri sul nuovo CSS3.info? Nonostante tutto, questo caso può servire come insegnamento per il futuro: sicuramente ricorderò esempi come questo per evitare di commettere gli stessi errori.

Web Design 2010

Cosa cambierà nel mondo del web design durante il 2010? Qualche previsione per il prossimo anno.

Arrivati a fine anno, è giunto il momento di tirare le somme e fare delle previsioni su cosa accadrà nel 2010 nel mondo del web design.

Difficilmente ci saranno delle rivoluzioni, ma certe tendenze già viste alla fine del 2009 inizieranno ad affermarsi. Alcuni siti che nasceranno potranno usare HTML 5 ed i CSS3 senza problemi: sperimentare è ormai un dovere per non farsi cogliere impreparati..

Cosa aspettarsi quindi nel 2010? Ecco alcune previsioni.

HTML 5

Lo standard per il futuro dell’HTML è già stato ufficializzato dal W3C durante il 2009. Sono già stati fatti alcuni esperimenti interessanti, ma è logico aspettarsi che durante il prossimo anno l’HTML 5 sarà ancora più utilizzato.

Non ho mai nascosto la mia preferenza per l’XHTML, e per ora questo sito continuerà ad utilizzare tale specifica, ma se in questo momento decidessi di partire con un nuovo progetto sarei seriamente tentato di provare le potenzialità dell’HTML 5.

CSS 3

I CSS sono sempre stati in evoluzione continua: anche i browser ad ogni aggiornamento supportano funzioni sempre nuove. Ormai non serve più attendere l’ufficialità del W3C: molti produttori permettono di sperimentare i nuovi moduli dei CSS prima che questi diventino uno standard (ad esempio usando i prefissi moz- o webkit-).

Durante il 2009 ho già parlato di Web Fonts e Flexible Boxes, e nel 2010 ci saranno sicuramente altre novità in questo senso.

Internet Explorer 6

Per qualcuno IE6 è già defunto, ma la realtà lo dà ancora vivo e vegeto, assestato intorno al 10% del market share. Sono cifre ancora ragguardevoli, ma ormai le cose stanno cambiando. La tendenza è già chiara, ed il 2010 sarà l’anno giusto per vederlo sparire.

Il problema in Italia rimangono le pubbliche amministrazioni e gli uffici dove si continuano ad utilizzare vecchi computer, ma per quello purtroppo non c’è soluzione a breve termine.

La guerra dei browser

Mettendo da parte il discorso relativo a IE6, la guerra dei browser nel 2010 si farà ancora più interessante. Google Chrome ha superato in brevissimo tempo i numeri di Safari, e l’introduzione del ballot screen in Europa potrebbe riservare alcune sorprese.

Non resta che tenere sotto controllo le statistiche e seguirne l’evoluzione: Internet Explorer potrebbe anche perdere quote rilevanti.

Chrome OS

Infine nel 2010 nascerà il sistema operativo made in Google, e questa è già una notizia. Concepito per essere utilizzato solo con una connessione attiva, non sarà il massimo per il panorama italiano, ma ancora una volta a Mountain View hanno indicato la strada da seguire. Il futuro dei nostri dati è online, e Chrome OS sarà un primo importante passo in quella direzione.

Con questo post ho voluto tracciare un quadro generico per il prossimo anno: ci saranno sicuramente altre novità oltre a quelle citate, ma il 2010 sarà comunque un anno importante. Se avete altre previsioni da fare lasciate un commento: aspetto anche i vostri pareri.

Microsoft e la scelta del browser

Le possibili conseguenze dell’introduzione del “ballot screen” nei sistemi operativi Windows.

L’Unione Europea ha annunciato l’accordo con Microsoft: da Aprile 2010 tutti i sistemi operativi della casa di Redmond (Windows Xp, Vista e 7) dovranno permettere all’utente di scegliere quale browser utilizzare, senza imporre Internet Explorer.

Potete leggere maggiori dettagli a riguardo su Punto Informatico: la cosa fondamentale da sapere è che la novità riguarderà tutti i computer europei dove IE è il browser predefinito, e sarà possibile scegliere tra dodici alternative. La lista dei browser verrà aggiornata ogni sei mesi, ed inizialmente prevederà:

Internet Explorer
Firefox
Chrome
Safari
Opera
K-Meleon
AOL
Slim Browser
Maxthon
Avant Browser
Flock
Sleipnir

La decisione sembra rilevante, anche se la sentenza della UE alla fine ha coinvolto browser con percentuali di mercato minime. La concorrenza doveva essere garantita, ma adesso i tanti nomi entrati in gioco rischieranno di confondere ancora di più gli utenti.

Per gli sviluppatori cambierà qualcosa? Impossibile prevederlo con precisione, ma è quasi certo che la maggior parte degli utenti continuerà a scegliere ciò che conosce meglio, ed Explorer resterà a farci compagnia ancora per molto tempo.

Proviamo ad immaginare quello che succederà sul computer di un utente medio con IE come browser predefinito:

l’utente che vuole accedere ad internet e si troverà davanti una schermata mai vista
gli verrà detto di scegliere tra dodici alternative, la maggior parte mai sentita prima
riconoscerà l’icona o il nome di Internet Explorer e lo selezionerà

Sarà interessante vedere le statistiche di utilizzo dei browser nel periodo immediatamente successivo all’introduzione del ballot screen, ma difficilmente ci saranno rivoluzioni: molto dipenderà anche da come sarà presentata la selezione. Per il momento l’unica anteprima a disposizione mostra un elenco con scrollbar orizzontale, che avvantaggerà i primi browser dell’elenco. Secondo voi cambierà qualcosa?

Ombre cross-browser con i CSS, senza immagini

Come sfruttare la proprietà box-shadow dei CSS3 ed ottenere risultati simili anche su Internet Explorer.

La proprietà box-shadow (CSS3) permette di applicare ombre ad elementi contenitori di tipo block. Funziona in maniera simile alla proprietà text-shadow, ma il W3C al momento ne ha sospeso l’approfondimento per studiarne l’implementazione in maniera più approfondita.

Come funziona box-shadow?

La proprietà può essere utilizzata su Firefox 3.5 e sui browser basati su webkit (Safari e Chrome) con i soliti prefissi:

-moz-box-shadow per Firefox
-webkit-box-shadow per Safari e Chrome

L’espressione è semplicemente:

box-shadow: 5px 5px 10px #000;

dove i parametri sono nell’ordine:

la distanza dell’ombra in orizzontale ed in verticale
il raggio
il colore

Ho notato che tra i browser webkit la resa è migliore su Safari: Chrome pur visualizzando l’ombra ha qualche problema con gli angoli ed il loro arrotondamento.

La soluzione per Internet Explorer

La cosa interessante, scoperta per caso sul blog di Nick Dunn, è che con alcuni hack è già possibile sfruttare questa proprietà per ottenere un risultato valido anche su Internet Explorer.

Esistono infatti alcuni filtri proprietari della Microsoft che in queste circostanze sono l’unica soluzione possibile. Era già successo per i .png trasparenti su IE6, e la situazione è analoga anche in questo caso. Combinando i filtri Glow e Shadow, o ancora meglio utilizzando solamente Shadow è possibile ottenere un’ombra molto simile su tutte le versioni di Explorer, a partire dalla 5.5.

Il codice necessario è il seguente, da inserire in un commento condizionale:

filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);

Color e strenght dell’ombra possono ovviamente essere modificati secondo le necessità.

Demo

Ho realizzato una pagina dimostrativa di questo effetto.

Il risultato cambierà leggermente a seconda del browser utilizzato, ma resterà comunque coerente. La soluzione non è esente da difetti, ma è un buon compromesso per aggiungere dettagli in più ad un design senza appesantirlo con delle immagini. C’è anche da considerare che spesso è complicato dare un’ombra ad un contenitore, soprattutto se questo ha delle dimensioni variabili: l’unica soluzione è utilizzare del codice html superfluo o adottare questo metodo.

I difetti principali che ho riscontrato sono:

CSS non valido
niente ombra su Firefox < 3.5 e su Opera
uso di hack per Internet Explorer

A voi la scelta se adottare questa soluzione: è una possibilità da tenere in considerazione, ma la sua efficacia è da valutare a seconda del progetto. Niente vieta comunque di adottare anche solo la soluzione per Firefox come progressive enhancement, offrendo un’esperienza migliore di navigazione ad alcuni utenti.

Il Web per non vedenti: qual è il giudizio degli utilizzatori di Screen Reader?

Un sondaggio rivolto ad utenti di Screen Reader mostra qualche sorpresa ed i progressi del web mobile.

WebAIM ha pubblicato i risultati di un recente sondaggio (Ottobre 2009), tra 665 utilizzatori di screen reader. E’ la seconda edizione di questo sondaggio: ne avevo infatti già parlato l’anno scorso, in un articolo sull’utilizzo dei lettori di schermo per effettuare test di accessibilità.

I risultati sono importanti: non condizioneranno in maniera rivoluzionaria le abitudini dei web designer attenti a queste tematiche, ma danno un quadro completo di questa specifica categoria di utenti. Tra le note più interessanti:

Il 66,4% utilizza JAWS come screen reader principale
Il 49% usa abitualmente più di uno screen reader, a seconda del contesto
Il 53% degli utenti disabili usa uno screen reader su un dispositivo mobile
I problemi principali sulle pagine web sono dati da CAPTCHA, contenuti Flash inaccessibili e link ambigui
Il 46% pensa che il web stia diventando più accessibile che in passato
Social Media: il 51% usa YouTube, il 47% un blog, il 42% Facebook ed il 38% Twitter
Twitter è giudicata la piattaforma più accessibile
Per trovare informazioni su una pagina, il 50% scorre i titoli (h1, h2…) ed il 22% usa la ricerca interna

Uno dei dati più sorprendenti riguarda l’utilizzo di dispositivi mobili. Sicuramente è un settore in cui sono stati fatti molti progressi nell’ultimo anno, e credo che abbia avuto una buona importanza anche l’uscità dell’iPhone 3Gs con VoiceOver. Potrebbe sembrare strano, ma i dispositivi touchscreen accessibili sono ormai realtà, e se siete interessati vi consiglio di leggere recensioni come quella di Marco Zehe, che racconta la sua esperienza personale con questo smartphone.

Rispetto all’anno scorso, le raccomandazioni rimangono più o meno le stesse: le intestazioni continuano ad avere una grande importanza per l’accessibilità di una pagina web, ed uno dei problemi principali sono ancora i CAPTCHA e Flash. In certi progetti è impossibile farne a meno, ma sapere che potrebbero creare problemi è già un primo passo.

Google Maps: come creare una mappa con le API e GeoRSS

Una guida per usare lo standard GeoRSS con Google Maps, dopo l’esperienza di GdRPlayers.it

Google Maps è uno strumento fantastico, che mette a disposizione delle API per fare praticamente qualsiasi cosa. Il problema è gestire delle mappe complesse, mostrando sullo schermo centinaia di marcatori contemporaneamente: in questi casi è fondamentale scegliere la strada giusta.

La soluzione che ho utilizzato nel mio progetto GdR Players si chiama GeoRSS: è un formato standard supportato anche da Google Maps, che consente con poche righe di codice di creare delle mappe complete.

Il formato GeoRSS

Per funzionare, la prima cosa necessaria è un file xml che segua questo standard. La struttura del documento deve essere simile a questa:

<?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml"> <title>Titolo feed</title> <entry> <title>Primo elemento</title> <link href="http://..."/> <summary>descrizione</summary> <georss:where> <gml:Point> <gml:pos>41.8 12.6</gml:pos> </gml:Point> </georss:where> </entry> <entry> <title>Secondo elemento</title> <link href="http://..."/> <summary>descrizione</summary> <georss:where> <gml:Point> <gml:pos>43.8 11.3</gml:pos> </gml:Point> </georss:where> </entry> </feed>

Le entry ovviamente possono essere molteplici, gli elementi come link e summary sono facoltativi ed appariranno solamente se inseriti. Per alleggerire il codice, potreste decidere anche di utilizzare il formato GeoRSS-Simple, dove il codice

<georss:where> <gml:Point> <gml:pos>41.8 12.6</gml:pos> </gml:Point> </georss:where>

diventerà

<georss:point>41.8 12.6</georss:point>

Non mi soffermerò sul metodo di creazione di questo file: su GdR Players viene generato dinamicamente, ma se avete una mappa con dei contenuti predefiniti niente vieta di scrivere l’xml manualmente.

Creazione della mappa

Se avete già familiarità con Google Maps, sono sufficienti un paio di righe di codice per includere tutti i marker presenti nell’xml:

var geoXml = new GGeoXml("http://www.url.com/feed.xml"); map.addOverlay(geoXml);

L’indirizzo specificato dovrà corrispondere alla posizione del file xml.

Il codice JavaScript completo, che utilizzo sul mio progetto con poche opzioni in più, è il seguente:

function load() { if (GBrowserIsCompatible()) { var geoXml = new GGeoXml("http://www.url.com/feed.xml"); var map = new GMap2(document.getElementById("map_canvas")); if (geoXml.loadedCorrectly()) { geoXml.gotoDefaultViewport(map); } map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addOverlay(geoXml); } }

Le funzioni gotoDefaultViewport e addControl specificate servono rispettivamente per:

centrare la mappa e definire il livello di zoom automaticamente, in base ai marker presenti
aggiungere i controlli per spostarsi e zoomare

L’ultima riga è quella fondamentale, che aggiunge alla mappa i marcatori.

Per quanto riguarda il codice html, è sufficiente avere nella pagina:

<div id="map_canvas"></div>

che farà da contenitore. Dovrete poi richiamare la funzione load al caricamento, inserendo:

<body onload="load();" onunload="GUnload()">

Ricordatevi infine che per utilizzare le API di Google Maps dovrete registrarvi, ottenere una API Key gratuita ed inserire il codice che vi verrà indicato nel vostro template.

La cosa fantastica di questo metodo è che segue uno standard, ed ha già delle azioni predefinite che verranno aggiunte alla mappa. Cliccando sui marcatori verranno visualizzate le informazioni correlate, il titolo di ogni entry e la sua descrizione, così come eventuali immagini o link.

Perchè utilizzare GeoRSS?

Consiglio l’uso di questo formato e della classe GGeoXml quando avete numerosi marker da mostrare su una mappa. La maggior parte dei tutorial in rete infatti utilizzano un principio diverso, inviando per ogni indirizzo una richiesta di geocoding a Google per ottenere le coordinate in tempo reale. Questo va bene per pochi marcatori, ma se ne avete più di una decina inizierete ad avere dei problemi: oltre questo numero anche io ho dovuto cambiare strada, rendendomi conto che la cosa non funzionava.

L’unica soluzione è ricavare a priori le coordinate (seguendo questa guida), inserirle in un file xml e visualizzarlo con la classe GGeoXml come vi ho mostrato. Seguendo questo metodo GdR Players attualmente mostra la posizione di 130 utenti, senza avere particolari problemi al caricamento della pagina.

Aggiornamento: dopo un anno di test posso affermare che questa tecnica funziona con più di 1000 segnalini contemporaneamente sulla mappa, la consiglio caldamente.

Sprite Me: un nuovo strumento per creare CSS Sprites

Un tool per generare i CSS Sprites in automatico, su qualsiasi pagina e con tutti i browser.

Sprite Me è uno strumento potente: si tratta di una bookmarklet che consente di ottimizzare qualsiasi pagina si stia navigando per l’utilizzo dei CSS Sprites.

Se non avete mai sentito parlare dell’argomento, prima di continuare vi consiglio di leggere il post “Usare gli Sprite CSS” pubblicato qualche mese fa proprio su questo sito, visto che è una pratica indispensabile per ogni web designer.

Tornando a Sprite Me, ecco cosa è capace di fare con un semplice clic:

Trovare tutte le immagini di sfondo utilizzate sulla pagina corrente, mostrando l’elemento a cui appartengono con un semplice mouseover
Riunire le immagini che possono essere accorpate, a seconda della loro posizione e delle proprietà utilizzate. Ad esempio se un background si ripete verticalmente dovrà occupare l’intera altezza dello sprite.
Creare il background unico, cliccando sul tasto “make sprite”. La cosa non avviene in automatico perchè c’è la possibilità di riorganizzare le singole immagini prima di accorparle, decidendo quindi se affidarsi totalmente allo strumento o fare delle correzioni manuali.
Generare il codice CSS necessario per utilizzare la nuova immagine unica

Per verificare le potenzialità di Sprite Me vi consiglio di provare la demo prima di installarlo.

In genere non sono un amante degli strumenti automatici come questo perchè hanno sempre qualche difetto, ma credo in questo caso di dover fare un’eccezione. Ho notato che a volte le regole CSS generate non sono molto elastiche, ma la possibilità di correggere il risultato manualmente e di generare l’immagine in maniera automatica permettono di aggirare i possibili problemi.

Effettuate qualche prova per decidere se fa al caso vostro, il fatto che sia una bookmarklet vi permetterà di averlo a portata di mano su tutti i maggiori browser, Internet Explorer incluso.

GdR Players, il mio nuovo progetto

Un nuovo sito per riunire i giocatori di ruolo italiani. In questo articolo tutti i dettagli tecnici della realizzazione.

E’ arrivato il momento di annunciare la nascita del mio nuovo sito, molto lontano dagli argomenti trattati su tomstardust.com, ma altrettanto importante per me: GdR Players.

Avevo in mente di realizzare da tempo un progetto simile, vista la mia passione per i giochi di ruolo. Non ero però mai riuscito a portarlo avanti fino ad ora, lasciandolo tra le cose “da fare”. Quest’estate invece ho finalmente realizzato quello che volevo, dopo aver creato diverse bozze grafiche (l’ultima è su Flickr). Trovato in questi giorni il tempo di gestire gli ultimi dettagli, adesso il sito è online.

Cos’è GdR Players?

L’obiettivo è quello di riunire in un unico luogo i giocatori di ruolo italiani, ma non ho voluto realizzare un sito in competizione con le già eccellenti community esistenti. Lo scopo principale, sfruttando Google Maps, è trovare il modo di localizzare tutti i giocatori registrati, permettendo loro di comunicare ed eventualmente organizzarsi per incontri, serate di gioco ed eventi a tema.

Ogni utente ha la sua pagina personale con la possibilità di inserire alcune informazioni. Nel sito poi ci sono anche altre sezioni di contorno, come l’immancabile blog a cui tutti possono contribuire, usato anche per scrivere annunci.

La base: WordPress

Lavorando da anni su WordPress, mi è sembrata la scelta più logica continuare ad utilizzarlo, anche se GdR Players non è il solito blog. Ho realizzato un template su misura per l’homepage, posizionato l’elenco dei post in una pagina secondaria, e sfruttato alcuni plugin per le funzionalità che volevo implementare:

Register Plus: permette di personalizzare la registrazione di WordPress, aggiungendo dei campi e rendendoli obbligatori, come la località. L’ho utilizzato anche per consentire la scelta della password durante la registrazione: credo sia una soluzione molto più usabile.
User Photo: come dice il nome, questo plugin consente agli utenti registrati di caricare un proprio avatar e visualizzarlo sul sito. Interessante anche il supporto per i Gravatar, che possono essere utilizzati come seconda scelta nel caso l’utente non carichi alcuna immagine.
WP Private Messages: era d’obbligo trovare una soluzione per consentire agli utenti di comunicare tra loro. Questo plugin introduce un sistema basilare di messaggistica all’interno di WordPress: ha qualche difetto, ma traducendolo e aggiungendo qualche dettaglio (come il link per tornare sul sito dopo aver mandato un messaggio) è una soluzione accettabile.

All’uso di questi plugin va anche aggiunta qualche personalizzazione ulteriore della piattaforma, come il ruolo di default degli utenti registrati che non è “sottoscrittore” ma “collaboratore”. In questo modo ognuno ha la possibilità di creare un post o un annuncio ed inviarlo agli amministratori per la pubblicazione.

Il cuore: la mappa degli utenti su Google Maps

Il centro del sito è ovviamente la pagina con la mappa dei giocatori registrati. Per realizzarla ho sfruttato le API di Google Maps e sono piuttosto soddisfatto del risultato, anche se è sicuramente migliorabile. Ho inserito anche l’elenco testuale dei giocatori iscritti, per rendere accessibili a tutti le informazioni presenti sulla pagina.

Il funzionamento è il seguente:

una funzione Php crea un file XML con le informazioni di tutti i giocatori: nickname, link al profilo, coordinate della località
un JavaScript nella pagina della mappa recupera queste informazioni e le visualizza

La cosa che ho scoperto solo dopo alcune ore di lavoro è che esiste lo standard GeoRSS per i file XML come questo, e Google Maps li supporta pienamente. Una volta organizzate le informazioni nella maniera adeguata bastano poche righe di JavaScript per creare la mappa corretta.

A questo si aggiunge qualche altra riga di codice per le pagine dei giocatori: in ognuna appare una semplice mappa con un unico puntatore, che indica la località dell’utente.

Nei prossimi giorni ho intenzione di pubblicare un altro articolo per descrivere il codice che ho utilizzato, visto che potrebbe interessare a qualcuno.

I primi risultati

Ammetto di essere rimasto sorpreso dai primi risultati del progetto. L’ho presentato in anteprima agli iscritti della newsletter di tomstardust.com e ad alcuni miei amici: c’erano ancora alcuni bug da risolvere, e le visite che sono arrivate mi hanno preso alla sprovvista. In soli due giorni gli utenti registrati sono diventati più di 40, con un picco di 233 visite uniche il secondo giorno. Fortunatamente ho risolto i bug, ma ho anche imparato che lanciare un progetto troppo presto può essere rischioso.

Ora sto raccogliendo diversi feedback, positivi e negativi, e sono tutti enormemente utili. Potete vedere il sito all’indirizzo gdrplayers.it, aspetto anche i vostri pareri. Non è necessario che siate dei giocatori di ruolo, molte pagine possono essere navigate anche senza essere registrati.

Addio Internet Explorer 6

E’ finalmente arrivato il momento di trascurare la versione più odiata del browser Microsoft.

Sembrava impossibile fino a qualche mese fa: IE6, fonte di preoccupazioni e ore di lavoro aggiuntive su progetti ormai chiusi, è destinato a scomparire. L’ultima verifica che ho fatto risale ad appena due giorni fa: chiedendo su vari network come comportarmi con il suo supporto in un progetto che utilizza diverse png trasparenti, il consiglio quasi unanime è stato di lasciar perdere.

E’ iniziato tutto con una domanda su Twitter, rimbalzata poi su FriendFeed e Facebook:

in dubbio per un nuovo sito, già abbastanza carico di JavaScript: usare un js anche per i png trasparenti su IE6 o lasciar perdere?

La discussione che ne è seguita su FriendFeed è chiara: in caso di siti con target particolari potrebbe esser fatta un’eccezione, ma se il cliente non lo richiede in maniera esplicita, è giunta l’ora di abbandonare il supporto a questo browser.

Le risposte ottenute su Twitter sono ancora più lapidarie: Mushin e gfields suggeriscono di lasciar perdere ed anche netfranz concorda, pur consigliando una eventuale soluzione JavaScript. Solo Lauryn propone di utilizzare delle gif alternative, altro metodo valido.

Su Facebook infine sono arrivati altri inviti ad abbandonare IE6: il quadro generale è chiaro.

Quasi due anni fa sostenevo su questo blog come fosse troppo presto per dimenticarsene, ma adesso la situazione è definitivamente cambiata. Sono sempre più i siti importanti che non vengono visualizzati correttamente su Explorer 6, ed è giusto così. E’ giusto che venga fatto qualche test per assicurarsi che i siti rimangano comunque leggibili, ma non è più tempo di preoccuparsi di errori grafici secondari e del mancato allineamento degli elementi della pagina. Se avete ancora dubbi, potete spingere i vostri utenti ad aggiornare il browser, ma è finalmente ora di guardare avanti.

Come continuare ad offrire un servizio di qualità

In un quadro dove IE6 non ha più grande rilevanza, rimane fondamentale assicurare la qualità dei propri progetti web. Un tempo poteva essere garantita l’ottimizzazione cross-browser anche su IE6, ora è il momento di pensare a ciò che ci riserverà il futuro.

Alcuni attributi e selettori dei CSS3 possono ad esempio già essere utilizzati con successo: il progressive enhancement può offrire un’esperienza migliore ai visitatori che utilizzano browser evoluti, perchè non sfruttarlo? Text-shadow e border-radius sono già a disposizione, non è sbagliato iniziare ad usare queste proprietà, anzi è il momento giusto per osare.

Avete avuto esperienze negative con IE6? Se volete raccontarle o pensate che sia ancora troppo presto per abbandonarlo, dite la vostra nei commenti.