Laboratorio Informatico Web DW3

Pubblicazione sito: Galleria d’arte di Olimpia Incardona

2006-05-23T10:40:00.000-07:00

http://arteincardona.altervista.org/

Il sito a cui ho lavorato ha lo scopo di promuovere le opere di un’artista della mia città.
In considerazione dell’oggetto scelto, ho progettato un layout colorato che richiama i materiali utilizzati nella realizzazione artistica.
Ho optato comunque per uno sfondo centrale molto chiaro, perché facilita la lettura del testo e consente alle opere di spiccare in tutta la loro essenza cromatica.
L’obiettivo è quello di portare a conoscenza degli utenti i quadri ed in generale lo stile della pittrice, ma contemporaneamente di sponsorizzare la sua attività di realizzazione di ritratti su commissione. Per questo motivo, oltre alla tradizionale barra di navigazione, ho posto in evidenza, già nella home page, un link, enfatizzato da un’immagine e da una scritta, per accedere alla pagina apposita.
Il sito è ideato in modo semplice per consentire una navigazione intuitiva.
Nel banner superiore, che rimane costante in tutte le pagine, ho compreso una foto della pittrice per dare all’utente una sensazione di credibilità e familiarità con essa.
Trattandosi di un sito di intrattenimento, ho fatto delle scelte compositive che creano un insieme gradevole, presentando una delle opere in primo piano nella homepage, in modo che anche il visitatore casuale possa farsi subito un’idea dello stile dell’artista.
Sarà un bacino di utenza molto ampio, composto da persone di entrambi i sessi, senza limiti di età, di disparati ceti sociali, di differenti condizioni economiche e con un grado di cultura anche solo medio.
Nella homepage, verticalmente a sinistra, ho inserito la barra di navigazione principale, mentre nel footer ho introdotto dei link secondari.
Da un punto di vista tipografico privilegerò la concisione e la schematicità, evitando di appesantire la navigazione con testi troppo lunghi e inutilmente complicati, dando ovviamente maggior spazio alla visione ed alla descrizione delle opere.
Per quanto possibile ho cercato di rendere il sito usabile e accessibile ad ogni tipo di utente, attenendomi agli Standard Web, attraverso l’uso di XHTML 1.1 e dei CSS perfettemente convalidati dal W3C, e utilizzando i criteri di accessibilità puntualizzati dalla legge Stanca (L. 9 gennaio 2004 n. 4).
Gli effetti grafici sono stati realizzati esclusivamente sfruttando la potenza dei CSS, senza nessun uso di javascript.
È corretamente visibile in Internet Explorer, Mozilla Firefox ed Opera.
Ho inserito il CSS per la stampa e il CSS aural per browser vocalici, la Skip Navigation e Acceskeys nella barra di navigazione.

Jakob Nielsen Alertbox dell'1 ottobre 1997

2006-05-23T10:31:00.000-07:00

Come gli utenti leggono sul Web

Nell'articolo dell'1 ottobre 1997, Jakob Nielsen affronta il problema del modo in cui le persone leggono le pagine Web.
Di solito fanno una scansione della pagina, e raramente analizzano parola per parola.
Di conseguenza le pagine Web devono avere un testo scansionabile, usando le seguenti tecniche:
1 parole chiave evidenziate;
2 sottotitoli significativi;
3 elenchi puntati;
4 un concetto per paragrafo
5 la teoria della piramide invertita;
6 usare la metà delle parole, piuttosto che la scrittura convenzionale.

Inoltre la credibilità è una componente importante per gli utenti Web; la credibilità può essere incrementata da un contenuto e da una scrittura buona e di alta qualità. In più anche l'uso di collegamenti ipertestuali a destinazione esterna aumenta la credibilità del sito.
Inoltre gli utenti detestano il "marketese", cioè lo stile di scrittura promozionale con affermazioni soggettive e presuntuose.
Infatti di solito gli utenti del Web sono indaffarati, e vogliono trovare le informazioni che gli necessitano velocemente, abbandonando di solito il sito che fa uso di "marketese".

Pubblicazione Sito

2006-03-04T08:49:00.000-08:00

Ho finalmente pubblicato il Sito che riguarda l'Agenzia Autoservice studio di consulenza automobilistica.
http://nuzzoautoservice.altervista.org/
Il sito è stato creato con XHTML 1.1 e CSS, perfettamente convalidati dal W3C.
È corretamente visibile in Internet Explorer, Mozilla, Netscape ed Opera (anche nella schermata di Opera che riproduce la visualizzazione dei palmari).
Ho inserito il CSS per la stampa e il CSS aural per browser vocalici, la Skip Navigation con relativa AccessKey (per internet explorer digitare ALT 2 e poi invio) e Acceskeys nella barra di navigazione.
Il sito sembra visualizzarsi on-line abbastanza rapidamente.

Unicode (UTF-8)

2006-02-20T03:46:00.000-08:00

ISO

ISO è una sigla che sta per International Standard Organization, quindi Organizzazione Internazionale per la Standardizzazione. Fu istituita nel 1947 a Ginevra. Composto da rappresentanti di organi nazionali, è un organismo per la definizione degli standard industriali e commerciali a livello mondiale, al fine di favorire il commercio di beni e servizi, sviluppando la standardizzazione nel mondo. I partecipanti comprendono un organismo di standardizzazione per ogni paese membro e per le principali corporazioni. Inoltre l’ISO collabora con la IEC, Commissione Elettronica Internazionale, responsabile per la standardizzazione degli equipaggiamenti elettrici. Gli standard ISO sono numerati, e hanno un formato del tipo "ISO 99999:yyyy: Titolo" dove "99999" è il numero dello standard, "yyyy" è l'anno di pubblicazione, e "Titolo" descrive l'oggetto. Per esempio tutti i computer con lettori CD-ROM e DVD-ROM usano l’estensione ISO per indicare il filesystem standard ISO 9660.

