Construindo o Portfólio no Google Sites - Low-Code

1. Preparação e Configurações Iniciais

1. Acessar o Google Sites:

   • Acesse sites.google.com.

   • Clique em "Em branco" (ou use um modelo, se preferir, mas o "Em branco" dá mais liberdade para seguir seu protótipo).

2. Título e Nome do Site:

   • No canto superior esquerdo (onde está escrito "Site sem título"), coloque o nome do seu site (Ex: Portfólio Washington Leal).

   • No topo da página (onde está "Título da página"), coloque a informação principal do seu cabeçalho.

     • Sugestão: SEU NOME

     • Abaixo, adicione uma Caixa de Texto e coloque a função: Desenvolvedor Front-End e o Slogan Profissional.

3. Criar as Páginas do Menu (HOME, SOBRE MIM, CONTATO):

   • No painel da direita, clique em "Páginas".

   • O Google Sites já cria a página inicial (HOME).

   • Clique no ícone + (Nova Página) e crie:

     • SOBRE MIM

     • CONTATO

   • O menu de navegação será criado automaticamente no topo.

2. Montando a Página Inicial (HOME)

Focaremos em replicar as seções de foto, projetos e catálogo.

A. Seção da Foto e Dados Pessoais

1. Inserir Bloco de Conteúdo:

   • No painel da direita, clique em "Inserir".

   • Selecione o layout com uma imagem grande e um texto ao lado (geralmente o segundo ou terceiro layout).

2. Adicionar a Foto:

   • Clique no ícone + da imagem.

   • Siga as instruções de imagem do protótipo: Fundo claro, Camiseta neutra, Sorriso leve.

3. Adicionar o Título/Função:

   • No lado do texto, coloque "Seu Nome" e a função "Desenvolvedor Front-End".

B. Seção PROJETOS

1. Inserir Bloco de Conteúdo para Projetos:

   • Clique em "Inserir" novamente e escolha o layout com 3 imagens e 3 textos abaixo (para os projetos de exemplo).

   • Acima deste bloco, adicione uma Caixa de Texto e use um título grande: PROJETOS.

2. Estruturar os Projetos:

   • Em cada espaço de imagem, o senhor e seus alunos devem colocar um "Print" da atividade.

   • Abaixo de cada imagem, coloque o nome do projeto (Ex: LEALPHONE , LGPD ).

   • Linkar para o GitHub: No Google Sites, clique na imagem ou no texto e use o ícone de "Inserir link" (o ícone de corrente) para Linkar direto no endereço do GitHub do projeto.

C. Seção CATÁLOGO / PROJETOS DE EXEMPLO

1. Título da Seção:

   • Adicione uma Caixa de Texto e use um título grande: CATÁLOGO.

2. Listar Itens:

   • Use blocos de texto ou outro layout de 3 colunas para listar os tipos de projeto:

     • LANDING PAGE

     • PÁGINA DE PRODUTO

     • PÁGINA DE CONTEÚDO

     • PÁGINA EDUCACIONAL

     • MAPAS CLICÁVEIS

     • FORMULÁRIO RESPONSIVO

3. Montando a Página SOBRE MIM

1. Navegar: Clique em "Páginas" e selecione "SOBRE MIM".

2. Seção BIOGRAFIA:

   • Adicione uma Caixa de Texto com o título "SOBRE MIM" (ou "BIOGRAFIA" ).

   • Insira o texto da sua biografia (3-4 linhas no máximo):

     • "Sou desenvolvedor focado em criar interfaces modernas, funcionais e responsivas."

     • "Entrei na tecnologia pela vontade de transformar ideias em soluções práticas e acessíveis."

     • "Gosto de projetos bem organizados, visual limpo e experiência simples para o usuário."

3. Seção HABILIDADES:

   • Adicione uma Caixa de Texto com o título "HABILIDADES" (curto e direto).

   • Use listas (em bullet points) para clareza, separando por categoria:

     • Tecnologias: HTML, CSS, JavaScript, GitHub, Google Sites, VS Code.

     • Design/UX: Canva, responsividade, boas práticas.

     • Pessoais: Comunicação clara, organização, criatividade e aprendizado rápido.

4. Seção OBJETIVOS PROFISSIONAIS:

   • Adicione uma Caixa de Texto com o título "OBJETIVOS PROFISSIONAIS" (2-3 linhas).

   • Insira o texto: "Busco atuar como desenvolvedor front-end, criando interfaces eficientes e experiências digitais que facilitem o dia a dia das pessoas. Quero evoluir constantemente e participar de projetos reais com impacto."

4. Montando a Página CONTATO

1. Navegar: Clique em "Páginas" e selecione "CONTATO".

2. Título: Adicione uma Caixa de Texto com o título "Entre em Contato".

3. Formulário: O Google Sites se integra perfeitamente com o Google Forms:

   • No painel "Inserir", role para baixo e clique em "Formulários".

   • Selecione um formulário que você ou seus alunos criaram (ou crie um novo) com os campos: Nome , E-mail , WhatsApp , Assunto e Mensagem.

   • O Google Forms cuida da função Enviar Mensagem.

