aula 03 - WordPress

72
terceiro dia

description

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

Transcript of aula 03 - WordPress

Page 1: aula 03 - WordPress

terceiro dia

Page 2: aula 03 - WordPress

EmentaEmenta

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

Page 3: aula 03 - WordPress

Neste diaNeste dia

Blogando - Posts

Escrever

Formatar

Inserir links e imagens

Gerenciar

Page 4: aula 03 - WordPress

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.

Page 5: aula 03 - WordPress

Acesse sua conta

Altere o idioma para “Português do Brasil”.

Page 6: aula 03 - WordPress

Acesse a área administrativa do Blog

Clique em “Meu painel de controle” para ter acesso às ferramentas de administração do seu blog.

Page 7: aula 03 - WordPress

Dica: 2 opções de acesso para escrever um Post

Na página de abertura, você tem 2 formas de começar a escrever um Post, utilizando a aba “Escrever” ou o link “Escrever novo post”.

Page 8: aula 03 - WordPress

Acesse a área de inserir conteúdo

Clique em “Escrever” para ter acesso às opções de inserção de conteúdo.

Page 9: aula 03 - WordPress

O que é um Post?O que é um Post?

Um Post é a sua mensagem.

Lembre-se das dicas de “como escrever para a Web”.

Lembre-se de adequar a mensagem ao seu público alvo.

Você pode inserir conteúdo textual, imagem, vídeo e áudio em seus Posts.

Você pode taguear e categorizar suas mensagens, além de resumir entre outras opções.

Page 10: aula 03 - WordPress

Escrevendo um Post

Digite um título para seu Post e digite uma mensagem. Fique à vontade para criar o seu primeiro Post. Na próxima página você tem um exemplo.

Page 11: aula 03 - WordPress

Escrevendo um Post

Observe o resultado. Digite normalmente. A seguir você verá as ferramentas básicas de edição deste texto.

Page 12: aula 03 - WordPress

Dicas: manipulação de parágrafosDicas: manipulação de parágrafos

Mudar de linha criando um novo parágrafo: pressione a tecla “Enter”.

Criar uma nova linha sem sair do parágrafo: pressione as teclas “Shift” + “Enter”.

para os iniciantes: pressione a tecla “shift”, mantenha pressionada e dê um “peteleco” na tecla “enter”, então libere o “shift”.

Page 13: aula 03 - WordPress

Formatando textos

Selecione uma frase e dê um clique no botão “B”. A frase torna-se em negrito.

Page 14: aula 03 - WordPress

Dicas: formatação de textos

Para utilizar as ferramentas de edição de texto, selecione primeiro o texto e depois clique no botão da ferramenta. Experimente cada uma destas possibilidades em seu texto.

alinhamento à direita

alinhamento ao centro

alinhamento à esquerda

citação (blockquote) – cria um recuo à esquerda

lista numerada

lista não numerada

negrito

itálico

riscado

Page 15: aula 03 - WordPress

Dicas: tags e categoriasDicas: tags e categorias

Antes de continuar a alterar o visual de seus Posts, é muito importante você entender e utilizar as Tags e as Categorias: É através delas que você ajuda o seu visitante a

encontrar Posts antigos no seu blog.

As tags são as palavras chaves para o seu Post, você pode usar várias, separando-as por vírgulas.

As categorias são grandes grupos, criados por você, para organizar o seu conteúdo. Um Post pode estar associado a mais de uma Categoria.

Page 16: aula 03 - WordPress

Adicionando Tags (palavras chaves) para seu Post

Dê um clique na caixa de entrada de Tags, digite as palavras chaves relacionadas ao seu Post e clique no botão “Add”. Observe que as Tags são apresentadas abaixo da caixa de entrada.

Page 17: aula 03 - WordPress

Dica: removendo Tags

Se você desejar remover alguma Tag, clique no “X” correspondente a ela.Caso tenha digitado errado, remova a Tag errada e insira uma nova digitando o texto correto na caixa de entrada e clicando no botão “Add”.

remover uma Tag

adicionar uma Tag

Page 18: aula 03 - WordPress

Adicionando uma nova Categoria

Dê um clique no link “Adicionar Nova Categoria”. Digite o nome da nova categoria na caixa de entrada, em seguida, clique no botão “OK”. A nova categoria é criada e já aparece já selecionada.

