segundo dia
Ementa <ul><li>Primeiro dia: </li></ul><ul><ul><li>Introdução e visão geral </li></ul></ul><ul><li>Segundo dia: </li></ul>...
Neste dia <ul><li>Templates </li></ul><ul><li>Conhecer e aplicar os Temas disponíveis </li></ul><ul><li>Aplicar Complement...
Acesse sua conta <ul><li>Acesse a sua conta no WordPress:  www.wordpress.com . </li></ul>Caso contrário deverá fazer o log...
Acesse sua conta <ul><li>Altere o idioma para “Português do Brasil”. </li></ul>
Acesse a área administrativa do Blog <ul><li>Clique em “Meu painel de controle” para ter acesso às ferramentas de administ...
Acesse a área de controle da aparência <ul><li>Clique em “Aparência” para ter acesso às opções que alteram a forma como o ...
Conhecendo os temas disponíveis <ul><li>Nesta etapa você irá conhecer os Templates disponíveis, navegará entre as opções p...
Ativando um tema disponível <ul><li>Localize o tema “Benevolence”, na página 1, e dê um clique na imagem para abrir a imag...
Ativando um tema disponível <ul><li>Observe o botão de fechar o tema sem ativar. </li></ul><ul><li>Dê um clique no link “A...
Ativando um tema disponível <ul><li>O tema é selecionado e a página retorna automaticamente para a área administrativa, in...
Ativando um tema disponível <ul><li>Localize a opção “DePo Masthead”, ative-a e observe que suas opções de edição são dife...
Dica: layout e conteúdo <ul><li>Você poderá repetir este procedimento sempre que desejar, sem perder o conteúdo do seu Blo...
Dica: buscar por um layout específico <ul><li>Se desejar buscar algum layout mais específico, clique na seta da caixa “mos...
Ativando o tema utilizado no curso <ul><li>Dê um clique na seta da caixa “mostrar todos os temas”. Clique na opção “Blue” ...
Ativando Complementos <ul><li>Dê um clique na opção “Complementos”. </li></ul><ul><li>Esta seção mostra os assessórios que...
Ativando Complementos <ul><li>Ative os Complementos indicados acima. </li></ul><ul><li>Localize o nome do Complemento a se...
Editando um complemento: Text <ul><li>Dê um clique no botão “Edit” do complemento “Text”.  </li></ul>
Editando um complemento: Text <ul><li>Digite o texto acima, não é necessário mudar de linha, digite na sequência. Em segui...
Editando um complemento: Text <ul><li>Dê um clique no botão “Salvar alterações” para salvar sua alteração. Em seguida cliq...
Editando um complemento: Text <ul><li>Este é o resultado, a imagem está inserida e, se clicada, levará você ao site da com...
Dica: edição de complementos <ul><li>Para editar um complemento (widget), basta ativá-lo e clicar no link “editar”. </li><...
Dica: edição de caixa de texto <ul><li>Código HTML/XHTML pode ser inserido em caixas de texto. </li></ul><ul><li>Códigos m...
Configurando opções Extras <ul><li>Dê um clique na opção “Extras”. </li></ul><ul><li>Deixe as caixas conforme indicado na ...
Dica: Snap Shot <ul><li>Snap Shots  são pequeno quadros que se abrem em todos os seus links, para que o visitante tenha um...
Dica: Esconder links relacionados <ul><li>Quando ativa, esta opção faz com que seus Posts não possam ser visíveis em outro...
Configurando a imagem de cabeçalho <ul><li>Dê um clique na opção “Imagem de Cabeçalho Personalizada”. Nesta seção, você po...
Configurando a imagem de cabeçalho <ul><li>Este é o resultado da imagem de cabeçalho com as configurações originais do tem...
Configurando a imagem de cabeçalho <ul><li>Dê um clique no botão “Selecione uma Cor de Texto”. Clique na cor da janela e o...
Dica: salvando a cor do texto alterada <ul><li>Você pode salvar a mudança clicando no botão “Salvar Mudança”, mesmo que a ...
Configurando a imagem de cabeçalho <ul><li>Dê um clique no botão “Esconder texto” e observe o resultado. Em seguida clique...
Dica: para voltar o texto escondido <ul><li>Se quiser que o texto original apareça novamente, dê um clique no botão “Mostr...
Configurando a imagem de cabeçalho <ul><li>Dê um clique no botão “Escolher arquivo”, escolha o arquivo “imagem_superior_te...
Configurando a imagem de cabeçalho <ul><li>Aguarde até que a imagem tenha sido enviada. </li></ul><ul><li>Dê um clique com...
Configurando a imagem de cabeçalho <ul><li>Este é o resultado obtido das configurações feitas neste segundo dia. </li></ul>
Dica: observe o tamanho da imagem <ul><li>Cada Tema possui um tamanho diferente de imagem de cabeçalho.  </li></ul>
Dica: trabalhar com abas (ou guias) <ul><li>Procure trabalhar com guias (ou abas) do seu navegador. Mantenha uma aba do na...
Dica: para promover novas alterações <ul><li>Clique novamente na opção “Imagem de Cabeçalho Personalizada”. Envie uma nova...
Lembrete: botão “Salvar mudanças” <ul><li>Lembre-se de clicar no botão “Salvar mudanças” para poder registrar as alteraçõe...
Dica: programa grátis e online de edição de imagens <ul><li>Um programa free, online e profissional de edição de imagens: ...
Próximo encontro Dar a sua cara ao blog é extremamente importante. A próxima etapa será inserir o seu conteúdo. Este será ...
Upcoming SlideShare
Loading in …5
×

aula 02 - WordPress

2,112 views

Published on

aula 02 do mini curso sobre wordpress, primeiro congresso de tecnologias na educação

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,112
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
154
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

aula 02 - WordPress

  1. 1. segundo dia
  2. 2. Ementa <ul><li>Primeiro dia: </li></ul><ul><ul><li>Introdução e visão geral </li></ul></ul><ul><li>Segundo dia: </li></ul><ul><ul><li>Template </li></ul></ul><ul><li>Terceiro dia: </li></ul><ul><ul><li>Blogando </li></ul></ul><ul><li>Quarto dia: </li></ul><ul><ul><li>Criando páginas e Links </li></ul></ul><ul><li>Quinto dia: </li></ul><ul><ul><li>Gerenciando e Comentando </li></ul></ul>
  3. 3. Neste dia <ul><li>Templates </li></ul><ul><li>Conhecer e aplicar os Temas disponíveis </li></ul><ul><li>Aplicar Complementos </li></ul><ul><li>Alterar opções </li></ul>
  4. 4. Acesse sua conta <ul><li>Acesse a sua conta no WordPress: www.wordpress.com . </li></ul>Caso contrário deverá fazer o login com seu nome de usuário e senha, não o nome do blog, o seu nome de usuário e sua senha. Caso você tenha ativado a caixa “Lembrar minha senha” (Remember me) sua entrada será automática.
  5. 5. Acesse sua conta <ul><li>Altere o idioma para “Português do Brasil”. </li></ul>
  6. 6. Acesse a área administrativa do Blog <ul><li>Clique em “Meu painel de controle” para ter acesso às ferramentas de administração do seu blog. </li></ul>
  7. 7. Acesse a área de controle da aparência <ul><li>Clique em “Aparência” para ter acesso às opções que alteram a forma como o seu Blog é exibido. </li></ul>
  8. 8. Conhecendo os temas disponíveis <ul><li>Nesta etapa você irá conhecer os Templates disponíveis, navegará entre as opções prontas, ativará algumas e reconhecerá as diferenças entre elas. </li></ul>Páginas com mais temas disponíveis. Tema atual e suas possibilidades de edição.
  9. 9. Ativando um tema disponível <ul><li>Localize o tema “Benevolence”, na página 1, e dê um clique na imagem para abrir a imagem de ativação. </li></ul>Clique na imagem ou no nome do tema para abrir a ampliação e poder ativar. Descrição do tema. Filtros de pesquisa.
  10. 10. Ativando um tema disponível <ul><li>Observe o botão de fechar o tema sem ativar. </li></ul><ul><li>Dê um clique no link “Ativar “Benevolence””. </li></ul>Botão para fechar o tema sem ativá-lo.
  11. 11. Ativando um tema disponível <ul><li>O tema é selecionado e a página retorna automaticamente para a área administrativa, indicando o sucesso da operação. </li></ul><ul><li>Observe as opções de edição automática que este tema disponibiliza. </li></ul>
  12. 12. Ativando um tema disponível <ul><li>Localize a opção “DePo Masthead”, ative-a e observe que suas opções de edição são diferentes. </li></ul>
  13. 13. Dica: layout e conteúdo <ul><li>Você poderá repetir este procedimento sempre que desejar, sem perder o conteúdo do seu Blog: </li></ul><ul><ul><li>Layout e conteúdo são independentes no WordPress. </li></ul></ul>
  14. 14. Dica: buscar por um layout específico <ul><li>Se desejar buscar algum layout mais específico, clique na seta da caixa “mostrar todos os temas”, observe as opções disponíveis com a barra de rolagem, clique na opção desejada e em seguida, clique no botão “Filter”. </li></ul>
  15. 15. Ativando o tema utilizado no curso <ul><li>Dê um clique na seta da caixa “mostrar todos os temas”. Clique na opção “Blue” e em seguida clique no botão “Filter”. </li></ul><ul><li>Localize a opção “Contempt” e ative-a. </li></ul>
  16. 16. Ativando Complementos <ul><li>Dê um clique na opção “Complementos”. </li></ul><ul><li>Esta seção mostra os assessórios que estão disponíveis e os utilizados em seu layout. </li></ul>Nome do complemento. Link de ativação do complemento. Descrição do complemento.
  17. 17. Ativando Complementos <ul><li>Ative os Complementos indicados acima. </li></ul><ul><li>Localize o nome do Complemento a ser ativado e clique no respectivo link “Adicionar”. </li></ul><ul><li>Ao final, clique no botão “Salvar Mudanças” </li></ul>
  18. 18. Editando um complemento: Text <ul><li>Dê um clique no botão “Edit” do complemento “Text”. </li></ul>
  19. 19. Editando um complemento: Text <ul><li>Digite o texto acima, não é necessário mudar de linha, digite na sequência. Em seguida, clique no botão “Alterar” </li></ul><a href=&quot;http://internetnaeducacao.blogspot.com/&quot; target=&quot;_blank“><img src=&quot;http://photos1.blogger.com/blogger/4323/2700/1600/seloComunidade.jpg&quot; alt=&quot;selo da comunidade Blogs Educativos&quot; width=&quot;180&quot; height=&quot;158&quot; /></a>
  20. 20. Editando um complemento: Text <ul><li>Dê um clique no botão “Salvar alterações” para salvar sua alteração. Em seguida clique em “ver o site”. </li></ul>
  21. 21. Editando um complemento: Text <ul><li>Este é o resultado, a imagem está inserida e, se clicada, levará você ao site da comunidade Blogs Educativos. Não é necessário clicar. Volte à página anterior utilizando a seta do navegador, conforme indicado na imagem acima. </li></ul>ou firefox 3.0 internet explorer 7.0 Resultado da caixa de texto alterada
  22. 22. Dica: edição de complementos <ul><li>Para editar um complemento (widget), basta ativá-lo e clicar no link “editar”. </li></ul><ul><li>Cada controle possui suas próprias opções de edição. </li></ul><ul><li>Para que a mudança tenha efeito, você deve clicar novamente no botão “Salvar mudanças”. </li></ul>
  23. 23. Dica: edição de caixa de texto <ul><li>Código HTML/XHTML pode ser inserido em caixas de texto. </li></ul><ul><li>Códigos mais complexos, como por exemplo <object> de vídeo do Youtube, não deram resultado. </li></ul><ul><li>Na dúvida: faça o teste. Coloque o código que deseja testar, salve, visualize no navegador o resultado. </li></ul><ul><li>Para saber mais sobre HTML/XHTML, visite: http://www.w3schools.com/xhtml/default.asp </li></ul>
  24. 24. Configurando opções Extras <ul><li>Dê um clique na opção “Extras”. </li></ul><ul><li>Deixe as caixas conforme indicado na figura e clique no botão “Atualizar extras”. </li></ul>
  25. 25. Dica: Snap Shot <ul><li>Snap Shots são pequeno quadros que se abrem em todos os seus links, para que o visitante tenha uma pré-visualização do conteúdo do link </li></ul>Resultado obtido nos links do seu Blog com a opção “Snap Shot” ativa.
  26. 26. Dica: Esconder links relacionados <ul><li>Quando ativa, esta opção faz com que seus Posts não possam ser visíveis em outros blogs, impossibilitando que terceiros obtenham tráfego com suas postagens. </li></ul>
  27. 27. Configurando a imagem de cabeçalho <ul><li>Dê um clique na opção “Imagem de Cabeçalho Personalizada”. Nesta seção, você pode trocar a imagem de cabeçalho além de outras edições. </li></ul>Pré-visualização da imagem atual. Opções de edição simples. Opções para o carregamento de uma nova imagem.
  28. 28. Configurando a imagem de cabeçalho <ul><li>Este é o resultado da imagem de cabeçalho com as configurações originais do tema escolhido. </li></ul>
  29. 29. Configurando a imagem de cabeçalho <ul><li>Dê um clique no botão “Selecione uma Cor de Texto”. Clique na cor da janela e observe o resultado (repita o procedimento se desejar outra cor). Em seguida clique novamente no botão “Selecione uma Cor de Texto” para fechar a janela de cores. </li></ul>
  30. 30. Dica: salvando a cor do texto alterada <ul><li>Você pode salvar a mudança clicando no botão “Salvar Mudança”, mesmo que a janela de cores ainda esteja aberta. </li></ul>
  31. 31. Configurando a imagem de cabeçalho <ul><li>Dê um clique no botão “Esconder texto” e observe o resultado. Em seguida clique no botão “Salvar mudanças”. </li></ul>
  32. 32. Dica: para voltar o texto escondido <ul><li>Se quiser que o texto original apareça novamente, dê um clique no botão “Mostrar texto”. </li></ul>
  33. 33. Configurando a imagem de cabeçalho <ul><li>Dê um clique no botão “Escolher arquivo”, escolha o arquivo “imagem_superior_texto_az.jpg”. Em seguida clique no botão “Enviar”. </li></ul>
  34. 34. Configurando a imagem de cabeçalho <ul><li>Aguarde até que a imagem tenha sido enviada. </li></ul><ul><li>Dê um clique com o botão direito do mouse no botão “Visite o Site” para visualizar o Blog em uma nova guia, aba ou página, conforme o seu navegador. </li></ul>Chrome FireFox 3 Internet Explorer 7
  35. 35. Configurando a imagem de cabeçalho <ul><li>Este é o resultado obtido das configurações feitas neste segundo dia. </li></ul>
  36. 36. Dica: observe o tamanho da imagem <ul><li>Cada Tema possui um tamanho diferente de imagem de cabeçalho. </li></ul>
  37. 37. Dica: trabalhar com abas (ou guias) <ul><li>Procure trabalhar com guias (ou abas) do seu navegador. Mantenha uma aba do navegador com a página administrativa do seu Blog e outra aba com o Blog propriamente dito. Faça suas alterações na área administrativa, clique na aba do Blog e pressione a tecla F5 (ou o comando de atualizar janela equivalente). </li></ul><ul><li>Alguns navegadores que possuem navegação por abas: </li></ul><ul><ul><li>Chrome </li></ul></ul><ul><ul><li>FireFox </li></ul></ul><ul><ul><li>Internet Explorer 7 </li></ul></ul><ul><li>Uma alternativa é trabalhar com 2 janelas abertas de navegador, uma com a área administrativa e outra com o blog. Altere na área de administração, clique na janela do Blog e atualize a visualização (F5). </li></ul>
  38. 38. Dica: para promover novas alterações <ul><li>Clique novamente na opção “Imagem de Cabeçalho Personalizada”. Envie uma nova imagem ou clique no botão “Restaurar cabeçalho original” para começar do modelo original do tema. </li></ul>
  39. 39. Lembrete: botão “Salvar mudanças” <ul><li>Lembre-se de clicar no botão “Salvar mudanças” para poder registrar as alterações realizadas. </li></ul>
  40. 40. Dica: programa grátis e online de edição de imagens <ul><li>Um programa free, online e profissional de edição de imagens: https://www.photoshop.com/express </li></ul>
  41. 41. Próximo encontro Dar a sua cara ao blog é extremamente importante. A próxima etapa será inserir o seu conteúdo. Este será o tema do próximo encontro!! até lá!!

×