Planejando a estrutura do seu site - @Curso em Vídeo HTML5 e CSS3

Introdução ao Curso de HTML e CSS

Visão Geral da Seção: Nesta seção, o instrutor introduz o projeto que será desenvolvido e destaca a importância da responsividade na criação de sites.

Planejamento do Site

• O planejamento é uma etapa crucial antes de começar a mexer no código.

• É importante considerar o layout do site, as cores e as fontes a serem utilizadas.

• Recomenda-se utilizar uma ferramenta de planejamento como o Moflo para desenhar o formato do site.

Moflo - Ferramenta de Planejamento

• Acesse o site moflo.com para utilizar a ferramenta de planejamento.

• Faça login ou crie uma conta gratuita.

• Utilize o Moflo para desenhar o formato do seu site, imaginando as caixas e estrutura.

• Lembre-se de não copiar modelos prontos, mas sim utilizar como referência.

História Inspiradora sobre Emprego na Área de Desenvolvimento

Visão Geral da Seção: O instrutor compartilha uma história inspiradora sobre um aluno que participou das iniciativas da Record e conseguiu emprego na área de desenvolvimento.

História do Rafael Silva

• Rafael Silva, morador do Rio de Janeiro, participou das iniciativas da Record.

• Ele recebeu treinamento completo em desenvolvimento web e foi contratado por um grande banco nacional.

• Para conhecer a história completa do Rafael Silva, escaneie o código QR ou acesse a página especial criada pela Record.

Planejamento do Site com Moflo

Visão Geral da Seção: O instrutor continua explicando o uso do Moflo para planejar o site.

Utilizando o Moflo

• Abra o Google Chrome e acesse o site moflo.com.

• Faça login ou crie uma conta gratuita.

• Utilize o Moflo para desenhar o formato do seu site, imaginando as caixas e estrutura.

Criação de Conta no Moflo

Visão Geral da Seção: O instrutor explica como criar uma conta no Moflo.

Criando uma Conta

• Acesse moflo.com e clique em "Sign In" se já tiver uma conta, ou "Register" se for criar uma nova conta.

• Preencha os campos com seu nome completo, e-mail, senha e confirmação de senha.

• Clique em "Register" para finalizar o cadastro. Verifique se é necessário validar seu e-mail.

Uso do Moflo para Planejamento de Sites

Visão Geral da Seção: O instrutor explica como utilizar o Moflo para planejar a estrutura do site.

Funcionalidades do Moflo

• O Moflo permite criar um wireframe, que é a estrutura básica de um site.

• É importante utilizar essa ferramenta para planejar as caixas e imaginar como será a aparência do site.

• O Moflo possui aplicativos disponíveis para Windows Phone, Mac, iOS e Android.

Essas são as principais informações abordadas no vídeo, relacionadas ao planejamento do site utilizando o Moflo.

Configuração inicial do projeto

Visão geral da seção: Nesta parte, o palestrante explica como configurar o projeto e escolher as opções de fundo.

Configurando o projeto

• O palestrante pergunta o nome do projeto e decide chamá-lo de "site Android".

• Ao iniciar o projeto, é possível escolher entre um fundo branco ou transparente. Neste caso, é selecionado o fundo transparente.

• Uma janela é aberta para criar a interface do site.

• É feita uma criação vertical para mostrar como será a aparência do site.

• São adicionados elementos como um navegador e um menu.

Criação dos elementos da interface

Visão geral da seção: Nesta parte, são criados os elementos da interface do site, como cabeçalho, texto e retângulos.

Criando elementos

• É adicionado um retângulo que será utilizado como cabeçalho com 150 pixels de altura.

• Diversos outros elementos podem ser criados, como textos e retângulos para compor a interface.

• O tamanho da fonte pode ser ajustado clicando duas vezes no elemento de texto.

• É possível personalizar os elementos alterando sua cor, tamanho e alinhamento.

Definição do conteúdo principal

Visão geral da seção: Nesta parte, é definido o elemento principal do site e suas características.

Elemento principal

• O elemento principal será um quadro que ocupará boa parte do conteúdo principal do site.

• Esse quadro terá uma largura máxima de 800 pixels.

• É adicionado um rodapé para completar a estrutura do site.

Personalização dos elementos

Visão geral da seção: Nesta parte, são apresentadas opções de personalização dos elementos da interface.

Personalizando elementos

• Os elementos podem ser personalizados em relação ao tamanho da fonte, alinhamento e outros atributos.

• É possível adicionar texto, imagens e até mesmo vídeos do YouTube na interface.

• A ferramenta MotionFlow é recomendada para criar o layout do site de forma visualmente atraente.

Adicionando vídeo ao site

Visão geral da seção: Nesta parte, é explicado como adicionar um vídeo ao site utilizando a ferramenta MotionFlow.

Adicionando vídeo

• É criado um retângulo que irá conter o vídeo.

• O vídeo pode ser adicionado dentro desse retângulo utilizando as opções disponíveis na ferramenta MotionFlow.

Planejamento do conteúdo extra

Visão geral da seção: Nesta parte, é destacada a importância de planejar o conteúdo extra que será adicionado ao site.

Planejamento do conteúdo

• Além dos elementos principais, é importante planejar e organizar o conteúdo extra que será inserido no site.

• A ferramenta MotionFlow permite montar uma simulação visual do site com todo o seu conteúdo.

Código de cores e paletas

Visão geral da seção: Nesta seção, o palestrante discute a escolha de cores para um projeto e como criar uma paleta monocromática. Ele também menciona a seleção de fontes para o projeto.

Escolha de Cores

• O palestrante utiliza um código verde (#3Ddc184) como sua cor base.

• Ele explica que optou por uma paleta monocromática para facilitar a seleção de cores.

• Recomenda o uso da ferramenta Adobe Color ou outras ferramentas similares para criar paletas coerentes.

Seleção de Fontes

• O palestrante mostra a fonte "Bebas Neue" do Google Fonts, que ele escolheu para títulos e destaques.

• Ele menciona que essa fonte não possui caracteres acentuados.

• Também menciona outra fonte chamada "Barba", disponível no Google Fonts, que será utilizada no projeto.

Avisos e Canal no Telegram

Visão geral da seção: Nesta seção, o palestrante fornece informações sobre como receber notificações sobre novos vídeos e atualizações do curso.

• O palestrante sugere aos alunos que se inscrevam em seu canal no Telegram para receber notificações sobre novos vídeos e atualizações do curso.

• Ele enfatiza que é importante confirmar a inscrição no canal do Telegram para ficar sempre atualizado com as novidades.

Encerramento e Próximos Passos

Visão geral da seção: Nesta seção final, o palestrante conclui a seção e menciona que o próximo vídeo abordará a estrutura do projeto.

• O palestrante encerra a seção e agradece aos alunos.

• Ele menciona que no próximo vídeo começarão a trabalhar na montagem da estrutura do projeto.

• Ele se despede e convida os alunos para o próximo encontro.

Conclusão

Visão geral da seção: Nesta breve conclusão, o palestrante finaliza sua fala.

• O palestrante cumprimenta os espectadores.