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)
Webdesign / 8: Usabilità
Il buon vecchio caro zio Jakob Nielsen, di cui riporto la foto
definisce l'usabilità come:
- Facilità di apprendimento
- Efficienza d'uso
- Memorizzabilità
- Frequenza e gravità degli errori
- Soddisfazione soggettiva
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 / 6
I sistemi di navigazione principali sono browsing e searching.
I menu possono essere rappresentati da popup (es. su mouse over compare il menu di II livello) o pull-down (es. select con le opzioni) o drawer.
I pull-down possono essere comodi soprattutto su sistemi mobile per risparmiare spazio. Keep reading →
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.
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?
- Gli utenti sanno cosa cercano: vanno "a botta sicura"
- Gli utenti intuiscono cosa cercano, ma desiderano una ricerca iterativa per perfezionare il loro stesso bisogno
- Gli utenti cercano tutte le informazioni su un argomento
- Gli utenti hanno già cercato e vogliono ritrovare il loro risultato
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:
- Analisi dei requisiti
- Design (???)
- Implementazione
- Test
- Manutenzione
In realtà la manutenzione potrebbe essere considerata una fase successiva al progetto vero e proprio.