Scrivere per il Web: paragrafi, parole e caratteri

E’ indubbio che scrivere per il web è profondamente diverso che scrivere per altri media.
E vediamo perché:

-sul web si va di corsa, è un mezzo molto veloce, se un sito non ci da ciò che noi vorremmo in modo immediato siamo tentati di passare al prossimo
-sul web tendiamo a fare economia di tempo e velocemente saltiamo da una parte all’altra di una pagina per vedere se contiene ciò che noi stiamo cercando, più che leggere scansioniamo

Quindi sia in termini di contenuti e della loro distribuzione, che in termini di scelte tipografiche dell’impaginazione siamo tenuti a fare delle scelte precise.

Contenuti
-niente lunghi prologhi, semmai andare dritti al punto nelle prime righe, parlare subito dei contenuti più interessanti e semmai rinviare ad altri link per l’approfondimento (questo è ciò che viene inteso come la ‘piramide invertita’)

-omettere testo inutile o spiegazioni non richieste (i.e. come usare il sito)

Forma
-usare una forma diretta e chiara
-trovare un modo personale nella scrittura, che identifichi
-cercare un dialogo con l’utente, senza esagerare

Layout
-scrivere a blocchi, un testo lungo è difficilmente leggibile sul web inoltre il testo a blocchi è più facilmente scansionabile

-se le cose da scrivere sono veramente tante, suddividere in più pagine fisiche e poi dare una versione intera del documento stampabile

-nei blocchi utilizzare con molta parsimonia caratteristiche enfatizzanti per le parole chiave del testo, senza mai utilizzare più di un attributo per volta (i.e. se abbiamo messo il grassetto non aggiungere il corsivo); tenendo sempre conto del valore semantico che questi attributi hanno
-mai usare la sottolineatura; visto che essa è deputata ai link, potrebbe indurre l’utente in confusione

-mai usare il maiuscolo come elemento cattura attenzione infatti è dimostrato che ottiene l’effetto contrario a causa della mancanza di una forma distintiva

-usare invece spazi bianchi in modo distintivo, giocando con la crenatura ovvero lasciando spazi di rispetto (sia in termini di spazio tra una lettera ed un’altra sia in termini di spazio tra una riga ed un’altra) a informazioni da mettere in rilievo

Formattazione del testo
-è consigliato l’imbandieramento a sinistra (giustificato senza sillabazione è spesso troppo pieno di spazi, ed i margini irregolari a sinistra creano problemi di leggibilità)

-è consigliato scrivere righe di larghezza non superiore a 365 pixel (che corrispondono più o meno a 10-12 parole) in quanto è dimostrato che per una lunghezza maggiore il nostro occhio dovrebbe sforzarsi per mettere a fuoco, rendendo così faticosa la lettura


Font
-mai utilizzare troppi tipi di font diversi in uno stesso contesto, potrebbe sembrare divertente ma in realtà confonde l’utente

-scegliere tra font che sono largamente diffusi e in ogni caso mettere delle alternative nel codice

-porre molta attenzione sulla dimensione del font, troppo piccoli non si leggono troppo grandi pasticciano

-il w3c consiglia di usare l’unità di misura “em”, infatti così è l’utente a stabilire qual è la dimensione base –secondo le sue esigenze- ed il resto avrà l’enfasi richiesta dal webdesigner nelle proporzioni a quella base

-porre attenzione nella scelta di font particolarmente noti e caratterizzanti un certo prodotto (i.e. il font usato per il marchio di IBM ricorderà sempre IBM); inoltre visto che questi font fortemente grafici non sono così diffusi i testi relativi andrebbero tramutati in immagini in modo tale che anche chi non ha quello specifico font residente sul suo computer possa vedere ciò che noi desideriamo che veda



fonti:
vito evola, dispensa e lezioni

Cosa sono gli attributi ALT e TITLE e la loro importanza

In HTML gli attributi ALT e TITLE sono propri del tag IMG.

