Implementazione
Maggio 2000
Implementazione
1
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 ?
Maggio 2000
Implementazione
2
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
Maggio 2000
Implementazione
3
Statistiche
MsIE 2/3
Netscape 1/3
Maggio 2000
Implementazione
4
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
Maggio 2000
Implementazione
5
Browser resources
• Informazioni sui browsers:
• BrowserWatch,
http://browserwatch.internet.com
• Which Browser, http://www.whichbrowser.com
• BrowserCaps, http://www.browsercaps.com
Maggio 2000
Implementazione
6
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).
Maggio 2000
Implementazione
7
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.
Maggio 2000
Implementazione
8
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.
Maggio 2000
Implementazione
9
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.
Maggio 2000
Implementazione
10
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.
Maggio 2000
Implementazione
11
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.
Maggio 2000
Implementazione
12
Risoluzioni comuni
Macintosh
512 x 384
640 x 480
800 x 600 powerbook
832 x 624
1024 x 768
1152 x 870
1280 x 960
1280 x 1024
Maggio 2000
PC
640 x 480
800 x 600 portatili
1024 x 870
1280 x 1024
1600 x 1200
Implementazione
13
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
Maggio 2000
Implementazione
14
Maggio 2000
Implementazione
15
Maggio 2000
Implementazione
16
Spazio vivo Netscape su W95
Netscape 4.0 per Windows 95
Risoluzione
monitor
640 x 480
Minimo
spazio vivo
623 x 278
Massimo
spazio vivo
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
Maggio 2000
Implementazione
17
Spazio vivo Explorer su W95
Internet Explorer 4.0 per Windows 95
Risoluzione
monitor
640 x 480
Minimo
spazio vivo
623 x 278
Massimo
spazio vivo
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
Maggio 2000
Implementazione
18
Spazio vivo Netscape su Mac
Netscape 4.0 per Macintosh
Risoluzione
monitor
640 x 480
Minimo
spazio vivo
602 x 313
Massimo
spazio vivo
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
Maggio 2000
Implementazione
19
Spazio vivo Explorer su Mac
Internet Explorer 4.0 per Windows 95
Risoluzione
monitor
640 x 480
Minimo
spazio vivo
612 x 315
Massimo
spazio vivo
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
Maggio 2000
Implementazione
20
Per un monitor 1024 x 768
Sistema operativo
Minimo
browser
spazio vivo
Netscape su W95
1007 x 598
Massimo
spazio vivo
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
Maggio 2000
Implementazione
21
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
Maggio 2000
Implementazione
22
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
Maggio 2000
Implementazione
23
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
Maggio 2000
Implementazione
24
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
Maggio 2000
Implementazione
25
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
•
•
•
•
•
•
Maggio 2000
<pre> testo pre-formattato
<tt> testo dattiloscritto
<code> codice
<kbd> input da tastiera
<samp> testo di saggio
<xmp> testo di esempio
Implementazione
26
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)
Maggio 2000
Implementazione
27
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 2000
Implementazione
28