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:
<P>
<FONT SIZE=5 COLOR="#004400"> QUESTA <A
HREF="sorella.jpg"> <IMG
SRC="faccione.gif" ALIGN=MIDDLE
BORDER="0"> CHE <B>VEDETE</B> <br>
</FONT> <FONT SIZE=3 COLOR="#AA0000">
<em> è un <B>particolare</B> di mia
SORELLA </FONT> <br>
</P><P>
<FONT SIZE=4 COLOR="#4400ff"> Se ci cliccate
<U>SOPRA</U> la vedrete <br>
<B><blink>COMPLETAMENTE
NUDA!!!</blink></B>
</P>
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!