La soluzione proposta consiste nel definire due o più gruppi di colonne assegnando varie classi (Es: essential, optional, etc..) quindi utilizzare delle media-query CSS per visualizzare e nascondere gruppi di colonne in base alle dimensioni del display.

Si tratta dunque di un esempio di design responsivo.

Trovando la soluzione molto interessante ho costruito un plugin jQuery che rende estremamente semplice realizzare sulle proprie pagine web quanto spiegato nell’articolo.

>>> Vai alla demo! <<<

MediaTable in Azione:

In questo primo screenshoot vediamo una tabella di cui sono visualizzate solamente le colonne veramente importanti. Siamo su di uno schermo di piccole dimensioni!

Cliccando sul menu “columns” (il cui nome è configurabile) si apre un menu contenente l’elenco completo delle colonne disponibili nella tabella. Possiamo variare a piacere il numero di colonne visualizzate mettendo in relazione informazioni differenti.

Questo menu è generato automaticamente! Il sorgente di questo esempio, come spiegato successivamente, è una semplice tabella dati HTML!

>>> Vai alla demo! <<<

Come si usa MediaTable?

MediaTable richiede la definizione di una tabella HTML definita correttamente ovvero con THEAD e TBODY. Le colonne di intestazione vanno raggruppate per classe in base alla priorità di visualizzazione.

Via CSS si imposteranno dei breakpoint su cui definire quali gruppi di colonne visualizzare.
Il plugin costruisce inoltre un menu delle colonne disponibili per consentire una selezione manuale esplicita delle colonne da visualizzare.

Il nostro esempio utilizza 3 gruppi di colonne:

• essential – visibili su qualunque schermo
• optional – visibili dai 768px (iPad portrait)
• n/a – visibili dai 1024px (iPad landscape)

Un’ulteriore classe “persist” è utilizzata per identificare colonne che non sono gestite dal menu. Impostando una colonna con le classi essential e persist essa non potrà mai essere nascosta!

<table class="mediaTable">
<thead>
<tr>
<th class="essential persist">Employee</th>
<th class="essential">xHTML</th>
<th class="optional">HTML5</th>
<th class="essential">CSS</th>
<th class="essential">JS</th>
<th class="optional">jQuery</th>
<th class="optional">jQueryUI</th>
<th>jQuery Mobile</th>
<th>Sencha Touch</th>
<th class="essential">PHP</th>
<th>PHP (OO)</th>
<th class="optional">CakePHP</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marco Pegoraro</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
</tr>
<tr>
....
</tr>
</tbody>
</table>

Il codice javascript per l’inizializzazione del plugin è estremamente semplice:

0

$('.mediaTable').mediaTable();

Tutte le tabelle aventi classe “mediaTable” verranno attivate per consentire la selezione dei campi ed il comportamento responsivo rispetto alle dimensioni dello schermo.

>>> Vai alla demo! <<<

Compatibilità:

Ho testato il plugin sui seguenti sistemi:

• Mac OsX, Firefox 9.0.1
• Mac OsX, Firefox 4.0
• Mac OsX, Chrome 16
• Mac OsX, Safari 5.1.2
• Windows7, IE9
• Windows7, IE8, IE7, IE6 (with respond.js for media-query)
• Windows7, Firefox 7.0.9

Fork on GitHub:

Il plugin è di libera distribuzione!

Link al progetto pubblico su GitHub!

Segnala presso:

Scarico, installo, avvio e… scopro con immensa delusione che l’applicazione non è altro che una lunga e pesante serie di immagini inserite in un carosello! Niente più di un pdf o di un eBook… semmai con notevoli funzioni in meno perchè non è possibile inserire segnalibri o condividere i contenuti!

Che valore aggiunto da questa App?

Le schede contenute nell’App sono delle semplici immagini: scansioni di una brochure o di un libretto!
Ovviamente i contenuti ci sono, ma sono di difficile lettura.

Le schermate accorpano una o più scansioni di pagine del catalogo cartaceo ed è necessario applicare lo zoom anche per leggere i titoli!
Sono sicuro che sull’iPad il problema è leggermente meno pesante grazie alle maggiori dimensioni dello schermo ma ciò non giustifica un prodotto simile!

Linee guida di pubblicazione sull’AppStore:

L’AppStore è l’ambiente di distribuzione delle applicazioni per iPod, iPhone e iPad.
Le applicazioni qui presenti dovrebbero essere soggette a stretti controlli di qualità tra i quali cito:

https://developer.apple.com/appstore/resources/approval/guidelines.html

L’applicazione Trentino Holiday 2011 è chiaramente frutto di una semplice scansione di una versione cartacea dei medesimi contenuti e come tale dovrebbe essere distribuita come eBook e non come App!

Quali accorgimenti adottare per migliorare il risultato?

Il passaggio da rivista cartacea ad applicazione (nativa/web/sito/eBook) deve inevitabilmente passare attraverso una fase di discussione e riorganizzazione dei contenuti.

Lo strumento “carta” consente di sfogliare mentre lo strumento “computer” consente di navigare.
Sono sistemi di accesso alle informazioni estremamente diversi ed è importante che l’utente riceva ciò che si aspetta di ottenere!

Utilizzo della rivista cartacea:

La rivista cartacea ha un accesso principale di tipo sequenziale: parto da pagina 1 e arrivo a pagina x. La maggior parte delle riviste mette a disposizione un indice per un accesso diretto alle informazioni. L’indice analitico dei contenuti è un metodo di accesso secondario nella rivista cartacea!

Utilizzo della rivista digitale:

Il computer ci ha abituati al “point and click” ovvero alla selezione di oggetti di interesse. Quando ci troviamo davanti al desktop siamo abituati a cliccare direttamente su di un’icona piuttosto che scorrere l’elenco delle icone disponibili fino a trovare l’opzione desiderata.
Nel computer l’accesso diretto ai contenuti è primario.

Dovrebbe quindi essere chiaro come gli articoli (anche le sezioni degli articoli) di una rivista dovrebbero essere riorganizzati in “schede”: piccoli nuclei di contenuto messi in relazione con altri nuclei tramite i collegamenti.

L’applicazione deve dunque mettere a disposizione un sistema di navigazione predeterminata per il raggiungimento di una determinata scheda.
Intendo la definizione di menu e sottomenu che permettano all’utente di operare una semplice ricerca tramite la selezione progressiva di opzioni semplici.

Il concetto di “opzione semplice” è vitale al successo dell’applicazione mobile (iPhone/iPad). Su questo tipo di dispositivi l’utente non vuole utilizzare la tastiera per effettuare una ricerca a parole chiave bensì utilizzare le dita per navigare attraverso un sistema di filtro progressivo il quale aiuta ad identificare un numero sempre più circoscritto di “schede” tra cui scegliere la propria lettura.

Contenuti Aumentati:

Un’altro accorgimento utile nella realizzazione di un’App per riviste o cataloghi è l’inserimento di azioni utente sulle schede di contenuti.

L’ida di base è che l’utente non si limita a leggere i contenuti sull’iPhone ma li vuole condividere, segnalare, commentare, esportare etc.

Operazioni quali “invia ad un amico”, “condividi su facebook”, “aggiungi a preferiti” o simili diventano armi importanti per coinvolgere l’utente nell’utilizzo dell’App ed ottenerne così il consenso.

Ovviamente questo richiede l’esistenza di una struttura web (un sito) parallelo nel quale pubblicare parte dei contenuti delle schede fornendo così i link che possono essere condivisi tra i vari social network.

Conclusioni

Lo strumento mobile App è sicuramente potente ed allettante per moltissime realtà editoriali ma bisogna fare molta attenzione a non cadere nel banale pubblicando soluzioni frettolose ed abbozzate come l’App oggetto di questo articolo.

Segnala presso:

Dopo aver fatto un approfondito test con mie sorelle (ottime rappresentanti della non-cultura web) ho apportato due interessanti migliorie all’interfaccia di gestione contenuti di JuniorCMS.

Area “Aggiungi Contenuto”

In coda ad ogni colonna di contenuto è stata aggiunta un’area di grandi dimensioni la quale richiama chiaramente l’azione di aggiungere nuovi contenuti.

