Scrivere Sul Web

Aggiornato per il 25 secolo ed un pezzo oltre!

Una doverosa premessa prima di tutto: io non ho alcuna intenzione di imporre niente a nessuno, se non siete d'accordo con la mia impostazione su questo argomento siete nel vostro diritto.

Quello che segue e' semplicemente un tentativo di definire un minimo di "stile" generale per la stesura ed il mantenimento di un sito Web. Questo "stile" e' stato creato dopo una serie di tentativi ed errori e non e' frutto di studi sofisticati ma della mia esperienza personale come curatore di siti e come utente di Internet.

L'HTML e' un "linguaggio" fatto per fornire un minimo di funzionalita' per poter piazzare dei testi su di una pagina Web, non e' progettato per essere un Word Processor o un sistema di Desk Top Pubblishing, prima comprenderete questo semplice fatto prima riuscirete ad utilizzarlo nel modo corretto.

Molto spesso si sentono (o si leggono) Web Master in erba lamentarsi del fatto che "il browser PincoPallino non mi visualizza il mio sito in modo giusto" o "il browser TizioCaio funziona in modo diverso". Questi signori non si sono resi ancora conto di vivere in un mondo altamente imperfetto.

Nel momento in cui incespicate nell'ultimo gradino del seggiolone e picchiate il naso per terra (metaforicamente parlando) capirete che:

• Non ci sono due browser che visualizzano la stessa pagina nello stesso modo
• Se l'utente ha il vostro stesso browser probabilmente ha una risoluzione diversa
• Il browser non e' mai stato pensato per essere un Word Processor, e la sua struttura riflette esattamente questo fatto
• Nessuno possiede Internet, quindi prima che uno standard sia accettato universalmente ci vuole parecchio

Queste qui' sopra possono essere riunite nella classica massima del buon Murphy: se qualche cosa puo' andare male lo fara'.

Quando definiamo un documento Web occorre tenere bene a mente queste informazioni, per evitare di incorrere nel classico errore del "lo vedo bene sul mio, si vede bene ovunque".

