Como criar e editar Blogs Manual Básico do Mario Roberto Barro Jerino Queiroz Ferreira Profª Drª Salete Linhares Queiroz São Carlos Setembro / 2008
Sumário Introdução...3 Criando um Blog no Edublogs...4 Visualizando o Blog...8 Criando um Artigo (Post) ou uma Página...12 Escrevendo um Artigo...13 Visualizando Artigos...15 Editando Artigos...16 Criando Páginas...18 Visualizando Páginas...18 Editando Páginas...19 Adicionando ligações (links) em um Artigo ou uma Página...21 Criando Categorias...22 Atribuindo Categorias a um Artigo...23 Adicionando Hiperligações ou ligações (Hyperlinks ou Links) na barra de navegação do Blog...24 Mudando a Apresentação (Tema)...26 Personalizando a imagem do cabeçalho do Blog...27 Adicionando imagens no Blog...28 2
Introdução O Edublogs 1 é uma ferramenta da internet que atualmente hospeda centenas de milhares de blogs de professores, estudantes, pesquisadores, bibliotecários, administradores e outros intervenientes no processo educativo. Este serviço é oferecido gratuitamente e disponibiliza ao usuário um blog da plataforma WordPress 2 contendo 100 MB de espaço livre para armazenamento de arquivos, além de vários outros recursos tecnológicos e pedagógicos que o diferencia dos demais serviços encontrados na internet. O objetivo deste material é ilustrar passo a passo a criação e edição de blogs no Edublogs. 1 Edublogs http://edublogs.org 2 WordPress http://www.wordpress.com 3
Criando um Blog no Edublogs Abra seu navegador da internet e digite o seguinte endereço: http://edublogs.org. Figura 1: Interface do Navegador Internet Explorer. Após carregar a página inicial do sítio do Edublogs, clique no texto Registre-se aqui (SIGN UP HERE), apontado pela seta vermelha na Figura 2. Figura 2: Página inicial do sítio do Edublogs. 4
Após clicar, aparecerá a página abaixo: Figura 3: Página do formulário para registro de usuário no Edublogs. Escolha um Nome de Utilizador (Username), coloque seu Endereço de E-mail (E-mail Address), leia as condições de uso e marque a caixa de opção Concordo (I Agree). Abaixo marque a opção Dê-me um blog (Gimme a blog!). Após preencher, clique no botão Próximo (Next), apontado pela seta vermelha na Figura 4. Figura 4: Página do formulário de registro preenchido. 5
Após clicar, aparecerá a seguinte página: Figura 5: Página do formulário de escolha de domínio, título, privacidade, tipo e linguagem do blog. Repare que o seu Nome de Utilizador (Username) é utilizado pelo sistema como o Endereço de Domínio do seu Blog (Blog Domain), recomenda-se não alterar (neste caso, repare que os pontos sumiram, pois para o domínio são válidos somente os caracteres de letras e/ou números tivemos que retirar os pontos). Coloque o Título do seu Blog (Blog Title). Em um blog pessoal, recomenda-se utilizar o seu nome. Em um blog de grupo de alunos, recomenda-se seguir o modelo do seguinte exemplo. Ex: Grupo 01 Turma 1. Em Privacidade (Privacy), escolha se pretende tornar ou não seu blog público. Em Tipo de Blog (Blog Type), selecione entre Professor (Teacher), Estudante (Student) ou Outro (Other). Em Linguagem (Language), observe que o idioma português já está disponível. Portanto, selecione Português (Portuguese). Observe como foi realizado o preenchimento desses dados na Figura 6. Em seguida, clique em Assine (Signup), apontado pela seta vermelha na Figura 6. 6
Figura 6: Página do formulário de escolha de domínio, título, privacidade, tipo e linguagem do blog preenchida. Após clicar, aparecerá a seguinte mensagem: Figura 7: Mensagem de que seu blog está quase pronto. Parabéns! Seu novo blog, Trabalhando com Edublogs, está quase pronto! Nesse momento, uma mensagem automática foi enviada para seu E-mail (a mensagem pode demorar alguns minutos para chegar em seu E-mail). Figura 8: Recebimento da mensagem enviada para ativação do blog. Para ativar seu blog, clique no link da mensagem enviada, apontado pela seta vermelha na Figura 9. 7
Figura 9: Mensagem recebida para ativação do blog. Após clicar, aparecerá o seguinte aviso: Figura 10: Aviso de que sua conta está ativa. Enquanto o aviso da figura 10 se abre em outra janela, outro E-mail é enviado para você contendo sua Senha e Nome de Utilizador. Para que não se esqueça, copie e guarde a Senha e Nome de Utilizador que aparecem na tela de aviso. Seu blog está pronto! Visualizando o Blog Para visitar seu blog, clique no primeiro link da mensagem recebida em seu E-mail (Figura 11). Para entrar e administrar seu blog, clique no link Login Here (Figura 11). 8
Figura 11: Mensagem de E-mail contendo links para visualização e administração do blog. O primeiro link te levará ao layout do seu blog (maneira como será apresentado aos visitantes). Veja na figura abaixo: Figura 12: Layout inicial do blog. 9
Este é o layout padrão do blog criado (visualização para visitantes). O segundo link te levará para a área de administração do seu blog, na qual poderá escrever seus textos e configurar (administrar) todo o blog. Antes de administrar o blog, aparecerá uma caixa pedindo para fazer o Log In no sistema! (a) (b) Figura 13: (a) Caixa para fazer o Log In no sistema. (b) Caixa para fazer o Log In no sistema preenchida. Digite seu Nome de Utilizador e Senha. Clique em Log In. Toda vez que for administrar seu blog (editar, postar ) será necessário fazer o Log In no sistema! Para fazer o Log In no sistema sem utilizar o link enviado no seu E-mail, entre no endereço do seu blog no navegador web (no nosso caso: http://trabalhandocomedublogs.edublogs.org), após carregar a página inicial do seu blog, localize e clique em Log In (Figura 14). 10
Figura 14: Layout inicial do blog. Clicando em Log In na pagina inicial do seu blog, aparecerá uma caixa para fazer o Log In no sistema (Figura 13). Após ter feito o Log In, será aberto o Painel de Administração (Figura 15). 11
Figura 15: Painel de administração do blog. No topo da tela do painel de administração se encontra um menu com várias opções: Escrever, Gerir, Design, Comments, Upgrades (Figura 15). Observe que existem dois tipos de visualização nos Edublogs: a visualização para visitantes e a visualização para administrador (escritor), a qual necessita da Nome de Utilizador e Senha. Criando um Artigo (Post) ou uma Página Para escrever a sua primeira mensagem ou postagem, clique no menu Escrever (Figura 16). 12
Figura 16: Opções do Painel de Administração do blog. Observe que existem duas formas de inserir conteúdo em um blog: 1) Escrever um Artigo (Post); 2) Escrever uma Página. Os artigos (Posts) são postagens ou mensagens que serão exibidas no blog em ordem cronológica inversa, ou seja, a última mensagem será exibida primeiro e assim por diante, uma após a outra, em uma mesma página. Este tipo de postagem é mais utilizado para inserção de conteúdos dinâmicos, como notícias ou diários. As páginas são postagens ou mensagens que serão exibidas individualmente, como qualquer outra página da internet. O blog exibirá apenas os links que levarão a estas páginas individuais. Este tipo de postagem é mais utilizado para inserção de conteúdos estáticos, como uma página sobre o autor do blog ou páginas de instruções e/ou materiais para seus alunos. Escrevendo um Artigo (Post) Para escrever um Artigo (Post), clique em Artigo (Figura 16). Após clicar, será aberto o editor de Artigos (Figura 18). A Figura 17 ilustra a barra de formatação do editor de mensagens, clique no local indicado pela seta vermelha para observar todas as opções disponíveis. Figura 17: Barra de formatação do editor de mensagens do blog. 13
Figura 18: Editor para escrever um Artigo no blog. Dê um Título ao seu Artigo, adicione o seu conteúdo no editor, e clique no botão Publicar (Figura 19). Figura 19: Editor de Artigo com indicação do título, conteúdo e botão publicar no blog. 14
Visualizando Artigos Após ter publicado seu Artigo, clique em Visite o Sítio (Visit Site) localizado na parte superior da tela do editor de Artigos (Figura 20). Figura 20: Parte da tela do editor de Artigos contendo o botão para visualização. Após clicar no botão para visualização do Artigo no blog, será carregada a página inicial contendo o Artigo no topo da página (Figura 21). Figura 21: Página inicial do blog contendo o Artigo publicado anteriormente. 15
Editando Artigos Para editar qualquer Artigo (Post), retorne ao Painel de Administração. Se não estiver logado no sistema, faça o Log In (Figuras 13 e 14). Se estiver logado no sistema, basta procurar pelo link Administração na página de visualização do blog (Figura 22). Figura 22: Meta Parte da página de visualização do blog que contém o link para Administração. (Figura 15). Após clicar em Administração, será aberto o Painel de Administração No Painel de Administração, clique em Gerir no menu do topo (Figura 23). Figura 23: Opções do Painel de Administração do blog. Observe na Figura acima que foram abertas opções para editar várias partes do seu blog. Clique em Artigos, será aberta uma lista com o título de todos os artigos postados no blog, escolha e clique sobre o título do Artigo que pretende editar (Figura 24). 16
Figura 24: Lista de Artigos publicados no blog. Será aberta a tela do Editor de Artigos preenchido com o título e conteúdo do Artigo escolhido para ser editado. Faça as alterações e clique em Guardar, conforme indicado na figura abaixo: Figura 25: Editor de Artigo para alteração do título e/ou conteúdo com botão guardar no blog. Após Guardar (Salvar), visualize seu Artigo novamente (Figuras 20 e 21). 17
Criando Páginas Para escrever uma Página, clique em Página (Figura 16). Após clicar, será aberto o editor de Páginas. Insira um título e o conteúdo da sua Página e clique em Publicar (Figura 26). Observe que o editor de Páginas é praticamente o mesmo editor utilizado para publicação de Artigos (Figura 18), porém o conteúdo de sua Página será publicado no local destinado a este tipo de postagem. Fique sempre atento em qual editor você está trabalhando! Figura 26: Editor para escrever uma Página no blog. Visualizando Páginas Após ter publicado sua Página, clique em Visite o Sítio (Visit Site) localizado na parte superior da tela do editor de Páginas (topo da Figura 26). 18
Após clicar no botão para visualização da Página no blog, será carregada a página inicial contendo um link para a Página publicada no topo (Figura 27). Ao clicar no link aparecerá o corpo da mensagem publicada. Figura 27: Página inicial do blog contendo um link para a Página publicada anteriormente. Editando Páginas Para editar qualquer Página, retorne ao Painel de Administração. Se não estiver logado no sistema, faça o Log In (Figuras 13 e 14). Se estiver logado no sistema, basta procurar pelo link Administração na página de visualização do blog (Figura 22). Após clicar em Administração, será aberto o Painel de Administração (Figura 15). No Painel de Administração, clique em Gerir > Páginas no menu do topo (Figura 28). Figura 28: Opções do Painel de Administração do blog. 19
Será aberta uma lista com o título de todas as Páginas postadas no blog, escolha e clique sobre o título da Página que pretende editar (Figura 29). Figura 29: Lista com as Páginas publicadas no blog. Será aberta a tela do Editor de Páginas preenchido com o título e conteúdo da Página escolhida para ser editado. Faça as alterações e clique em Guardar, conforme indicado na figura abaixo: Figura 30: Editor de Página para alteração do título e/ou conteúdo com botão guardar no blog. 20
Após Guardar (Salvar), visualize sua Página novamente (Figuras 26 e 27). Adicionando ligações (links) em um Artigo ou uma Página As postagens feitas em blogs muitas vezes incluem ligações (links), que levam seus leitores a outros blogs, sítios, ou mesmo para outra área dentro do seu blog. Para criar um link do seu blog para o blog do Grupo de Pesquisa em Ensino de Química (GPEQ), por exemplo, comece por selecionar a palavra ou frase que deseja transformar em link. A partir da barra de formatação, clique no ícone com a imagem de um elo de corrente (Figura 31). Figura 31: Editor de Artigo mostrando como inserir um link no blog. Após clicar no ícone, aparecerá a seguinte janela: Figura 32: Janela para inserir / editar links. 21
Insira o endereço URL, para o nosso exemplo utilizamos o endereço do GPEQ (http://www.iqsc.usp.br/pesquisa/ensinoquimica). Escolha o Alvo, ou seja, se o link será aberto em nova janela ou na mesma janela. Após fazer estas configurações, clique em Inserir (Figura 32). As próximas figuras mostram como ficou o link no editor de texto e na mensagem. Figura 33: Editor de Artigo como um link. Figura 34: Artigo postado como um link. Criando Categorias As Categorias tornam possível reorganizar as suas postagens cronológicas (artigos posts), de acordo com temas ou assuntos. Para definir categorias para o seu blog, clique em Gerir > Categorias no Painel de Administração (Figura 35). Figura 35: Opções do Painel de Administração do blog. 22
Desloque-se para a caixa Adicionar Categoria, digite sua nova categoria, digite a descrição da categoria e clique no botão Adicionar Categorias (Figura 36). Figura 36: Caixa para Adicionar Categorias. Após clicar em Adicionar Categorias, observe que a categoria foi adicionada na lista de categorias (Figura 37). Figura 37: Lista de Categorias. Atribuindo Categorias a um Artigo Para atribuir Categorias, após escrever ou editar um Artigo desloque-se para a caixa Categorias, abaixo do editor de mensagens e clique na categoria desejada. Você pode atribuir um Artigo em várias categorias, se assim desejar. Observe na figura abaixo que a categoria anteriormente criada se encontra disponível para ser atribuída. 23
Figura 38: Caixa de Categorias localizada abaixo do editor de Artigos. Adicionando Hiperligações ou ligações (Hyperlinks ou Links) na barra de navegação do Blog Para adicionar uma hiperligação (hyperlink) na barra de navegação do blog, clique em Gerir > Hiperligações no Painel de Administração (Figura 39). Figura 39: Opções do Painel de Administração do blog. Após clicar, aparecerá a tela abaixo (Figura 40). Clique em Adicionar Novo (Add New). Figura 40: Lista de Links. Após clicar, aparecerá a tela abaixo (Figura 41). 24
Adicione o nome do hyperlink (é o nome que os leitores verão quando visualizar seu barra de navegação). Digite ou copie e cole o endereço URL (http://www...). Digite uma descrição. Nas opções avançadas (Advanced Options) selecione a forma como este hyperlink será aberto no navegador do leitor (a opção _blank serve o endereço ligado seja aberto em outra janela no navegador do leitor). Clique no botão Guardar. Figura 41: Caixa para adição de hyperlinks. Visualize o blog e encontre na Categoria Padrão (BLOGROLL) o hyperlink adicionado (Figura 42). Figura 42: BLOGROLL 25
Mudando a Apresentação (Tema) Para mudar o tema do blog, clique em Design > Temas no Painel de Administração (Figura 43). Figura 43: Opções do Painel de Administração do blog. 44). Após clicar, aparecerão na tela vários temas. Escolha e clique tema. Após clicar, o tema atual é automaticamente substituído pelo novo (Figura Basta visualizar o blog para perceber a modificação. Figura 44: Tema anterior (atrás) e tema atual (na frente). 26
Observe a figura 44 e veja que o tema atual é menos poluído visualmente que o tema anterior. Este novo tema permite personalizar a figura do cabeçalho. Personalizando a imagem do cabeçalho do Blog 45). Alguns temas permitem a personalização da imagem do cabeçalho do blog. Para tanto, basta clicar em Cabeçalho de Imagem Personalizado (Figura Figura 45: Opções do Painel de Administração do blog. Observação: Se o tema não possuir esta opção, não será possível personalizar a imagem do cabeçalho. Após clicar, aparecerá o campo abaixo para enviar uma nova imagem. Figura 46: Campo para envio de nova imagem de cabeçalho para o blog. Siga as recomendações dadas neste campo e clique em Procurar... (para localizar a imagem no seu computador). Depois de localizada a imagem, clique em Enviar (Figura 46). Basta visualizar o blog para perceber a modificação. Observe a figura abaixo e percebam que a modificação da imagem do cabeçalho mudou a aparência do blog, deixando-o personalizado (compare a figura 44 com a 47). 27
Figura 47: Aparência do blog após mudança da imagem do cabeçalho. Adicionando imagens no Blog As imagens podem ser adicionadas em Artigos ou Páginas do blog. No exemplo a seguir, a imagem será adicionada no corpo de um Artigo. Figura 48: Adicionando imagem no corpo do Artigo. Clique no ícone indicado pela seta vermelha na figura 48. 28
Após clicar, aparecerá a seguinte janela: Figura 49: Adicionando imagem no corpo do Artigo. Clique em Escolha o arquivo (Choose files to upload), encontre o arquivo da imagem em seu computador e clique em Abrir. Após clicar, aparecerá um formulário para preenchimento dos dados referentes à imagem adicionada: Figura 50: Formulário para preenchimento dos dados referentes à imagem adicionada. 29
Para inserir a imagem no corpo do Artigo, clique em Inserir no Artigo (Insert into Post) de acordo com a seta vermelha na imagem anterior. Após clicar, a imagem é inserida no corpo do editor do Artigo (Figura 51). Figura 51: Corpo do editor de Artigo com a imagem adicionada. Após a adição de imagem no editor, clique em Publicar (Figura 51). Basta visualizar o blog para confirmar a publicação do Artigo com a imagem (Figura 52). Figura 52: Corpo do editor de Artigo com a imagem adicionada. 30