FREEDANCE: Il blog di Alessandro D’agnano

Ho acquistato con molta fiducia questo testo di Andy Clarke dal titolo completo “Oltre i CSS, la sottile arte del web design“.
Non acquistavo manuali sui Css da molto tempo, ma viste le ottimere recensioni ho pensato che mi potesse essere utile.
Avevo visto anche che era stato tradotto in italiano; una fatica in meno visto che gli argomenti trattavano anche aspetti teorici oltre che pratici.

Oltre i Css: la copertina

Il libro mi arriva. Ottima carta, belle illustrazioni, bella impaginazione e poi due ottime prefazioni: una di Molly E. Holzchlag e l’altra di Dave Shea.
Che dire? Mi aspetto molto da questo manuale. Finalmente qualcosa che mi può essere davvero utille. Devo dire che quando si arriva ad un grado di conoscenza alta
di una tecnica o argomento, è difficile trovare buone risorse.
L’unica possiblità è la rete, oppure sbattere il muso sul problema e risolverlo da soli. Con questo manuale ho pensato da subito che avrei imparato delle cose utilissime per il mio lavoro quotidiano.

Non posso dilungarmi nel parlare di ogni capitolo del libro, anche se meriterebbe di essere approfondito. Quindi se volete possiamo dilungarci in altri interventi.
Però voglio mettere in luce alcuni aspetti di questo manuale fondamentali per chi come me ha riposto fiducia nell’acquisto di un manuale da 40 euro.

In generale il testo mi ha profondamente deluso. Non critico il timbro molto personale dell’autore, perchè sono scelte editoriali.
Però in queste pagine si rischia di far passare come “leggi” molte teorie e approcci soggettivi.

Il testo secondo me è a metà tra un manuale di teorie di web design e grafica generale, e un manuale di pratica Css e markup. Sono riuscite male entrambi le parti.
In sintesi, la parte riguardante le teorie di progettazione, ispirazione e analisi delle possibilità creative, è relegata solo a supposizioni personali e argomentazioni un pò banali e obsolete.
Inoltre il testo spreca parecchie pagine (le prime) parlando sempre dei soliti perchè nell’uso dei Css, la storia dei Css, il supporto dei browser, ecc.
Tutti argomenti che dovrebbero essere saltati a piè pari in un manuale che si propone agli “utenti esperti”. Ci sarebbe anche da discutere di tutte le teorie di design e ispirazione proposte dall’autore,
ma non voglio farlo per scelta, perchè non mi interessa, anche se questi argomenti prendono oltre il 50% del manuale.

Voglio invece dire qualche parola di più rispetto alla parte tecnico pratica (quella che più cercavo in questo testo).
Questa parte è scarsa in termini di approfondimenti ed esempi pratici. Si toccano diverse problematiche ma nessuna viene affrontata con vero “mestiere”.
Si parla ad esempio di effetti tipografici sul Web. L’autore spiega le varie tecniche e ci consiglia di usare ad esempio sIFR. Spiega più o meno cos’è, ma la pratica è inesistente.
Eppure nel libro si parta di “concretezza” di esempi pratici.

Altra cosa secondo me destabilizzante è l’insistenza con cui l’autore ci spinge ad usare i “posizionamenti“. Ok sono potenti e la maggior parte di noi non li sà gestire bene, questo però non vuol dire che siano la tecnica migliore a prescindere da quello che c’è da fare.

Ad esempio in uno dei primi aprocci pratici (e siamo già alla pagina 160 !) viene gestito il layout delle colonne tramite posizionamento e non tramite float. L’autore poi, per sistemare il footer ci indica di usare una combinazione di Javascript e Css per forzare l’area a piè pagina un modo che si collochi sotto le colonne posizionate con metodo assoluto. La tecnica si chiama Inman posizion clearing. La domanda è: Perchè usare js per questa cosa? Perchè l’autore spinge verso il posizionamento assoluto?
Una delle giustificazioni è quella di evitare la “spaginazione” del layout ingrandendo i font e usando i float.
Io ho realizzato tanti lavori con i float a prova di ingrandimento font fino a 4 volte. Sicuramente il posizionamento è una tecnica ma non la migliore!

Comunque la cosa più grave del manuale è che, tramite questo approccio di posizionamento, viene proposta una tecnica di design che non tiene conto di progetti reali, legati soprattutto a siti e portali dinamici. Certo il manuale è rivolto ai web designer, però come tutti sappiamo, il markup e i Css devono tenere presente la vera implementazione pratica dei template realizzati.

