Web Design Book

Ho scoperto l’esistenza di un’interessante iniziativa per promuovere i siti e di conseguenza gli sviluppatori web che mettono al primo posto l’attenzione per gli standard w3c e la semantica del codice.

Il progetto è quello di pubblicare un libro che raccolga i migliori 150 siti: se siete dei lettori di TomStardust.com e volete farmi partecipare all’iniziativa, potete votarmi cliccando sull’immagine qui a lato (o nel footer).

Trovate maggiori indicazioni sul sito ufficiale, dove sono presenti molte altre risorse interessanti. Ormai i siti che fanno da showcase abbondano, per la gioia di tutti gli insaziabili!

Windows Live Messenger

Windows Live MessengerE’ appena uscita la versione finale di Windows Live Messenger, che va a sostituire MSN Messenger, il sistema di messaggistica istantanea più diffuso.

Le modifiche sono diverse ed importanti, a partire dalla possibilità di chiamare numeri di telefonia fissa come accade su Skype, di condividere cartelle con i contatti, o di mandare messaggi anche agli utenti offline. Anche l’aspetto grafico è cambiato, ed introduce quello che sarà il look delle nuove applicazioni Microsoft, così come di Windows Vista.

Ma non appena l’ho installato, ho avuto subito qualche dubbio. La prima cosa che ho notato è la scarsa differenza di colore tra i contatti connessi e non. Sul monitor del mio portatile si fa davvero fatica, mentre le cose migliorano con un monitor LCD o con un contrasto maggiore. Certo, i colori usati sono per un aspetto più sobrio, ma non dovrebbero ostacolare l’usabilità del programma!

Un altro particolare che mi ha fatto subito storcere il naso è stato al momento di collegarmi. Quando si posiziona il mouse sopra il tasto accedi, il cursore non cambia forma e resta la solita freccia. Manca quel feedback che siamo soliti avere con qualsiasi applicazione, spostando il mouse sopra dei link o degli oggetti con cui possiamo interagire, ed accade lo stesso con diversi altri elementi del programma.

Sono difetti che potrebbero risultare poco evidenti e meno importanti rispetto al resto, ma saranno diversi gli utenti che troveranno qualche problema con l’interfaccia grafica di questo Live Messenger.. quali sono le vostre impressioni a riguardo?

10 ragioni per un sito accessibile

Un recente articolo su accessites.org elenca le 10 ragioni per motivare la realizzazione di un sito accessibile. Ho trovato la lettura molto interessante, anche se si riferisce soprattutto a motivazioni commerciali ed ha alcuni riferimenti validi solo per gli Stati Uniti, ma l’idea alla base è ottima.

Per questo motivo voglio riproporre le 10 ragioni in un articolo in italiano su questo sito, sperando che possano aiutare qualcuno a spiegare ancora meglio le proprie scelte davanti ad un possibile cliente.

  • Coinvolgete il cliente, facendogli capire i vantaggi del considerare tutti i possibili visitatori. La frase esplicativa del concetto è touch on the human side, c’è bisogno di maggiore sensibilità per determinati temi.
  • Avere un sito accessibile è un ottimo spunto pubblicitario, ed un argomento che può sempre essere citato per farsi notare da stampa ed affini.
  • In Italia c’è la legge Stanca: riguarda solo le pubbliche amministrazioni obbligandole ad avere siti accessibili, ma non è un male pensare di portarsi avanti col lavoro in previsione di norme future. In Inghilterra ad esempio ci sono già.
  • I numeri sono dalla parte dell’accessibilità: alcuni tipi di dislessia arrivano al 15%, altri tipi di problemi alla vista al 7%, sono cifre decisamente significative, tali da non poter essere ignorate.
  • L’uso dei CSS in maniera intelligente risparmia il lavoro di gestione di un sito. Sarà più facile aggiornarlo, e le novità generano sempre maggior traffico.
  • L’eliminazione delle tabelle per il layout significa minor spreco di risorse, anche in termini di banda. Risparmiare in questo senso, soprattutto per un sito con molti visitatori, è essenziale.
  • Un sito accessibile, se ben realizzato, non dipende dal mezzo con cui viene visitato. Con sempre nuovi browser, palmari e smartphone che arrivano sul mercato, scegliere un sito accessibile è un’ottima mossa.
  • Miglior posizionamento sui motori di ricerca, grazie anche ad una miglior semantica del codice
  • La popolazione di internet comprenderà fasce di età sempre più avanzate, è importante muoversi anche in questo senso.
  • E’ la cosa giusta da fare, perchè la rete è condivisione e non esclusione. Peccato che questo punto, il più importante, sia quello che in genere meno importa al cliente.

