REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho

Transcrição

1 REITORA Ulrika Arns VICE-REITOR Almir Barros da Silva Santos Neto DIRETOR DO NTIC Leonardo Bidese de Pinho COORDENAÇÃO DE APOIO AO USUÁRIO Pierre Correa Martin 1

2 UNIVERSIDADE FEDERAL DO PAMPA NTIC NÚCLEO DE TECNOLOGIA DA INFORMAÇÃO E COMUNICAÇÃO MANUAL SITES UNIPAMPA Março/2015 Concepção e Desenvolvimento Allan Sampaio Pires Analista de TI Jean Samarone Almeida Ferreira Analista de TI Igor Oliveira da Fonseca Técnico em TI Maurício da Costa Corrêa Oliveira Estagiário de desenvolvimento de portais 2

3 Sumário 1. Login no painel de controle Conteúdo Organização: categorias e tags Editor de Texto Upload de mídia Menus Widgets Página inicial do site Shortcodes Instalação da agenda Google Disponibilizar vídeo Slider de imagens Referências

4 1. Login no painel de controle Para login no painel de controle do Wordpress o usuário deverá acrescentar /wp-admin no final do endereço do site (exemplo: Os usuários cadastrados deverão utilizar usuário e senha institucional para acesso. 2. Conteúdo Posts: são o conteúdo volátil do site. Cada postagem aparece na página inicial do site em ordem cronológica (a mais recente no topo do site) e possui dados próprios como título, data, hora, tags e categorias. Os posts devem ser agrupadas dentro de Categorias para organizar os assuntos do seu site. Para escrever uma postagem, vá em Painel > Posts > Adicionar Novo. Páginas: são o conteúdo estático do seu site e podem ser mostradas na barra lateral de seu site, por exemplo. Ao contrário de postagens, as páginas não podem ser agrupadas em categorias. Elas devem conter informações fixas, por exemplo, uma página Sobre com informações do site, Portifólio sobre trabalhos realizados etc. Para criar uma página, vá em Painel > Páginas > Adicionar Novo. Mídia: são arquivos de imagem, vídeo etc que podem ser enviados para o site e posteriormente utilizados em postagens ou páginas. Para enviar arquivos de mídia, vá em Painel > Mídia > Adicionar Novo. Links: é possível criar categorias de links e adicionar informações extras para cada um, como descrição, imagem etc. Para adicionar links, vá em Painel > Links > Adicionar Novo. 4

5 Para auxílio a criação do site, o WordPress possui itens de informação para organização de conteúdo que são descritas a seguir. 3. Organização: categorias e tags Categorias As postagens devem ficar em Categorias e cada categoria pode ter subcategorias. Veja um exemplo: Campus Alegrete: Graduação - Pós-graduação - Extensão Campus Bagé: Graduação - Pós-graduação - Extensão Campus Caçapava do Sul: Graduação - Pós-graduação - Extensão Observe que a subcategorias aparecem nas diferentes categorias, mas não há problema porque a categoria-mãe é diferente. Então o caminho para uma postagem será: Campus Alegrete/Graduação/Engenharia Civil Campus Bagé/Graduação/Música Tags As tags (do inglês etiquetas), servem para classificar uma postagem através de palavraschaves. Os visitante podem clicar sobre as palavras-chave para ver postagens relacionadas. Por exemplo: Campus Alegrete/Graduação/Engenharia Civil A postagem Engenharia Civil contém as matérias e informações sobre o curso além de dicas e comentários dos visitantes. Palavras-chave sobre essa postagem: calculo, geometria, algebra Então, se algum visitante quiser cursos com estas matérias, ele pode clicar no link (que os temas devem mostrar) e assim ver uma lista de postagens com esta etiqueta. Não há limite de tags que podem ser criados e usados em postagens. Enquanto se escreve postagens é possível criar tags e também através de Posts >Tags da Postagem, onde podem ser adicionados uma descrição sobre a tag. 5

6 4. Editor de Texto Título da Publicação Ferramentas já conhecidas de outros editores: Botões de negrito, itálico e riscado. Marcadores de listas e opções de alinhamento. Opções de tamanho de fonte, sublinhado, cor da fonte. Copiar/Colar. Opções Avançadas: Habilita segunda barra de ferramentas Inserir a tag Mais (para notícias): Esta opção permite que você divida o texto entre o que vai aparecer na página inicial do site e o que somente irá aparecer quando o visitante clicar na notícia. Inserir um link: Após selecionar a palavra que quer gerar um link, clique nesta opção e insira o endereço do site ou arquivo. 5. Upload de mídia No editor de texto, clique no botão Adicionar mídia logo acima da barra de ferramentas para inserir mídia ou até mesmo criar uma galeria de imagens. Na janela que abrirá poderão ser escolhidas as abas: Enviar arquivos: enviar uma imagem ou outra mídia que está no seu computador; Biblioteca de mídia: usar uma imagem ou outra mídia que já foi enviada anteriormente. 6

7 No caso de escolher Enviar arquivos, clique em Selecionar arquivos para localizar a mídia que está no seu computador e clique em abrir para enviar o arquivo. Caso a mídia seja uma imagem, você pode definir algumas características após o envio, como o título, legenda, descrição, alinhamento e o tamanho da imagem na publicação. Para isto deve-se clicar em cima da imagem e clicar no ícone de edição. Mais informações sobre adição de imagens no link: 7

8 6. Menus O Wordpress permite a construção e personalização de menus. Para isso o usuário deve ir em Aparência > Menus, escolher um nome para o novo menu e clicar no botão Criar Menu. Após esta etapa será possível criar itens, como links e páginas ou adicionar páginas e categorias existentes. Primeiramente deve ser criado o menu que será utilizado, nomeando o novo menu e logo após clicando no botão Criar menu, como pode ser observado na figura abaixo. Após esta etapa é possível criar e organizar os itens do menu. Adiciona páginas existentes no site ao menu. Adiciona links externos ao menu. Adiciona categorias existentes nos site ao menu. 8

9 Para que o menu seja exibido no site, é necessário marcar a opção Posição no Tema: Menu principal na barra lateral, nas configurações do menu. No link abaixo é possível encontrar um tutorial em vídeo que mostra a utilização de menus: arte_1) 9

