Apostila Ez

8/18/2019 Apostila Ez

1/18

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


2/18

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 site

9 - Conclusão


3/18

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

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 umsite 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 umaidentidade visual de sem prejuízo da imagem institucional daUniversidade. Outras informações visuais podem ser implementadascom 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 paraentrar no sistema e realizar modificações.


4/18

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

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 objetoschamados folder ou “Item de Menu”. O conjunto de vários dessesitens forma a base do site ou Menu Principal. É importante lembrarque para se adicionar um item de menu, devemos nos certificar queestamos na página principal do site (clicando no logo da Universidade,

por exemplo). Se tivermos a intenção de criar um submenu, devemosestar no local onde esse submenu será criado. Ou seja, o processoconsiste 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. Naseguinte página é apresentada uma tela com os campos de edição.Apenas aqueles utilizados no curso serão comentados nessemomento. Em cada campo você encontra a descrição de suas funções.


5/18

O recomendável na construção e edição deste tipo de itens é evitarnomes muito extensos para não descuidar o aspecto visual da barrado menu principal. Também é bom lembrar que primeiramente deve-se trabalhar na organização de conteúdos, assim, podem-se delimitaros 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 deum curso da Universidade: Teatro. Como foi dito, um site desse tipobasicamente é a junção de vários itens de menu. Então, apósdefinirmos os conteúdos a serem trabalhados e apresentados,passamos à criação de cada um deles. Uma vez efetuada a criação domenu principal, o seguinte passo será trabalhar com cada um dessesitens, e, quando necessário, criar submenus para assim inserirnotícias, artigos, imagens, links, tabelas, etc.


6/18

Como é possível ver, a janela de configuração de folder ou Item deMenu é interativa e fácil de usar. Uma vez preenchidos os respectivoscampos (apenas alguns são obrigatórios), clique em “enviar parapublicação”, para finalizar e divulgar no site. Ou “discard draft” paracancelar e sair. A opção “armazenar rascunhos” será utilizadaposteriormente e serve para gerenciar a atualização e modificações de

conteúdo.Em nosso modelo, criamos cinco itens de menu: Notícias, Oficinas, OCurso, O Colegiado, Formulários. Cada um foi nomeado de acordocom sua função.Finalmente temos o Menu Principal. Como somente os camposobrigató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 camposopcionais apenas com um texto simples:


7/18

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

Para exemplificar, agora vamos criar duas subpastas ou submenusdentro do menu “O Curso”. O processo é o mesmo mencionado noinício da Parte 3. Certifique-se de estar no folder alvo e selecione aopção “Item de Menu” na barra de ferramentas eZ Publish. Em seguidaclique em “criar aqui”. Por enquanto vamos dar somente nome àssubpastas, o conteúdo será inserido depois. Em nosso modelo osnomes dados foram “a profissão” e “corpo docente”. Depois mandepublicar. Repare que as subpastas devem ficar numa barra inferior aomenu principal, o que indica que estão contidas dentro de um itemdesse menu:

4 – 2. Imagens, Links e Tabelas.

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


8/18

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 oendereço de redirecionamento (pode serum local dentro do site ou fora dele).Selecione OK.

Feita a combinação de texto, imagem elink, para finalizar, selecione a opção“enviar para publicação”. Veja ao lado oresultado 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 podemser preenchidas de acordo com a primeira imagem:


9/18

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

5 – NOTÍCIAS E ARTIGOS

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

Ao preencher esses campos não esqueça que a parte “sumário” é aapresentação do artigo, a página do menu apenas mostrará essetrecho. Por sua vez, o conteúdo da parte “corpo” será visivel apenasquando o artigo for acessado por meio de um clique no título ounome. Outras novidades dessa janela de configuração são a opção deautor, a possibilidade de habilitar comentários do leitor, e a parte decarregamento de imagens. Não são campos obrigatórios, masaumentam a interface do site e o diálogo com o público. Por outrolado, o item para carregar imagens é importante para a parte visual da

página e para construir frontpages, como será visto adiante.


10/18

Publique várias notícias para assim criar um miniportal ou uma listadelas. 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 deitens ou enquadrá-las em tabelas. No primeiro caso, a ordem dedisposição no menu (por data, nome ou autor) pode ser alteradaselecionando o botão “sorting” da barra de ferramentas eZ Publish. Osegundo caso é mais complexo, pois requer a criação de uma listanormal de artigos como no primeiro caso. Depois requer a edição doitem de menu para inserir uma tabela. Utilizando as ferramentas da

janela de configuração, preencha cada cédula dessa tabela com otítulo, as imagens e/ou apresentações dos artigos. Em cada título, crieum link interno que direcione diretamente a cada um desses artigos.Por fim, desabilite a opção “mostrar sub-itens” e mande publicar. Issovai 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 contertrechos curtos e chamativos, inspirados no modelo jornalístico parafacilitar 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 leitorpode 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 disponiblizardocumentos ou divulgar comunicados constantemente. O eZ publishoferece a opção “Documento de página” ou “Documentation page” na

barra de ferramentas para facilitar esse trabalho. Uma vez no local


11/18

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

Edite segundo suaspreferências emande publicar.Apenas o título do

documento serávisualizado napagina do item demenu, para acessaro documento , bastaclicar no título e lero corpo.

Para criar uma galeria, selecione a pasta ou folder onde ela será

