Ciclo Modelos HTML

Modelos HTML de Loop para Conteúdo Repetido

Um modelo HTML de loop define uma única unidade repetida e a preenche com conteúdo dinâmico de posts, produtos ou registros de projetos. Você escolhe um bloco de item pronto, adapta-o às entradas que publica e o loop desenha essa marcação para cada registro. Nada é duplicado manualmente, de modo que um único bloco determina como toda a grade é exibida.

Onde o Modelo Termina e o Conteúdo Começa

A confusão comum com loops é confundir o modelo com o item. Um modelo contém espaços vazios: geralmente uma área de imagem, um título e uma linha de metadados. Edite o nome de um produto e um registro será alterado; edite a marcação e toda a grade se altera de uma só vez.

Essa divisão deixa o loop com três partes móveis:

1. A marcação do item, que fixa a hierarquia e a ordem de leitura;

2. Os campos dinâmicos, que inserem valores nessa marcação;

3. A grade externa, que decide quantos itens ficam lado a lado.

Essas três partes determinam se um modelo pronto é utilizável. Um bloco de item com dois campos não comportará entradas com cinco campos.

Conjuntos de Campos Diferem de um Loop para Outro

Nem todo loop contém uma imagem, um título e uma descrição. O conjunto de campos segue o tipo de conteúdo e determina o que o leitor percebe primeiro.

Três exemplos comuns mostram o quanto esses conjuntos divergem:

1. Um loop de postagem vincula data, autor e excerto ao título, portanto o excerto nunca se sobrepõe a ele;

2. Um loop de evento começa com data e local, então o bloco de tempo tem mais peso do que a imagem;

3. Um loop de diretório contém categoria, endereço e detalhes de contato, com o botão de ação ao lado.

Todos os três repetem um esqueleto, mas o peso dentro dele muda, e combinar um modelo com esse peso é a maior parte do trabalho de seleção. Adaptar um layout de postagem para registros de eventos significa reorganizar os campos.

Mantendo a Ordem Intacta em Diferentes Tamanhos de Tela

Blocos repetidos são legíveis em um monitor amplo, mas ficam mais difíceis de ler quando as colunas se dobram. O que importa, então, é se um registro ainda mantém sua coesão: imagem acima do título, preço ao lado do nome e ação associada à entrada correspondente.

O conteúdo de exemplo disfarça isso, já que os itens de demonstração geralmente têm a mesma altura. O problema surge quando o título de um projeto ocupa três linhas e o seguinte quase não tem descrição. Vale a pena carregar as entradas mais longas e mais curtas em um modelo escolhido antes de publicar em grande escala.

No Nicepage, o elemento Grid coloca itens repetidos em células responsivas; o Guia de Design Responsivo aborda seus controles.

Um modelo HTML em loop justifica sua utilização quando a estrutura, a legibilidade e a ordem dos dados se mantêm consistentes em qualquer número de registros e em qualquer largura de tela.