Informatica & altro

Post N° 6

In maniera superficiale si può affermare che per creare un sito web è sufficiente avere un'editor Html WYSIWYG e cercare sul mercato un server dove poterlo pubblicare.

Effettivamente le cose non stanno proprio in questo modo, perchè nella progettazione e nella realizzazione di un sito web bisogna prendere decisioni con cognizione di causa, e questo è possibile soltanto conoscendo i concetti fondamentali del web design.

Le 3 variabili di un progetto Web:

Indipendentemente della cura che si pone nella progettazione, a causa delle varie risoluzioni disponibili non si può mai sapere il modo in cui gli utenti visualizzeranno le pagine. La gamma di risoluzioni visualizzabili dipende dalla caratteristiche del monitor e della scheda video installata nel computer.

Le tre risoluzioni più utilizzate sono: 640x480, 800x600 e 1024x768 pixel. La risoluzione di 640x480 pixel è tipicamente usata da chi possiede monitor da 14 pollici, mentre chi ha un monitor da 15 pollici potrebbe utilizzare la risoluzione di 800x600 pixel.

Considerando che oggi i prezzi dei monitor sono notevolmente scesi rispetto ad alcuni anni fa, si può affermare che la maggior parte degli utenti avranno almeno un monitor da 15 pollici se non addirittura un monitor da 17 pollici.

Aldilà di queste considerazioni, la risoluzione dello schermo scelta dagli utenti è un fattore su cui il progettista web non ha alcun controllo. Bisogna allora decidere di realizzare il sito in modo da gestire più risoluzioni.

Realizziamo una pagina web per 800x600 pixel e visualizziamola ad una risoluzione di 640x480 pixel. Saremo costretti a eseguire continui scorrimenti a destra e sinistra per leggere il testo.
La presenza della barra di scorrimento orizzontale, al contrario della barra di scorrimento verticale, è considerata negativa e scomoda da molti utenti.

Alcuni progettisti sostengono che si dovrebbero sviluppare le pagine basandosi sul minimo comune denominatore che attualmente è rappresentato dalla risoluzione di 640x480 pixel ed, in effetti, molti importanti siti seguono questa impostazione. Si capisce però che utilizzando questa risoluzione per progettare le pagine web, si ha a disposizione meno spazio per gestire i contenuti di una pagina.

È anche possibile progettare una pagina web che si adatti alle varie risoluzioni dello schermo.

Adottare questa tecnica è un'ottima soluzione ma è sicuramente più impegnativo che sviluppare un layout dalle dimensioni "fisse".

Si può anche pensare di realizzare diverse versioni delle vostre pagine per ogni risoluzione e fare scegliere all'utente quale versione utilizzare, ma si tratta di una tecnica troppo laboriosa e poco usata.

• La velocità di connessione:

   

La velocità di connessione è una variabile che influenza notevolmente la progettazione delle pagine web. La maggior parte degli utenti non sopporta che il caricamento di una pagina richieda più di 20-25 secondi e quindi se la vostra pagina viene caricata lentamente il visitatore potrebbe andarsene prima ancora di iniziare a visualizzare i contenuti del sito. È necessario quindi eseguire il collaudo del sito a varie velocitàdi connessione per verificare che i tempi di caricamento delle pagine non superino i 20-25 secondi evitando di perdere potenziali visitatori.

Come velocità di connessione base, per effettuare il collaudo delle vostre pagine, si può considerare 28.8 Kbps, tipica degli utenti che utilizzano vecchi modem. Per poter effettuare un giusto collaudo delle nostre pagine dobbiamo sapere in che modo le pagine vengono inviate all'utente.

Quando si digita l'indirizzo web nel proprio browser, questo si connette al server web appropriato e richiede il file specificato. Il server, allora, fornisce il file in modo che il browser possa prelevarlo. La prima volta che si visita un sito, sarà necessario caricare sia il file Html che ogni immagine cui fa riferimento il codice Html.

Se successivamente si ritorna a visitare lo stesso sito, il browser preleva e analizza il file Html. Poi il browser controlla se le immagini specificate nel file Html sono già memorizzate nell'area cache del nostro computer.
La cache è un'area di memorizzazione temporanea delle pagine web e delle immagini, ed il browser tenta sempre di caricare le immagini dall'area cache piuttosto che ricaricarle dal web.

Questa breve spiegazione ci fa capire che dobbiamo stare attenti quando collaudiamo il nostro sito alle diverse velocità di connessione, poiché dobbiamo immaginare di essere un utente che visita il sito la prima volta. Proprio questo è il momento in cui l'utente sperimenta i tempi di prelevamento più lunghi.

Allora per effettuare un collaudo che ci dia realmente il tempo di caricamento è necessario svuotare ogni volta l'area cache del proprio browser.

La velocità di visualizzazione delle pagine è maggiormente influenzata dal numero e dalle dimensioni delle immagini contenute nelle pagine web.
Bisogna quindi non complicare troppo il progetto delle pagine riducendo il numero immagini. Considerando come connessione base 28.8 Kbps, nessuna immagine del sito web dovrebbe superare i 10-15 KB.