UNICODE

Unicode è un sistema di codifica utilizzato per rappresentare i caratteri di tutti i differenti linguaggi del mondo. È un set di caratteri completo che fornisce un numero univoco (una combinazione di bit) per ogni carattere indipendentemente dalla piattaforma, dal programma e dal linguaggio utilizzato. Ogni numero di 2 byte rappresenta un unico carattere, dunque un numero per carattere ed esattamente un carattere per numero.
Unicode, basandosi sulla precedente codifica ASCII che consentiva la rappresentazione di 256 caratteri sufficiente per gli alfabeti dell’Europa Occidentale e del Nord America, va molto oltre; codifica i caratteri usati in tutte le lingue vive e in alcune lingue morte. Comunque bisogna specificare che Unicode non riesce ancora a rappresentare tutti i caratteri esistenti al mondo, anche se si pensa che in futuro arriverà a coprirli tutti. Unicode si basa su una codifica a 16 bit che da la possibilità di codificare 65.536 caratteri coprendo i principali caratteri impiegati nelle principali lingue del mondo.

Adesso lo standard Unicode si è ulteriormente evoluto, infatti supporta tre forme di codifica che condividono un repertorio comune di caratteri ma possono essere estese fino a rappresentarne circa un milione.

Questi formati vengono chiamati UTF, che sta per Unicode Transformation Formats, e possono essere a 8, 16 o 32 bit. L’UTF è dunque un sistema per mappare i caratteri definiti nella codifica Unicode in cifre binarie di lunghezza fissa.
L’UTF-8 usa 1 byte per tutti i caratteri ASCII, 2 per i caratteri ISO Latin-1, 3 o 4 o 5 o 6 byte per gli alfabeti orientali.Utilizzando dunque UTF-8 si possono avere nella stessa pagina più lingue.
L'Unicode viene supportato dai moderni standard della programmazione, del markup come XML, XHTML e HTML 4.0, Java, JavaScript e da vari sistemi operativi.

SITI DI RIFERIMENTO

http://it.wikipedia.org/wiki/UTF-8

www.unicode.org

http://msdn.microsoft.com/library/ita/

Meta tag e motori di ricerca

2006-02-02T10:13:00.000-08:00

L’elemento Meta si inserisce nel documento HTML e va inserito tra i tag HEAD di apertura e chiusura e non ha un tag di chiusura. È costituito da una coppia nome/valore, e ha tre attributi principali:

- HTTP-EQUIV

- NAME

- CONTENT

I Meta-tag forniscono informazioni aggiuntive su un documento ipertestuale, ed hanno una funzione fondamentale di indicizzazione dei motori di ricerca.

CONTENT determina il valore da attribuire alla proprietà che lo precede.

Le informazioni contenute in HTTP-EQUIV informano il browser che si tratta di valori di intestazione della connessione HTTP e contiene informazioni utilizzate nella comunicazione tra server e browser. Le variabili associabili a HTTP-EQUIV sono le seguenti:

- Reply-to indica l'indirizzo di posta elettronica dell'autore del documento:

META HTTP-EQUIV=reply-to CONTENT="indirizzo@email"

- Expires indica al browser la data di scandenza del documento:

META HTTP-EQUIV=expires CONTENT="Sun, 1 march 2006 12.00.13 GMT "

- Pragma, associabile esclusivamente a Netscape Navigator, impedisce al browser di memorizzare il documento nella memoria cache:

META HTTP-EQUIV="pragma" CONTENT="no-cache"

- Refresh permette di sfruttare il cosiddetto "client-pull", cioè il ricaricamento automatico del documento:

META HTTP-EQUIV="refresh" CONTENT=5

Per caricare una pagina differente da quella che si sta visualizzando è necessario impostare un URL completo all'interno di CONTENT: META HTTP-EQUIV="refresh" CONTENT="5;URL=http://www.esempio.it"
L'attributo NAME raccoglie informazioni utili agli utenti per conoscere, per esempio, l'autore del documento, la data di pubblicazione del sito ecc., e viene utilizzato con le seguenti variabili:

- Author identifica l'autore della pagina:

META NAME="author" CONTENT="Francesco Mattatresa"

- Description fornisce una breve descrizione del documento, ed è preferibile limitare a 10-15 parole la lunghezza della descrizione, che altrimenti rischia di essere ignorata dai motori di ricerca:

META NAME ="description" CONTENT="descrizione"

- Copyright ribadisce che il documento è coperto dal diritto d'autore:

META NAME ="copyright" CONTENT=".it"

- Generator specifica l'editor HTML utilizzato per creare il documento:

META NAME ="generator" CONTENT="Macromedia Dreamweaver MX"

Dal meta-tag keyword i motori di ricerca ricavano le chiavi con le quali indicizzare un sito web:

- META HTTP-EQUIV="keywords" CONTENT="parole chiave separate da virgola"

Dunque è necessario stendere una lista di parole chiavi, per identificare il contenuto del documento, tenendo però conto di alcuni accorgimenti sintattici, come riportare il termine inglese oltre quello italiano, inserire il plurale oltre il singolare, evitare termini generici, inserire parole volutamente sbagliate, mantenere comunque il numero di parole chiavi limitate, non utilizzare lo stesso termine più di due volte, e infine inserire diverse parole chiavi nelle differenti pagine del sito Web.

