7. Grafici "à la Web"
Utilizzare Internet per mandare testi in giro per il mondo e' un modo sorpassato per spedire una e-mail. La gente l'ha fatto per decenni! Quando puoi inserire anche delle immagini, il tuo messaggio puo' far passare molto meglio il suo contenuto! La quotazione corrente e' sempre 1000 parole per una immagine?
Obiettivi
Dopo questa lezione sarai in grado di:
- Identificare i formati grafici del mondo del World Wide Web.
- Discutere i punti chiave per valutare quando inserire dei grafici in un documento HTML.
- Scaricare un file grafico sul tuo computer.
- Usare il codice corretto per inserire le immagini in una tua web page.
Lezione
Stenditi e rilassati un poco! Questa lezione e' in gran parte un'introduzione all'argomento grafici per il World Wide Web. Ma porteremo avanti un lavoretto tra poco.
Il Formato dei Grafici Web
Ci sono numerosi formati di file per i grafici da computer... PICT, GIF, TIFF, PNG, per non parlare di EPS, BMP, PCX, JPEG...
Assomiglia a quella poesia criptica, suona ermetico. Come una poesia un bel po' strana!
Nella formattazione HTML il modo con cui un browser visualizza i grafici indica dove e' allocato il singolo file grafico; questo puo' essere interpretato da diversi tipi di computer. Per esempio, quando l'informazione passata con questo codice e' ricevuta da un computer Macintosh, il web browser sa visualizzarla come un'immagine di formato per Macintosh. D'altra parte, quando la stessa informazione e' ricevuta dal tuo Windows browser, e' visualizzata come un grafico Windows.
In gergo tecnico, si puo' dire questo formato d'immagine e' platform independent, indipendente dalla piattaforma. Il codice HTML in se stesso e' indipendente dalla piattaforma, in quanto i caratteri dei file in solo testo (plain text) possono essere compresi da ciascun tipo di computer.
Il formato standard che viene usato per le visualizzazioni nelle web page e' il GIF o Graphics Interchange Format. Il GIF comprime i dati dell'immagine (riduce la dimensione del file) e li traduce in codice binario che puo' essere inviato attraverso la Rete. La compressione GIF e' piu' efficace per quei grafici che presentano aree contigue a colore pieno, e la compressione e' ancora piu' efficace quando il colore e' continuo nel senso orizzontale.
L'altro formato di file usato nella Rete e' il JPEG (cosi' chiamato dopo che il Joint Photographic Expert Group ha progettato questo formato). In precedenza, le immagini JPEG non erano visualizzate nella pagina ma in una finestra separata del browser, usando un'applicazione "helper", d'aiuto, esterna. Ma la maggior parte dei web browser oggigiorno supporta le immagini JPEG in modo che queste siano visualizzate direttamente nella web page.
La compressione JPEG e' molto efficace per le immagini fotografiche dove i colori possono variare ampiamente nel giro di brevi tratti (immagini "sgranate"). Il JPEG offre in alcuni casi una compressione della dimensione dei file veramente drastica, alcune volte con un fattore 10 (per esempio un file di 1500 kb ridotto a 150 kb), che puo' essere un compromesso vantaggioso per alcune qualita' d'immagini.
Per maggiori informazioni su questi formati di file, consulta la pagina SITO su
Graphics File Compression. Se hai voglia di un grande libro, prova quello di Lynda Weinman Designing Web Graphics
Tantissimi sono i programmi che possiedono fin dalla loro creazione funzionalita' utili per salvare files in formato GIF. Ma nessuno come ImageReady prodotto da Adobe e Fireworks creato da Macromedia sono stati specificatamente progettati per realizzare grafici web.
Puoi trovare altri programmi/utility shareware per convertire grafici a formato web presso download.com.
Alcuni Punti Da Considerare Usando I Grafici
Per questo corso, non devi usare nessuno dei programmi che abbiamo citato. Ti mostreremo come ottenere una copia delle immagini di cui avrai bisogno.
D'altra parte, quando comincerai a sviluppare le tue pagine web personali, dovrai prendere confidenza con la creazione di immagini sia in formato GIF che JPEG. Se le tue pagine web includono dei grafici considera le seguenti affermazioni:
- Un gran numero di immagini belle ampie puo' avere un aspetto favoloso sul tuo computer ad alta definizione, ma potrebbe risultare frustrante per gli utenti che devono attendere che queste siano spedite attraverso il network. Come suggerimento, tieni la dimensione totale delle immagini sotto i 100k (noi proporremmo sotto i 50k ciascuno).
- Non tutti abbiamo un monitor da 21 pollici!! Tieni la grandezza massima dei grafici a 480 pixel per la larghezza ed a 300 pixel per l'altezza per evitare di forzare gli utenti a scorrere l'immagine o a ridimensionare la finestra del loro web browser.
- I colori a gradiente possono sembrare piacevoli, ma per quanto riguarda le immagini GIF non possono essere compressi come le aree dai colori pieni ed a volte possono alla fine risultare "a strisce".
- Alcuni programmi di grafica offrono opzioni per poter scegliere quando convertire a GIF -- questo puo' ridurre la quantita di effetti indesiderati nella riproduzione di uno sfondo a colori pieni.
- Molti toni di color grigio scuro dei computer Macintosh non sono discernibili sui computer Windows.
- Piuttosto che visualizzare tutto l'insieme delle immagini sulla pagina web, collegale come immagini esterne che possano essere richiamate e scaricate solo quando un utente prema su di un elemento ipertestuale (di cui parleremo piu' tardi nella
lezione 8a e nella lezione 8d). Se hai un bel numero di immagini da far vedere al mondo della Rete, prova a dividere la pagina web in una serie di queste, collegate tra loro da links ipertestuali.
- Una immagine piccola (ad esempio, un "simboletto") puo' apparire diverse volte in una pagina web provocando un piccolo rallentamento ogni volta che tu usi la stessa immagine.
- Molti web browser mettono le immagini in "cache" (le conservano nel tuo computer). Cio' significa che usando lo stesso file in molte pagine, il browser lo carichera' dal computer dell'utente piuttosto che scaricarlo da Internet.
- Molto importante e' assicurarsi che le immagini scelte siano tali da aggiungere effettivamente significato al tuo documento HTML.
Puoi disegnare una pagina web veramente bella, arricchita da grandi immagini, che si caricano in modo effettivamente gradevole sul tuo computer, ma potrebbe essere tutto pazzescamente lento per un utente che usa un modem a bassa prestazione in un network affollato. La Rete e' un posto pieno di gente e diventa sempre piu' incasinato ogni secondo che passa.
Salvare ed Aggiungere Immagini alla Tua Web Page
Per la prossima lezione avrai bisogno per prima cosa di scaricare una copia di un'immagine GIF di un vulcano in eruzione (stai ben attento alla lava bollente!).
Segui semplicemente le istruzione al Centro Per Il Download delle Immagini Lezione 7 e quindi torna qui a finire questa lezione.
Controlla in Tuo Lavoro
Controlla se il file, "lava.gif", e' salvato nella stessa directory/folder del tuo file di testo HTML, "Volc.html". Se non e' qui, controlla se non l'hai accidentalmente salvato in un'altra directory/folder. Quindi spostalo nella posizione corretta.
Verifica
- Quali sono i due formati grafici usati per il World Wide Web?
- Come puo' un file grafico essere visualizzato su diversi computer?
- Quali sono alcuni dei punti chiave da considerare al momento di includere grafici nelle web page?
- Come hai proceduto per salvare l'immagine del vulcano da usare nel tuo documento WWW?
Pratica Indipendente
Naviga in rete e cerca delle immagini. Cerca di scaricare almeno un'immagine utile per il tuo documento WWW personale. Ecco alcuni posti che potresti provare
Prossimamente....
Adesso hai l'immagine..... Beh, come facciamo a farla vedere nel nostro lavoro per il WWW con il codice HTML?
Writing HTML: Lezione 7: Grafici "à la Web"
©1994-1999
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML