R- L'OTTIMIZZAZIONE DELLE IMMAGINI E I TESTI SCORREVOLI

Avete mai provato a usare un computer senza monitor? Beh, per quanto potrà sembrarvi incredibile, chi scrive è stato vittima di una serie incommensurabile di sfortune, capitate una di segiuto all'altra e molto simili, per certi versi, alle vicende che videro protagonista Frank col gestore nazionale delle reti telefoniche... In sostanza, sono due settimane che il mio lavoro procede a rilento a causa del continuo transitare, sulla mia scrivania, di monitor sostitutivi in attesa del mega-diciassette-pollici-totale che, mi auguro, salverà me medesimo dai continui mal di testa, dalle bruciature agli occhi, dalle eccessive lacrimazioni dopo tante ore passate al computer e via dicendo. Ovvio che il monitor alla fine è arrivato. Con una bella crepa sulla mascherina. E allora, ecco che torna nuovamente indietro, per la gioia mia che devo ancora scrivere questo articolo, e tra qualche ora devo partire per la Germania. Insomma, una fortuna da cinema. Cosa fa allora il Paolone in questi casi? Getta la spugna? Non sia mai! E così, collegato un Iomega ZIP al suo PC portatile mezzo fuso (tempo addietro perì il controller del disco fisso, praticamente un notebook da buttare) e installatovi sopra Windows 3.1, mi sono messo nuovamente a scrivere. Operativo al 25%, ma fa niente.
Questo però implica anche una conseguenza mica da ridere, e cioè che io scrivo, ma non posso nemmeno verificare con la pratica quanto segue, essendo il mio computer attualmente privo di monitor e non potendo nemmeno definire "utilizzabile" quello su cui sto miracolosamente lavorando. Per cui, invece di addentrarci nell'argomento <frame> come originariamente progettato, anticiperò un lungo discorso che, comunque, lungo il corso avrei dovuto fare lo stesso. E cioè: "come faccio a ottimizzare le immagini da inserire nella mia pagina web?".
Abbiamo detto il mese scorso che non è sano farcire un sito di megabyte di grafica, soprattutto quando il sito in questione deve maggiormente la sua fama alla lentezza di trasferimento dei dati piuttosto che per i suoi contenuti: attese troppo lunghe diventano snervanti per l'internauta sempre attento alla bolletta, per cui sarebbe proprio il caso di alleggerire un po' il download usando dei piccoli accorgimenti:

1) usare foto piccole

Non è necessario piazzare un mega-fondino totale costituito da un'unica immagine da 800x600 punti a 16 milioni di colori. Sarà anche bello da vedere, ma solo per caricarlo ci vuole un tempo superiore a quello in cui, in condizioni normali, il vostro visitatore potrebbbe leggere tutto il testo contenuto. Molto meglio affidarsi a una buona texture (in rete ne troverete migliaia diverse! Basta prenderne una e modificarla un po' applicando qualche filtro) e lasciare che il browser la ripeta all'infinito. Sarebbe una buona regola che le dimensioni dell'immagine di fondo stiano nell'ordine dei 120x80 pixel, o che comunque non siano troppo voluminose in fatto di byte. Tanto il fondino sta dietro. Provate anche a ridurre la palette a 32 o a 16 colori, se continua a rendere l'idea senza perdere in dettaglio, siete a cavallo. Altro suggerimento per l'immagine di fondo: provate a convertirla verso una scala di grigi, i fondini in bianco e nero sono solitamente chic, soprattutto se il testo è molto colorato. Ricordatevi anche che il fondo dovrà contrastare parecchio con le scritte, quindi, se quest'ultime intendete metterle scure, conviene sempre che la luminosità del fondo sia elevata, altrimenti scurite il più possibile. Una volta ridotta a bianco/nero, solitamente, una texture di sfondo può essere tranquillamente ridotta a 16 'colori', e salvata in formato GIF87a (interlacciato o meno, senza colori di trasparenza).
Per quanto riguarda le foto in primo piano, stesso discorso: non mettete mai immagini molto grosse in apertura (intendo dire immagini che occupino più di 50k, indipendentemente dalle dimensioni), sono lunghe da caricare e bloccano Netscape (Internet Explorer invece carica prima il testo - è indubbiamente più furbo...) per qualche secondo di troppo. Piuttosto organizzatevi con le <table> come abbiamo visto il mese scorso, e cercate di creare qualche effetto simpatico con delle immagini piccole. Se poi volete far sì che queste possano essere viste in tutta la loro bellezza, date piuttosto al visitatore la possibilità di cliccarvi sopra per un ingrandimento: volete l'esempio? Eccovelo: torniamo allo scherzone che avevamo fatto a nostra sorella nella prima puntata (quello della foto appena sveglia, ricordate?), ma stavolta facciamoglielo più cattivo. La situazione è questa, quatti quatti, vi siete appostati in bagno mentre lei faceva la doccia e... tac! Appena uscita eccola immoratalata in un nudo integrale. Ora, un'immagine così interessante è proprio un peccato tenersela per sè, per cui decidiamo di metterla in linea a disposizione di milioni di utenti. Un'ottima idea potrebbe essere mettere solo il particolare del volto ("faccione.gif"), per poi dare la rappresentazione intera ("sorella.jpg") semplicemente cliccandovi sopra:


 QUESTA <A HREF="sorella.jpg"> <IMG SRC="faccione.gif" ALIGN=MIDDLE BORDER="0"> CHE VEDETE 
 è un particolare di mia SORELLA 

 Se ci cliccate SOPRA la vedrete 