I motori di ricerca utilizzano programmi chiamati "spiders" il cui compito è quello di visitare continuamente una grande quantità di siti web, leggere il testo contenuto nelle pagine ed estrarre quelle parole/termini che rappresentano al meglio i contenuti del sito.Gli spider non fanno caso alla grafica delle pagine ma focalizzano il loro lavoro di analisi esclusivamente sul testo. I siti web acquistano importanza da parte dei motori di ricerca solo se contengono buone quantità di testo in tema con gli argomenti trattati dal sito. Dunque i parametri in base ai quali i siti vengono selezionati dai motori di ricerca sono i contenuti testuali, le Keyword (parole chiavi), e la popolarità cioè dal numero dei visitatori.

SITI DI RIFERIMENTO

http://www.motoridiricerca.it/

http://pro.html.it/

Lettera: XHTML e gli Standard Web

2006-02-02T10:06:00.000-08:00

La transizione al XHTML è dovuta soprattutto alla necessità di possedere uno standard Web per tutti i tipi di browser esistenti in commercio.

Infatti, intorno gli anni ’90 si è scatenata, sul piano tecnico e commerciale, una vera e propria lotta, sui browser. Le grandi compagnie internazionali, soprattutto Netscape e Microsoft, introdussero una serie di nuove versioni di browser con estensioni proprietarie all’HTML ufficiale.

Il risultato fu che qualunque sito Web che voleva utilizzare le estensioni proprietarie di un browser, rischiava di risultare inaccessibile ad altri browser.

Dunque, la necessità di un linguaggio di markup che offrisse libertà di estensione e che salvasse gli standard, si fece sempre più urgente.

Dunque, gli obiettivi principali della nascita di XML, erano rivolti alla soluzione di un problema di standard. Così, l’HTML con le regole basilari dell’XML costituì l’XHTML. Progettare siti Web conformi agli standard significa rendere usabile e soprattutto accessibile il proprio sito a tutti i tipi di utenti. Inoltre significa notevoli risparmi sia dal punto di vista economico che di tempo, perché non c’è più la necessità di creare diverse versioni per i differenti browser. Gli standard garantiscono anche la visualizzazione dei siti da parte di tutti gli apparecchi che operano con il Web come i cellulari, palmari e tutto ciò che nascerà successivamente.

Attraverso un codice di markup chiaro, semplice, si riducono le dimensioni dei file, diminuiscono i problemi di manutenzione nei browser, e grazie all’utilizzo dei CSS che permettono di gestire la presentazione e rendere le pagine accessibili a tutti gli utenti, la modifica o gli eventuali aggiornamenti avvengono in modo veloce e sicuro. Infine l’uso del DOM (Document Object Model) produce codice di scripting funzionante su tutti i browser che utilizzano gli standard W3C.

Diario di bordo

2006-01-16T10:34:00.000-08:00

Il sito a cui sto lavorando avrà uno scopo commerciale, pubblicizzerà l’agenzia di pratiche automobilistiche di un mio amico.
In considerazione dell’oggetto scelto, sono orientato per un layout semplice e gradevole che comunichi un’immagine di serietà e affidabilità.
Evitando stravaganze non pertinenti opterò per uno sfondo bianco (o comunque chiaro), che faciliti la lettura del testo e quindi consenta una rapida e comoda consultazione dei servizi offerti.
L’obiettivo è quello di fornire un servizio all’utente, ma contemporaneamente di sponsorizzare l’agenzia e perciò porrò in evidenza il logo con il nome e l’indirizzo dell’impresa, posizionandolo in alto a sinistra e dandogli una dimensione sufficiente a non passare inosservato e ad imprimersi nella memoria.
Accanto a questo pensavo di mettere una foto forse di un’auto d’epoca.
Trattandosi di un sito commerciale con oggetto molto specifico, gli utenti che accederanno al sito, non avranno uno scopo di intrattenimento, ma piuttosto necessiteranno di informazioni determinate che vorranno ottenere nel più breve tempo possibile.
Sarà un bacino di utenza molto ampio, composto da persone di entrambi i sessi, dai quattordici anni in su, di disparati ceti sociali e di differenti condizioni economiche e culturali, giacché ciclomotori e automobili sono beni posseduti praticamente da tutti.
Alla luce di ciò ho intenzione di collocare la barra di navigazione principale orizzontalmente, subito sotto il logo e la foto e per tutta la lunghezza di essi, in modo che sia immediatamente visibile e non costringa a scorrere la pagina.
Nella home page, verticalmente a sinistra, in corrispondenza del primo pulsante di navigazione della barra principale, inserirò, invece, le informazioni ed i link secondari.
In generale, non utilizzerò colori sgargianti, ma manterrò un aspetto sobrio, vivacizzato però da qualche foto dei locali dell’agenzia e dello staff, per dare un tocco di simpatia all’insieme.
Da un punto di vista tipografico privilegerò la concisione e la schematicità, evitando di appesantire la navigazione dell’utente con testi troppo lunghi e inutilmente complicati, dando ovviamente maggior spazio ai servizi offerti.
Per quanto possibile cercherò di rendere il mio sito usabile e accessibile ad ogni tipo di utente, attenendomi agli Standard Web attraverso l’uso di XHTML e dei CSS, come consigliato ampiamente nel libro di Zeldman.

Le teorie della Gestalt e Cognitive Web Design

2006-01-06T17:01:00.000-08:00

La Gestalt è una corrente di pensiero, nata in Germania fra la fine dell'Ottocento e gli inizi del Novecento e cerca di comprendere le leggi o principi con cui strutturiamo le nostre percezioni. I sostenitori di questa corrente di pensiero ritengono che l’attività percettiva non sia basata sull'organizzazione dei singoli elementi considerati distintamente, ma sull'immediato riconoscimento di unità globalmente strutturate.

