Lab. U. & A.

Descrizione WebSite

10 Cose che non Sopporto in un Website

1.     La mancanza o l’inadeguatezza del testo alternativo e del title nelle immagini e nei link ipertestuali;

2.     L’impossibilità, per gli utenti che non riescono ad usare il mouse, di selezionare i link tramite la tastiera, grazie all’AccessKey;

3.     La mancanza del link “Salta la Navigazione”, che permette, agli utenti che fanno uso di Screen Readers, di evitare la rilettura, ad ogni pagina, della barra di navigazione. Lo SkipNavigation, infatti, porta direttamente al contenuto della pagina;

4.     L’uso delle tabelle per la struttura della pagina, al posto dei CSS;

5.     Lo scarso contrasto tra il colore dello sfondo e quello del testo;

6.     La presenza di animazioni troppo “ingombranti”, che disturbano la lettura dei contenuti testuali, e talvolta possono innescare anche crisi epilettiche negli utenti soggetti a tali reazioni incontrollate del sistema nervoso;

7.     La mancanza di una versione adeguata per la stampa tramite i CSS;

8.     La non divisione del testo in paragrafi coerenti, magari grazie anche all’impiego del “metodo della piramide capovolta”, caratterizzati da elenchi puntati o numerati, capaci di rendere molto più chiaro e leggibile un testo;

9.     La presenza di link ipertestuali non chiaramente espressi od evidenziati (ad es: “Clicca qui!”);

10. La pesantezza della pagina che non permette il caricamento della stessa in un tempo accettabile sul web.

Commento Articoli

(Gruppo 4 nr. 3 “Lower-Literacy Users”, March 14, 2005  + “Accessibility Is Not Enough”, November 21, 2005)

In un articolo pubblicato circa un anno fa Jakob Nielsen analizza i maggiori problemi che possono riscontrare gli utenti con un basso livello d’istruzione, durante la navigazione online.

Essi, infatti, non sono in grado di capire un testo dando una semplice occhiata alla pagina, come fa circa l’80 % degli utenti con un livello d’istruzione più elevato, ma hanno la necessità di leggere il testo più attentamente, spesso anche parola per parola, con un inevitabile spreco di tempo in rete. Tali utenti, inoltre, possono trovarsi in difficoltà al momento della digitazione delle parole-chiave nel motore di ricerca.

Per queste ragioni, se vogliamo che le nostre pagine web siano usabili per tale categoria di utenti, dobbiamo cercare di semplificare i contenuti ed il design, usando alcuni dei più comuni accorgimenti (evidenziare i termini più significativi, usare gli elenchi puntati, non trattare diversi argomenti in un paragrafo…). Sostituire, poi, i termini tecnici con altri più comuni è una mossa necessaria. Molto importante, inoltre, è l’inserimento di termini volutamente storpiati, prevedendo gli errori di ortografia più comuni, tra le parole-chiave relative al nostro sito (ad es: “Cavaretta” per “Cavarretta”).

Al fine di rassicurare l’utente, può essere molto utile l’inserimento delle cosiddette briciole, l’impiego di una barra di navigazione accessibile e coerente, magari invertendo i colori del tasto relativo alla pagina in cui ci si trova (se, ad esempio, la nostra navbar è costituita da tasti rossi con testo bianco, trovandoci nell’home page, il tasto “Home” sarà bianco con testo rosso).

Un altro espediente può essere quello di servirsi del cosiddetto stile della piramide rovesciata, inserendo come primo paragrafo le conclusioni relative all’argomento descritto, per dare la possibilità al visitatore di inquadrare, per così dire, la situazione, fin dalla prima frase, evitandogli lo scorrimento forzato della pagina o, magari, la lettura dell’intero articolo, allo scopo di  capire se gli interessa oppure no.

Infine, parlando di accessibilità per gli utenti diversamente abili, ovviamente bisogna seguire passo per passo le varie linee guida, ma un ruolo di fondamentale importanza è rivestito dalla sperimentazione diretta del website da parte di un campione di utenti affetti dalle più comuni forme di disabilità che possano intralciare, in qualche modo, la normale navigazione in rete.

Ciao a tutti!

Come va la vita?!?!

Spero bene...io nn mi posso lamentare x il momento...ma l'estate sta finendo e 1 anno se ne va.......!