In fase di progetto, teniamo anche conto della funzionalità cache del browser, riutilizzando le immagini e la grafica quanto più possibile all'interno del sito.
Questo ci permetterà di avere oltre ad un aspetto uniforme delle pagine, anche un caricamento più rapido delle pagine. Infatti una volta che un'immagine è stata prelevata, questa permane nell'area cache per il numero di giorni specificato nelle apposite impostazioni del browser.

La maggior parte degli utenti non cambia queste impostazioni ed è quindi probabile che le immagini rimarranno nel disco fisso dell'utente per qualche tempo. Ogni volta che l'utente torna a visitare il nostro sito, verrà utilizzata la copia locale delle immagini, evitando di prelevare nuovamente le immagini dal server web.

• Browser:

   

Il browser è definito come un’applicazione client che utilizza il protocollo http per inoltrare le richieste dell’utente ad un web server.

Esempi: Internet Explorer, Netscape Navigator e Opera.

Ogni browser contiene un programma chiamato parser, che interpreta i tag contenuti in un file Html e visualizza i risultati sulla finestra del browser.

Purtroppo la logica di interpretazione dei tag Html varia da browser a browser e questo ha come conseguenza interpretazioni differenti e talvolta in conflitto fra loro per il modo in cui deve essere visualizzato il file Html.

A questo punto, viene da chiedersi per quale motivo si deve rendere il proprio lavoro compatibile con più browser. Il motivo è molto semplice, infatti, per un autore web l'obiettivo principale dovrebbe essere la realizzazione di pagine accessibili dal maggior numero possibile di utenti.

Un modo efficace per creare pagine visibili correttamente dai diversi browser consiste nell'usare l'approccio a "minimo comune denominatore". Questo approccio offre un'ampia accettabilità da parte dei browser in quanto l'autore web sceglie di utilizzare la penultima release di Html. Ad esempio quando furono introdotti i browser che supportavano Html 4.0, molti continuarono a lavorare in Html 3.2, confidando sul fatto che il codice sarebbe stato visualizzato in modo più uniforme in quanto tutti i tipi di browser l'avrebbero riconosciuto.

L'approccio a minimo comune denominatore è il metodo di programmazione più sicuro ed è ampiamente utilizzato nei siti interessati alla massima diffusione possibile delle informazioni.

Un altro modo per aggirare il problema è quello di includere nelle pagine del proprio sito web un avviso del tipo: "Questo sito è ottimizzato per Internet Explorer 5.0". Ciò significa utilizzare alcune estensioni specifiche di un browser ed essere consapevoli che il proprio sito non viene visualizzato correttamente da altri browser e non voler risolvere il problema. Adottare questo tipo di tecnica è sicuramente un metodo molto rapido di progettare pagine web ma potrebbe avere come conseguenza l'allontanamento di un significativo numero di lettori che se ne andranno immediatamente solo perché ritengono di non avere un browser adatto. L'uso di questa tecnica è indicato nel caso in cui si deve progettare un sito per un'intranet aziendale e quindi si conosce quale browser verrà utilizzato.

Rendere le pagine accessibili al maggior numero possibile di utenti è abbastanza difficile; allora è compito del progettista web fare le giuste scelte per garantire una buona visibilità a tutti.

TIPI DI BROWSER

Internet Explorer con le sue caratteristiche è un browser tradizionale.

In esso troviamo la barra del titolo, dei menù ed i vari pulsanti che ne consentono la gestione come: il pulsante indietro, avanti, preferiti.....ETC.

Ci sono anche altri tipi di browser come per esempio gli screen-reader utilizzati dagli utenti non vedenti. Essi vengono chiamati anche lettori di schermo. Questi programmi lavorano in background ( residente in memoria) che veglia sul sistema operativo attendendo la pressione dei tasti, la focalizzazione di un oggetto, l’attivazione di eventi. Ogni volta che accade una di queste cose, si attiva, prende visione di ciò che è accaduto, memorizza i dati che sono stati modificati, li trasferisce al sintetizzatore, software o hardware, il quale li riproduce vocalmente.

Insieme alla funzione di sintesi vocale, presente in tutti gli screen-readers moderni, esiste anche un altro dispositivo hardware che può essere collegato al pc: display braille che riproduce in alfabeto braille ciò che appare sullo schermo.

La tecnologia, comunque, si deve adeguare alle nuove regole di usabilità ed accessibilità anche per i nuovi browser creati sia per i cellulari sia per i palmari.

USABILITA’ E I FOGLI DI STILE:

I Fogli di stile (CSS, cascading style sheet) sono una tecnologia che si sta lentamente imponendo all'attenzione di coloro che realizzano siti. Si tratta di un linguaggio per il visual design, ovvero per controllare l'aspetto visivo degli elementi che costituiscono la vostra pagina HTML. I CSS sono una specifica diversa da HTML. HTML può contenere al suo interno delle istruzioni CSS associate ai tag HTML, oppure può fare riferimento, con un'apposita dichiarazione, ad un foglio di stile separato.

L'uso dei CSS può contribuire a rendere l'interazione più ricca e il sito più usabile. Ciò è possibile in diversi modi:

1. Innanzitutto, rendendo l'HTML più leggero, e dunque facendolo caricare più velocemente. In questo sito, ogni pagina ridisegnata con i CSS ha 3-4 Kbyte in meno della versione precedente. Una media del 15-20% in meno per ogni documento! Questi Kilobyte sono a carico dei CSS, che vanno caricati assieme all'HTML, ma è bene notare che vengono caricati una volta sola: tutte le pagine sono infatti controllate dagli stessi CSS. Le pagine successive alla prima rimangono più leggere.

2. Migliorando l'interazione attraverso l'ampliamento della zona sensibile dei link. Un esempio sono i menu a destra in questo sito. In questa pagina (in alto) potete provare a ingrandire il testo con le tre opzioni offerte. Un tempo, la zona sensibile (quella in cui si attiva la "manina") sarebbe stata solo quella del testo. Con i CSS è possibile ampliarla a tutta la larghezza della colonna, rendendo più comodo il click (ai test di usabilità è frequente incontrare utenti che SBAGLIANO a cliccare perché mancano il link senza accorgersene, a causa dello scarso controllo che hanno sul mouse e dell'area insufficiente del link). 

    

3. Sfruttando al meglio effetti di rollover senza l'uso di javascript.

4. Dando la possibilità di ingrandire il testo e di modificare le impostazioni anche del design senza ricorrere a Javascript e ad applicazioni server-side.

5. Eliminando la necessità di una versione stampabile separata. L'utente può stampare direttamente dal browser.

6. Arricchendo l'interazione con la creazione di menu contestuali a scomparsa attivabili solo con i CSS, con un uso minimo di eventi javascript. In alcuni siti, infatti, avere molte voci di menu può comportare un elevato aumento della complessità della pagina. Questi menu possono essere organizzati in gruppi e resi disponibili alla pressione di un link utilizzando la proprietà display dei CSS. (Attenzione: questi espedienti non sono usabili in sè, ma vanno valutati caso per caso. Contribuiscono comunque a rendere più divertente la navigazione, anche se a volte questo può andare a scapito dell'efficacia).

7. Migliorando la coerenza visiva delle pagine. Basandosi su regole che valgono per l'intero sito, i CSS aiutano a dare coerenza visiva alle diverse pagine, e un senso di ordine che contribuisce a rendere la visita più piacevole.

Inoltre i CSS consentono di modificare in meglio il design con prove successive in maniera economica, anche mentre il sito è online, accorciando di fatto i tempi e i costi del processo di miglioramento e modifica. Poiché la modifica di un sito per sopperire a problemi di usabilità riscontrati dagli utenti o nei test è il processo fondamentale in un design centrato sull'utente, i CSS, consentendo di svolgere questo processo senza toccare l'html, si dimostrano una tecnologia particolarmente utile e orientata all'usabilità.

Naturalmente, non basta usare i CSS per dire di aver fatto un sito usabile. Un buon uso dei colori, dei posizionamenti, degli spazi bianchi dipende dalla capacità del designer. Una navigazione coerente e un labeling system adeguato all'utenza, delle procedure che supportino il compito che l'utente vuole svolgere, sono tutti aspetti cruciali, che i CSS possono contribuire a rendere al meglio, ma che non possono certo prescindere dalle capacità del progettista e dai risultati dei test di usabilità. Ci sono molti siti brutti o mediocri realizzati con i CSS, così come con le tabelle. Ma questo dipende dall'uomo, come sempre, e non dalla tecnologia.

USABILITY AND ACCESSIBILITY

Il concetto di usabilità viene sviluppato all'interno dell'ergonomia tradizionale ma, fin dal suo sorgere, ha avuto forti rapporti con l'ergonomia cognitiva e, più in particolare, con gli studi volti a migliorare l'usabilità dei prodotti informatici, in particolare il software.

La storia del concetto di usabilità del software può essere divisa in quattro periodi principali:

1)    Anni Settanta: l'usabilità assente.

2)    Anni Ottanta: i laboratori di usabilità.

          In questa fase l'usabilità cominciava ad essere un problema e si  

          verificarono i primi episodi di rifiuto della nuova tecnologia, causati sia

          dagli alti costi per la formazione, sia dai mancati successi di molte

          esperienze di automazione di uffici. Si impose l'urgenza di avvicinare i

          due mondi, quello del progettista e quello dell'utente e l'usabilità, a

          partire dalla seconda metà degli anni '80, divenne l'obiettivo principale

          della HCI. Per andare incontro a queste nuove esigenze, da un lato

          vennero introdotte nella progettazione linee guida sul fattore umano,

          dall'altro vennero allestiti i primi laboratori di usabilità. Obiettivo

          principale di un laboratorio di usabilità era quello di testare i prodotti     

          con utenti potenziali, prima del lancio commerciale.

3)    Fine anni Ottanta, inizio anni Novanta.

          In questo periodo, l'HCI si era ormai integrata all'interno della       

          Computer Science. Ingegneria dell'Usabilità divenne la bandiera sotto

          la quale si riunirono diversi approcci metodologici all'usabilità nel corso

          degli anni Ottanta.

4)    Secondi anni Novanta: il participatory design.

      L'idea di base di questo approccio è che anche il miglior specialista di

      usabilità non può riuscire a rendere conto delle conoscenze situate

      relative alle pratiche, alla cultura del lavoro, all'uso delle tecnologie

      nei diversi contesti lavorativi. Si passa perciò dal diretto

      coinvolgimento degli specialisti al diretto coinvolgimento degli utenti.

      L'utente partecipa a tutte le fasi definitorie del processo assumendo il

      ruolo di corresponsabile, insieme con il progettista, del prodotto finito.

In particolare, per quanto riguarda l'usabilità, ci si rifarà alle linee guida e alle euristiche descritte da Jakob Nielsen, che possono essere riassunte nelle seguenti dieci caratteristiche:

Visibilità dello stato del sistema: è molto importante mantenere gli utenti informati sullo stato delle loro azioni.

Corrispondenza tra il sistema ed il mondo reale: è sempre bene conoscere ed utilizzare il linguaggio degli utenti finali. Questo accorgimento assicura una migliore comprensione e memorizzazione dei contenuti a chi utilizza il sistema informativo.

Dare all'utenza controllo e libertà: in genere, è bene lasciare agli utenti il controllo sul contenuto informativo del sistema, permettendo loro di accedere agevolmente agli argomenti e alle funzionalità presenti e di navigare tra essi, a seconda delle proprie esigenze. È fondamentale segnalare i collegamenti in modo adeguato, senza ambiguità di significato e posizionandoli nella pagina dove l'utente si aspetta di trovarli rispetto alle pagine precedenti.

Consistenza: è fondamentale riportare in ogni pagina elementi grafici sempre uguali, che riconfermino all'utente il fatto che si sta muovendo all'interno dello stesso sistema. Se, ad esempio, passando da una pagina all'altra, gli utenti incontrassero uno stile grafico diverso da quello della pagina appena visitata, sarebbero costretti ad analizzare ogni oggetto presente per verificare se stanno utilizzando lo stesso sistema (e se sì, in quale settore), o se ne sono usciti per errore.

Prevenzione dall'errore: occorre evitare di porre l'utente in potenziali situazioni critiche o di errore ed assicurare la possibilità di uscirne tornando alla stato precedente. È bene segnalare chiaramente in quali pagine conducono i collegamenti e cosa vi si troverà, così da non generare false aspettative, poi disilluse, o confusione nella scelta del collegamento da utilizzare, rendere inoltre sempre disponibili le funzioni per uscire dal programma o per ritornare alla home page.

Riconoscimento più che ricordo: è consigliata la scelta di layout semplici e schematici, per facilitare l'individuazione e la consultazione delle informazioni sulle pagine. È bene quindi segnalare sempre chiaramente i collegamenti, ed altri elementi utili alla navigazione, per evitare che gli utenti debbano "scoprirli" da soli ogni volta che entrano nel sistema.

Flessibilità ed efficenza: è bene dare agli utenti la possibilità di una navigazione differenziata all'interno del sistema, a seconda della propria esperienza nell'utilizzo del browser e della conoscenza del sistema stesso. Gli utenti non esperti, ad esempio, amano essere guidati passo per passo, mentre gli utenti più esperti preferiscono utilizzare scorciatoie, delle quali anche utenti non esperti, man mano che aumenta il loro livello di esperienza, possono usufruire.
Un altro aspetto dell'efficienza è anche il tempo di risposta del sistema alle azioni dell'utente, problema che nelle applicazioni web è tra i più critici. Nei siti web, il tempo massimo di attesa non deve superare i 10 secondi, tempo oltre il quale gli utenti non mantengono più l'attenzione sul dialogo.

Estetica e progettazione minimalista: le pagine di una web-application non dovrebbero contenere elementi irrilevanti o raramente utili. Gli elementi grafici inseriti nelle pagine se troppo colorati, elaborati e di dimensioni troppo grandi rispetto ai testi, rischiano di mettere in secondo piano il contenuto informativo della pagina: gli utenti saranno infatti troppo impegnati ad individuare il significato delle immagini e a cercarne la coerenza con i restanti elementi del sistema, per dedicarsi all'analisi dei contenuti informativi delle pagine.

Aiutare gli utenti a riconoscere, diagnosticare ed uscire dalle situazioni di errore: i messaggi di errore dovrebbero indicare con precisione il problema e suggerire una soluzione costruttiva. Ad esempio, qualora l'utente non avesse compilato correttamente uno o più campi a disposizione sulla pagina, il messaggio successivo all'invio dovrebbe segnalargli quali errori sono stati commessi, cosi da permettergli di recuperare con facilità all'invio successivo.

Aiuto e documentazione: è meglio che il sistema si possa usare senza documentazione, ma questa resta necessaria. L'aiuto dovrebbe essere facile da ricercare e focalizzato sulle attività dell'utente, elencare azioni concrete eseguibili e mantenere dimensioni contenute.

L' accessibilità, invece, è una delle tappe base nella progettazione di un sito Internet per garantire all'utente una facile fruibilità.

L'accessibilità riguarda due aspetti:

1)l'accesso facilitato per le persone disabili.

2)Per le persone non disabili una buona accessibilità è garantita da vari elementi: dimensioni del testo adeguate, tipi di carattere leggibili, un buon contrasto testo-sfondo, una buona distribuzione del testo che riguarda l'organizzazione in capitoli, paragrafi, interlinee o in generale la formattazione della pagina, la possibilità di avere accesso alla pagina indipendentemente dal metodo utilizzato (computer, PDA, telefono cellulare).

Per quanto riguarda l'accessibilità, si seguiranno le regole contenute nelle  Web Content Accessibility Guidelines 1.0, le linee guida del WAI (Web Accessibility Initiative) pubblicate sul sito del W3C.org. Se seguite con cura, queste indicazioni permettono, per esempio, agli utenti disabili di accedere senza difficoltà (o con minori impedimenti) al contenuto dei siti Web o nel caso specifico di web-application.

Le regole WAI possono essere riassunte in pochi principi, estremamente semplificati. È ovvio che per raggiungere gli obiettivi indicati da queste linee guida non bastano semplici accorgimenti, ma è necessario applicare precise scelte tecniche, che richiedono esperienza di programmazione, in particolare nei linguaggi Html e Css, più usati per creare pagine Web di base. Obiettivo finale: rendere il sistema realmente fruibile da tutti. Si possono adottare i seguenti passaggi:

1)

Fornire alternative equivalenti al contenuto audio e video, attraverso forme di contenuto integrativo o specifiche etichette scritte;

2)

Non fare affidamento sul solo colore;

3)

Usare marcatori (tag Html) e fogli di stile (Css), e farlo in modo appropriato;

4)

Chiarire l'uso di linguaggi naturali;

5)

Creare tabelle che si trasformino in maniera elegante e coerente (al variare delle condizioni di visualizzazione);

6)

Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante e coerente;

7)

Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo;

8)

Assicurare l'accessibilità diretta delle interfacce utente incorporate;

9)

Progettare in modo da garantire l'indipendenza dal dispositivo di visualizzazione (tipicamente il browser);

10)

Usare soluzioni provvisorie;

11)

Usare le tecnologie e le raccomandazioni del W3C.org;

12)

Fornire informazione per la contestualizzazione e l'orientamento;

13)

Fornire chiari meccanismi di navigazione;

14)

Assicurarsi che i documenti siano sempre chiari e semplici.

Secondo indicazioni internazionali, recepite e divulgate in Italia da Iwa-Italy, e in Europa dal consorzio EuroAccessibility i livelli di accessibilità si suddividono in tre categorie: A, AA e AAA. Il primo stadio si raggiunge quando si risolvono problemi che "devono essere risolti" (priorità definita "must"), perché impediscono l'accesso ai contenuti a determinate categorie di utenti. Il secondo quando si affrontano problemi che "dovrebbero essere risolti" (priorità definita "should") per facilitare l'uso della pagina a determinate categorie di utenti. Infine, la tripla A si ottiene quando si eliminano problemi che "possono essere risolti" (priorità definita "may") al fine di migliorare l'utilizzo della pagina da parte di alcune categorie di utenti. Per rendere accessibile un sito si devono correggere subito i problemi con priorità A e in seguito i problemi di livello AA. Con accessibilità AAA si raggiunge poi il livello più elevato. L'intenzione è quella di riuscire a realizzare, attraverso SSSI, sistemi che abbiano accessibiltà anche di grado AAA.

L'accesibiltà sarà testata mediante applicazioni studiate per eseguire automaticamente queste valutazioni: Screen Reader, Validatori, LIFT o browser testuali (Lynx). Lo strumento più noto è certamente il W3C Validator, mentre il più famoso Screen Reader è invece JAWS.
Per le imprese o i privati non esiste un preciso obbligo a rispettare queste norme. Oggi molti produttori di software, in particolare per il content management, stanno adeguando i sistemi di publishing affinché permettano la costruzione di siti accessibili. Un obbligo, comunque, non c'è. Per la Pubblica Amministrazione, invece, è diverso. La Circolare del Ministero della Funzione Pubblica del 13 marzo 2001, n. 3 “Linee guida per l'organizzazione, l'usabilità e l'accessibilità dei siti web delle pubbliche amministrazioni” cui ha fatto seguito la Legge nº 4/2004 sull'accessibilità pubblicata sulla Gazzetta Ufficiale il 17 gennaio 2004 (“Legge Stanca”), impongono alla PA italiana l'adozione di accorgimenti per l'accesso facilitato alle informazioni e l'impiego di "tecnologie assistite" che permettano alle persone disabili, superando o riducendo le condizioni di svantaggio, di accedere ai servizi erogati dai sistemi informatici.
Una web-application accessibile è certamente di qualità. È anche, secondo Nielsen, una scelta economica.

I colori e i formati immagini per il Web

• Il sistema esadecimale e il significato di RGB

Il sistema numerico esadecimale è un sistema numerico posizionale in base 16, cioè che utilizza sia i numeri da 0 a 9, ma anche le lettere dell'alfabeto che vanno dalla A alla F. L'utilizzo del formato esadecimale diventa fondamentale quando c'è bisogno di ragionare con la rappresentazione interna dei numeri nella memoria del computer.
Per quanto riguarda il significato di RGB questo non è altro che l'acronimo di " Red - Green - Blue, ossia, Rosso - verde - blu". L'RGB vengono definiti anche come colori additivi in quanto sommando bene questi colori, a seconda della percentuale in cui vengono miscelati possono variare o dare come risutante il bianco nel caso in cui si manifestino nella lora massima intensità, mentre se la percentuale dei tre colori identica  si otterà una tonalità neutra di grigio; il nero invece si ottiene azzerando i tre colori primari.La combinazione dei colori RGB avviene dunque per sintesi additiva.
L'RGB viene usato nei dispositivi elettronici come il monitor o lo scanner per trasmettere immagini e colore.

• La codifica dei colori principali (es. giallo,bianco e nero) con il sistema esadecimale

Nel linguaggio HTML per indicare i valori RGB si utilizza il sistema di codifica esadecimale al posto di quello decimale.
I codici esadecimali dei colori sono costituiti da numeri di sei cifre. Le prime due cifre definiscono il livello del rosso, le altre due indicano quello del verde e la terza coppia di cifre quello del blu. Questi valori si possono usare in vari elementi del codice Html, ma devono essere sempre racchiusi fra doppie virgolette e preceduti dal simbolo cancelletto #. Facendo un breve ragionamento avendo per ogni colore due cifre esadecimali, il numero di gradazioni di ogni colore base che si può ottenere è di 256; per un totale di 16.777.216 combinazioni differenti.

• Il significato di "Web Safe color" ed eventuale vantaggio e utilizzo odierno dei colori Web Safe

• Le differenze sostanziali tra BMP, GIF, JPEG, PNG

Formato Gif.(gif)
GIF è acronimo di Graphical Interchange Format.Il formato Gif è stato progettato in modo specifico per rilasci on-line ed è stato sviluppato originariamente per Compuserve nel 1980.Questo formato usa uno schema di compressione LZW.Le immagini Gif sono accettate da tutti i browser, sono piccole e fanno cose che altri formati non fanno, come le animazioni, le trasparenze e gli interlacciamenti.
Il formato Gif per definizione può contenere al massimo solo 256 colori, diversamente dal formato Jpeg che per definizione contiene milioni di colori (24-bit).Vi sono due formati di Gif: GIF87a, che supporta le immagini trasparenti e interlacciate, e il GIF89a che supporta anche le immagini animate. L´algoritmo di compressione delle Gif è lossless, cioè è una tecnica che riduce la dimensione del file senza sacrificare i dati originali.

Jpeg è l´acronimo di Joint Photographic Experts Groups.Il formato Jpeg offre un´alternativa a 24-bit al formato Gif che invece è a 8-bit. Questo formato è stato sviluppato in modo specifico per le immagini stile foto; l´algoritmo utilizzato fa una compressione lossy, cioè rimuove le informazioni dall´immagine e quindi causa una perdita di qualità. Inoltre, contrariamente al file Gif, Jpeg richiede una compressione ed una decompressione. Questo significa che Jpeg richiede di essere decompressa per essere visualizzata. Sebbene Gif e Jpeg abbiano stessa dimensione, o addirittura qualche volta Jpeg sia più piccola, lo scarico di una Jpeg potrebbe essere più lungo in quanto si aggiunge il tempo di decompressione.
In conclusione: ci possono essere buone ragioni per salvare foto in formato Gif (animazione, trasparenza, interlacciamento) ma non ce ne sono altrettante per salvare grafica in formato Jpeg, a meno che la grafica non sia combinata con fotografie.

Formato JPEG (.jpg)

Formato PNG (.png)
Png è acronimo di Portable Network Graphics.Il formato PNG è stato sviluppato con l´obiettivo di sostituire il formato GIF per la pubblicazione delle immagini su web. Per quanto riguarda l´uso nel web, i vantaggi di PNG rispetto a GIF si possono riassumere in:
1.Trasparenza variabile a diversi livelli di opacità (mentre GIF supporta una trasparenza del tipo "tutto o niente").
2.Interallacciamento bidimensionale: anche qui PNG migliora una caratteristica presente anche nel formato GIF.
3. Correzione di gamma, una tecnica che permette di compensare, sia pure solo approssimativamente, le differenze di visualizzazione di un´immagine nel passaggio da una piattaforma hardware ad un´altra.
4.Compressione: in genere le immagini compresse con PNG sono da un 5 a un 25% più leggere delle immagini compresse con GIF (pur essendo anche questa una compressione "lossless").L´unica caratteristiche di GIF che non è supportata da PNG è la possibilità di creare sequenze di immagini animate.

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

Il formato predefinito per il salvataggio delle immagini scandite è di solito bitmap o tif. Tutti i software permettono la memorizzazione in differenti formati e nel formato JPG (quello più usato su Web), alcuni prevedono la possibilità di selezionare il fattore di compressione da utilizzare, mediando così tra qualità e dimensione dell’immagine.La manipolazione delle immagini acquisite è da svolgere successivamente, con programmi di fotoritocco.