Grazie a studi condotti nel tempo si è arrivati alla conclusione che conoscendo alcuni principi della Gestalt è possibile sfruttarli anche per disporre i vari elementi che compongono una pagina Web, in modo da diminuire le ambiguità e rendere chiara la struttura e l'organizzazione del proprio lavoro.

Dunque i principi sulla percezione formulati dalla Gestalt spiegano il nostro modo di percepire la realtà che a sua volta vincola anche quello di concepirla. Adesso elencherò alcuni principi fondamentali utili per la realizzazione di pagine Web:
1. vicinanza: all'interno di una stessa scena o sfondo, gli elementi tra loro vicini vengono percepiti come un tutto, come un insieme.

Questo principio è molto utile per il Web design, infatti se le informazioni e i vari elementi sono ammassati senza alcuna separazione e senza ordine, l'utente rischia di non distinguere i vari elementi, poiché tutto appare come un insieme, con la stessa importanza. Per evitare questo, è sufficiente mettere in pratica appropriate procedure di avvicinamento e allontanamento degli elementi, rendendo più chiara la struttura della pagina e i diversi gradi di importanza delle informazioni;
2. similitudine: all’interno di una stessa scena o sfondo, gli elementi accomunati da forma, colore e dimensione vengono percepiti come legati insieme, collegati. Dunque nella progettazione di un sito è preferibile raggruppare visivamente le informazioni riguardante lo stesso argomento;
3. chiusura: linee e forme, se sono familiari, vengono percepite come chiuse e complete anche se non lo sono. Questo principio si associa all’impaginazione, soprattutto all’allineamento. Dunque organizzare lo spazio secondo linee e rettangoli invisibili, aiuta l’utente a capire meglio la struttura e l’organizzazione delle pagine Web;
4. figura-sfondo: le figure vengono percepite prima dal contorno e il resto viene inteso come sfondo. Questo principio si trasforma in grafica nel più famoso principio del contrasto. In pratica secondo questa legge un immagine é percepita solo in contrasto al suo sfondo.

SITI DI RIFERIMENTO

http://www.pro.html.it/

http://www.sequency.it/

Usability and accessibility

2006-01-05T19:03:00.000-08:00

Usability
L'usability implica che le informazioni del Web debbano essere organizzate in modo chiaro e con un linguaggio comune in modo da garantire la massima fruibilità, permettendo così agli utenti di navigare con facilità trovando tutte le risorse presenti nel sito.
Innanzitutto bisogna immaginare come il sito sarà usato dagli utenti, identificando le tipologie di pubblico, in modo da facilitare il compito dell’utente nella ricerca di informazioni.
Inoltre, è necessario usare tecnologie semplici e comuni, compatibili agli standard Web.
Infine il sito deve essere aggiornato frequentemente in modo da permettere continuità in termini di usability.
Per esempio, per favorire l’usability si preferisce usare piccoli componenti grafici, in modo da migliorare la performance, usare immagini in formato standard, come jpeg - gif , inserire ai componenti grafici il testo alternativo di descrizione, scegliere colori opportuni per non rendere difficoltosa la lettura di alcune parti testuali, e così via.
L’usability deve essere collaudata, non considerando solamente la funzionalità del sito, ma occorre dimostrare la navigabilità, l’accessibilità, la compatibilità con i vari browser, sia recenti che precedenti.

Accessibility
L’accessibility implica la progettazione di siti Web accessibili, nella misura più ampia possibile, agli utenti, indipendentemente dal fatto che abbiano o meno delle menomazioni.
Può essere dunque definita la disciplina che si occupa di rendere accessibili i siti internet agli utenti portatori di handicap, come ad esempio agli utenti impossibilitati a dirigere un mouse, con difficoltà a distinguere colori, con problemi di cecità.
Dunque i colori, i caratteri, i software devono essere adeguati ad ogni tipo di target, permettendo una libera navigazione a tutti gli utenti.
Tra le personalità più importanti di questo filone troviamo Jakob Nielsen, che ha redatto delle regole, sia per la progettazione di siti Web accessibili a tutti gli utenti, sia per trovare gli errori nei siti Web non accessibili. Jakob Nielsen raccomanda, per esempio, la consistenza, cioè dare a tutte le pagine lo stesso tipo di grafica, in modo da non confondere l’utente, suggerisce di evitare elementi grafici grossi o troppo colorati, perché mettono in secondo piano il contenuto del sito.
Inoltre consiglia di specificare bene cosa si troverà sui diversi link, per evitare di fuorviare l’utente o creare false aspettative.
Le regole di accessibilità più importanti suggerite da un organismo del W3C (www.w3.org/WAI) sono le seguenti:
1 utilizzare l’attributo alt per immagini ed animazioni, per descrivere la funzione di ogni elemento grafico;
2 utilizzare l’elemento map e descrivere le zone attive per le immagini cliccabili;
fornire sottotitoli per l’audio, e descrizione dei filmati;
3 per i link utilizzare enunciati che conservino il loro senso;
4 utilizzare titoli, liste e una struttura coerente. Utilizzare CSS per l’impaginazione;
5 utilizzare noframes e titoli significativi;
6 facilitare la lettura delle tabelle linea per linea;
7 limitare l’uso di componenti interattive (scripts, applets , plug-ins), prevedendo un messaggi di avvertimento di apertura di una finestra;
8 descrivere figure e diagrammi all’interno della pagina o utilizzare l’attributo longdesc;
9 verificare il lavoro: validare. Utilizzare gli strumenti, la lista di controllo e le linee guida di http://www.w3.org/TR/WCAG .
Inoltre, evitare scritte lampeggianti o in movimento, causa di crisi epilettiche in soggetti predisposti, e non usare il colore come unico veicolo di informazione.

