Maggio 2000Implementazione1. Maggio 2000Implementazione2 Progettare per diversi browser Il controllo finale di ciò che vede lutente non è completamente.

Presentazione sul tema: "Maggio 2000Implementazione1. Maggio 2000Implementazione2 Progettare per diversi browser Il controllo finale di ciò che vede lutente non è completamente."— Transcript della presentazione:

1 Maggio 2000Implementazione1

2 Maggio 2000Implementazione2 Progettare per diversi browser Il controllo finale di ciò che vede lutente 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 ?

3 Maggio 2000Implementazione3 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:// developer.netscape.com developer.netscape.com http://www.microsoft.com/sitebuilder/ o http://www.microsoft.com/workshop http://www.microsoft.com/sitebuilder/ http://www.microsoft.com/workshop

4 Maggio 2000Implementazione4 Statistiche MsIE 2/3 Netscape 1/3

5 Maggio 2000Implementazione5 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

6 Maggio 2000Implementazione6 Browser resources Informazioni sui browsers: BrowserWatch, http://browserwatch.internet.com http://browserwatch.internet.com Which Browser, http://www.whichbrowser.comhttp://www.whichbrowser.com BrowserCaps, http://www.browsercaps.comhttp://www.browsercaps.com

7 Maggio 2000Implementazione7 Strategie Il modo corretto di disegnare un sito dipende dalluso 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).

8 Maggio 2000Implementazione8 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 lattributo 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.

9 Maggio 2000Implementazione9 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. http://www.webmonkey.com

10 Maggio 2000Implementazione10 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.comhttp://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.

11 Maggio 2000Implementazione11 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.

12 Maggio 2000Implementazione12 Progettare per diversi monitor Dimensione Limita la finestra del browser, che tra laltro può essere dimensionata a piacere dallutente 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.

13 Maggio 2000Implementazione13 Risoluzioni comuni MacintoshPC 512 x 384640 x 480 800 x 600 portatili 800 x 600 powerbook1024 x 870 832 x 6241280 x 1024 1024 x 7681600 x 1200 1152 x 870 1280 x 960 1280 x 1024

14 Maggio 2000Implementazione14 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

15 Maggio 2000Implementazione15

16 Maggio 2000Implementazione16

17 Maggio 2000Implementazione17 Spazio vivo Netscape su W95 Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x 480623 x 278635 x 380 800 x 600783 x 430795 x 500 1024 x 7681007 x 5981019 x 668 1152 x 8701135 x 7001147 x 770 1280 x 10241263 x 8541275 x 924 Netscape 4.0 per Windows 95

18 Maggio 2000Implementazione18 Spazio vivo Explorer su W95 Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x 480623 x 278635 x 380 800 x 600783 x 398795 x 500 1024 x 7681007 x 5661019 x 668 1152 x 8701135 x 6681147 x 770 1280 x 10241263 x 8221275 x 924 Internet Explorer 4.0 per Windows 95

19 Maggio 2000Implementazione19 Spazio vivo Netscape su Mac Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x 480602 x 313617 x 402 800 x 600794 x 457809 x 546 1024 x 768986 x 6011001 x 601 1152 x 8701114 x 7031129 x 792 1280 x 10241242 x 8571257 x 946 Netscape 4.0 per Macintosh

20 Maggio 2000Implementazione20 Spazio vivo Explorer su Mac Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x 480612 x 315627 x 431 800 x 600804 x 459819 x 575 1024 x 768996 x 6031011 x 719 1152 x 8701124 x 7051139 x 821 1280 x 10241252 x 8591267 x 975 Internet Explorer 4.0 per Windows 95

21 Maggio 2000Implementazione21 Per un monitor 1024 x 768 Sistema operativo browser Minimo spazio vivo Massimo spazio vivo Netscape su W951007 x 5981019 x 668 Netscape su Mac986 x 6011001 x 601 Explorer su W951007 x 5661019 x 668 Explorer su Mac996 x 6031011 x 719

22 Maggio 2000Implementazione22 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

23 Maggio 2000Implementazione23 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

24 Maggio 2000Implementazione24 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

25 Maggio 2000Implementazione25 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

26 Maggio 2000Implementazione26 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 testo pre-formattato testo dattiloscritto codice input da tastiera testo di saggio testo di esempio

27 Maggio 2000Implementazione27 Testo in grafica Per avere il controllo sullapparire del testo Intestazioni, incipit... Più pesante Informazione persa se non si caricano immagini o in browser non grafici Uso del tag è raccomandato ma è limitato Informazioni non possono essere manipolate (cercate o indicizzate)

28 Maggio 2000Implementazione28 Il controllo del testo Difficile perché dipende dalla piattaforma dellutente 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