Diario di bordo

Target

Il sito che voglio realizzare è per l'A.ge., ovvero "Associazione genitori".
Questa associazione negli ultimi anni si è andata diffondendo sempre più perché racchiude un target veramente molto ampio: i genitori.
Naturalmente non ne fanno parte solo i genitori, possono farne parte anche gli insegnanti e tutti coloro che sono interessati a migliorare i rapporti scuola-famiglia che aderiscono allo Statuto.

Accessibility & Usability

Per rendere accessibile e usabile il mio sito userò i fogli di stile CSS e inserirò gli attributi Alt e Title ad ogni immagine; inoltre controllerò che il mio sito sia visibile in diversi tipi di browser.
I link della barra di navigazione sono ben visibili e suddivisi con ordine: ogni link porta ad una pagina diversa, in modo da non essere obbligati a seguire tutto il percorso per leggere la pagina interessata.
Dall’homepage si può arrivare a tutte le pagine del sito con un clic e da lì ritornare all’homepage, senza perdersi nell’universo dei comandi "avanti" e "indietro", così da facilitare la navigazione agli utenti che intendono visitare il mio sito in modo intuibile e scorrevole.

Information Architecture

La struttura del mio sito sarà costante, ovvero applicherò lo stesso stile a tutte le pagine in modo da non affaticare la vista degli utenti, rendendo il sito molto più scorrevole.
Il content sarà fisso al centro e la barra di navigazione a sinistra.
In qualunque pagina si trovi l’utente saprà che il testo da leggere (il content) è al centro.
I link avranno un effetto di rollover, ovvero cambieranno colore al passaggio del mouse.
Il logo è formato dall’acronimo dell’associazione: "A" e "ge".

ISO, Unicode e UTF-8

ISO (International Organization for Standardization - Organizzazione Internazionale per le Standardizzazioni) è un organismo internazionale per la definizione degli standard fondato nel 1946, produce standard industriali e commerciali a livello mondiale.
Le norme ISO vengono recepite e diffuse in Italia dall'ente italiano UNI (Ente Nazionale Italiano di Unificazione).
Le norme della serie ISO 9000 sono state prodotte per definire i requisiti internazionali per i sistemi di gestione per la qualità.
Obiettivo delle norme ISO è proporre alternative al fine di abbattere le berriere architettoniche virtuali che potrebbero escludere dall'uso alcune tipologie di utenze, ma non è d'obbligo osservarle.

UNICODE e UTF-8

Lo Unicode Consortium è un consorzio senza fini di lucro, istituito per promuovere l'uso dello standard Unicode.
Unicode è un sistema di codifica che assegna un numero univoco ad ogni carattere, indipendentemente dalla lingua, applicazione, piattaforma.
Il sistema Unicode si basa sulla codifica ASCII e in più codifica i caratteri usati in quasi tutte le lingue vive e alcune lingue morte, oltre ai simboli matematici, chimici, ideogrammi e alfabebeto Braille; da tutto questo si deduce quanto Unicode sui siti web abbatta i costi di gestione, in quanto una sola versione di un software o di un sito web diviene sfruttabile con piattaforme, lingue e applicazioni diverse.
L'Unicode viene supportato dai moderni standard della programmazione e del markup come XML, WML, Java, JavaScript, LDAP, COBRA 3.0 e da vari sistemi operativi.
Lo scopo di Unicode è scrivere documenti leggibili in tutti i Paesi creando una raccolta dei caratteri del mondo ai fini della standardizzazione.
Encoding è la regola matematica che permette di calcolare un codice corrispondente ad ogni carattere.
UTF-8 (Unicode Transormation Format, 8 bit) è una codifica dei caratteri Unicode.
UTF-8 usa gruppi di byte per rappresentare i caratteri Unicode, molto diffuso per il trasferimento tramite sistemi di posta elettronica a 8-bit.

