Páginas web, recorrendo ao Weebly Por: Fernando Ferreira As páginas web podem ser criadas, de raiz, usando software específico, como o

Dreamweaver , ou recorrendo a assistentes online, fornecidos por empresas que lhe

permitem criar um web site, sem necessidade de muitos conhecimentos técnicos, como é o

caso de:

A forma mais fácil, poderosa e acessível experiência de criação de sites!

• Construtor de sites do tipo arrastar & soltar. Não é necessário nenhum conhecimento

técnico.

• Hospedagem de Alta Capacidade. Hospedagem numa confiável infra-estrutura de

hospedagem em nuvem, monitorada dia e noite por uma equipa.

• 100 Temas Profissionais. Não terá dificuldade para encontrar o visual perfeito para o seu

site.

• Blogging sem esforço. A ferramenta de blogging utiliza a mesma interface do tipo arrastar

& soltar que torna o Weebly surpreendente. Adicione fotos & vídeos com facilidade.

• Milhares de Recursos Multimídia. Galerias de fotos, apresentações de slides atraentes,

alta qualidade em vídeo e áudio, mapas, …

Agora vamos começar um projeto. Todas as explicaçõe s abaixo devem ser seguidas passo-a-passo, cuidadosamente, cabendo ao professor optar, quando existem diversas opções, pela que desejar para o seu projet o. Comece por criar uma pasta no computador “webbly ”. Depois, deve seguir os seguintes passos, para criar um web site gratuito no webbly 1. Faça o seu registo fazendo clique em “Sign Up. It’s Free ”

2. Depois de se ter registado, pode iniciar a construção do seu web site, atrás planeado no exercício 1.

• Introduza o título e o tipo de site:

• Insira o domínio desejado. O sistema informa se já existe ou se está livre:

• E pronto! Pode verificar que tem 5 separadores para personalizar: elementos , desenho , páginas , editores e definições .

Agora basta clicar e arrastar, pois o seu site está sem conteúdo.

Separador Elementos

• Altere o título :

• Faça clique em Logo , para inserir uma imagem que será o seu logótipo . Para isso vá ao google e grave na sua pasta de trabalho “webbly” uma imagem que será usada como o seu logótipo.

• Altere a imagem de fundo com clique em Edit Image :

Obterá:

Opte por Add Text. Insira o texto desejado:

ProfJR

Faça clique em Save e faça a sua opção:

Obterá:

Experimente agora Add Image:

Escolha uma imagem no google e guarde-a na sua pasta. Depois volte aqui para a inserir. Pode arrastar a imagem usando o rato de forma a mostrar a parte desejada. Veja um exemplo:

Sempre que sair da página de edição e desejar voltar à edição, basta inserir o endereço: http://www.weebly.com/weebly/main.php e fazer clique em Editar :

No separador Elementos pode ainda criar mais elementos, que veremos mais à frente.

Separador Páginas Vamos inserir uma nova página. Para isso faça clique no separador Páginas.

Prof JR

Prof JR

Aqui pode personalizar a página que já possui Home :

Depois faça clique em Adicionar página . Crie a página Contactos :

Se desejar inserir uma palavra-passe para acesso a esta página, tornando-a por exemplo reservada para sócios ou clientes, isto é possível, mas apenas com pagamento a webbly.

Faça as suas opções e depois faça clique em Guardar definições . Agora deverá, no separador Elementos , inserir o conteúdo da página. Insira um “Parágrafo com Titulo ”, onde deve escrever o texto desejado:

Para inserir o seu e-mail, escreva por exemplo o seu nome e selecione. Depois faça clique no símbolo “cadeado”, para aí associar o link do e-mail:

Publicar o site Para publicar o site online, com estas duas páginas, faça clique em Publicar , no topo do ecrã, para definir qual será o domínio:

Defina o seu domínio com extensão webbly pois se optar por .com terá de pagar o alojamento. Depois faça clique em Gravar . Pode partilhar nas redes sociais, como o Facebook. Feche página e abra-a num browser: www.profjr.webbly.com, para ver como está online. Anote as correções a fazer. Vamos voltar à edição! Agora ao separador Desenho .

Separador Desenho Aqui pode definir o design do seu site, usando uma das opções apresentadas no topo do ecrã (Favoritos ), as Opções de concepção ou Todos os temas :

profjr

• Se optar pelos Favoritos , basta clicar sobre um deles para alterar o aspecto do seu site:

• Em Opções de concepção , pode alterar as cores dos links, as cores dos textos, etc:

• Se optar por Todos os temas terá de optar pela categoria (Business , Colorful , …) desejado e depois escolher: clique em Preview Theme e depois se gostar em Use Theme ; caso não goste, clique em Cancel .

����

Separador Editores Os Editores são pessoas a quem você deu permissão para editar o seu site. Faça clique em Adicionar editores . Depois terá de indicar os e-mails das pessoas que podem editar o site, separados por virgula, assim como o perfil destes (administrador que pode editar todas as páginas ou autor , em que pode apenas alterar algumas).

Se optar por autor , terá de pagar esse serviço. Opte então por administrador e indique a mensagem que estes devem receber. No fim clique em Add Editors .

NOTA: Indique o e-mail de um seu colega professor, para mais à frente testar esta capacidade do webbly.

Separador Definições Aqui pode personalizar algumas definições do seu site, tais como Definições gerais (titulo, .,.), Search Engine Optimization (para o site ser pesquisavel na web), definições de comércio eletrónico, etc.

Altere o título do seu site.

Crie mais três páginas além de Home e Contactos , como por exemplo: Dados profissionais , Blog , Links úteis . Para criar uma página Blog , deverá: 1. No separador Páginas , clique em Adicionar blog (botão ao lado de Adicionar página ). Insira alguns dados. 2. Ao clicar em Guardar definições obterá o blog, que poderá personalizar: insira título, descrição, texto no botão:

3. No botão pode escrever um texto e definir vários links :

Blog Prof JR

4. Opte por Arquivo no seu website . Para isso, escolha um documento seu, currículo ou outro, grave-o em PDF na sua pasta webbly . Depois volte aqui e clique Upload a new file . O ficheiro será copiado para o servidor webbly. 5. Altere a imagem do blog. Para isso grave uma imagem a seu gosto na pasta webbly e depois volte aqui para a carregar . Nesta página de blog pode ainda inserir um post , clicando no botão New Post . Depois, pode:

• Escrever um titulo e escolher uma data.

• Arrastar elementos da barra superior para baixo, por exemplo um paragrafo de texto, que

pode escrever e formatar.

• Pode definir algumas opções para o blog:

• No final, clique em Publish Live (ou grave em Drafts):

È agora hora de gravar todas as páginas:

• Clique no topo do ecrã em Gravar todas as páginas. • Depois faça clique em Publicar , para o seu site ser atualizado e fique online. • Aceda no browser ao seu endereço (seja por exemplo: www.profjr.webbly.com) para ver o

aspeto online do seu site. • Anote o que deseja alterar. Relativamente ao blog criado : 1. Teste a página Blog . Adicione um comentário. 2. Envie o endereço do seu blog para todos os professores deste curso e peça para

inserirem um comentário no blog. Relativamente à criação de utilizadores , recorda-se que indicou um colega para também administrar o seu site? Para que o colega que indicou possa trabalhar no seu site, peça-lhe agora que vá ao seu e-mail pois terá uma mensagem do webbly informando que foi convidado a ser também administrador do site. Quando esse professor clicar a mensagem tem assim a hipótese de criar uma conta para depois puder ser administrador e alterar o seu site:

Para criar as outras páginas Dados profissionais e Links úteis , deverá usar o separador Páginas . Atrás usamos o botão para abrir um ficheiro, use-o agora para abrir um link:

�

Selecione Abra link numa nova janela , para abrir uma nova com esse link mantendo por detrás a página. Insira outros links, usando botões, clicando a arrastando-os do topo para a zona da página. Insira uma caixa de pesquisa e um formulário de contacto . Crie a página Dados profissionais, com textos e imagens. NOTA: Ao criar uma nova página, se optar pela opção abaixo, criará uma página que liga diretamente ao site indicado por si:

