Diario di bordo

Ho deciso di fare il sito sul regista “Stanley Kubrick”. Sono sempre stato un grande appassionato dei suoi film e del suo modo di girarli. È uno dei più grandi, se non il più grande regista del secolo scorso e per questo ho deciso di parlare di lui e dei suoi film nel mio sito, unendo così l’utile al dilettevole.
Il mio sito è molto semplice e lineare, il che lo rende accessibile e di rapida comprensione e lettura per l’utente. Ho usato colori poco vistosi come il bianco e il blu, più qualche immagine significativa del regista e dei vari film, in quanto ho deciso che il sito deve essere poco pretenzioso dal punto di vista grafico e più incentrato sui contenuti e sulla facile fruizione di essi da parte degli utenti.
Il modello del sito, quindi la parte fissa, a cui ho dato il colore blu, è composto da un Header contenente un logo del sito, ovviamente pertinente all’argomento trattato, e il titolo, che mette in risalto il nome del regista. Sotto c’è una carrellata delle locandine dei suoi film e più in basso un testo scorrevole che descrive i contenuti del sito. sulla destra ho posizionato una colonna dove, in alto c’è la barra di navigazione con i link per le varie sezioni del sito e sempre all’interno della colonna, in basso, i link per altri siti correlati. In fondo al sito abbiamo il Footer dove ho inserito un’intestazione e tutto il resto della pagina sarà a disposizione dei contenuti, sarà cioè, la parte modificabile del sito a cui ho dato il colore bianco.
Anche per quanto riguarda il font ho utilizzato un tipo di scrittura semplice e di facile comprensione come “Verdana” per il contenuto, mentre “Segoe Media Center Semibold” per i link.
Il sito si divide in varie sezioni: La biografia, dove si parla della vita del regista; ovviamente, la filmografia, dove vi sono descritti tecnicamente tutti i suoi film più i miei commenti personali; i cortometraggi, che il regista fece all’inizio della sua carriera e quindi poco conosciuti; i vari premi vinti in tutta la sua carriera e le citazioni, cioè una raccolta delle sue frasi più famose e significative e dei commenti, di altri grandi personaggi, su i suoi film.
Per quanto riguarda l’accessibilità e l’usabilità ho dato un “title” e un “alt” a tutte le immagini e ai vari link del sito, ho usato dei colori gradevoli alla vista e ho impostato l’intero sito in maniera molto semplice in maniera tale da essere facilmente visitato dall’utente in tutte le sue parti.

I tag meta e scrivere per i motori di ricerca

Composizione di un tag meta

I Meta-tag sono di righe di codice Html da inserire nelle pagine Web. Servono a indicare al motore di ricerca alcune informazioni utili sui contenuti del sito e della singola pagina. Esistono numerose tipologie di meta tag, i più importanti, tuttavia, sono quelli relativi alla descrizione del sito (meta tag "description") e alle parole chiave che si desidera associare alla singola pagina (meta tag "keywords").
Oltre che fornire preziose informazioni all'utente i meta-tag sono anche usati dai motori di ricerca per indicizzare le pagine attraverso la specificazione di parole chiave che un motore di ricerca può usare per migliorare la qualità dei risultati di una ricerca. Una corretta composizione dei meta-tag permette, quindi, una indicizzazione molto più veloce dai motori di ricerca. I meta-tag si trovano all’interno del tag , non richiedono un tag di chiusura, sono composti da un nome e da un valore e hanno tre attributi principali che sono: HTTP-EQUIV, NAME, CONTENT.

• HTTP-EQUIV: Questo attributo può essere usato al posto dell'attributo name. I server HTTP usano questo attributo per raccogliere informazioni per le intestazioni dei messaggi HTTP di rispostale informazioni contenute in HTTP-EQUIV informano il browser che si tratta di valori di intestazione della connessione HTTP (HTTP Header).
• NAME: raccoglie informazioni ininfluenti per i browser o i robot, ma utili agli utenti per conoscere, ad esempio, l'autore del documento.
• CONTENT: determina il valore da attibuire alla proprietà che lo precede

Esistono diversi tipi di meta-tag:

DC.Title: Specifica il titolo al documento. A differenza del tag "Title" non attribuisce un nome alla finestra aperta e quindi non apparirà nel browser.

Description: Specifica una breve descrizione del sito. Questo riassunto dei contenuti del sito verrà utilizzato dai motori di ricerca per indiricizzare il sito.

keywords: In questo meta tag vanno inserite le principali parole chiave degli argomenti trattati dal sito separate una dall'altra con una virgola. E' indispensabile utilizzare solo le parole adatte e non superare i 1.000 caratteri.

