Maggio 2000Implementazione1. Maggio 2000Implementazione2 Progettare per diversi browser Il controllo...

Maggio 2000 Implementazione 1

Implementazione


Progettare per diversi browser

• Il controllo finale di ciò che vede l’utente non è completamente sotto controllo.

• Web design per diversi browser e piattaforme.

• Come essere allo stesso tempo tecnicamente up-to-date e non scoraggiare chi ha vecchi browser o connessioni lente o piattaforme poco potenti ?


Browser comuni

• Netscape Navigator e Microsoft Explorer dominano il mercato.• Tag HTML proprietari • Incompatibilità con nuove tecnologie come

DHTML, CSS o Javascript• http:// developer.netscape.com o http://

developer.netscape.com/docs/manuals• http://www.microsoft.com/sitebuilder/ o

http://www.microsoft.com/workshop

http://developer.netscape.com/

http://developer.netscape.com/


Statistiche

MsIE 2/3

Netscape 1/3


Altri browsers• Lynx

• Free, solo testo. Ha una sua comunità di appassionati utenti.

• http://www.crl.com/~subir/lynx.html

• America Online

• Diverse versioni per gli iscritti, alcune mancano di numerosi requisiti.

• WebTV

• Navigazione web sul televisore con un set-top box. Non visualizza frames, Javascript, incapace di gestire plug-ins (con eccezione di Shockwave Flash e RealAudio).

• Opera (Opera Software di Oslo)

• Piccolo (solo 1.2 Mb su disco) e solo Windows, aderisce perfettamente agli standards HTML


Browser resources

• Informazioni sui browsers:• BrowserWatch,

http://browserwatch.internet.com

• Which Browser, http://www.whichbrowser.com

• BrowserCaps, http://www.browsercaps.com


Strategie

• Il modo corretto di disegnare un sito dipende dall’uso e dal tipo di pubblico.

• Approccio minimalista:• Web devono essere accessibili a tutti, quindi solo

HTML 3.2 o 2.0 e verificare che funzionino con browser solo testo.

• Approccio massimalista:• Solo ultima versione di browser, solo ultimo versione

di HTML. - Upgrade!• Siti progettati esclusivamente per un particolare

browser (possibile per esempio per applicazioni intranet).


Una strategia per molte stagioni

• Usate tecniche ultimo grido (DHTML, CSS...) ma fornite alternativamente pagine funzionali anche con vecchi browser.

• Usate tecnologie supportate dai browser versione precedente (Javascript, tavole, frames) ma aspettate con le ultime.

• Usate sempre l’attributo ALT per visualizzare il contentuo di una immagine.

• Pagine che siano funzionali sempre e che eventualmente includano nuove tecniche fruibili solo da chi ha browser aggiornati.


Conosci i tuoi browser• Creare site multi versione per browser vecchi e

nuovi (costoso!) mirati a utenti diversi• Solo testo per browser non visuali

• Flash, animazioni ... Per chi è interessato.

• Gli utenti possono decidere la versione.

• Un check automatico fornisce la versione giusta• Javascript fa la richiesta al browser

• Webmonkey di Hotwired, http://www.webmonkey.com, vi dice come.


Parser check di HTML

• Scrivere buon HTML• I browser sono rigorosi in modo diverso nel parsing di

HTML

• Servizi a pagamento• WebSiteGarage verifica le vostre pagine con diversi

browser, http://www.websitegarage.com

• Il parser del WWW Consortium• http://validator.w3.org

• Alcuni editor di HTML o il browser Opera possono essere usato allo scopo.


Ricordarsi gli scopi

• Gli utenti tendono a dividirsi in 2 categorie:• Quelli che cercano una informazione precisa,

che non vogliono essere distratti.

• Quelli che navigano in internet, che possono anche concedersi di vedere le ultime novità tecnologiche.

• Eccezioni sono i siti per tecnici.


Progettare per diversi monitor

• Dimensione• Limita la finestra del browser, che tra l’altro può essere

dimensionata a piacere dall’utente

• I più comuni a 13”, 14”, 17”, 19”, 20” e 21

• Risoluzione, il numero totale di pixel disponibili.• Più alta maggior precisione e pixel più piccoli, quindi

dimensioni complessive delle immagini minori

• Legata, ma non necessariamente determinata, alla dimensione dello schermo, dipende dalla scheda video.


Risoluzioni comuniMacintosh PC

512 x 384 640 x 480

640 x 480 800 x 600 portatili

800 x 600 powerbook 1024 x 870

832 x 624 1280 x 1024

1024 x 768 1600 x 1200

1152 x 870

1280 x 960

1280 x 1024


Spazio vivo per la finestra del browser

• Il sistema operativo può impedire che si usi tutto lo spazio del monitor per la finestra del browser

• Il browser stesso può avere barre, bottoni, barre di localizzazione e scrollbar che occupano spazio


Spazio vivo Netscape su W95

