p4tdw305

blog del laboratorio DW3 Lxweb 2005

Monday, February 27, 2006

motori di ricerca

come funziona un motore di ricerca
un motore di ricerca è un enorme contenitore di dati indicizzati che vengono forniti all’utente in base alle richieste effettuate.
I motori di ricerca sono dotati di programmi che ‘vivono’ su internet chiamati spider che vanno in giro per tutto il www analizzando il contenuto dei siti, questi dati vengono indicizzati dal motore che poi li tira fuori in base a ciò che l’utente sta richiedendo. L’attività di analisi del web è incessante, ma questo non vuol dire che l’aggiornamento sia altrettanto rapido. Per esempio Google ci mette da due a tre settimane per indicizzare i dati ‘spazzolati’ dai suoi crowler.


come aggiungere una pagina per essere indicizzato da un motore di ricerca
in genere nelle pagine dei motori di ricerca esiste la possibilità di indicare le url che si desiderano siano aggiunte in quel motore. I sistemi sono dei più diversi: da google che vuole solo sapere la url a Virgilio che ha tutto un questionario da compilare ecc ecc.
In realtà però i motori di ricerca indicizzano le url a prescindere dall’azione dell’uomo.

Alcune tra le diverse strategie per aumentare il posto di indicizzazione in un motore di ricerca
E’ ovvio che un sito ben fatto, con tanti contenuti e tanti accessi ogni giorno sale da solo nella classifica dei motori di ricerca, i quali verificano sia lo stato di aggiornamento che gli accessi che dall’esterno si fanno ai siti. Inoltre i crawler dei motori riescono a leggere il testo ma di certo non le immagini o i contenuti speciali - di cui certo leggeranno i tag relativi all’accessibilità – quindi la pienezza dei contenuti da i suoi vantaggi.
Tutto ciò premesso ci sono una serie di accorgimenti che possono essere presi dai webmaster per migliorare il posizionamento dei sito sui motori di ricerca.

titolo di pagina
va messo un titolo in ciascuna pagina , questo titolo appare sia sulla barra del browser sia negli elenchi dei motori di ricerca. Questo tag è veramente letto da tutti i motori, al momento, quindi è importante "giocarselo" bene.

il meta tag description
è un tag il cui contenuto non viene visualizzato sulla pagina attraverso il browser ma che potrebbe essere letto dai motori e quindi riportato negli elenchi (in genere non deve superare le 50 parole affinché non venga troncato dai motori).

il meta tag key words
funziona come la descrizione, nella compilazione di questo tag sono da evitare tutti i vecchi trucchetti come ripetere più volte una parola o usare parole che non hanno nulla a che fare con il contenuto dei siti. I motori oramai ‘puniscono’ questo genere di comportamenti non rilevando affatto la parola. Per esempio Google non le legge fidandosi del suo sistema di analisi dei testi più che dell’operato dei creatori dei siti.

rapporto tra i meta tag ed i contenuti
Appare evidente da quanto detto sopra che descrizione e parole chiave possono ‘consolidare’ la posizione del sito nell’elenco dei risultati di un motore di ricerca qualora siano effettivamente attinenti al contesto del sito.

fonti:
http://www.strumentidiricerca.it
http://www.manilanet.net
http://www.motoricerca.info

Sunday, February 26, 2006

diario di bordo, step 3

dopo fatiche immemorabili..ho pubblicato la prima versione super-ultra-beta del sito tesina!!
alla url debitamente comunicata e cioè: http://www.servizintegrati.com/p4trizia

Monday, February 20, 2006

i tag "meta"

composizione di un tag meta; utilizzo di NAME e HTTP-EQUIV e relative differenze

All’inzio della storia della ricerca su internet i meta tag erano forse l'unica fonte d'informazione valida dalla quale i motori di ricerca –appunto- attingevano informazioni sul contenuto dei siti.
Non era nemmeno un cattivo sistema se solo non fossero stati usati malissimo da chi scriveva i siti, usati in modo ‘furbo’ per guadagnare posti in classifica nelle dir. Ad oggi i motori di ricerca praticamente li ignorano avendo a disposizione altre tecnologie.
Vi sono meta tag che assolvono ad altri tipi di funzioni come il reindirizzamento, l’impostazione dei cookies, l’indicazione della scadenza della pagina, etc.