Cmq adesso ke il laboratorio è terminato sto iniziando a pensare ad un nuovo argomento x il mio blog...devo decidere qualcosa d sensazionale...vedremo ciò ke mi proporrà la mia mente...si accettano suggerimenti!

Baci a tutti!

A presto!

Esito dell'Esame

Ciao a tutti!!!

Lo so ke nn mi sn + fatta viva, ma ho avuto un'infinità d problemi col pc, ke nn sto qui a raccontarvi....cmq se vi interessa il risultato dell'esame è stato OTTIMO!!!

E' stato bellissimo...nn c credevo, soprattutto xkè ho avuto un bel pò d problemi nei giorni precedenti l'esame, ma alla fine tutto è andato OK....BELLISSIMO!!!

Adesso vi saluto gente.....

A presto!!! 

Salve!

UTF-8 (UNICODE)

(SCUSI il tremendo ritardo Prof., ma sono stata sommersa dagli esami in queste settimane...:(( Adesso però posso dedicarmi totalmente al Lab.)

Unicode è stila una lista dei caratteri delle lingue del mondo, come i caratteri arabi, latini, russi (come il cirillico), greci, e tutti i caratteri degli altri paesi.

È nato dalla necessità di voler scrivere documenti leggibili in ogni paese, indipendentemente dal software utilizzato, ma anche dal voler creare una raccolta dei caratteri di tutto il mondo completa, ai fini della standardizzazione.

Unicode, quindi, assegna un numero univoco ad ogni carattere, indipendentemente dalla piattaforma, indipendentemente dall'applicazione, o dalla lingua.

Se, ad esempio, voglio rappresentare un carattere in cirillico, che non è, dunque, presente sulla mia tastiera sono costretta a servirmi di un codice che il computer è capace di interpretare come quello specifico carattere.

Bisogna definire, a tale scopo, un metodo che sia completamente universale, che venga decodificato allo stesso modo da tutte le piattaforme, da ogni tipo di software. 4032 può corrispondere, per esempio, ad un determinato carattere greco.

Nello specifico, usando Unicode, bisogna anteporre alla cifra di codice U+, che rappresenta la lista di codice utilizzata.

Abbiamo, perciò, delle tabelle di encoding, che esemplificano le accoppiate di codice e caratteri speciali. Determinate combinazioni di numeri da tastiera rappresenteranno i caratteri non presenti sulle nostre tastiere.

UTF-8 è un tipo di encoding usato da determinati software, quello maggiormente in uso, attualmente, e Unicode è l’organizzazione che si occupa della standardizzazione dei caratteri.

Bisogna, a tale scopo, impostare il charset UTF-8 (il tag meta content-type, content e chaset tipo charset="UTF-8") nella pagina xhtml.
Es: .

Nelle pagine (x)html sperimentiamo spesso l’uso delle suddette entity per le vocali accentate (“è”=è “ò”=ò “È”=É…), le parentesi acute (< e >) e la stessa e commerciale.

La sintassi è, quindi, &nomesimbolo;, dove “nomesimbolo” è, appunto la codifica del carattere speciale in questione.

Differenza tra HTML e XHTML e XHTML 1.0 e 1.1

L’XHTML è una riformulazione di HTML in XML.

Dall’XHTML, infatti, si possono sviluppare altri linguaggi. 

L’XHTML 1.0 è la prima versione di XHTML, la più compatibile all’indietro.

L’HTML viene riformulato in XML, perché non è coerente (riguardo la chiusura dei tag, ad esempio).  

L’XHTML, dunque, è una tecnologia di transizione che ingloba la potenza dell’XML e la semplicità dell’HTML. 

Vi sono diverse varianti di XHTML, quindi, e la più compatibile, attualmente, è la 1.0 Transitional. Alcuni, però, preferiscono la versione 1.1 Strict, un po’ meno compatibile con alcuni browser “antichi”.

L’XHTML 1.1 si basa su dei moduli indipendenti, attraverso i quali il codice viene suddiviso. In pratica, si tratta di vari blocchi (di struttura, di testo…) che raggruppano i vari tag.

I tag di struttura (html, head, body), ad esempio, vengono identificati tramite lo Structure Module, mentre quelli di testo (h1-h2, p…) con il Text Module.

Articolo sull’uso dell'XHTML

Caro VITUZZU (ogni riferimento a persone realmente esistenti è puramente casuale ;)) ),

ma lo sapevi che grazie all’XHTML puoi progettare una volta, per pubblicare su qualsiasi browser?