Il click su questo link ha lo stesso effetto del click sull’icona “+” posta in alto a destra della medesima colonna: apre l’interfaccia di selezione contenuto da aggiungere.

Selezione Nuovo Contenuto:

La seconda miglioria apportata riguarda l’interfaccia di selezione del nuovo contenuto da aggiungere alla pagina.

La finestra di selezione è stata ingrandita in modo da poter ospitare una piccola spiegazione in linea. Questo facilita il compito a chi non usa il sito web troppo spesso!

L’elenco dei widget di contenuto è stato completamente rivisitato e ogni elemento fornisce titolo, icona ed una spiegazione testuale estesa che ne rende più semplice la selezione.

Altri Aggiustamenti:

Ho apportato ulteriori sistemazioni anche ad altre parti dell’interfaccia migliorando i title dei link di azione nell’elenco delle pagine, spostando i campi “inutili” nel pannello “Avanzate” durante l’editing di struttura delle pagine (chi ha fatto il test si “perdeva” nei campi opzionali).

In futuro ho intenzione di mettere mano al menu del backend per eliminare la necessità del click di attivazione dei submenu. Questa scelta favorisce l’esplorazione dell’interfaccia da parte dell’utente alle prime armi.

Aggiornamento AdessoWEB:

Tutti questi miglioramenti sono già stati caricati per tutti i clienti AdessoWEB attivi e per tutti i 3° livelli grazie agli aggiornamenti automatici! Ormai rilasciare aggiornamenti è uno spasso!

Segnala presso:

A mio parere le possibilità di gestire in modo ottimizzato delle sessioni di desktop remoto tramite server VNC, o comunque di controllo remoto in generale, sono da elencare tra le features più promettenti del nuovo apple-giocattolo.

Con iPhone abbiamo sperimentato con successo software quali TeamViewer. Abbiamo goduto della possibilità di usare software “evoluti” su un mobile device e abbiamo sofferto dei forti limiti imposti dalle piccole dimensioni: troppo grande per un telefono e troppo piccolo per un computer.

iPad probabilmente ci darà la concreta possibilità di un utilizzo remoto del proprio computer. Potremo finalmente uscire dal cliente con uno strumento leggero e di grande autonomia, potremo utilizzare software evoluti quali server web o gestionali direttamente dal nostro mac di sviluppo che abbiamo lasciato a casa.

iPad probabilmente eliminerà la nostra costante paura di perdere o essere derubati dei preziosi dati presenti nel nostro portatile.

iPad probabilmente ci consentirà continuità di backup perché non dovremo più staccare i dischi di TimeMachine.

Tutto questo se Steve e la sua banda riusciranno a realizzare un sistema di controllo remoto leggero, realmente utilizzabile con le dita e, sopratutto, economico per le nostre care tariffe mobile!

Segnala presso:

Le dimensioni della finestra sono dunque definite dall’utente finale che può fare un po’ quello che vuole: tutto schermo, finestrelle minuscole, ecc…

Solitamente la diatriba riguardante la scelta di implementare o meno un layout fluido si concentra sulla maggiore complessità di realizzazione, sulla libertà di design ed in generale sull’impatto a livello di costi.

Vorrei a questo punto spostare l’attenzione dal puro aspetto grafico e stilistico ai contenuti, protagonisti della nostra pagina web!

Righe di testo troppo lunghe!

Una grafica liquida abbinata ad uno degli ormai comuni schermi da 20″ ad altissima risoluzione può facilmente produrre delle righe di testo estremamente lunghe e di difficile lettura: Sullo schermo non possiamo farci aiutare dal dito indice!!!

Nella mia esperienza di web designer ho imparato che la lunghezza della riga influisce molto sull’usabilità dei contenuti della pagina.

Un’importante eccezione:

Spezzo comunque una lancia a favore dei layout fluidi: essi permettono l’ingrandimento del testo più o meno a piacere aiutando dunque chi, come me, sta lasciando 4 diottrie su ogni progetto!

In un layout a dimensione fissa l’ingrandimento del testo può facilmente provocare sovrapposizione di paragrafi e blocchi grafici con il pessimo risultato di rendere illeggibile la pagina stessa.

Segnala presso: