Scrivere Sul Web


Home Page | Commenti | Articoli | Faq | Documenti | Ricerca | Archivio | Storie dalla Sala Macchine | Contribuire | Imposta lingua:en it | Login/Register


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:

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:

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

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

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

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

Massimo

-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


Anonymous coward

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

Beh , di fatto l'accessibilità obbliga a usare i DIV per le impaginazioni complesse. Perché esclude le tabelle. Questo perché, oltre a non essere semantiche e aggiungere complessità al DOM, tendono a confondere gli screen reader e i browser testuali.

Per quanto riguarda la posizione dei DIV: certo, dipende dal resto del codice... ma la stessa osservazione vale per qualsiasi tag! smiley Di fatto, per impaginare in modo non triviale, è obbligatorio usare i CSS... che lasciano ben poco al caso.

-- Anonymous coward

Dret

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

Le tabelle usate in maniera strutturale sono ormai considerate Deprecate!

Concordo con chi afferma che andavano bene 10 anni fa!

La strutturazione moderna di un layout si fa con i Div, che sono Box atti a contenere le aree tematiche del sito ed eventuali sottosezioni (l'uso dovrebbe comunque essere limitato il più possibile alle Macroaree e associato con un uso "semantico" di tutti gli altri elementi HTML disponibili).

L'impatto iniziale per molti potrà essere più ostico (la tabella da più sicurezza ma è limitante e forza il signfificato stesso dell'elemento HTML). Se associata ad un codice Validato W3C e che presti un minimo attenzione alla semantica, si può produrre un sito facilmente modificabile (via Css), snello e appetibile per i motori di ricerca!
;-)

-- Dret


Davide Bianchi

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

> Le tabelle usate in maniera strutturale sono ormai considerate Deprecate!
> Concordo con chi afferma che andavano bene 10 anni fa!

Funzionano, non rompono i cosi e fanno quello che devono fare. Che ti lamenti?

-- Davide Bianchi


ciapel

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

bravo


grazie


polpetta

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

grazie sei fantastico.... anchio dovrò fare un sito adesso ho le idee piu chare grazie veramente quando lo avrò fatto faro queste prove e poi ti diro come è andata ...ciao e stammi bene spero che vedrai il mio messaggio... polpetta

polpetta

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

ciao sono semrpe io.... polpetta voevo solo dirto che quando ti ho scritto per la prima volta ho dato solo un occhiata veloce al sito ...... oggi invece ho approfondito e ho visto che è proprio bello... volevo farti anche gli auguri di natale anche se purtroppo non ci conosciamo ciao e stammi bene....polpetta

Michele Pittoni

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

Vale sempre il solito principio insomma: Keep It Simple Stupid!

iacchi

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 winking.



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.


Lisa

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


Anonymous coward

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

"Funzionano, non rompono i cosi e fanno quello che devono fare. Che ti lamenti?--
Davide Bianchi"

semplicemente meravigliosa espressione! -- GCS/CM d- s:+: a--- C++ UL+++S E--- W+(-) N o+ w-- O? M- PS+ PE Y+ PGP t+(++) 5? X- R* tv- b++ DI+ D++++ G+ e h! r++ y++

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.

Volete contribuire? Leggete come!.
 
 

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.


Questo sito era composto con VIM, ora e' composto con VIM ed il famosissimo CMS FdT.

Questo sito non e' ottimizzato per la visione con nessun browser particolare, ne' richiede l'uso di font particolari o risoluzioni speciali. Siete liberi di vederlo come vi pare e piace, o come disse qualcuno: "Finalmente uno dei POCHI siti che ancora funzionano con IE5 dentro Windows 3.1".

Web Interoperability Pleadge Support This Project
Powered By Gojira