<blink>COMPLETAMENTE NUDA!!!</blink>


L'esempio qui sopra dimostra due cose: 1) mia sorella è davvero fortunata, visto che di sorelle non ne ho, e 2) un uso di diversi stili e colori può rendere il testo appetibile anche senza troppi ghirigori grafici. Cercate di mantenere ordinata la vostra pagina, il cervello è più contento quando può facilmente ridurre la rappresentazione della realtà a uno schema. Senza per questo arrivare al piattume più totale, ci sono modi davvero fantasiosi per mettere le fotografie senza appesantire troppo il risultato finale.

2) abbattete la palette delle GIF

Ovviamente, non è necessario che l'immagine "faccia.gif" che noi avevamo usato solo per attirare l'attenzione goda di risoluzioni assurde e di colori sempre vivi: il più delle volte è anche possibile ridurne il numero di colori senza per questo perdere molto in qualità d'immagine. In giro per la rete esistono centinaia di programmini fatti apposta per ottimizzare le immagini su Internet. Sul sito della Xenia Edizioni è stato ospitato per parecchio tempo il GIF/JPEG SAVER di Photoimpact, un filtro adobe-compatibile che permette di ottimizzare con estrema facilità i due formati grafici in questione. Faccio però notare ai soliti pigri che già Paint Shop Pro, da solo, è perfettamente in grado di svolgere questa operazione conseguendo risultati più che discreti: basta andare sul menu image e selezionare l'opzione "decrease color palette". Io di solito consiglio di ridurre a 63 colori qualsiasi immagine: si ottiene un buon risparmio di preziosi Kbyte e ci rimane la possibilità di selezionare un 64esimo colore per la trasparenza. Le GIF hanno infatti il pregio di poter essere trasparenti ed animate, oltre che interlacciate, ma solo se salvate nel formato 89a.

3) Comprimete il più possibile le JPEG

L'abbattimento della palette ha un senso solo lavorando con immagini GIF. Laddove non sia necessario ricorrere al fondo trasparente o ad altre amenità disponibili con questo solo formato, è meglio utilizzare le immagini JPG comprimendole il più possibile. Ricordatevi che la compressione va a discapito della qualità dell'immagine, per cui fate attenzione a non esagerare quando invece desiderereste un maggior dettaglio. Altra considerazione: il browser fa certamente prima a visualizzare una GIF piuttosto che una JPEG, ma con la maggior parte dei moderni calcolatori questa differenza è ormai del tutto risibile.

4) Imparate le basi del fotoritocco