L’attributo ALT contiene il testo alternativo ad una immagine che:
-potrebbe non essere visualizzata per motivi tecnici
-potrebbe non essere visualizzata perché l’utente ha deciso di navigare escludendo le immagini
-sia parte di un sito che sta consultando un ipovedente con l’ausilio di uno screen reader
-certamente non può essere visualizzata da uno spider di un motore di ricerca che sta spazzolando il sito che contiene l’immagine
Molti browser come IE visualizzano il contenuto di ALT quando si passa con il cursore sopra l’immagine, ma non è questo lo scopo per cui è nato ALT. Infatti le specifiche dell’HTML4 dicono esplicitamente che è TITLE l’attributo destinato al ‘suggerimento a scomparsa’.

L’attributo TITLE di IMG (da non confondere con quello di HEAD) va utilizzato per veicolare ulteriori informazioni significative per l’IMG.

Per tutte gli usi di questi attributi sopra illustrati è evidente che si deve fare una utilizzazione accurata dei loro valori, affinché si raggiungano gli obiettivi per cui questi attributi sono stati creati.

Escludendo le immagini senza significato (per esempio il quadratino bianco che serve a spostare un’altra immagine di 4 pixel) per le quali è consigliabile usare un alt null (cioè alt=””), per tutte le altre immagini dobbiamo seguire una serie di accorgimenti razionali per non cadere in errori grossolani.

Per esempio nelle icone di navigazione evitare descrizioni tipo “torna indietro di uno” ma usare invece “vai alla pagina XXXX”. Nelle immagini accessorie e/o interessanti è utile una breve descrizione di cosa l’immagine era destinata ad illustrare e magari l’aggiunta del peso in k, in modo che ove l’utente sia nelle condizioni di scegliere sappia a cosa vada incontro se decide vedere l’immagine.



fonti:

http://www.diodati.org/
progettare il web del futuro, jeffrey zeldman, ed. perason

Scelta e ragioni del formato adatto di salvataggio per un’immagine acquisita da scanner

La scelta del formato di salvataggio dell’immagine che stiamo acquisendo attraverso uno scanner può essere dettata da alcune variabili come:
- a che uso è destinata l’immagine
- che memoria di disco ho a disposizione
- quale lavoro di manipolazione sono in grado di fare dopo che l’acquisizione è fatta

Una importanza fondamentale ha la scelta tra tipi di immagini con compressione lossy o lossless (jpg è lossy e tiff invece lossless).

Secondo me è sempre preferibile scegliere un formato a compressione lossless, infatti una volta che l’immagine è acquisita può tornare utile nelle più svariate situazioni.

Anche riguardo all’utilizzo di spazio sul disco, a meno che la situazione non sia disperata, trovo sia sempre meglio scegliere un formato ad alte prestazioni e semmai salvarne una ulteriore copia del file in un formato meno pesante in termini di bytes per l’utilizzo immediato.

Se salviamo direttamente in gif, per esempio, perché magari è una immagine non fotorealistica e che dobbiamo utilizzare sul web e poi la stessa immagine ci dovesse servire per la stampa non avremmo più un originale profondità di 24 bit da cui potere ricavare una buona stampa.

In sintesi io sono del parere di salvare sempre tiff e semmai convertire delle copie in formati che fanno risparmiare bytes se l’uso che ne dobbiamo fare richiede una immagine più leggera.

fonti:

http://www.unifi.it/
la mia esperienza personale

il significato di “Web Safe color” ed eventuale vantaggio e utilizzo odierno dei colori Web Safe

Delle possibili 16.777.216 combinazioni di colore ottenibili con il sistema rgb solo 216 sono definibili web safe colors o browser safe.
Con web safe colors si intendono quei colori che si vedono nello stesso modo indipendentemente dal browser nel quale sono visualizzati.
Il problema è che i browser girano su piattaforme differenti che interpretano in modo diverso i colori, però questi 216 si vedono sempre e comunque al medesimo modo. Questi colori si ottengono con coppie di 00; 33; 66, 99, CC, FF (in codifica esadecimale). Un esempio potrebbe essere : #6666FF

Dei web safe color sono state fatte delle palette, che si trovano in tutti programmi di grafica o di web design e che comunque si trovano facilmente su internet.