composizione di un meta tag
i meta tag stanno all’interno del tag head
la composizione di un meta tag è fatta di due passi:
il primo è la dichiarazione della proprietà e il secondo è la dichiarazione del valore della proprietà. Per esempio:
< name="author" content="patrizia graziano">
dove name è l’attributo, author è la proprietà e patrizia graziano è il valore della proprietà

le proprietà name e http-equiv
ecco alcuni esempi dell’uso dell’attributo name:
name="title" content="Titolo a Piacimento"
assegna un titolo al documento diversamente dal tag “title” non appare all'interno della finestra del browser.
name ="description" content="descizione del documento"
contiene la descrizione della pagina , descrizione che dovrebbe essere visualizzata nelle ricerche dei motori
name="keywords" content="parole chiave"
contiene le parole chiave che dovrebbero corrispondere a quelle utilizzate da un potenziale utente sui motori di ricerca
name="robots" content="index/noindex, follow/nofollow"
contiene le indicazioni per gli spider dei motori di ricerca. per esempio index/noindex indica se la pagina deve essere indicizzata, follow/nofollow indica se lo spider deve proseguire la valutazione attraverso i link presenti sulla pagina

ecco alcuni esempi dell’uso dell’attributo http-equiv:
http-equiv="expires" content="sun, 26 febr 2006 22:30:00 gmt"
contiene l’indicazione della data di scadenza della pagina per il browser
http-equiv="set-cookie" content="cookievalue=xxx; expires= sun, 26 febr 2006 22:30:00 gmt; path=/">
imposta un cookie assegnandogli una scadenza
http-equiv="refresh" content="2"
aggiorna la pagina ogni x secondi.
http-equiv="refresh" content="2; url=paginaxy.html "
reindirizza il visitatore alla pagina indicata

Le informazioni contenute in http-equiv informano il browser che si tratta di valori di intestazione della connessione http
L'attributo name raccoglie informazioni utili agli utenti per conoscere, solo per fare un esempio, l'autore del documento, la lingua in cui è scritto ecc ecc.

Esistono moltissimi generatori di metatag, che possono fare il lavoro della editazione di questi tag per conto nostro.

fonti:
http://www.seoutility.com/
http://www.w3.org/
http://www.motoricerca.info/
http://tutorialweb.org/

lettera ad un amico

caro antonio,
visto che ci confrontiamo sempre sul nostro lavoro e visto che mi sono fatta un giro sull’ultimo sito che avete fatto volevo darti qualche consiglio- anche se non richiestissimo - che ti può risultare utile e spero anche gradito.
Ho fatto alcune nottate di studio sull’uso dei webstandards e sulla accessibilità dei siti e devo dirti che mi sono resa conto che sono due cose che non si possono tralasciare.
Prima di tutto ti devo dire che usare xhtml al posto di html è un must. Il codice è molto più pulito e ti assicura una maggiore compatibilità con tutti i browser che i nostri pazzi utenti decideranno di usare. Inoltre ci garantisce il futuro..perché non appena i tag deprecated diverranno non più interpretabili per chi ha i siti in html saranno dolori!
E poi i CSS, che grande invenzione! Al di là del fatto che le pagine si alleggeriscono in modo incredibile fare restiling sui siti diventa uno skerzo! Tutte le info condivise attraverso i CSS ti fanno rimaneggiare i siti in men che non si dica nel pieno rispetto dei webstandards per altro!!
Poi devo dirti che abbandonare le tabelle a favore dei div è stata una liberazione; infatti considera che oltre a rimettere ogni cosa al suo posto e cioè i dati dove è corretto che siano e gli elementi di presentazione al loro posto l’elasticità con la quale si possono maneggiare i div –certo dopo averci studiato un po’ su- non è assolutamente paragonabile all’anelasticità delle tabelle! Ti dico una sola cosa …funzionano i layer! E noi che ci siamo ammattiti ai tempi di netscape 4!:)
Inoltre curare gli standard per l’accessibilità diventa sostanziale..Al di là del corretto trattamento nei confronti degli utenti ipovedenti o non vedenti..ma ci pensi che il più grande utente cieco di internet è sua maestà google? Quindi garantire tutte gli standard per l’accessibilità significa garantire che google possa ‘leggere’ i nostri siti e trovo superfluo dire quanto ciò sia importante. Vale la pena di investire un po’ di tempo per rendere tutti i ns. siti accessibili! Che dici?
Leggi tutto con calma e ci sentiamo domani e mi fai sapere ke ne pensi.
baci
patrizia