Quindi è inutile posizionare in modo assoluto elementi “ripetivitivi” magari dando dei “left” e dei “top” tramite Css, quando poi questi elementi faranno parte di un “ciclo for” e rappresentano quindi
dei recordset di un DB.
Di questi esempi il manuale ne è pieno. Certo il posizionamento assoluto è magico e risolve diversi problemi, ma riguarda secondo me, esclusivamente elementi di design puro, non di contenuto.

Veniamo ai pochi spunti interessanti del manuale (c’è ne sono pochi, ma c’è ne sono).
Una cosa intelligente che dice l’autore è quella di evitare di trasformare i nostri vecchi design tabellari (parlo anche a livello di concezione mentale) in tabless. Questo vuol dire che realizzare un sito semantico e aderente agli standard, non significa solo sostituire i tag “table” con “div” e fare la grafica via Css.

Altra buona riflessione è quella di incorporare elementi ricorsivi (appunto recordset di DB per esempio) dentro delle liste. Perchè in fondo questo sono. Giustissimo.

Altri spunti (di cui se volete possiamo approfondire) sono l’uso dei microformat e delle considerazioni riguardo i wireframe (che anche io ho fatto in un post precendete).

In definitiva devo dire che 40 euro per questo manaule non sono giustificabili. Non bastano le belle foto, la bella carta e l’impaginazione per vendere un prodotto a questo prezzo.
E poi manca di veri contenuti pratici. Contenuti che vengono sbandierati come elemento caratterizzante.

La domanda che mi pongo è: Che percentuale di utilità avete riscontrato nei manuali acquistati durante la vostra esperienza lavorativa? Per il momento la mia è di 1 su 10.
Direi molto scarsa!

Ciao a tutti,
è oramai da qualche settimana che pubblico dei guest-post su questo blog molto conosciuto condotto con successo dall’amico Mirko D’isidoro.
Riassumo i post pubblicati fin’ora, invitando tutti voi a leggere e commentare i miei interventi.

Web Design: La questione dei Fonts
In questo articolo tratto l’argomento relativo alla scelta dei font per le nostre creazioni web. Segnalo diverse risorse e utility anche per sfruttare gli “em”.

Come importare feed da WordPress ed eliminare le cause di errore
Questo post, abbastanza tecnico, parla di come struttare gli Rss del proprio blog su WordPress ed integrarli nel proprio sito web. Offro anche una soluzione ad un problema noto quando WordPress esporta i nostri feed.

Sviluppo web mobile: Come sarà il 2009?
Il mobile presentato come vera killer application per il futuro. Parlo di web-mobile a 360° e presento anche il manuale Sviluppare il web mobile di Fabio Ricci.

Web Design: I Wireframe sono ancora utili?
Post molto teorico e personale, in cui metto in dubbio l’utilità attuale dei wirefare.

Web Design: Creatività solo per creativi?
Dubbi, perplessità e propositi sul futuro. Tutto quello che penso del nostro lavoro di creativiti e mediatori.
Da non perdere!

Buona lettura a tutti…

Ciao ragazzi,
molte volte mi capitano clienti che considerano il posizionamento e il funzionamento del menù generale del proprio sito, come un aspetto secondario. Quasi sembra che sia un abbellimento o un problema da risolvere, per non guastare il design.
Invece il menù, sia semanticamente che praticamente, è una delle componenti più importanti per un sito o portale fatto ocn i giusti criteri.
Personalmente cerco di capire subito che tipo di menù posso proporre e le soluzioni tecnologiche da adottare. Le richieste dei clienti si spingono al massimo a cose del tipo “non si muove niente?”, oppure “i tasti in flash” ecc… Invece è da ponderare bene la profondità delle sezioni principali, se il menù presentata tante voci (e quindi bisogna disporlo in verticale), se alcune voci si possono accorpare, creando un menù orizzontale con sottovoci… Sono tanti gli aspetti strategici da considerare, fatto questo un bravo design deve trovare la forma giusta per esprimere queste reali esigenze, che spesso il cliente non sà neanche di avere.

Visto l’argomento delicato, vi segnalo questa pagina apparsa sul sempre ottimo smashingmagazine.com, che presenta ben 50 soluzioni e ispirazioni per i nostri menù. La pagina è divisa in 6 sezioni, in base alla tecnica che vogliamo utilizzare per realizzare il nostro menù. Con il proliferarsi delle librerie javascript, molti menù prima fatti solo con flash, ora possono essere realizzati tramite javascript e Css. Vengono quindi presi degli ottimi esempi, sia di puro Css, di Flash, di Css e Javascript.
Vengono anche analizzate soluzioni ad alta usabiità e menù che prevedono lo scroll verticale di tutto il sito.

