Olá a todos e bem-vindos a este vídeo sobre Criar e Prototipar Páginas, que será dividido em 3 partes. Hoje, vamos nos concentrar na primeira etapa.
Esta parte consiste em prototipagem. Ou seja, identificar e criar os elementos que vamos precisar para projetar a estrutura principal ou esqueleto da página da web.
Aqui na tela, vemos o objetivo final que queremos alcançar.
Quando formos para o Aptugo, veremos o Banco de Dados que precisamos já definido. E também encontraremos uma única página que foi criada automaticamente pelo Aptugo por padrão, para gerenciar dados, neste caso, carros. Aqui já temos um carro carregado e é o mesmo que temos no design do Figma, o que significa que temos o backend pronto para criar uma página exatamente igual à que você vê na tela.
Vamos começar indo para Páginas e criando uma nova página que chamaremos de “Detalhes do carro”. O pad será "detalhes" e o nome também será "detalhes.tsx"
Depois disso, arrastamos e soltamos dentro do "Dashboard" para que fique na mesma altura que "Carros". E prosseguimos para Salvar e Construir.
Como você pode ver, se voltarmos para esta parte e atualizá-la. Veremos que "Detalhes do carro" aparece, que é uma página em branco porque ainda não definimos nada no Aptugo.
Uma vez que vimos isso, nosso próximo passo será o seguinte: se entrarmos no Aptugo na página "detalhes do carro", que está vazia, podemos ver que todas as páginas padrão estão divididas em 5 etapas. Antes da renderização da página, que consiste no que será visto antes da página ser carregada, o cabeçalho da página, o corpo, o rodapé da página e a renderização após a página.
Basicamente, as duas primeiras etapas, assim como a última, são geralmente usadas para gerar codificação lógica e funcionalidade que não será vista visualmente na página da web.
Todos os elementos que vamos usar para escrever, renderizar ou mostrar coisas estarão no corpo ou no Rodapé da Página. Então, primeiro voltamos ao Figma e dividimos isso em 2, o Corpo e o Rodapé da Página.
Como essa divisão já foi feita, vou mostrá-la diretamente a você. Temos um quadrado que contém todo o corpo e um retângulo contendo o rodapé. Essas etapas já estão divididas no Aptugo, já temos um Corpo e um rodapé construídos.
O que podemos fazer agora é criar um contêiner para cada um para evitar que sejam maiores do que o necessário. Escolhemos a opção lg para que sua largura seja um tamanho de tela padrão.
Uma vez feito isso, voltamos ao design ou Figma e subdividimos as caixas vermelhas em outras caixas menores, para ver quantas seções teríamos dentro de cada caixa vermelha. Temos o corpo dividido em duas e o rodapé em três seções.
Agora voltamos ao Aptugo e repetimos o processo, só que desta vez, usando divs, adicionamos duas para as caixas laranjas no Corpo e três no rodapé. Voltamos ao design mais uma vez, terminamos de dividir as caixas vermelhas e criamos as laranjas.
Nosso próximo passo será dividir essas Caixas laranjas em caixas ou divs ainda menores. Vamos abordar isso na segunda parte deste tutorial. Espero que você tenha gostado e, como sempre, obrigado por assistir!
. . .
Para mais detalhes, visite: www.aptugo.com