Archive for the 'Web-Design' Category

Google User Experience: predica bene, ma…

Quante volte, girovagando di qua e di là alla ricerca di qualche utile articolo sul web-design, vi siete imbattuti in una di quelle liste di consigli da seguire durante la progettazione del vostro sito?

Personalmente non le conto nemmeno più, e gli autori sono davvero i più svariati, dall'esperto internazionale di CSS al piccolo blogger che cerca di mettere a disposizione degli altri tutta la sua esperienza.

In genere solo raramente mi soffermo in una lettura più attenta di questo genere di articoli (ipotizzando con arroganza di non aver nulla di nuovo da imparare :oops: ). Eppure questa volta non ho potuto proprio ignorare il post in questione, dopo aver appreso dal titolo che il dispensatore di consigli di turno era niente-po-po-di-meno-chè l'onnipotente Google. :eek:

Google Teacher

Ad una prima lettura, il gruppo Google User Experience è in effetti riuscito a sintetizzare in 10 semplici punti come una applicazione web degna di questo nome dovrebbe essere sviluppata. Si tratta di consigli molto generici ma di indubbio valore didattico. Del resto si tratta di quelle stesse linea guida seguite ai tempi della creazione di quell'interfaccia che ha decretato il successo di Google nella lotta dei search engine.

E allora dov'è il problema vi starete chiedendo? Semplice provate a scorrere la lista fino al sesto punto:

6. Design for the world.

... Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users...

... and Google's mission to make the world's information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone...

Se a questo punto non siete sobbalzati dalla sedia e/o svenuti significa che non usate Opera con le web application di Google. Giusto in questi giorni sto infatti valutando seriamente l'idea di abbandonare sia GReader che Gmail in favore di alternative che non richiedano necessariamente Firefox per funzionare.

Chiunque usi il Feed Reader di Google con Opera sa bene infatti come, oltre ai mille problemi in cui si incappa ad ogni aggiornamento dell'applicazione (che vengono risolti mediamente in 10 giorni o più), attualmente la sua lettura risulti estremamente irritante, con latenze e "freeze" temporanei che metterebbero alla prova anche la pazienza di San Francesco.

Anche Gmail e le altre applicazioni poi non è che brillino sul fronte compatibilità, per quanto si riesca comunque a lavorare una mezzoretta senza farsi venire un'ulcera gastrica.

Google si era sempre difesa affermando come fosse Opera ad avere delle limitazioni intrinseche di difficile soluzione. Ma abbiamo già visto come queste affermazioni fossero del tutto prive di fondamento.

Insomma sviluppare web-application universali va bene... purchè in qualsiasi parte dell'universo ci si trovi si stia usando Firefox. :roll:

Campagna anti-google a parte, esorto comunque tutti i miei lettori a seguire alla lettera almeno i consigli dati dalla grande G... ma per l'esempio forse è meglio guardare altrove. :wink:

Frameworks CSS: La moda del momento

Oggi torno finalmente a parlare un po' di webdesign. Nessun tutorial questa volta (ma ne dovrebbe arrivare qualcuno prossimamente) ma solo una riflessione.

Seguendo con interesse la parte di blogosfera che si occupa di queste tematiche, non ho potuto fare a meno di notare come ultimamente realizzare, usare e rilasciare un Framework CSS sia diventata una cosa assolutamente necessaria, pena essere uno sfigato.

Web DesignMa andiamo con ordine. Cosa è un Framework CSS? Si tratta in pratica di un "pacchetto" base già pronto con tutto un insieme di regole generali che consentono in poco tempo di realizzare layout anche piuttosto complessi. In realtà l'idea è buona e facilita molto la vita di webmasters e webdesigners che non si vedranno più costretti a ricreare tutto da zero ad ogni lavoro commisionatogli. Creando un framework generico una volta, sarà poi sufficiente riadattarlo alle necessità del nuovo sito a cui si sta lavorando.

