Tutorial: Inserção e manutenção de conteúdos básicos no eZ Publish

Tutorial eZ Publish: Sumário

1 - Introdução2 - Autenticação no sistema3 - Criação de Menu Principal4 - Trabalhando conteúdos básicos

4 - 1 Textos simples e submenus4 - 2 Imagens, links e tabelas

5 - Notícias e artigos6 – Comunicados, documentos e galeria de imagens.7 – Formulário para sessão de contato.8 – Frontpage: a cara do site9 - Conclusão

TUTORIAL: Inserção e manutenção de conteúdos Básicos no eZ Publish.

1- INTRODUÇÃO

Visualização geral de um site utilizando o eZ Publish.

Na figura acima, temos uma visão geral de uma página inicial de um site de colegiado de curso. Alguns itens que ajudarão a compôr o “padrão” visual para os sites de setores acadêmicos da Universidade, como a barra superior do Governo Federal, o logo da Instituição, o nome da Escola e o Curso. Dessa forma, podemos construir uma identidade visual de sem prejuízo da imagem institucional da Universidade. Outras informações visuais podem ser implementadas com o acompanhamento da Prograd. Para demais modalidades, é preciso estar autenticado no sistema.

2- AUTENTICAÇÃO NO SISTEMA

Tela de login, onde usuários cadastrados deverão se autenticar para entrar no sistema e realizar modificações.

Uma vez logado, o usuário pode visualizar a Barra de Ferramentas eZ Publish:

Através dela podemos realizar várias tarefas como inserir, editar, organizar e excluir objetos dentro do site.

3- CRIAÇÃO DO MENU PRINCIPAL

A criação de um site no eZ está relacionada à inserção de objetos chamados folder ou “Item de Menu”. O conjunto de vários desses itens forma a base do site ou Menu Principal. É importante lembrar que para se adicionar um item de menu, devemos nos certificar que estamos na página principal do site (clicando no logo da Universidade, por exemplo). Se tivermos a intenção de criar um submenu, devemos estar no local onde esse submenu será criado. Ou seja, o processo consiste em criar um folder dentro de outro folder para submenu, ou dentro da página principal, para Menu Principal. Na figura abaixo, um exemplo de inserção do objeto “Item de Menu”.

Para efetuar a inserção do Item de Menu, selecione o objeto na barra de ferramentas (“menu drop down”) e depois clique em (botão “criar aqui”). Lembre-se que para inserir um submenu você deverá estar no lugar onde quer que ele seja criado.

O seguinte passo é configurar o novo folder ou Item de Menu. Na seguinte página é apresentada uma tela com os campos de edição. Apenas aqueles utilizados no curso serão comentados nesse momento. Em cada campo você encontra a descrição de suas funções.

O recomendável na construção e edição deste tipo de itens é evitar nomes muito extensos para não descuidar o aspecto visual da barra do menu principal. Também é bom lembrar que primeiramente deve-se trabalhar na organização de conteúdos, assim, podem-se delimitar os assuntos e classificá-los para uma melhor exibição e ordem. E é claro, sem perder o foco do site.

No exemplo a seguir vamos construir o site eZ Publish do colegiado de um curso da Universidade: Teatro. Como foi dito, um site desse tipo basicamente é a junção de vários itens de menu. Então, após definirmos os conteúdos a serem trabalhados e apresentados, passamos à criação de cada um deles. Uma vez efetuada a criação do menu principal, o seguinte passo será trabalhar com cada um desses itens, e, quando necessário, criar submenus para assim inserir notícias, artigos, imagens, links, tabelas, etc.

Como é possível ver, a janela de configuração de folder ou Item de Menu é interativa e fácil de usar. Uma vez preenchidos os respectivos campos (apenas alguns são obrigatórios), clique em “enviar para publicação”, para finalizar e divulgar no site. Ou “discard draft” para cancelar e sair. A opção “armazenar rascunhos” será utilizada posteriormente e serve para gerenciar a atualização e modificações de conteúdo. Em nosso modelo, criamos cinco itens de menu: Notícias, Oficinas, O Curso, O Colegiado, Formulários. Cada um foi nomeado de acordo com sua função. Finalmente temos o Menu Principal. Como somente os campos obrigatórios foram preenchidos, o nosso exemplo ficou assim:

4 – TRABALHANDO CONTEÚDOS BÁSICOS4 – 1. Textos simples e submenus.

Passamos, então, a trabalhar com cada um desses folders ou itens do menu. Clique no menu desejado, em seguida, na barra de ferramentas

eZ Publish, escolha a opção (botão “Editar”). A nova janela será igual à da página anterior. Dessa vez preenchemos os campos opcionais apenas com um texto simples:

À esquerda: O menu escolhido nesse caso foi “O Curso”. Repare que os campos Sumário e Descrição contém, cada um, as ferramentas da janela de configuração. Com elas é possível editar a fonte do texto, o alinhamento, criar links, tabelas, ou inserir imagens através de upload.À direita: resultado online após enviar para publicação.

Para exemplificar, agora vamos criar duas subpastas ou submenus dentro do menu “O Curso”. O processo é o mesmo mencionado no início da Parte 3. Certifique-se de estar no folder alvo e selecione a opção “Item de Menu” na barra de ferramentas eZ Publish. Em seguida clique em “criar aqui”. Por enquanto vamos dar somente nome às subpastas, o conteúdo será inserido depois. Em nosso modelo os nomes dados foram “a profissão” e “corpo docente”. Depois mande publicar. Repare que as subpastas devem ficar numa barra inferior ao menu principal, o que indica que estão contidas dentro de um item desse menu:

4 – 2. Imagens, Links e Tabelas.

No submenu “a profissão” será mostrada a inserção de um texto combinado a uma imagem. Selecione ele e a seguir clique no botão “editar” da barra eZ Publish. Use as ferramentas da janela de configuração para inserir texto e fazer o upload de uma imagem.

A seguir vamos criar um link

Selecione o trecho do texto que se

converterá no link, clique no botão . Uma nova janela se abrirá para inserir o endereço de redirecionamento (pode ser um local dentro do site ou fora dele). Selecione OK.Feita a combinação de texto, imagem e link, para finalizar, selecione a opção “enviar para publicação”. Veja ao lado o resultado do exemplo citado:

Para criar uma tabela, nas ferramentas da janela de configuração, selecione o botão (“inserts a new table”). Configure a nova janela de acordo ao número de colunas e linhas. As demais opções podem ser preenchidas de acordo com a primeira imagem:

Depois preencha cada cédula da tabela com as informações convenientes e envie para publicar. Nosso modelo foi criado no submenu corpo docente, como pode ser visto na imagem da direita, e apresenta uma tabela simples 3 x 7.

5 – NOTÍCIAS E ARTIGOS

Selecione o local onde serão postadas as notícias ou artigos (em nosso caso, o item do menu principal chamado “Notícias”). Na barra de ferramentas eZ Publish escolha a opção “Notícias” ou “Article – main page”. Clique em “criar aqui” e edite a janela de configuração.

Ao preencher esses campos não esqueça que a parte “sumário” é a apresentação do artigo, a página do menu apenas mostrará esse trecho. Por sua vez, o conteúdo da parte “corpo” será visivel apenas quando o artigo for acessado por meio de um clique no título ou nome. Outras novidades dessa janela de configuração são a opção de autor, a possibilidade de habilitar comentários do leitor, e a parte de carregamento de imagens. Não são campos obrigatórios, mas aumentam a interface do site e o diálogo com o público. Por outro lado, o item para carregar imagens é importante para a parte visual da página e para construir frontpages, como será visto adiante.

Publique várias notícias para assim criar um miniportal ou uma lista delas. Além disso, atualize sempre que possível com novo conteúdo, isso dará mais dinamismo e credibilidade ao site. Após criarmos várias noticias é possivel organizá-las numa lista de itens ou enquadrá-las em tabelas. No primeiro caso, a ordem de disposição no menu (por data, nome ou autor) pode ser alterada selecionando o botão “sorting” da barra de ferramentas eZ Publish. O segundo caso é mais complexo, pois requer a criação de uma lista normal de artigos como no primeiro caso. Depois requer a edição do item de menu para inserir uma tabela. Utilizando as ferramentas da janela de configuração, preencha cada cédula dessa tabela com o título, as imagens e/ou apresentações dos artigos. Em cada título, crie um link interno que direcione diretamente a cada um desses artigos. Por fim, desabilite a opção “mostrar sub-itens” e mande publicar. Isso vai ocultar a lista de artigos e mostrar somente a tabela.

