Corso di e-marketing/ Compatibilità, la croce del Web

La piena compatibilità dei documenti di un sito Internet è un altro degli elementi da tenere in attenta considerazione durante la progettazione tecnica di un Web site. Con il termine compatibilità, non intendiamo solo la possibilità di vedere in maniera quasi perfetta una pagina con Microsoft Internet Explorer e Netscape, i due principali browsers, ma anche la possibilità di visualizzare uno stesso file alle risoluzioni più utilizzate (800×600 e 1024×768) e con qualunque piattaforma (Windows, Macintosh e Linux).

Le motivazioni di questi doveri, sono da ricercare nella natura stessa della Rete: non esiste un solo browser per visitare i siti che compongono il Web, non c’è solo un sistema operativo che permette di collegarsi alla grande Rete e sono infine molteplici le risoluzioni adottate dai vari navigatori.

È per questo quindi, che diventa importante creare siti Internet compatibili con la maggior parte delle macchine che si connettono al Web. Se non vogliamo perdere gli utenti di Netscape, è bene creare un sito che possa essere ben visualizzato anche da loro. Identico discorso meritano gli utenti che navigano a risoluzioni quali 640×480 o 800×600.

In questo articolo approfondiamo dunque l’argomento della compatibilità di un sito Internet, sviscerando a fondo uno dei temi che tocca più da vicino web masters e web designers.


La prima regola che deve seguire un sito Internet è quello di essere visibile dal maggior numero di computer possibili. In questo senso, influiscono tre aspetti fondamentali: la risoluzione, il browser ed il sistema operativo. Mentre la prima questione verrà analizzata in questo articolo, le altre due verranno approfondite nelle successive uscite del magazine. Abbiamo scelto proprio questo ordine, perché la compatibilità alle varie risoluzioni è un problema che va risolto alla radice della progettazione di un sito Web, prima ancora di inserire qualsiasi altro elemento che lo componga.

Se fino al 1999 la risoluzione usata in maniera quasi esclusiva era quella di 800×600 pixel, nel 2000 il grande aumento delle vendite dei personal computer con monitor a 17″ ha cambiato questo aspetto. Le nuove macchine infatti, utilizzano una risoluzione pari a 1024×768.

Molti Web masters pensano, sbagliando, che creare un sito visibile in maniera corretta ad una sola risoluzione, non sia un errore, ma bensì una “scelta progettuale”. Nulla di più ingenuo. Un Web master deve essere in grado di rendere la propria opera, visibile in maniera corretta a più risoluzioni. Se la scelta di 640×480 sembra ormai abbandonata, bisogna tenere in considerazione almeno due risoluzioni: la 800×600 e la 1024×768.
Iniziamo quindi ad analizzare la sintassi Html adeguata per creare un sito cross-resolution. Possiamo formattare la pagina utilizzando una tabella, le cui dimensioni vengono definite in due modi: una assoluta ed una relativa. La prima, al variare della risoluzione, lascia invariate le dimensioni del sito; l’unico neo è un margine ai lati della tabella oppure alla destra del sito. Vediamo un esempio di codice:


<TABLE WIDTH=760 BORDER=1 BGCOLOR=BLACK>

<TR>

<TD><FONT COLOR=WHITE>Testo</FONT></TD>

</TR>

</TABLE>


Cliccando qui , puoi vedere il risultato del codice appena creato.

Abbiamo creato una semplice tabella (una cella ed una riga). La sintassi enfatizzata, evidenzia le dimensioni di tale tabella (760 pixel, equivale ad una risoluzione di 800×600 perché il browser non sfrutta tutto lo schermo, né in larghezza, né tantomeno in altezza).

Apri il risultato dell’esempio e prova a cambiare la risoluzione del tuo PC. Vedrai che aumenterà o diminuirà il margine a destra della tabella, ma il testo o le immagini eventualmente contenute non subiranno variazioni. È possibile inoltre, far sì che la tabella rimanga al centro della pagina, inserendo l’attributo ALIGN=CENTER al tag <TABLE> .

Nella prima sintassi analizzata in questo articolo, abbiamo visto una tabella a dimensioni assolute. Esaminiamone una a dimensioni relative, ovvero che possano cambiare automaticamente al variare della risoluzione. Questo riportato qui sotto è un codice d’esempio per ottenere tale risultato:


<TABLE WIDTH=100% BORDER=1 BGCOLOR=BLACK>

<TR>

<TD><FONT COLOR=WHITE>Testo</FONT></TD>

</TR>

</TABLE>


Cliccando qui puoi vedere il risultato.

Al variare della risoluzione, la tabella si adatta automaticamente alle nuove dimensioni della finestra.

Le fondamenta di questo sistema sono state utilizzate per creare lo stesso Risorse.net. Il sito infatti, si basa su una tabella a larghezza relativa, divisa in tre colonne: due laterali contenenti menù, pubblicità ecc. ed una centrale con il contenuto vero e proprio della pagina.

Quale tra il sistema a larghezza assoluta o relativa sia il migliore, è difficile stabilirlo, ognuno dei due si caratterizza in vantaggi e svantaggi che ne equilibrano il confronto. È però importante, al momento della creazione del proprio Web site, controllare il risultato di ogni innovazione o modifica, alle risoluzioni di 800×600 e 1024×768, in modo da garantirne la compatibilità.


La parte che abbiamo appena visto, indica come risolvere i problemi di compatibilità alle varie risoluzioni del client. In questa pagina, analizzeremo un altro aspetto altrettanto importante, se non di più, nella realizzazione tecnica di un sito Internet: la compatibilità con i navigatori in commercio. Nella maggior parte dei casi vengono tenuti in considerazione due soli browsers: Microsoft Internet Explorer e Netscape Navigator . Questi due programmi occupano il 98% del mercato. Il terzo navigatore più diffuso è Opera , che viene utilizzato dallo 0,5% circa degli utenti. Questi dati ti permettono di capire come mai, nel momento della creazione di un sito, vengano presi in considerazione solo questi due programmi. Ultimamente però, nascono molte pagine compatibili esclusivamente con Internet Explorer, che da solo, copre quasi il 90% del mercato.

Nonostante queste cifre, è bene sapere che anche chi preferisce navigare con Netscape ha il diritto di visionare in maniera corretta una pagina Web ed un Web master deve dimostrare le proprie doti progettuali, proprio in questo senso: creando siti crossbrowser.

Prima di cominciare, è indispensabile premettere che i test presenti nell’articolo sono stati effettuati esclusivamente con le versioni dalla 4a generazione in poi. Alcuni Web masters però, verificano i loro siti anche con versioni meno recenti (Ms Ie 3 e Navigator 3, giusto per fare un esempio). Se anche tu volessi testare le tue creazioni con i browsers di 3a versione, sappi che con Netscape Navigator puoi installare più versioni nello stesso sistema. Internet Explorer però, non ti permette di fare ciò, perché nel caso tu tentassi di installare una versione più antiquata di quella presente, il programma ti avviserebbe della presenza di un software più recente. Nel caso inverso, ti eliminerebbe il programma più vecchio. Puoi eludere il problema con un piccolo trucco: su Windows 9x, puoi installare Ms Ie 3 a 16 bit e Ms Ie 4 o 5 a 32 bit.

Detto ciò, iniziamo analizzando i tags che più comunemente vengono riconosciuti da uno o l’altro browser:


<BLINK>Testo</BLINK>


Permette di far lampeggiare il testo racchiuso tra i marcatori
<BLINK></BLINK> . Grazie a poche righe di codice Dhtml è possibile ottenere lo stesso effetto crossbrowser. Per sapere come, consulta l’archivio della mailing list ” Una demo Dhtml a settimana ” di Risorse.net.

