Ciclo Continuo Modelli HTML

Template HTML a ciclo per contenuti ripetuti

Un template HTML a ciclo definisce una singola unità ripetuta e la popola con contenuti dinamici provenienti da articoli, prodotti o record di progetto. Si sceglie un blocco elemento pronto all'uso, lo si adatta alle voci pubblicate e il ciclo genera quel markup per ogni record. Nulla viene duplicato manualmente, così che un singolo blocco determina la resa dell'intera griglia.

Dove finisce il template e inizia il contenuto

La solita confusione con i cicli è scambiare il template per l'elemento stesso. Un template contiene spazi vuoti: spesso un'area per l'immagine, un titolo e una riga di metadati. Modificando il nome di un prodotto cambia un singolo record; modificando il markup, l'intera griglia cambia all'istante.

Questa separazione lascia al ciclo tre componenti essenziali:

1. Il markup dell'elemento, che definisce la gerarchia e l'ordine di lettura;
2. I campi dinamici, che inseriscono i valori in quel markup;
3. La griglia esterna, che decide quanti elementi affiancare l'uno all'altro.

Questi tre elementi determinano se un template pronto all'uso sia utilizzabile. Un blocco elemento con due campi non potrà contenere voci che ne richiedono cinque.

Gli insiemi di campi variano da un ciclo all'altro

Non tutti i cicli includono un'immagine, un titolo e una descrizione. L'insieme dei campi dipende dal tipo di contenuto e stabilisce ciò che il lettore nota per primo.

Tre casi comuni mostrano quanto tali insiemi possano differire:

1. Il ciclo di un articolo collega data, autore ed estratto al titolo, affinché l'estratto non prenda il sopravvento su di esso;
2. Il ciclo di un evento inizia con data e luogo, dando al blocco orario più rilevanza rispetto all'immagine;
3. Il ciclo di una directory include categoria, indirizzo e dati di contatto, con il pulsante d'azione posizionato accanto.

Tutti e tre ripetono la medesima struttura, ma il peso visivo al suo interno si sposta, e abbinare un template a tale equilibrio richiede la maggior parte del lavoro di selezione. Adattare il layout di un articolo per i record di un evento significa riorganizzare i campi.

Mantenere l'ordine intatto su tutte le dimensioni dello schermo

I blocchi ripetuti si leggono bene su un monitor ampio, ma diventano più difficili da consultare quando le colonne si incolonnano. Ciò che conta allora è che il record resti coeso: l'immagine sopra il rispettivo titolo, il prezzo accanto al rispettivo nome, l'azione legata alla rispettiva voce.

I contenuti di esempio nascondono questo aspetto, poiché gli elementi dimostrativi hanno solitamente la stessa altezza. I problemi emergono quando il titolo di un progetto occupa tre righe e quello successivo non ha quasi descrizione. Conviene caricare le voci più lunghe e più brevi nel template scelto prima di pubblicare su larga scala.

In Nicepage, l'Elemento Griglia dispone gli elementi ripetuti in celle responsive; la guida al responsive web design ne illustra i controlli.

Un template HTML a ciclo si rivela efficace quando struttura, leggibilità e ordine dei dati reggono a prescindere dal numero di record e dalla larghezza dello schermo.