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

UNIVERSIDADE FEDERAL DO PAMPA

NTIC – NÚCLEO DE TECNOLOGIA DA INFORMAÇÃO E COMUNICAÇÃO

MANUAL SITES UNIPAMPA

Março/2015

Concepção e DesenvolvimentoAllan 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

Sumário

1. Login no painel de controle ................................................................................................................. 4

2. Conteúdo ..................................................................................................................................................... 4

3. Organização: categorias e tags ........................................................................................................... 5

4. Editor de Texto ........................................................................................................................................... 6

5. Upload de mídia ........................................................................................................................................ 6

6. Menus ........................................................................................................................................................... 8

7. Widgets ........................................................................................................................................................ 10

8. Página inicial do site …............................................................................................................................ 11

9. Shortcodes .................................................................................................................................................. 11

10. Instalação da agenda Google ........................................................................................................... 12

11. Disponibilizar vídeo ............................................................................................................................... 15

12. Slider de imagens .................................................................................................................................. 18

13. Referências …............................................................................................................................................ 18

3

1. Login no painel de controlePara login no painel de controle do Wordpress o usuário deverá acrescentar “/wp-admin” no final do endereço do site (exemplo: http://porteiras.s.unipampa.edu.br/endereco/wp-admin).

Os usuários cadastrados deverão utilizar usuário e senha institucional para acesso.

2. Conteúdo

4

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.

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 palavras-chaves. 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á limitede 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

4. Editor de Texto

5. Upload de mídiaNo 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

Título da Publicação

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.

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.

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: http://codex.wordpress.org/pt-br:Inserindo_Imagens_em_Posts_e_P%C3%A1ginas

7

6. Menus

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.

8

Adiciona links externos ao menu.

Adiciona páginas existentes no site ao menu.

Adiciona categorias existentes nos site ao menu.

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.

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:

http://hostnet.com.br/wiki/index.php/Criando_menus_personalizados_no_WordPress_3.0_(Parte_1)

9

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

8. Página inicial do siteNa 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. ShortcodesUm 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=http://www.youtube.com/watch?feature=player_embedded&v=Wclv8apr0I8]

A lista dos shortcodes e instruções de uso podem ser encontrados no link abaixo:

http://en.support.wordpress.com/shortcodes/

11

10. Instalação da agenda GoogleInstruçõ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.

Acessar no Gmail as configurações da agenda que você quer disponibilizar no site.

12

Nome da página

Endereço

Modo HTML

Configurações

Em “Compartilhar esta agenda”, alterar a forma de compartilhamento para “pública”.

Em “Detalhes da agenda”, copiar o código conforme a figura abaixo.

13

Agenda pública

Compartilhar esta agenda

Detalhes da agenda

Copiar o código

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

Você pode acessar o site para visualizar o resultado:

14

Editor no modo HTML

Código copiado do gmail

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

11.1. Vídeo do YouTube

Para incluir um vídeo do YouTube é preciso clicar em compartilhar > incoporar ecopiar 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="www.youtube.com/embed/HKBuTrR 2Nv4"frameborder="0" allowfullscreen]

15

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="http://video.rnp.br/portal/embed-video?idItem=22047&autostart=false" frameborder="0" scrolling="no" allowfullscreen]

16

11.3. Vídeo nos widgets

É possível também incluir um vídeo nos widgets, utilizando um widget texto eutilizando o mesmo shortcode visto acima. A figura a seguir serve para mostrar a páginade configuração dos widgets e em destaque o campo texto e o shortcode em vermelho.

Figura 7- incluir vídeo no campo widget

11.4. 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="http://video.rnp.br/portal/embed-video?idItem=22047&autostart=false" frameborder="0" scrolling="no" allowfullscreen]

17

12. Slider de imagensNos 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ênciasSite Wordpress.org, consultado em maio de 2013:

http://codex.wordpress.org/pt-br:Primeiros_Passos_com_o_WordPress

http://codex.wordpress.org/pt-br:Inserindo_Imagens_em_Posts_e_P%C3%A1ginas

http://en.support.wordpress.com/shortcodes/

Site Hostnet, consultado em maio de 2013:

http://hostnet.com.br/wiki/index.php/Criando_menus_personalizados_no_WordPress_3.0_(Parte_1)

18