Maggio 2000Implementazione1

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 ?

Maggio 2000Implementazione3 Browser comuni Netscape Navigator e Microsoft Explorer dominano il mercato. Tag HTML proprietari Incompatibilità con nuove tecnologie come DHTML, CSS o Javascript developer.netscape.com o developer.netscape.com/docs/manuals developer.netscape.com developer.netscape.com o

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

Maggio 2000Implementazione5 Altri browsers Lynx Free, solo testo. Ha una sua comunità di appassionati utenti. 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 2000Implementazione6 Browser resources Informazioni sui browsers: BrowserWatch, Which Browser, BrowserCaps,

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).

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.

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, vi dice come.

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, Il parser del WWW Consortium Alcuni editor di HTML o il browser Opera possono essere usato allo scopo.

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.

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.

Maggio 2000Implementazione13 Risoluzioni comuni MacintoshPC 512 x x x 600 portatili 800 x 600 powerbook1024 x x x x x x x x 1024

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

Maggio 2000Implementazione15

Maggio 2000Implementazione16

Maggio 2000Implementazione17 Spazio vivo Netscape su W95 Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x x x x x x x x x x x x x x x 924 Netscape 4.0 per Windows 95

Maggio 2000Implementazione18 Spazio vivo Explorer su W95 Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x x x x x x x x x x x x x x x 924 Internet Explorer 4.0 per Windows 95

Maggio 2000Implementazione19 Spazio vivo Netscape su Mac Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x x x x x x x x x x x x x x x 946 Netscape 4.0 per Macintosh

Maggio 2000Implementazione20 Spazio vivo Explorer su Mac Risoluzione monitor Minimo spazio vivo Massimo spazio vivo 640 x x x x x x x x x x x x x x x 975 Internet Explorer 4.0 per Windows 95

Maggio 2000Implementazione21 Per un monitor 1024 x 768 Sistema operativo browser Minimo spazio vivo Massimo spazio vivo Netscape su W x x 668 Netscape su Mac986 x x 601 Explorer su W x x 668 Explorer su Mac996 x x 719

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= colori Profondità colore a 16-bit Circa colori rappresentabili Profondità colore a 8-bit 256 colori rappresentabili

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

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

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

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

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)

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 Embedded fonts nelle pagine, in un file che viaggia con il file html