1. Tutorial para criar um Website móvel
Google Sites Mobile Templates
Google Sites Mobile
Com o Google Sites Mobile Templates é possível construir um Website profissional móvel em
pouco tempo, aproveitando uma conta criada no Gmail. Basta aceder ao URL -
http://www.sites.google.com/mobilize/ e escolher um dos modelos apresentados ou então
escolher personalizá-lo. Se selecionar Custom deixa personalizar o site móvel ou a aparência
da página de destino ou então usar template restaurante (figura 1). Pode escolher a cor do site
e adicionar botões ou gadgets criados especificamente para dispositivos móveis.
Figura 1 - Google Sites Mobile
Clicar em Try this Template (em baixo à esquerda) e pode ver a primeira página do site. Clicar
em Utilizar Modelo (canto superior direito) para continuar (figura 2).
Figura 2 - Google Sites Mobile: aspeto do template escolhido
2. Abre uma janela como a da figura 3 para escrever o endereço do email e a senha que criou no
Gmail (também pode usar a conta de email de outro fornecedor).
Figura 3 - Aceder à conta do Google Sites
Depois disto abre uma janela, como a da figura 4, para escolher o modelo, o nome do
Website, a localização, o tema e descrição do site.
Figura 4 - Escolher o nome do site
Quanto ao modelo pode escolher o modelo em branco, procurar mais modelos na galeria
ou deixar o modelo escolhido anteriormente (possível personalizar o site todo). Depois
de introduzir o código clicar em CRIAR.
3. Figura 5 - Espaço de edição
Como pode ver na figura 5 está visível no canto superior direito o menu de edição do site
que permite começar a construí-lo. O ícone da seta 1 é para editar página, o da seta 2 é
para criar página nova e o da seta 3 permite fazer mais ações relacionadas com a
página, o modelo ou o site.
Comece por clicar no ícone editar página e surge a página pronta para ser editada
(alterada), como na figura 6. No menu em cima à esquerda encontra Inserir, Formatar,
Tabela e Esquema. Alguns atalhos já aparecem visíveis por baixo.
Figura 6 - Página para editar
Para mudar a informação que está no centro da página basta colocar o rato no texto e
apagar ou escrever o conteúdo pretendido. Para eliminar as caixas basta clicar em cima
das imagens e surge uma funcionalidade que permite remover o elemento (figura 7) ou
então preenchê-lo com informação a gosto, clicando em propriedades. Clicar em
Guardar (canto superior direito) para salvar as mudanças realizadas.
4. Figura 7 - Remover elementos
Para alterar os ícones do rodapé clicar em Mais > Gerir site > Esquema do site, abre uma janela como
a da figura 8.
Figura 9 – Editar conteúdo do rodapé
Clique em Editar conteúdo do rodapé, abre uma janela como a da figura 9. Na janela de edição do
rodapé é possível alterar os ícones clicando em cima de cada um para os remover podendo ser
substituídos. Para isso basta clicar em Inserir > Imagem e procurar os botões no computador ou na Web.
Por fim, clique em Ok > Guardar.
5. Figura 10 – Editar ícones do rodapé
Para criar uma página nova clique no segundo ícone (+) do menu do topo à direita. Abre uma janela
como a da figura 11.
Figura 11 – Criar página nova
Atribua um nome à página, deixe ficar o modelo Página Web e selecione a localização. Se
quiser que seja uma subpágina da home selecione Colocar página sob Home, senão deixe
estar a seleção apresentada. Pode criar tantas páginas quantas as necessárias.
Pode inserir uma linha horizontal: Inserir > Linha horizontal e dividir a página em duas
colunas: Tabela > Inserir tabela (selecione 2 colunas).
A coluna da esquerda pode ser para inserir texto e a da direita para inserir um vídeo. Para isso
clique em Inserir > Vídeo > YouTube, abre uma janela como a da figura 12. Cole o URL do
vídeo e clique em Guardar.
6. Figura 12 – Inserir vídeo do YouTube
É possível também inserir o URL de vídeos do Google vídeos e do Google Docs.
Para que as páginas apareçam no menu horizontal clique em Mais > Gerir site > Esquema do
site > Editar conteúdos de barra horizontal, surge uma janela como a da figura 13.
Figura 13 – Editar menu barra horizontal
As páginas podem não estar visíveis nesta janela, por isso deve clicar em Adicionar
página e selecionar as páginas que quer tornar visíveis no menu. Com as setas da
direita pode ordenar as páginas como deseja ou eliminá-las. No final clique em Ok >
7. Guardar.
Para além do menu da barra horizontal é também possível criar um menu na barra
lateral à direita ou à esquerda (figura 14).
Figura 14 – Criar o menu na barra lateral
Para que o menu lateral fique visível, clique em Mais > Gerir site > Esquema do Site >
Alterar o esquema do site > Barra lateral. Pode escolher a posição e a largura. Para
editar o menu da barra lateral clique em Mais > Gerir site > Esquema do Site > (Barra
lateral – Navegação) > Editar, abre uma janela como a da figura 15.
8. Figura 15 – Configurar a navegação no menu lateral
Por defeito está assinalada a opção Organizar a minha navegação automaticamente, se a
desmarcar surge algo parecido à figura 13 (editar menu barra horizontal), onde poderá escolher
as páginas que pretende visualizar nesta barra e ordená-las.
Sempre que queira inserir algo nas páginas tem de as editar primeiro e no menu da esquerda
clicar em Inserir, abre uma janela como a da figura 16. Para inserir miniaplicações basta escolher
as que deseja inserir em cada página. Tem ainda a possibilidade de procurar outras miniaplicações, basta
clicar em Mais miniaplicações.
Figura 16 – Inserir miniaplicações
Pretendendo inserir outras miniaplicações clique em … Mais miniaplicações, abre uma janela como a da
figura 17. Pode procurar pelo nome por exemplo se pretende colocar um calendário, um contador ou um
leitor MP3.
Figura 17 – Inserir mais miniaplicações
9. Pode inserir diferentes documentos guardados no Google Docs. Para inserir um formulário
edite a página onde o deseja inserir, clique em Inserir > Formulário de folha de cálculo e
abre uma janela como a da figura 18. Escolha o formulário (inquérito) que pretende
disponibilizar.
Figura 18 – Inserir um formulário (questionário)
Abra uma janela onde pode configurar o formulário. Pode mudar os valores da largura e altura
se entender. Não se esqueça de clicar em Ok > Guarda
Para configurar as páginas clicar em Mais > Definições de página e abra uma janela como a
da figura 19.
10. Figura 19 – Definições de página
Para que possa adicionar qualquer tipo de documentos em anexo deve selecionar Permitir
anexos. Se pretende que algumas páginas tenham a possibilidade de escrever comentários
selecione Permitir comentários. Pode aqui definir se pretende que a página apareça no menu
da barra lateral ou alterar o modelo da página. No final é só Guardar.
Ao clicar no ícone Mais abre uma janela como a da figura 20, onde pode realizar um conjunto
de ações para personalizar o site.
Figura 20 – Ações de página
Pode ver o histórico das revisões realizada ao site; subscrever alterações das páginas; alterar
as definições da página; imprimir a página; eliminar a página; pré-visualizar a página como
visitante; guardar a página como modelo; alterar o modelo da página; subscrever alterações do
site; editar o esquema do site; gerir site; inscrever-se no AdSense; partilhar e dar autorizações
a outros membros; solicitar ajuda do Google Sites; comunicar um problema.
Para aceder aos ícones que permitem gerir o site clique em Mais > Gerir site e abre uma
janela como a da figura 21.
11. Figura 21 – Gerir site
Em gerir site pode ver a atividade recente do site; as páginas criadas; os anexos inseridos; os
modelos de página; os scripts para o Google apps; os itens eliminados; o geral; a partilha e
autorizações; o adsense; o endereço Web; o esquema do site; as cores e tipos de letra; os
temas.
Se selecionar Geral, como na figura 21 pode ver o nome do site; acrescentar uma descrição ao
site; indicar que a página tem conteúdo para adultos; alterar a página de destino; acompanhar
a cota de armazenamento do site; copiar o site; publicá-lo como modelo; eliminar o site; ativar
as estatísticas; escolher o idioma do site; ajustar automaticamente o site para telemóveis;
definir o acesso ao site por outros utilizadores, como mostra a figura 22.
s
Figura 22 – Editar partilha e autorizações
Pode personalizar o site alterando as cores e o tipo de letra como mostra a figura 23.
Figura 23 – Editar cores e tipos de letra
12. Para incorporar um formulário vai ao gmail – disco ou drive , procura o formulário que criou,
clica em form – editar formulário, mais ações - incorporar
Figura 24 – para incorporar formúlário
Copiar este código.
Figura 25 – copiar código html
Clicar em editar para abrir a página onde quer pôr o formulário e clicar no menu <html>
Figura 26 – incorporar código html
Colar o código html nesta janela (figura 27), sempre no fim de tudo, depois clicar em Atualizar.
13. Figura 27 – Editar o código html
Para ir vendo como fica o website no telemóvel clica em Mais ações clica em Pré-visualizar a
página como visitante (figura 28).
Figura 28 – Pré-visualizar página como visitante
14. Verá que a página está redimensionada para ecrã de telemóvel.
Figura 29 – Aspeto da página
no telemóvel
Quando se trata de desenvolver um site para pequeno ecrã há recomendações importantes a
levar em conta: simplicidade de navegação, rapidez de acesso, visibilidade, conversão,
redireccionamento, uso dos polegares e oferta de uma experiência de navegação perfeita.
Adelina Moura