Quando leggiamo un libro ci aspettiamo certe cose, in particolare ci aspettiamo che il testo vada da sinistra verso destra (a meno che non stiamo leggendo l'arabo o il giapponese), dall'alto verso il basso, che le frasi siano strutturate in un certo modo e che le pagine si susseguano in modo consequenziale.

Un libro che ci costringe a saltare da una pagina all'altra a leggere all'indietro o dal basso verso l'altro non avrebbe molta fortuna. Non con me almeno.

Un sito internet non e' un libro, ma ne eredita molte caratteristiche. In particolare, gli utenti di un sito internet si aspettano che il sito rispetti certi "canoni". In genere, quando io vado su un certo sito mi aspetto di trovare un sito:

1. coerente
2. semplice
3. tollerante
4. usabile

Vediamo queste caratteristiche una per volta.

Esattamente come le pagine di un libro sono scritte tutte con lo stesso font tipografico, rispettano gli stessi canoni di impaginazione e di lingua e non saltano avanti e indietro, io mi aspetto che tutte le "pagine" di un sito internet siano ragionevolmente simili, i caratteri siano ragionevolmente usati e le pagine si susseguano in modo coerente.

Se c'e' una "barra di navigazione" mi aspetto che questa barra sia piu' o meno la stessa su tutte le pagine. Se la barra comincia a sparire o "perde i pezzi" da una pagina all'altra senza apparente logica ci metto poco a chiudere il browser e ficcare il sito nella blacklist.

Se il sito e' in piu' lingue o appartiene ad una multinazionale con sedi ovunque, io mi aspetto che, indipendentemente dalla lingua o nazione in cui io sto guardando il sito, questo appaia piu' o meno simile e che le cose siano piu' o meno sempre nello stesso posto.

Piu' semplice e pulito un sito e', meglio e'. C'e' la tendenza in molti casi a cercare di mettere tutto (anche il lavandino di cucina) su una pagina per farla apparire "piu' interessante". Niente e' piu' sbagliato. La pagina appare semplicemente confusa e strapiena di roba inutile.

E' impossibile trovare cio' che si cerca (che sicuramente e' li'... insieme a tutto il resto) e, peggio ancora, risulta di una lentezza mostruosa.

Date invece una struttura alla pagina e cercate di dividere le cose in modo coerente tra le varie parti del sito, mantenendo la stessa struttura (vedere coerenza sopra).

Utilizzare possibilmente uno schema di colori semplice, evitare sfondi ultrasofisticati che rendono il testo illeggibile o difficilmente riconoscibile.

E per l'amor del cielo, evitate lo sfondo nero con i caratteri bianchi (a meno che non stiate preparando un sito Web per una azienda di Pompe Funebri), e' diventata una costante in Internet, praticamente ci sono solo montagne di pagine nere con caratteri bianchi (benche' abbia visto anche cose come sfondi Viola con caratteri Rossi o peggio).

Ultimamente si e' diffusa la tendenza alla "struttura organica", che altro non e' che la tendenza a non avere le pagine suddivise in riquadri a tabella ma avere le varie parti del sito che seguono contorni piu' arrotondati. Niente di male, ricordiamoci solo che la mente umana tende automaticamente a pensare in termini di "blocchi" ed andare troppo verso l'organico rischia di rendere l'interso sito semplicemente inultizzabile.

Tenete conto che il vostro sito potrebbe essere visto dall'ultimo utente della terra con un bellissimo modem a 33.6 Kb, con Internet Exploder 3 e con monitor da 14 pollici.

A questo riguardo pensiamo anche alla velocita' con cui le pagine sono caricate e mostrate agli utenti. Studi fatti dal 1998 al 2002 indicano che l'80% degli utenti abbandonano una pagina se non e' caricata dopo 10 secondi. Dal 2002 la velocita' media delle connessioni internet disponibili per gli utenti e' migliorata, dobbiamo quindi considerare che la pazienza degli utenti sia diminuita.

"Sorry, questo sito richiede il plugin fraca$$odavelletri versione X.Y"

Evattelaffangrulo.

Esistono un paio di centinaia di versioni diverse di browser nel mondo, posso sapere perche' io dovrei andare ad installare questo-e-quel coso semplicemente per vedere il tuo merdacchioso sito internet? Be', newsflash: esistono sicuramente un paio di milioni di siti internet nel mondo che non richiedono quel coso e danno le stesse informazioni.

Il sito dovrebbe essere tollerante, il che significa non richiedere l'uso o la presenza di particolari funzionalita' del browser per vederne le caratteristiche principali. E' sempre possibile dire "per ottenere il massimo vi serve questo-e-quello", ma il minimo deve essere sempre disponibile.

Non tutti hanno uno schermo 25" a 1024 x 768 con 64 milioni di colori e perfettamente calibrato.

Questo dettaglio viene spesso "dimenticato" da molti WebMaster, con risultati abbastanza orrendi, ad esempio il testo viene "oscurato" da parti grafiche, l'utente e' costretto ad utilizzare le barre di scorrimento per leggere il testo da sinistra a destra, eventuali banner e barre di navigazione possono diventare illeggibili o irriconoscibili, peggio ancora se aggiungiamo un background non omogeneo.

Un'altra cosa che mi lascia piuttosto perplesso e' la tendenza ad avere il sito di larghezza fissa. Questo si incontra spesso con siti prodotti con un qualche tool di editing. Oggigiorno tutti i foxxuti monitor sono "wide-screen", ed avere il monitor di un metro e mezzo di larghezza e vedre una pagina che appare sempre esattamente di X centimetri nel mezzo del monitor fa' abbastanza pena. Mai sentito parlare di "autoadattamento"?

E siamo finalmente arrivati alla cosa piu' importante di tutte.

Il sito deve essere usabile. Che vuol dire? Domandiamoci prima di tutto perche' andiamo su un certo sito internet. In genere ci andiamo per diversi motivi, a seconda del sito. Se il sito e' il sito di un produttore/fornitore di qualche cosa, ci andiamo per trovare informazioni relative ad un prodotto che vogliamo acquistare o che stiamo pensando di acquistare.

Se il sito e' di news o di informazioni ci andiamo per leggere il testo ed i contenuti. Stessa cosa se e' un blog.

Se troviamo un blog nel mezzo di un sito di e-commerce non e' che ci faremo molto. Stessa roba se nel mezzo di un sito di news troviamo pubblicita' relative a computer e roba varia.

Per esempio, il sito di una nota catena di magazzini di materiale elettronico e' totalmente inutile. Solo per trovare l'indirizzo di uno dei loro magazzini occorre farsi venire l'emicrania. Prezzi? Disponibilita' di prodotti? Recensioni dei vari prodotti? Scordatevelo. Un esempio opposto e' il sito di un altra arcinota catena di magazzini di mobili ed accessori per la casa. Non solo il sito e' estremamente coerente (non importa in quale paese siete ed in quale lingua lo guardate, e' sempre lo stesso) ma fornisce tutte le informazioni che vi servono.

Concentratevi sullo scopo del vostro sito ed evitate di divagare su cose che non c'entrano niente, in questo modo evitate di perdervi per la strada e di aggiungere cose inutili.

Non si puo' piantare un chiodo usando una motosega... o meglio si puo' fare, ma nessuno sano di mente lo farebbe. Non aspettatevi che un programma sia una specie di coltellino svizzero multifunzioni. Cercatevi il tool giusto per il vostro scopo ed usatelo per quello.

Non usate generatori di codice (FrontPage in cima alla lista) a meno che non abbiate da convertire una grande massa di file in codice HTML o non abbiate alcuna voglia di imparare alcunche'. Un generatore di codice vi toglie il controllo di cio' che state facendo e vi impedisce di imparare.

Teniamo anche conto che, oggigiorno, molto spesso i siti non sono " scritti a mano" ma usano un qualche tool di pubblicazione o gestione del contenuto (CMS), quindi verifichiamo cosa il tool/CMS richiede per poter funzionare. Molti CMS tendono ad avere degli editor integrati che limitano le possibilita' ma (se non altro) forzano una certa coerenza tra le varie pagine del sito.

La "cassetta degli attrezzi" di qualunque Web Master dovrebbe prevedere come minimo:

• un buon editor ASCII

  possibilmente con la possibilita' di evidenziare automaticamente i TAG html, di effettuare ricerche e sostituzioni su piu' files e magari la capacita' di eseguire delle Macro per effettuare le modifiche veloci

• un editor grafico

  per ritoccare o creare le immagini da mettere sul sito, cambiare gli sfondi e cose cosi'

• un tool di conversione dei file grafici

  per poter convertire i file grafici da un formato all'altro e per preparare i vari thumbnail da usare nel sito

• un correttore ortografico/vocabolario

  per verificare la sintassi del sito

• un manuale di HTML/DHTML

  da tenere sempre a portata di mano per verificare l'esatta sintassi dei tag, nessuno si ricorda tutto a memoria e questo vi risparmia la noia di cercare le informazioni ogni volta

• eventualmente un programma di impaginazione grafica

  per disporre gli elementi sulle pagine senza dover codificare a mano il tutto, l'importante e' che il codice prodotto sia privo di "stranezze" e che, possibilmente, sia in grado di rileggere i file HTML dopo che li abbiamo "smanettati" a mano. Tenete conto che questo e' opzionale, si possono creare siti Web anche senza avere un tool di questo genere.

Se pubblicate il sito nello spazio affidatovi dal vostro ISP accertatevi di non superare i limiti imposti, questi possono coinvolgere:

• spazio occupato sul server
• numero di subdirectory/files
• numero di connessioni
• presenza/assenza di banner commerciali o altro

Considerate la possibilita' di passare ad un Web Hosting, cioe' di mettere il sito "a pensione" presso un altro provider, esistono migliaia di siti che effettuano Hosting a differenti prezzi e fornendo differenti servizi. Una bella ricerca sui motori fornira' almeno un centinaio di nominativi con cui partire.

Semplicita' e' la parola d'ordine migliore. Evitate l'ultimissima moda o l'ultimissimo ritrovato tecnologico, perche' il 90% degli utenti quella roba non ce l'ha.

Tenete a mente che non esistono due browser che visualizzano la stessa cosa nello stesso modo, quindi evitate di utilizzare Tag che sono specifici di un solo browser, tutti gli altri ignoreranno il tag o visualizzeranno delle schifezze. E non dite all'utente dove puo' andare a procurarsi un browser migliore o quello se ne andra' per non tornare piu'.

Provate le vostre creazioni con almeno 2 browser diversi, solo cosi' avrete una minima sicurezza del fatto che il documento risulta leggibile in entrambi i casi.

I commenti sono aggiunti quando e soprattutto se ho il tempo di guardarli e dopo aver eliminato le cagate, spam, tentativi di phishing et similia. Quindi non trattenete il respiro.

12 messaggi this document does not accept new posts

Kaspa Di Kaspa postato il 18/06/2008 19:00

-AT- Kaspa Di Massimo postato il 27/05/2009 00:25

> Mi permetto di dissentire sull'uso delle tabelle, forse potevano andare bene qualche anno fa, ma adesso ￜ OBBLIGATORIO usare i div nell'impaginazione, altrimenti:
> 1)non si capisce nulla di come si dovrebbero disporre i contenuti
> 2)la pagina non ￜ per nulla accessibile

Veramente e' abbastanza il contrario.
Una tabella impone un ordine a cio' che contiene, mentre un DIV é solo un rettangolo messo da qualche parte. Dove? Dipende dal resto del codice... La superiorità dei DIV sta nel poterli spostare dinamicamente senza problemi (spostare una cella di una TABLE non lo puoi fare cosá alla caSSo), nel poterli aprire e chiudere sempre dinamicamente, insomma... i DIV sono più versatili, é vero. Ma non certo obbligatori. Per quanto riguarda l'accessibilità immagino che tu ti riferisca a delle norme giuridiche o a degli standard W3C, non li conosco e non posso dirne niente. Ma che prevedano "obbligatoriamente" i DIV, mi pare davvero strano.

Senza contare che pure i DIV hanno le loro grane: controllarne con precisione la posizione su browser diversi non é proprio facile. Inoltre, per fare quello per cui le tabelle sono nate per fare (elencare dati in forma tabellare) non c'é ancora niente di meglio che le tabelle, appunto

-- Massimo

@ Massimo Di Anonymous coward postato il 08/03/2013 03:56

-AT- Massimo Di Dret postato il 13/06/2009 11:54

-AT- Dret Di Davide Bianchi postato il 14/06/2009 07:11

ciapel Di ciapel postato il 25/07/2008 15:34

polpetta Di polpetta postato il 09/12/2008 09:05

polpetta Di polpetta postato il 09/12/2008 16:27

Michele Pittoni Di Michele Pittoni postato il 29/12/2008 18:45

iacchi Di iacchi postato il 03/01/2009 07:23

Magari ora come ora le percentuali di utilizzo sulle risoluzioni del monitor sono un po' cambiate (non credo ci sia ancora un 24% di 640X480). Visto che come dici non è bello avere troppo spazio ai lati in un sito, forse è meglio rivedere un po' quelle percentuali e orientare la larghezza minima su un valore un po' più alto (800x600 magari, che in ogni caso è ora molto sotto il 24%, più probabile il 10% o magari più basso ancora .

Si vabbe', adesso se vai a cercare un monitor e' Widescreen o non lo trovi, quindi... Comunque si', quell'articolo fu' scritto quando i monitor erano ancora relativamente piccoli e le schede video non avevano un quad-core e richiedevano il loro alimentatore e ventola di raffreddamento.

Grande! Di Lisa postato il 12/01/2009 18:24

Quest'articolo merita un applauso.
Io ho tante (TROPPE) persone che mi implorano di visitare il loro blog hostato su Livespaces. Dopo i primi due visti, ho rifiutato.

Livespaces ha una struttura pesante, ridondante e scomoda già di per sé. Se poi iniziano ad aggiungerci stelline che fluttuano, colori da epilessia, musichette, foto giganti, e chi più ne ha più ne metta...mi viene voglia di imbracciare il bazooka!

-- Lisa

KISS Di Anonymous coward postato il 07/10/2009 12:19

12 messaggi this document does not accept new posts

Precedente Successivo

Davide Bianchi, lavora come Unix/Linux System Administrator presso una societa' di Hosting in Olanda.

Il presente sito e' frutto del sudore della mia fronte (e delle mie dita), se siete interessati a ripubblicare uno degli articoli, documenti o qualunque altra cosa presente in questo sito per cortesia datemene comunicazione (o all'autore dell'articolo se non sono io), cosi' il giorno che faccio delle aggiunte potro' avvisarvi e magari mandarvi il testo aggiornato.