Sitografia
1) www.azpoint.net/manuali/internet
2) http://it.wikipedia.org/wiki/ISO
3) http://it.wikipedia.org/wiki/Unicode
4) http://it.wikipedia.org/wiki/UTF-8
5) http://www.unicode.org/standard/translations/italian.html

Teoria della Gestalt

Gli studi sulla Teoria della Gestalt si sviluppano tra la fine dell' '800 e gli inizi del '900 in Germania.
I primi studiosi a formulare tale teoria furono il filosofo cecoslovacco Christian Von Ehrenfels, Max Wertheimer, Wolfgang Kohler, Kurt Koffka e Kurt Lewin.
La Teoria della Gestalt nasce dal tentativo di comprendere il formularsi di strutture ordinate nella realtà psichica e, primo fra tutti, Wertheimer capì che sono le configurazioni unitarie e non gli stimoli elementari a colpire l'organismo.
Si pose il problema di come uno stesso stimolo venisse percepito in modo diverso a seconda che si focalizzi una parte o un'altra come contorno della figura, l'esempio più classico è la famosa figura gestaltica dei due profili o del vaso, a seconda del punto focalizzato si interpreterà o l'uno o l'altro come sfondo.
Le illusioni ottiche sono alterazioni della percezione visiva, causate dal modo in cui i nostri occhi interpretano le immagini che osserviamo.
Wertheimer riuscì ad individuare una serie di leggi sulla percezione degli stimoli esterni; la legge più importante è la legge della pregnanza, ovvero ciò che viene percepito contiene una forma organizzata secondo il principio dell'organizzazione.
Tra le altre leggi ricordiamo:

1. Legge della vicinanza: minore è la distanza di tempo e di spazio che separa gli oggetti di un insieme, maggiore sarà la tendenza ad associare quegli oggetti come appartenenti ad un sistema unitario;
2. Legge della similarità: maggiore sarà la somiglianza tra gli elementi di un sistema più si tenderà a raggrupparli come appartenenti ad un sistema unitario;
3. Legge del destino comune: gli elementi che si muovono allo stesso tempo verso la stessa direzione si tenderà a percepirli come unico oggetto;
4. Legge della direzione: se un modello si muove nella stessa direzione di un altro, entrambi saranno percepiti come appartenenti alla stessa unità;
5. Legge della forma chiusa: gli oggetti disposti secondo figure chiuse, regolari, simmetriche, anche se non lo sono graficamente, verranno percepiti come appartenenti ad una unità coerente;
6. Legge della figura-sfondo: le figure vengono percepite prima dal contorno che viene percepito come sfondo;
7. Legge dell'esperienza passata: agevola il riconoscimento degli oggetti familiari.

Le leggi più importanti per il web sono le leggi della somiglianza, della vicinanza e della chiusura; infatti raggruppando gli elementi con funzioni simili in un unico blocco percettivo si migliora l'usabilità del sito, diminuendo lo sforzo di apprendimento e di approccio dell'utente perchè aiutato dal layout in modo da diminuire le ambiguità.

La Percezione

La percezione è una complessa interpretazione della realtà; è quello stimolo che ci fa associare un significato agli stimoli esterni provenienti dagli organi di senso. Alcuni esempi di ambiguità percettive possono essere:

1. I triangoli di Kanizsa: le tre torte nere, in base alla loro disposizione e forma creano l'illusione di un triangolo bianco con contorni anomali;
2. Il cubo: fissandolo a lungo appare a volte concavo e a volte convesso;
3. I profili di Rubin: profili umani o vasi.

L'interazione fra utente e sito web, da un punto di vista cognitivo, avviene attraverso la vista e più raramente l'udito. Quando l'utente affronta una situazione nuova cerca sempre degli appigli familiari e si utilizzano dei modelli mentali già riscontrati in passato.
Un sito poco coerente comporta scelte che devono essre integrate nel modello mentale, il quale si suddivide in consistenza interna e consistenza esterna.
La consistenza interna riguarda il rapporto fra le pagine di un singolo sito; la consistenza esterna è il rapporto tra un sito e gli standard del web.

