Ricerche laboratorio

Post N° 10

USABILITY E ACCESSIBILITY

Spesso si sente parlare dei concetti di usabilità e accessibilità in ambito web, ma, al contrario di come si potrebbe pensare, non si tratta di 2 discipline che si pongono lo stesso obiettivo.

l’accessibilità:è qualcosa che è stato oggetto di studio da parte del

WAI (Web Accessibilità Iniziative), un gruppo di lavoro costituito dal W3C, e

il WAI ha generato il WCAI (Web Content Accessibilità Iniziative), che, a sua

volta, ha rilasciato una serie di documenti che indicano le linee e i principi

guida per realizzare contenuti web accessibili al maggior numero di

persone.

I contenuti devono risultare accessibili da  tutti gli utenti con vari gradi di disabilità fisiche e cognitive., in particolare l’impossibilità di poter utilizzare un mouse, cecità o selettiva ai colori .

Nella società l’incidenza di queste disabilità è davvero ampia, quindi si pone con urgenza il problema dell’accessibilità al web anche per chi è disagiato dal punto di vista fisico.

Le pagine web i, secondo il WAI, dovrebbero essere costituite secondo 2 criteri: Consentire un’elegante trasformazione della

pagina da parte, di browser particolari. facile navigabilità e comprensibilità dei contenuti (principale obiettivo dell’usabilità).

Un testo può essere reso accessibile ad un utente cieco attraverso, ad esempio, un browser vocale, oppure con la possibilità che lo stesso software descriva immagini o tabelle se il codice di questi 2 elementi è stato pensato in maniera da facilitare il browser in questa operazione.

Di conseguenza si può affermare che l’accessibilità web si basa in gran parte sui concetti di compatibilità e portabilità del codice.Il concetto di usabilità, ha l’obiettivo che il sito risponda alle esigenze dell’utente, è stato pensato, mira ad un tipo di utente specifico.

L’usabilità offre però strumenti e metodi che possono essere usati per completare quello che l’accessibilità lascia soltanto indicato.

Infatti, attraverso l’interazione tra sito e utente, l’usabilità registra errori e fraintendimenti di

progettazione, indaga sulla ragione di questi errori tramite colloqui con l’utente per stilare poi una lista di suggerimenti migliorativi.Solo scovando gli errori e ponendo ad essi rimedio un prodotto può migliorare, ma anche osservando e parlando con gli utenti è possibile sapere se un contenuto è chiaro, se è stato capito, e quindi se il sito è navigabile.

Post N° 9

Storia del www

Il WWW acronimo di World Wide Web, inizia a divenire uno dei protagonisti del vasto ambiente di internet verso la fine degli anni 80, nel 1989.

Un fisico inglese, Tim Bernes lee, si pone il problema di come permettere a tutti i ricercatori un accesso più facile alle informazioni presenti nei diversi calcolatori senza la costrizione di dover conoscere linguaggi e sintassi complicati; da ciò l’ idea di un sistema che desse la possibilità di consultare informazioni , dati e immagini, tramite una struttura ipertestuale.

Bernes lee propone il suo progetto CERN( centro europeo di ricerca nucleare) di Ginevra e in collaborazione con un altro collega Robert Caillau scrive il suo primo GUI Browser:il world wide web. Dalla nascita del www in poi si avrà una vera rivoluzione di internet, il quale era prima utilizzato solo per scopi militari ed accademici, per scopi commerciali, professionali privati ecc.. infatti il World Wide Web è l’icona di una grande

Ragnatela mondiale, contenente un’infinità di pagine all’interno della quale possono muoversi sia utenti esperti che inesperti, proprio grazie alla semplicità d’uso della GUI (GRAPHIC USER INTERFACE), cioè l’interfaccia grafica. La crescita del www dagli anni  90 fino ad oggi è stata vertiginosa( da poche centinaia a più di venti milioni).

NASCITA DI HTML

L’HTML, acronimo di Hiper Text Language, fu sviluppato dallo stesso Berners Lee al CERN. Esso non è un linguaggio di programmazione, bensì un linguaggio per la marcatura degli ipertesti, basato su un altro linguaggio avente4 scopi piu generici: l’ SGML, acronimo di Standard General Markup Language, costituito da una marcatura generica, chiamata marcatura descrittiva che permette di descrivere la struttura generale dei contenuti del documento e non l’aspetto esteriore sullo schermo o su una pagina. Quindi sono evidenziate le parti in cui è strutturato il documento(paragrafi, capitoli) con altre particolarità del testo (note, tabelle, intestazioni) ma non vi è la codifica dei sistemi di scrittura che è finalizzata alla presentazione grafica. L’ HTML nasce appunto per risolvere il problema della complessità dell’ SGML. La lettre “M” diHTML sta per markup, cioè costituitoi da una serie di istruzioni chiamate Tag o marcatori, che servono per formattare i dati o per fare in modo che il browser capisca la disposizione dei vari elementi. All’ interno di una pagina(titolo, immagini, suoni,video, link ipertestuali ecc..) l’ atomo principale dell HTML è il Tag il quale è costituito da un elemento racchiuso tra due parentesi angolari ( i segni minore:< e maggiore:>). Questo è il Tag di apertura; mentre il Tag di chiusura è costituito da una parentesi angolare(<), da uno slash (/), l’elemento è da parentesi angolare(>). A sua volta l’ elemento può essere seguito da uno  o più attributi, il segno (=) e dal Valore; ad esempio <font face= “arial”>;parentesi angolare; Elemento, che in questo caso è font; Attributo, che in questo caso è face; il segno uguale; il Valore racchiusa tra due virgolette, che in questo caso è aria. Nel corso degli anni  l’ html non è rimasto invariato, ma ha subito dei cambiamenti; da ciò derivano le diverse versioni del linguaggio, con una serie di estensioni. Le prime versioni erano costituite da una grafica semplificata, caratterizzata dalla formattazione dei testi, dalla creazione di link ipertestuali tra le varie pagine. In seguito si ha un evoluzione, con l’ immissione in HTML della creazione di tabelle e strutture più articolate, animazioni, video, audio, interazione utente. Si arriva fino alla versione HTML 4.1; da questa versione il consorzio w3c ha fermato lo sviluppo dell’HTML e introduce l’XHTML 1.0, basato sul linguaggio XML, quindi sulla codifica UNICODE.

IL W3C

Il W3C, acronimo di WORLD WIDE WEB Consortium, fu creato da Bernes Lee nel 1994, in collaborazione con il CERN, con lo scopo di migliorare i protocolli e il linguaggio per il WWW e di sviluppare le potenzialità del web. Il W3C è costituito da 300 membri : aziende informatiche ( Microsoft, Apple, Adobe, Inteòl etc…), associazioni, università e istituzioni per la ricerca.

All’ interno del W£C vi è una commissione, costituita da un membro per ogni socieTà che fa parte del W3C ; essa prende il nome di “ Advisory Committee”. IL W3C sviluppa prodotti software del genere open-source e pubblicazioni che si possono scaricare, il cui scopo è la promozione e il sostegno del WWW. Tanti sono i progetti realizzati, tra cui il protocollo http, il metalinguaggio XML, i linguaggi per i documenti web  HTML, XHTML, SVG, RDF, OWL,ecc.,

Post N° 8

I <TAG META> E SCRIVERE PER I MOTORI DI RICERCA

I tag meta fanno parte del codice(X)html e si trova nell’HEAD; la loro funzione è quella di dare determinate informazioni ai server,ai browser e ai motori di ricerca.

Essi presentano delle caratteristiche che prendono il nome di attributi:

1.      Name

2.      http-equiv

3.      content

Per quanto riguarda il primo attributo, Name, è necessario specificare il valore della proprietà che si sta definendo;

http-equiv rappresenta un alternativo al Name;

l’attributo Contet necessita di un’attribuzione alla proprietà che si sta definendo.

I meta tag fondamentali sono tre:

1.Description

2.Keywords

3.Robots

I meta tag description e keywords servono a dare informazioni sul contenuto della pagina;nel meta tag description, il cui codice Html è------>meta name= “description” content= “inserire la descrizione della pagina”>----, si deve trovare la spiegazione del contenuto della pagina web in circa 125 caratteri; in questa descrizione deve essere usato un linguaggio semplice, ma esaustivo in modo da colpire l’attenzione dell’ utente;

invece il meta tag keywords, il cui codice html è---->meta name= “keywords” content= “inserire parole chiave”>------- serve ad indicare ai motori di ricerca una lista di parole chiave, incluse nella pagina web che si deve consultare; è importante che questa lista non contenga solo le parole specifiche del tema della pagina web, ma anche parole generiche che possano collegarsi al tema in discussione, in modo che anche persone che non  possiedano un grande bagaglio linguistico non incontrino problemi. Si possono inserire da 10 a 20 parole, ma le più importanti sono le prime tre della lista .È bene separare le parole della lista con una virgola.

INVECE IL META TAG Robots, il cui codice Html è ---> meta name= “robots” content= “….”> include dei consigli di comportamento, come ad esempio l’indicizzazione della pagina web.

Una cosa importante è la compatibilità tra i  meta tag Keywords e description e i contenuti testuali della pagina web.

Post N° 7

Information Architecture

Nel corso dei secoli l’uomo ha sentito sempre l’esigenza di organizzare le informazioni, ricorrendo a determinati metodi per arginare il disordine. Nel 1873 è stato Melville Dewey che ha ideato il sistema decimale: uno strumento che permetteva di organizzare e avere accesso al vasto numero di libri prodotti nel tempo. Successivamente, nel 1930 è stato Ranganathan che ha sviluppato un sistema chiamato “Classificazione a faccette”, il cui metodo venne ripreso nell’ultimo decennio da Rosenfeld e Morville che con il loro Information Architecture lo hanno adattato al world wide web.

L’attività dell’Information Architecture verte sulla progettazione di come organizzare i contenuti di un sito, studiando anche i sistemi di navigazione, finalizzati ad aiutare gli utenti a trovare e gestire le informazioni con successo.

L’information Architect opera seguendo alcuni aspetti fondamentali: dal marketing al committente, dall’engineering al management, dall’usabilità all’utente finale.

Le attività più importanti dell’Information Architecture sono:

·         Discovery: in questa fase vengono resi chiari il contesto, gli obiettivi e il target del sito, dopo aver precisato questi punti si procede con una ricerca sul mercato, preferibilmente entrando in contatto con gli eventuali utenti, in modo da riuscire a carpire meglio i bisogni e concretizzarli in modo esaustivo. L’information Architecture si approprierà dell’intera documentazione e nel caso in cui alcuni punti non saranno chiari, si potranno richiedere ulteriori incontri. Da questo momento il team comincerà ad interagire con il cliente.

·         Analysis: giunti in questa fase è necessario definire meglio il target, procedendo con dei questionari o interviste, poiché si deve giungere ad avere una buona conoscenza degli utenti.

·         Architecture: questa è la fase in cui viene definito il piano generale dei contenuti, che consiste nell’identificazione e descrizione delle macroaree, proseguendo fino alla descrizione delle singole sezioni, chiamate microaree. Durante la realizzazione del progetto si potrà realizzare un piano editoriale, in cui verrà indicato come verranno sistemati i contenuti e la frequenza di aggiornamenti di essi. Il passo successivo sarà la realizzazione del labeling, che consiste nella sistemazione delle sezioni e sottosezioni, nominandole ed etichettandole. Infine si passerà alla progettazione della navigazione del sito, si partirà dalla navigazione primaria, giungendo a quella secondaria fino alla realizzazione degli strumenti di ausilio (mappe, indici etc).

·        Develop: nell’ultima fase vengono definiti i dettagli e avviene la verifica dell’efficacia e della funzionalità del sito. In questo caso emerge la capacità dell’Information Architect, nell’essere riuscito a coniugare la chiarezza e la flessibilità del sito.

Idee a proposito Information Architecture

Il World Wide Web è un mondo a cui accedono moltissimi utenti, di qualsiasi età, cultura e preparazione scolastica, con il fine di cercare informazioni, notizie, per fare ricerche e qualunque altra cosa che esso può offrire.

Il mondo del world wide web è così vasto che a volte l’utente potrebbe smarrirsi, ma oggi esiste l’information architecture che si occupa dell’organizzazione dei contenuti di un sito, permettendo a chiunque di poter accedere ai vari siti senza il rischio di perdere di vista il motivo per cui si era collegato e riuscendo a trovare ciò che interessa.

Tenendo in considerazione il tempo che si vuol perdere per cercare le informazioni e non perdendo di vista le diverse fasce di età che accedono al “WWW”, naturalmente bisogna tener presente alcune regole fondamentali:

1.      un sito dev’essere facilmente leggibile, in modo tale che i visitatori possano sentirsi a proprio agio quando leggono le pagine di un sito;

2.      un sito dev’essere facilmente navigabile, in modo tale che i visitatori possano trovare subito ciò che a loro interessa;

3.      l’organizzazione e l’aspetto delle pagine web devono essere coerenti con tutto il sito;

4.      un sito dev’essere visualizzato velocemente perché i visitatori tendono a perdere subito interesse per il sito web se la pagina non si visualizza entro i primi 15 secondi.

L’idea dell’Information Architecture è stata una trovata geniale in modo tale che ci sia qualcuno che si occupi degli interessi e dei bisogni degli utenti, poiché il mondo del “WWW” ormai è entrato in moltissime case, poichè fanno ricorso a questo mondo i bambini per le ricerche scolastiche, gli studenti per i progetti scolastici o universitari, i disoccupati per cercare lavoro, i professionisti per cercare gli ultimi aggiornamenti che riguardano il loro settore, o comunque anche chi ha la curiosità di scoprire questo mondo di cui si parla tanto.

