Sistemas para bibliotecas, desenvolvimento web, organização da informação, produtividade – Tutoriais e reviews

Nerdices

Crie seu site pessoal sem conhecimento técnico – Google Sites

No último post falei sobre a importância em ter um site (ou blog) pessoal, principalmente quando se produz conteúdo para redes sociais.

Ter um site é também uma forma de marketing pessoal e de centralizar suas informações em relação a tantas redes sociais existentes.

Pode ser usado como um cartão de visitas ou currículo, dependendo do seu objetivo no momento.

Já escrevi bastante sobre a importância do site, mas e como criar um?

O caminho para o desenvolvimento web inicia com HTML e CSS, incluindo também Javascript, alguma linguagem de programação (como PHP ou Python) e banco de dados (MariaDB, provavelmente). Além de outros conhecimentos periféricos como servidor linux, SSH, FTP, DNS, codificação de caracteres…

“Eu não quero ser programadora, só quero fazer um site!”

Acho que nem todo mundo quer ou precisa saber desenvolver “do zero” um site, por isso hoje vou falar de uma das ferramentas que podem ajudar: Google Sites.

Por que o Google Sites?

  1. Acredito que a maioria das pessoas já deva ter uma conta do Google.
  2. É uma ferramenta fácil o suficiente mesmo para quem está começando.
  3. Até onde eu sei, o Google Sites não mostra propagandas de terceiros.

Ou seja: é prático, fácil e não tem propaganda indesejada.

Confesso que usei pouco o Google Sites, pois acabo optando por soluções personalizadas, mas faz alguns anos que eles melhoraram bastante a interface e é possível criar sites responsivos e com um design minimamente decente.

Como criar um site pessoal no Google Sites?

Para ilustrar esse processo, vou refazer o meu site pessoal com o Google Sites.

Meu site original, desenvolvido com HTML e CSS.
Meu site original, desenvolvido com HTML e CSS.

Planejar o conteúdo

Antes de iniciar o desenvolvimento de um site, o ideal é planejar: pensar no conteúdo e apresentação desejados.

Aqui entraria a Arquitetura da Informação e seus princípios para estruturar informações (sistemas de organização, rotulagem, navegação e busca) e seus elementos principais (contexto, usuários e conteúdo).

O contexto seria o seu propósito com o site: é um cartão de visitas virtual? Você quer divulgar conteúdo? Ou quem sabe portfólio?

Os usuários são o público-alvo do seu site: são colegas de profissão? Possíveis clientes? Ou talvez parceiros para novos projetos?

O conteúdo para um site pessoal simples poderia ser:

  • seu nome;
  • sua formação;
  • uma breve descrição do que você faz e áreas de interesse;
  • foto (se desejar);
  • formas de contato: e-mail e links para suas redes sociais (sugiro que apenas as de uso profissional).

Quer saber mais sobre Arquitetura da Informação? Confere o material da minha palestra no WordCamp Porto Alegre de 2017.

Criar o site

Escolher um modelo pronto ou iniciar um novo

Para iniciar, acesse o Google Sites com sua conta Google.

É possível escolher um dos modelos na galeria ou criar um em branco. Vou escolher a segunda opção para ilustrar melhor a criação.

Visão geral do editor de sites

O editor de sites é bem simples e intuitivo (como a maioria dos produtos do Google):

  • parte superior: menu com configurações gerais do site e publicação;
  • lateral direita: ferramentas para conteúdo;
  • parte central: visualização do site.
Tela com a visão geral do editor do Google sites.
Tela com a visão geral do editor do Google sites.

Na visualização do site há três elementos básicos: cabeçalho, conteúdo e rodapé.

  1. O cabeçalho vem por padrão e é possível editar o formato e adicionar um logotipo (mas não é obrigatório). Também é possível alterar ou retirar a imagem de fundo.
  2. O conteúdo vem vazio e você vai preencher com blocos de conteúdo disponíveis nas ferramentas.
  3. E o rodapé é opcional, pode ser inserido para incluir informações de copyright, crédito de imagens, atualização da página, ou o que mais for relevante.

As ferramentas são divididas em três seções: Inserir, Páginas, Temas.

  1. Inserir: onde estão disponíveis os blocos de conteúdo.
  2. Páginas: permite criar novas páginas. Para este tutorial, vamos fazer o site com apenas uma página, que já vem criada e definida como inicial.
  3. Temas: algumas sugestões iniciais de cores e fontes.

Para adicionar um bloco de conteúdo, basta clicar em uma das opções à direita.

Cada bloco de conteúdo possui configurações próprias, então depois de adicionar, sugiro clicar no item e ver o que é possível fazer. Também é possível alterar a posição, selecionando e arrastando o elemento.