Mi sento di condividere tutti e 10 i punti, alcuni hanno maggiore importanza, altri meno, ma tutti andrebbero sempre ricordati. Se avete idee differenti a riguardo, o altre motivazioni, non esitate a scriverle!

CSS3 Preview

E’ da un pò di tempo che ho tra i miei bookmarks il sito di Joost de Valk sui CSS3 e sulle loro possibilità. Visto che in questi giorni è tornato alla ribalta, ve lo segnalo: le anteprime sono decisamente interessanti, e le potenzialità sono incredibili.

Se siete curiosi, trovate in questa pagina le proprietà che fino ad ora sono supportate da almeno un browser tra Firefox, Opera e Safari.

Per adesso le cose migliori che ho visto riguardano:

  1. La possibilità di attribuire più immagini di sfondo ad un’unico div: addio contenitori multipli utilizzati solo per arricchire il background!
  2. I bordi degli elementi, che con i CSS3 potranno essere arrotondati o utilizzare immagini.
  3. Effetto ombra sui testi

Peccato che ci vorranno anni prima di vedere i CSS3 supportati pienamente, basti pensare che allo stato attuale non sono totalmente operativi nemmeno i CSS2. Forse con Internet Explorer 7…

Google Browser Sync, e Firefox è sincronizzato

Google LabsE’ appena uscita dai Google Labs un’estensione di Firefox che risulterà utilissima a chi ha diverse postazioni di lavoro: tra casa ed ufficio infatti spesso si presenta il problema di sincronizzare i dati presenti sui diversi pc.

Google Browser Sync è un’estensione di Firefox che risolve tutti i problemi di sincronizzazione, e permette di tenere aggiornati bookmarks, password, cache, history, schede e tutti gli altri dati del browser in questione.

Una volta installata su un pc, potrete decidere un PIN tramite il quale proteggere tutti i vostri dati sensibili. A questo punto installando la stessa estensione su un altro computer ed accedendo con lo stesso account sincronizzerete i browser. All’avvio di Firefox infatti l’estensione penserà ad aggiornare i dati, sfruttando il vostro account Google.

Ovviamente una nota: non installate l’estensione se altre persone usano gli stessi pc!

Strumenti per analisi e statistiche di un sito web

Per chi gestisce un sito internet è fondamentale avere uno strumento che consenta di analizzare le visite ricevute con le relative statistiche. Questo aspetto spesso viene sottovalutato, pensando che sia sufficiente avere un banale contatore degli accessi e niente altro, ma non è affatto così.

In questo articolo voglio indicare diversi servizi presenti sulla rete, quasi tutti gratuiti: Google Analytics, Performancing Metrics, Shinystat e Mint, l’unico della lista a pagamento.

Tramite questi strumenti è possibile avere un analisi completa del traffico, che può consentire di migliorarsi comprendendo gli errori e soprattutto scoprire come arrivano i visitatori sul proprio sito, cosa cercano, e se la loro esigenza viene soddisfatta. Ovviamente c’è sempre un minimo margine di errore, ma analizzando tutti i dati a disposizione il quadro spesso è più che sufficiente.

Ma iniziamo con ordine:

Google Analytics

Il servizio di statistiche fornito da Google è uno dei più avanzati, e soprattutto è gratuito. Le possibilità sono veramente infinite, ed oltre a conoscere una serie di dati comuni come il numero di visite, di pagine viste, l’hardware ed il browser posseduto dai visitatori, fornisce strumenti per vere e proprie campagne di marketing.

Infatti è possibile monitorare anche i cosiddetti goal, degli obiettivi che vogliamo far raggiungere ai nostri visitatori, come potrebbe essere l’acquisto di un oggetto per un sito di e-commerce.

Oltre a questo ci sono tutti i dati relativi al marketing, come la provenienza in relazione al sito di origine ed ai motori di ricerca con relative keywords.

Le possibilità sono innumerevoli ed elencarle tutte sarebbe inutile, basti sapere che è il servizio gratuito più completo che ho trovato. L’unico lato negativo è che l’iscrizione non è immediata, ma regolata da una coda per ottenere l’invito: necessario quindi armarsi di pazienza dopo aver fatto la richiesta. Io ho dovuto attendere circa un mese e mezzo, ma non è un dato indicativo perchè conosco persone che hanno aspettato molto meno. Al momento dell’iscrizione vi sarà fornita una stringa Javascript da inserire sulle pagine dei siti che volete monitorare.

Performancing Metrics

Ho scoperto questo servizio per caso e ne sono rimasto piacevolmente sorpreso. Performancing è un sito che offre diversi servizi per bloggers, Metrics è il nome che hanno dato al loro strumento destinato alle statistiche.

Le opzioni sono molte, ed i dati che si possono ottenere sono divisi tra quelli relativi alle visite generiche, ai visitatori che tornano sul vostro sito, e al marketing. Le tipologie di dati sono simili a quelle di Google Analytics, anche se minori, ma se non avete grandissime esigenze lo strumento è ottimo.

Anche in questo caso sono presenti alcuni dati relativi ai guadagni provenienti dal sito, come ad esempio da un account Google Adsense.

Per iniziare ad ottenere i dati, dovrete aggiungere del codice Javascript alle vostre pagine.

Shinystat

Shinystat è il servizio con meno opzioni tra quelli elencati, che però mi sento di segnalare visto che l’ho usato per lungo tempo. Fornisce dati su pagine viste, visitatori, browser e sistema operativo, oltre alle indicazioni su referrers e siti di provenienza.

Le limitazioni riguardano la presenza obbligatoria di un contatore visibile in ogni pagina che volete monitorare, e l’impossibilità di utilizzare il servizio su siti commerciali.

Mint

Mint è l’unico servizio a pagamento tra quelli elencati, ma lo nomino per tutti coloro che vogliono investire 30$ nel loro sito per avere uno strumento assolutamente professionale.

La schermata principale si suddivide in quattro pannelli, destinati a monitorare visite, referrers, pagine e provenienze dai motori di ricerca.

Per farvi un’idea più chiara è possibile provare una demo del servizio, che oltre ad essere ben realizzato è anche bello da vedere, con un’adattabilità alla risoluzione che vi lascerà senza parole.. provate a ridimensionare la pagina della demo e vedrete!

Anche in questo caso c’è del codice Javascript da aggiungere alle pagine. Certo è da considerare la spesa, ma potrebbe essere un investimento per il futuro del vostro sito.

Questo è tutto, se conoscete altri servizi simili non esitate a parlarne nei commenti, in ogni caso con gli strumenti citati si possono già ottenere statistiche più che soddisfacenti. A voi la scelta!

Considerazioni sulle WCAG 2.0

Leggendo un articolo su A List Apart, ho trovato delle inquietanti riflessioni che riguardano le future WCAG 2.0, ovvero le linee guida da seguire per l’accessibilità dei contenuti della rete.

La prima versione delle WCAG risale al 1999, e negli ultimi tempi sono molti gli sviluppatori web che ne cominciano a seguire le indicazioni. Questo va a vantaggio di tutti gli utenti, perchè le problematiche riguardanti l’accessibilità non riguardano esclusivamente i disabili, e sarebbe un grave errore pensarlo.

Perchè allora lavorare su una nuova versione di queste linee guida? Il motivo alla base è fare in modo che le indicazioni possano essere valide in un contesto più largo, senza fare riferimento a tecnologie specifiche o a tipi di contenuti particolari, restando più generici possibile.

Faccio un esempio che sicuramente lascerà interdetti tutti coloro (me compreso) che hanno sempre seguito gli standard, ma che spiega il cambiamento: nelle WCAG 1.0 troviamo chiaro il divieto di utilizzare le tabelle per scopi presentazionali. Vanno usate (giustamente aggiungo io) solo per organizzare dati tabellari. Ma ecco la sorpresa: nelle WCAG 2.0 viene detto di non utilizzare il codice in maniera semanticamente scorretta, e basta. Viene poi semplicemente aggiunto:

“Note that the use of HTML tables for layout is not an example of this failure as long as the layout table does not include improper structural markup”

In pratica basterebbe evitare di mettere tag impropri dentro le tabelle, come th o caption.

La speranza è che questo documento subisca nuove modifiche essendo ancora una bozza, ma la preoccupazione che certi standard subiscano una decisa inversione di tendenza è abbastanza grande. Nell’articolo di A List Apart vengono indicati altri punti che fanno sorgere molti dubbi sulle WCAG 2.0, ne riporto alcuni:

  1. Un futuro sito che risponderà agli standard delle WCAG 2.0, non necessiterà di codice xhtml valido. Sarà però necessario controllare che il risultato sia uguale sui diversi browser.
  2. Potranno essere usate tabelle per il layout (come detto sopra)
  3. La pagina, o parte di essa, potrà lampeggiare per un periodo di 3 secondi (o mostrare animazioni con effetto simile).
  4. Al livello più basso di conformità alle WCAG 2.0, non sarà necessario fornire contenuto alternativo per i video pubblicati
  5. Non potrà essere usato il posizionamento fuori dallo schermo (il famoso position:absolute; top: -9000px; left: -9000px ) per mostrare contenuti solo a certi utenti, come gli utilizzatori di screenreader. Ogni visitatore dovrà vedere gli stessi contenuti.
  6. Non si potrà usare il posizionamento tramite CSS per eliminare elementi della pagina dal normale flusso del codice (ad esempio position: absolute ). L’ordine degli elementi nel codice dovrà corrispondere con l’ordine degli elementi presentati all’utente.

