Questo breve tutorial mi serve solo come spunto. Spiega come creare il layout di un form facendo a meno delle tabelle. La tecnica adottata è quella già  nota basata sull'adozione di elementi li per contenere gli input e le label. Voi quale tecnica adottate e/o preferite per impostare il layout dei moduli? Avete buttato a mare le tabelle pure per questi scopi?

Continua a leggere Come realizzate il layout dei vostri form?

Categoria: CSS

Tags: , ,

A prescindere da una buona strutturazione a livello di markup, la realizzazione di tabelle efficaci sul web è questione di buone pratiche in termini di usabilità  e architettura dell'informazione, specie quando i dati da presentare sono tanti e complessi. A quali siano queste buone pratiche e ad un'analisi dettagliata dei vari tipi di tabelle è dedicato l'articolo Designing Tables 101 uscito su UXMatters. Davvero molto illuminante pur essendo, a partire dal titolo, una sorta di introduzione generale e di base all'argomento. Passando al lato pratico, quello degli esempi di formattazione di tabelle via CSS, segnalo a quanti non la conoscessero la CSS Table Gallery ideata a suo tempo da Chris Heilmann. àˆ una galleria di esempi visualizzabili in anteprima sulla stessa pagina. Per ciascun esempio è poi possibile scaricare il foglio di stile corrispondente.

Continua a leggere Progettare e realizzare tabelle efficaci

Categoria: Web Design

Tags: , ,

Nell'articolo di cui si parlava l'altro giorno, quello in cui Douglas Bowman spiegava il processo di creazione dei bottoni adottati nell'interfaccia di GMail e GReader, il designer di Google attribuiva gran parte del merito per la riuscita implementazione alla dichiarazione CSS display:inline-block: The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work. Di cosa si tratta? (more...)

Continua a leggere Usare inline-block

Categoria: CSS

Tags: , ,

Chi l'avrebbe detto... All'alba dell'anno di grazia 2009, su uno dei siti più frequentati da sviluppatori web di ogni dove, si accatastano centinaia di commenti in calce ad un thread intitolato I CSS non dovrebbero essere usati per i layout (il link punta a questo articolo). Non vi basta? Ancora decine di commenti ad un thread, sempre su Reddit, che prende spunto da un altro intervento sul tema. L'origine di tutto? Un lungo post tutto dedicato ai troll dei CSS pronti a spararti addosso appena tiri in ballo idee come quella che le tabelle per i layout sono di gran lunga più comode ed efficaci dell'accoppiata div/CSS (accompagna il tutto lista dei primi 20 siti del rank di Alexa, con in evidenza l'uso sugli stessi di tabelle per il layout globale o di specifiche sezioni della pagina). Difficile sintetizzare qui il contenuto di interventi così corposi e a dire il vero pieni di provocazioni molto stimolanti. Un argomento comune mi pare di poterlo individuare: nell'implementazione attuale, i CSS non sono lo strumento ideale per realizzare un layout; forse un giorno lo saranno, visto che nei CSS3 sono previsti dei moduli ad hoc, ma se si cerca una soluzione che, semplicemente, funzioni le tabelle sono ancora l'opzione migliore. Mi piace chiudere con questa citazione dal post di Rondam Ramblings: Io credo che i computer debbano essere al servizio delle persone e non il contrario. Cià significa che se qualcosa che è di per sé semplice diventa difficile, allora c'è qualcosa di sbagliato. Non tutti concordano su questo punto. A un numero sorprendente di persone piacciono le cose complicate. Non ho mai capito perché, ma è un dato di fatto.[...] Tutto cià significa che quando voglio, diciamo, che qualcosa appaia al centro dello schermo, dovrei essere in grado di farlo semplicemente scrivendo "center" piuttosto che "margin:auto". Se non posso dire ad un computer di centrare qualcosa scrivendo "center", allora temo che sia il computer ad essere dalla parte sbagliata, non io.

Continua a leggere Toh, ancora tabelle vs. div…

Categoria: CSS

Tags: , ,

