Melhorando sua página inicial

Neste tutorial, vamos deixar sua página com essa cara:

Além disso, a imagem do banner principal alternará aleatoriamente entre duas imagens!

Adicionar o banner

Criando um Data² Drive

Para subir e utilizar uma imagem usaremos o Data² Drive. Para adicionar um Data² Drive:

1. Dê um clique duplo no fundo do Builder.
2. No menu que aparece, selecione Media na aba à esquerda.
3. Clique em Drive.
4. Caso necessário, redimensione e reposicione seu Drive.
5. Renomeie seu Drive.

Subindo uma imagem para o Data² Drive

Como gosto muito de café, vou utilizar essa imagem como banner da página inicial. Arraste a sua imagem ao Drive para enviá-la.

Utilizando a imagem no Block

Primeiro, selecione o Block com o texto Página Inicial que foi criado anteriormente. Então procure o parâmetro Fill, selecione Image, selecione o Drive que foi criado e a imagem que está lá.

Nas opções da imagem, coloque as seguintes configurações:

• Size: Cover
• Position X: Center
• Position Y: Bottom
• Repeat: No Repeat

Dê duplo clique no Block para apagar o texto Página Inicial e ajuste o tamanho do Block caso necessário.

Adicionando um texto

Use a Block Tool (atalho: B) para desenhar um Block que será utilizado para colocar um texto de chamada em cima da imagem.

Dê duplo clique no Block e escreva o texto que quiser, no caso, decidi escrever O melhor café. Aumente o tamanho da fonte, alterando o parâmetro Text Size para 48. Desabilite o Fill clicando no círculo ao lado de seu título.

No Text Format, centralize o texto verticalmente clicando no terceiro botão da segunda fileira. Coloque o parâmetro Font Weight como Bold e Text Transform como UPPERCASE. Então posicione seu Block com o texto.

Dimensões do bloco para diferentes tamanhos de tela

Se sua resolução não é mesma do Artboard, há um problema bem evidente com nosso banner: seu tamanho.

Banner no artboard:

Banner no preview:

Para resolver isso, vamos explorar as restrições do parâmetro Position.

Selecione o bloco do banner com a imagem, procure o parâmetro de Position e clique em Grow Horizontally e Grow Vertically. Dê um preview e veja como ficou.

Cada linha do lado de fora do quadrado é uma restrição, e indica que caso aquela restrição esteja ativada, a distância para aquela direção será mantida.

Para entender melhor o funcionamento das restrições, selecione o Block com o link para a página de administração de clientes, e clique nas duas restrições: topo e esquerda.

No vídeo acima, o Block mantém uma distância fixa do topo e da esquerda da tela, isto é, à medida que a tela aumenta de tamanho (diminuindo o zoom), o Block se move para cima pois apesar da altura total da tela ter aumentado, a distância ao topo se mantém.

Colocando um banner condicional

Uma funcionalidade muito poderosa do Data² é poder trocar o tipo dos parâmetros. O que isso significa na prática é que muitas coisas que só poderiam ser resolvidas com código, podem ser resolvidas no Data².

Vamos transformar a imagem do banner em um valor condicional, para isso:

O que é um valor condicional?
Um valor que está ligado a uma cláusula, e tem valores diferentes dependendo cláusula se é verdadeira ou falsa é um valor condicional. Por exemplo, a validade de um alimento é um valor condicional da data atual e do prazo de validade:

SE (`If`) a data atual é anterior ao prazo de validade, ENTÃO (`Then`) seguro, SENÃO (`Else`) vencido.

• Copie o valor atual do Fill, abrindo o menu clicando no ... e clique em Copy param to clipboard
• Em seguida clique no botão com f() e troque o tipo para If.
• Clique no Fill para navegar, e no parâmetro Then, cole o Fill anterior, abrindo o menu e clicando em Paste param from clipboard. Neste passo, o navegador pode pedir sua permissão para acessar o que foi copiado, aprove para que você consiga colar com sucesso.
• No parâmetro Else, clique no f() e selecione Fill.
• Coloque uma cor como fundo.
• Agora clique em Compare, adicione um item clicando em Add Item.
• Clique em f() e mude o tipo desse item para Boolean.
• Ao trocar o valor da controle, os fundos vão se alternar!

Agora, vamos colocar essa imagem no lugar da cor, e usar um número aleatório para alternar entre esses dois fundos.

• Clique em Fill para navegar.
• No parâmetro Else, clique em Image.
• Selecione o Drive, clique para selecionar o arquivo, e arraste sua imagem para o Drive.
• Ao terminar o envio, seleciona essa imagem.
• Configure as opções da imagem:
  • Size: Cover
  • Position X: Center
  • Position Y: Center
  • Repeat: No Repeat
• Clique em Compare, no item que o tipo era Boolean, clique no botão f() para alterar o tipo para EqualOrGreaterThan.
• Clique no primeiro item para navegar.
• No parâmetro Subject, clique no f() e seleciona MathRandom. Esse tipo devolve um número aleatório entre 0 e 1.
• No parâmetro Comparison Subject, coloque o valor 0.5.

Isso quer dizer que a página inicial terá dois banners diferentes que irão se alternar com a mesma proporção!