Tuesday, January 17, 2006

Le teorie della Gestalt e Cognitive Web Design

Le teorie della Gestalt e la percezione
Le teorie della gestalt riguardo alla percezione fanno riferimento alla ad una scuola teorica tedesca che studiò appunto la percezione negli anni 20 del secolo scorso.
La scuola di Berlino si inserisce tra le scuole strutturaliste della percezione ed ebbe un grande influsso sullo sviluppo della psicologia.
La psicologia della Gestalt si fa risalire al 1912 anno in cui Wertheimer scrisse un articolo nel quale identificava un processo percettivo unitario per il quale i singoli stimoli verrebbero integrati, nel soggetto che percepisce, in una forma dotata di continuità. Quindi il percepire, fino ad allora considerato un processo passivo, veniva descritto come qualcosa di attivo.
Ciò significava che quello che prima era stato considerato un processo passivo - il percepire - veniva ad essere pensato come qualcosa di gran lunga più attivo. Intuì che non erano gli stimoli elementari ad essere colti bensì diventava significativo per chi stava percependo solo l’insieme. Da qui la legge gestaltica secondo la quale il tutto viene prima delle parti. Questo tutto può essere successivamente scomposto in parti, ma in questo caso queste parti diverrebbero nuove figure intere. La teoria continua dicendo che se la configurazione unitaria è scomposta in parti o frammentata o comunque deficitaria in qualche parte il soggetto tende a vedere un insieme unitario o ad agire con l’intento di completare ciò che manca e se non vi riesce sperimenta una sorta di frustrazione.
Wertheimer elencò una numerosissima serie di leggi sulla percezione gestaltica, la più importante delle quali è la legge della pregnanza:
quello che viene percepito contiene una forma organizzata che è la migliore possibile nella presente circostanza cioè risponde ad un principio di economia dell’organizzazione –massimo dell’informazione nella struttura più semplice-.

L'applicazione delle teorie della Gestalt al Web Design per la creazione di un sito più efficace e usabile a livello cognitivo


Conoscendo le leggi della Gestalt si possono utilizzare nel web design. Questo uso aiuta a rendere chiara la struttura e l’organizzazione delle pagine web in modo intuitivo, in un batter di ciglia.

Conoscendo questi principi è possibile sfruttarli anche per disporre i vari elementi che compongono una pagina web in modo da rendere chiara la struttura e l'organizzazione del proprio lavoro fin dalla prima occhiata.

Ecco alcune leggi e loro riflessi nel web design (per la verità nel graphic design in generale ma questa non è materia della nostra ricerca):

legge della vicinanza
all'interno di una stessa 'scena' gli elementi tra loro vicini vengono percepiti come un tutto.

uso nel webdesing:
possiamo avvicinare graficamente gli elementi che sono concettualmente correlati e allontanare quelli che non lo sono, fornendo una semplice chiave di lettura all'utente.

legge della similitudine
all'interno di una stessa 'scena' gli elementi tra loro simili per forma, colore e dimensione vengono percepiti come collegati.

uso nel webdesign:
la riutilizzazione di elementi, colori, simboli, icone che correlano una informazione all’altra aiuta a rendere accessibile e facilmente navigabile un sito; infatti si possono rafforzare legami tra parti separate di un documento a mezzo delle ripetizioni che evitano all'utente lo sforzo di comprendere le connessioni e lo fanno navigare in modo intuitivo.

legge della chiusura
linee e forme familiari vengono percepite come chiuse e complete, anche se graficamente non lo sono.

uso nel webdesign:
organizzare lo spazio secondo linee e rettangoli invisibili aiuta l’utente a capire la strutturazione della pagina, questo vale anche per gli allineamenti dei testi per esempio. Si può per lo stesso principio sfruttare uno spazio che in realtà non abbiamo, disegnando una parte della figura che vogliamo rendere e lasciando che sia la percezione dell’utente a comprenderne il resto.

legge figura-sfondo
le figure vengono percepite prima di tutto dal proprio contorno, il resto viene inteso come sfondo.

uso nel webdesign:
questa legge diventa nel design la legge del contrasto, infatti visto che le figure vengono distinte per il loro contorno, più forte sarà il contrasto con il loro sfondo più facilmente sarà identificabile una figura, maggiore sarà l’importanza che verrà data alla figura in questione.


