Maggio 2000 Implementazione 1
Implementazione
Maggio 2000 Implementazione 2
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 3
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 4
Statistiche
MsIE 2/3
Netscape 1/3
Maggio 2000 Implementazione 5
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 6
Browser resources
• Informazioni sui browsers:• BrowserWatch,
http://browserwatch.internet.com
• Which Browser, http://www.whichbrowser.com
• BrowserCaps, http://www.browsercaps.com
Maggio 2000 Implementazione 7
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 8
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 9
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 10
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 11
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 12
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 13
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
Maggio 2000 Implementazione 14
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 15
Maggio 2000 Implementazione 16
Maggio 2000 Implementazione 17
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
Maggio 2000 Implementazione 18
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
Maggio 2000 Implementazione 19
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
Maggio 2000 Implementazione 20
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
Maggio 2000 Implementazione 21
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
Maggio 2000 Implementazione 22
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 23
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 24
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 25
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 26
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
Maggio 2000 Implementazione 27
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 28
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
Top Related