Da poco sto sviluppando una piccola web application, devo quindi anche creare l’interfaccia utente, spesso chiamata front end.

Per non adottare soluzioni proprietarie e poco accessibili, ho scelto gli standard HTML ed i Fogli di Stile a Cascata (CSS).

Quando si apprende una nuovo argomento, si e’ spesso travolti da tante domande, le cui risposte non si trovano quasi mai in un unico articolo.

Ecco le domande che mi sono posto e gli articoli dove ho trovato risposta.

D) A cosa servono i CSS ?
R) A dare l’aspetto grafico ai documenti HTML.

D) Ma non bastava l’HTML ?
R) No. Prima dell’affermazione del formato CSS, l’aspetto grafico veniva dato con i vari tag dell’HTML, questo generava moltissima ridondanza di codice, scarsa leggibilita’ e bassa mantenibilita’, ed errori di interpretazione dei vari browser.
I CSS risolvono tutti questi problemi.

D) A dire il vero, pur usando i CSS, molte pagine vengono visualizzate in modo differente, da browser differenti ! Non e’ questo un obiettivo mancato dei CSS ?
R) Sono daccordo con te, anche se il problema non sta nei CSS, ma nei browser che lo interpretano.
Ad esempio, alcuni errori riguardanti Internet Explorer sono cosi’ conosciuti che esistono delle soluzioni standard descritte in molti siti.

D) Esistono tantissime risorse sul web, da dove inizio ?
R) Io ho iniziato da W3schools, e’ un sito semplice e ricco di piccoli esempi che puoi modificare al volo.
Ho poi scaricato qualche template, da FreeCssTemplate per studiarne il codice. Modificavo il CSS e l’HTML con un text editor (spesso uso Kate o Scite) e poi verificavo i risultati ricaricando la pagina dal browser (F5).
Per chi muove i primi passi, il tutorial Primi passi con HTML + CSS e’ una buona lettura.
Davvero utile ed un po’ piu’ avanzato e’  MaxDesign .

D) Come si applica il CSS al file HTML ?:
R) Esistono tre modi:
- css interno (embedded)
- css esterno
- css in-line
ecco spiegato come fare: Introduction to CSS.

D) Qual’e’ la differenza tra Class e ID Selector ?
R) I Class Selector e Class ID servono per selezionare una parte di HTML al quale applicare uno stile.
Class puo’ essere usato molte volte all’interno dell’HTML, ID invece solo una volta.
Una risposta completa la trovi su Selectutorial.

D) La proprieta’ Margin si comporta in modo inaspettato, e sembra non considerare i valori che ho impostato. Perche’ ?
R) Studiando il funzionamento di margin ho capito perche’ il margine degli elementi sembra comportarsi in modo assurdo. Bisogna per per prima cosa capire il Box Model e come viene gestito il Margin Collapsing, sia nel caso di elementi adiacenti che quello di elementi innestati (nested).
Ecco due articoli che spiegano il funzionamento:
Margin Collapsing
CSS-Auto height and margin collapsing

D) Come funziona il posizionamento degli elementi ?
R) Esistono varie modalita’ per il posizionamento degli elementi: static, relative, absolute, and float.
Bisogna capire il modo come queste funzionano nel posizionare gli elementi.
A tale scopo ho trovato molto utile Learn CSS Positioning in Ten Steps ed Il posizionamento CSS

D) Come faccio a capire se il CSS che ho scritto e’ corretto ?
R) Puoi controllare se il tuo documento e’ valido (validarlo) con il CSS Validation Service.

D) Qual’e’ il modo piu’ veloce per imparare i css ?
R) Non esiste “il modo” adatto a tutti. Comunque, un modo secondo me utile, e’ leggere e capire fogli di stile fatti da designer esperti. In CSS Zen Garden ne puoi trovare davvero ben fatti.

Spero di averti chiarito qualche idea.
E tu hai qualche consiglio o conosci qualche sito utile ?

E questo non e’ vero solo per gli strumenti complessi, come la plancia di comando dello Space shuttle, ma anche per una porta. Quante volte vi e’ capitato di non capire subito come aprire una semplice porta ? la spingiamo invece di tirarla (o viceversa), in altri casi’ spingiamo e tiriamo per poi capire che si tratta di una porta scorrevole.

Quindi anche gli oggetti con una sola funzione come una porta, possono essere progettati male e risultare poco pratici, possono cioe’ avere un design che non lascia intuire “come va usata”.
Ricordo di aver visto, in una candid camera,  un ladro rimasto bloccato in una banca che non riusciva ad uscire perche’ continuava a spingere la porta anziche’ tirarla

Si intuisce quindi che nei dispositivi piu’ complessi, come lavatrici, fax, o videocamere, e’ fondamentale il rispetto di alcune linee di usabilita’. Bisogna saper progettare oggetti, anche complessi, che possano essere facilmente compresi dagli utenti.

Mio padre ad esempio, dopo tre anni non riesce ancora a programmare il sistema di riscaldamento domestico: l’interfaccia e’ poco intuitiva, dotata di pochi piccoli tasti che bisogna premere decine di volte per poter selezionare una data funzione, e se si sbaglia bisogna ripetere l’intera sequenza.

Donald Norman e’ uno studioso di design e processo cognitivo umano. Ha scritto diversi libri tra cui La caffettiera del masochista, dove descrive molti errori di progettazione di comuni dispositivi, ed i principi di design che rendono piu’ felici chi li utilizza.

Il libro e’ validissimo, anche se un po’ datato, e leggendolo si scoprira’ che molti errori che crediamo essere nostri, sono spesso di chi ha disegnato lo strumento.

Norman ha sviluppato le sue idee in suo piu’ recente libro: Design Emozionale (2004), dove introduce altri fattori, come le emozioni e sensazioni dell’utente che usa il dispositivo.

Quindi, la prossima volta che sbagli nel compiere qualche azione, pensa che la colpa potrebbe non essere tua, e che colui che ha disegnato l’oggetto che stai usando protrebbe averti indotto allo sbaglio.

Se comunque hai problemi nell’usare le bacchette in un ristorante cinese … non prendertela con gli antichi cinesi inventori delle bacchette

A presto

GePC

Tempo fa un mio amico si chiedeva coma mai non esiste una macchina fotografica con cui poter scattare foto con un unico tasto, solo un tasto, senza bisogno di nessuna impostazione, senza nessun settaggio manuale o automatico, senza flash. Un solo click, e la scena cosi’ come a noi appare, viene per sempre catturata nella memoria interna della fotocamera.

Perche’ non esiste ?

E perche’ la Apple, azienda amante del design minimalista, non ha mai pensato di realizzarla ?

Non sono un fotografo, la fotografia comunque mi appassiona molto, mi sono quindi dato qualche risposta.
In realta’ le macchinette fotografiche “inquadra e scatta” esistono ancora, le usa e getta ne sono un esempio, ed anche molte compatte analogiche di qualche anno fa avevano solo un tasto.
E’ comunque vero che quasi non esistono piu’ fotocamere cosi’ semplici, ed i modelli attuali sono pieni di pulsanti e ghiere.
Perche’ ?
Dietro questa semplice domanda ci sono, oltre alle logiche del mercato dell’industria fotografica, implicazioni di natura tecnologica.
Una macchina fotografica con un unico tasto e’ equivalente ad una con tutti settaggi posti in modalita’ Auto.
Ma Auto cosa ?
I piu’ importanti sono due: il settaggio dell’esposizione e quello della messa a fuoco.
Per chi non lo sapesse, l’esposizione e’ la coppia tempo di esposizione e apertura di diaframma.
Il tempo di esposizione indica quanto tempo il sensore (o la pellicola nelle macchine analogiche) rimarra’ esposto alla luce della scena da catturare. L’apertura del diaframma indica quanto grande deve essere il forellino che fara’ passare la luce.
E’ facile capire che se viene impostato un tempo eccessivo o un’apertura troppo grande la foto risultera troppo chiara o come si dice in gergo  sovraesposta. Se il tempo e’ basso o il diaframma troppo piccolo la foto sara’ sottoesposta.
E’ meglio quindi esporre correttamente una foto ? dipende cosa intendiamo per correttamente e dall’effetto che volete dare
Se impostiamo la macchina con l’esposizione automatica, sara’ lei a decidere quando la foto e’ “correttamente” esposta.
Per decidere i valori di tempo e diaframma la macchina e’ dotata di un esposimetro interno che riconosce il grigio-medio come ideale l’uminosita’ per la nostra foto. Questo modo di funzionare crea un effetto indesiderato: la macchina vede qualunque cosa come grigio medio, quindi un oggetto bianco verra’ considerato grigio ma troppo illuminato, quindi diminuira’ il tempo di esposizione o l’apertura di diaframma. Allo stesso modo un oggetto nero gli apparira’ come grigio ma poco illuminato, quindi aumentera’ l’esposizione. In entrambi i casi l’oggetto apparira’ grigio. Noi pero’ vogliamo che la neve appaia bianca e le rocce vulcaniche nere, e non tutto grigio. Come fare ?
Bisogna impostare una modalita’ diversa da quella completamente automatica, che permetta di compensare la luminosita’ dell’immagine, o passare in modalita’ manuale ed impostare tempo, ed apertura a proprio piacere.

Un altro strumento automatico, molto utile, ma che a volte ci da’ risultati inaspettati e’ l’autofocus. Questo consente di mettere automaticamente a fuoco il soggetto che vogliamo fotografare. Ma come fa l’autofocus a capire cosa mettere a fuoco se nella scena vi sono diversi oggetti ? si potrebbe chiudere il diaframma e mettere a fuoco tutta la scena, la foto verrebbe tuttavia piatta ed il soggetto poco valorizzato. Se vogliamo fare un ritratto e’ buona norma mettere a fuoco solo il viso e non anche il paesaggio che sta dietro.
Tra l’altro per poter chiudere tutto il diaframma e’ necessaria molta luce o un tempo di esposizione molto lungo, condizioni che spesso richiedono l’uso di flash o di un treppiedi.
Spesso quando ci sono diversi oggetti nella scena e’ difficile far capire all’autofocus qual’e’ quello importante per noi, e’ quindi meglio passare alla messa a fuoco manuale. Non tutte le macchine compatte dispongono di questa modalita’, e’ invece sempre presente in quelle di tipo Reflex.

La “fallibilita’” delle automazioni presenti nelle macchine fotografiche, come l’esposizione e l’autofocus automatici sono quindi il motivo per cui e’ raro vederne una con un unico tasto. Le case produttrici prefereriscono infatti aggiungere vari programmi, e non di rado i comandi per le impostazioni manuali.

Al fotografo, comunque, spesso interessano le impostazioni manuali non per realizzare una perfetta’ riproduzione della realta’, ma per descrivere ed interpretare la scena a proprio piacere, un po’ come fanno i pittori.
Questo non vuol dire che disdegnano altri tipi di fotocamere. A molti fotografi ed appassionati piace molto fotografare con semplici compatte, macchinette usa e getta, e con le mitiche Polaroid. Su flicker, ad esempio, sono presenti diverse categorie per le foto realizzate con questo tipo di fotocamere, ed a volte i risultati sono sorprendenti.

Buone foto a tutti

GePC