Veja os exemplos da disposição em lista ou em tabela:

Como é visto, apenas os sumários são visualizados. Eles devem conter trechos curtos e chamativos, inspirados no modelo jornalístico para facilitar buscas e evitar que a página seja sobrecarregada de textos. Para acessar o artigo ou notícia na íntegra (sumário e corpo), o leitor pode simplesmente clicar no título e obter mais informações.6 – COMUNICADOS, DOCUMENTOS E GALERIA DE IMAGENS.

O site em questão, por ser de cunho acadêmico, deve disponiblizar documentos ou divulgar comunicados constantemente. O eZ publish oferece a opção “Documento de página” ou “Documentation page” na barra de ferramentas para facilitar esse trabalho. Uma vez no local

onde isso será publicado, selecione esse objeto e clique em “adicionar aqui”.

Edite segundo suas preferências e mande publicar. Apenas o título do documento será visualizado na pagina do item de menu, para acessar o documento , basta clicar no título e ler o corpo.

Para criar uma galeria, selecione a pasta ou folder onde ela será publicada. Escolha a opção “galeria” ou “gallery” na barra de ferramentas do eZ Publish e mande criar. Na janela de configuração

preencha os campos de título e pequena descrição. Adicione imagens que já estejam vinculadas ao site e mande publicar. Caso deseje carregar imagens externas (upload), acesse o local da galeria, escolha a opção “Imagem” ou “image” da barra de ferramentas do eZ, crie, envie e publique. Adicionando várias imagens ou fotos você terá sua galeria completa.

7 – FORMULÁRIO PARA SESSÃO DE CONTATO.

Na tentativa de aumentar a interação com nossos usuários, vamos criar uma sessão de contato. Nele, serão disponibilizadas informações extras e um formulário para tirar dúvidas. Para isso vamos criar um item do menu principal chamado “Contato”. Clique no logo do site para ir à página principal. Na barra do eZ selecione “Formulário” e “criar aqui”. A nova janela de configuração deve constar de três partes: nome, descrição e um formulário padrão de contato. Nomeie como foi sugerido, insira informações complementares na descrição (tais como email, endereço, telefone, etc), verifique os dados do formulário e mande publicar. Nosso exemplo pode ser visto a seguir. Repare que o conteúdo da nova sessão está contido num item do menu principal:

Outros tipos de formulários podem ser requisitados com a equipe técnica do Prograd-UFMG. 8 – FRONTPAGE: A CARA DO SITE

Chegamos à parte final das ferramentas ministradas nesse tutorial: a página principal ou frontpage. Ela é muito importante pois é a cara do nosso website.Por ser basicamente uma janela de redirecionamento interna, nela são exibidas as publicações mais recentes, o conteúdo mais relevante e os atalhos para aplicativos já existentes em outros folders ou menus. Tudo depende de como ela será configurada, pois além de facilitar a disposição de conteúdos ela constitui a primeira impressão do aspecto visual que o usuário faz do site. O frontpage pode ser criado selecionando a opção de mesmo nome na barra de ferramentas do eZ Publish. No entanto, a maioria dos sites com esta plataforma já vem com uma frontpage na página principal. Ou seja, em vez de criá-la, basta editá-la. Clique no logo do site para ir à pagina principal. A janela deve estar vazia, ou então deve ser similar à primeira imagem mostrada na introdução do nosso tutorial. A seguir, selecione a opção “Edit” ou “editar” na barra de ferramentas do eZ. A janela de configuração que se abrirá é diferente das anteriores:

A área superior permite escolher cinco tipos de layout. Isto é, a pré-visualização da distribuição dos elementos a serem inseridos em nossa página principal. Por exemplo, se escolhermos a primeira opção (de 2 zones ou 2 colunas) teremos duas áreas principais, uma coluna principal na direita e outra na esquerda, onde serão inseridos os blocos de conteúdo da frontpage.A área inferior permite trabalhar cada uma das áreas (zones) estabelecidas pelo layout. No exemplo mostrado temos as abas do Left zone ou da esquerda e do Right zone ou da direita. Em cada zone é possivel escolher o tipo de bloco e adicioná-lo (botão “Block type” e “Add block”, respectivamente). As opções de bloco são as seguintes:

Somente trataremos de algumas:As opções de 2 a 5 Items ou Item list servem para criar um bloco que contenha uma lista com um número específico de itens (atalhos para menus, submenus, artigos, formulários, etc). A opção gallery ou video insere um bloco que exibirá uma amostra de uma galeria do site, ou então de um video que já tenha sido postado (o video não deve ser longo, e deve estar no formato FLV ou flash). A opção Main Story é a

manchete do nosso site, a informação destaque que ocupará uma área maior da frontpage. Recomenda- se que seja a notícia do momento, constituída de corpo e imagem de boa resolução (para ver como criar um artigo ou notícia desse tipo consulte a parte 5). A opção Tag Cloud exibirá um “mais buscadas” com as palavras chave ou tags indicadas em cada janela de configuração (ver imagem da janela de configuração da parte 3).

Por fim, a opção Poll permitirá visualizar, ainda na página principal, uma enquete ou pesquisa de opinião que já tenha sido criada no site. A barra de ferramentas do eZ tem as opções “Pesquisa” ou “poll” para postar esses recursos.Para exemplificar, vamos escolher e adicionar um bloco do tipo Main Story na zone da esquerda. A seguir escolhemos e adicionamos outro bloco do tipo 2 Items. Clique em “expand” para abrir e editar cada bloco. Após dar os nomes clique em “Add Item” para navegar nas pastas do site e selecionar cada conteúdo a ser mostrado no respectivo bloco. Em nosso modelo, para Main Story, foi selecionada a última publicação com imagem do menu “Notícias”. Para o bloco 2 Items, mandaremos selecionar dois outros artigos adjacentes. Também é possível remover itens que já estejam numa frontpage. Basta selecionar o item e clicar em “Remove Selected”. As imagens a seguir mostram os items nos blocos mencionados e o resultado parcial de nossa frontpage após enviar para publicação.

Repare que, na última imagem, apenas o campo da esquerda da página principal exibe informações. Isso se deve ao fato de apenas a coluna da esquerda do layout ter sido editada. Agora vamos para a coluna da direita. Na barra eZ da página clicamos em “edit” e depois abrimos a aba Right Zone da frontpage. Ali vamos inserir blocos do tipo Item List, Tag Cloud e Poll. Uma vez adicionados os itens ou pastas do primeiro bloco, nomeamos os outros blocos e os direcionamos através do botão “Choose source” às pastas especificas (lembrando que a função poll só será visível se já tivermos uma pesquisa ou enquete publicada no site). Finalmente enviamos para publicar e temos o resultado de nossa frontpage:

Veja outros exemplos, implantados com apoio da Prograd e administrados por outros cursos e colegiados, que tem como base a plataforma eZ:

9 – CONCLUSÃO

O foco deste tutorial consiste em ajudar o usuário a se familiarizar com conceitos básicos da plataforma eZ Publish. Tais como inserção e manutenção de conteúdos básicos, menus, submenus, elementos gráficos, artigos, e frontpages. Tudo isso a partir de uma barra de ferramentas de fácil uso e acesso, que permite criar, editar, excluir, mover e gerenciar os conteúdos do site.É importante lembrar ainda, que a manutenção de um site requer acompanhamento constante de modo a oferecer ao usuário facilidade de acesso, interatividade e clareza nas informações. O material apresentado deve servir como apoio nessas tarefas. Para suporte adicional ou maior treinamento, tanto para criar e administrar websites, entre em contato com a equipe técnica do Prograd-UFMG. Nosso núcleo tem o objetivo de facilitar a comunicação entre os diversos sites de cursos e colegiados da Universidade, bem como promover a relação entre a Instituição, os professores e alunos.

Desenvolvimento Sistema de Sites ProGrad/ColegiadosPró-Reitoria de Graduação - Cecom - Cedecom

Pró-Reitora: Antônia Vitória Soares AranhaPró-Reitora Adjunta: Carmela Maria Polito Braga(Coordenação do Projeto)

Leopoldo Mendonça (Desenvolvimento, Templates, Layouts e Arquitetura de Informações)

Ana Carolina Beltrão (Jornalista) Tales Railton (Conteúdos, Atendimento aos Colegiados)Pedro Souza (Programação)

Apostila feita por Jaseff RazielJulho 2010

Mais Informações:http://www2.ufmg.br/prograd/prograd/Pro-Reitoria-de-Graduacao/Pro-Reitoria/Inovacao/Web-ProGrad

(31) 3409-6451