Caccia all’errore

Creare un sito Internet è davvero molto facile. Creare un buon sito, leggibile e leggero, approfondito e facile da navigare, è diabolicamente difficile.
Chi ci prova cade quasi sempre in alcune trappole. Capita anche ai più esperti, perché è davvero facile e perché i programi che oggi usiamo per aiutarci nel nostro compito sono ancora primitivi. Chi ricorda i primi tempi del desktop publishing, con PageMaker 1.0 e rivali, deve immaginarsi di essere tornato in quel periodo.
In questo articolo cercheremo di presentare gli errori più comuni in cui cadono i creatori di siti Internet e i metodi da adottare per evitarli. Molti arrivano al Web partendo da una esperienza di impaginazione e design su carta. La maggior parte delle loro abilità sono trasportabili sul nuovo mezzo: ma è indispensabile che questi professionisti si liberino al più presto di alcuni pregiudizi. A cominciare dal più grande: lo HTML non è stato creato come un sistema per impaginare. Lo HTML è lo HyperText Markup Language, ovvero — in traduzione — un linguaggio per creare ipertesti indicando il significato delle parti che lo compongono. Sottolineo rimarco e ribadisco: il significato, non l’aspetto grafico. “Questo è un titolo di capitolo”, non “questo è 18 punti grassetto”.
Gli organismi internazionali che curano lo sviluppo di Internet si rendono conto che ci è necessario impaginare, presentare, illustrare le nostre pagine. Per questo motivo stanno creando nuovi strumenti (che non sono HTML): si chiamano SMIL, XML, CSS1 e CSS2...
Tutte queste meraviglie appariranno gradualmente, non prima che la versione 5 di Internet Explorer e Netscape Navigator facciano la loro comparsa. Per chi vive nel presente, come bisogna fare se si vuole mettere insieme il pranzo e la cena, resta un’unica scelta: stuprare lo HTML esistente e usarlo per realizzare quel po’ di impaginazione che ci rende possibile.
Scelta lecita, purché sia chiaro quanti rischi porta con sè. Quanto più sofisticate le nostre realizzazioni, tanto più stiracchiato lo HTML. Di conseguenza, avremo pagine dall’aspetto differente in Explorer rispetto a Navigator. Peggio ancora: pagine che oggi hanno un bell’aspetto ma che appariranno orrende, tra pochi mesi, nella prossima versione di quei programmi. Molti piccoli problemi nascono quando, involontariamente, trattiamo una pagina Web come se fosse fatta di carta.
• I font più leggibili sul Web sono quelli bastoni, come Helvetica. Sulla carta, che ha una risoluzione molto maggiore, sono più leggibili i font con le grazie, come Times.
• Noi non controlliamo i font installati sulle macchine dei nostri visitatori. Per questo motivo, non possiamo usare i font che ci piacciono di più (vedere “Font, un soldo la dozzina”).
• Possiamo usare le tabelle per impaginare le nostre pagine (ne abbiamo parlato nel numero di dicembre scorso), ma non possiamo regolare con precisione la posizione degli elementi dentro la finestra.
• Una pagina Web che contiene immagini apparirà sempre più scura su un PC rispetto a un Mac. Un motivo in più per controlare i nostri siti sia su PC che su Mac
• Tutte le scritte appariranno più grandi sullo schermo di un PC rispetto a quanto vedremmo su un Mac o una macchina Unix, perché il sistema operativo Windows definisce (scorrettamente) che i font debbono usare 96 punti per pollice anziché 72, come dovrebbe. C’è una soluzione che passa attraverso JavaScript (vedere “Rimpiccioliamo il PC”). Molti designer italiani analizzano tutte le limitazioni che lo HTML gli impone; spaventati, decidono di usare una estensione allo HTML per realizzare le loro pagine. Tecnologie come QuickTime, Macromedia Shockwave e Flash, Adobe Acrobat.
Quando noi adottiamo una estensione nella nostra pagina, noi obblighiamo i nostri visitatori a procurarsi e scaricare un plug-in, installarlo nei loro sistemi, riavviare il programma o l’intero sistema, e tornare a visitarci. Chi non esegue questa sequenza di operazioni non vede nulla. Il risultato? Il novanta per cento dei visitatori potenziali se ne va.
Ne vale la pena?
Quando un visitatore utilizza Netscape Navigator come browser per visitare le nostre pagine, noi possiamo inviargli una pagina speciale (in “JavaScript”) che analizza di sottobanco il suo computer. Se il plug-in che ci interessa viene trovato, mandiamo direttamente il visitatore al nostro sito. In caso contrario gli suggeriamo di scaricare il plug-in e nel frattempo lo mandiamo a un “sito minore”, realizzato senza richiedere il plug-in, graficamente minimalista ma che gli permette di trovare le informazioni che gli servono.
Questa strategia ha due limitazioni: primo, ci obbliga a sviluppare due volte il sito. Secondo, non funziona con Internet Explorer, che ormai rappresenta quasi il 50% dell’installato. Explorer, quando proviamo a controllare l’esistenza di un plug-in, passa immediatamente a scaricarlo senza avvisare l’utente. Idea del piffero: la tipica conseguenza è che il nostro visitatore non vede apparire nulla a video per un sacco di tempo, si annoia e va da qualche altra parte. (Secondo studi recenti, un visitatore è disposto ad aspettare al massimo 15 secondi prima che una pagina Web gli appaia completamente a video).