fonti:
http://www.gestalt.it/
http://pro.html.it
http://www.idearium.org

Friday, January 13, 2006

diario di bordo, step 2

identità del sito
la mia tesi di laurea “google: come ha cambiato l’approccio e l’uso del www”
penso ad un layout semplice a fondo bianco (facilita la lettura, mi piace, sul bianco si può costruire di tutto)
i brand da usare saranno quelli di google, di Lxweb, quello che creerò per la tesi
google si porta appresso un’idea di colore che mi piace assecondare
marchi in alto compresi nella testa del sito
barra di navigazione principale a sx , barra di navigazione secondaria a dx
piede da usare per info di routine

IA discovery
definizione dell’utenza ed aspetti comunicativi
i professori in prima battuta ma poi –si spera- anche altri individui che potranno trovare interessante consultarla, ma indubbiamente i primi fruitori in questo momento mi interessano di più.
Anche se la grafica si permetterà delle divagazioni anche simpatiche il tono di scrittura sarà ovviamente serio quanto basta. La parte primaria potrà essere scritta in modo meno sintetico di quanto normalmente si concede ad un sito sia perché dovrà contenere la tesi sia perché per la navigazione veloce si userà la guida al sito. Visto che il target è fatto di persone dotate di una elevata cultura, che sicuramente conosce le problematiche di cui parlerò di certo sono avvantaggiata nella scrittura, si tratta inoltre di persone capaci di cercare e dotate della sana curiosità di chi è abituato a ricercare quindi non servirà ragionare ‘a prova di cretino’ come normalmente si fa quando un sito viene dato in pasto ad una molteplicità più variopinta.

gli obiettivi del sito
dimostrare che l’uso di google ha modificato i comportamenti degli utenti della rete, partendo dalle analisi sul medim di mcluan
rendere la cosa interessante


l’attività di benchmarking
mi devo andare a cercare un po’ di tesi, anche per vedere come gli altri hanno presentato loro stessi ed i loro lavori, non nutro grandi speranze di trovare qualcosa sul mio argomento in quanto ho già fatto un bel po’ di ricerche con risultati nulli.

IA analysis& architecture
inventario dei contenuti
breve storia di google
il funzionamento di google
osservazioni della mutazione del comportamento dei fruitori del net dovuto all’uso di google
fonti : chi ha già osservato simili mutamenti e ne ha scritto; autori, citazioni
mie deduzioni personali al riguardo

gerarchia
1. storia
1.1. storia
1.2. i numeri di google
2. funzionamento
2.1. aspetti tecnici del funzionamento
2.2. deontologia
2.3. la pubblicità e google
2.4. classificazione dei risultati
2.5. crawlers
2.6. page rank
3. osservazioni
osservazioni empiriche sul mutamento comportamentale
4. fonti
4.1. studiosi che hanno lavorato su questo argomento
4.1.1. loro deduzioni/pubblicazioni
5. deduzioni
5.1. incrocio tra le osservazioni empiriche e gli studi precedentemente svolti
5.2. mie personali deduzioni
6. credits&contatti
6.1. elenco di persone che hanno reso possibile questa tesi
6.2. contatti
7. bibliografia&sitografia
7.1. elenco di fonti bibliografiche
7.2. elenco di fonti web
8. content map
mappa dei contenuti
9. guida al sito
breve sguardo sul sito per sintesi, utile alla presentazione frontale della tesi

flussi informativi
i flussi informativi principali sono tre:
barra di navigazione primaria (punti da 1 a 5)
barra di navigazione secondaria (punti 6-9)
guida al sito
inoltre ovviamente tutti le citazioni linkeranno sia alla sezione fonti che a quella bibliografia e sitografia
content map (organizzata in ordine alfabetico) sarà un insieme di link dalla content verso il sito per agevolare chi stesse cercando qualcosa di particolare.

aspetti grafici
Come detto sopra layout basato sul bianco e colori vivi usati in contrasto. Le parti di puro testo con un font chiaro e leggibile blu o nero, alternanza di un font bastoncino con uno dotato di grazie. Grafica vettoriale e immagini bmp e pochissime (forse neanche quelle) fotografie.
Grafica con figure geometriche giocate più sui colori che sulle forme.

