aula 03 - WordPress

Post on 19-May-2015

2.551 views 0 download

description

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

Transcript of aula 03 - WordPress

terceiro dia

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

Neste diaNeste dia

Blogando - Posts

Escrever

Formatar

Inserir links e imagens

Gerenciar

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.

Acesse sua conta

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

Acesse a área administrativa do Blog

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

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”.

Acesse a área de inserir conteúdo

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

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.

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.

Escrevendo um Post

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

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”.

Formatando textos

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

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

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.

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.

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

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.

Publicando um post

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

Visualizando seu Post

Dê um clique no link “Ver post”.

Visualizando seu Post

Parabéns!Este é o seu primeiro Post!

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

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

Criando um novo Post

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

Criando um novo Post

Digite um conteúdo para o seu segundo Post.

Lembrete: coloque as Tags e Categorias do Post

Já adicione as Tags e Categorias do novo Post.

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.

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

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.

Inserindo links

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

Inserindo links

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

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.

Dica: removendo um link

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

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”.

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.

Inserindo a tag “Mais” (more)

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

Inserindo a tag “Mais” (more)

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

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 >>”.

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”.

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.

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.

Inserindo imagens

Publique seu Post e observe o resultado no Blog.

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).

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”

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”

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”.

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.

Inserindo imagens da Web

Publique seu Post e observe o resultado no Blog.

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

Gerenciando seus Posts

Dê um clique na aba “Gerenciar”.

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.

Editando um Post

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

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”.

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

Você pode compartilhar outros elementos especiais em seus Posts:

vídeo

áudio

PDF

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/)

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”.

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”.

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”.

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.

Inserindo vídeos do Youtube

Este é o resultado do seu Post publicado.

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”.

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”.

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.

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.

Inserindo áudio (podcast) do podOmatic

Este é o resultado do seu Post publicado.

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”.

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.

Inserindo um arquivo PDF

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

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.

Inserindo um arquivo PDF

Este é o resultado do seu Post publicado.

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.

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á!!