Webdesign / 11: Semantica di html 5

Estensibilità

html è un linguaggio "povero" dal punto di vista tassonomico, cioè non dispone di tag per specificare oggetti specifici, come numeri di telefono, pagine, località...

html utilizza l'attributo class per supplire a questa mancanza: in pratica posso scrivere qualcosa come

<span class="telefono"><span class="prefisso-internazionale">+39</span><span class="prefisso-locale">041</span><span class="numero-telefono">1234567</span></span>

Il tag class fa parte dei microformati, di cui fanno parte anche rel e rev. Keep reading →

Webdesign / 10: html 5

Audio

L'audio su web può essere riprodotto tramite plugin proprietari (tipicamente adobe flash), oppure utilizzando il tag html5 <audio> (es. <audio src="http://www.softml.it/polite.mp3">). Tramite l'attributo controls si può richiedere al browser di mostrare i comandi di avvio, interruzione e volume dell'audio; ogni browser farà il render del controllore di audio alla sua maniera.

Allo stato attuale è guerra tra il formato mp3 (diffuso ma proprietario) e ogg (aperto ma meno diffuso). Keep reading →

Webdesign / 9: Accessibilità

Gli utenti "disabili" sono classificati in:

  • utenti con disabilità riguardanti vista, udito o movimento
  • utenti con difficoltà nella lettura e la comprensione del testo, a causa di difficoltà proprie (es. dislessia) o circostanziali (es. lingua)
  • utenti con difficoltà o impossibilità a usare i dispositivi standard di I/O (tastiera, mouse, schermo)
  • utenti con una connessione a internet lenta (in questo caso la "disabilità" riguarda la condizione dell'uso, non l'utente)
  • utenti non disabili che fruiscono di un contenuto in situazioni non ideali (es. mentre guidano)

Keep reading →

Webdesign / 7: ricerca

  • search zone: una search zone è un'area del sito su cui è ristretta una ricerca. Per esempio, se vado su amazon e cerco una parola chiave solo nell'area "elettrodomestici", quell'area rappresenta una search zone
  • effetto apple & orange: quando non esistono search zone è possibile trovare risultati in aree troppo eterogenee
  • pagine di navigazione / pagine di destinazione: a volte una pagina svolge entrambi i ruoli
  • agli utenti che fanno una ricerca esatta di qualcosa di noto (known-item search) è consigliabile mostrare tra i risultati meno elementi di chi fa ricerca euristica (exploratory search). Personalmente credo che in generale i risultati di una ricerca debbano essere piuttosto omogenei e non tentare di profilare troppo gli utenti.
  • i risultati possono essere mostrati in ordine alfabetico o di data (sorting) o per rilevanza (ranking)
  • i risultati possono essere esportati come "foto" del risultato corrente. Questo è utile soprattutto se il sito è dinamico e cambia i contenuti spesso.
  • la pagina di ricerca dovrebbe essere più semplice possibile, l'utente può ricercare anche senza utilizzare operatori logici e deve essere supportato da "consigli" (hint) quando sente la necessità di averne.
  • la pagina dei risultati deve riproporre il modulo di ricerca, in modo che l'utente possa affinarla sulla base della prima tranche di risultati
  • è possibile anche fare una ricerca per tag. Nel caso in cui un utente cerchi per tag, deve essere messo a conoscenza che i risultati si basano solo sulla presenza del tag nella pagina di destinazione, e non della ricerca del tag come parola chiave.
  • finding = searching + browsing: la possibilità di trovare un risultato si basa su quanto facile sia trovarlo sia per ricerca sia per navigazione, e a volte anche per un mix di entrambe.

 

Webdesign / esercitazione

Ecco qui la prima parte dell'esercitazione di WD: l'analisi di un sito di viaggi.

Ho scelto www.orodeldeserto.com, perché è fatto con bootstrap, e sembra che al giorno d'oggi questa sia l'unica alternativa perseguibile per avere dei layout responsive.
Probabilmente è vero che, per un cliente, vedere un sito responsive a poco prezzo e con tutto quanto ha anche la concorrenza è una gioia, ma dal punto di vista mio, e - sono convinto - di moltissimi utenti, un sito fatto con bootstrap è solo l'ennesimo sito fatto con bootstrap uguale agli altri.

Keep reading →

Webdesign / 5

Il file 04_lezione4_organizzare_informazioner.pdf è più complesso di quelli precedenti e meno "tecnico".

Utenti

La prima domanda è: come gli utenti trovano le informazioni?

  1. Gli utenti sanno cosa cercano: vanno "a botta sicura"
  2. Gli utenti intuiscono cosa cercano, ma desiderano una ricerca iterativa per perfezionare il loro stesso bisogno
  3. Gli utenti cercano tutte le informazioni su un argomento
  4. Gli utenti hanno già cercato e vogliono ritrovare il loro risultato

Keep reading →

Webdesign / 4

Nel file 03_lezione3_pianificare.pdf c'è un piccolo estratto di project management.

Nella "declinazione" della slide, le fasi di progettazione e sviluppo di un sito sono cinque:

  1. Analisi dei requisiti
  2. Design (???)
  3. Implementazione
  4. Test
  5. Manutenzione

In realtà la manutenzione potrebbe essere considerata una fase successiva al progetto vero e proprio.

Keep reading →