TableSorter.js è un plug-in Javascript dal peso irrisorio (solo 1.7kb circa), realizzato da Michael Leigeber, che permette di trasformare le tabelle in una sorta di "griglie ordinabili". L'ordinamento è effettuabile con numeri e stringhe (mail, indirizzi di posta elettronica,...). TableSorter.js (libero dalla presenza di qualsiasi framework) è standalone ed è compatibile con i seguenti browser: Firefox 2/3, IE 6/7/8, Opera, Safari e Google Chrome. Ecco la demo che mostra come è possibile interagire con una corposa tabella tramite l'ordinamento delle righe delle stessa.

Continua a leggere TableSorter.js: tabelle ordinabili in versione “standalone”

Categoria: Scripting

Qualcuno tra i lettori più affezionati ricorderà  un vecchio post con cui segnalavamo questo esperimento consistente nel realizzare un layout basato sui CSS senza però float o posizionamenti, ma attraverso l'uso delle proprietà  associate alle tabelle e a certi valori speciali di display come display: table. In sintesi, un elemento a cui venga associata qualcuna di queste definizioni di stile si comporta in fase di resa come una tabella o uno dei suoi elementi costitutivi (celle, colonne, righe, etc). Una specie di uovo di Colombo con cui si ripristina tramite i CSS cià che prima si faceva con HTML. (more...)

Continua a leggere Layout con le tabelle CSS

Categoria: CSS

Tags: , ,

Secondo appuntamento con Code-It. Il video di questa settimana mostra come inserire in pochi minuti una tabella simile a quelle di Excel nelle nostre pagine web usando Ext JS, tabella che sarà  poi possibile ordinare, ridimensionare e modificare grazie alle potenti funzionalità  di questo framework.

Continua a leggere Code-It: tabelle Excel con Ext JS

Categoria: Scripting

Tags: ,

Dragtable

1 Jul

Quella delle tabelle ordinabili è un'applicazione parecchio diffusa e desiderata. Dragtable è uno script creato da Dan Vanderkam che permette appunto di rendere trascinabili e quindi ordinabili le colonne delle nostre tabelle. Nell'articolo viene spiegato molto bene come utilizzare Dragtable. In breve, dopo avere inserito lo script dragtable.js, basta semplicemente aggiungere "draggable" come valore dell'attributo class della tabella che vogliamo rendere ordinabile. Ecco infine i link alla demo ed allo spazio del progetto ospitato da Google Code.

Continua a leggere Dragtable

Categoria: Scripting

L'evoluzione delle fonti di ispirazione (al secolo showcase, o gallery css, etc) passa finalmente dalla specializzazzione dei contenuti! Ne sono una dimostrazione questa utilissima CSS Table Gallery, showcase davvero ricca di contenuti che raccoglie i design CSS delle classiche tabelle per i dati, e CSS Form Garden, una showcase di form design di tutto rispetto. Adesso ne aspetto in gloria una per i menu di paginazione e un altra per gli header grafici e sono a posto! O forse esistono gia ma io non le conosco? E voi non ne conoscete qualcuna?

Continua a leggere Table & Form CSS gallery

Categoria: Web Design

Non proprio nel senso classico, non con codice HTML infarcito di <tr> e <td> annidati, ma secondo Kevin Yank, che ci fa un post sul blog di SitePoint, il binomio layout/tabelle potrebbe avere una seconda vita grazie ai CSS. Come sapete, la specifica prevede una serie di proprietà  per la gestione delle tabelle e altri valori legati alla tabelle per la proprietà  display. Proprio usando una combinazione di queste proprietà  Yank ha realizzato un layout a tre colonne a suo dire robusto, che non necessita di hack, che non usa float e posizionamenti, che non ha il problema dell'altezza delle colonne, etc. Il tutto grazie al fatto che, applicando quelle proprietà  a dei normalissimi div, questi si comportano di fatto come se fossero... celle di una tabella. L'esempio l'ho testato con successo su Safari 3 e Opera 9.10, e devo dire che rende alla perfezione, anche ingrandendo di molto il testo regge benissimo. Su Firefox 3 non va; per IE7 Yank ha predisposto a titolo di esempio un CSS alternativo con i commenti condizionali.Inutile dire che al momento è una tecnica improponibile visto lo scarso supporto, ma l'autore afferma che in futuro potrebbe essere un'alternativa valida ai metodi attuali.Per il codice, facile da comprendere, vi rimando ancora una volta al post e all'esempio.

Continua a leggere Toh, di nuovo layout con le tabelle…

Categoria: CSS

Tags: ,