• Cosa sono Gli attributi ALT e TITLE e la loro importanzaTitle
  E' fondamentale ricordarsi di inserire sempre il tag .Questo marcatore, inserito nell', deve contenere le più importanti keywords del sito, visto che molti motori di ricerca danno molta importanza a questo tag. Importante è scrivere titoli indicando esattamente di cosa parla la pagina.
   Alt-immagine
  Il tag ALT dell' immagine è utilizzato per inserire del testo alternativo nel caso l'immagine non comparisse. Poiché descrive una parte importante della pagina (solitamente il titolo di un' immagine), i motori di ricerca considerano il testo dell'alt importante.Nei comandi ALT inserire le parole che inserite tra i meta tag, magari scrivendo una frase espressiva che contiene più parole chiavi. Basta che ci si ricorda che quando l'utente punta il mouse sull'immagine ciò che scrivete in ALT sarà leggibile.

• Scrivere per il Web: Paragrafi, parole e caratteri

Scrivere un libro, un articolo o scrivere sul web non è certo la stessa cosa, infatti ogni tipo di scrittura ha le sue regole più o meno rigide che immancabilmente devono essere rispettate.Ricordo ancora i primi temi in classe quando l'insegnante mi suggeriva di essere più prolissa possibile, beh, per il web non è la stessa cosa...scrivere per il web vuol dire essere concisi ma soprattutto concreti, per fare ciò possiamo aiutarci grazie ad alcune massime enunciate da Grice :

 -Scrivi la quantità di informazione necessaria
 -Scrivi ciò di cui hai prove
 -Sii pertinente
 -Sii chiaro

Le prime frasi sono fondamentali per tutto il testo paragrafi compresi.Occorre dedicare un periodo ad un solo concetto. Quando abbiamo esaurito quell'argomento e passiamo al successivo, sarebbe opportuno chiudere il periodo. Questo faciliterà visivamente il processo di comprensione del lettore. Bisogna scrivere in modo da evitare tutte le parole superflue, frasi lunghe e periodi troppo complessi che potrebbero confondere l'utente.La lettura si può sudividere in due parti: la prima si base nel riconoscimento visivo, la seconda  nell'estrazione del significato.Per migliorare la percezione visiva occorre spezzare i periodi andando frequentemente a capo. Un unico blocco di testo viene visto come un ostacolo insormontabile. Evidenziate le parole chiave: per farlo è meglio utilizzare il grassetto, piuttosto che il corsivo come si usa su carta, perché il monitor, composto da pixel orizzontali e verticali, non rende bene i caratteri disposti in diagonale, come nel caso del corsivo. Possiamo anche usare un colore per evidenziare il testo ma dobbiamo usare un colore saturo e non troppo luminoso (se usate il fondo chiaro). Il colore che più risalta all'occhio è il rosso. Ma se lo usiamo per i link, evitiamo di usarlo per termini che non sono linkati.E’ meglio utilizzare i link con parsimonia, e solo per informazioni secondarie e non determinanti per la comprensione del discorso, perché sono dei distrattori, dato che danno all'utente la tentazione di seguirli. E' meglio naturalmente mettere le voci più importanti in alto. Gli articoli non dovrebbero essere troppo lunghi. Assolutamente vietato spezzarli su più pagine, una scomodità inaudita. Nielsen consiglia semmai di dividere l'argomento in più articoli diversi. Infine, tutto questo sarà vano se non scegliamo colori che assicurino un buon contrasto. Caratteri neri su sfondo bianco.Fare attenzione ai colori che vengono scelti: devono dare un buon contrasto anche per daltonici e discromatici. Infine è meglio utilizzare un carattere tipografico standard. Oltre a essere facilmente riconosciuto, il che aiuta la lettura, eviteretemo di creare inconvenienti visivi a quegli utenti che non dispongono di una particolare font. I caratteri più diffusi sono: il times, usato molto in stampa, con le grazie che aiutano la lettura; l'arial e il verdana, senza grazie, più leggibili su monitor specialmente con caratteri di dimensioni piccole (soprattutto il Verdana); il courier, carattere con grazie monospaziato, che ricorda la macchina da scrivere. Questi consigli non sono affatto semplici da seguire e che quindi spesso è necessario un laborioso processo di riscrittura, di adattamento e di 'potatura' del testo, soprattutto se lungo.  

Cinà Lidia

Bibliografia:

http://www.informatica.mcgraw-hill.it/minisiti/photoshopcs/PScsdlds/colori_01.pdf
http://pro.html.it/articoli/id_221/idcat_41/pag_3/pag.html
http://www.dipmat.unict.it/%7Ecantone/HomePageHTML/Colori.html 
Appunti vari
http://www.diodati.org/scritti/2002/g_alt/index.asp
Dispenza: Scrivere per il Web: Paragrafi Parole e caratteri

Informaction Architecture

Con il termine Informaction Architecture ci riferiamo all'organizzazione dei contenuti nel mondo di Internet. Pubblicare qualcosa in Internet, creare un sito, non vuol dire soltanto riempire uno spazio con un'insieme di informazioni poste a casaccio, come nella vita reale anche nel mondo virtuale occorre un ordine che permetta a qualunque utente di poter accedere alle informazioni in modo semplice e veloce, solo così quest'ultime potranno essere assimilate e trasformate in conoscenza.

Grazie all'architettura dei contenuti, possiamo organizzare gli schemi di navigazione, facilitare il reperimento delle informazioni, rendere un sito usabile e accessibile. A parole tutto ciò sembra di facile realizzazione, ma non è sempre così! La maggior parte dei web designer devono fare i conti con quelle che sono le aspettative delle aziende per cui lavorano e coinciliare tali aspettative con una progettazione adeguata;possiamo comunque individuare le attività più importanti che caratterizzano "l'informaction architecture":
1)Discovery:questa si può definire come la fase più importante di questo processo. Bisogna individuare quello che è il contesto, il target di riferimento e definire quelli che sono gli obietti che si vogliono raggiungere; per fare ciò occorre operare una profonda ricerca sul mercato, mettersi direttamente in contatto con i possibili utenti in modo da poter progettare in modo esaustivo i contenuti.Questa fase è portante in quanto non è possibile una volta creato il percorso tornare indietro per poter corregere eventuali errori d'impostazione.
2)Analysis:in questa fase occorre approfondire i concetti sviluppati nella fase di discovery ed in particolare fare una definizione precisa del target, mediante interviste, questionari....l'obiettivo è sviluppare una solida conoscenza degli utenti, sia per quanto riguarda il profilo sociodemografico, ma anche gli obiettivi e le aspettative in relazione al sito.
3)Architectura:è la fase in cui si concretizza il lavoro svolto in precedenza; si identificano le macroaree dei contenuti fino ad arrivare alla realizzazioni delle microaree ossia delle singole sessioni di lavoro.si può usufruire di un piano editoriale che descriverà in che modo saranno organizzati i contenuti. Successivamente si passa alla realizzazione del labeling ossia l'attività di nominare o etichettare concetti e cose. Ultima ma non meno importante è la progettazione della navigazione all'interno del sito, che può essere di due tipi: primaria e secondaria e la creazione di mappe, indici....
4)Develop:quarta ed ultima fase che si occupa della definizione dei dettagli, ma anche di verificare l'efficacia e la funzionalità del sito creato.