Significa che è completamente portabile, perché, oltre che su tutte le versioni di browser, funziona anche sugli screen reader, sui telefonini di nuova generazione….su tutto insomma, dando un’enorme accessibilità!

L’XHTML ti permette anche di definire delle strutture aggiuntive, che possono esserti di grande utilità. Puoi, infatti, demarcare una o più aree determinate, tramite il tag (intestazione, barra di navigazione, contenuto…). 

Vitù, non devi avere paura di usare l’XHTML…non c’è nulla di complicato nell’usarlo, te l’assicuro. Funziona come l’HTML, solo che devi ricordarti alcuni piccoli particolari (non ti preoccupare, non c’è nessuna fregatura sotto, anzi è tutto a tuo vantaggio!):

• Scrivere tutti i tag in minuscolo (es: <body> e non <BODY>!);
• Inserire tutti valori tra virgolette (es: <img src="images/logo.jpg"> e non <img src=images/logo.jpg>);
• Chiudere tutti i tag (anche <p> e <li>, che prima potevi lasciare aperti, o quelli che prima non chiudevi mai, come <br>. Basta aggiungere uno spazio e poi lo slash: <br />).Infine, devi inserire, prima di ogni altro tag, il Doctype, che indica la versione  di XHTML che stai usando (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>), il Name Space, subito dopo, che rinforza il vecchio elemento (http://www.w3.org/1999/xhtml”>) ed il Content Type, nell’, che dichiara il tipo di codifica dei caratteri (<meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1" />).

Non c’è bisogno di essere un’arca di scienza per capirlo…anche tu ce la puoi fare!

Al posto dell’HTML a tabelle puoi usare, per il layout, i CSS, evitando lo spreco di banda, lasciando al codice la struttura.

Infine, non bisogna dimenticare il fatto che, oltre alla compatibilità in avanti, l’XHTML permette una discreta compatibilità all’indietro.

VITÙ…………ma cosa vuoi di più dalla vita……………?!?!?!?!

Stammi bene Vituzzu! Alla prossima… :)

Interattività del blog

EHILA'!!! Ho visto ke Vito vuole da noi maggiore "movimento" sui nostri blog (...e, in effetti, è per questo ke questi si creano!). Io spero d potermici dedicare d +, come anke al sito, ma tra uno scritto d francese ed un altro d'inglese, tra gli orali ecc. ecc...

VEDRO' D FARE IL POSSIBILE!!!

Ciao ciao...

Descrizione WebSite

Ciao!!!

Come avevo promesso ieri ho inserito tutte le esercitazioni per la terza lezione nel mio WebSite, nella sezione "Lab DW Avanzato".

Di seguito aggiungo la descrizione relativa al sito:

La struttura del sito è stata realizzata secondo una costruzione grafica lineare semplice, in modo tale da consentire all'utente una visione ottimale.

Per una realizzazione efficace del sito, a mio parere, è fondamentale conoscere i colori. Su questo punto di vista, mi sono soffermata sul cerchio cromatico di Itten, una sfera sulla quale vengono descritti i cambiamenti cromatici (colori primari, secondari e terziari).

L'interfaccia evidenzia i contenuti e non se stessa e, poiché l'Home Page è il biglietto da visita del sito, le caratteristiche principali sono di equilibrio e di chiarezza.

L'utente, entrando nel sito, deve capire subito qual è l'argomento trattato in esso. A tale scopo, in questa prima pagina, descrivo brevemente il tema del website. Inoltre, specifico anche che esso comprende due sezioni, l'una dedicata al Lab DW Avanzato, l'altra relativa a questo Blog.

Infine, è bene sottolineare il fatto che il sito è conforme ai principali parametri dell'accessibilità (Alt, Title, SkipNavigation, Accesskey).

Ciao a Tutti!!!

Volevo avvisarvi ke ho appena aggiornato il mio WebSite.

Visitatelo!!

Entro domani inserirò anke le consegne relative alla terza lezione.

CHEERS!!!

Gemini Web: Cosa si può fare per rendere migliore il codice

I Web Standards

