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

La compatibilitÓ Ŕ uno degli aspetti fondamentali nella creazione di una risorsa sul Web. Ponendo l'accento sulla gestione marketing di un sito, Ŕ indispensabile analizzare le tecniche per aumentare il numero di visitatori

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 (800x600 e 1024x768) 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 640x480 o 800x600.
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.
14 Commenti alla Notizia Corso di e-marketing/ CompatibilitÓ, la croce del Web
Ordina
  • A parte il titolo, del tutto fuorviante (cosa c'entra l'e-marketing?)
    "i Css [..] non vengono supportati pienamente da nessun browser a parte MsIe": è sbagliato. Nessun browser supporta pienamente i CSS, se proprio dobbiamo sceglierne il più completo, questo è senz'altro Opera. Escludo per adesso Mozilla che non è arrivato ancora ad una versione stabile (è l'unico cmq che supporta pienamente tutti gli standard).
    Secondo: la risoluzione. Il 9/10% circa usa ancora   schermi a 640x480.
    L'articolo comunque mi sembra affronti le cose non nella loro globalità, ma nei piccoli aspetti. Ad esempio, era necessaria una pagina per il codice Javascript?
    Poi la chicca sulla dimensione dei font: lo sanno tutti che per mettere una dimensione fissa alla grandezza dei caratteri si usa come misura il pixel (px).
    Insomma mi piacerebbe leggere articoli di veri professionisti, visto che questa rivista web è veramente di alto livello.

    non+autenticato
  • Salve,
    complimenti per l'articolo, molto ben fatto.
    Volevo solo fare un appunto sull'interlinea e le tabelle che si adattano alla risoluzione. Esiste un rapporto che deve rimanre costante fra l'interlinea e la lunghezza della linea stessa per far sì che il lettore non perda il segno quando va "a capo" con l'occhio. Con gli interlinea standard di IE e NS le righe per essere facilmente leggibili non dovrebbero superare le 10 parole, regoletta che se si impostano delle tabelle non fisse non viene rispettata! In soccorso arriva però il
    line-height in CSS che dalle mie prove viene rispettato da NS 4.78 contrariamente a quanto affermate voi (forse non viene rispettato nella 4.5?). Sarebbe bello avere un JS che adatti questo parametro alla dimensione della finestra del browser, basandosi sulle regolette tipografiche dell'interlinea.
    non+autenticato
  • Ciao,
    Scusa mi spieghi meglio cosa intendi? Non capisco che vuol dire che una riga più è lunga, più deve essere larga l'interlinea... Non mi è logico.
    Beh poi, dieci parole per rigo, o scrivi tutto enorme, o fai delle righe brevissime, ergo si ha uno scrolling della pagina sull'asse y che non finisce mai.
    Cmq uno script del genere non dovrebbe essere difficile da creare.
    Ciao

    - Scritto da: Michele Dal Corso
    <cut>

    Con gli interlinea
    > standard di IE e NS le righe per essere
    > facilmente leggibili non dovrebbero superare
    > le 10 parole, regoletta che se si impostano
    > delle tabelle non fisse non viene
    > rispettata! In soccorso arriva però il
    > line-height in CSS che dalle mie prove viene
    > rispettato da NS 4.78 contrariamente a
    > quanto affermate voi (forse non viene
    > rispettato nella 4.5?). Sarebbe bello avere
    > un JS che adatti questo parametro alla
    > dimensione della finestra del browser,
    > basandosi sulle regolette tipografiche
    > dell'interlinea.
    non+autenticato
  • - Scritto da: TNT
    > Ciao,
    > Scusa mi spieghi meglio cosa intendi? Non
    > capisco che vuol dire che una riga più è
    > lunga, più deve essere larga l'interlinea...
    > Non mi è logico.

    Beh più preciso di così non riesco ad essere: ci vorrebbe un testo di tipografia, oppure qualche grafico pubblicitario che se ne intenda. Comunque è intuitivo: se le righe diventano lunghe deve essere "facile" per l'occhio individuare la riga successiva quando si sposta da destra a sinistra, altrimenti si perde il segno. Questo succede ad esempio con alcuni libri di scuola di una volta, stampati magari in economia con caratteri molto piccoli (che aumentano quindi il numero di parole per riga) e interlinea molto piccoli, la cui lettura risulta molto sgradevole (il ripasso alla mattina diventa quasi impossibile Occhiolino.
    Per rendere facile il rintracciamento della linea successiva basta quindi rendere più "contabile" (passami il termine...) il numero di riga a colpo d'occhio, aumentando l'interlinea (sono più facili da contare linee distanti fra loro che non linee molto ravvicinate). Spero di essere riuscito ad esprimerti il concetto, comunque queste cose sono state studiate ed esistono dei rapporti ottimali che migliorano la lettura.

    > Beh poi, dieci parole per rigo, o scrivi
    > tutto enorme, o fai delle righe brevissime,
    > ergo si ha uno scrolling della pagina
    > sull'asse y che non finisce mai.

    Non è vero! PI a 800x600 rispetta questa regola: tralascia per un attimo gli articoli e le congiunzioni di una o due lettere... Il trucco sta nel dividere il testo in colonne come fanno i giornali.

    > Cmq uno script del genere non dovrebbe
    > essere difficile da creare.

    Già, basterebbe estrarre la dimensione della finestra del browser per poi fare i calcoli... Serve però la regola in questione: so che negli istituti professionali di grafica pubblicitaria le studiano quindi si potrebbe ottenere qualche informazione in merito.
    non+autenticato
  • Ciao,

    >il line-height in CSS che dalle mie prove viene >rispettato da NS 4.78 contrariamente a quanto >affermate voi (forse non viene rispettato nella >4.5?).

    Ho testato gli attributi citati nell'articolo con Netscape 4.51, cercando di accontantare un po' tutta l'utenza Ns... mi annoto però questa differenza tra le due versioni del browser, in attesa di fare un'ulteriore comparazione tra Netscape 4.x e 6.

    Roberto e Alessandro Abbate
    Moderatori di it.comp.www.html
    non+autenticato
  • Salve,
    per prima cosa complimenti per l'articolo, è stato realizzato molto bene, anche se ho notato un po' di banalità nel parlare delle tabelle (risoluzione schermo) e una piccola lacuna che riguarda il formato EOT, nessun link di riferimento né una breve parentesi.
    Sinceramente non conoscendo l'EOT mi avrebbe fatto piacere trovare delle info per saperne di più.
    La parte riguardante i CSS è stata realizzata molto bene, soprattutto nel parlare delle proprietà che Netscape non supporta.
    A tutti i colleghi, posso dire che a mio parere usare i CSS per "fissare" la dimensione del font è limitante per l'utente finale che ha problemi magari di vista, ma ti aiuta davvero a non farti stravolgere il layout del tuo faticato lavoro.
    Per quanto riguarda le differenze tra Mac e Win era solo quello? I font a 72ppi anziché 96?
    E Linux per esempio?
    Beh comunque per il download automatico dei font in formato EOT vorrei sapere quanti browser lo supportano. Non so se sarà una così bella cosa trovarsi a scaricare a propria insaputa fonts a destra e a manca. A proposito, EOT è un formato cross-platform? O si ritorna di nuovo al problema del S.O. ?
    Mi sto dilungando troppo, aggiungo una cosa che ho notato io e vi saluto.
    Se definite le dimensioni in percentuale di un DIV o di un LAYER, a seconda del browser, su MSIE sarà la percentuale rispetto alle dimensioni della finestra, mentre su Netscape non viene preso in considerazione, e la larghezza relativa sarà rispetto agli elementi contenuti nel layer.
    Ad esempio: finestra larga 780px, div o layer con sfondo blu, contenente un IMG larga 300px e alta 500px.
    MSIE: lo sfondo sarà esteso per la percentuale specificata nel CSS in relazione alla larghezza di 780px.
    Netscape: lo sfondo sarà un po' più largo di 300 e un po' più alto di 500 (larghezza totale degli elementi contenuti nel layer stesso). Stop.


    Questa "piccola" differenza, unita al fatto che Netscape non supporta al 100% i CSS (soprattutto A:hover) mi rende quasi impossibile creare un menu senza IMG e che sia cross-browser.

    Santo chi ce la fa.

    Saluti a tutti
    TNT
    non+autenticato

  • http://msdn.microsoft.com/workshop/author/fontembe...

    questo e' un documento microsoft relativo al font embedding!

    vedi se ti puo' servire!

    ps: prova a mettere eot + fonts in www.google.comOcchiolino

    lord auberon

    non+autenticato
  • Ciao,
    per i files .eot, ti posto un link che io trovo molto interessante http://www.mauriziopistone.it/discussioni/linguasu..., troverai molte risposte alle domande che hai posto.

    Per quanto riguarda la realizzazione di un sito Cross Os, il problema della differente visualizzazione del carattere, non è l'unico che ho scoperto ma è sicuramente il più fastidioso. Te ne cito altri che ho potuto riscontrare lavorando per un breve periodo su un Mac: ammettiamo di avere un'immagine larga 500px e alta 300px, e di volerla visualizzare in un sito Web con dimensioni 250x150... se modificassimo gli attributi WIDTH e HEIGHT del tag <IMG>, ci accorgeremmo che con Windows il resize non è dei migliori (prova pure)... con Mac invece questa operazione viene gestita molto bene dal sistema operativo. Come risolvere? Aprire l'immagine con un qualsiasi programma di grafica e modificarne le dimensioni.
    Altra differenza che ho trovato tra i due Os... avevamo un'immagine da caricare abbastanza "pesante": intendo parecchi KB da tirar giù... con Photoshop avevamo impostato il caricamento graduale dell'immagine (non mi chiedere il comando perché non me lo ricordo, non sono proprio un grafico, anzi), cmq il risultato era come se si facesse lo streaming della stessa foto: appena si entrava nel sito l'immagine appariva immediatamente ma di scarsa qualità e poi,poco alla volta,veniva ridefinita. Risultato: Mac gestiva l'operazione perfettamente, Windows manco a pregarlo in cirillico. Come risolvere il problema? Trovai un attributo LOWSRC, da applicare al tag <IMG>... dovrebbe funzionare anche su Windows... dovrebbe perché poi molti comandi, come sai bene, vengono interpretati molto diversamente.
    In conclusione, per il problema di A:hover su Netscape, io ho trovato uno script Dhtml che risolve il problema rendendo la proprietà crossbrowser... se ti interessa il link scrivimi in privato, l'indirizzo lo trovi nell'articolo (non vorrei esagerare col marketing verso il sito di cui sono responsabile insieme a mio fratello Occhiolino.

    A presto!

    Roberto e Alessandro Abbate
    Moderatori di it.comp.www.html



    - Scritto da: TNT
    > Salve,
    > per prima cosa complimenti per l'articolo, è
    > stato realizzato molto bene, anche se ho
    > notato un po' di banalità nel parlare delle
    > tabelle (risoluzione schermo) e una piccola
    > lacuna che riguarda il formato EOT, nessun
    > link di riferimento né una breve parentesi.
    > Sinceramente non conoscendo l'EOT mi avrebbe
    > fatto piacere trovare delle info per saperne
    > di più.
    > La parte riguardante i CSS è stata
    > realizzata molto bene, soprattutto nel
    > parlare delle proprietà che Netscape non
    > supporta.
    > A tutti i colleghi, posso dire che a mio
    > parere usare i CSS per "fissare" la
    > dimensione del font è limitante per l'utente
    > finale che ha problemi magari di vista, ma
    > ti aiuta davvero a non farti stravolgere il
    > layout del tuo faticato lavoro.
    > Per quanto riguarda le differenze tra Mac e
    > Win era solo quello? I font a 72ppi anziché
    > 96?
    > E Linux per esempio?
    > Beh comunque per il download automatico dei
    > font in formato EOT vorrei sapere quanti
    > browser lo supportano. Non so se sarà una
    > così bella cosa trovarsi a scaricare a
    > propria insaputa fonts a destra e a manca. A
    > proposito, EOT è un formato cross-platform?
    > O si ritorna di nuovo al problema del S.O. ?
    > Mi sto dilungando troppo, aggiungo una cosa
    > che ho notato io e vi saluto.
    > Se definite le dimensioni in percentuale di
    > un DIV o di un LAYER, a seconda del browser,
    > su MSIE sarà la percentuale rispetto alle
    > dimensioni della finestra, mentre su
    > Netscape non viene preso in considerazione,
    > e la larghezza relativa sarà rispetto agli
    > elementi contenuti nel layer.
    > Ad esempio: finestra larga 780px, div o
    > layer con sfondo blu, contenente un IMG
    > larga 300px e alta 500px.
    > MSIE: lo sfondo sarà esteso per la
    > percentuale specificata nel CSS in relazione
    > alla larghezza di 780px.
    > Netscape: lo sfondo sarà un po' più largo di
    > 300 e un po' più alto di 500 (larghezza
    > totale degli elementi contenuti nel layer
    > stesso). Stop.
    >
    >
    > Questa "piccola" differenza, unita al fatto
    > che Netscape non supporta al 100% i CSS
    > (soprattutto A:hover) mi rende quasi
    > impossibile creare un menu senza IMG e che
    > sia cross-browser.
    >
    > Santo chi ce la fa.
    >
    > Saluti a tutti
    > TNT
    non+autenticato
  • Grazie per la risposta molto costruttiva, e grazie per la disponibilità a spedirmi l'esempio DHTML, lascio l'email.
    Grazie e a risentirci

    - Scritto da: Roberto Abbate
    > Ciao,
    > per i files .eot, ti posto un link che io
    > trovo molto interessante
    > http://www.mauriziopistone.it/discussioni/lin
    >
    > Per quanto riguarda la realizzazione di un
    > sito Cross Os, il problema della differente
    > visualizzazione del carattere, non è l'unico
    > che ho scoperto ma è sicuramente il più
    > fastidioso. Te ne cito altri che ho potuto
    > riscontrare lavorando per un breve periodo
    > su un Mac: ammettiamo di avere un'immagine
    > larga 500px e alta 300px, e di volerla
    > visualizzare in un sito Web con dimensioni
    > 250x150... se modificassimo gli attributi
    > WIDTH e HEIGHT del tag <IMG>, ci
    > accorgeremmo che con Windows il resize non è
    > dei migliori (prova pure)... con Mac invece
    > questa operazione viene gestita molto bene
    > dal sistema operativo. Come risolvere?
    > Aprire l'immagine con un qualsiasi programma
    > di grafica e modificarne le dimensioni.
    > Altra differenza che ho trovato tra i due
    > Os... avevamo un'immagine da caricare
    > abbastanza "pesante": intendo parecchi KB da
    > tirar giù... con Photoshop avevamo impostato
    > il caricamento graduale dell'immagine (non
    > mi chiedere il comando perché non me lo
    > ricordo, non sono proprio un grafico, anzi),
    > cmq il risultato era come se si facesse lo
    > streaming della stessa foto: appena si
    > entrava nel sito l'immagine appariva
    > immediatamente ma di scarsa qualità e
    > poi,poco alla volta,veniva ridefinita.
    > Risultato: Mac gestiva l'operazione
    > perfettamente, Windows manco a pregarlo in
    > cirillico. Come risolvere il problema?
    > Trovai un attributo LOWSRC, da applicare al
    > tag <IMG>... dovrebbe funzionare anche su
    > Windows... dovrebbe perché poi molti
    > comandi, come sai bene, vengono interpretati
    > molto diversamente.
    > In conclusione, per il problema di A:hover
    > su Netscape, io ho trovato uno script Dhtml
    > che risolve il problema rendendo la
    > proprietà crossbrowser... se ti interessa il
    > link scrivimi in privato, l'indirizzo lo
    > trovi nell'articolo (non vorrei esagerare
    > col marketing verso il sito di cui sono
    > responsabile insieme a mio fratello Occhiolino.
    >
    > A presto!
    >
    > Roberto e Alessandro Abbate
    > Moderatori di it.comp.www.html
    >
    >
    >
    > - Scritto da: TNT
    > > Salve,
    > > per prima cosa complimenti per
    > l'articolo, è
    > > stato realizzato molto bene, anche se ho
    > > notato un po' di banalità nel parlare
    > delle
    > > tabelle (risoluzione schermo) e una
    > piccola
    > > lacuna che riguarda il formato EOT, nessun
    > > link di riferimento né una breve
    > parentesi.
    > > Sinceramente non conoscendo l'EOT mi
    > avrebbe
    > > fatto piacere trovare delle info per
    > saperne
    > > di più.
    > > La parte riguardante i CSS è stata
    > > realizzata molto bene, soprattutto nel
    > > parlare delle proprietà che Netscape non
    > > supporta.
    > > A tutti i colleghi, posso dire che a mio
    > > parere usare i CSS per "fissare" la
    > > dimensione del font è limitante per
    > l'utente
    > > finale che ha problemi magari di vista, ma
    > > ti aiuta davvero a non farti stravolgere
    > il
    > > layout del tuo faticato lavoro.
    > > Per quanto riguarda le differenze tra Mac
    > e
    > > Win era solo quello? I font a 72ppi
    > anziché
    > > 96?
    > > E Linux per esempio?
    > > Beh comunque per il download automatico
    > dei
    > > font in formato EOT vorrei sapere quanti
    > > browser lo supportano. Non so se sarà una
    > > così bella cosa trovarsi a scaricare a
    > > propria insaputa fonts a destra e a
    > manca. A
    > > proposito, EOT è un formato
    > cross-platform?
    > > O si ritorna di nuovo al problema del
    > S.O. ?
    > > Mi sto dilungando troppo, aggiungo una
    > cosa
    > > che ho notato io e vi saluto.
    > > Se definite le dimensioni in percentuale
    > di
    > > un DIV o di un LAYER, a seconda del
    > browser,
    > > su MSIE sarà la percentuale rispetto alle
    > > dimensioni della finestra, mentre su
    > > Netscape non viene preso in
    > considerazione,
    > > e la larghezza relativa sarà rispetto
    > agli
    > > elementi contenuti nel layer.
    > > Ad esempio: finestra larga 780px, div o
    > > layer con sfondo blu, contenente un IMG
    > > larga 300px e alta 500px.
    > > MSIE: lo sfondo sarà esteso per la
    > > percentuale specificata nel CSS in
    > relazione
    > > alla larghezza di 780px.
    > > Netscape: lo sfondo sarà un po' più largo
    > di
    > > 300 e un po' più alto di 500 (larghezza
    > > totale degli elementi contenuti nel layer
    > > stesso). Stop.
    > >
    > >
    > > Questa "piccola" differenza, unita al
    > fatto
    > > che Netscape non supporta al 100% i CSS
    > > (soprattutto A:hover) mi rende quasi
    > > impossibile creare un menu senza IMG e che
    > > sia cross-browser.
    > >
    > > Santo chi ce la fa.
    > >
    > > Saluti a tutti
    > > TNT
    non+autenticato
  • Qualcuno sa come risolvere le differenze nella visualizzazione del layer-background-color che ho citato nel post originale?
    E poi, il fatto dello "streaming" si ha salvando le Jpeg in formato "progressivo" o le Gif in formato "interlacciato". I nomi sono diversi il risultato è identico. E funziona.
    Per il resize delle immagini tramite attributi html, buono a sapersi che il risultato su mac è ok, ma conosco persone che usano solo questo metodo per ridimensionare le immagini col risultato di avere pagine che impiegano ere geologiche a caricarsi. Quindi non diffondete la notiziaOcchiolino
    Bye
    non+autenticato


  • - Scritto da: TNT
    > Qualcuno sa come risolvere le differenze
    > nella visualizzazione del
    > layer-background-color che ho citato nel
    > post originale?

    Hai provato ad inserire una TABLE nel DIV? Il layer dovrebbe rispettare gli attributi della TABLE in NS, quindi anche una larghezza in percentuale. All'interno della tabella poi ci puoi inserire quello che vuoi nel modo convenzionale. L'unico modo per vedere se funziona è provare!
    non+autenticato

  • ciao. per me, i problemi maggiori sono proprio quelli legati alla risoluzione del monitor e la visualizzazione dei caratteri; io, (sono assolutamente agli inizi), preferisco impostare delle tabelle di grandezza assoluta (800*600) sulla home page, che magari e' quella piu' incasinata e dove e' preferibile mantenere il controllo dell'aspetto finale della pagina, per le pagine interne, tabelle relative.

    poi, la possibilita' di variare direttamente dal browser la grandezza del carattere e' molto comoda nel visualizzare una pagina web e impostare un carattere a grandezza fissa col css mi sembra limitante, pero' il controllo dei caratteri dal browser agisce su tutta la pagina e i css rimangono l'unica soluzione possibile...
    per me e' un bel casino!!!Sorride

    sempre in riguardo ai fonts/css; cos'e' il formato EOT al quale si fa riferimento nell'articolo, dove posso trovare informazioni?

    non+autenticato
  • Ciao,

    mentre per i primi due problemi che hai citato, l'ultima scelta tocca a te (tieni molto in considerazione le risoluzioni adottate dai tuoi visitatori), per la tua richiesta finale posso segnalarti un Url che ho postato anche a Tnt: http://www.mauriziopistone.it/discussioni/linguasu...

    A presto!

    Roberto e Alessandro Abbate
    Moderatori di it.comp.www.html

    >sempre in riguardo ai fonts/css; cos'e' il >formato EOT al quale si fa riferimento >nell'articolo, dove posso trovare informazioni?

    non+autenticato
  • Grazie per i tuoi suggerimenti!
    penso che diventero' un frequentatore assiduo di it.comp.www.html... Sorride
    ciao

    > posso segnalarti un Url che
    > ho postato anche a Tnt:
    > http://www.mauriziopistone.it/discussioni/lin
    >
    > A presto!
    >
    > Roberto e Alessandro Abbate
    > Moderatori di it.comp.www.html
    non+autenticato