publicada. Escolha a opção “galeria” ou “gallery” na barra deferramentas do eZ Publish e mande criar. Na janela de configuração


12/18


13/18

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

Chegamos à parte final das ferramentas ministradas nesse tutorial: apágina principal ou frontpage. Ela é muito importante pois é a cara donosso website.Por ser basicamente uma janela de redirecionamento interna, nela sãoexibidas as publicações mais recentes, o conteúdo mais relevante e osatalhos para aplicativos já existentes em outros folders ou menus.Tudo depende de como ela será configurada, pois além de facilitar adisposição de conteúdos ela constitui a primeira impressão do aspectovisual que o usuário faz do site.O frontpage pode ser criado selecionando a opção de mesmo nome nabarra de ferramentas do eZ Publish. No entanto, a maioria dos sitescom 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 estarvazia, ou então deve ser similar à primeira imagem mostrada naintrodução do nosso tutorial. A seguir, selecione a opção “Edit” ou“editar” na barra de ferramentas do eZ. A janela de configuração quese abrirá é diferente das anteriores:


14/18

A área superior permite escolher cinco tipos de layout. Isto é, a pré-visualização da distribuição dos elementos a serem inseridos emnossa página principal. Por exemplo, se escolhermos a primeira opção(de 2 zones ou 2 colunas) teremos duas áreas principais, uma colunaprincipal na direita e outra na esquerda, onde serão inseridos osblocos de conteúdo da frontpage.A área inferior permite trabalhar cada uma das áreas (zones)estabelecidas pelo layout. No exemplo mostrado temos as abas doLeft 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 dealgumas:As opções de 2 a 5 Items ouItem list servem para criar um

bloco que contenha uma listacom um número específico deitens (atalhos para menus,submenus, artigos,formulários, etc).A opção gallery ou videoinsere um bloco que exibiráuma amostra de uma galeriado site, ou então de um videoque já tenha sido postado (o

video não deve ser longo, edeve estar no formato FLV ouflash).A opção Main Story é a

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

janela de configuração da parte 3).


15/18

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” parapostar esses recursos.Para exemplificar, vamos escolher e adicionar um bloco do tipo MainStory na zone da esquerda. A seguir escolhemos e adicionamos outrobloco do tipo 2 Items. Clique em “expand” para abrir e editar cadabloco. Após dar os nomes clique em “Add Item” para navegar naspastas do site e selecionar cada conteúdo a ser mostrado norespectivo bloco. Em nosso modelo, para Main Story, foi selecionada aúltima publicação com imagem do menu “Notícias”. Para o bloco 2Items, 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 aseguir mostram os items nos blocos mencionados e o resultadoparcial de nossa frontpage após enviar para publicação.


16/18

Repare que, na última imagem, apenas o campo da esquerda dapágina principal exibe informações. Isso se deve ao fato de apenas acoluna da esquerda do layout ter sido editada. Agora vamos para acoluna da direita. Na barra eZ da página clicamos em “edit” e depois

abrimos a aba Right Zone da frontpage. Ali vamos inserir blocos dotipo Item List, Tag Cloud e Poll. Uma vez adicionados os itens oupastas do primeiro bloco, nomeamos os outros blocos e osdirecionamos através do botão “Choose source” às pastas especificas(lembrando que a função poll só será visível se já tivermos umapesquisa ou enquete publicada no site). Finalmente enviamos parapublicar e temos o resultado de nossa frontpage:


17/18

Veja outros exemplos, implantados com apoio da Prograd eadministrados por outros cursos e colegiados, que tem como base aplataforma eZ:


18/18

9 – CONCLUSÃO

O foco deste tutorial consiste em ajudar o usuário a se familiarizarcom conceitos básicos da plataforma eZ Publish. Tais como inserção emanutenção de conteúdos básicos, menus, submenus, elementosgráficos, artigos, e frontpages. Tudo isso a partir de uma barra deferramentas 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 requeracompanhamento constante de modo a oferecer ao usuário facilidadede acesso, interatividade e clareza nas informações. O materialapresentado deve servir como apoio nessas tarefas.Para suporte adicional ou maior treinamento, tanto para criar eadministrar websites, entre em contato com a equipe técnica doPrograd-UFMG. Nosso núcleo tem o objetivo de facilitar acomunicação entre os diversos sites de cursos e colegiados daUniversidade, bem como promover a relação entre a Instituição, osprofessores 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 Jase! Raziel Julho 2010

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

(31) 3409-6451
http://www2.ufmg.br/prograd/prograd/Pro-Reitoria-de-Graduacao/Pro-Reitoria/Inovacao/Web-ProGradhttp://www2.ufmg.br/prograd/prograd/Pro-Reitoria-de-Graduacao/Pro-Reitoria/Inovacao/Web-ProGradhttp://www2.ufmg.br/prograd/prograd/Pro-Reitoria-de-Graduacao/Pro-Reitoria/Inovacao/Web-ProGradhttp://www2.ufmg.br/prograd/prograd/Pro-Reitoria-de-Graduacao/Pro-Reitoria/Inovacao/Web-ProGradhttp://www2.ufmg.br/prograd/prograd/Pro-Reitoria-de-Graduacao/Pro-Reitoria/Inovacao/Web-ProGrad

Apostila Ez

Documents

Transcript of Apostila Ez