A questa pagina aggiungo una segnalazione di un ottimo portale di ispirazione grafica. Su Noobr, troverete tutorials, icone, risorse per noi designer e dintorni.
Non perdetelo!

Enjoy.

Una delle tecniche più apprezzate per la sostituzione di immagini,
ed aggiungo anche, migliori come resa se non supportate dal browser, è sIFR. Questa tecnica, tramite javascript e un filmatino flash, ci permette di avere titoli (ma anche interi testi) con il font desiderato o che ci viene dato tramite la creatività di un grafico.

Per chi è accorto di creatività e vuole scaricarsi un swf bello pronto da integrare nel suo sito (avendo già istanziato sIFR), segnalo sIFRvault. E’ una gallery di font, però già inclusi nel nostro flash, pronti per il download e utilizzabili immediatamente!

Buon lavoro!

WordPress ormai è andato oltre tutte le aspettative degli sviluppatori.
Sia che sia un’istanza sul web, oppure un’istallazione personalizzata, questo Cms è diffusissimo.
Molti gli esercizi per “piagare” questa piattaforma di blog, ad un uso Cms puro, per gestire siti e portali (ci sono addirittura plugin per l’ecommerce)…

Per chi volesse provare una nuova veste grafica alla sua personale installazione di WP, consiglio questa ottima risorsa fornita dal portale di grafica Noupe.com.
Si tratta di 15 template di elevata qualità e dettaglio, con cui possiamo affrontare soluzioni mai banali e studiare nuove tecniche Css da applicare ai template WP.

E allora, buon lavoro!

Per chi è alle prime armi con WP,
consiglio caldamente questo ottimo tutorial, che ci guida passo-passo, nella creazione di un tema completo per WP.
Il tutorial parte da una situazione reale, quindi un file psd e và avanti in modo coerente e logico, senza saltare passi salienti. Si passa all’analisi della struttura della pagina di WP, alla compilazione dei Css, fino alla gestione dei contenuti da Admin.

Studiatelo!

Ciao ragazzi,
oggi posto una bella pagina piena di tutorials ben fatti riguardo la realizzazione di layout con Css e Xhtml.
In tutto abbiamo 40 item, che vanno da semplici tips a argomentazioni più lunghe e corpose.

Ad esempio segnalo questo tutorial che step-by-step porta l’utente dal psd al markup/Css, ma anche il famosissimo esempio di sfondi parallelli…

Buona lettura!

Ciao a tutti,
sto cercando di capire il perchè e se è effettivamente un bug della nuova release di Firefox.
Fatto stà che ho trovato un comportamento strano del browser se utilizzo il float:right.

L’esempio è facilmente ripetibile da tutti voi.

Markup, direttamente nel body, un div, così:

<body>
<div id=”wrapper”></div>
</body>

A cui associamo questa semplice riga di Css:

#wrapper {width:1000px; float:right; background:#CC66FF;}
(ovviamente la dimensione del div è a piacere)

Cosa succede a questo punto? Se la nostra risoluzione o la nostra finestra di Firefox è minore alla dimensione del div (1000px) dovremmo vedere una scrollbar orizzontale che ci permette di vedere tutto il contenuto della pagina. Bhe questo succede con Safari, Opera, IE7, ma non con FireFox 3.

Infatti il browser si comporta in modo strano. Semplicemente “taglia” i contenuti senza mostrare la scrollbar.
Facendo una prova veloce sul Css e cambiamo il float su “left”, ossia:

#wrapper {width:1000px; float:left; background:#CC66FF;}

tutto torna alla normalità e il browser mostra correttamente lo scorrimento.
Se avete un’immagine da inserire “inline” vi accorgerete meglio di questo strano comportamento.

Aspetto risposte o confortanti conferme!

Finalmente,
un ottimo (anche se semplice) tutorial che parte dalla creazione di un layout con photoshop, per finire alla sua realizzazione in Xhtml/Css con validazione compresa.

Non aspettatevi cose complesse, però per capire bene i processi, per aggirare alcuni ostacoli, questo tutorial si pone come un utile appiglio soprattutto per i meno pratici.

Secondo me di questi tutorials se ne dovrebbe fare un manuale.
Che ne pensate? Lo facciamo tutti insieme?