OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

on

  • 572 views

Material apresentado pela PCNP Doralice na orientação técnica para professores de Arte da 3ª série do Ensino Médio, das escolas da DE Leste 4. 19/06/2013.

Material apresentado pela PCNP Doralice na orientação técnica para professores de Arte da 3ª série do Ensino Médio, das escolas da DE Leste 4. 19/06/2013.

Statistics

Views

Total Views
572
Views on SlideShare
572
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2 Presentation Transcript

  • 1. TUTORIALComo fazer sites utilizando o Webnode
  • 2. PARTE 1Cadastrar dados;Confirmar dados;Criar esboço do site.
  • 3. Na página inicial do Webnode(http://www.webnode.com.br/) crie o nome da suapágina,insira o seu email e crie uma senha:
  • 4. O Webnode te enviará um email confirmando a criação do site e os dadosfornecidos no cadastro: email e senha.Além disso,é necessário que vocêclique no link indicado para confirmar seu email. Guarde essas informações.ATENÇÃO: Este email poderá cair na lixeira ou na caixa de Spam.Caso issoocorra,recupere para a caixa de entrada.Cuidado para não deletar!
  • 5. Escolha o tipo do site:
  • 6. Selecione o modelo do seu site e em seguida clique em continuar:
  • 7. Escolha as páginas que você deseja inserir no seu site.Ou então sepreferir,faça-o mais tarde e clique em concluir
  • 8. PARTE 2Editar :-Modelos;-Imagens;-Cabeçalho;
  • 9. Após isso,o seu site será gerado e irá aparecer uma tela de login.Utilizeo email e a senha que você cadastrou no passo 1. Em seguida iráaparecer a tela de edição do seu site:
  • 10. Na tela de edição do site,você encontra as seguintes opções:Novo,Ir para a página,Publicar,Pré-visualizar,Layout dapágina,Excluir,Propriedades,Segurança,Texto eImagens,Enquete,Galeria defotos,Formulário,Artigos,Catálogos,Mais,Arquivos,Imagens,Modelos de site e Idioma.
  • 11. Na página de edição podemos alterar o conteúdo de diversos itens como porexemplo Alterar a imagem do cabeçalho. Clique em Editar Imagem:
  • 12. Selecione a imagem e aperte a tecla DEL para removê-la.Clique emAdicionar Imagem para importar uma imagem salva no seu computadorou escolher diretamente da galeria do Webnode.E após isso,se preferir,editea nova imagem com as opções do editor:DICA: Crie um logotipo personalizado para inserir em seu site
  • 13. Aqui,você poderá escolher imagens da galeria do Webnode. Para escolherimagens do seu computador clique em Enviar uma Imagem:
  • 14. Clique na imagem para ajustar o tamanho e a posição usando os pontosindicados. Use o botão Enviar para trás,para que seja possível inserir/editaro título do slogan.Após a edição concluída,clique em Salvar e fecharDICA: Ao clicar na área de fundo da imagem do cabeçalho,o botão Cor defundo ficará disponível para edição.
  • 15. Para alterar o modelo do site,clique em Modelos de site e escolha o seumodelo.Você também pode navegar pelas opções categorias de negócios eescolher aquela que você preferir.
  • 16. Após escolher o seu tema,verifique se está da maneira que você gostaria.Clique em Usar este modelo. Conforme imagem abaixo:
  • 17. Dê duplo clique no cabeçalho para alterar texto e imagem.Aqui você podecolocar a foto e a frase do seu slogan.
  • 18. Quando estiver pronto,clique em Publicar. Abrirá uma janela informandoque a página foi publicada.Feche-a clicando no X:
  • 19. Como efetuar Logout do site?Clique em Fechar e depois em Sair:
  • 20. Como retomar a edição do site?Acesse o webnode e clique em Entrar.Insira o e-mail e a senha de acesso e clique em Entrar.
  • 21. Abrirá a tela com os sites que você criou. É possível ter vários sites.Eles sãochamados de projetos. No projeto que você deseja alterar,clique emAdministrar site:
  • 22. Para começar a editar o seu site clique em Comece a editar.ATENÇÃO: A opção Adquira seu próprio domínio é uma funçãopaga.Explore esses recursos mais tarde,se preferir.
  • 23. PARTE 3Adicionar/Excluir páginas;Editar conteúdo das páginas;
  • 24. Acrescentar ou excluir as páginas do Menu.Você pode alterar aordem,excluí-las ou acrescentar novas páginas:Clique em Editar Menu;Clique em Nova Página:
  • 25. Após todas as edições feitas,clique em Salvar
  • 26. Observe que a página criada ainda não foi publicada.Como publicá-la?
  • 27. Clique na seta ao lado do nome da página que você acabou de criar:Um pequeno Menu irá abrir.Clique na opção Publicar:
  • 28. Ou então,Clique na caixa ao lado do nome do site para selecioná-la e depoisclique em Publicar:
  • 29. Editar conteúdo das páginas:Selecione a página que você quer editar e clique em Editar(conteúdo,galeria ou adicionar artigo). Neste exemplo,estaremos editando apágina inicial:
  • 30. Na página de edição, há algumas ferramentas de formatação de texto,porexemplo.Após as edições concluídas,clique em Salvar:
  • 31. Você pode acrescentar um conteúdo a uma página criada,ou seja Texto eImagem,Enquete,Galeria de Fotos,Formulários,Catálogos,Artigos eWiggets.Basta selecionar o conteúdo,arrastar e soltar no local desejado.Este local éindicado pela faixa laranja que aparecerá ao se aproximar o conteúdo a serinserido:
  • 32. Agora,basta editar o conteúdo da página.Ao terminar a edição,clique em Publicar:
  • 33. DICA: Visualize seu site para verificar se ele está da forma que vocêdeseja.Clique em Pré-visualizar
  • 34. CANAL DE DICAS WEBNODENO YOUTUBE:http://www.youtube.com/user/58709131
  • 35. TUDO PARA WEBNODENO YOUTUBE:http://www.youtube.com/playlist?list=PLBA8296E4FE32CC19
  • 36. TUTORIALUtilizando recursos especiais do Webnode
  • 37. PARTE 1 Identificando os recursos Como inseri-los
  • 38. Na tela de edição do site podemos identificar algumas ferramentas adicionais quepodemos inserir em nosso site. Sendo elas: Enquete, Galeria de Fotos,Formulário, Artigos, Catálogos e Mais
  • 39. Para fazer a inserção da ferramenta selecionada, existem duas opções:arrastá-la até a área desejada, ou então você pode simplesmente clicar eaguardar até que ela seja posicionada automaticamente na página. Note abarra laranja, citada no tutorial anterior.
  • 40. PARTE 2 Explorando e editando as informações dasseguintes ferramentas:- Enquetes;- Galeria de fotos;- Formulário (Contate-nos);- Artigo;- Mais (Código Embutido).
  • 41. Neste caso, iremos realizar a criação de uma enquete. Enquetes são úteispara saber a opinião dos alunos e interessados em algum tema, paracolher dados, identificar preferências, entre outras finalidades. Apósinseri-la, a seguinte tela será aberta em seu navegador:
  • 42. Nesta tela, devemos escolher a pergunta e suas respectivas alternativas. Para fins deexemplo, utilizemos a seguinte:
  • 43. Você também pode inserir novas alternativas, clicando no link “Adicionar umaalternativa”.
  • 44. Feitas as alterações, basta clicar em “OK” para que as alterações sejam realizadase sua enquete seja criada.
  • 45. Abaixo você pode conferir como a nossa enquete de exemplo ficou, apóstermos clicado em “OK”:
  • 46. Você ainda pode clicar em “Editar enquete” e, dessa forma, adicionar ouremover perguntas à enquete em questão:
  • 47. Agora iremos realizar a criação de uma Galeria de Fotos. As galerias sãoúteis para que você possa disponibilizar fotos de algum evento na escola, deobras e outros materiais que possam interessar à comunidade escolar. Paraisso, basta clicar em Galeria de Fotos para abrir uma janela como esta:
  • 48. Na janela que se abriu, você só precisará escolher um nome para a galeriae clicar em “OK”. Como exemplo, utilizaremos o seguinte tema:
  • 49. Após escolhido o nome, uma nova janela será aberta. Nela, você deveindicar quais fotos você deseja inserir na galeria. Para isto, basta clicar em:“Fazer upload de imagens”, como mostra a imagem abaixo. DICA: Vocêpode selecionar mais de uma foto para enviar, segurando a tecla CTRL doteclado.
  • 50. Exemplo de tela de envio de imagens:
  • 51. Após carregadas para o Webnode, as imagens estarão dispostas comomostra a figura abaixo. Você poderá excluir uma ou mais fotosselecionando-a(as) e clicando em “Excluir”, bem como poderá acessar estamesma tela, posteriormente, clicando em “Editar galeria”. Após asalterações, basta clicar em “Fechar”.
  • 52. Exemplo de galeria criada:
  • 53. Neste passo criaremos um formulário para contato. Formulários são úteispara que os alunos e/ou pessoas interessadas possam entrar em contatocom a escola ou responsáveis pelo site, por exemplo. Veja a função deformulário abaixo:
  • 54. Você pode selecionar um formulário “Contate-nos” padrão, como abaixo:
  • 55. Um espaço como este será apresentado:
  • 56. Abaixo você pode verificar um formulário para contato padrão.
  • 57. Ou então, personalizar o seu. Conforme exemplo abaixo:
  • 58. Para tal, basta selecionar o campo desejado e alterar as informações queserão exibidas para os usuários. Veja um exemplo de aplicação e atente-seaos números e seu campo correspondente.
  • 59. Veja a página pronta para a publicação após as alterações:
  • 60. Aprenderemos agora a criar uma página de artigo. Estas páginas são úteispara se publicar algum comunicado para os visitantes do site. Por exemplo,um informe da direção ou do grêmio. Para tal, basta selecionar a opção“Artigo”:
  • 61. Dê um nome à sua seção de artigos:
  • 62. Clique em “Adicionar artigo”.
  • 63. Dê um título ao seu artigo, escreva-o e, caso deseje, edite-o conforme suasnecessidades. Por fim, basta clicar em “Publicar”.
  • 64. Por fim, aprenderemos a inserir um código embutido em uma página.Códigos embutidos são úteis para que possamos colocar algum conteúdomultimídia, como por exemplo, jogos didáticos em flash, apresentações deslides, streaming de vídeos, entre outros.
  • 65. Visualize abaixo um exemplo de inserção de código embed de um vídeo doYoutube.
  • 66. Após a inserção, o conteúdo será interpretado e exibido desta forma:
  • 67. FIM Obrigado por ter acompanhado o tutorial