Ciclo Continuo Modelli HTML

Modelli HTML a ciclo per contenuti ripetuti

Un modello HTML a ciclo definisce una singola unità ripetuta e la popola con contenuti dinamici provenienti da post, prodotti o record di progetto. Si sceglie un blocco elemento predefinito, lo si adatta alle voci che si pubblicano e il ciclo disegna il markup corrispondente per ogni record. Nulla viene duplicato manualmente, quindi un singolo blocco determina l'aspetto dell'intera griglia.

Dove finisce il modello e inizia il contenuto

La confusione più comune con i cicli è quella tra il modello e l'elemento. Un modello contiene spazi vuoti: spesso un'area per un'immagine, un titolo e una riga di metadati. Modificando il nome di un prodotto, cambia un solo record; modificando il markup, l'intera griglia si sposta contemporaneamente.

Questa suddivisione lascia il ciclo con tre parti dinamiche:

1. Il markup dell'elemento, che definisce la gerarchia e l'ordine di lettura;

2. I campi dinamici, che inseriscono i valori nel markup;

3. La griglia esterna, che determina quanti elementi vengono visualizzati uno accanto all'altro.

Queste tre componenti determinano se un modello predefinito è utilizzabile. Un blocco elemento con due campi non può contenere voci che ne hanno cinque.

I set di campi variano da un ciclo all'altro

Non tutti i cicli contengono un'immagine, un titolo e una descrizione. Il set di campi segue il tipo di contenuto e determina cosa il lettore nota per primo.

Tre esempi comuni mostrano quanto questi set possano differire:

1. Un ciclo di un post lega data, autore ed estratto al titolo, quindi l'estratto non ha mai la precedenza;

2. Un ciclo di un evento inizia con data e luogo, quindi il blocco orario ha più importanza dell'immagine;

3. Un ciclo di una directory contiene categoria, indirizzo e dettagli di contatto, con il pulsante di azione accanto.

Tutti e tre ripetono una struttura di base, ma il peso al suo interno varia, e abbinare un modello a tale peso rappresenta la maggior parte del lavoro di selezione. Adattare il layout di un post per i record degli eventi significa riorganizzare i campi.

Mantenere l'ordine su schermi di diverse dimensioni

I blocchi ripetuti si leggono bene su monitor widescreen, ma diventano più difficili da leggere quando le colonne si chiudono. Ciò che conta, quindi, è che ogni record mantenga la sua coerenza: immagine sopra il titolo, prezzo accanto al nome, azione associata alla relativa voce.

I contenuti di esempio nascondono questo aspetto, poiché gli elementi demo hanno solitamente la stessa altezza. Il problema si presenta quando il titolo di un progetto occupa tre righe e quello successivo è quasi inesistente. È consigliabile caricare le voci più lunghe e più brevi in un modello a scelta prima di pubblicare su larga scala.

In Nicepage, l'elemento Griglia posiziona gli elementi ripetuti in celle responsive; la Guida al Responsive Web Design ne illustra i controlli.

Un modello HTML a ciclo è la scelta ideale quando la struttura, la leggibilità e l'ordine dei dati rimangono invariati indipendentemente dal numero di record e dalla larghezza dello schermo.