10 7. Widgets Widgets são ferramentas que o tema oferece para adicionar conteúdos nos espaços laterais do site. Para adicionar widgets deve-se ir em Aparência > Widgets e arrastar as opções desejadas da seção Widgets disponíveis para o espaço da direita. Para adicionar, por exemplo, um banner à coluna direita do site, deve-se arrastar o widget Texto para Conteúdo da barra lateral, acrescentar o código HTML necessário e clicar no botão Salvar. 10

11 8. Página inicial do site Na página inicial do site é possível optar entre exibir uma página estática ou exibir as postagens recentes. Para isso, acesse o menu Configurações > Leitura e escolha entre as opções exibidas. 9. Shortcodes Um shortcode é um mecanismo que permitem a inserção de objetos de forma simples e eficiente, sem a necessidade de utilização de códigos complexos. Podem ser inseridos vídeos, áudio, imagens, formulários, documentos e outros objetos. Para colocar, por exemplo, um vídeo do YouTube de forma bastante simples, basta mudar o editor de texto do modo visual para o modo HTML ou modo texto e inserir o seguinte código com o link desejado: [youtube= A lista dos shortcodes e instruções de uso podem ser encontrados no link abaixo: 11

12 10. Instalação da agenda Google Instruções para disponibilização de agenda do gmail nos sites das pró-reitorias. No site da pró-reitoria (WordPress), criar uma página com o nome de agenda. Publicar e manter a página aberta para edição no modo HTML. Nome da página Endereço Modo HTML Acessar no Gmail as configurações da agenda que você quer disponibilizar no site. Configurações 12

13 Em Compartilhar esta agenda, alterar a forma de compartilhamento para pública. Compartilhar esta agenda Agenda pública Em Detalhes da agenda, copiar o código conforme a figura abaixo. Detalhes da agenda Copiar o código 13

14 Voltando ao site da pró-reitoria (WordPress), colar o código na página agenda, no modo HTML do editor e alterar o parâmetro de largura (width= 550 ). Editor no modo HTML Código copiado do gmail Você pode acessar o site para visualizar o resultado: 14

15 11. Disponibilizar vídeo É possível adicionar um vídeo, tanto do YouTube quando da RNP, a qualquer post, página ou widget. Para isso é preciso utilizar um shortcode, e para inserir o vídeo desejado é preciso somente alterar o embed do vídeo, destacado em negrito nos shortcodes a seguir Vídeo do YouTube Para incluir um vídeo do YouTube é preciso clicar em compartilhar > incoporar e copiar o embed do video como é possível ver na imagem abaixo (destacado em azul): Substitua o embed no shortcode a seguir no campo que está em negrito. Shortcode: [iframe width="200" height="200" src=" 2Nv4" frameborder="0" allowfullscreen] 15

16 11.2. Vídeo da RNP Para incluir um vídeo da RNP é preciso clicar em incoporar e copiar o embed, como é possível ver na imagem abaixo (destacado em azul): Figura 6- Embed do video RNP Substitua o embed no shortcode a seguir no campo que está em negrito. Shortcode: [iframe width="271" height="200" src=" iditem=22047&autostart=false" frameborder="0" scrolling="no" allowfullscreen] 16

17 11.3. Vídeo nos widgets É possível também incluir um vídeo nos widgets, utilizando um widget texto e utilizando o mesmo shortcode visto acima. A figura a seguir serve para mostrar a página de configuração dos widgets e em destaque o campo texto e o shortcode em vermelho. Figura 7- incluir vídeo no campo widget Alterar tamanho do vídeo É possível também alterar a largura do vídeo (width) e a altura do mesmo (height). Para isso basta alterar o número entre as aspas. Ambos estão destacados em negrito. [iframe width="271" height="200" src=" iditem=22047&autostart=false" frameborder="0" scrolling="no" allowfullscreen] 17

18 12. Slider de imagens Nos sites de pró-reitorias, é possível adicionar um slider horizontal de imagens para exibir galerias de banners. Para fazer isso, adicione normalmente as imagens ao seu post/página, precedidas pelo shortcode [slider] e seguidas por [/slider]. Exemplo: Para um melhor funcionamento do slider, retire todos os espaços ou quebras de linha entre as imagens. O número padrão de imagens exibidas ao mesmo tempo é 4. Para alterar esse número, utilize o atributo limit no shortcode, seguido do número de imagens desejado (mínimo 1, máximo 4). Exemplos: [slider limit=1][/slider] exibirá uma imagem por vez; [slider limit=3][/slider] exibirá três imagens por vez. 13. Referências Site Wordpress.org, consultado em maio de 2013: Site Hostnet, consultado em maio de 2013: arte_1) 18