Al giorno d'oggi, la cura contro l'obsolescenza, che caratterizza attualmente il 99,9 % dei siti web, è costituita dai Web Standards. Essi rappresentano, infatti, delle tecniche per visualizzare, in maniera egregia, i nostri siti, tramite ogni tipologia di user agent (definizione del W3C, per l'identificazione dei browser e di tutti gli altri terminali Internet), riducendo i costi, la complessità ed i tempi di progettazione e permettendo, allo stesso tempo, la più completa accessibilità ed usabilità dei WebSites. Tali specifiche sono state istituite dal "Web Standards Project", fondato nel 1998, per convincere i produttori di browser a supportare gli standard.

Grazie alle specifiche di tale organizzazione, non è più necessario ricorrere al code forking (ossia creare diverse versioni di codice, una per ogni modalità di visualizzazione dei vari browser), o peggio, a manipolazioni del codice HTML per arrivare ad un apparente buon design della pagina.

Basta apportare delle modifiche (neanche troppo difficili) al codice HTML, ovvero utilizzando al suo posto il codice XHTML (eXtensible HyperText Markup Language), un linguaggio ametà tra l'HTML (HyperText Markup Language) e l'XML (eXtensible Markup Language), e chiamato, per tale motivo, transizionale.

Bisogna, dunque, separare, parzialmente o totalmente, le pagina web in tre parti essenziali:

1. Struttura (HTML, XHTML, XML);
2. Presentazione (CSS1, CSS2);
3. Comportamento (ECMAScript, DOM).

In tal modo, i CSS si occupano della tipografia, dei colori, dei margini e le tabelle XHTML solo del layout di base di ogni pagina.

Non si deve più pensare all'indietro, ma, al contrario, in avanti, verso il futuro!

Ciò che caratterizza l'XML, a differenza dell'HTML, è la coerenza:

• Tutti i tag devono sempre essere chiusi (anche <p>, <img> e <br>);
• Tutti gli attributi devono essere racchiusi tra virgolette (<img src="img/header.jpg" alt="Intestazione">);
• Tutti i tag devono essere scritti in minuscolo, tranne il DOCTYPE.

Funzionando come l'HTML, l'XHTML, quindi, "usa" la coerenza dell'XML, sfruttando, allo stesso tempo, la possibilità di agire su browser "di vecchia e nuova generazione", ma anche su quasi tutti gli altri dispositivi Internet, come i cellulari ed i Palm Pilot, aumentando grandemente l'accessibilità e l'usabilità e diminuendo, in maniera, potremmo dire, inversamente proporzionale, la "pesantezza" del codice, grazie ai CSS.

Oltre agli accorgimenti relativi ai tag ed agli attributi descritti sopra, i documenti XHTML necessitano anche di alcuni elementi che comunicano ai browser come interpretarli e come testarli ai servizi di validazione:

• Doctype;
• Namespace;
• Content-Type.

La dichiarazione di Doctype (Document Type Definition - DTD) descrive la versione di XHTML che si sta usando al servizio di validazione. Tale elemento viene inserito prima di ogni altro tag, all'inizio di ogni documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Il Namespace segue il Doctype e serve a rafforzare quest'ultimo. Un Namespace è un insieme di tipi di elementi e nomi di attributi associati ad un DTD ben definito. Tramite il Namespace, dunque, avviene l'identificazione dello stesso, inserendo anche l'URL corrispondente:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

Infine, il Content-Type specifica il tipo di codifica dei caratteri. Si inserisce nell'<head> di ciascun documento XHTML:

<head><title>Home Page</title><meta http-equiv="Content-Type" content="text/html; charset="ISO-8859-1" /></head>

Personalmente, sono pienamente d'accordo con Jeffrey Zeldman e non capisco affatto i progettisti che continuano ad usare tag deprecated ed a confondere gli elementi visuali con quelli strutturali, ignorando il progresso ottenuto grazie all'XML ed escludendo gran parte degli utenti potenziali dei siti da loro ideati.

Finora avevo usato il vecchio HTML, ma solo perchè non conoscevo ancora il nuovo codice. Adesso penso che non sarebbe molto intelligente continuare ad usare il semplice HTML, ponendo un muro insormontabile tra noi ed il futuro del web!

Messaggio di Benvenuto.

Wow!!!Ank'io ce l'ho fatta a crearmi un blog (effettivamente nn è che c voglia poi tanto, ma mi meraviglio lo stesso della mia POTENZA)!!!

OK, adesso basta....

....Questo Blog riguarda il Laboratorio DreamWeaver Avanzato tenuto dal Prof. Vito Evola, all'interno del Corso di Laurea di Lingue Moderne per il Web (LxWeb) presso la Facoltà di Lettere e Filosofia dell'Università degli Studi di Palermo.