(function() {

• post precedente : Studio UI
• indice tutorial

Nell’esempio precedente abbiamo visto il componente “finito”. Non funzionante. Ma visivamente come dovrebbe essere alla fine del nostro processo di sviluppo.

La paginazione, la pagina attiva, i pulsanti avanti e indietro (visibili o meno).

Per programmare in maniera intrusiva bisogna rispettare il principio del “Graceful degradation“.
Io devo AGGIUNGERE una funzionalità. Aggiungerla a “runtime” sull’evento load.
Devo garantire una base visibile e accessibile a chiunque, anche ai browsers (o ai bot/spiders) non dotati di engine js.

Vediamo come ripensare il template precedente senza paginazione javascript, o meglio senza javascript.
La toolbar è chiaramente inutile ad un utente senza javascript : cosa se ne farebbe?

Questo esempio è veramente banale. Altri compoenenti UI sono più difficili da pensare e studiare nei due stati (js e nojs).

DEMO

XHMTL:

<div class="target">
  <div class="record"><!-- lorem ipsum --></div>
  <div class="record"><!-- lorem ipsum --></div>
  <div class="record"><!-- lorem ipsum --></div>
  <!-- etc -->
</div>

Conclusione: il template statico deve essere questo. NON quello dello studio UI del post precendente.
Vedremo come aggiungere tutto quello che è “js” via js stesso.

Aggiungi via js, l’interfaccia js e i suoi stili (oltre che le funzionalità).

Seguendo questo principio, motori di ricerca, browsers testuali, e dispositivi mobili leggeranno perfettamente tutte le nostre pagine. “Male che vada” arriveranno all’informazione.

In questo esempio l’unico svantaggio dell’utente (o agente) senza js (e non è detto che sia uno svantaggio) sarà quello di dover scorrere la pagina.

Le informazioni verranno perfettamente indicizzate.

Il tutorial è destinato a chi vuole avvicinarsi al mondo javascript e in particolare alla libreria jQuery.
La paginazione lato-client presenta vantaggi e svantaggi.
Ma non sta a me definirli.

[... continua]

PS: troppo semplice questo post. passiamo al successivo.