Ebook gratis da leggere Facoltà di Scienze MM.FF.NN. Università dell’Insubria – Como Corso di Linguaggi per il Web I • http://www.ebookgratis.net/ebook.asp?id=495 Servizi e Programmi indispensabili per WebMaster 3 – XHTML Usabilità Accessibilità 1 2 Tecniche cross browser CSS RESCALABLE o responsive • set di commenti condizionali <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> • http://css.html.it/articoli/leggi/596/i-css-in-internetexplorer-7/3/ • http://www.mrwebmaster.it/css/articoli/usarecommenti-condizionali-fogli-stile_812.html • PROBLEMA: dimensioni diverse di finestre browser • SOLUZIONE: Javascript e CSS responsive che si adatta alla dimensione delle finestra di browser MA non funziona con tutti i browser • provare a cambiare dimensioni finestra su: • • • • http://www.getskeleton.com/ http://dryan.github.com/css-smart-grid/ http://www.amazium.co.uk/#download http://css.html.it/articoli/leggi/3773/responsive-image-gallerycon-html5-css3-e-jquery-photoswipe/ • http://www.juliusdesign.net/12988/responsive-web-design-imigliori-tutorial-risorse/ • http://www.fmdesignblog.com/il-concetto-di-responsive-webdesign-progettare-un-sito-web-per-diverse-risoluzioni-conmedia-queries.html • http://net.tutsplus.com/tutorials/html-css-techniques/responsiveweb-design-a-visual-guide/ • .box { width: 400px; [if IE 6] width: 600px; padding: 100px 0; } • http://www.juliusdesign.net/2158/conditional-cssusiamo-il-css-condizionale/ 3 Contratti tipo per l’informatica 4 CNIPA • http://www.to.camcom.it/svilupposoftware • http://www.contrattitipo.camcom.it/P42A295C89S82/Contratto-tipo-disviluppo-software.htm • e scaricare il file PDF da usare per evitare litigi con il committente • Centro Nazionale per l’Informatica nella Pubblica Amministrazione • organo incaricato della gestione degli aspetti regolativi e applicativi della legge www.pubbliaccesso.it Associazione IWA • http://www.iwa.it/ • associazione di settore per essere aggiornati, conoscere altri webmaster, avere occasioni lavoro • possibilità di usare il logo per distinguersi come azione di personal branding • documenti pubblicati: Linee guida recanti i requisiti tecnicie i diversi livelli per l’accessibilità e le metodologie tecnicheper la verifica dell’accessibilità dei siti Internet • per chi vuole creare informatica per la PA Altre risorse per creare sito http://webpublishingtools.masternewmedia.org/ 5 6 1 Personal branding HTML, CSS • come procede? cosa serve da spiegare? • • • • • • HTML, CSS definisce come viene visualizzata una pagina sul monitor curando l’aspetto grafico ma non la struttura dell’informazione http://www.gianlucapisano.it/index.php www.bernardello.it http://www.mucignat.com/blog/ http://www.dcopelli.it/ http://www.antoniograzioli.it/ • informe.com/personal/personal_branding_template_joomla/ • http://www.bernardello.it/articoli/installare-joomla-in-locale-coneasyphp.htm • http://www.joomlabay.it/faq-commerciali/come-installarejoomla-in-locale-con-easyphp.html • http://www.unpodicose.it/joomla.html • http://www.antoniograzioli.it/joomla/installare-joomla-15-inlocale-con-xampp.html http://www.youtube.com/watch?v=RmkrsUXzbcY • http://www.youtube.com/watch?v=VDCVYTbqq3M 7 codificare dato vs informazione 8 Marcatura nei formati di testo • La codifica di alto livello trasforma il dato testuale grezzo in fonte esplicita di informazione • dato: ciò che è immediatamente presente alla conoscenza, prima di ogni elaborazione; (in informatica) elementi di informazione costituiti da simboli che debbono essere elaborati • informazione: notizia, dato o elemento che consente di avere conoscenza più o meno esatta di fatti, situazioni, modi di essere • La marcatura si usa per descrivere codici aggiunti al testo digitale per definire – la struttura logica, indica le parti che compongono un testo: e.g. introduzione, capitoli, conclusione – la presentazione, indica come il testo deve apparire sullo schermo o in stampa in termini di caratteristiche fisiche: dimensione pagina, carattere, colori, etc. • 56100 da solo è un dato, CAP 56100 diventa informazione in ambito postale 9 Linguaggi di marcatura generici 10 Linguaggi di marcatura specifici • presentazione e struttura logica NON si possono separare in un documento cartaceo • I linguaggi di marcatura specificinon mantengono la struttura logica separata dal formato di presentazione • separazione possibile tra presentazione e struttura logica in un testo digitale con i linguaggi di marcatura generici perché descrivono la struttura logica di un testo, ma non il formato di presentazione, il vantaggio è che lo stesso testo potrà essere presentato in tanti modi diversi come si preferisce • Esempi: Word, RTF • Esempi: – XML (Extensible Markup Language) – SGML (Standard Generalized Markup Language) Linguaggi di descrizione di pagina • I linguaggi di descrizione di pagina indicano come mostrare un testo sullo schermo o in stampa • Esempi: PostScript, PDF 11 12 2 XML XML • HTML definisce come viene visualizzata una pagina sul monitor ma non la struttura dell’informazione • XML eXtensible Markup Language, meta-linguaggio ovvero linguaggio che definisce un linguaggio, per descrivere qualunque classe di documento strutturato indipendente dalla presentazione del documento usato per scambiare dati tra piattaforme diverse grazie alla separazione tra contenuto e forma: 1. le informazioni vengono estratte dalla base dati 2. le informazioni sono strutturate in documento XML 3. il documento XML è passato ad altra piattaforma 4. il documento XML è trasformato nel formato più adatto per lo utente su altro sistema • indipendenza dalla piattaforma e dal sistema operativo • linguaggio aperto compatibile con il codice ASCII • semantica creata grazie alla meta-informazione 13 14 XML XML <?xml version="1.0"?> <!DOCTYPE ordine [ <!ELEMENT ordine ( cliente, prodotto+ )> <!ATTLIST ordine id ID #REQUIRED> <!ELEMENT cliente EMPTY> <!ATTLIST cliente db CDATA #REQUIRED> <!ELEMENT prodotto ( importo )> <!ATTLIST prodotto db CDATA #REQUIRED> <!ELEMENT importo ( #PCDATA )> ]> <ordine id="ord001"> <cliente db="codcli123"/> <prodotto db="prod345"> <importo>23.45</importo> </prodotto> </ordine> • usa tag di inizio e fine, per esempio <importo> e </importo>, per marcare i campi informativi • un campo informativo racchiuso tra due marcatori viene detto elemento (element) e può essere arricchito dalla presenza di coppie nome/valore (nell’ esempio, id="ord001") dette attributi (attribute) • riferimento http://www.w3c.it/ • XML è dappertutto, anche nei file PDF che create 15 16 XML e internet struttura di un documento XML • casi di studio http://xml.coverpages.org/ • metadati e web automation(XHTML,SOAP,SVG) • commercio elettronico ed online banking (OFX,XMLDigitalSignature,XML/EDI) • applicazioni multimediali (SVG,VoiceXML,SMIL,X3D,podcasting) • linguaggi di modellizzazione (XMIUML,XUL,XAML,MXML) • comunicazione e tecnologie push (e.g. Wireless Markup LanguageWML, CDF) • scienza sul Web(e.g.CML,MathML) • integrazione di database • e-learning (Moodle, SCORM) doc XML prologo dichiarazione XML dichiarazione tipo di doc istanza del documento testo annotato elemento radice elemento elemento elemento 17 18 3 struttura di un documento XML un esempio • Un documento XML si articola in due parti: – prologo • contiene le informazioni che permettono di interpretare il documento come un documento XML, ricollegandolo alla corrispondente DTD (ove esista) – istanza del documento • racchiude il dato testuale vero e proprio con la relativa marcatura • il prologo è facoltativo ma è sempre consigliabile inserirlo nei propri documenti per favorire completezza di informazione e possibilità di validazione automatica <?xml versione="1.0" codifica="ISO-8859-1"?> <messaggio> <da>Rachele</da> dichiarazione <a>Vito</a> <intestazione>pro memoria</intestazione> <testo>ricorda di portare il cd!</testo> </messaggio> testo annotato 19 20 il testo annotato etichetta XML è solo “informazione” elemento semplice <messaggio> <da>Rachele</da> <a>Vito</a> <intestazione>pro memoria</intestazione> <testo>ricorda di portare il cd!</testo> </messaggio> dati non c’è niente di automatico che XML possa fare al di là di strutturare l’informazione implicitamente presente nel testo è necessario scrivere dei programmi che utilizzino queste informazioni in modo coerente e conforme ad uno scopo la forza di XML sta proprio in questa sua indipendenza da una particolare applicazione o piattaforma software elemento complesso 21 22 XHTML • Nel 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell’HTML come applicazione XML, l’XHTML nel 2001 viene rilasciata una definizione esaustiva, l’XHTML 1.0). • L’ XHTML eredita la versatilità dell’XML, garantendo l’accesso al web anche a dispositivi diversi dal computer, come telefonini, PDA, WebTV. • L’ XHTML è compatibile con l’HTML 4.0 e quindi con i browser per la navigazione sul web. • Le maggiori differenze con l’HTML sono di ordine sintattico, infatti l’XHTML eredita la rigidità sintattica dell’XML. a cosa serve XML? l’obiettivo primario di XML è quello di convogliare informazione in un modo che sia indipendente da una particolare applicazione o piattaforma software il suo uso principale è come formato di interscambio dei dati, o per la creazione di dati condivisi, o per la loro memorizzazione in una base di dati 23 24 4 Regole di scrittura XHTML Vantaggi dell’XHTML 1. Tutti i tag ed i loro attributi devono essere in minuscolo (case sensitive) 2. Obbligatorio il tag di chiusura; di conseguenza i tag vuoti come <br> ed <img> diventano <br /><img /> 3. I valori degli attributi devono essere specificati fra doppi apici o singoli apici. 4. Ogni attributo deve avere un valore 5. Si deve utilizzare l’attributo id al posto di name per identificare gli elementi di un documento • Codice pulito e ben strutturato: con l’XHTML (versione strict, XHTML1.1) tutta la formattazione del documento è affidata ai CSS. • Portabilità: tutta l'evoluzione dei servizi mobili sarà fondata sull'integrazione tra XHTML e CSS. • Estensibilità: ciò significa che è possibile inserire in un documento parti scritte in uno dei tanti linguaggi della famiglia XML. • Accessibilità: una pagina valida, ben definita nella struttura, è meglio gestibile da browser alternativi come quelli vocali o testuali. 25 Validazione 26 Intestazione • Un documento XHTML deve essere convalidato rispetto ad una delle tre DTD definizione di tipo di documento • Un documento XHTML è ben formato quando rispetta le regole della sintassi XML (presenza di un elemento radice, dichiarazione doctype, corretto annidamento dei marcatori, chiusura obbligatoria dei tag vuoti) • Un documento XHTML è valido se usa correttamente gli elementi e gli attributi dichiarati nella sua DTD. • All’indirizzo http://validator.w3.org è possibile convalidare qualsiasi documento • In un documento XHTML l'elemento radice deve essere <html>. • L'elemento radice <html> deve contenere la dichiarazione di un namespace XML (spazio dei nomi) tramite l'attributo xmlns. Il namespace usato deve essere http://www.w3.org/1999/xhtml • In un documento XHTML l'elemento radice deve essere preceduto da un elemento <!DOCTYPE>. DTD XHTML1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 27 Esempio <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype <html xmlns="http://www.w3.org/1999/xhtml"> elemento radice <head> <title>La mia pagina XHTML</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> dichiaro la codifica dei caratteri </head> <body> <h2>Il ritorno al futuro del web</h2> <p>L’XHTML sostituisce l’HTML</p> </body> </html> 29 28 La correttezza formale In XHTML non sono stati introdotti nuovi elementi o attributi rispetto ad HTML 4.01: la differenza principale sta nell’applicazione di regole sintattiche più rigide, derivate da XML. Se tali regole sintattiche non vengono rispettate (regole che i browser non segnalano come errore) non si otterrà un documento XHTML valido. 1. Corretto annidamento dei marcatori 2. I nomi di elementi e attributi devono essere in minuscolo 3. Ciascun attributo deve essere posto tra virgolette e avere indicato il valore. 4. Tutti gli elementi devono essere chiusi; per questo gli elementi vuoti devono terminare con /> 5. Per identificare un elemento si deve usare l'attributo id e non name. 30 5 Riferimenti utili ERGONOMIA COGNITIVA • • • • XHTML Reference di W3Schools Specifica XHTML1.0 tradotta in italiano Specifica XHTML 1.1. Introduzione alla modularizzazione: dal sito del W3C • Il concetto di namespace in XML • Lista di elementi strutturali o di blocco dal sito HTML.it • Lista di elementi di presentazione o inline dal sito HTML.it • è lo studio e la valutazione dei processi cognitivi coinvolti nell’interazione tra individuo e tecnologia e l’attività di progettazione che tenga conto di questi processi • ha l’obiettivo di adattare ambienti, strumenti e prodotti alle capacità cognitive e alle competenze degli utenti, cioè alla loro mente e al meccanismo di funzionamento della percezione • http://xhtml.html.it 31 INTERFACCIA 32 Per disegnare bene l’interfaccia • qualunque cosa permetta la comunicazione tra due sistemi differenti l’interfaccia deve portare alla formazione di una corretta rappresentazione del funzionamento del sistema nella mente dell’utilizzatore mappa del modello mentale proposto da Norman nel 1990 33 Per disegnare bene l’interfaccia Norman D. A. (1996) La caffettiera del masochista. Psicopatologia degli oggetti quotidiani http://www.youtube.com/watch?v=VNjvZc13Skg •esiste differenza tra il modo di "funzionare" della nostra mente e le capacità richieste per usare gli oggetti •bisogna tenere conto di queste differenze per non creare oggetti non usabili •succede così che non tutti gli oggetti vengono progettati per essere utilizzati •se usiamo male un oggetto spesso non è colpa nostra ma del cattivo design, però distrugge nostra autostima 34 Per disegnare bene l’interfaccia D. Norman : “.. Le cose complesse possono richiedere spiegazioni, ma quelle semplici non dovrebbero averne bisogno. Quando una cosa semplice esige figure, scritte o istruzioni, vuol dire che il design è sbagliato..” Fare caso alle dimensioni dei manuali di uso. Fare caso all’autore dei manuali di uso. Quante funzioni usate rispetto a quelle dei manuali? Preferite imparare provando e sbagliando mentre usate il sistema o leggendo il manuale? • l’errore frequente che porta a creare una brutta inferfaccia: la fretta di finire! il time-to-market troppo stretto! • quando dovra’ essere pronto? ieri!!!! • c’è anche la cattiva elasticità mentale secondo cui: – tutti sono bravi come noi e sanno usare senza spiegare – chi se ne importa dell’utente, l’importante è vendergli qualcosa e fare $$$$$ • c’è anche cattivo gusto e mancanza di estetica • chi chiede l’oggetto è persona diversa da chi lo usa 35 36 6 Stadi dell’azione tramite interfaccia Interfaccia in informatica • ESECUZIONE: problema della relazione tra intenzione e azioni possibili (affordance), cosa posso fare con questo oggetto? Come? 1 - formare uno SCOPO 2 - formare un’INTENZIONE 3 - decidere l’AZIONE 4 - compiere l’AZIONE • l’interazione uomo macchina (HCI) indica la comunicazione o dialogo tra utente e computer • la comunicazione avviene attraverso l’interfaccia utente, chiamata anche interfaccia grafica, che deve essere progettata per facilitare l’interazione • il concetto di interfaccia non riguarda solo il computer ma tutti gli oggetti • VERIFICA: problema del rapporto tra azioni e stato del mondo (feedback) l’oggetto ha recepito il mio comando? Che effetto ha avuto? 5- percepire lo STATO DEL MONDO 6- interpretarlo 7- VALUTARE il risultato 37 38 Human-Computer Interaction Human-Computer Interaction • “HCI è una disciplina che si occupa della progettazione, valutazione e realizzazione di sistemi interattivi basati su computer destinati all’uso umano e dello studio dei principali fenomeni che li circondano” • ACM SIGCHI Curricula for Human Computer Interaction, 1992 http://www.acm.org/sigchi/cdg/ • “Progettare interfacce utente è un mestiere molto difficile. Esso mette insieme due discipline complicate: la psicologia e la programmazione. Queste discipline hanno background culturali molto diversi: la psicologia si occupa delle persone, la programmazione dei computer. • Gli psicologi sono, presumibilmente, empatici e comprensivi; i programmatori matematici e precisi. Gli psicologi hanno già abbastanza problemi nel capire le persone anche quando queste non usano i computer; i programmatori hanno abbastanza problemi nel far funzionare i programmi anche quando questi non sono utilizzati da alcuna persona. • Progettare una buona interfaccia utente richiede che queste queste due prospettive vengano messe insieme. • H.Thimbleby, User Interface Design, 1990 39 Stili di interazione 40 Interfacce WIMP • Lo stile di interazione indica le modalità concrete attraverso le quali l'utente può comunicare o interagire con il sistema • esistono molte classificazioni degli stili di interazione, come questa per esempio: – A linea di comando – Menù – Dialoghi in languaggio naturale – InterfacceWIMP (Windows, Icons, Menus, Pointers) come nello stile di Windows – Interfacce gestuali comandate tramite webcam – interfacce 3D 41 • WIMP (Windows, Icons, Menus, Pointers) • Widget: elementi costitutivi dell’interfaccia che consentono l’interazione utente sistema • modello di manipolazione diretta del widget perché l'interazione avviene mediante operazioni effettuate dall'utente come puntamenti, trascinamenti ecc. 42 7 Criteri di progettazione Caratteristiche del widget Top – down 1. disegno del layout disposizione generale 2. disegno dei singoli elementi tre aspetti da considerare per creare il widget: • apparenza-COME appare, es. quelli di Windows in cui curare: – icone: disegno che rappresenta la funzione – testo – colori di fondo, testo, icone • interazione-come si COMPORTA – Mouse fuori area, situazione iniziale – Mouse over: bottone evidenziato, testo esplicativo – Mouse click: bottone evidenziato con colore diverso e compare altra finestra per i dettagli • semantica-COSA fa, l’effetto sul monitor Bottom-up 1. disegno dei singoli elementi 2. disegno del layout disposizione generale 43 Procedimento di creazione del widget 44 Affordance nelle interfacce grafiche • decidere SUBITO cosa si vuole fare con il widget curando la semantica • POI come deve apparire per – mostrare opzioni o stati si usa il checkbox (caselle quadrate con ali di gabbiano) o radio button (cerchi che si riempiono con punti) in cui scegliere una sola opzione esclusiva o più opzioni, form con testo libero – definire azioni tramite Menù, bottoni, toolbar • l’affordance indica proprietà percepite e reali di un oggetto, proprietà che determinano come si potrebbe usare l’oggetto come se fosse un invito all’uso • Il progettista può controllare l'affordance dell'interfaccia, dei dispositivi di puntamento, dei bottoni, della tastiera per fornire “inviti” a toccare, indirizzare/puntare, guardare, cliccare 45 Affordance nelle interfacce grafiche: bottoni • la rappresentazione come oggetto 3D che emerge e fa staccare dal fondo è un invito al click Consigli per la progettazione di bottoni • evitare caratteri troppo piccoli e illeggibili • evitare bottoni troppo vicini difficili da centrare col mouse • usare icona intuitiva per indicare la funzione • se non sono attivabili in un certo momento renderli sbiaditi, con colore più chiaro • attenzione ai falsi bottoni, forme simili ma non attive 46 Affordance nelle interfacce grafiche: barre per scorrimento • queste barre devono creare un invito a scorrere tramite frecce messe agli estremi Consigli di progettazione • attenzione all'uso annidato, ovvero troppe barre messe in finestre sempre più piccole e difficoltà a muovere una barra in poco spazio 47 48 8 Affordance nelle interfacce grafiche: campi di input Affordance nelle interfacce grafiche: link • i campi di input servono da invito a inserire testo Consigli per rendere evidente l’invito al link: • devono essere riconoscibili con colori, sottolineatura, piccoli simboli vicino • devono dare indicazioni sulla destinazione • devono dare feedback, una reazione al comportamento eseguito come: – cambia colore se già visitati in passato – cambia colore e forma se ci passa il mouse sopra Consigli per la progettazione di un campo di input: • rendere chiaro contenuto atteso fornendo un esempio di cosa inserire, per esempio in un campo in cui scrivere email metti testo già pronto come “inserire qui la tua email nel formato nome@indirizzo” • alcuni esempi su – www.usabile.it – www.hcibib.org – www.uidesign.net – www.useit.com 49 Affordance nelle interfacce grafiche 50 Concetto di metafora L'affordance può rendere un'azione facile o difficile in base a queste caratteristiche dell’utente: • esperienza, abitudine, novità • conoscenza • aspetti culturali es. colore rosso ha significato diverso • problemi di percezione • E’ spesso efficace una forma di interfaccia in cui un aspetto del mondo reale è usato per simboleggiare e semplificare un aspetto del programma di computer con cui l’utente sta interagendo • Un’immagine che letteralmente ha un significato che viene trasposto figurativamente sul contenuto – Desktop – Finestra – Bottone – CestinoSoluzioni 51 52 Concetto di metafora Layout • una metafora deve essere familiare all’utente • una metafora oscura confonde • una metafora non deve lasciare aperte più interpretazioni • la metafora deve essere logicamente collegata all’attività da eseguire col computer • una metafora deve essere sempre usata per facilitare e chiarificare l’interfaccia • layout: distribuzione spaziale degli elementi sullo schermo • Principio guida: semplicità, deve essere chiaro e pulito, lasciando sufficiente spazio bianco e margini tra i diversi blocchi ed evitando sovraccarico di informazione • esempi di organizzazione: i layout di PowerPoint, però si è esagerato nel loro uso e ora le presentazioni fatte con Powerpoint sono tutte uguali – “sindrome di powerpoint” http://www.gandalf.it/offline/off69.htm – http://www.edwardtufte.com/tufte/powerpoint Essay: The Cognitive Style of Powerpoint • http://www.dcopelli.it/corsi/corso-html.htm?VCAFF1051 consigli per creare layout web • • • • La metafora del cestino A volte usata impropriamente VA BENE se usata per eliminare file NON BUONA se usata per espellere dischetti come in Macintosh 53 54 9 Layout: organizzazione Psicologia Gestalt utile per fare layout Principali tecniche ispirate anche alla psicologia della Gestalt: 1.Raggruppare e Strutturare 2.Ordinare 3.Usare spazi bianchi 4.Decoration (box, caratteri, colori) 5.Allineare 6.Mantenere consistenza 7.Dare senso di contesto • Legge della Prossimità : Più sono fra loro vicini due o più elementi maggiore è la probabilità che essi siano visti come una figura. Raggruppare elementi semanticamente contigui attraverso la vicinanza spaziale 55 56 Psicologia Gestalt utile per fare layout • Legge della Similarità: Elementi visivi tra loro simili (per forma, colore, dimensione, movimento, etc) saranno visti collegati. La similarità è un prerequisito per notare la differenza. • Graphic Design: Fornire ritmo e consistenza ad documento per mezzo della ripetizione, che permette di rafforzare i legami fra parti separate 57 58 Layout: Raggruppare e Strutturare • http://www.archive.org/ • http://www.disobey.com/ghostsites/ • esempio nell’uso dei vari menu di Windows Layout: Ordinare raccolte di vecchi siti ormai scomparsi usare un criterio naturale per l’utente secondo la sua cultura: • ordine cronologico • ordinamento alfabetico • dall’alto al basso, da sinistra a destra 59 60 10 Layout: Usare spazi bianchi Layout: Usare spazi bianchi • separare • usare colori, forme, testo in vari stili per dare vita ecc. • per evitare la monotonia che distrae l’attenzione • per evitare colori troppo scuri che mettono tristezza evidenzia il distacco tra due aree • evidenziare evidenzia l’area al centro • raggruppare due aree separate e la prima area è formata da oggetti simili perché lo spazio bianco tra loro ha area minore rispetto all’area bianca che separa le due zone 61 Layout: Allineare 62 Layout: mantenere consistenza • creare ordine in un layout permette al cervello di risparmiare sforzi per creare un suo ordine • testo allineato a sinistra, centro, destra • elenchi di numeri con la virgola sempre nella stessa posizione verticale • elenchi di nomi e cognomi dove appare evidente la posizione di nome staccata dal cognome per poterli facilmente identificare • pagine con contenuti simili hanno interfaccia simile • funzioni simili devono stare sempre nella stessa posizione per evitare all’utente di perdere tempo nello andare a cercarli in posti nuovi 63 64 mokup interfaccia grafica Layout: Dare senso di contesto • l’utente non deve perdersi, quindi indicare in quale punto si trova rispetto all’informazione • sono ideali le mappe e altri strumenti top-down che mostrano l’informazione locale rispetto al globale • strumento per creare un'immagine grafica (o bozza) che rappresenti l'anteprima dell'interfaccia grafica, senza perdersi nei dettagli realizzativi, per fare la prototipazione • dal semplice Paint per disegnare bozze a programmi per creare siti web come su http://www.webmasterpoint.org/webdesign/webdesign/ progettare-sito-web/software-servizi-per-crearemockup-wireframe.html oppure su iPhone http://www.iphoneitalia.com/iphone-mockupprogettare-online-linterfaccia-di-unapplicazione80518.html e 65 66 11 mokup interfaccia grafica Usabilità di un prodotto • http://www.youtube.com/watch?v=AOJlQRTbLpM • http://www.youtube.com/watch?v=XgIckOa9CUU • http://www.youtube.com/watch?v=sx4Ar04Dgrw sull’uso di Photoshop • naturalmente l’immancabile http://www.masternewmedia.org/it/guida-al-webdesign/# e http://www.masternewmedia.org/it/wireframing-e-website-prototyping-i-migliori-servizi-sotto-i-150-euro/# e • http://www.masternewmedia.org/it/2005/04/09/interfac ce_grafiche_come_progettare_interfacce.htm# • secondo la norma ISO 9241 “Usabilità” è la efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obbiettivi in determinati ambienti d’uso • l’efficacia riguarda l’accuratezza e completezza con cui raggiungo l’obbiettivo • l’efficienza riguarda le risorse spese per ottenere tale risultato • la soddisfazione riguarda il comfort e la accettabilità del sistema • la usabilità va progettata dall’inizio, e tenuta sotto controllo costantemente nel processo di progettazione e sviluppo 67 68 Usabilità di un sito Usabilità di un sito web • La valutazione di usabilità di un sistema non può prescindere dall’utente • si esegue un “Test di usabilità” in cui alcuni studenti usano il sistema eseguendo compiti tipici in un ambiente controllato, sotto osservazione da parte di esperti di usabilità che raccolgono dati, li analizzano e suggeriscono miglioramenti • http://www.masternewmedia.org/it/usabilita-web-imigliori-articoli-e-report-del-2010-dimasternewmedia/# • http://webdesign.html.it/guide/leggi/47/guida-usabilitadei-siti-web/ • test di usabilità “Web Site Usability Checklist” • http://www.dailybits.com/the-essential-websiteusability-checklist/ • http://www.usereffect.com/topic/25-point-websiteusability-checklist • http://www.webgenesis.com.au/portfolio/pdfs/usabilitychecklist-report-2.pdf • http://www.usereffect.com/download/checklist.pdf • http://www.infodesign.com.au/ftp/WebCheck.pdf 69 70 Esercizio Bibliografia • prendere una interfaccia e provare a capire se l'utente riesce a comprendere l'affordance degli oggetti grafici dell'interfaccia, se sa riconoscere, percepisce se un oggetto è attivo e intuisce l'azione associata • R.Polillo, “Il check-up dei siti web”, Edizioni Apogeo • A.Dix, J.Finlay,G.D.Abowd,R.Beale, Interazione uomo-macchina, ed. McGraw-Hill, 2004 • Norman D. A. (1996) La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti. • Norman D. A. (1995) Le cose che ci fanno intelligenti. Milano, Feltrinelli. Elementi di giudizio • affordance nelle interfacce grafiche • qualità del feedback • come avviene la comunicazione degli errori 71 72 12 Cos’è l’accessibilità Cos’è l’accessibilità • Accessibilità al multimediale, Web compreso, significa che le persone con disabilità o diversamente abili possono partecipare al Web come tutte le altre persone senza limiti, soltanto usando una tecnologia particolare • sono da considerare anche le persone non disabili, e.g. anziani, persone dotate di scarsa o nulla preparazione informatica, persone con vecchi computer, persone di lingua diversa etc • progettare per l’accessibilità significa considerare tutte le disabilità che riguardano l’accesso al Web: visive, uditive, fisiche, linguistiche, cognitive, neurologiche • evitare interfacce complesse: – menu di navigazione poco visibili – finestre pop-up – richiesta imprevista di scaricare un plug-in – gergo troppo tecnico • una struttura più leggera del sistema che richiede meno sforzo per le persone e per hardware e software da usare • numerose scuole, enti e famiglie economicamente disagiate possiedono computer vecchi, in molti casi, computer antiquati sono accoppiati a connessioni lente • ci vuole sito normale e link a sito accessibile 73 74 Cos’è l’accessibilità WCAG 2.0 linee guida per l’accessibilità dei contenuti per il Web, abbreviate con WCAG 2.0 (Web Content Accessibility Guidelines per garantire accessibilità occorre: • progettare pagine indipendenti dalla periferica, dal sistema operativo • progettare pagine non vincolate ad una data dimensione di schermo e leggibili anche da chi non è in grado di visualizzare i colori • occorre usare strumenti di valutazione per determinare se un sito è conforme agli standard di accessibilità secondo W3C con Web Accessibility Initiative e una serie di linee guida per l’accessibilità al Web (WAI guidelines) • www.w3.org/WAI/ • http://www.w3c.it/wai/ Principle 2. Operable – User interface components and navigation must be operable. - Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard. • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A) PRINCIPLE GUIDELINE SUCCESS CRITERION 75 Dichiarazioni usabilità del sito 76 Dichiarazioni usabilità del sito • il consorzio mondiale per il Web (W3C) nell'ambito della iniziativa per l'accessibilità del Web (WAI), ha definito che un sito che rispetta le caratteristiche espone su ogni pagina questo simbolo: • se compare uno dei logo a destra il sito è conforme alle "Linee guida per l'accessibilità ai contenuti del Web 1.0" del W3C disponibili a http://www.w3.org/TR/2000/RECATAG10-20000203 • il W3C prescrive di esporre su ogni pagina il bollino ufficiale del WAI con il livello di conformità raggiunto. • http://www.uritalia.it/dichiarazione/default.asp • se sito e' realizzato secondo gli standard del W3C (raccomandazioni XHTML 1.0 Strict e CSS 2) per garantire la massima accessibilita' e fruibilita' delle informazioni a tutte le tipologie di utenti e senza distinzioni di piattaforma e browser, viene usato questo logo 77 78 13 Importanza dell’accessibilità Accessibilità e motori di ricerca • per senso civile, umano verso la partecipazione collettiva e non escludere nessuno • la pubblica amministrazione pretende strumenti dotati di accessibilità come elemento indispensabile per partecipare al bando di gara • Pubblica Amministrazione e gli Enti di Pubblica Utilità sono soggetti alla Legge 9 gennaio 2004, n. 4 ("Legge Stanca") "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici" • rendere un sito web accessibile aiuta la navigazione di un motore di ricerca, tipicamente si usa molto più testo anche per descrivere immagini e la struttura del sito è più chiara • http://www.uninsubria.it/uninsubria/index_acc.html 79 Accessibilità e sistemi di lettura vocale 80 Problemi sul colore molto frequenti • per aiutare chi non può leggere esistono software che leggono le pagine del sito web • creare un sito accessibile aiuta molto i sistemi di lettura perché le informazioni sono più ordinate e c’è più testo Accessibilità e sistemi di visione • per aiutare chi ha difficoltà a leggere esistono software che ingrandiscono le pagine del sito web • creare un sito accessibile aiuta molto i sistemi di ingrandimento perché le informazioni sono più ordinate e c’è più testo e i link sono ben evidenti • i colori dello sfondo e del primo piano (testo) siano ben contrastati • test per verificare il contrasto • http://snook.ca/technical/colour_contrast/colour.html • http://gmazzocato.altervista.org/colorwheel/wheel.php ?lingua=it • http://juicystudio.com/services/luminositycontrastratio. php • http://www.usabile.it/blog/strumenti-per-il-contrastodel-colore • evitare di inserire sfondi grafici compositi sotto i testi • non affidare nessuna informazione esclusivamente all'uso del colore associato 81 82 Problemi sul colore molto frequenti Problemi sul colore molto frequenti • testi e grafica devono essere comprensibili se visti senza colore, e.g. in base al contesto o alla marcatura • non pensare che tutti gli utenti possano distinguere correttamente i vari colori, esistono vari problemi tra cui il daltonismo è il più diffuso in varie sfumature – Deuteranopia: cecità più accentuata per il colore verde, confusione tra rosso e verde e viola e blu, difficoltà a distinguere rosso, arancione, giallo, verde – Protanopia: cecità più accentuata per il colore rosso, confusione tra rosso e verde – Tritanopia: confonde giallo e blu – Acromatopsia: estrema sensibilità alla luce, cecità ai colori • http://www.diodati.org/scritti/2004/guida/ele_acc16.asp • http://www.vischeck.com/examples/ 83 84 14 Test controllo sito accessibile Un sito è accessibile se caratteristiche: • dare la possibilità di non utilizzare il mouse • scegliere di ingrandire il testo • cogliere il significato essenziale dei colori • riuscire a comprendere linguaggio • poter utilizzare un software di sintesi vocale • poter interpretare elementi video, audio attraverso testo alternativo 85 Riferimenti • • • • • • • • • • 86 Esercizio Webaccessibile.org http://www.webaccessibile.org/ http://www.html.it/elevata_accessibilita/index.html http://www.accessibile.gov.it/ http://webdesign.html.it/guide/leggi/45/guidaaccessibilita-dei-siti-web-pratica/ http://www.leggestanca.it/ http://archivio.cnipa.gov.it/site/_files/Opuscolo%207.pd f http://www.cineca.it/stdoc/AccessibilitaLegge42004.pdf http://www.pubbliaccesso.gov.it/biblioteca/documentaz ione/studio_lineeguida/index.htm www.pubbliaccesso.gov.it/biblioteca/manualistica/ http://www.vodafone.it/diac/help/vod_accessibilita.html 87 • visitare un sito, giudicare se è accessibile, provare a pensare l’interfaccia in versione accessibile • http://www.uninsubria.it/uninsubria/index_acc.html • http://www.unipv.eu/site/home.html • http://www.minervaeurope.org/structure/workinggroup s/userneeds/prototipo/museoweb.html Kit di progettazione di un sito di qualità per un museo medio-piccolo progettato in XHTML 1.0 strict con l'uso di fogli di stile CSS. 88 15