Scrivere per il web: Paragrafi, parole e caratteri

Gli utenti del Web tendono a scansionare un testo perché il loro interesse si concentra sempre sull’informazione che per loro è importante in quel momento, quindi non hanno nessuna intenzione di perdere tempo con contenuti considerati superflui; ciò che spinge gli utenti a scansionare i testi è la loro abitudine a leggere giornali e riviste, riflettendo questa loro consuetudine anche nelle pagine web.

Per soddisfare i bisogni degli utenti è necessario rispettare delle regole ben precise quando si scrive per il web, le quali sono:

·           essere concisi, scrivendo ciò che è necessario;

·           scrivere notizie pertinenti, nonché cose di cui si hanno prove;

·           essere chiari, ricorrendo ad un linguaggio essenziale.

Come nel giornalismo, anche nel web viene adoperata la teoria della “piramide invertita” la quale permette di porre le conclusioni all’inizio del testo, ampliandole progressivamente e se si rischia di scrivere un testo troppo lungo sarebbe preferibile frazionarlo in più pagine.

Nella stesura di un testo bisogna evitare frasi lunghe, nonché anche periodi complessi che potrebbero smarrire e confondere l’utente; inoltre è preferibile andare spesso a capo perché ciò migliora la percezione visiva.

I font svolgono un ruolo fondamentale all’interno del testo, i quali sono stati raggruppati in cinque famiglie dal W3C e ogni font porta con sé del significato.

   Gli stili sono:

·           Serif: Times New Roman, Garamond, Georgia caratterizzati dalle grazie;

·           Sans-Serif: Verdana, Arial sono senza grazie;

·           Cursive: riproducono la scrittura in corsivo;

·           Fantasy: sono ornamentali e decorativi;

·           Monospace: caratterizzati da una dimensione fissa di larghezza.

Quando si vuol far cadere l’attenzione su determinate parole-chiave è possibile ricorrere a degli espedienti: il “grassetto”, che dà enfasi ed è molto indicato per titoli e sottotitoli, poi abbiamo il “corsivo”, il quale però è sconsigliato perché il monitor composto da pixel orizzontali e verticali non rende molto bene i caratteri in diagonale, comunque viene spesso usato per i nomi di libri, riviste o parole straniere.

La “sottolineatura” è indicata solo per i collegamenti ipertestuali, mentre l’uso del “maiuscolo” è sconsigliato perché l’attenzione del lettore ricade sulla parte superiore della riga, dove l’occhio riconosce la forma della parola e rende facilmente leggibile il testo.

Per quanto concerne l’allineamento del testo è consigliabile quello a sinistra, poiché i margini irregolari dell’allineamento al centro e a destra possono far smarrire l’occhio, non trovando l’inizio di ogni riga.

Infine è importante dedicare attenzione alla scelta dei colori, poiché devono dare un buon contrasto sia ai daltonici e sia ai discromatici.

Fonti:

http://www.google.com

http://www.html.it

http://www.altavista.it

Post N° 6

Le teorie della Gestalt e l’applicazione al web design per la creazione di un sito più efficace e usabile a livello cognitivo

La Gestalt fu una corrente di pensiero, nata in Germania alla fine dell’Ottocento, grazie a Max Wertheimer, e i membri sostenevano che la percezione di ciò che ci circonda non è costituita dalla semplice somma di elementi e sensazioni primarie, ma piuttosto da un insieme strutturato di esse. La psicologia della Gestalt nacque nel contesto nell’associazionismo, secondo cui la mente percepisce per mezzo di associazioni proprie della mente, in seguito però alcuni critici sostennero che è la forma nella sua totalità a dare la percezione dell’oggetto e in questo contesto la teoria della Gestalt tentò di comprendere il formarsi di strutture ordinate nella realtà psichica.

Quindi la percezione va oltre la semplice somma degli elementi, e la Gestalt tentò di enunciare i principi che stanno dietro a questo processo.

I principi fondamentali della teoria sono:

Ø       Vicinanza: secondo cui in una stessa scena, i componenti tra lo vicini vengono percepiti come un tutto. Il principio esposto può risultare utile nel design dell’interfaccia di una pagina, avvicinando i componenti correlati tra loro e allontanando quelli che non lo sono, rendendo la struttura chiara.

Ø       Similitudine: in questo caso in una stessa scena, i componenti simili tra loro per forma, colore e dimensione vengono percepiti come collegati. Questo principio risulta utile quando si usano elementi simili per creare tasti di azione o link per collegare argomenti affini dal punto di vista contenutistico.

Ø       Chiusura: con questo principio si vuol spiegare che linee e forme simili vengono percepite come chiuse e complete, pur non essendole graficamente. In questo caso il principio risulta di notevole importanza nell’organizzazione di un sito, poiché non farà smarrire l’utente, dandogli sicurezza durante la navigazione e durante la ricerca di materiale informativo.

Ø       Figura-sfondo: secondo questo principio le figure vengono percepite innanzitutto dal contorno, mentre il resto viene inteso come sfondo. Quanto enunciato vuol affermare che più una figura si contrasta con lo sfondo più facile riuscirà riconoscerla e ricordarla.

La conoscenza e l’applicazione di questi principi nel web design permetteranno di creare un sito più accessibile e più usabile.

Fonti:

http://www.gestaltitalia.it/l a_gestalt.htm

http://www.google.it

http://www.html.it

http://www.altavista.it

http://www.virgilio.it

Post N° 5

I Colori e i formati immagini per il Web

I sistema esadecimale e il significato di RGB

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

Il sistema numerico esadecimale è un sistema numerico posizionale in base 16, cioè fa uso di 16 simboli, i quali possono assumere valore da 0 a 9 più le lettere da “A” a “F”.

Di seguito c’è la tabella che mette a confronto le rappresentazioni binarie, esadecimali e decimali dei numeri fino a 15:

bin    hex   dec            bin    hex   dec

0000  =  0  =  0            1000  =  8  =  80001  =  1  =  1            1001  =  9  =  90010  =  2  =  2            1010  =  A  =  100011  =  3  =  3            1011  =  B  =  110100  =  4  =  4            1100  =  C  =  120101  =  5  =  5            1101  =  D  =  130110  =  6  =  6            1110  =  E  =  140111  =  7  =  7            1111  =  F  =  15RGB è l’acronimo di Red (Rosso), Green (Verde), Blue (Blu) ed è un modello di colori additivo, poiché mescolandoli tra loro si ottiene quasi tutto lo spettro dei colori visibili.

Post N° 4

Differenze con HTML 

Nasce come nuovo standard di riferimento per il web, il w3 ha reso pubbliche le nuove raccomandazioni di XHTML 1.0: the extensible hypertext Markup language, come una riformulazione di HTML 4.0 in Xml 1.0, il w3 ha cercato di avvicinarlo al modello attuale HTML, cercando di eliminare le limitazioni che possiede, prima fra tutte quella che vede XML, incompatibile con molti browser.

I vantaggi di XHTML sono:

possibilità di realizzare nuovi elementi e nuovi attributi.XHTML rende comprensibile le pagine web con qualsiasi piattaforma.

XHTML sarà diverso da HTML perché: i documenti devono essere ben formati, si dice ben formato quando la unica violazione sia l’ assenza di una DTD in opposizione al documento validocce invece dispone o fa riferimento ad una DTD. In questo modo un documento ben formato è ad un livello più basso di conformità alle specifiche XML e permette l’ utilizzo di qualsiasi tag ritenuto necessario.

Gli elementi e gli attributi dovranno essere scritti in minuscolo, perché i tag sono sensibili all’ uso di minuscole o maiuscole.

I valori di attributo saranno scritti tra virgolette; altre caratteristiche di XHTML riguardano i CSS2 che si possono utilizzare con alcuni accorgimenti.

XHTML sembra la nuova svolta di W3C questa decisione sembra contemperare le esigenze di chi non voglia lasciare HTML ma nello stesso modo vuole poter utilizzare strumenti di markup multipiattaforma.

Post N° 3

Post N° 2

<html
 <head>
             <title>"presentazione"</title>
 <head>
<body bgcolor="thistle">
               <h1 align="center"><font color ="azure">Eccomi Qua!!!</font></h1>
               <p><font color="blue" size="5" >
               <hr>
<h2>Finalmente mi presento</h2>
<p>Sono Rosalia Di Giorgio, iscritta al 1° fc nel  corso di laurea lingue moderne per il web, facolta lettere e filosofia di Palermo, arrivo da un paese della provincia "Bisacquino".</p>
<p>Si può dire che questo è uno dei miei primi approcci con l' html, mi piace l' informtica, navigare su internet ed ho una buona conoscienza del pacchetto office, e di altri programmi di grafica.</p>
<p>Spero tanto che grazie a questo corso riesca a migliorare le mie conoscenze informatiche e di riuscire a creare finalmemnte dei siti web, cosa molto indispensabile per il corso di laurea.</p>
</body>
</html>