Un altro tag, molto conosciuto, che però restituisce un effetto solo su Ms Ie, è:


<MARQUEE>Testo</MARQUEE>


Anche questo tag, può essere emulato con poche righe di sintassi Dynamic Html. Questo esempio è stato trattato nella lista ad iscrizione gratuita ” Una demo Dhtml a settimana ” e l’arretrato è disponibile nell’ archivio .

I problemi di incompatibilità tra browsers però, non si risolvono certo qua. Per esempio, i Css , pur essendo stati approvati dal W3
Consortium (l’organo formato dalle più importanti società informatiche, tra cui Microsoft e Netscape, incaricato della definizione e standardizzazione dei nuovi linguaggi per il Web) non vengono supportati pienamente da nessun browser a parte MsIe. Netscape 4.x per esempio, interpreta solo parte di essi. Giusto per citarne qualcuno, ci sono proprietà molto importanti, quali:


<STYLE>

FONT { font-variant: small-caps }

</STYLE>


che non vengono interpretate da Netscape. Il codice appena presentato serve a rendere il testo racchiuso tra i tag <FONT></FONT> tutto maiuscolo. Esiste un altro sistema, sempre con i Css, per rendere il testo tutto maiuscolo:


<STYLE>

FONT { text-transform:capitalize }

</STYLE>


Comunque, anche questo sistema viene ignorato da Netscape.

Altre proprietà Css che Netscape 4.x non interpreta sono:

letter-spacing : spazio tra le lettere

word-spacing : spazio tra le parole

line-height : spazio tra le linee

a:hover : effetto onmouseover sui links

background-repeat : non ripetere lo sfondo o ripeterlo solo in verticale/orizzontale.

Estistono altre proprietà che non sono supportate da Netscape 4.x, ma questa non è la sede per approfondirle.

Passando all’argomento tabelle, Navigator non accetta BACKGROUND=nome-file come attributo del tag <TABLE> , ma solo all’interno del tag <TD> . In questo modo però, se volessimo creare una tabella a più celle, non potremmo definire in Netscape un’immagine di sfondo unica.

Sempre nell’argomento tabelle, prova a cliccare qui per aprire l’esempio in questione. Utilizza sia Netscape che Explorer. L’esempio è stato ottenuto con questa sintassi Html


<TABLE WIDTH=200>

<TD BGCOLOR=YELLOW ALIGN=RIGHT>Cella #1</TD>

<TD>Cella #2</TD>

</TABLE>


Noterai che Netscape estende il colore di sfondo e l’allinemento a destra anche alla seconda cella, dove invece non è stato definito nulla. Per correggere l’errore, è sufficiente inserire i tags <TR></TR> nel seguente modo:


<TABLE WIDTH=200>

<TR>

<TD BGCOLOR=YELLOW ALIGN=RIGHT>Cella #1</TD>

<TD>Cella #2</TD>

</TR>

</TABLE>


Due utili attributi da inserire nel tag <BODY> , che permettono di diminuire i margini presenti nelle pagine Web sono:


TOPMARGIN=valore

LEFTMARGIN=valore


Questo dice Microsoft, perché secondo Netscape lo stesso effetto va ottenuto con i tags:


MARGINHEIGHT=valore

MARGINWIDTH=valore


Non chiederci quale delle due società abbia torto o ragione perché non siamo in grado di darti una risposta.

Continuando nel nostro viaggio, una caratteristica che Netscape non ammette, è l’alternate text su oggetti che non siano immagini. Per esempio è possibile inserire l’attributo ALT="alternate text" nel tag <IMG> . Questo il codice:


<IMG SRC=nome-img ALT="Testo alternativo o alternate text">


In Navigator però, non si può utilizzare l’attributo TITLE del tag <A> , per esempio:


<A HREF=link TITLE="Testo alternativo o alternate text">Link</A>