usabilità ed accessibilità
La cura per l’usabilità sarà posta nella semplicità di navigazione, nell’uso di colori e forme guida, nella omologazione del layout di tutte le sezioni del sito. Di grande aiuto per l’usabilità sarà la content map.Riguardo all’accessibilità il sito verrà sviluppato in area web safe (760x420), farò uso corretto degli attributi alt e title e anche di long description ove necessitassero, inoltre farò uso di tutti gli attributi delle tabelle che le rendono accessibili (e.g. summary, thead, tbody, tfoot ecc ecc). Saranno di ausilio i Css. I caratteri verranno utilizzati in base proporzionale.

Monday, January 02, 2006

Usability and Accessibility

Usabilità
Lo standard ISO definisce così l’usabilità: “la misura in cui un prodotto può essere usato da determinati utenti per raggiungere determinati obiettivi con efficacia, efficienza e soddisfazione in un determinato contesto d'uso”

Però data la giovane età del mezzo a cui ci riferiamo – il web – di fatto non esistono linee guida ben stabilite per creare siti usabili. Sicuramente c’è da distinguere l’usabilità dal buon web design che di per sé non fa di un sito un sito usabile. I siti necessitano di essere progettati perché siano usabili, l’opera di web design viene dopo nel processo di costruzione di un sito. In un sito usabile l’utente naviga bene pur non conoscendolo e trova tutte le informazioni che sta cercando senza dare particolari contributi personali per la comprensione di link e similari.Banalmente la barra di navigazione deve stare sempre al medesimo posto in tutte le pagine, lo stesso dicasi per tutti gli altri tasti funzionali. Le icone utilizzate (i.e. per la stampa, per cambiare pagina ecc ecc) saranno sempre le stesse, i colori di riferimento per ciascuna area del sito saranno anche loro sempre gli stessi. Si deve sviluppare un modello che poi si applica all’intero sito, ovviamente per sviluppare questo modello necessita una ampia riflessione sulle modalità d’uso del target ed è consigliabile una somministrazione in corso d’opera per potere apportare i giusti correttivi cammin facendo.

I padri dell’usabilità
jakob nielsen
donald norman
bruce tognazzini
jeff raskin, il papà del mac

Accessibilità
Il glossario delle Web Content Accessibility Guidelines del W3C definisce così un contenuto accessibile: “Un contenuto è accessibile quando può essere usato da qualcuno con una disabilità”.
I motivi per cui questa area è molto attenzionata al momento sono molteplici: morali, legali e anche ovviamente economici. Infatti se ci pensiamo bene i motori di ricerca sono i primi utenti non vedenti del web. Al riguardo ho trovato una cosa che mi piace citare, scritta da Kartsen M. Self –io l’ho trovata sul sito del w3c-:"The Kiss of the Spiderbot : Google is, for all intents, a blind user. A billionaire blind user with tens of millions of friends, all of whom hang on his every word. I suspect Google will have a stronger impact than [laws] in building accessible websites.". Mi pare renda bene il concetto.
Riguardo all’accessibilità in molti paesi del mondo inizia a nascere una normativa specifica. In genere sono regole a cui si devono attenere gli enti pubblici (o le web agency che lavorano per loro) nella creazione dei loro siti web. La norma più famosa al momento è quella degli States, la Section 508. In Italia c’è qualcosa di simile: Circolare 13 marzo 2001, n. 3/2001: “Linee guida per l'organizzazione, l'usabilità e l'accessibilità dei siti web delle pubbliche amministrazioni”.

I padri dell’accessibilità
david clark
andrew kirkpatrick
joe clark


Usabilità vs. Accessibilità
Creare un sito accessibile non necessariamente significa creare un sito usabile. Infatti quand’anche, per esempio, un sito sia corredato di tutti i testi alternativi necessari e siano stati immessi gli ordini di tabulazione ecc.; se, di partenza, l’impostazione del sito non lo rende usabile –cioè se gli utenti non riescono a trovare le cose che cercano o se la navigazione non è intuitiva- non lo sarà neppure avendo tutti i requisiti di accessibilità.
In sintesi le caratteristiche di usabilità ed accessibilità sono differenti e sono due ‘standard’ a cui ci si deve adeguare quando si progetta e costruisce un sito web; entrambi necessari nessuno dei due sufficiente.