Più la consistenza esterna e interna è coerente più il nostro sito sarà usabile.



Sitografia:

1. www.ildiogene.it
2. www.gestalt.it
3. http://digilander.libero.it/IntelligenzaEmotiva/percezione.htm
4. http://grafica.html.it

Usability and Accessibility.

La normativa ISO 9241 del 1993 definisce l'usabilità "il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso".
L'usabilità è la proprietà che rende un sito web facile da navigare.
I principali attributi dell'usabilità definiti nel Sun Usability Lab sono:

1. utilità;
2. facilità di apprendimento;
3. efficienza;
4. facilità di ricordo;
5. quantità di errori;
6. soddisfazione.

Per rendere un sito web usabile è bene seguire dei piccoli accorgimenti durante la sua creazione:

• controllare la grammatica;
• non scrivere periodi troppo lunghi perchè affaticano gli occhi;
• non scrivere il testo centrato ma allineato a sinistra per rendere la lettura più veloce;
• usare il grassetto solo per le parole chiave, ma con parsimonia;
• non sottolineare le parole perchè potrebbero essere scambiati per link;
• non usare colori fantasiosi per il testo perchè "vibrano" e non rendono bene il contrasto come il nero sul bianco;
• non usare modi di dire regionali perchè il sito è destinato a qualsiasi utente e quindi deve essere comprensibile a tutti;
• scrivere preferibilmente con il carattere verdana;
• tenere aggiornata la data di pubblicazione;
• non usare gif animate perchè distraggono l'attenzione dal testo;
• evitare sfondi psichedelici o sottofondi musicali fastidiosi;
• quando si deve scrivere una lista di frasi è bene usare, come in questo caso, l'elenco puntato.

L'usabilità è intesa come buona organizzazione dei contenuti e della navigazione; l'accessibilità ha l'obiettivo di rendere accessibile e fruibile il contenuto dei siti a tutti gli utenti, siano essi disabili o con dotazioni tecnologiche ristrette o con software non aggiornati.
Il rapporto tra l'usabilità e l'accessibilità è di inclusione, cioè un sito per essere accessibile deve essere usabile.

Per essere sicuri di creare un sito web usabile basta seguire le massime di Grice:

1. massima della quantità: scrivi quanto basta per dare l'informazione;
2. massima della qualità: scrivi ciò di cui hai le prove;
3. massima della relazione: sii pertinente;
4. massima della modalità: sii chiaro.

Il modo migliore per attirare l'attenzione verso un determinato sito non è scrivere un titolo che catturi l'attenzione, ma un titolo che riassuma il contenuto della pagina; se l'utente è interessato a quel dato argomento continuerà a leggere; bisogna quindi mettere i concetti più importanti in cima e man mano scendere nei dettagli: questo tipo di scrittura si chiama a "piramide rovesciata".
Nel web bisogna essere concisi e chiari perchè se un utente incontra una pagina lenta nel caricamento o poco chiara nel contenuto passa subito avanti alla ricerca di un altro sito dimenticandosi del nostro e di sicuro la prossima volta non ci ritornerà.
Le differenze tra l'accessibilità e l'usabilità risiedono nella metodica, nel target finale, nella natura del progetto web e nei test.
Il WAI (Web Accissibility Initiative) è un organo interno al W3C che ha stabilito delle linee guida con l'obiettivo di fornire delle direttive affinchè il sito sia sviluppato in modo accessibile e visibile ad un numero sempre più vasto di utenti.
Le linee guida più utili sono le WCAG (Web Content Accessibility Guidelines).