Un altro effetto identico, sempre applicato a mero testo, è ottenibile con la sintassi:


<ACRONYM TITLE="Testo alternativo o alternate text">Testo</ACRONYM>


Navigator comunque, non si ferma qui: errori accorsi al momento del resize della finestra, nella disposizione dei layers, nel caricamento di alcuni scripts Dhtml, sono all’ordine del giorno.

Altre incompatibiltà a cui spesso si può incappare riguardano la sintassi Javascript (in questo campo i difetti dei due browsers sono pressocché paritari), Vb Script (Navigator ignora il linguaggio scripting di Microsoft) e più in generale il Dom (Document Object Model).

Un altro appunto meritano le tecnologie server side: Asp , Php , Cgi ecc. sono crossbrowser, perché i loro comandi vengono processati dal server ed il browser riceve solo il risultato finale.

In conclusione, è bene specificare che questo “pezzo” non ha voluto trattare appieno i problemi di compatibilità che colpiscono molti siti Web, né vuole sminuire le capacità di uno o l’altro browser. Semplicemente, abbiamo cercato di presentare alcune proprietà che vengono spesso utilizzate nei siti Internet, ma che spesso non sono interpretate da tutti i
browsers.


Prima di iniziare ad approfondire l’argomento, ci teniamo a ringraziare Matteo Spinelli, che ha realizzato parte di questo articolo prendendo spunto dal codice Javascript realizzato da Porter Glendinning.

Questa settimana, verrà affrontato il problema riguardante l’influenza del sistema operativo sul Web site.

Il principale problema che molti Web masters conoscono, è quello della diversa visualizzazione dei fonts da parte di Windows rispetto a Macintosh. Sul sistema operativo di casa Redmond, il testo standard viene visualizzato a 96 Ppi (pixel per inch, ovvero pixel per pollice) mentre su Mac Os, il testo viene stampato a 72 Ppi. Il testo quindi, verrà visualizzato in maniera leggermente più piccola rispetto a Windows.

Una soluzione attuabile, è quella di realizzare un Javascript ad hoc che individui il sistema operativo usato e utilizzi quindi un font maggiore per Mac. Vediamo quindi che codice inserire nel proprio sito Web per raggiungere una compatibilità tra Mac Os e Windows:


<HTML>

<HEAD>

<TITLE>RISORSE.NET - Usare Javascript per dimensionare i caratteri</TITLE>

<STYLE TYPE="text/css">

<!--

P {font: 10pt verdana, geneva, arial, sans-serif;}

-->

</STYLE>

<SCRIPT LANGUAGE=Javascript TYPE=text/javascript>

<!--