Utilità dei CSS per l’accessibilità
L’uso dei fogli di stile (CSS), permettono un controllo accurato sulle pagine Web, alleggeriscono molto il codice, permettendo così una navigabilità migliore all’utente, e soprattutto assicurano l’accessibilità agli utenti portatori di handicap.
I CSS organizzano il contenuto, la struttura e la presentazione di una pagina separatamente, facilitando la comprensione e la visualizzazione del codice, rendendo, così il codice facilmente leggibile e leggero. Il contenuto si associa al testo, alle immagini, alle animazioni e ai filmati. La struttura riguarda l’organizzazione logica del contenuto, come i titoli, i sottotitoli, i capitoli. Infine la presentazione si occupa della formattazione dei caratteri, dei layout, delle scelte di stile, della tipografia. I CSS vengono supportati dai browser di nuova generazione, mentre browser precedenti come Netscape 4 e IE 4 non interpretano bene i fogli di stile. Ma la cosa più importante è che in questi browser, il mancato supporto dei CSS si limita solo agli aspetti grafici, non al contenuto, rispettando così i principi dell’accessibilità. Inoltre i CSS, attraverso la definizione di diversi fogli di stile, e associati al documento XHTML, permettono di creare layout personalizzati, in modo da proporre tante soluzioni, per le diverse esigenze dell’utente.

Definizione dei browser e differenze
Il browser è un software che consente l’accesso a Internet e dunque la visualizzazione delle pagine Web, grazie alla sua caratteristica principale, che è quella di decifrare il codice HTML-XHTML e visualizzarlo sottoforma di ipertesto. Il browser scarica i file che si trovano sui vari server tramite un indirizzo (URL). Il browser svolge un ruolo centrale per l’accessibilità web in quanto deve interpretare correttamente i tag accessibili dell’HTML. Con i browser precedenti esisteva il problema della differente visualizzazione, o addirittura della non visualizzazione dei siti, a secondo del browser usato. Con l’introduzione degli standard Web il problema della visualizzazione nei diversi browser sembrerebbe risolto. Tra i browser più conosciuti abbiamo Internet Explorer, Netscape, Opera, Safari, Mozilla. Esistono anche I browser di palmari e cellulari, anche se la maggior parte di loro hanno evidenti difficoltà di visualizzazione delle normali pagine web; la navigazione si scontra con le ridotte dimensioni dello schermo, il minor numero di colori, la minor potenza di calcolo e di velocità di navigazione.
Esistono browser testuali, usati molto nell’ambito dell’amministrazione di siti web accessibili, che consentono di visualizzare solo testo contenuto nella pagina; browser vocali (come IBM HOME PAGE READER) che consentono la lettura della pagina Web, traducendola. Gli screen reader (come JAWS) invece sono programmi che si limitano a leggere tutto quanto appare sullo schermo. Hanno un utilizzo più ampio dei browser vocali in quanto permettono di leggere tutto ciò che compare sullo schermo, come file di testo, stringhe di comando.

Accessibilità delle tabelle
Le tabelle di dati per essere accessibili devono chiarire quali sono le celle d’intestazione e rendere poi, esplicita la relazione tra celle d’intestazione e celle di dati. Si riccone dunque, ad elementi ed a attributi della tabella stessa, come:
1 attributo caption: è l’intestazione, il titolo con un commento esplicativo;
2 attributo summary : fornisce una descrizione della struttura e del contenuto della tabella, destinata a programmi utente non visuali;
3 elemento th: definisce una cella contenente informazioni di intestazione. L'uso di th permette di capire se il contenuto di una tabella è un'intestazione o un titolo;
4 attributo scope: la relazione tra celle d'intestazione e celle di dati è resa esplicita per mezzo di questo attributo, attraverso tre valori ed esattamente colgroup, col, row;
5 attributo abbr: fornisce una forma abbreviata del contenuto di una cella;
6 attributo thead: è la testa, la parte iniziale della tabella;
7 attributo tfoot: è il piede, la conclusione della tabella;
8 Attributo tbody: è il corpo, la parte centrale con il contenuto della tabella.

Le principali questioni e le rispettive proposte di risoluzione
Lo scopo principale per un autore di pagine Web, dovrebbe essere quello di realizzare siti accessibili al maggior numero di utenti. I problemi principali collegati all’accessibilità sono i seguenti:
1 versioni di browser diverse: un modo efficace per progettare pagine visibili dai diversi browser consiste nell'usare gli standard Web;
2 risoluzione dello schermo: le risoluzione solitamente usate dagli utenti sono 640x480, 800x600 e 1024x768. La maggior parte dei progettisti consiglia di sviluppare pagine Web usando una risoluzione pari a 800x600. Inoltre è possibile progettare pagine che si adattino alle varie risoluzioni dello schermo, anziché sviluppare layout dalle dimensioni fisse.
3 velocità di connessione: per evitare perdite di visitatori nei siti progettati occorre innanzitutto adeguarsi agli standard Web (XHTML-CSS ecc.), che rendono il codice leggero fino al 50% rispetto i siti che non li utilizzano.

Creazione di una homepage usabile e navigazione usabile
La homepage, essendo la via di accesso principale, deve presentare informazioni semplici ed efficaci sull’identità del sito. Dunque fornire orientamento e identità, senza creare conflitti gerarchici tra immagini o elementi, sono condizioni necessarie per la progettazione di una homepage. Inoltre è necessario capire la differenza tra contenuto, struttura e presentazione delle pagine Web, in modo da rendere il sito accessibile e usabile, attraverso l’uso dei fogli di stile per l’impaginazione.

BIBLIOGRAFIA
Progettare il web del futuro (Jeffrey Zeldman)

SITI DI RIFERIMENTO
http://www.gdesign.it/pages/principi/variabili/browser.php
http://pro.html.it/lista_articoli.asp/idcat_37/usabilita.html
http://www.w3c.it/
http://it.wikipedia.org/