PRIORITA' 1: riguarda una serie di norme e di regole che devono essere rispettate per rendere le informazioni accessibili da parte di tutti gli utenti; riguarda la compatibilità con i vari browser da Netscape, Mozilla ed Explorer ai browser speciali usati dai disabili, come gli screen readers per i non vedenti.
PRIORITA' 2: riguarda una serie di norme e di regole che dovrebbero essere soddisfatte, altrimenti alcuni gruppi di utenti non potrebbero accedere alle informazioni.
PRIORITA' 3: riguarda una serie di norme e di regole che potrebbero essere soddisfatte per rendere l'accesso alle informazioni il più vasto possibile.

Come rendere accessibile una tabella.

Una tabella in html può essere "letta" in vari modi: o basandosi sulla interpretazione del codice, ad esempio dai browser testuali come Lynx; o basandosi sulla rilettura dello schermo, ad esempio dagli screen reader.

Il problema sorge quando si è in presenza di divisioni strutturali più complesse, in questo caso si ricorrerà ad un sommario, ovvero l'attributo "summary" dell'elemento "Table", cioè una descrizione più estesa dei contenuti della tabella; in presenza di altre divisioni strutturali oltre a quelle in righe e in colonne si useranno altri elementi:

• CAPTION: didascalia che fornisce una breve descrizione degli scopi della tabella; ogni table ne può contenere solo uno;
• THEAD: le righe della tabella sono raggruppate nella testa;
• TFOOT: le righe della tabella sono raggruppate nel piede;
• TBODY: le righe della tabella sono raggruppate nel corpo;
• COL: consente di condividere gli attributi con varie colonne senza raggruppamenti strutturali; è un elemento vuoto e serve da supporto per gli attributi;
• COLGROUP: crea un esplicito gruppo di colonne; struttura contemporaneamente le colonne del gruppo;
• TH: contiene informazioni di intestazione;
• TD: contiene informazioni di dati.

Definizione di browser.

Il primo browser internazionale fu Mosaic, sviluppato da NCSA, seguito poi da Netscape Navigator.
Attualmente il browser più diffuso è Internet Explorer prodotto dalla Microsoft.
Altri browser diffusi sono Mozilla, Opera, Netscape navigator, Safari e W3M (un browser testuale).
Il termine browser significa "sfogliatore di documenti web" ed è un programma in grado di interpretare il codice html e di trasformarlo in ipertesto.

Gli User Agent sono dei software destinati all'utente per l'accesso al web.
Tra gli user agent ci sono:

• browser html;
• browser testuali;
• browser vocali;
• browser comandabili col movimento dell'occhio;
• browser per cellulari;
• browser per palmari;
• screen reader;
• browser braille per i non vedenti.

In base al media cambiano le opportunità di visualizzazione dei fogli di stile: schermo, carta, palmare, dispositivo braille.
I fogli di stile riconoscono diversi tipi di media, tra cui:

1. all: tutti i dispositivi;
2. aural: sintetizzatori vocali;
3. braille: dispositivi a lettura tattile;
4. embossed: stampanti braille;
5. handheld: dispositivi palmari;
6. projection: proiettori per presentazioni;
7. screen: lo schermo di un pc;
8. tty: dispositivi con caratteri a larghezza fissa;
9. tv: televisori.

Utilità dei CSS per l'accessibilità.

L'attributo media serve per impostare un foglio di stile per ogni tipo di supporto.
Adattare uno stile unico per tutti i tipi di browser è impossibile, bisognerà quindi creare dei fogli di stile appositi.
Si possono, ad esempio, impostare due stili alternativi lasciando la possibilità di scelta all'utente su quale dei due visualizzare in base al browser che sta utilizzando guadagnando in termini di accessibilità.


Sitografia:

1. http://webdesign.html.it/guide
2. www.usabile.it
3. www.sequency.it/accessibilita/
4. www.ifac.cnr.it/smid/accesso/accesso.htm
5. www.liberliber.it/biblioteca
6. www.wikipedia.org/wiki/Browser
7. http://css.html.it/guide/

I colori e i formati immagini per il web.

Il sistema esadecimale.

La parola esadecimale è composta da una parte di derivazione greca "exi" (sei) e una di derivazione latina "decimale" (per dieci).

