mag 07

I fogli di stile (CSS, Cascading Style Sheets) sono per noi che realizziamo siti web accessibili e usabili, una vera boccata di aria fresca. Grazie ad essi, il web design ha finalmente potuto staccarsi dal codice contenuto nelle pagine, permettendo maggiore personalizzazione in fase di sviluppo e debug.

In questo articolo che suggerisco possiamo imparare a sfruttare meglio quest’ennesima perla del W3C, approfondendo la conoscenza delle specifiche tecniche e studiando i pezzi di codice proposti dai guru del settore.

Interessante è ad esempio la gestione differenziata delle pagine, per la quale abbiamo un foglio di stile per la visualizzazione a video ed uno studiato per una migliore impaginazione della stampa.

Alcuni dirty tricks ci insegnano invece a rendere le nostre pagine più visibili a spider e crawler che i motori di ricerca utilizzano per l’indicizzazione dei nostri contenuti.Vediamo poi come sia possibile assegnare due classi ad un medesimo oggetto, con evidenti benefici in termini di granularità della presentazione.

Supponendo ad esempio di avere due classi distinte per la formattazione del testo, chiamate testo e articolo, possiamo assegnarle ad un unico paragrafo elencandole semplicemente una di seguito all’altra, ponendo attenzione a separare le due voci con uno spazio (e non con le virgole, che in questo caso non vengono contemplate):

< p class="testo articolo" >Testo del mio articolo…< /p>

Tanto semplice quanto utile! Sull’onda del successo, l’autore dell’articolo Trenton Moss ci ha fatto omaggio di altri dieci tips and tricks sull’uso dei CSS, scrivendo un secondo articolo sull’interessantissimo blog, Webcredible.

Che dire, non è tutto AJAX quello che luccica :-)

Autore: Stefano Martini

Technorati tag: css, cascading style sheets, ajax, usability, w3c

mar 15

sito-web.jpg Queste poche, ma fondamentali regole vi aiuteranno a iniziare meglio la progettazione del vostro sito web. Sono solo alcuni consigli da chi lavora nel settore del web da oltre 10 anni.

Nulla a che vedere con il concetto con cui si realizzavano siti web negli anni ’80 e ’90.

1. No al contatore utenti: il contatore non ha nessuno scopo a meno quello di far apparire il tuo sito come quello di un amatore, anche se con i tuoi lavori vuoi dare ai visitatori delle informazioni sul tuo sito, probabilmente non è il caso di far sapere anche questa informazione (specialmente se il sito non è molto visitato).Se proprio vuoi sapere quante persone hanno visitato il tuo sito, chiedi al tuo host di attivare le funzionalità per creare le statistiche. I dettagli disponibili rendono le funzionalità del semplice contatore decisamente antiquate e ridotte.

2. Dimentica i testi lampeggianti o in movimento: l’unico posto in cui i testi lampeggianti risultano adatti è sulle insegne di bar o nei siti internet realizzati nella metà degli anni 90. Non sono comunque particolarmente attraenti e le persone non si aspettano molto da siti con questa caratteristica.
Riguardo alla discussione fra la realizzazione di contenuti online e la versione stampabile, tenete bene a mente che la velocità di lettura di un testo a schermo è di ¼ rispetto alla velocità su carta. Questo dimostra che nel web, dobbiamo dire quello che vogliamo in modo chiaro e semplice.

3. Inserisci intestazioni con un criterio: uno degli elementi fondamentali della pagina web è l’intestazione. All’interno del marcatore TITLE è necessario specificare il titolo della pagina che appare nel titolo della pagina e fra i risultati dei motori di ricerca.

I visitatori fanno attenzione ai titoli della pagina, quindi fai attenzione al fatto che siano chiari… se realizzi una pagina su come prendersi cura dei cani ed il tuo si chiama ‘birillo’; non chiamare la tua pagina “birillo ed i suoi simpatici amici” ma dovresti chiamare la tua pagina con un titolo del tipo “Come prendersi cura dei cani”

4. Non forzare le persone a scaricare l’ultimo versione del browser o plugin particolari per vedere il tuo sito: a meno che tu abbia un sito bello da far paura, non ha senso ridurre il numero di contatti a causa di funzioni particolari del browser o per l’uso di animazioni in Flash.

Attualmente, con l’uso appropriato dei CSS e dell’XHTML puoi realizzare una serie di pagine dall’aspetto accattivante senza dover effettuare modifiche sostanziali alla struttura se browser obsoleti come Netscape 4 sono utilizzati da un discreti numero di utenti.

5. Pensaci due volte prima di usare i frame: nei vecchi tempi era utile ricorrere ai frame anche a causa della ridotta capacità dell’HTML di realizzare layout efficaci. Ora con la tecnica del posizionamento CSS supportata correttamente dai maggiori browsers non è necessario usare i frame per il 99% dei siti.

Chi realizza un sito web per la prima volta ha comunque problemi a realizzarlo correttamente e tende a rendere il sito più complesso del necessario, creando infine una serie di problemi per l’indicizzazione della pagina attraverso i motori di ricerca.

6. No ai trucchetti per giocare i motori di ricerca: nel passato sono stati sviluppati una serie di metodi discutibili al fine di acquisire un rank (posizionamento) elevato con i motori di ricerca. Fra le tecniche utilizzate c’era quella di inserire centinaia di parole chiave con il testo invisibile (stesso colore di sfondo, con posizionamento negativo o con determinati tag HIDDEN nel foglio di stile.

Queste tecniche hanno avuto un successo limitato nel passato ma ora non sono più valide. Cercare di giocare Google (il re dei motori di ricerca) significa portare il tuo sito verso una fine orribile! Non possiamo spiegare, in questo articolo come ottenere un posizionamento elevato, ma tieni a mente questo concetto: un buon contenuto presentato in modo onesto, è alla base di un elevato rank ed un traffico elevato sul tuo sito.

7. Chat rooms: molti visitatori non danno credito alle chat rooms. E la cosa peggiore di una chat room è avere una chat room vuota! Chi ha voglia di entrare in un club in cui non c’è nessuno? Se non hai un sito con decine di migliaia di visitatori al mese, anche se uno degli argomenti trattati necessita la realizzazione di una chat room, lascia perdere.

8. Introduzioni Flash: sono colpevole come la maggior parte dei web designer perchè anche io ne facevo un uso pesante fino a qualche anno fa. Fino a pochi anni fa, le introduzioni in Flash erano dappertutto, anche se non sono sicuro se qualcuno sapeva perchè era necessario realizzarle, ma il collegamento ‘skip intro’ è il secondo pulsante più cliccato nei siti oggi!

Non perdete tempo con la realizzazione di introduzioni Flash e a mio modesto avviso Flash dovrebbe essere utilizzato solo in occasioni speciali dove si vuole dare un tocco di animazione e interattività per colpire l’utente in una zona particolare del sito e comunicare un messaggio emotivo.

9. Pagine in costruzione: non scordare che se la pagina non è completa, non metteterla online. Se esiste un link che porta a quella pagina, togli il collegamento fino a quando la pagina non è pronta. Se la tua pagina è quasi pronta per farlo notare ai tuoi visitatori, segnala una data con gli ultimi aggiornamenti e inserisci al più presto i contenuti mancanti. Soprattutto non inserire una di quelle stupide immagini ‘under construction’ con lo scavatore o l’omino che scava….ma che scava nella ricerca del tuo sito?

10. Non utilizzare uno sfondo musicale sulle tue pagine web! Ad alcuni che realizzano siti web piace l’idea di un piccolo sottofondo musicale per dare un maggiore carattere alla pagina. Se si tratta dei siti di MTV o della Disney, questa scelta è ottimale. Ma nella maggioranza dei casi non è una buona idea per due buone ragioni:

  1. I file sonori sono tipicamente ‘pesanti’, e richiedono un elevato tempo di scaricamento.
  2. Alcuni computer non hanno le casse attive, così costringi queste persone a scaricare materiale che non utilizzano.

Se proprio intendi inserire una colonna sonora nel tuo sito, utilizza almeno con l’opzione di poterla accendere o spegnere. In questo caso ti consigliamo di realizzare una struttura in Flash, la maggioranza dei browser hanno il plug-in di Flash e Flash supporta i file compatti mp3.

Naturalmente, se desideri dare agli utenti la possibilità di ascoltare musica, come l’ultima registrazione della tua band o la registrazione di un’intervista, la soluzione migliore è creare una versione podcast del file mp3 da scaricare in streaming o leggere con un lettore gratuito.

11. Tieniti sempre aggiornato sulle ultime tecniche in termine di codice e script ma non esagerare e riversarle tutte nello stesso sito, sopratutto se non lo richiede. Servizi come i feed RSS, il podcast o la gestione di immagini con tecnologia ajax (ligthbox, thickbox, ecc…) sono tutte tecniche molto attraenti del nuovo web, ma sono da utilizzarsi con parsimona per non farle inflazionare.
Autore: Stefano Martini

Technorati tag: siti web, flash, css, xhtml, web design, google, mp3, frame

mar 12

Il 7 marzo scorso il World Wide Web Consortium (W3C) ha ufficializzato il nuovo gruppo di lavoro istituito per la stesura del futuro nuovo standard HTML per la realizzazione di siti web e applicazioni webtop.

w3clgicon.pngPer questa nuova roadmap ci sarà una importante call of partecipation, ovvero il contributo non solo delle compagnie sviluppatrici di browser, ma anche dei professionisti del Web come web designers, software developers e content designer.

Il nuovo gruppo di lavoro annovera tra i suoi membri i produttori dei browser di maggiore diffusione: Mozilla, Opera, Microsoft e Apple.

La scelta di rinnovare gli sforzi di sviluppo dell’HTML classico arriva nonostante la riformulazione eseguita secondo le specifiche del formato XML che ha dato alla luce l’Extensible HTML (XHTML), ma che purtroppo, anche in base alle mie esperienze di navigazione su siti web, sta tuttora seguendo un lento processo di adozione da parte degli operatori del settore.

Il lavoro di sviluppo proseguirà dunque parallelamente, tra il gruppo di lavoro dedito all’HTML e quello dell’Extensible HTML (XHTML), inoltre il W3C progetta di rilanciare l’HTML Coordination Group e il Forms Working Group che continuerà lo sviluppo dell’architettura XForms.

Autore: Stefano Martini
Technorati tag: Siti web, web designer, content designer, HTML, XML, W3C, XHTML, Browser, Mozilla, Opera, Microsoft, Apple.

feb 26

Ancora non ci credo, 45 milioni di euro spesi, per un portale senza personalità, alla faccia di chi ci deve rappresentare, [...] speriamo siano stati meno, molti meno!

italia.pngItalia.it, leggendo da vari blog e forum, ha solo difetti e sono pienamente daccordo: il logo sembra un cetriolo, la struttura del codice del sito è anacronistica ed in pochi giorni le modifiche sono già state varie.
Le prime ore di Italia.it non fanno altro che moltiplicare le tinte fosche che avevano attorniato l’esordio del sito tra il pubblico. Che Italia.it non nascesse sotto una buona stella lo si era capito fin da subito e forse il peso del fato è in questo caso stato incisivo: il sito voluto da vari governi, promosso da vari governi, finanziato e sviluppato da vari governi, nasce proprio nel momento in cui il Governo cade. A volte, il destino…Il Governo ha fatto però appena in tempo a presentare il logo prima della crisi che sta portando al nuovo voto di fiducia. In poche ore il noto “it” è divenuto il marchio più criticato e mal voluto del paese, smontato sotto ogni punto di vista e con pesanti accuse di plagio non prive di motivazioni. Tutto viene immediatamente soppesato sui costi: un centinaio di migliaia di euro per un logo tanto inefficiente appare il primo spreco, ma il clamore nasce dal fatto che il logo era solo la prima crepa di un abisso che stava per aprirsi poche ore più tardi.

Nel momento in cui Italia.it si è presentato le voci possibiliste circa una sua riuscita erano legate perlopiù ad un inconscio patriottismo che vedeva nelle bellezze della nazione le uniche bontà del progetto. Poi si è susseguita solo una serie infinita di critiche che su Edit hanno sviluppato una discussione senza precedenti per il blog ed ha visto nascere in contorno tutta una serie di iniziative di immediato successo. Alcune delle critiche sviluppatesi:

 

  • «l’uso insulso delle tabelle annidate per costruire il layout. tecnicaglie dirà qualcuno, [...] eppure è un indizio tra tanti e non meno rilevante del pressappochismo che emerge lampante da quel progetto» (IMHO, dove è segnalato un clone del sito costruito con XHTML e CSS invece del rozzo scheletro tabellare adottato dall’originale);
  • la caccia al responsabile ha probabilmente messo alle strette coloro i quali hanno messo avanti la faccia inserendo il proprio nome nella pagina “chi siamo”: nel giro di poche ore la pagina è stata modificata più volte e ad ogni update ne è scomparso un pezzo trasformando il “chi siamo” in “indovina chi siamo“;
  • la prima vittima del sito è l’intro musicale. Criticata per gusto, peso, utilità ed opportunità, l’animazione è scomparsa figliando a cascata l’eliminazione di tutte le altre animazioni che bloccavano il sito e la navigazione degli utenti;
  • se i difetti nella forma non bastassero, ecco anche una segnalazione relativa alla sicurezza del sito. Gianni Amato, dopo una serie di verifiche, sentenzia: «il sito nuovo di zecca è soggetto ad una vulnerabilità Cross Site Scripting a causa di un superficiale controllo degli input dell’utente. Il filtro esiste ma i tag filtrati non sono sufficienti ad impedire la manipolazione di uno script javascript per sferrare un attacco XSS».

La chiave di lettura migliore, la stessa sospettata più volte, è suggerita da un insider che ha confidato al blog Scandalo Italiano il proprio punto di vista sulla vicenda: «giustamente tutti i creativi e webdesigner della blogosfera sono insorti al momento della pubblicazione del portale. [...] Ma credo che un approccio così tecnico sia limitato.

Il punto è che non bisogna partire dal presupposto che i 45 milioni di euro siano stati investiti nello sviluppo web e che ci stiano lavorando da anni». Il problema, insomma, non può limitarsi ai difetti sotto gli occhi di tutti, ma va cercato anche e soprattutto nelle firme che hanno smosso a monte i famigerati 45 milioni di euro dalle sale dei bottoni.

Sinceramente pensavo di trovarmi difronte a un progetto web professionale, [...] la voce forte del web 2.0, il web accessibile a tutti, pensavo di trovare grafica pulita ed elegante e vedere un nuovo modo di concepire le applicazioni web-top, [...] nulla di tutto questo.

Pensavo di trovare un portale con informazioni fluide e semplici da cercare, insomma penso troppo e mi sono illuso.
Ma allora anche il nostro piccolo portale dedicato alle Vacanze Low Cost, vale cosi tanto? Almeno gli URL sono “umani” e la grafica beh… fate voi.

Cominciamo bene la splash page già da errori di validazione

  • Logo… ah si il cetriolo
  • Immagini sgranate e di bassa qualità
  • Rewrite degli URL inesistente
  • Assenza di feed RSS di scelta tra i vari canali informativi
  • Validazione del codice HTML 4.01 Strict assente in molte poagine
  • Link spesso interrotti

«Non potete fare a meno di cantare un’aria di Rossini anche fuori dalla doccia? Una buona bottiglia di vino è il primo regalo che vi viene in mente da fare e da ricevere? Non appena esce un raggio di sole correte a comprarvi un nuovo costume da bagno? Davanti a un pezzo di parmigiano inziate a declamare poesie?»
Con queste testi i turisti faranno a botte per venire in Italia… un bel salto di qualità come immagine e promozione sul web…

Complimenti a chi ha gestito il progetto e ha scelto i collaboratori…almeno uno dei 22 punti della Legge Stanca si potevano rispettare?