L’attenzione dei webdesigner riguardo ai problemi di accessibilità
Chi fa siti ovviamente deve tenere conto di una serie di variabili che possono dipendere dagli utenti e che possono compromettere l’accessibilità ai siti.
Per citarne alcune:
- versioni diverse di browser
- settaggi diversi dei browser
- monitor a risoluzioni differenti
- velocità di connessione ad internet
- uso di user agent diversi dai browser tradizionali
- uso di devices diversi da un pc per la connessione ad internet

In tutti i casi sopra citati, ed in molti altri ancora, perché tutti gli utenti possano vedere nello ‘stesso’ modo un sito web chi lo progetta deve utilizzare alcuni accorgimenti.

L’annosissimo problema delle versioni diverse di browser è abbastanza al termine, infatti da quando tutti i produttori hanno aderito al web standards project i browser supportano tutti abbastanza bene gli standard dei vari linguaggi di markup e programmazione. Negli anni passati era veramente difficile che un sito che si vedeva bene in IE4 si vedesse altrettanto bene in Netscape 4. Ma questo per fortuna è passato. Soprattutto affidandosi ad Xhtml 1.0 transitional e facendo un corretto uso dei CSS (sia esterni che importati) si riesce a risolvere il problema della visualizzazione su browser diversi visto che i produttori hanno ormai deciso di conformasi appunto agli standard.