Tela que mostra as opções de bloco de conteúdo do tipo "Caixa de texto".
Tela que mostra as opções de bloco de conteúdo do tipo “Caixa de texto”.

Nos blocos de layouts ele permite adicionar texto com diferentes pesos (tamanho e cor conforme o tema escolhido) e adicionar mídias: imagem, vídeo, mapa ou qualquer documento do Google Drive.

É possível alterar o tamanho e posição dos elementos do bloco de layout: ao selecionar um elemento e segurar com o mouse ele mostra uma grade para ajustar o alinhamento.

Tela ilustrando a grade para alinhar os elementos.
Tela ilustrando a grade para alinhar os elementos.

Adicionar conteúdo

Depois do cabeçalho, adicionei dois blocos de texto: no primeiro coloquei minha profissão e título que gosto de divulgar. No segundo coloquei cidade e informações de contato (e-mail e redes sociais).

Um ponto negativo deste editor é não ser possível adicionar ícones como eu faria normalmente, então adicionei o nome da rede social e o link para o perfil.

Depois, adicionei um bloco de layout com três colunas. Optei por retirar a imagem associada (basta selecionar o elemento e clicar no ícone de lixeira ou no botão “delete” do teclado).

Caso você queira incluir imagens, sempre cuidar com a licença de uso de imagens retiradas da Internet. Há bancos de imagens que permitem o uso de forma gratuita, desde que seja feito o devido crédito.

Por fim, adicionei o rodapé com informações de criação e atualização do site.

O resultado ficou assim, com a visão ainda no editor:

Tela do meu site pessoal recriado na ferramenta Google Sites.
Tela do meu site pessoal recriado na ferramenta Google Sites.

Prévia no celular

No menu superior do Google Sites é possível visualizar como o site ficaria em outros dispositivos com tela menor que o computador.

Tela da prévia do site em diferentes tamanhos de tela.
Tela da prévia do site em diferentes tamanhos de tela.

Publicar o site

Depois de revisado o conteúdo, basta clicar no botão “Publicar”.

Ao publicar o site pela primeira vez será exibida a opção para definir o endereço de acesso, que será adicionado após a URL base, por exemplo: sites.google.com/view/seunome

Tela com opções do Google Sites para publicação na web.
Tela com opções do Google Sites para publicação na web.

Caso você queira deixar o acesso restrito, é possível definir que apenas certas pessoas acessem o site ou que mecanismos de busca não indexem o site.

Aqui também é possível configurar uma URL personalizada, ou seja, adicionar seu próprio domínio (seunome.com.br), em vez de utilizar o domínio do Google (sites.google.com/view/seunome).

Confira no post anterior mais detalhes sobre registro de domínios.

Após a primeira publicação, ao clicar novamente em “Publicar”, será exibida uma comparação entre o que já está publicado e as alterações realizadas. Dessa forma você pode revisar as atualizações antes de torná-las públicas.

Bônus – Estatísticas de acesso

Para acompanhar os acessos ao site, é necessário configurar o Google Analytics, um serviço gratuito para ter estatísticas de acesso ao site.

Na página de suporte do Google eles explicam os passos iniciais para utilizar o Google Analytics.

Depois de criado o código de rastreio, você pode adicionar no Google Sites: menu de Configurações > Análise.

Tela da configuração do Google Sites onde o código de rastreio do Google Analytics deve ser inserido.
Tela da configuração do Google Sites onde o código de rastreio do Google Analytics deve ser inserido.

Comparação entre o site original e o site recriado com o Google Sites

Assim ficou o meu site pessoal recriado no Google Sites:

Meu site pessoal recriado no Google Sites.
Meu site pessoal recriado no Google Sites.

E assim é o site original:

Meu site original, desenvolvido com HTML e CSS.
Meu site original, desenvolvido com HTML e CSS.

Conclusão

O Google Sites possui algumas limitações, principalmente no uso de ícones e imagens alinhadas ao texto. Ainda assim, é uma forma rápida de criar um site simples para começar sua presença na web.

Vale ressaltar que é necessário estar de acordo com as políticas de conteúdo do Google Sites.

Esta foi uma visão geral dos recursos do Google Sites. Caso você tenha gostado, sugiro mexer na ferramenta para ver todos as possibilidades, consultando o material de suporte do Google, se necessário.

Caso você precise de um blog ou de um site com mais recursos, o ideal seria utilizar outras ferramentas, como o WordPress, e com auxílio de um profissional experiente.


Créditos da foto: Bram Naus on Unsplash

As capturas de tela foram realizadas pela autora.

1 Comment

  1. Carlos F

    Incrível, excelente conteúdo. Seu site é um achado.

Leave a Reply