Robots: Questo meta tag permette ai robots dei motori di ricerca di indicizzare o meno il documento. I valori sono:
index la pagina viene indicizzata.
noindex la pagina non viene indicizzata.
follow le pagine linkate al documento in questione vengono indicizzate.
nofollow le pagine linkate al documento in questione non vengono indicizzate.

Revisit-after: Invita il robot del motore di ricerca a ritornare ed indicizzare la pagina nel periodo impostato nell'attributo CONTENT.

Generator: Specifica l'editor utilizzato per creare il documento.

Copyright: Specifica chi è il detentore dei diritti d'autore dei contenuti pubblicati in quel documento.

Expires: Indica al browser quando il documento dovrà essere cancellato. La data va inserita nel formato Gmt, e quindi giorno, numero del mese, anno e ora. Il tutto in inglese.

Set-Cookie: Imposta un cookie con la data di scadenza (sempre in formato Gmt e in inglese).

Refresh: Aggiorna una pagina dopo i secondi stabiliti nell'attributo CONTENT.

Language: Indica la lingua usata nel documento. Nel caso di possibilità di scelta, si può usare: content="it, eng"

Author: Specifica l'autore materiale della pagina.

reply-to: Indica l'indirizzo email da utilizzare per contattare gli autori materiali della pagina.

Come funziona un motore di ricerca

I motori di ricerca utilizzano un'applicazione software detta spider (oppure robot, crawler, wanderer) che visiona costantemente le pagine presenti su Internet e ne indicizza il contenuto. Questa indicizzazione può avvenire su richiesta dell’utente oppure a sua insaputa. Essa consiste nel catalogare tutte le parole contenute nel testo di una certa pagina e nello stabilire, mediante appositi algoritmi detti algoritmi di ranking, l’importanza del vostro documento rispetto ad ogni singola parola che avete utilizzato. Periodicamente vengono anche eliminate dalla classifica tutte le parole che appartengono ad una lista nera compilata dal motore stesso, detta lista delle STOP-WORDS, che contiene le parole che non consentono di effettuare ricerche significative, come le congiunzioni, gli avverbi, i pronomi e i gruppi di lettere che si ritrovano un po’ in tutti i documenti.

Come aggiungere una pagina per essere indicizzato da un motore di ricerca

Ci sono diversi modi per aggiungere una pagina ad un motore di ricerca. Andare nella Home Page del motore e cercare una voce del tipo Add Url, oppure Aggiungi un sito, per poi accedere ad un modulo che una volta compilato inserisce l'indirizzo tra quelli che saranno visitati dalle procedure automatiche del motore.
Alcuni motori dispongono di una struttura a directory (o catalogo), come ad esempio Yahoo, oppure Virgilio, e in questi casi l'inserimento, dopo aver compilato l'apposito modulo on line, non avviene automaticamente, ma passa attraverso una catalogazione manuale da parte di operatori, che visitando il sito controllano se il contenuto è attinente con la categoria desiderata.

Punti cruciali e strategie per puntare alla testa dei risultati di un motore di ricerca sono:

- Definire le giuste parole chiave: Se si vuole che gli utenti trovino un determinato sito, le pagine di cui si compone devono contenere le parole che potrebbero essere oggetto di ricerca da parte degli utenti. I motori di ricerca infatti, classificano i siti soprattutto in base al loro contenuto, e forniscono i risultati delle ricerche dando priorità a quei siti nei quali le parole richieste risultano più frequenti e più in evidenza rispetto al resto del documento.
La prima operazione da compiere quindi, è quella di mettersi nei panni dell'utente e pensare a quali termini potrebbe usare nei motori di ricerca per cercare siti Web come il vostro.
- Inserire le keywords nel sito: l'inserimento delle keyword nelle pagine Web è un'operazione piuttosto delicata. In base a come vengono immesse, il sito verrà classificato dai motori di ricerca. La prima regola è quella di ripetere più volte le parole chiave nell'ambito del codice HTML. Ciò consente di rendere quei termini predominanti rispetto al resto del documento e di essere rilevanti rispetto ad altri siti ove quelle parole sono contenute meno volte.
- Le keyword più significative vanno inserite sia nella forma minuscola, sia con la sola iniziale maiuscola o tutto in maiuscolo. Così si hanno maggiori possibilità di incrociare la ricerca dell'utente con le keyword definite.
- Inserire delle keywords che attirino gli utenti: ci sono una serie di parole che funzionano quasi in ogni situazione come, ad esempio, “gratis”, “conveniente”, “prezzi competitivi”, “consegna garantita”, in quanto l'utente non sempre parte da parole che descrivono ciò che sta cercando, ma va dritto ai vantaggi che conta di ottenere, o punta su caratteristiche specifiche.