I colori e i formati immagini per il Web

2005-12-13T09:50:00.000-08:00

Il sistema esadecimale e il significato di RGB
I colori dello sfondo, dei collegamenti e del testo, nel linguaggio HTML sono realizzabili attraverso l’utilizzo del sistema esadecimale. Quest’ultimo si differenzia dal sistema metrico decimale (base 10), infatti il sistema esadecimale ha 16 simboli (base 16): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Mentre nel sistema decimale per rappresentare un numero maggiore di 9 si utilizza una combinazione di questi numeri dove la cifra a destra rappresenta l’unità e quelle a sinistra le decine, nel sistema esadecimale per rappresentare numeri maggiori di f (15) si dovrà utilizzare una combinazione di simboli, dove la cifra a destra rappresenta le unità, e la cifra a sinistra specifica quante volte è ripetuto il 16.
Oltre i colori, il sistema esadecimale può rappresentare i simboli speciali nelle pagine Web.
I colori sono rappresentati da codici esadecimali di sei cifre preceduti dal segno #; i primi due numeri rappresentano la quantità di rosso (#ff0000), i secondi la quantità di verde (#00ff00), mentre gli ultimi due numeri rappresentano la quantità di blu (#0000ff). Dai nomi di questi tre colori deriva il significato di RGB (red, green, blue). Dunque attraverso le varie combinazioni di questi colori si potranno definire moltissime tonalità. Per esempio il nero è dato dall’assenza di tutti i colori (#000000), il bianco dalla presenza di tutti i colori (#ffffff), mentre il giallo è dato dalla presenza massima di rosso e di verde (#ffff00).

Web Safe color
Web Safe color sono i cosiddetti colori sicuri, cioè i colori predefiniti che possono essere visualizzati dalla maggior parte dei browser in commercio. Convenzionalmente esistono 216 colori comuni, infatti anche Dreamweaver utilizza la tavolozza Web Safe a 216 colori.

Differenza tra immagini bitmap e vettoriali
Le immagini bitmap sono strutturate attraverso pixel, abbreviazione di “picture element” (elemento di immagine). Un pixel è il più piccolo elemento quadrato che compone un’immagine bitmap, e maggiore è il numero di pixel, più definita sarà l’immagine.
Le immagini vettoriali utilizzano formule matematiche, e si ottengono attraverso manipolazioni di linee e curve. L’immagine in questo caso non è rappresentata da pixel.
Le immagini bitmap, se ingrandite o ristrette possono perdere in qualità, mentre le immagini vettoriali solitamente si possono ingrandire e restringere senza particolari problemi.

Differenze tra immagini BMP, GIF, JPEG, PNG
Le immagini BMP (bitmap) sono dotate di una buona qualità e creano un’ottima impressione di realismo. Risultano però, troppo ingombranti dal punto di vista dello spazio occupato, infatti vengono solitamente usate per sfondi del desktop o per stampe ad alta definizione, e quasi mai inserite nei siti Web.
Le immagini GIF (Graphics Interchange Format) possono utilizzare solamente 256 colori, e dunque sono poco ingombranti. Sono utilizzate per icone, immagini in bianco e nero, loghi e fumetti, meno per le foto che richiedono moltissimi colori. Altra caratteristica dell’immagine GIF è il colore di trasparenza e l’animazione tramite appropriati software. Da questo, deriva il grande uso del formato GIF nel Web.
Il formato JPEG (Joint Photographic Experts Group) viene utilizzato moltissimo per la memorizzazione di immagini fotografiche. Un’immagine JPEG può contenere milioni di colori mantenendosi leggera, al contrario del formato BMP. Questo grazie ad una particolare capacità di compressione del file, chiamata lossy. Però, questo formato non supporta l’animazione e non ha il colore di trasparenza. Le immagini JPEG sono molto utilizzate nel Web.
Il formato PNG (Portable Network Graphics) supporta milioni di colori, ed è adatto sia per le immagini fotografiche, che per quelle grafiche. Questo formato unisce le caratteristiche GIF e JPEG, ma l’unico problema che frena un po’ la sua diffusione, è che i browser meno recenti non supportano questo formato.

Salvataggio di un’immagine acquisita da scanner
I formati più utilizzati nel salvataggio di un’immagine acquisita da scanner sono GIF e JPEG.
Il formato GIF è consigliabile per loghi, icone, fumetti, immagini in bianco e nero.
Il formato JPEG consigliato per le foto, perché in grado di memorizzare milioni di colori.

Attributi ALT e TITLE
L’attributo ALT, inserito nell’elemento IMG, consente di specificare un testo alternativo per le immagini, quando quest’ultime non vengono visualizzate. Questo risulta utile per coloro che usano il browser in modalità testo, quindi diventa indispensabile per le persone con gravi problemi di vista. Un errore diffuso, è quello di inserire nell’attributo ALT una descrizione dell’immagine, senza tener conto della funzione, dello scopo, che in realtà svolge l’immagine nella pagina Web.
L’attributo TITLE viene utilizzato per dare delle informazioni aggiuntive ad un’immagine o ad un collegamento. È un messaggio a comparsa e aiuta l’utente nella navigazione.

Scrivere per il Web
Innanzitutto è indispensabile dare una buona organizzazione al testo, per facilitare all’utente la visualizzazione di blocchi di informazioni interessanti. Infatti, l’utente solitamente svolge una scansione per vari motivi, come la fretta, l’economia e l’abitudine.
La scrittura deve essere strutturata e coincisa: non essere troppo dettagliati, essere chiari, evitare linguaggi legati alla propria cultura, usare una buona grammatica e ortografia, scrivere a blocchi, allineare preferibilmente il testo a sinistra, evitare righe di testo lunghe (50-70 caratteri per riga), scegliere il font giusto e così via.