Imparare a isolare un oggetto dal resto di un'immagine è di fondamentale importanza per chi si accinge a pubblicare i propri lavori su Internet, per cui vi conviene da subito acquisire la necessaria esperienza con programmi come Photoshop o Picture Publisher, visto che molto spesso ne farete uso per inserire i vostri gadget all'interno della pagina. Paint Shop Pro è invece indicatissimo per gli ultimi ritocchi, per la "bottonizzazione" di un'immagine e per l'inserimento di sfondi trasparenti. In ogni caso, provate, sbagliate e riprovate, l'importante è non restare bloccati solo perché non si sa esattamente come comportarsi di fronte a un'immagine!

5) Imparate a usare le tabelle nel migliore dei modi

Le <table> che avevamo visto il mese scorso sono il modo più pratico e veloce per posizionare testo e immagini come meglio crediamo. Sul CD-ROM di questo mese dovrebbe esserci una demo di Zzap!, se notate la seconda schermata, una table con più elementi ci ha permesso di ottenere proprio il risultato che volevamo, con i due logo posizionati esattamente là dove volevamo che stessero, uno sopra l'altro. Le tabelle ci permettono anche di dare alla nostra pagina un look "a frame" anche se poi dei frame proprio non ne facciamo uso. Un esempio validissimo in questo senso potrebbe essere la pagina introduttiva del nostro sito Xenia On Line, oppure anche le celeberrime pagine di Tucows.

...e adesso, torniamo un po' all'HTML vero e proprio!

IL TESTO E' PIU' BELLO QUANDO NON STA FERMO

Avete visto diverse pagine col vostro browser, e ne avete trovate parecchie in cui il testo scorre a destra e/o a sinistra, domandandovi come diavolo sia possibile questa 'magia'. La risposta può essere duplice, a seconda del browser che state utilizzando: nel caso di Netscape Navigator, vi trovate sicuramente di fronte a uno script Java o ActiveX fatto apposta per far scorrere i testi, altrimenti, se state usando Interet Explorer, potreste esservi imbattuti nel famigerato (ma estremamente potente) tag <MARQUEE>. Questa istruzione dice al browser di aprire un'area di testo animato, senza dover ricorrere ad alcuno script o ad altre amenità, unico scotto da pagare, è che gli utenti di Netscape vedranno solo le solite scritte. Vediamone un po' le caratteristiche.
E' possibile aprire un marquee specificando diversi attributi, e assegnando a questi valori molteplici:

ALIGN
Specifica l'ubicazione del testo all'interno dell'area, può assumere i valori TOP, MIDDLE o BOTTOM.

BEHAVIOR
Determina l'effetto da dare al testo, e può assumere tre valori diversi. Con SCROLL le parole partiranno da un margine per scomparire in quello opposto. Molto utile per frasi particolarmente lunghe con cui si vuole attirare l'attenzione del pubblico. Potete ammirarne un esempio nella pagina del gruppo rock in cui 'militiamo' sia io sia Rodolfo Rolando (i CSTP, http://philos.unipv.it/paolone/cstp.htm). SLIDE invece fa sì che il testo parta da un margine ma si fermi appena raggiunto quello opposto, mentre ALTERNATE fa sì che il testo "rimbalzi" tra una direzione e l'altra.

BGCOLOR
Come intuibile, specifica il colore di fondo. Vale tutto il discorso fatto il mese scorso.

DIRECTION
Impostando questo parametro sul valore HEAVEN il nostro testo prenderà la retta via, mentre se io scelgo HELL, si perderà lungo la strada della perdizione... ok, ok, la smetto di scherzare, mettete pure giù quell'ascia. Diciamo che i due valori ammessi sono LEFT e RIGHT, secondo voi a cosa potrà mai servire questo parametro?

HEIGHT
Determina l'altezza del marquee

HSPACE
Determina la distanza in pixel tra i margini del marquee e il testo contenuto

LOOP
Assegnando un valore numerico 'n' a questo parametro, il marquee eseguirà n volte ciò che sarà specificato dagli altri parametri. Inserendo -1 o INFINITE, invece, il tutto avrà luogo infinitamente.

SCROLLDELAY
Specifica il numero di millisecondi tra un aggiornamento e l'altro del marquee. Ottimo per non ottenere sullo schermo scritte con "effetto superman"...

VSPACE
La distanza in pixel tra la scritta e i margini verticali.

Volete anche un esempio? Eh no, spiacente! Questo è compito vostro. Noi ci si rilegge il mese prossimo: buon lavoro!