Page 19: aula 03 - WordPress

Publicando um post

Dê um clique no botão “Publicar” para publicar o seu Post, lembrando que as categorias e tags foram implementadas.

Page 20: aula 03 - WordPress

Visualizando seu Post

Dê um clique no link “Ver post”.

Page 21: aula 03 - WordPress

Visualizando seu Post

Parabéns!Este é o seu primeiro Post!

Page 22: aula 03 - WordPress

Visualizando seu Post

O seu blog será aberto na mesma janela de navegador onde você estava.Use a seta de voltar do navegador para voltar ao seu painel do WordPress.

ou

firefox 3.0

internet explorer 7.0

Page 23: aula 03 - WordPress

Criando um novo PostCriando um novo Post

Você irá criar agora mais alguns Posts e:

utilizar as ferramentas avançadas de formatação

inserir links

inserir imagens

Page 24: aula 03 - WordPress

Criando um novo Post

Dê um clique em “Escrever” para escrever um novo Post.

Page 25: aula 03 - WordPress

Criando um novo Post

Digite um conteúdo para o seu segundo Post.

Page 26: aula 03 - WordPress

Lembrete: coloque as Tags e Categorias do Post

Já adicione as Tags e Categorias do novo Post.

Page 27: aula 03 - WordPress

Usando ferramentas de formatação avançada

Dê um clique no botão “Mostrar/ocultar opções avançadas”. Observe que aparecem novas ferramentas de formatação.

Page 28: aula 03 - WordPress

Usando ferramentas de formatação avançada

Observe o que faz cada um dos botões de formatação. Sempre que precisar, clique no botão “Ajuda”.

tipo de parágrafo ajuda

colar um texto

justificar parágrafo

escolher cor de fonte

sublinhado

colar um texto do word

remover formatação

refazer uma ação desfeita

desfazer uma ação

identar

recuar

inserir símbolo

Page 29: aula 03 - WordPress

Dica: remover formatação

Para remover a formatação, selecione o trecho que deseja limpar e clique no botão de “Remover formatação” ou clique no botão do efeito que deseja remover.

Page 30: aula 03 - WordPress

Inserindo links

Crie um novo Post e digite o seu texto. Para esta atividade, usaremos o link: www.webdemais.com.br.

Page 31: aula 03 - WordPress

Inserindo links

Selecione o texto que servirá de link e clique no botão “Inserir/editar link”.

Page 32: aula 03 - WordPress

Inserindo links

Complete a caixa com os dados do link seguindo as dicas acima. Para finalizar, dê um clique no botão “Inserir”.

digite o endereço do site, endereço completo, desde o “http://”.DICA: visite o site, selecione o endereço na barra de endereços do navegador, copie e cole nesta caixa.

escolha a janela onde será aberto o link, pode ser na mesma janela do navegador ou em uma janela nova.DICA: para links de outros, escolha janela nova, para links dentro do seu blog, escolha a mesma janela.digite o título do link.DICA: este título é por questões de acessibilidade, portanto seja claro na indicação.

esta caixa define o estilo do link, nós não iremos trabalhar com este tipo de definição.

Page 33: aula 03 - WordPress

Dica: removendo um link

Para remover um link, selecione o link e dê um clique no botão “Remover Link”.

Page 34: aula 03 - WordPress

Dica: editando um link

Para editar um link, selecione o link e dê um clique no botão “Inserir/Editar link” e aguarde a caixa de edição. Faça as alterações necessárias e clique em “Atualizar”.

Page 35: aula 03 - WordPress

Inserindo a tag “Mais” (more)

Inicie um novo Post. Esta técnica é especialmente útil para Posts longos. Escreva um primeiro parágrafo com um resumo do texto.

Page 36: aula 03 - WordPress

Inserindo a tag “Mais” (more)

Antes de continuar, pule uma linha e dê um clique no botão “Inserir a tag Mais (more)”.

Page 37: aula 03 - WordPress

Inserindo a tag “Mais” (more)

Observe que é adicionado o elemento “More”. Pule uma linha e continue a digitar o seu texto longo.

Page 38: aula 03 - WordPress

Inserindo a tag “Mais” (more)

Publique o Post e visualize o resultado no Blog. No local onde você inseriu a tag “More”, aparece “Leia o resto deste post >>”.

Page 39: aula 03 - WordPress

Inserindo imagens

Inicie um novo Post. Digite um texto qualquer ou simplesmente deixe o cursor na posição onde quer que a imagem apareça. Em seguida, clique no botão “Adicionar uma Imagem”.

Page 40: aula 03 - WordPress

Inserindo imagens

Dê um clique no botão “Escolher arquivos para fazer upload”, localize a pasta que contém sua imagem, selecione-a e clique no botão abrir.

Page 41: aula 03 - WordPress

Inserindo imagens

Aguarde até que a imagem apareça na tela para que você possa inserir as referências, seguindo o exemplo e dicas acima. Finalize com um clique no botão “Inserir no post”.

Alinhamento da imagem com relação ao texto do

Post.

É preferível que a imagem já esteja no

tamanho correto, caso não seja possível,

escolha o tamanho mais adequado.

Page 42: aula 03 - WordPress

Inserindo imagens

Publique seu Post e observe o resultado no Blog.

Page 43: aula 03 - WordPress

Capturando endereços (URL) de imagens

Para a próxima atividade, é necessário que você tenha o endereço de uma imagem publicada na Web. Escolha a imagem e copie o endereço da URL utilizando as dicas conforme seu navegador.

Internet Explorer:

• clicar com o botão direito do mouse sobre a figura escolhida,

• escolher a opção Properties (Propriedades)

•selecionar o endereço (address),

•copiar com as teclas CTRL + C.

•clicar no botão “Cancelar” (Cancel).

Page 44: aula 03 - WordPress

Capturando endereços (URL) de imagens

Copiando a URL de uma imagem no Firefox.

Firefox:

• clicar com o botão direito do mouse sobre a figura escolhida,

• escolher a opção “Copiar endereço da imagem”

Page 45: aula 03 - WordPress

Capturando endereços (URL) de imagens

Copiando a URL de uma imagem no Chrome.

Chrome:

• clicar com o botão direito do mouse sobre a figura escolhida,

• escolher a opção “Copiar URL da imagem”

Page 46: aula 03 - WordPress

Inserindo imagens da Web

Inicie um novo Post. Digite um texto qualquer ou simplesmente deixe o cursor na posição onde quer que a imagem apareça. Em seguida, clique no botão “Adicionar uma Imagem”.

Page 47: aula 03 - WordPress

Inserindo imagens da Web

Cole o endereço da URL da imagem na caixa indicada e preencha os outros dados conforme sua imagem. Finalize dando um clique no botão “Inserir no post”.

Cole o endereço da URL nesta caixa.

Campo não obrigatório. DICA: se quiser, preencha este campo com o endereço da ampliação da imagem ou o endereço do site de origem.

Page 48: aula 03 - WordPress

Inserindo imagens da Web

Publique seu Post e observe o resultado no Blog.

Page 49: aula 03 - WordPress

Gerenciando seus PostsGerenciando seus Posts

Antes de continuar a inserir elementos especiais, é muito importante aprender a gerenciar seus Posts. você pode:

editar um Post publicado

excluir um Post publicado

Page 50: aula 03 - WordPress

Gerenciando seus Posts

Dê um clique na aba “Gerenciar”.

Page 51: aula 03 - WordPress

Excluindo Posts selecionados

Dê um no Post “Hello world!”, em seguida dê um clique no botão “Excluir”.DICA: você pode selecionar vários Posts e excluir todos de uma só vez.

Page 52: aula 03 - WordPress

Editando um Post

Escolha o Post que deseja editar e dê um clique sobre o seu título.

Page 53: aula 03 - WordPress

Editando um Post

O Post escolhido é aberto e pode ter seu conteúdo alterado. Podem ser inseridas novas imagens, novos links, tags e categorias.Finalize a edição dando um clique no botão “Salvar”.

Page 54: aula 03 - WordPress

Inserindo vídeo, áudio e PDFInserindo vídeo, áudio e PDF

Você pode compartilhar outros elementos especiais em seus Posts:

vídeo

áudio

PDF

Page 55: aula 03 - WordPress

Dica: sites de vídeo e áudioDica: sites de vídeo e áudio

Na versão gratuita do WordPress você não pode fazer upload de arquivos de vídeo ou áudio, por isso é necessário publicar estes arquivos em outros sites e utilizá-los dentro do seu Blog.