Il sistema numerico esadecimale è in base 16, cioè utilizza 16 simboli: i numeri da 0 a 9 e le lettere da A a F.

L'utilizzo del sistema esadecimale è utile quando si ragiona con la rappresentazione interna dei numeri nella memoria del computer.

Per fare un esempio: un byte si può rappresentare con 8 cifre binarie o con due sole cifre esadecimali, e se si pensa alle grandi operazioni e combinazioni di numeri che avvengono all'interno del computer, il sistema esadecimale è senza dubbio quello "più economico" in termini di spazio.

RGB,codifica con il sistema esadecimale e web-safe color.

RGB (acronimo di Red Green Blue) è un modello di colori additivo basato sui 3 colori primari: l'unione dei 3 colori dà il bianco, combinati a coppie dà il Ciano, il Magenta e il Giallo (CMYK).

Per esprimere i colori e renderli univoci e sicuri per il web, ovvero "web-safe", ad ognuno è stato dato un nome corrispondente in esadecimale, in modo da renderli compatibili con qualsiasi user agent o browser.

Un esempio di colori in esadecimale:

• rosso: #ff0000;
• verde: #00ff00;
• blu: #0000ff;
• bianco: #ffffff;
• giallo: #ffff00;
• nero: #000000;
• arancione: #ffa500;
• argento: #c0c0c0;
• blu notte: #003366.

I colori si possono combinare a piacimento, è importante ricordare che la somma dei colori usati deve dare il grigio, per essere piacevole alla vista.

Differenze tra gif, png, jpeg, bmp.

Il formato GIF (Graphics Interchange Format) è il formato più utilizzato nel web.

Con le gif possiamo costruire immagini:

• trasparenti;
• animate;
• interlacciate.

Le gif trasparenti sono quelle immagini che consentono di costruire un disegno circolare colorato con base trasparente, poichè il risultato di una immagine deve essere sempre un rettangolo o un quadrato, teoricamente non potremmo disegnare un cerchio.

Le gif animate sono quelle immagini che al proprio interno contengono altre immagini che vengono proiettate rapidamente in sequenza in modo da farle sembrare in movimento.

Le gif interlacciate sono le immagini che vengono visualizzate a poco a poco, cioè si vanno definendo durante il caricamento dell'immagine stessa rendendola sempre più chiara.

Le immagini gif servono per costruire un'icona, un logo, una piccola immagine o i pulsanti d'azione; per una animazione si utilizza la gif animata.

PNG (Portable Network Graphics) è un nuovo formato, non supportato da tutti i browser, che al contrario del formato gif è un formato pubblico, supporta le immagini trasparenti e interlacciate.

Si usa per le immagini destinate al web, lavora con milioni di colori o con scale di colore.

JPEG (Joint Photographic Experts Group) è un formato che lavora con milioni di colori; è uno dei tre formati disponibili per il web, insieme alle gif e png.

Quando lavoriamo con le foto, possiamo salvarle in tiff o png, ma il formato jpeg è consigliabile se vogliamo risparmiare spazio; al contrario, non conviene usare il formato jpeg per le immagini con pochi colori perchè le degrada, è più indicato in questi casi usare il formato gif o png.

Per le foto ad alta risoluzione e le immagini di alta qualità il formato migliore è il tiff.

BMP (Bitmap) è un formato basato su pixel. I file bmp non sono molto utilizzati nel web a causa della loro bassa compressione.

Salvare un'immagine in bmp conviene nel caso di ridimensionamento delle immagini perchè conserva le informazioni relative al numero di pixel per metro.

Quando lavoriamo con le immagini per inserirle nel web è fondamentale ricordarsi sempre di inserire il tag alt per mostrare il testo alternativo al posto di un'immagine, così un browser web testuale mostrerà il testo alternativo che spiegherà il contenuto dell'immagine.

Le immagini acquisite con lo scanner.