FONTI
Scrivere per il Web (Vito Evola)
HTML 4 per il World Wide Web

SITI DI RIFERIMENTO
http://www.diodati.org/scritti/2002/g_alt/index.asp
http://www.gdesign.it/
http://it.wikipedia.org/

Information Architecture

2005-11-30T09:59:00.000-08:00

L'architettura delle informazioni è una delle "materie" più delicate e decisive di ogni progetto Web. Molti dei problemi riscontrati dagli utenti sull'usabilità del Web sono la diretta conseguenza di una mancata o insufficiente progettazione alla base.

L'Information Architect interviene a monte nel progetto, da un lato indagando i bisogni degli utenti, dall'altro entrando nel merito delle informazioni in sé e progettando come organizzarle.

L'Information Architect è quindi il punto di riferimento per tutte le attività di progettazione: è colui che struttura, organizza, rende navigabili e ricercabili i contenuti di un sito web.

Questi sono i tre assi su cui si basa la progettazione dell'architettura informativa:

Conoscere il cliente. Si tratta di definire gli obiettivi del cliente, organizzati in macro e microobiettivi, obiettivi primari e secondari, a breve e lungo termine
Conoscere gli utenti. Significa individuare i target del sito e analizzarne i bisogni e le aspettative attraverso focus group, interviste dirette, questionari, indagini sull'ambiente di lavoro.
Organizzare e raggruppare i contenuti. Si traduce nel progettare le macroaree del sito e i sistemi di navigazione in modo tale che siano coerenti con gli obiettivi dell'azienda e che corrispondano alle aspettative e alle abitudini degli utenti.
Specificamente, è possibile delineare un processo suddiviso per fasi, che dia un'idea delle attività più importanti legate all'Information Architecture:

Discovery
Analysis
Architecture
Develop

Discovery
L'obiettivo primario delle attività svolte in questa fase è quello di fornire all'Information Architect una visione chiara e profonda del progetto. È essenziale comprendere il contesto, gli obiettivi e il target del sito per iniziare a delineare una strategia di alto livello in modo da mettere i primi punti fermi al progetto. Per fare tutto ciò è necessario partire da un'attenta analisi del cliente, del mercato in cui opera, della sua struttura aziendale, della comunicazione.
Analysis
In questa fase si approfondiscono i temi accennati nella fase di Discovery, partendo con l'individuazione del profilo degli utenti a seguito della definizione del target. Per fare questo si utilizzano tutti gli strumenti tipici della progettazione centrata sull'utente: interviste, questionari, focus group. L'obiettivo è sviluppare una solida conoscenza degli utenti, a tutto tondo, sia per quanto riguarda il profilo sociodemografico, gli obiettivi e le aspettative in relazione al sito oltre che tutte le informazioni riguardanti l'ambiente di lavoro, l'utilizzo di piattaforme e tecnologie, il livello di alfabetizzazione informatica.
Architecture
In questa fase si consolida quanto realizzato, cercando di scendere al massimo livello di dettaglio possibile. Si parte con la definizione del piano generale dei contenuti, che dovrebbe elencare oltre ai contenuti esistenti anche quelli che si intende creare ex-novo. Generalmente il piano identifica e descrive le macroaree di contenuto e via via scende nel dettaglio fino ad individuare ogni singola sezione. A seconda della complessità del progetto potrà essere realizzato un piano editoriale che riporterà una descrizione di trattamento dei contenuti cioè dello stile e del "tone of voice" che si intende utilizzare, l'indicazione puntuale della frequenza di aggiornamento per ciascuno di essi,e un primo embrione di argomenti da trattare.
Develop
In questa fase l'Information Architect si occupa della definizione di tutti gli elementi di dettaglio che ancora mancano, della verifica e test dei componenti realizzati e della finalizzazione della documentazione di progetto.

SITI DI RIFERIMENTO

www.bazzam.com

www.pro.html.it

www.informationarchitecture.it

http://www.shinynews.it/

Perchè nasce l'XHTML e differenze con l'HTML

2005-11-16T17:30:00.001-08:00

Con la rapida diffusione del Web e l’assalto commerciale ad Internet, intorno gli anni ’90 si è scatenata, sul piano tecnico e commerciale, una vera e propria lotta, sui browser.
Le grandi compagnie internazionali, soprattutto Netscape e Microsoft, introdussero una serie di nuove versioni di browser con estensioni proprietarie all’HTML ufficiale.
Il risultato fu che qualunque sito Web che voleva utilizzare le estensioni proprietarie di un browser, rischiava di risultare inaccessibile ad altri browser.
Dunque, la necessità di un linguaggio di markup che offrisse libertà di estensione e che salvasse gli standard, si fece sempre più urgente; fu così che nel 1996 si costituì l’XML Working Group nell’ambito del W3C. Dopo un anno di lavoro, le specifiche di XML vennero pubblicate come Proposed Recommendation. Gli obiettivi principali della nascita di XML, erano dunque rivolti alla soluzione di un problema di standard, ma ci si accorse presto che esso risultava essere utile per potere essere utilizzato in moltissimi contesti: scambio di informazioni, definizione della struttura dei documenti, rappresentazioni di immagini, definizione di formati dati e così via. Tutto ciò portò ad una vera e propria rivoluzione.
L’eXtensible Markup Language (XML) è un linguaggio semantico che permette di definire altri linguaggi di markup, non serve per programmare e non ha tag predefiniti a differenza dell’HTML.
L’XML contribuì così, all’evoluzione dell’HTML, infatti possiamo dire che XHTML è HTML definito secondo le regole di XML, e dunque che l’evoluzione del linguaggio HTML è XHTML (extensible HTML).
XHTML (eXtensible HyperText Markup Language) nasce ufficialmente il 26 gennaio 2000 come raccomandazione W3C.
L’XHTML, grazie ad una sintassi meglio definita rispetto a quella dell'HTML, permette di inviare pagine web a molti dei nuovi dispositivi diversi dai tradizionali computer, come ad esempio piccoli apparecchi portatili, dotati di risorse hardware e software non sufficienti ad interpretare il linguaggio HTML.
Le differenze fra HTML e l'XHTML non sono molto grandi. La differenza più importante è che tutti i tag devono essere well formed (letteralmente ben strutturati), cioè obbedire ad una serie di regole ben precise che ne assicuri la coerenza reciproca.
Le differenze più evidenti sono:
1. Gli elementi devono essere correttamente annidati;
2. i nomi di elementi e attributi devono essere in minuscolo;
3. gli elementi non vuoti devono essere chiusi;
4. i valori degli attributi devono essere posti tra virgolette;
5. ogni attributo deve avere un valore;
6. gli elementi vuoti devono terminare con />;
7. bisogna utilizzare l'attributo id al posto di name per identificare gli elementi di un documento;
8. Utilizzo dei tag logici.
Tutte queste regole sono standard, e garantiscono dunque l’indipendenza da una piattaforma hardware e software di uno specifico produttore.

