Gli ultimi post di Edit
Come funzionano i valori delle tabelle per la proprietà CSS display
Venerdì 10 Agosto 2012 - 14:00
di Gabriele Romanato
I valori delle tabelle per la proprietà CSS display risalgono ai CSS 2, ma solo recentemente sono divenuti popolari grazie al supporto di Internet Explorer introdotto dalla versione 8. Tuttavia questi valori sono poco conosciuti e ancora oggi per costruire griglie si utilizza ancora la sola proprietà float. Vediamo in dettaglio questi valori.
Continua a leggere Come funzionano i valori delle tabelle per la proprietà CSS display
Categoria: CSS | Permalink | Commenti (3)
Come realizzate il layout dei vostri form?
Lunedì 2 Novembre 2009 - 10:35
di Cesare Lamanna
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?
Categoria: CSS, Web Design | Permalink | Commenti (17)
Progettare e realizzare tabelle efficaci
Giovedì 1 Ottobre 2009 - 08:19
di Cesare Lamanna
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.
Categoria: Web Design | Permalink | Commenta
Usare inline-block
Lunedì 23 Febbraio 2009 - 08:18
di Cesare Lamanna
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? Continua a leggere Usare inline-block
Categoria: CSS | Permalink | Commenti (12)
Toh, ancora tabelle vs. div…
Mercoledì 4 Febbraio 2009 - 08:59
di Cesare Lamanna
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.
Categoria: CSS | Permalink | Commenti (59)
TableSorter.js: tabelle ordinabili in versione “standalone”
Venerdì 7 Novembre 2008 - 08:19
di Riccardo Degni
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.
Categoria: Scripting | Permalink | Commenta
Layout con le tabelle CSS
Venerdì 10 Ottobre 2008 - 09:27
di Cesare Lamanna
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.
Continua a leggere Layout con le tabelle CSS
Categoria: CSS | Permalink | Commenti (8)
Code-It: tabelle Excel con Ext JS
Mercoledì 16 Luglio 2008 - 12:32
di Cesare Lamanna
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.
Categoria: Scripting | Permalink | Commenti (6)
Dragtable
Martedì 1 Luglio 2008 - 08:41
di Riccardo Degni
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.
Categoria: Scripting | Permalink | Commenti (3)
Table & Form CSS gallery
Giovedì 20 Marzo 2008 - 08:18
di Gianluca Brindisi
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?
Categoria: Web Design | Permalink | Commenti (4)