Questo è solo un semplice estratto, ma è abbastanza per rendersi conto di quali cambiamenti ci siano in programma. Se volete documentarvi meglio sulla vicenda, questa è la documentazione (in inglese):

Sicuramente ci saranno altri aggiornamenti sulla vicenda, ma l’impressione generale è che le basi di queste linee guida siano state gettate e difficilmente cambieranno. Aspetteremo notizie a riguardo, sperando in qualche variazione.

Yahoo! e la nuova grafica

Yahoo!Yahoo! si prepara a cambiare veste grafica, e dalla homepage è già possibile vedere la nuova versione all’opera tramite un collegamento in alto a destra.

Il cambiamento è notevole, spicca il menu verticale a sinistra ed i vari menu a tab interni, che consentono una navigazione nel dettaglio senza dover caricare nuove pagine.

Tutto questo però passa in secondo piano davanti ad una scelta che è decisamente azzardata: la risoluzione minima per questa nuova grafica è 1024×768. Considerando che Yahoo! è un portale assolutamente popolare, non un sito tecnico, e che vi accedono utenti di tutti i tipi, mi pare assurdo non considerare chi naviga ad 800×600.

O meglio, tale risoluzione viene ricordata, ma tramite una funzionalità marginale e seminascosta. Infatti c’è un link sulla destra dell’header che consente di vedere la pagina in versione narrow, oltre a dare la possibilità di cambiare il colore di sfondo.

Come testimonianza basta dare un’occhiata alle statistiche disponibili su w3schools aggiornate a Gennaio 2006. Alla voce Display Resolution c’è ancora un buon 20% corrispondente agli utilizzatori di una risoluzione 800×600.

Stylegala in vendita

StylegalaUna notizia si fa largo nel web da qualche giorno: Stylegala è in vendita. Uno dei siti showcase più importanti a quanto pare cambierà gestione, e la speranze di tutti è che continui a funzionare così come ha sempre fatto.

Personalmente lo ritengo uno dei migliori nel suo genere, venivano recensiti lavori notevoli anche se non molto frequentemente, probabilmente per mantenere sempre alto il livello qualitativo.

Potete trovare a questo indirizzo tutti i dettagli, se siete interessati la base d’asta è di 30.000 dollari, una bella somma.

Di seguito alcune statistiche che fanno capire l’importanza del sito ed il perchè siano in molti a temere per il suo futuro:

  • Pagine visitate ogni mese: 4.200.000
  • Link su Google: circa 3.000
  • Link su del.icio.us: circa 4.000
  • Guadagni mensili: 2.500 dollari

Se non lo conoscevate e siete interessati a vedere il meglio del web, vi consiglio di passare qualche minuto ad esaminare la galleria di siti che propone.

La nuova veste di Flickr

Gli assidui frequentatori di Flickr, il famosissimo sito dove conservare i propri album fotografici, avranno notato in questi giorni alcuni cambiamenti che riguardano soprattutto l’architettura delle informazioni e di conseguenza l’interfaccia.

Le novità sono diverse, a cominciare dal menu a tendina che consente un’esplorazione più dettagliata, per arrivare a diverse funzioni di ricerca aggiuntive. Adesso il menu è stato modificato in maniera più intelligente, e sono immediatamente visibili le sezioni principali chiamate You, Organize, Contacts, Groups ed Explore. E’ subito intuibile la loro funzione, come è giusto che sia.

Ma una delle rivoluzioni più interessanti riguarda l’Organizer, la pagina con cui era possibile modificare titoli e tag delle foto, set di appartenenza e quant’altro. Adesso tutto funziona tramite un comodo drag&drop, non c’è alcun caricamento di altre pagine ed il processo è di una semplicità estrema.

Tutto questo lavoro merita un applauso, soprattutto perchè Flickr aveva già ottenuto un premio per la migliore interfaccia web, e nonostante i riconoscimenti ottenuti hanno avuto il coraggio di modificarla ulteriormente.

C’è sicuramente del materiale su cui riflettere sull’abilità del team di sviluppo: è riuscito a rendere divertente l’interazione in un sito dove in sostanza non si fa altro che uploadare foto, metterci dei titoli ed organizzarle. Sicuramente attività non così interessanti, ma con la giusta formula il risultato è fenomenale!

Una nota: con le ultime modifiche il servizio non è più in beta, bensì in fase gamma.