Aqui estão duas sugestões de sites gratuitos:

vídeo: Youtube (http://www.youtube.com)

áudio: podOmatic (http://podomatic.com/)

Page 56: aula 03 - WordPress

Inserindo vídeos do Youtube

Inicie um novo Post. Digite um texto qualquer ou simplesmente deixe o cursor na posição onde quer que o vídeo apareça. Em seguida, clique no botão “Adicionar Vídeo”.

Page 57: aula 03 - WordPress

Dica: copie o código URL do Youtube

Em uma nova aba ou janela do navegador, visite a página do vídeo que deseja publicar no seu Blog. Selecione a URL da caixa indicada acima e copie seu conteúdo utilizando as teclas “CTRL” + “C”.

Page 58: aula 03 - WordPress

Inserindo vídeos do Youtube

Cole o conteúdo copiado utilizando as teclas “CTRL” + “V” na caixa URL (indicada acima) e finalize com um clique no botão “Inserir no post”.

Page 59: aula 03 - WordPress

Inserindo vídeos do Youtube

Este é o resultado que aparece na área de escrita do Post. Lembre-se de adicionar as Tags e Categoria. Publique-o.

Page 60: aula 03 - WordPress

Inserindo vídeos do Youtube

Este é o resultado do seu Post publicado.

Page 61: aula 03 - WordPress

Inserindo áudio (podcast) do podOmatic

Inicie um novo Post. Digite um texto qualquer ou simplesmente deixe o cursor na posição onde quer que o link para o áudio apareça. Em seguida, clique no botão “Adicionar Áudio”.

Page 62: aula 03 - WordPress

Dica: copie o código (URL) do áudio

Após publicar seu áudio no podOmatic, visualize sua página e copie o código clicando no botão “Copy link for this episode”.

Page 63: aula 03 - WordPress

Inserindo áudio (podcast) do podOmatic

Cole o código da URL onde está o áudio, acrescente um título para o seu link e finalize com um clique no botão “Inserir no post”.DICA: você pode ter o seu arquivo de áudio publicado em qualquer site público.

Page 64: aula 03 - WordPress

Inserindo áudio (podcast) do podOmatic

Este é o resultado que aparece na área de escrita do Post. Lembre-se de adicionar as Tags e Categoria. Publique-o.

Page 65: aula 03 - WordPress

Inserindo áudio (podcast) do podOmatic

Este é o resultado do seu Post publicado.

Page 66: aula 03 - WordPress

Inserindo um arquivo PDF

Inicie um novo Post. Digite um texto qualquer ou simplesmente deixe o cursor na posição onde quer que o link para o áudio apareça. Em seguida, clique no botão “Adicionar Mídia”.

Page 67: aula 03 - WordPress

Inserindo um arquivo PDF

Você pode fazer o upload de um arquivo PDF, usaremos esta opção. Dê um clique no botão “Escolher arquivos para fazer upload”.DICA: você pode usar o link que contém o arquivo, basta preencher o respectivo quadro.

Page 68: aula 03 - WordPress

Inserindo um arquivo PDF

Aguarde até que o arquivo tenha sido carregado, preencha as informações adicionais e clique em “Inserir no post”.

Page 69: aula 03 - WordPress

Inserindo um arquivo PDF

Este é o resultado que aparece na área de escrita do Post. Lembre-se de adicionar as Tags e Categoria. Publique-o.

Page 70: aula 03 - WordPress

Inserindo um arquivo PDF

Este é o resultado do seu Post publicado.

Page 71: aula 03 - WordPress

Dica: crie muitos novos PostsDica: crie muitos novos Posts

Até este ponto, você já sabe fazer usar as principais ferramentas do seu Blog para a publicação e edição de Posts. A grande dica agora é: treinar!

Crie vários Posts e vá visualizando no seu Blog.

Lembre-se de acrescentar as tags e categorias.

Faça edições e refaça quantas vezes forem necessárias.

Lembre-se dos conceitos do primeiro dia para escrever, escolher imagens etc.

Page 72: aula 03 - WordPress

Próximo encontroPróximo encontro

A primeira etapa da blogagem está concluída, mas o contato com seu visitante não termina por aí, você pode acrescentar páginas estáticas ao seu blog. Este será o tema do próximo encontro!! até lá!!