function PrintFont(myOS, sizeStr, faces, color) {

var macSize = winSize = 0;

var tagString = "";

var sizeNum = 0;

var mode = "";

</BODY>

</HTML>



I Web masters più esperti ed attenti, avranno sicuramente notato l’opzione dei browsers relativa alla dimensione dei fonts. Grazie a tale voce, il visitatore può aumentare o diminuire il carattere del sito Web. Dal punto di vista dell’utente, la possibilità appena citata può essere di grande aiuto nel caso un sito contenesse del testo troppo piccolo o troppo grande. “Dietro le quinte” però, il Web master può vedersi stravolto il layout della propria opera, con un mero click del mouse.

Per passare alla pratica, utilizzando Microsoft Explorer, la fatidica opzione si può trovare al menù Visualizza->Carattere, e si può scegliere tra Molto grande, Grande, Medio (di default), Piccolo e Molto piccolo. I medesimi risultati si possono raggiungere con Netscape alla voce Visualizza, scegliendo Aumenta font o Diminuisci font.

Esiste però una soluzione che se sfruttata, permette di risolvere il problema con Ms Ie. In pratica, utilizzando questo stratagemma, modificando la dimensione dei caratteri con il browser di Microsoft, non si otterrà alcun risultato. Purtroppo con Netscape, non siamo a conoscenza di alcun sistema simile, ti chiediamo comunque, nel caso ne fossi al corrente, di farcelo sapere inviandoci un’email .

Questo semplice stratagemma, consiste nello specificare la dimensione del carattere utilizzando i Css , piuttosto che il normale attributo SIZE del tag <FONT> . Per rendere più semplice la cosa, facciamo un esempio. Ipotizziamo di voler scrivere del testo a dimensione 3, la sintassi da utilizzare sarebbe:


<FONT SIZE=3>Testo con dimensione 3</FONT>


In questo modo però, modificando la dimensione del testo con il browser, non si riuscirebbe a risolvere il problema. Per capire appieno il funzionamento, clicca su questo collegamento ed apri la pagina di esempio. Una volta caricata, varia le dimensioni del testo (menù Visualizza->Carattere su Ms Ie).

Utilizzando invece i Css , il codice sarebbe:


<FONT STYLE=font-size:12pt>Testo con dimensione 12 punti</FONT>


Cliccando qui , vedrai il risultato del sorgente appena presentato. Con Ms Ie prova a modificare la dimensione del testo e vedrai che i caratteri non varieranno.

Questa soluzione può essere molto importante per siti organizzati in tabelle o che prevedono una struttura abbastanza fissa. Il variare del testo vedrebbe sballare tutto il lavoro di costruzione e presentazione del sito Internet.

Un altro problema che devono affrontare molti Web masters e Web designers, è quello della definizione del carattere. La scelta del font da utilizzare in un sito, non deve essere sottovalutata. Innanzitutto, è bene sapere che se un particolare carattere non fosse presente nel computer del visitatore, il browser utilizzerebbe quello di default, che è il Times new roman, quello, per intenderci, che vedi in tutte le pagine di Risorse.net. Per esempio, se nel nostro sito utilizzassimo un carattere sconosciuto, come l’Abduction, la maggior parte dell’utenza vedrebbe il Times new roman come font principale del sito.

Esistono però due soluzioni, che permettono di ovviare a tale problema. La prima, è quella di creare delle Gif, magari a sfondo trasparente, che contengano il testo realizzato con quel particolare font. Questo sistema però, può essere utile solo per la creazione di titoli e sottotitoli grafici, che non richiedano quindi troppi KB di spazio e molto tempo per il pieno caricamento. Un intero articolo come questo che stai leggendo, se fosse presentato come immagine, impiegherebbe troppo tempo per apparire agli occhi del lettore e come se non bastasse, non sarebbe possibile sfruttare quelle deliziose operazioni del Copia & Incolla.

Il secondo stratagemma che ti proponiamo, è quello di sfruttare una caratteristica dei Css di poter scaricare sul client un tipo di carattere, in maniera del tutto innocua e veloce. La sintassi da utilizzare è:


<STYLE>

@font-face { font-family:NomeFont; src:url(http://www.tuosito.it/nomefont.eot); }

</STYLE>


Come è possibile vedere dal codice appena riportato, è necessario convertire il font utilizzato, dal classico formato Ttf (True type font) per Windows a Eot.

E con questo, abbiamo terminato le pagine dedicate alla risoluzione dei problemi dovuti alla compatibilità di un sito Web. Con cotanti articoli, non abbiamo certo voluto risolvere appieno il problema, né pensiamo di farlo sfruttando i mezzi che questo sito ci mette a disposizione. Sia perché l’argomento è troppo vasto ed in evoluzione per essere trattato molto approfonditamente, sia perché pensiamo sia meglio far dibattere i Web masters stessi sull’argomento. Quello della compatibilità quindi, è un ottimo argomento di discussione e scambio di idee ed informazioni: ogni Web master, in questo senso, ha un suo modo di vedere ed interpretare il problema.

Roberto
e Alessandro Abbate  

Responsabili di Risorse.net ,
la comunità virtuale di Web masters e Web designers.