5. Configurando o Rodapé (Comum a Todas as Páginas)

1. Ativar o Rodapé: Role até o final de qualquer página e clique em "Adicionar rodapé".

2. Inserir Informações:

   • Direitos Autorais: 2025 Seu Nome Desenvolvedor Web.

   • Links: Crie links de texto para GitHub | LinkedIn | E-mail | Insta.

   • Tecnologias: Construído com HTML, CSS e JavaScript Sempre evoluindo.

3. O rodapé aparecerá em todas as páginas automaticamente.

Criando o Formulário de Contato no Google Forms

Passo 1: Iniciar um Novo Formulário

1. Acesse o Google Forms em seu navegador: forms.google.com.

2. Clique no ícone + (Em branco) para iniciar um novo formulário.

Passo 2: Configurar o Título e a Descrição

1. Título do Formulário: Clique em "Formulário sem título" no canto superior esquerdo e digite: Entre em Contato.

2. Descrição: Adicione uma breve descrição, como "Envie sua mensagem e responderei em breve."

Passo 3: Criar os Campos (Perguntas)

1. Nome

• Nome da pergunta: Nome

• Tipo de resposta: Clique na caixa suspensa e selecione Resposta curta.

• Obrigatório: Ative a chave "Obrigatória" (no canto inferior direito da pergunta).

2. E-mail

• Nome da pergunta: E-mail

• Tipo de resposta: Selecione Resposta curta.

• Dica: Para garantir que a resposta seja um e-mail válido, clique nos três pontinhos verticais (⋮) e selecione "Validação de resposta". No menu que aparece, escolha: Texto e depois Endereço de e-mail.

• Obrigatório: Ative a chave "Obrigatória".

3. WhatsApp

• Nome da pergunta: WhatsApp

• Tipo de resposta: Selecione Resposta curta.

• Sugestão (Preenchimento): Na seção "Descrição" (clique nos três pontinhos verticais para ativá-la), insira o formato de exemplo do seu protótipo: (DDD) 90000-0000.

• Obrigatório: Ative a chave "Obrigatória".

4. Assunto

• Nome da pergunta: Assunto

• Tipo de resposta: Selecione Resposta curta.

• Obrigatório: Ative a chave "Obrigatória".

5. Mensagem

• Nome da pergunta: Mensagem

• Tipo de resposta: Selecione Parágrafo (para permitir textos mais longos).

• Obrigatório: Ative a chave "Obrigatória".

Passo 4: Ajustar as Configurações Finais

1. Clique na aba "Configurações" no topo do Forms.

2. Respostas:

   • Coletar endereços de e-mail: Selecione a opção "Não coletar" (como o campo E-mail já está no formulário, não precisa coletar duas vezes).

   • Limitar a 1 resposta: Desative esta opção.

3. Apresentação:

   • Mensagem de Confirmação: Personalize o texto que o usuário verá após clicar em "Enviar Mensagem".

     • Sugestão: "Obrigado por entrar em contato! Sua mensagem foi recebida e responderei o mais breve possível."

Passo Final: Integrar ao Google Sites

Uma vez que o formulário está pronto:

1. Volte para o Google Sites, na página CONTATO.

2. No painel "Inserir", clique em "Formulários".

3. Selecione o formulário "Entre em Contato" que acabou de criar.

4. O formulário será inserido na página. O botão "Enviar Mensagem" é parte do Forms e funcionará automaticamente.

Como Mudar as Cores de Fundo no Google Sites

Embora o Google Sites não ofereça uma opção de "CSS" para definir uma única background-color para todo o site como faríamos em desenvolvimento web puro, ele permite alterar as cores de fundo de maneira estruturada através de Temas e Ênfases de Seção, mantendo a identidade visual do portfólio.

1. Cor de Fundo Geral (Temas Personalizados)

A cor principal do seu site e o esquema de cores base são definidos através do tema. Para ter mais controle sobre o background e as cores que serão usadas:

• No painel da direita, clique em "Temas".

• Em "Personalizado", clique no ícone + (Criar tema).

• Dê um nome ao seu tema (Ex: Tema Leal).

• O Google Sites permitirá que você escolha a paleta de cores.

• Para cores específicas, clique em "Personalizar cores". O tema define a cor de fundo padrão e as cores que serão usadas nas seções (Ênfases 1, 2, 3).

2. Cores de Fundo por Seção (Ênfase)

Esta é a forma mais comum de dar vida às páginas. Você pode ter diferentes cores de fundo para a seção da foto, a seção de projetos e a seção de catálogo.

• Passe o mouse sobre qualquer seção da página que deseja colorir.

• À esquerda, aparecerão três ícones; clique no ícone da Paleta de Cores (Plano de Fundo da Seção).

• Você terá três opções: Regular (cor de fundo principal), Ênfase 1 e Ênfase 2. Estas são baseadas nas cores que você definiu no seu Tema.

• Se quiser uma cor diferente das pré-definidas no tema, clique no ícone de lata de tinta para escolher uma cor personalizada (usando um seletor de cores ou um código hexadecimal).