Quando acquisiamo un'immagine con lo scanner dobbiamo salvarla in formati diversi in base all'immagine stessa: se è una foto, allora serviranno 16 milioni di colori e l'immagine dovrà essere salvata in jpeg, tiff; se è un'immagine con pochi colori allora ne basteranno 256 e potrà essere salvata in gif o png; se è un disegno fatto a mano o un testo bastano solo i colori bianco e nero.

Quando dobbiamo acquisire un'immagine abbiamo la possibilità di scegliere la risoluzione: 100 dpi, 300 dpi, 600 dpi.

DPI sta per "dots per inch" ovvero "punti per pollice" e serve a definire il livello di dettaglio con cui verrà analizzata l'immagine.

Più saranno i dpi maggiori saranno i dettagli e maggiore sarà la dimensione del file.

Il formato jpeg è quello che consente di mantenere dimensioni ridotte pur ottenendo immagini bitmap di qualità a milioni di colori.

Sitografia:

1. it.wikipedia.org/wiki/Sistema_numerico_esadecimale
2. it.wikipedia.org/wiki/RGB
3. http://www.simply4you.it
4. www.dizionarioinformatico.com
5. http://www.cellamare.org
6. http://www.wowarea.com
7. http://www.med-ars.it
8. http://www.lorenzoroi.net/corso-ip1/scansione.html

Information Architecture

L'Information Architecture, ovvero l'Architettura dell'informazione, nasce dall'esigenza di organizzare, categorizzare e creare gli schemi di navigazione all'interno di un sistema informativo; facilitare la ricerca e e la gestione delle informazioni; creare la struttura su cui verrà "costruito" un sito.
L'Information Architect è la figura chiave nella realizzazione di un progetto web, infatti è colui che organizza i contenuti e i processi di un sito basandosi sul contesto, sugli obiettivi e sul target.
Dopo aver stabilito gli obiettivi e il target del sito si passa all'individuazione del profilo degli utenti per definire meglio il target.
L'operazione successiva è quella di progettare la navigazione del sito.
L'Information Architect affida le strutture portanti del suo sito ai metadati.
L'obiettivo è concatenare le informazioni e i dati che formano ogni scheda finale di contenuto.
Il luogo in cui si interviene sull'unità finale di contenuto è il Content Management System (CMS): un sistema per la gestione di contenuti informativi da pubblicare su siti e portali web.
Non bisogna fare l'errore di confondere e unificare i ruoli dell'architettura e del content management, infatti la prima ha una visione immediata delle informazioni (piano della sincronia); il secondo vede le informazioni inserite in un flusso cronologico (piano della diacronia).
Anche la logica dei motori di ricerca si basa sull'I.A.
Il primo criterio è quello della rilevanza dei campi: quando digitiamo una parola la ricerca procederà a ricercare prima tutti i titoli che comprendono quella parola, poi quelle in cui è contenuta nel corpo del testo.
Una grande percentuale di visitatori non arriva ad esplorare un sito partendo dalla Home page, ma vi arriva dai motori di ricerca, quindi gli utenti arrivano subito all'unità di contenuto saltando le tappe iniziali del sito.
In un motore di ricerca vige un criterio ragionato di classificazione che permette, una volta inserita la parola chiave della ricerca, di reperire e organizzare tutti i dati ottenuti per categorie e rendere possibile una creazione dinamica di percorsi associativi estemporanei.

Le funzioni dell'I.A. sono:

1. costruire schemi e sistemi di navigazione fissi dove inserire gli elementi;
2. identificare thesauri;
3. associare metadati ad ogni contenuto del sito;
4. prevedere metadati aperti;
5. tenere conto dei movimenti dei visitatori.

Sitografia:

1. www.html.it/architettura_informazione/infoarch_19.htm
2. www.fucinaweb.com/fw/iaftwww2/
3. www.ateneomultimediale.com/c_infoarchitecture.htm
4. pro.html.it/articoli/id_301/idcat_43/pro.html

Enzamaria La Mantia,LxWeb. DW1