Il problema dei settaggi del browser (almeno per ciò che riguarda pulsanti, barre, caratteri) vanno abbastanza a braccetto. Infatti sono due variabili che influenzano la dimensione ‘fruibile’ del video. Il problema si risolve utilizzando quella che si chiama web safe area (la massima area disponibile su un browser, prima che venga aggiunta la scroll bar), che ovviamente va calcolata per ciascuna risoluzione video.
Ecco alcuni esempi:
risoluzione 640 per 480 safe area 600 per 300
risoluzione 800 per 600 safe area 760 per 420
risoluzione 1024 per 768 safe area 955 per 600
Oggi si progetta considerando la risoluzione 800 per 600 come standard inferiore.
Per ciò che riguarda i caratteri all’interno delle pagine web è importante definire sempre un font generico di riserva, nel caso in cui il font utilizzato non sia residente sul pc dell’utente; per ciò che riguarda la dimensione dei caratteri è consigliabile usare le unità em (1 em equivale all'altezza media di un carattere per un dato font), che essendo una unità di misura relativa consente all’utente di vedere in termini relativi le differenze di corpo tra i caratteri stabilite da chi ha scritto la pagina usando come base ciò che da lui è settato.
Riguardo alla velocità di connessione ad internet con la diffusione delle linee adsl a basso costo moltissimi riescono ad accedere ad internet ad una velocità accettabile, tuttavia esistono ancora utenti modem e moltissimi utenti gprs. Quindi bisogna tenere conto della pesantezza (in kb) delle pagine da downloadare; scrivendo un codice pulito certamente si fa molto tuttavia ove necessiti l’uso di immagini (per esempio il sito di un fotografo) alleggerire i siti non è sempre facile. Ci possono essere varie alternative come : dare una preview delle immagini e fare scaricare la versione a più alta definizione (o di dimensione maggiore) dall’utente secondo una sua precisa scelta oppure creare una versione light del sito.
Il problema dell’accessibilità dei siti consultati attraverso user agent diversi (i.e. screen reader, browser testuali, ma anche i crawlers dei motori di ricerca, ecc) o attraverso devices come palmari, telefoni cellulari di nuova generazione ecc, il discorso è più complesso. Innanzitutto i testi alternativi sono imperativi, è altrettanto importante usare i tag tipografici corretti (i.e. strong al posto di bold o emphatize al posto di italic) che possano consentire una lettura appropriata; si deve fare uso di long description per tutte quelle immagini che lo richiedono, bisogna prevedere l’ordine di tabulazione per accedere alle diverse parti delle pagine e per muoversi dentro le barre di navigazione. Ovviamente si deve parlare di layout con CSS puro o misto. Tutti questi ed altri accorgimenti permetteranno di navigare il sito anche in assenza di mouse, permetteranno ai reader di interpretare correttamente il testo e così pure ai browser testuali.

Come rendere accessibile una tabella: gli attributi summary, caption, col, colgroup, th, thead, tbody, tfoot

summary
lo scopo di questo attributo è fornire una descrizione completa della tabella (struttura e contenuto). Il contenuto di summary non viene riprodotto dai browser grafici infatti è destinata a user agent non visuali.

caption
è l’intestazione della tabella o se vogliamo una sua sintetica descrizione

th, thead, tbody, tfoot
sono tutti tag che consento di individuare gruppi di righe di una tabella (rowgroup). Vediamo come:
thead (table header) definisce una cella contenente le informazioni di intestazione, è la parte iniziale della tabella
th definisce le celle che stanno dentro al thead quindi dando informazioni su ciascuna riga e/o colonna della tabella (di default il contenuto di queste celle sarà grassetto e centrato). th dunque aggiunge un contenuto strutturale.
tfoot è il piede, cioè la fine della tabellam ma contrariamente a ciò che si potrebbe pensare non sta fisicamente alla fine della tabella, bensì prima di tbody di modo che il browser facendo il rendering del codice possa tenere conto della parte iniziale e finale della tabella.
tbody è ovviamente il corpo della tabella con il contenuto vero e proprio

colgroup, col
servono per la formattazione delle colonne, colgroup ci permette di formattare un certo numero di colonne insieme mentre useremo col –all’interno di colgroup- quando desideriamo attribuire più esplicitamente lo stile ad una colonna.

Definizione di browser
Differenze tra browser tradizionali, browser solo testo, screen-reader e altri web user agents.
Un web browser è un programma che consente la navigazione del www, esso interpreta il linguaggio di markup e lo visualizza sotto forma di ipertesto. Quando si parla di web browser si intendono i browser visuali. I più diffusi oggi sono: IE della Microsoft, Mozilla (in particolare nella sua variante Firefox), Netscape Navigator e Opera.

Browser solo testo
I browser testuali di solito lavorano sotto Dos o sotto consolle Linux, come si intende sono browser che leggono solo il testo, ci si sposta dentro le pagine con i tasti freccia, con invio e con il tab. Il più famoso browser testuale oggi è Lynx.

Screen reader
I lettori di schermo sono dei programmi –che normalmente si eseguono all’avvio del pc- che consentono agli utenti non vedenti o ipovedenti di avere il controllo del sistema operativo. Questi programmi trasformano in voce il testo che appare sullo schermo consentendo l’interattività. Il più famoso oggi é Jaws.

Altri user agent
possono essere i crawler (o spider) dei motori di ricerca, i bot, che comunque leggono le pagine web come un utente non vedente in quanto si tratta di programmi residenti su internet i quali si interfacciano con il resto del mondo del www leggendo i testi e di certo non vedendo le immagini. Di contro se si desidera che questi programmi non leggano i nostri siti o parti di essi è possibile controllarlo attraverso il “Robot Exclusion Standard” che non altro che un file residente sul sito che indicherà dove non è gradito l’accesso.

Palmari, telefoni cellulari di ultima generazione, ecc.
Questo tipo devices ha delle evidenti difficoltà di visualizzazione delle pagine web. I problemi sono svariati: le ridotte dimensioni dello schermo, il minore numero dei colori, la più bassa velocità di navigazione e sicuramente la minore potenza di calcolo.
Ovviamente hanno altri vantaggi come la tascabilità e di conseguenza l’enorme trasportabilità. In ogni caso sono molto utilizzati e quindi bisogna tenere conto anche delle esigenze di lettura di questi dispositivi (come illustrato in questa stessa ricerca al paragrafo web designer e accessibilità).

Utilità dei CSS per l’accessibilità
I fogli di stile ci vengono molto in aiuto per applicare a media specifici o a gruppi di media formattazioni specifiche ed adatte a loro. E’ possibile definire all’interno di un foglio di stile le categorie generiche di media a cui quel dato foglio di stile è applicabile, a parità di markup possiamo quindi rendere ‘leggibile’ il nostro sito a user agent diversi. Ciò permette agli interpreti di evitare di recuperare fogli di stile inappropriati o di leggere in modo inappropriato una pagina web.

fonti:
http://www.theusabilitycompany.com/
http://www.html.it/
http://www.section508.gov
http://www.governo.it/presidenza/web/
http://www.webaccessibile.org/
http://www.wikipedia.org/
http://www.fucinaweb.com/
http://www.freedomscientific.com/
http://www.webxtutti.it/
http://www.mediamente.biz/

Sunday, December 18, 2005

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