Sitografia:

- http://tutorialweb.org/tutorialweb-metatag.html
- http://www.risorse.net/html/metatags.asp
- http://www.motoridiricerca.it/intesta.htm

Le teorie della Gestalt e Cognitive Web Design

La teoria della Gestalt e la percezione

La teoria della Gestalt è una filosofia di pensiero che nasce in Germania (fondata da Max Wertheimer) alla fine del diciannovesimo sec. e si prolunga fino agli inizi del ventesimo sec. I suoi sostenitori affermarono che la percezione di ciò che ci circonda non è la semplice somma di elementi e sensazioni primarie, bensì un'unità strutturata di esse. La teoria della Gestalt mette l'accento sulla tendenza degli insiemi percettivi o delle rappresentazioni del pensiero a presentarsi al soggetto sotto forma di unità coerenti. Tali unità si strutturano spontaneamente nel campo di esperienza del soggetto ogni volta che gli elementi di un insieme presentano determinate caratteristiche, identificate dagli psicologi della Gestalt come leggi dell'organizzazione della forma. Le leggi principali sono:

- Legge della vicinanza: per la quale quanto minore è la distanza, nello spazio e nel tempo, che separa gli oggetti di un insieme, tanto più grande sarà la tendenza a percepire quegli oggetti come appartenenti a un'unità
- Legge della similarità: per cui all'interno di un insieme costituito da più elementi, si manifesterà la tendenza a raggruppare gli elementi che sono maggiormente simili tra loro.
- Legge del destino comune: che afferma la tendenza a percepire come appartenenti ad un unico oggetto le cose che si muovono insieme, allo stesso tempo e nella stessa direzione.
- Legge della direzione: se un modello continua nella stessa direzione di un altro, i due modelli verranno percepiti come appartenenti alla stessa unità.
- Legge della forma chiusa: per la quale si tende a percepire come appartenenti a un'unità coerente gli oggetti disposti secondo figure chiuse, regolari, simmetriche.
La percezione consiste nell’associare un significato agli stimoli provenienti dagli organi di senso e attribuire a tali stimoli proprietà fisiche, come nitidezza ad un’immagine oppure chiarezza ad un suono.

Applicazioni delle teorie della gestalt ai Gestalt al web design

Alcuni principi della Gestalt possono essere molto utili nella progettazione di un sito allo scopo di diminuire le ambiguità.
La legge della vicinanza, per esempio, afferma che è più probabile che vengano percepiti come facenti parte di uno stesso gruppo o configurazione gli elementi che sono spazialmente vicini. Questo principio può essere utilizzato per rendere più immediata la percezione del layout della pagina. Se le informazioni sono ammassate senza alcuna separazione né ordine, l'utente si trova nella spiacevole condizione di non sapere da dove iniziare, tutto appare della medesima importanza e può sembrare che le informazioni siano tutte dello stesso tipo.
Anche il principio della somiglianza ci fornisce una regola che può essere utile all'usabilità. Poiché, a parità di altre caratteristiche, gli elementi più simili si raggruppano insieme, in un sito è possibile raggruppare visivamente le informazioni riguardanti lo stesso argomento semplicemente contrassegnandole con lo stesso colore o simbolo.

Sitografia:

- www.ildiogene.it/EncyPages/Ency=gestaltpsicologia.html
- grafica.html.it/articoli/leggi/300/i-principi-della-gestalt-e-limpaginazione-di-una-p
- http://www.psicolinea.it/t_t/gestalt_therapy.htm

Usability e Accessibility

Accessibility

Per Acessibility si indica la capacità di un sito web di essere acceduto efficacemente (alla sua interfaccia e al suo contenuto) da utenti diversi in differenti contesti. Rendere un sito web accessibile significa permettere l'accesso all'informazione contenuta nel sito anche a persone con disabilità fisiche di diverso tipo e a chi dispone di strumenti hardware e software limitati rimuovendo ostacoli spesso invisibili agli occhi e al mouse degli utenti normodotati. Gli utenti non vedenti avranno problemi con la comprensione delle immagini del sito; gli ipovedenti con caratteri troppo piccoli, i daltonici con alcune combinazioni di colori; gli utenti dotati di vecchi computer/software problemi con alcune tecnologie non standard (Java, Flash, etc.). Il Parlamento ha definitivamente approvato all'unanimità la "Legge Stanca" che consente ai disabili l'accessibilità alle nuove tecnologie digitali ed informatiche.