Risoluzione monitor

Minimo

spazio vivo

Massimo

spazio vivo

640 x 480 623 x 278 635 x 380

800 x 600 783 x 430 795 x 500

1024 x 768 1007 x 598 1019 x 668

1152 x 870 1135 x 700 1147 x 770

1280 x 1024 1263 x 854 1275 x 924

Netscape 4.0 per Windows 95


Spazio vivo Explorer su W95

Risoluzione monitor

Minimo

spazio vivo

Massimo

spazio vivo

640 x 480 623 x 278 635 x 380

800 x 600 783 x 398 795 x 500

1024 x 768 1007 x 566 1019 x 668

1152 x 870 1135 x 668 1147 x 770

1280 x 1024 1263 x 822 1275 x 924

Internet Explorer 4.0 per Windows 95


Spazio vivo Netscape su Mac

Risoluzione monitor

Minimo

spazio vivo

Massimo

spazio vivo

640 x 480 602 x 313 617 x 402

800 x 600 794 x 457 809 x 546

1024 x 768 986 x 601 1001 x 601

1152 x 870 1114 x 703 1129 x 792

1280 x 1024 1242 x 857 1257 x 946

Netscape 4.0 per Macintosh


Spazio vivo Explorer su Mac

Risoluzione monitor

Minimo

spazio vivo

Massimo

spazio vivo

640 x 480 612 x 315 627 x 431

800 x 600 804 x 459 819 x 575

1024 x 768 996 x 603 1011 x 719

1152 x 870 1124 x 705 1139 x 821

1280 x 1024 1252 x 859 1267 x 975

Internet Explorer 4.0 per Windows 95


Per un monitor 1024 x 768

Sistema operativo

browser

Minimo

spazio vivo

Massimo

spazio vivo

Netscape su W95 1007 x 598 1019 x 668

Netscape su Mac 986 x 601 1001 x 601

Explorer su W95 1007 x 566 1019 x 668

Explorer su Mac 996 x 603 1011 x 719


I colori dei monitor• I monitor differiscono nel numero dei colori che

possono rappresentare:• Profondità colore a 24-bit

• Circa 17 milioni di colori rappresentabili• Sistema RGB, 8-bit per colore, per ogni componente

256 colori, 256*256*256=16.777.216 colori

• Profondità colore a 16-bit • Circa 65.000 colori rappresentabili

• Profondità colore a 8-bit • 256 colori rappresentabili


Formati dei file grafici

• GIF• Il primo formato supportato dal web

• Colori delle immagini indicizzati con una palette al più di 8-bit, cioè 256 colori

• Indicato per grafica con colori pieni

• JPEG• Colori a 24-bit, cioè milioni di colori

• Compressione lossy

• Indicato per immagini fotografiche


Risoluzione e dimensione immagini

• Per lo schermo basta una bassa risoluzione 72ppi (pizel per inch)• Mentre la stampa richiede una qualità di 300ppi

• La dimensione delle immagini dipende dalla risoluzione del monitor• Una immagine di 72x72 pixel può occupare un

area di 1 inch x 1 inche su uno schermo a 72 ppi e meno su uno schermo a 100 ppi


Suggerimenti per immagini

• Lavorare in RGB e cambiare palette prima di fare modifiche

• Prima di cambiare le dimensioni cambiare la palette a RGB

• Non aumentare le dimensioni se possibile

• Decrementare le dimensioni a piccoli passi

• Usare testo anti-aliased


Fonts• Spazio proporzionali per caratteri (es. i / W)

• Times, Arial, Helvetica ...• I browser usano font proporzionali per i testi

• default di Netscape: Times 10/12 punti• default di Explorer: Helvetica

• Spazio costante per i caratteri• Courier, Monaco• Browser li usano per il testo tra i tag

• <pre> testo pre-formattato• <tt> testo dattiloscritto• <code> codice• <kbd> input da tastiera• <samp> testo di saggio• <xmp> testo di esempio


Testo in grafica

• Per avere il controllo sull’apparire del testo• Intestazioni, incipit ...

• Più pesante

• Informazione persa se non si caricano immagini o in browser non grafici• Uso del tag <alt> è raccomandato ma è limitato

• Informazioni non possono essere manipolate (cercate o indicizzate)


Il controllo del testo

• Difficile perché dipende dalla piattaforma dell’utente

• La dimensione dei font è anche diversa nelle diverse piattaforme• Windows riproduce Times 12 a video quasi come fosse

a 16 punti

• Core fonts per web dalla Microsoft• I font più facilmente visibili a video

• http://www.microsoft.com/typography/free.htm

• Embedded fonts nelle pagine, in un file che viaggia con il file html

Maggio 2000Implementazione1. Maggio 2000Implementazione2 Progettare per diversi browser Il controllo...

Documents

Transcript of Maggio 2000Implementazione1. Maggio 2000Implementazione2 Progettare per diversi browser Il controllo...