Cell. +39 3479684755
Il Blog di Instant Websites
Tutto in homepage
Tanto tempo fa, in una galassia lontana lontana…
… la homepage dei siti era utilizzata come pagina di benvenuto e, spesso, conteneva solo una foto o un’animazione per lo più inutile oltre alle bandierine per la scelta della lingua (se il sito era sviluppato in due o più lingue).
Ovviamente la galassia era la nostra ed il concetto di “tanto tempo fa” è da intendersi in termini informatici, quindi diciamo tre lustri e forse meno.
I motori di ricerca non erano ancora perfezionati. Google basava l’indicizzazione su quanto veniva inserito dagli sviluppatori nei metatag di pagina, da cui l’abominevole pratica di infilare parole-chiave appetite dal web anche se non c’entravano con i contenuti (ricordate quando su eBay i titoli delle inserzioni erano del tipo “Cellulare cinese no iPhone” in modo tale da essere visualizzate da chi cercava, nell’esempio fatto, l’iPhone?).
I dispositivi mobili non erano ancora diventati gli strumenti irrinunciabili e tuttofare che abbiamo oggi perennemente nelle nostre mani: si avevano a disposizione delle connessioni di tipo primitivo, come il Wap, costose e lente; i monitor dei PC da tavolo avevano una risoluzione orizzontale di 1024px.
No, non ho nessuna intenzione di commentare qualcosa del tipo “bei tempi” anche se appartengo alla schiera di coloro i quali trovano assai preoccupante il rimbambimento della gente a cui assistiamo tutti i giorni, per colpa degli smartphone che sono diventati delle estensioni delle mani ma non del cervello.
Non erano bei tempi, erano solo tempi assai diversi da quelli attuali e le pratiche adottate dagli sviluppatori web erano molto più elementari – e semplici – di quelle attuali.
Prima dell’arrivo dei CSS, le strutture di pagina erano costruite con i frame e le tabelle e, naturalmente, l’unica preoccupazione che concerneva la risoluzione video era quella di scegliere se sviluppare contenitori larghi un migliaio di pixel (1024 meno lo spazio occupato dalla barra di scorrimento) oppure 800 per supportare i monitor meno recenti. Media Query? Figurarsi.
L’aumento vertiginoso della velocità delle connessioni, passando dai 14.4Kbps dei modem analogici alle connessioni digitali, unitamente al sorpasso in anni recenti degli smartphone sui laptop come strumento di accesso alla Rete, hanno fatto sì che i siti si ampliassero e modificassero, includendo sempre più contenuti multimediali.
In tutto questo contesto, descritto molto sommariamente – non è certo mia intenzione scrivere la storia di Internet! – il significato della homepage o front page, cioè della pagina iniziale del sito, è mutato profondamente.
Introduzione a flexbox
La proprietà flexbox, introdotta con CSS3, costituisce uno strumento molto interessante per gestire lo spazio all’interno di un contenitore anche quando non si conoscano a priori le dimensioni dei box in esso contenuti.
L’aspetto più interessante che differenzia questa soluzione tecnica da quelle alternative (l’uso della proprietà float e della dichiarazione display: table-cell) è che tramite flexbox è possibile riordinare i box cambiandone la disposizione.
Per esaminare ad un primo livello di approfondimento flexbox, procederemo con una serie di esempi.
Inseriamo nella pagina un contenitore largo 450px con (inizialmente) tre box larghi 150px ciascuno, identificati dai numeri 1, 2 e 3 al loro interno.
Al contenitore è stata assegnata la classe .wrapper ed ai tre box al suo interno le classi: .primo, .secondo e .terzo.
Nel primo esempio, così come in quelli che seguono, il contenitore .wrapper ha tra le sue proprietà css la dichiarazione: display: flex; ed i box in esso contenuti assumono il comportamento di default, vale a dire si dispongono uno di fianco all’altro.
E’ possibile cambiare questa disposizione tramite la proprietà flex-direction che assume questi possibili valori: row (default), column, row-reverse e column-reverse.
Nel secondo esempio è stata usata la dichiarazione flex-direction: row-reverse; e nel terzo esempio la dichiarazione flex-direction: column-reverse; facendo sì che i box si dispongano rispettivamente su una riga partendo dall’ultimo e su una colonna, sempre partendo dall’ultimo.
Usabilità, siti “a prova di utonto” e siti “per utonti”
La norma ISO 9241-11:1998, poi aggiornata dalla ISO 9241-210:2010, definisce l’usabilità come:
“Il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza, soddisfazione in uno specifico contesto d’uso” intendendo
- Efficacia come precisione e completezza con cui gli utenti raggiungono specifici obiettivi
- Efficienza come risorse impiegate in relazione alla precisione e completezza con cui gli utenti raggiungono specifici obiettivi
- Soddisfazione come libertà dal disagio e attitudine positiva con cui gli utenti raggiungono specifici obiettivi attraverso l’uso del prodotto.
Usabilità del web – Wikipedia
https://it.wikipedia.org/wiki/Usabilit%C3%A0_del_web
Utonto (definizione personale): utente [del web] caratterizzato da scarsa esperienza e/o ridotte capacità nel consultare i siti Internet reperendo i contenuti desiderati in tempo ragionavolmente breve e con sforzi contenuti.
Per sintetizzare, a costo di semplificare in maniera un po’ grossolana, possiamo dire che l’usabilità sia la qualità di un sito o applicazione di essere facilmente navigabile e consultabile, grazie ad un buon sistema di navigazione e ad un ordinamento intelligente dei contenuti, mentre l’utonto … beh direi che il termine stesso – non necessariamente così dispregiativo come potrebbe apparire – lo spieghi adeguatamente.
Il web designer accorto deve tenere sempre conto dell’obiettivo di usabilità del sito; si badi che con il termine “designer” si indica tanto chi progetta il sito, la sua strutturazione e l’ordinamento dei contenuti, quanto colui il quale disegna materialmente le pagine del sito stesso.
La questione è: fino a quale punto bisogna … “abbassare l’asticella”, nel senso di mirare a rendere facile da usare il sito a visitatori che di web capiscono poco e si perdono facilmente?