fonti:
http://www.dipmat.unict.it/
http://www.altrascuola.it/
http://www.echoecho.com/
lezioni di vito evola

il sistema esadecimale ed il significato di rgb

In html i colori sono specificati mediante il sistema RGB (red, green, blue) in quanto la modalità rgb è quella normalmente impiegata da dispositivi elettronici come video, scanner etc. Tutti questi strumenti riproducono i colori trasmettendo o assorbendo la luce al contrario di come fa la carta che la riflette. I colori che noi vediamo sul monitor del computer ci appaiono quando i fasci elettronici colpiscono i fosfori rossi verdi e blu. Essendovi due cifre esadecimali per ogni colore si possono specificare 256 (16 per 16; FF in esadecimale) gradazioni di ogni colore base quindi questo da un totale di 256*256*256 = 16.777.216 differenti combinazioni, che sono tutti visibili se si dispone di una scheda video a 24 bit.
La combinazione dei colori rgb avviene per sintesi additiva, al contrario, per esempio, del sistema cmyk –usato per la stampa su carta- che lavora per sintesi sottrattiva. Nel sistema rgb i colori vengono generati aggiungendo luce colorata a luce colorata, i colori secondari vengono creati utilizzando i tre colori primari rosso, verde e blu.
Il bianco dunque viene generato utilizzando i tre colori primari alla massima intensità (256;256;256 o FF;FF;FF) ed il nero utilizzandoli alla minore intensità (0;0;0 o 00;00;00). Triple degli stessi valori generano grigi di diverse intensità.



codifica dei colori principali con il sistema esadecimale
in html esiste una codificazione in lettere di alcuni dei colori principali come black, yellow, maroon, blue, white, etc ma per utilizzare tutte le possibili sfumature di colore dobbiamo lavorare con il sistema esadecimale, ecco alcuni esempi di codifica:

rosso = #FF0000
verde = #00FF00
blu = #0000FF
grigio = #CCCCCC
giallo = #FFFF00
bianco = #FFFFFF
nero = #000000
ciano = #00FFFF
magenta = #FF00FF

ciascuna tripla indicante un colore esadecimale è preceduta dal simbolo “#” che sta lì solo per indicare che quelli che seguono sono numeri e non caratteri alfanumerici.

fonti:
http://www.dipmat.unict.it/
http://www.altrascuola.it/
http://www.echoecho.com/
lezioni di vito evola

confronto formati BMP JPEG GIF PNG

bmp, bitmap
Il formato bmp supporta intensità di colore da 1 a 24 bit, non supporta la compressione di file e non è indicato per le pagine web in quanto i file bmp oltre ad essere pesanti in kb non sono supportati dai browser.

png, portable network graphics
Questo formato è stato sviluppato per il web nel 1995 e nelle intenzioni dei creatori avrebbe dovuto sostituire il formato gif.
Il formato png supporta intensità di colore da 1 a 24 bit , è capace di un alto livello di compressione lossless, supporta l’interlacciamento, supporta la trasparenza del canale alfa, non supporta invece l’animazione, anche se il w3c ci sta lavorando sopra al riguardo.
Una speciale caratteristica di questo formato è la capacità di incorporare testo che serve ad identificare le immagini che contiene, e su questo testo è possibile effettuare ricerche.
Ovviamente è un buon formato da utilizzare sul web, lo svantaggio è che alcuni browser più datati potrebbero non supportarlo.
Il formato png si può utilizzare per la stampa.

jpg, joint photographic experts group

Il formato jpg supporta intensità di colore a 24 bit. È un formato che non dipende dalla piattaforma utilizzata ed è uno standard per internet ampliamente supportato.
E’ capace di un alto livello di compressione, che può essere aumentato e diminuito, tuttavia si tratta di una compressione di tipo lossy e più si comprime più si abbassa la qualità dell’immagine. Lo schema di compressione dell jpg funziona abbastanza bene con le immagini fotorealistiche ma non altrettanto bene quando siamo in presenza di immagini contenenti vaste aree di colore simile o con differenza di luminosità netta.
Inoltre quando si modificano e ri-salvano i file jpg perdono in qualità, la degradazione è progressiva.
I file JPEG progressivi supportano l'interlacciamento. Il tempo di download di una jpg progressiva è più lungo di una tradizionale, tuttavia offrono all’utente una anteprima rapida.