SITI DI RIFERIMENTO
http://www.html.it/
http://it.wikipedia.org/wiki/Pagina_principale
http://www.w3c.it/
http://www.gdesign.it/

Storia del WWW, nascita di HTML, il W3C

2005-11-01T18:45:00.000-08:00

Il World Wide Web, nacque nel 1989 grazie ad un’idea di Tim Berners-Lee e di Robert Cailliau, ricercatori del CERN di Ginevra (laboratorio europeo per la Fisica dell’Alta Energia).
Visto che la ricerca di fisica veniva solitamente svolta da gruppi di università diverse, essi volevano trovare un modo per poter scambiare velocemente informazioni tra scienziati di tutta l’Europa e il Nord America.
Bisogna però precisare che già si potevano utilizzare Internet, servizi di FTP e posta elettronica, ma per rendere lo scambio di informazioni semplice e intuitiva a chiunque non avesse familiarità con le reti di calcolatori, progettarono e costruirono un sistema di condivisione dei documenti usando un concetto chiamato ipertesto (anche se la prima idea di sistema ipertestuale si deve far risalire a Vannevar Bush nel 1945). L’ipertesto era costituito da vari documenti connessi tramite link.
Questo permise ai ricercatori di condividere le documentazioni scientifiche indipendentemente dalla piattaforma usata, infatti Tim Berners-Lee e Robert Cailliau definirono standard e protocolli per scambiare documenti su rete, progettando il linguaggio HTML e il protocollo http.
La semplicità della tecnologia ebbe un grande successo, sia in campo accademico che in quello commerciale, dando inizio a quella che oggi viene chiamata l’era del web.
Inizialmente gli standard e protocolli supportavano solo la gestione di pagine HTML statiche, cioè navigabili con opportune applicazioni browser, ma subito dopo, furono progettati strumenti capaci di costruire pagine HTML dinamiche, aumentando le potenzialità e le funzionalità dei browser grazie ad un’evoluzione del linguaggio HTML.
Così, negli ultimi anni il linguaggio HTML ha subito molte revisioni e miglioramenti, passando dalla versione 1.0 fino a 3.2 e arrivando alla versione 4.0 e 4.01. Per esempio la versione HTML 3.2, utilizzata dai cosiddetti browser di terza generazione, permette di regolare gli allineamenti delle celle della tabella al punto, ed è l'unico contesto in cui gli allineamenti si assegnano per pixel e permette anche di allargare una cella per occupare le colonne limitrofe o le righe limitrofe, migliorando così, rispetto alla precedente versione il lavoro dei designer. Invece la versione 4.0 permette di separare contenitore da contenuto, aggiungere supporto per nuove tecnologie, migliorare l’accesso web ai portatori di handicap ecc.
Ricapitolando, il linguaggio HTML (HyperText Mark-Up Language) è utilizzato per creare documenti HTML, che interpretati da un browser Web, diventano pagine Web; non è un linguaggio di programmazione, ma un linguaggio di markup, cioè descrive l'aspetto che deve avere il testo.
La sintassi del linguaggio HTML è stabilita e pubblicata dal World Wide Web Consortium (W3C), ed è basato su un altro linguaggio che ha scopi più generici, l’SGML.
Il W3C è un organismo internazionale, fondato nell’ottobre 1994 ed è composto da università e aziende private (IBM, Microsoft, Netscape Communications Corporation, Novell Softquad, Spyglass e Sun Microsystems) e coordinato da LCS (Laboratory for Computer Science). Esso ha lo scopo di guidare lo sviluppo del Web e di definirne gli standard, dunque di identificare i requisiti tecnici perché il Web diventi un “universal information space”.
Gli obiettivi e i principi strategici della W3C possono essere spiegati mediante 7 punti fondamentali: 1. Accesso universale; 2. Web semantico; 3. Fiducia; 4. Interoperabilità,; 5. Capacità evolutiva; 6. Decentralizzazione; 7. Multimedia eccitante.

BIBLIOGRAFIA
Corso di Informatica G. Michael Schneider – Judith L. Gersting

Jackson libri

SITI DI RIFERIMENTO
http://www.html.it/
http://it.wikipedia.org/wiki/Pagina_principale
http://www.liceofoscarini.it/
http://www.w3c.it/
http://www.webfract.it/
http://www.gdesign.it/