Un errore banale che tutti i principianti dell’HTML (e, purtroppo, parecchi non principianti) commettono è quello di ignorare la dimensione delle pagine Web che creano. Una pagina Web efficace è una pagina HTML piccola, veloce a caricare, immediata nell’apparire. Se avete accesso alle statistiche d’uso dei vostri siti (dovreste: sono molto istruttive e qualsiasi buon provider di Internet le può fornire senza problemi) noterete che le pagine più popolari sono, quasi sempre, quelle più veloci a caricare. Gli utenti si allontanano dalle pagine più grandi, anche da quelle più belle: si stizziscono nell’attesa e le abbandonano prima che il caricamento sia completato. Una ulteriore controprova: provate a visitare le pagine Web più popolari di tutta l’Internet, e cioè le pagine principali dei servizi come Altavista, Yahoo, Lycos. Sono tutte piccolissime.
La maggior parte dei programmi autore HTML vi mostra quanto tempo sarà necessario agli utenti per scaricare e visualizzare la vostra pagina (vedere “Piccolo è bello”). Se il vostro programma preferito non offre questa funzionalità, potete ricorrere ai servigi di due siti Web che calcoleranno i tempi per voi:
Bobby
http://www.cast.org/bobby/
Website Garage
http://www.websitegarage.com
La dimensione delle pagine HTML è un altro buon motivo per prendere con le pinze la attuale generazione di programmi autore: DreamWeaver 1.2, per esempio, è in grado di creare con facilità pagine bellissime... e pesanti oltre 100 kB di solo codice HTML. Inguardabili.

Un sito Web è un oggetto software. Come tutti gli oggetti software, richiede che noi passiamo il novanta per cento del tempo a costruirlo e il resto del tempo a testarlo. L’altro novanta per cento, per la precisione.
Un sito non può dirsi pronto se non l’abbiamo provato sia con Nescape che con Explorer (ciascuno ha il 50% del mercato), sia con la versione 3 che con la versione 4 (anche qui, circa 50/50), sia con Macintosh che con Windows (la proporzione dipende dal sito). Fate i conti: sono otto configurazioni diverse da testare, minimo. Quanto più il sito è elegante e sofisticato, come dicevamo, tanti più problemi emergeranno in questa fase. La pagina “differenze.html” (che abbiamo messo sul CD-ROM di questo numero per vostra comodità) illustra alcune delle molte differenze tra Explorer e Navigator.
Notate che è impossibile installare entrambe le versioni (3 e 4) di Explorer sullo stesso computer: impossibile su Mac e impossibile su PC. Per questo motivo la fase di test richiede almeno quattro computer differenti.
L’unica soluzione praticabile: copiare dall’industria del software. Dobbiamo dotarci di un gruppo di beta tester amici, un gruppo cioè di navigatori che provi le nostre creazioni e ci mandi rapporti, richieste, schermate con i problemi notati. Le scritte appaiono troppo grandi sullo schermo dei PC, sia in Netscape che in Explorer, a causa di un problema di Windows. La soluzione: aggiungere un piccolo programma che le rimpicciolisce.
All’inizio della pagina, subito dopo la riga <BODY>, scriveremo:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (navigator.platform) { // Non esiste in IE 3.0
 if (navigator.platform.indexOf("Win") == -1) {
  document.write ("<BASEFONT SIZE=3>"); }
 else {
  document.write ("<BASEFONT SIZE=2>"); }
  }
else {
 document.write ("<BASEFONT SIZE=2>"); }
//-->
</SCRIPT>

In coda alla pagina, subito prima del tag </BODY>, dovremo scrivere:
</BASEFONT>

Perché questo trucco funzioni, dovremo curare di usare dimensioni relative dei font dentro le nostre pagine. Per esempio, se vogliamo ingrandire una riga che fa da titolo, dovremo scrivere:
<FONT SIZE="+1">
e non, per esempio:
<FONT SIZE="4">

Lo HTML ci permette di specificare con quale font deve apparire a video una nostra pagina. Andiamo però incontro a molti guai quando scriviamo una istruzione come questa:
<FONT FACE="Helvetica">
Il problema sta nel fatto che noi non controlliamo la macchina dei nostri visitatori. Nel caso dell’esempio, Helvetica non è installata sulla stragrande maggioranza dei PC. La soluzione? Specificare delle alternative, come HTML ci permette di fare. Se vogliamo usare un font a bastoni, scriveremo:
<FONT FACE="Helvetica, Arial, Geneva, sans">
Se ci serve un font con le grazie, useremo:
<FONT FACE="Times, Times New Roman, New York, serif">
L’esperienza poi insegna che ci sono altre combinazioni valide. Per i titoli val la pena di provare:
<FONT FACE="Palatino, Georgia, Times New Roman, Times">
Per un testo diverso dal solito Helvetica:
<FONT FACE="Verdana, Helvetica, Arial, Geneva, sans">