Usability

L'usabilità rappresenta il grado di facilità con cui un'utente può interagire con un sistema, in questo caso con il sistema-sito Web.
L’Usability è la disciplina che si frappone tra l'utente e il sito stesso. Applicando principi di usabilità, il web designer cerca di eliminare tutti quei problemi che l'utente può incontrare interagendo con il sito migliorando quindi l'esperienza di chi naviga fornendogli un ambiente nel quale può muoversi a suo agio, trovando senza sforzo ciò che gli serve. Quindi l'usabilità è un insieme di chiarezza, qualità estetiche, capacità comunicativa e interattiva, velocità della fruizione e della consultazione.

ci sono svariati motivi per cui bisogna rendere un sito accessibile e usabile:

• Accessi Maggiori. Una presenza web accessibile è un buon modo per farsi raggiungere dal più alto numero di utenti possibile, ed è quindi certamente poco saggio escludere a priori il 5%, 10% o più di visitatori e quindi, nel caso di attività commerciali, potenziali clienti.
• Velocità di aggiornamento del sito. In fase di manutenzione lo sforzo precedentemente profuso nella realizzazione di un sito accessbile verrà ampiamente ripagato dalla velocità e facilità nell'apportare modifiche anche non indifferenti al sito.
• Lo dice la Legge con la”legge stanca”.
• Più visibilità sui motori di ricerca. Seguire le regole di accessibilità porta, infatti, anche diversi vantaggi dal punto di vista della visibilità del sito stesso.
• Essere raggiungibili, sempre ed ovunque. Accessibilità vuol dire anche creare siti che siano compatibili, non solo nel passato ma anche in futuro, con i vari Browser, screen reader ed altri strumenti di navigazione, evitando così allo sviluppatore di creare diverse soluzioni per ogni particolare User Agent e nella certezza che i contenuti creati siano sempre fruibili.
• Creare pagine più leggere. Uno dei più grossi mali del Web sino ad oggi è l'eccessivo peso delle pagine considerando che molti utenti in Italia ancora oggi navigano con modem a 56 Kb/s o addirittura con prestazioni inferiori. Creare pagine di tale mole rischia perciò di mortificare l’esperienza di navigazione del visitatore o più semplicemente, comporta che il potenziale visitatore scelga di non attendere ed andare altrove, a prescindere dalla bontà della realizzazione e dei contenuti della pagina.

Jakob Nielsen è sicuramente il nome più ricorrente tra gli studiosi di usability. La sua competenza è universalmente riconosciuta e le sue tesi sono spesso fonte di discussione per la Web community mondiale. Attraverso l'analisi fattoriale di 249 errori comuni emersi in vari casi osservati e analizzati, Nielsen arriva a stilare 10 norme o principi generali per l’usability:

1. informare costantemente gli utenti sulle azioni che stanno svolgendo (visibilità dello stato del sistema)
2. utilizzare il più possibile il linguaggio comune e quello di riferimento degli utenti (corrispondenza tra sistema e mondo reale)
3. fare in modo che l'utente abbia sempre il controllo sul contenuto informativo del sito, potendosi muovere liberamente e capendo con chiarezza quali e dove sono i link di collegamento (controllo e libertà per gli utenti)
4. mantenere aspetto ed elementi grafici (e struttura generale) coerenti in tutte le pagine, in modo da rassicurare l'utente (consistenza e uniformità)
5. evitare condizioni per cui l'utente possa commettere degli errori (in tutte le fasi d'interazione, dalla registrazione ai form agli acquisti online) o essere ingannato (dai link) e dargli sempre la possibilità di tornare all'home page o uscire dal sistema (prevenire gli errori)
6. utilizzare struttura del sito e layout delle pagine facili e schematici in modo che gli utenti possano trovare immediatamente i percorsi interni desiderati (indicare piuttosto che far scoprire)
7. creare percorsi di navigazione differenziati, che possano adattarsi al livello di competenza ed esperienza degli utenti; al tempo stesso, assicurarsi che il sito garantisca risposte rapide agli imput degli utenti - tempo di risposta entro i 10 secondi (flessibilità ed efficenza)
8. mettere sempre in primo piano il contenuto informativo del sito, evitando inutili orpelli decorativi ed elementi grafici troppo marcati e per questo disturbanti (importanza del contenuto e semplicità grafica)
9. a ogni eventuale errore dell'utente deve sempre corrispondere un'informazione pronta e precisa, capace di aiutarlo a ripristinare una situazione ottimale di navigazione (informare sugli errori e fornire elementi di riparazione)
10. facilitare sempre l'utente nella navigazione e nella fruizione di ogni parte del sito, dedicandogli spiegazioni e aiuti di vario genere (aiuto e supporto documentato).


Come rendere accessibile una tabella

Normalmente le tabelle vengono utilizzate o per presentare dei dati o, in maniera inappropriata, per il controllo del layout di pagina. Ciò comporta grosse difficoltà nella lettura del testo da parte di chi utilizza screen readers perché il testo gli viene letto in maniera sequenziale così come si presenta nel codice HTML e in assenza di informazioni aggiuntive questi utenti non sapranno come raggiungere ciò che cercano. Inoltre, usare molto codice solo per il layout porta ad aumentare inutilmente il peso della pagina.
Per rendere un pò più accessibili le pagine che fanno uso di tabelle è necessario utilizzare alcuni accorgimenti come:

• Summary. E’ un attributo del tag table che consente di indicare una breve descrizione della tabella che verrà letta dalla voce dello screen reader ma che non verrà visualizzato; può essere utilizzato per fornire maggiori dettagli sul contenuto della tabella stessa;
• Col. specifica che l’intestazione riguarda la colonna sottostante;
• Colgroup. che associa l’intestazione a gruppi di righe (thead, tbody, tfoot) e a gruppi di colonne (Col);
• Th. (l'acronimo sta per "table header", cioè "intestazione di tabella"): questo elemento definisce una cella contenente informazioni di intestazione. L'uso di TH aggiunge un'informazione strutturale in più: dice a qualsiasi programma utente, anche non visuale, che il suo contenuto è un'intestazione, un titolo;

La tabella può essere suddivisa in più sezioni logiche:
• CAPTION, che identifica il titolo della tabella;
• THEAD e TFOOT, rispettivamente le parti di testata e di pie’ di pagina;
• TBODY che contiene il corpo della stessa.

Definizione di browser

Un web browser (comunemente chiamato navigatore) è un programma in grado di interpretare il codice HTML e XHTML e visualizzarlo in forma di ipertesto. Il browser visualizza le pagine Web in modalità grafica. Questo significa che le varie sezioni del testo possono avere stili, colori e posizioni diverse, ed essere combinate con immagini e animazioni.
Esistono vari tipi di Browser:

• Browser Tradizionali: I browser tradizionali più diffusi sono Internet Explorer, Mozilla Firefox, Opera e Netscape Navigator. Sono i normali browser utilizzati tramite i computer che permettono di navigare in internet visualizzando testi, immagini animate e non, animazioni java, ecc. tramite un’interfaccia grafica.
• Browser solo testo: i browser a interfaccia testuale leggono come tutti gli altri il codice html, ma forniscono all'utente una pagina priva di elementi grafici, quali immagini, animazioni e così via. Fra questi spiccano il Linx e Lynx.
• Screen-reader: Uno screen reader (letteralmente lettore dello schermo) è un'applicazione software che identifica ed interpreta il testo mostrato sullo schermo di un computer, presentandolo ad un utente affetto da handicap visivo tramite sintesi vocale o attraverso un display Braille.
• Palmari e cellulari: i browser dei palmari e dei cellulari hanno evidenti difficoltà di visualizzazione delle "normali" pagine web; la navigazione in un sito si scontra principalmente con le ridotte dimensioni dello schermo, il minor numero di colori, la minor potenza di calcolo e di velocità di navigazione.

Utilità dei CSS per l’accessibilità

L'uso dei CSS può contribuire a rendere l'interazione più ricca e il sito più usabile in diversi modi: rendendo l'HTML più leggero, e dunque facendolo caricare più velocemente, migliorando l'interazione attraverso l'ampliamento della zona sensibile dei link, dando la possibilità di ingrandire il testo e di modificare le impostazioni anche del design senza ricorrere a Javascript, eliminando la necessità di una versione stampabile separata (l'utente può stampare direttamente dal browser), migliorando la coerenza visiva delle pagine.

Sitografia:

- http://www.studiocappello.it/Lo_Studio/Web_Usability/web_usability.html
- http://www.flashmotus.it/usability.htm
- http://www.shinynews.it/usability/0205-norme.shtml
- http://www.i-dome.com/docs/pagina.phtml?explode_tree=09.110
- http://it.wikipedia.org/wiki/Browser