Cinà Lidia

Bibliografia:

Antonino di Sparti "un computer non più calcolatore" Sellerio.
http://www.tinext.com/soluzioni/webdesign.htm
http://pro.html.it/articoli/id_301/idcat_43/pag_1/pag.html
http://la.bazzman.com/

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

L'XHTML nasce dall'unione di HTML+XML. Com'è noto, l'HTML è un linguaggio di marcatura che rappresenta i contenuti di una pagina web con molta semplicità.A sua volta l'HTML è una applicazione di SGML(Standard Generalizated Markup Language) che viene considerato da tutti il linguaggio standard per le pubblicazioni nel W.W.W.Quest'ultimo però è un linguaggio ricco di caratteristiche e molto flessibile, e proprio per questa sua ricchezza e complessitàè impossibile usarlo in diversi ambienti.L'HTML ha risolto il problema delle complessità del SGML costituendosi soltanto di un piccolo insieme di tag strutturali e semantici adatti alla realizzazione di semplici documenti e divenendo accessibile a tutti.

Come bisogna, dunque, rappresentare la flessibilità e le potenzialità del SGML?

Questo problema fu risolto creando l'XML una sorta di "super linguaggio" che consente la creazione di nuovi linguaggi di marcatura. E' posto alla base di tutte le nuove specifiche tecnologiche rilasciate dal W3C. L'XHTML come dicevamo sopra, nasce dall'unione di HTMLe di XML. Il W3C ha preferito fare questa unione pittosto di inventare una versione ulteriore dell'HTML.4.0. I tag rimangono infatti identici,cambiano solo le regole sintattiche.Questo fa si che vi sia compatibilità con i software che supportano l'HTML. L' XHTML permette agli sviluppari di documenti  di esprimere le loro idee attraverso marcatori. La famiglia dell'XHTML è nota per accogliere queste estenzioni attraverso moduli XHTML che permettono la combinazioni di caratteristiche nuove ed esistenti.

Le versioni di XHTML attualmente disponibili e pubblicate come raccomandazioni dal W3C sono tre. L'XHTML 1.0 pubblicata il 26 gennaio 2000 e seguita da una versione rivista dell'ottobre 2001 e si basano sulle tre DTD già definite per questo linguaggio.

• DTD Strict
• DTD Transitional
• DTD Frameset

E' una versione ridotta del linguaggio, pensata per dispositivi mobili come cellulari.

L'XHTML a differenza dell'HTML è "case sensitive", e l'insieme dei tag che definiscono la struttura di un documento sono raggruppati in una serie di moduli indipendenti che possono essere implementati o esclusi secondo le necessità.

Bibliografia

XHTML Basichttp://www.html.it/xhtml/xhtml_02.htm
http://www.w3c.cnr.it/traduzioni/xhtml1-it.html

Cinà Lidia