Ma la prima pecca (sempre nella mia umilissima opinione) sta proprio in questo: un framework va bene (e comunque neanche troppo) finchè ad utilizzarlo è il suo creatore o una ristretta schiera di sviluppatori molto vicini (nella metodologia) ad esso. Il motivo è presto detto ed anche facile da capire. Per accogliere le più disparate esigenze dei suoi utilizzatori, il CSS base dovrà necessariamente includere un corposo set di regole e proprietà generiche e di reset che non avrebbero senso di esistere (e che non ne hanno in effetti) in un foglio di stile creato in proprio e costruito per adattarsi al progetto per cui è nato, proprio come un guanto in lattice farebbe con una mano. :lol:

Conseguenza di ciò sarà una inutile pesantezza e complessità del CSS finale che, tradotto in termini pratici, significa tempi maggiori per il suo download e per il rendering della pagina (ipotizzando che tutti i problemi cross-browser/platform siano stati previsti e risolti :roll: ).

Se, tuttavia, questi problemi possono essere sentiti solo marginalmente (o comunque in modo irrilevante rispetto ai benefici) usando un framework ben progettato, la follia raggiunge il suo culmine con l'uso di framework specificatamente creati per sopperire ad ogni esigenza. Tipici esempi sono Blueprint e YUI Grids, nonostante le ottime intenzioni con cui nascono.

Il secondo problema è poi proprio l'uso, spesso davvero eccessivo ed inadeguato, di regole di reset. Anzi si è oggi arrivati persino ad avere non più framework CSS bensì CSS di Reset! :shock:

Anche qui meglio dare prima una piccola spiegazione. Con regole di reset in pratica si azzerra qualsiasi "proprietà" (margini, padding e molto altro) che questo o quel browser attribuirebbe arbitrariamente agli elementi della pagina attenendosi al proprio schema (beati coloro che vedranno il giorno in cui il W3C sarà l'unico Dio riconosciuto da sviluppatori web e produttori di browsers).
Senza alcun dubbio il problema esiste ed è reale (anche se personalmente oggi non lo avverto più come in passato) e le opinioni in materia sono le più disparate. Quello che è certo però è che larga parte degli sviluppatori odierni fa un vero abuso di questa pratica anche quando sarebbe assolutamente evitabile, e vedere applicati 10 o più reset al selettore universale non è poi così raro.

Girl PC

Giusto mentre stavo scrivendo questo articolo (in stato di bozza da diverse settimane insieme ad altri che seguiranno :sad: ) ho avuto modo di leggere un'interessantissima trattazione (che vi consiglio caldissimamente) dell'argomento sulle pagine di <edit>. Ed anche lì comunque il succo è il medesimo benchè a parlare siano voci ben più autorevoli della mia.
Chiamati in causa sono stati infatti Jonathan Snook e Jens Meiert, che si sono espressi anche ben più duramente del sottoscritto ed arrivando addirittura a sostenere che l'unico reset da utilizzare debba essere il classico margin: 0; padding: 0;.

Ai più questo sembrerà forse davvero eccessivo ma personalmente, per il mio modo di sviluppare un sito, non la ritengo una regola tanto costrittiva o limitativa.

Comunque stiano le cose è chiaro che si tratta di pure opinioni personali condivisibili o meno. In attesa di dedicarmi nuovamente al sito principale (lo finirò... un giorno o l'altro lo finirò), e verificare di persona la reale necessità di questi strumenti, io la mia l'ho detta (e con la solita logorroicità che mi contraddistingue :lol: )... ora tocca a voi. :wink:

Filmati Flash in background con i CSS

Ed iniziamo con questo articolo una serie di guide e di tips & tricks per eventuali webmasters alle prime armi che passassero da queste parti. Onestamente non so bene neanche io come (e se) si svilupperà la cosa. Ma come sempre l'importante è iniziare no?

L'idea mi è venuta grazie ad una domanda posta da un utente sul forum di MegaLab.it. Vedendo come operazioni apparentemente molto semplici possano sembrare dei problemi insormontabili ad un neofita mi ha spinto a cominciare questa nuova "rubrica".

Ed adesso andiamo al tema di oggi: "Come creare in modo semplice e veloce una pagina web in cui un filmato flash farà da cornice alla nostra pagina vera e propria".

Continue reading 'Filmati Flash in background con i CSS'

Safari 3.1: la soluzione che molti webmaster aspettavano

Non essendo (ancora) un mac user non ho mai seguito molto lo sviluppo di Safari e WebKit, il suo core-engine.

Safari LogoCome molti di voi sapranno tuttavia qualche tempo fa Apple ha deciso di portare il suo innovativo web-browser sulla piattaforma di zio Bill e da allora le cose sono cambiate, ritrovandomi adesso a seguire una decina di feed in più per restare aggiornato sull'argomento.

E proprio oggi aprendo il mio Google Reader trovo tra questi ultimi feed una notizia che mi ha davvero interessato, sia come pseudo-esperto/amante di browser (no, non sono malato :roll: ) sia, soprattutto, come webmaster dal momento che aspettavo questa feature da anni.

La notizia a cui mi riferisco è il supporto (finalmente!) al download dei font usati nelle pagine che visitiamo, qualora questi non siano disponibili sul nostro sistema.

Sino ad oggi infatti in questi casi il comportamento standard di tutti i browser sarebbe stato di sostituirli con font simili (con risultati spesso piuttosto lontani dall'originale) o, peggio ancora, con quelli di default.

Sembrerà una cavolata ma in realtà la cosa ha sempre rappresentato un problema di non poco conto per tutti i webmaster, specie se alle prime armi, che realizzato il layout dei propri sogni scoprono come questo renda in modo orribile sul PC dell'amico (naturalmente il problema dei font è solo uno dei tanti sotto questo aspetto).

L'unica soluzione, ormai ampiamente collaudata nel corso degli anni, è stata quella di ricorrere all'uso di limitati set di caratteri standard che, nella migliore delle ipotesi (e non sempre questo è vero), tutti gli utenti della rete dovrebbero avere installati sul proprio sistema.

Naturalmente questo palliativo, viste le infinite possibilità che i grafici (o tipografi? :???: ) di oggi ci mettono a disposizione, non mi ha mai soddisfatto molto, appiattendo di fatto molte idee originali in nome della compatibilità. Del resto anche il "workaround" di ricorrere all'uso di immagini non è applicabile che a limitate sezioni della pagina come l'header o poco altro, mentre quello di realizzare tutto in flash (che permette di incorporare i font nel file) non è certo una soluzione valida.

Finalmente comunque questo problema ha trovato una soluzione piuttosto semplice, ma al tempo stesso efficace, grazie al lavoro svolto dagli sviluppatori di WebKit.

Inspector Fonts

Resta tuttavia il dubbio sulla reale utilità della cosa qualora anche i concorrenti non adottino lo stesso comportamento. Sviluppare un sito per un solo browser non è infatti la scelta migliore, specie se questo non ha i numeri di IE o FF, e non credo che saranno in molti i webmaster che rischieranno una mossa del genere.

Sperando che Microsoft, Mozilla ed Opera si pronuncino presto sulla faccenda non ci resta che attendere fiduciosi.

Discorso font a parte comunque, altre novità accompagneranno il debutto di Safari 3.1.

Tra le più importanti, il supporto allargato ad HTML5, l'ultima versione dello standard, già adottato anche da Opera 9.5 e Firefox 3, che includerà fra le altre anche tag per il supporto nativo agli elementi audio e video, e le nuove capacità CSS Transform e CSS Animations, caratteristiche davvero interessanti nelle mani di sviluppatori esperti.

E come sempre ecco una lista di fonti ed approfondimenti vari.

Links:

WebKit Blog: Web Inspector Update
WebKit Blog: CSS Animation
TheAppleLounge: Mac OSX 10.5.2: seed 9C31 con Safari 3.1
Apple Blog: Safari 3.1: supporto ai font web scaricabili e molto altro
MelaMorsicata: In arrivo Safari 3.1
Just Browsing: Apple Edges Towards RIA Viability