Tutorial google sites mobile templates

14
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

description

 

Transcript of Tutorial google sites mobile templates

Page 1: Tutorial google sites mobile templates

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

Page 2: Tutorial google sites mobile templates

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.

Page 3: Tutorial google sites mobile templates

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.

Page 4: Tutorial google sites mobile templates

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.

Page 5: Tutorial google sites mobile templates

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.

Page 6: Tutorial google sites mobile templates

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 >

Page 7: Tutorial google sites mobile templates

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.

Page 8: Tutorial google sites mobile templates

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

Page 9: Tutorial google sites mobile templates

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.

Page 10: Tutorial google sites mobile templates

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.

Page 11: Tutorial google sites mobile templates

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

Page 12: Tutorial google sites mobile templates

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.

Page 13: Tutorial google sites mobile templates

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

Page 14: Tutorial google sites mobile templates

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