aula 02 - WordPress

  • 1,891 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,891
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
148
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. segundo dia
  • 2. Ementa
    • Primeiro dia:
      • Introdução e visão geral
    • Segundo dia:
      • Template
    • Terceiro dia:
      • Blogando
    • Quarto dia:
      • Criando páginas e Links
    • Quinto dia:
      • Gerenciando e Comentando
  • 3. Neste dia
    • Templates
    • Conhecer e aplicar os Temas disponíveis
    • Aplicar Complementos
    • Alterar opções
  • 4. Acesse sua conta
    • Acesse a sua conta no WordPress: www.wordpress.com .
    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. Acesse sua conta
    • Altere o idioma para “Português do Brasil”.
  • 6. Acesse a área administrativa do Blog
    • Clique em “Meu painel de controle” para ter acesso às ferramentas de administração do seu blog.
  • 7. Acesse a área de controle da aparência
    • Clique em “Aparência” para ter acesso às opções que alteram a forma como o seu Blog é exibido.
  • 8. Conhecendo os temas disponíveis
    • Nesta etapa você irá conhecer os Templates disponíveis, navegará entre as opções prontas, ativará algumas e reconhecerá as diferenças entre elas.
    Páginas com mais temas disponíveis. Tema atual e suas possibilidades de edição.
  • 9. Ativando um tema disponível
    • Localize o tema “Benevolence”, na página 1, e dê um clique na imagem para abrir a imagem de ativação.
    Clique na imagem ou no nome do tema para abrir a ampliação e poder ativar. Descrição do tema. Filtros de pesquisa.
  • 10. Ativando um tema disponível
    • Observe o botão de fechar o tema sem ativar.
    • Dê um clique no link “Ativar “Benevolence””.
    Botão para fechar o tema sem ativá-lo.
  • 11. Ativando um tema disponível
    • O tema é selecionado e a página retorna automaticamente para a área administrativa, indicando o sucesso da operação.
    • Observe as opções de edição automática que este tema disponibiliza.
  • 12. Ativando um tema disponível
    • Localize a opção “DePo Masthead”, ative-a e observe que suas opções de edição são diferentes.
  • 13. Dica: layout e conteúdo
    • Você poderá repetir este procedimento sempre que desejar, sem perder o conteúdo do seu Blog:
      • Layout e conteúdo são independentes no WordPress.
  • 14. Dica: buscar por um layout específico
    • 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”.
  • 15. Ativando o tema utilizado no curso
    • Dê um clique na seta da caixa “mostrar todos os temas”. Clique na opção “Blue” e em seguida clique no botão “Filter”.
    • Localize a opção “Contempt” e ative-a.
  • 16. Ativando Complementos
    • Dê um clique na opção “Complementos”.
    • Esta seção mostra os assessórios que estão disponíveis e os utilizados em seu layout.
    Nome do complemento. Link de ativação do complemento. Descrição do complemento.
  • 17. Ativando Complementos
    • Ative os Complementos indicados acima.
    • Localize o nome do Complemento a ser ativado e clique no respectivo link “Adicionar”.
    • Ao final, clique no botão “Salvar Mudanças”
  • 18. Editando um complemento: Text
    • Dê um clique no botão “Edit” do complemento “Text”.
  • 19. Editando um complemento: Text
    • Digite o texto acima, não é necessário mudar de linha, digite na sequência. Em seguida, clique no botão “Alterar”
    <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. Editando um complemento: Text
    • Dê um clique no botão “Salvar alterações” para salvar sua alteração. Em seguida clique em “ver o site”.
  • 21. Editando um complemento: Text
    • 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.
    ou firefox 3.0 internet explorer 7.0 Resultado da caixa de texto alterada
  • 22. Dica: edição de complementos
    • Para editar um complemento (widget), basta ativá-lo e clicar no link “editar”.
    • Cada controle possui suas próprias opções de edição.
    • Para que a mudança tenha efeito, você deve clicar novamente no botão “Salvar mudanças”.
  • 23. Dica: edição de caixa de texto
    • Código HTML/XHTML pode ser inserido em caixas de texto.
    • Códigos mais complexos, como por exemplo <object> de vídeo do Youtube, não deram resultado.
    • Na dúvida: faça o teste. Coloque o código que deseja testar, salve, visualize no navegador o resultado.
    • Para saber mais sobre HTML/XHTML, visite: http://www.w3schools.com/xhtml/default.asp
  • 24. Configurando opções Extras
    • Dê um clique na opção “Extras”.
    • Deixe as caixas conforme indicado na figura e clique no botão “Atualizar extras”.
  • 25. Dica: Snap Shot
    • 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
    Resultado obtido nos links do seu Blog com a opção “Snap Shot” ativa.
  • 26. Dica: Esconder links relacionados
    • 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.
  • 27. Configurando a imagem de cabeçalho
    • 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.
    Pré-visualização da imagem atual. Opções de edição simples. Opções para o carregamento de uma nova imagem.
  • 28. Configurando a imagem de cabeçalho
    • Este é o resultado da imagem de cabeçalho com as configurações originais do tema escolhido.
  • 29. Configurando a imagem de cabeçalho
    • 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.
  • 30. Dica: salvando a cor do texto alterada
    • Você pode salvar a mudança clicando no botão “Salvar Mudança”, mesmo que a janela de cores ainda esteja aberta.
  • 31. Configurando a imagem de cabeçalho
    • Dê um clique no botão “Esconder texto” e observe o resultado. Em seguida clique no botão “Salvar mudanças”.
  • 32. Dica: para voltar o texto escondido
    • Se quiser que o texto original apareça novamente, dê um clique no botão “Mostrar texto”.
  • 33. Configurando a imagem de cabeçalho
    • Dê um clique no botão “Escolher arquivo”, escolha o arquivo “imagem_superior_texto_az.jpg”. Em seguida clique no botão “Enviar”.
  • 34. Configurando a imagem de cabeçalho
    • Aguarde até que a imagem tenha sido enviada.
    • 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.
    Chrome FireFox 3 Internet Explorer 7
  • 35. Configurando a imagem de cabeçalho
    • Este é o resultado obtido das configurações feitas neste segundo dia.
  • 36. Dica: observe o tamanho da imagem
    • Cada Tema possui um tamanho diferente de imagem de cabeçalho.
  • 37. Dica: trabalhar com abas (ou guias)
    • 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).
    • Alguns navegadores que possuem navegação por abas:
      • Chrome
      • FireFox
      • Internet Explorer 7
    • 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).
  • 38. Dica: para promover novas alterações
    • 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.
  • 39. Lembrete: botão “Salvar mudanças”
    • Lembre-se de clicar no botão “Salvar mudanças” para poder registrar as alterações realizadas.
  • 40. Dica: programa grátis e online de edição de imagens
    • Um programa free, online e profissional de edição de imagens: https://www.photoshop.com/express
  • 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á!!