gif, graphics interchange format
Il formato gif memorizza un'immagine raster singola o un'immagine raster multipla a colori a 8 bit (massimo 256 colori e minimo due bianco e nero). Arrivando ad una tavolozza di soli 256 le immagini fotorealistiche perdono moltissime informazioni riguardo al colore e di conseguenza appaiono poco vivaci.
Il formato gif supporta la trasparenza , ma non quella del canale alfa quindi niente semitrasparenza per esempio.
Supporta la compressione, che è di tipo lzw, lossless. Questo tipo di compressione è più adatto a comprimere immagini con vasti campi di colore omogeneo e funziona peggio con immagini molto complicate con tanti colori e grane complesse.
La compressione lzw consente di salvare immagini in formato interfacciato.
E’ possibile creare gif animate (immagini multiple).
Questo formato è uno standard ampiamente supportato per Internet.


In conlusione:
parlando di immagini da utilizzare su internet i formati sono tre: jpg gif e png
Il più versatile è il png anche se ha la pecca di essere il meno supportato. Per quanto riguarda gli altri due a mio parere va usato il jpg per le immagini fotorealistiche e il gif negli altri casi. Aborro le gif animate.


fonti:
http://www.microsoft.com/
http://www.shinynews.it/
http://www.gdesign.it/

raster vs. vettoriale

le immagini raster o (bitmap), le cui estensioni sono : jpg, tiff, gif, bmp, png più tutti i formati proprietari delle varie aziende che producono software per il trattamento delle immagini (come cpt per corel o psd per adobe), sono rappresentate mediante una matrice contenente un certo numero di pixel (pixel=picture element), la loro qualità dipende dalla risoluzione (numero di pixel che compongono l’immagine) in genere misurata in punti per pollice (dpi=dot per inch) e dalla profondità del colore, che indica il numero di colori rappresentabili per ciascun pixel.
occupano molta memoria ed all’incrementarsi della risoluzione –anche a parità di dimensione- il peso in bytes si eleva enormemente.
ci danno la qualità di una fotografia, sono capaci di rappresentare passaggi in sfumature raffinatissimi, però sono modificabili con una certa difficoltà e il cambiamento di dimensioni comporta perdita di qualità
tale perdita di qualità avviene sia quando si riducono –è come se si pasticciassero oltre una certa percentuale di riduzione -, sia quando si ingrandiscono, in quanto il numero di pixel disponibili resta uguale e l’effetto che si ottiene è di dilatarli, così che ci viene restituita una immagine sgranata.
molti dei formati raster sono comprimibili in alcuni casi si può ottenere una compressione lossless ma in altri è lossy (come nel caso delle jpg).

le immagini vettoriali sono rappresentate mediante linee e curve definite da funzioni matematiche, per esempio un’area viene rappresentata attraverso una serie di vertici uniti da linee.
sono adatte per i disegni in cui conta la precisione delle linee, occupano poca memoria, si salvano praticamente sempre in un formato compresso lossless, la modifica è molto più semplice di quella delle immagini raster. La cosa più bella è che sono scalabilissime senza perdere un solo pelo in risoluzione.
è evidente che non riescono a raggiungere l’effetto fotografia che possono raggiungere le immagini raster.
è possibile lavorarci con sfumature ed effetti tuttavia non si raggiunge mai il dettaglio in sfumatura delle bitmap.
le estensioni dei formati vettoriali sono molto varie e dipendono dal sw che si usa per crearle modificarle, alcuni tra i formati più interscambiabili o portabili che dir si voglia sono ai e eps.
il formato vettoriale viene usato dai programmi di progettazione e anche dai programmi che servono per fare grafica vettoriale.


fonti:
http://www.unisa.it
http://www.unime.it
la mia esperienza personale