eZ Publish

Website Interface

Guia de customizao
version

1.2

eZ Publish Website Interface Guia de customizao

Lista de Contedos
1.Introduo.................................................................. ......................................................3
1.1.Sobre o eZ Publish e eZ Publish Now....................................................................... 3
1.2.Pblico alvo................................................................................................. ..............3
1.3.Convenes..................................................................... .........................................4
1.4.Mais recursos............................................................................................. ...............4
1.5.Entrando em contato com a eZ........................................................... ......................5
1.6.Copyright e Trademarks............................................................................. ...............5
1.6.1.Contribuio de traduo................................................................ ...................5
2.Viso Geral de Customizao............................................................... ...........................6
3.Estrutura das extenses do design..................................................................................6
3.1.O Pacote de Estilo de Site Padro................................................................. ...........6
4.Design e layout do site ................................................................... .................................7
4.1.Estrutura de layout...................................................................... ..............................7
4.2.Desabilitando elementos da pgina..........................................................................8
5.CSS......................................................................................................... .........................9
5.1.Estilos bsicos..........................................................................................................9
5.2.Estilos especficos para Internet Explorer...............................................................10
5.3.Javascript..................................................................................... ...........................10
6.Criando um pacote de estilos de Site.............................................................................11
6.1.Criando os arquivos de CSS...................................................................................11
6.2.Criando o pacote.................................................................. ...................................11
6.2.1.Thumbnail do Pacote.......................................................................................11
6.2.2.Arquivos CSS................................................................................................. ..12
6.2.3.Arquivos de imagem........................................................................................12
6.2.4.Pacote de informaes....................................................................................13
6.2.5.Mantenedor de pacotes...................................................................................13
6.2.6.Registro de alteraes nos pacotes...................................................... ...........14
6.3.Sumrio...................................................................................................... .............14
7.Instalando um pacote de estilo de Site........................................................................... 15

eZ Systems

Pgina 2 / 15

eZ Publish Website Interface Guia de customizao

1. Introduo
O eZ Publish Website Interface uma extenso do eZ Publish que torna simples para
seus usurios as tarefas de criao e manuteno de contedos de um Website. O
Website Interface integra-se ao front-end do website, tornando a incluso de contedo
intuitiva e fcil de aprender. A maior parte das tarefas referentes ao gerenciamento de
contedo pode ser feita atravs do Website Interface.
Os sites que utilizam o eZ Publish Website Interface so um pouco diferentes das
instalaes normais do eZ Publish:

No eZ Publish regular, as possibilidades de design e customizao so limitadas.

Por exemplo, nos sites utilizando o eZ Publish Website Interface, as modificaes
de design so feitas pelos arquivos CSS em "site style packages", ou seja, por
pacotes de estilo de site. Isso reduz a complexidade do gerenciamento de design
do site. Ainda que seja possvel customizar e modificar esses sites pelos mtodos
tradicionais, os usurios do eZ Publish Now usam as configuraes padro e s
podem customizar o site atravs de pacotes de estilos de site.

Acessos ao site so criados para cada linguagem especificada durante a

instalao.

O Website Interface implementado como um "pacote de site" que instalado pelo eZ

Publish Setup Wizard. Customizaes simples de site so feitas com os pacotes de estilo
de site que so importados via Administration Interface.

1.1.

Sobre o eZ Publish e eZ Publish Now

eZ Publish um Sistema de Gerenciamento de Contedo Empresarial completo que inclui

opes sofisticadas e que suporta mltiplos autores no mesmo site, mltiplos tipos de
contedo (texto, imagens, arquivos multimdia), gerenciamento de verso de contedo e
sites em mltiplos idiomas. Como framework de Sistema de Gerenciamento de Contedo
Empresarial, eZ Publish altamente customizvel, capaz de atender as complexas
exigncias de grandes organizaes.
eZ Publish Now uma soluo baseada no eZ Publish que inclui um conjunto de produtos
(eZ Publish e o Website Interface) e servios (suporte, updates automticos, assistncia
de customizao, etc). Foi desenvolvido para rodar out-of-the-box, ou seja, assim que
instalado, no se fazendo necessrio nenhuma pr-configurao complexa.
O propsito do eZ Publish Now fornecer o mesmo poder e riqueza de funes do eZ
Publish sem a necessidade de complexos comandos de programao. O eZ Publish Now
adequado para pequenas e mdias empresas que precisam de uma soluo
profissional de gerenciamento de contedo, mas no necessariamente possuem a infraestrutura, verba ou expertise para criar e gerenciar um sistema complexo. Ele adequado
tambm para empresas maiores que precisam de um soluo para construir um website
"standard", uma intranet ou extranet. Em ambos os casos, os usurios beneficiam-se do
expertise da eZ Systems e dos eZ Partners, que possuem servios completos de suporte
que garantem o sucesso do projeto durante seu ciclo.

1.2.

Pblico alvo

Existem trs manuais para o eZ Publish Now:

Guia do usurio

eZ Systems

Pgina 3 / 15

eZ Publish Website Interface Guia de customizao

Guia de instalao

Guia de customizao

Esse manual (Guia de customizao) feito para web designers e web developers
responsveis por alteraes no design visual de um site que utilize o Website Interface.
Este manual explica como criar e instalar o pacote de estilo de site. Assume-se que os
leitores tm conhecimento de CSS, j que este guia no explica como usar o CSS para
alterar elementos do display.

1.3.

Convenes

Amostras de cdigo, funes, nomes varivies, etc, so impressos em 'fonte

monospace'.

Nomes de arquivo e caminhos so impressos em 'fonte monospace

italic'.

Comandos so impressos em 'fonte monospace negrito'.

Elements of graphical user interfaces (such as buttons and field labels) are printed
in bold font.

Nomes de componente (como aplicaes e nomes de classe de contedo) so

maisculas, por exemplo, 'Administration Interface' e 'classe de contedo Folder'

Na exibio de URLs, troque 'www.exemplo.com' pelo nome de domnio do seu

site.

As imagens nesse documento talvez tenham sido modificadas para caber na

pgina ou ilustrar um ponto, e consequentemente pode no ficar perfeita na sua
pgina.

J que o design do seu website pode ser customizado para satisfazer suas
necessidades, descries do local de vrios links podem no fechar com o local no
seu website. Quando for este o caso, ressaltamos que nos referimos locao do
item no design original do site.

1.4.

Mais recursos

eZ Publish documentation: O Website Interface uma extenso do eZ Publish.

Documentao para itens compartilhados em ambos no esto nestes manuais.
Em vez disso, quando apropriado, h links neste arquivo para verses online dos
documentos do eZ Publish, localizados em http://www.ez.no/doc.

eZ Publish forums: Os fruns no site da eZ Systems so uma fonte valiosa onde

usurios do eZ Publish do assistncia e suporte a outros membros. O acesso ao
frum grtis e esto no site http://ez.no/community/forum.

Suporte dos Parceiros eZ: A rede global de parceiros da eZ presta assistncia

para todos os produtos eZ. Para encontrar um parceiro eZ, contate sales@ez.no.

Outras solues eZ: Para informaes sobre outras solues da eZ Systems, v

ao site http://ez.no/products/solutions.

Treinamento e certificao: A eZ Systems e seus parceiros oferecem cursos de

treinamento e certificaes para o eZ Publish Now. Contate sales@ez.no ou visite
http://ez.no/services/training para mais informaes.

eZ Systems

Pgina 4 / 15

eZ Publish Website Interface Guia de customizao

1.5.

Entrando em contato com a eZ

Para perguntas que no tm cunho tcnico a respeito do eZ Systems, eZ Publish ou do

Website Interface, nos contate em:

http://ez.no/company/contact

info@ez.no

Suas sugestes e comentrios a respeito deste material so muito bem-vindas.

1.6.

Copyright e Trademarks

Copyright 2006 eZ Systems AS. Permisso concedida para cpia, distribuio e/ou
modificao desse documento sob as leis da Licena GNU Free Documentation License,
Verso 1.2 ou qualquer verso posterior publicada pela Free Software Foundation; with no
Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license
is included in the section entitled "GNU Free Documentation License".
Outros nomes de companhias e produtos mencionados neste manual podem ser marcas
registradas de seus respectivos donos. Utilizamos marcas registradas na forma editorial
pelo bem de seus donos; porm, estas marcas no contm o smbolo de registro consigo.
Todos os termos que so de alguma forma marcas registradas foram colocados em
Maiscula. No podemos garantir a validade de nenhuma marca registrada ou marca de
servio.
1.6.1.

Contribuio de traduo

Esta traduo foi realizada pelo parceiro eZ <Worbi Internet Business Inc>:
http://ez.no/partner/worldwide_partners/worbi_internet_business_inc

eZ Systems

Pgina 5 / 15

eZ Publish Website Interface Guia de customizao

2. Viso Geral de Customizao

Existem dois mtodos para customizar um site no eZ Publish Website Interface:

Criando um pacote de estilos para o site

Modificando o CSS default

Voc pode modificar elementos bsicos de design (como cores, fontes, etc) via pacotes
de estilo de site. Os clientes do eZ Publish Now s conseguem customizar o site atravs
dos pacotes de estilos. Os servios de suporte e manuteno inclusos com o eZ Publish
Now no permitem customizar o design padro do site.
Este manual explica como criar um pacote de estilos de site e como modificar o design
padro. Apenas as instrues a respeito dos pacotes de estilo so relevantes aos
usurios do eZ Publish Now.

3. Estrutura das extenses do design

O design de sites com o Website Interface fica armazenado no diretrio extension na
instalao do eZ Publish. Sua estrutura de arquivos est assim:
ezwebin
|
| - design
|
|
|
| - ezwebin
|
|
|
| - images
|
| - javascript
|
| - override
|
|
|
|
|
| - templates
|
|
|
|
|
| - datatype
|
|
|
|
|
|
|
| - ezxmltext
|
|
| - edit
|
|
| - embed
|
|
| - embed-inline
|
|
| - full
|
|
| - galleryline
|
|
| - galleryslide
|
|
| - horizontallylistedsubitems
|
|
| - itemizedsubitems
|
|
| - line
|
|
| - listitem
|
| - stylesheets
|
|
|
|
|
| - browsers
|
| - templates
| - settings

3.1.

O Pacote de Estilo de Site Padro

O Website Interface possui um pacote padro de estilo de site. um pacote "dummy" no contendo designs de CSS. O CSS padro fica na extenso "ezwebin" e usado
eZ Systems

Pgina 6 / 15

eZ Publish Website Interface Guia de customizao

como molde caso voc instale um novo pacote de estilo de site que no contm estilos
para todos os elementos. O pacote "dummy" contm apenas arquivos CSS vazios, ento
nenhum estilo ser sobrescrito. Logo, voc na verdade estar usando o design padro da
extenso.
Como o design padro no implementado num pacote de estilo de site, voc no pode
reverter o design original depois de instalar um novo pacote de estilo de site (somente se
deletar esse novo pacote de estilo de site). O pacote "dummy" lhe permite reverter para o
design padro.

4. Design e layout do site

O design e o layout dos sites no eZ Publish Website Interface foram desenvolvidos para
oferecer uma interface o mais simples e limpa possvel usando layout CSS "table-less".
Os objetivos principais relativos ao design so:

permitir uma soluo pronta para usar que fosse fcil de customizar e manter

permitir que usurios sem conhecimentos tcnicos a possibilidade de mudar o

design e o layout do site utilizando pacotes de estilo de site

estar em conformidade com os padres atuais de web design

4.1.

Estrutura de layout

O eZ Publish usa um approach layout com base em "div". O respectivo lugar de cada
componente na pgina feito com base nos elementos de estilo definidos no CSS e
implementados atravs de tags 'div' no HTML. A figura abaixo mostra a estrutura de
camadas no template principal (pagelayout.tpl)

eZ Systems

Pgina 7 / 15

eZ Publish Website Interface Guia de customizao

4.2.

Desabilitando elementos da pgina

Como padro, tem-se o layout mostrando um menu lateral com o contedo principal e
alguma 'informao extra' abaixo desse contedo. Esses dois elementos da pgina
podem ser retirados (e colocados de volta) conforme suas necessidades, alterando as
classes adicionais em div#columns. Comente a seo que desejar no bloco abaixo:
eZ Systems

Pgina 8 / 15

eZ Publish Website Interface Guia de customizao

/* COLUMNS */
div#columns
{
}
div.nosidemenu div#columns
{
}
div.noextrainfo div#columns
{
}
Note que essa funo controla apenas como os navegadores com CSS mostram a
pgina. O contedo oculto fica escondido no browser e mostrado no cdigo-fonte
(sendo visvel em qualquer navegador que no possui o suporte CSS ativado).

5. CSS
Como descrito acima, os elementos visuais de um site do eZ Publish so determinados
pelas instrues nos arquivos CSS.

5.1.

Estilos bsicos

Os arquivos CSS abaixo so os mais bsicos utilizados nas extenses de design do eZ

Publish Website Interface. Cada um deles tem uma funo especfica no layout e design.
O design do site pode ser alterado atravs desses arquivos. Porm, a maioria das
modificaes podem ser feitas criando um pacote de estilo de site. Modificar os estilos
bsicos s deve ser feito por usurios mais avanados. Alm disso, os usurios do eZ
Publish Now devem usar os pacotes de estilo de site para modificaes e no podem
alterar os estilos padro:

core.css: Especifica estilos visuais gerais para vrios elementos do HTML

bsico, tais como estilo e tamanho da fonte, margens e paddings. Alm disso, esse
arquivo contm estilos especficos que o eZ Publish Website Interface necessita
para templates padro. Esse arquivo est incluso no template pagelayout.tpl

pagelayout.css: Especifica estilos usados no template pagelayout.tpl ( o

template principal). Para encontrar elementos especficos com maior facilidade, a
ordem dos estilos nesse arquivo CSS bate com a ordem dos elementos na pgina
HTML. Por exemplo, o estilo div#header prximo ao topo do arquivo.

content.css: Especifica os estilos usados pelos templates de contedo. Tambm

esto inclusos os estilos gerais comuns a todos os contedos e aos estilos
especficos necessrios s classes relacionadas a contedo. Por exemplo, as
classes de contedo Folder e Artigos usam o seguinte CSS:
/* Folder */

eZ Systems

Pgina 9 / 15

eZ Publish Website Interface Guia de customizao

div.content-view-full div.class-folder
{
color: #000;
}
/* Article */
div.content-view-full div.class-article
{
color: #000;
}

print.css: Especifica estilos adicionais que sobrescrevem os outros estilos,

melhorando elementos da pgina para impresso. Isso inclui esconder menus e
outras reas do layout que no so necessrias no papel, garantindo a impresso
correta do que mais importante, o contedo principal.

Um pacote de estilo de sites contm os seguintes arquivos CSS suplementares:

site-colors.css: Esse arquivo sobrescreve os estilos no arquivo default

pagelayout.css (que se aplica ao template pagelayout.tpl)

classes-colors.css: Esse arquivo sobrescreve os estilos usados em

content.css (que se aplica s classes de contedo)

Os arquivos CSS so trazidos pelo HTML na ordem que so listados acima, garantindo
que tudo seja sobrescrito na ordem correta. Por exemplo, se um elemento est definido
no pagelayout.css e tambm no print.css, o dado que est no print.css
sobrescreve a definio do anterior. Se um elemento no est definido no
pagelayout.css mas est no print.css, a definio desse ser usada.

5.2.

Estilos especficos para Internet Explorer

Para compensar os bugs e discrepncias de renderizao do Internet Explorer, o eZ

Publish Website Interface inclui duas folhas de estilo especficas para o IE. As folhas de
estilo so enviadas ao navegador usando os comentrios condicionais do IE. Sendo uma
caracterstica fundamental do IE, a sintaxe faz com que as folhas de estilo parecerem um
comentrio HTML normal em outros navegadores (sem afetar a validade da pgina).
(Esteja ciente que algumas outras formas de comentrios condicionais, conforme descrito
pela Microsoft em seu website, talvez no sejam validados corretamente.)
As folhas de estilo que seguem so especficas para o Internet Explorer:

ie5.css: para IE 5 apenas

ie7lte.css: para IE 5,6,7

Edite esses arquivos se encontrar problemas com design no IE aps alterar o design
padro do site.

5.3.

Javascript

O JavaScript usado nos sites com o eZ Publish Website Interface segue o princpio geral
de que o contedo estrutural em uma pgina deve ser visto por completo para o usurio,
estando o JavaScript ativado ou no, e que a apresentao visual em ambos os casos
deve ser a melhor possvel.
O seguinte JavaScript desabilitado, mas pode ser habilitado caso necessrio.

heightresize.js: Este script automaticamente ajusta vrias colunas para ter a

eZ Systems

Pgina 10 / 15

eZ Publish Website Interface Guia de customizao

mesma altura em um layout baseado em CSS, algo que seria difcil por outros
mtodos. Se o JavaScript no estiver habilitado, as colunas simplesmente ficam no
seu tamanho inicial.

6. Criando um pacote de estilos de Site

Essa seo descreve como fazer um novo pacote de estilo, visando customizar o layout e
os elementos visuais de um site no eZ Publish Website Interface. Geralmente a
customizao do design segue os seguintes passos:
1. Criar site-colors.css e classes-colors.css.
2. Criar um pacote de estilo de site
3. Importar o pacote de estilo no site onde ser usado.

6.1.

Criando os arquivos de CSS

Crie os dois arquivos CSS acima que sero responsveis por customizar o estilo do site.
Quando usar referncias para imagens nesses arquivos, use a sintaxe
images/minhaimagem.png.

6.2.

Criando o pacote

Um pacote de estilo de site do eZ Publish Website Interface contm dois arquivos CSS:
site-colors.css e classes-colors.css. O primeiro arquivo sobrescreve o
pagelayout.css. O segundo sobrescreve o content.css.
Para criar um novo pacote de estilo de site, faa login no Administration Interface. (V ao
Guia do Usurio para aprender como acess-lo.) Clique no boto de Setup na barra de
menu horizontal, ento selecione o link Packages do menu de navegao da esquerda.
Uma lista de pacotes de criao sero mostrados. Escolha Site style como se mostra
abaixo:

6.2.1.

Thumbnail do Pacote

A janela vai propor a voc que associe uma pequena imagem com o pacote. A imagem
vai ajudar a definir o seu tema, tornando a busca mais fcil. A figura deve ter 120px de
largura e 103px de altura. Se no quiser colocar uma figura, apenas clique em Next.
eZ Systems

Pgina 11 / 15

eZ Publish Website Interface Guia de customizao

6.2.2.

Arquivos CSS

Na prxima janela, ser pedido a um arquivo CSS. No campo superior, insira o arquivo
site-colors.css; no campo inferior, insira o arquivo classes-colors.css.

6.2.3.

Arquivos de imagem

Na prxima tela, faa o upload de todas as imagens com referncias no CSS (tais como
fundos, imagens de rodap, etc), elas faro parte do pacote de estilo do site.
Aps a instalao do pacote de estilo, as imagens ficaro armazenadas no sistema de
arquivos do servidor sob o diretrio var. Quando voc especificar o caminho para
imagens nos arquivos CSS, use a seguinte nomenclatura: images/minhaimagem.png.

eZ Systems

Pgina 12 / 15

eZ Publish Website Interface Guia de customizao

6.2.4.

Pacote de informaes

A prxima tela ser usada para inserir informaes gerais sobre o pacote de estilo do site,
tais como o nome do pacote, descrio, etc.

6.2.5.

Mantenedor de pacotes

Use essa tela para informaes sobre o criador do pacote.

eZ Systems

Pgina 13 / 15

eZ Publish Website Interface Guia de customizao

6.2.6.

Registro de alteraes nos pacotes

Essa pgina manter gravada as alteraes feitas nos dados do pacote. Isso permite que
voc encontre cada mudana feita e entender o que de fato foi feito.

6.3.

Sumrio

Na ltima pgina, um sumrio do pacote ser exibido. Ele pode ser exportado para um
arquivo e ento importado em outra instalao do eZ Publish Website Interface.

eZ Systems

Pgina 14 / 15

eZ Publish Website Interface Guia de customizao

7. Instalando um pacote de estilo de Site

Um pacote de estilo de Site pode ser importado e instalado em qualquer mquina que
tenha o eZ Publish Website Interface.
Para instalar um pacote de estilo de site, faa login na Administration Interface. Clique no
boto Setup no menu horizontal, ento selecione Packages no menu de navegao
esquerdo. Clique no boto Import e siga as instrues na tela.
Para importar um pacote, clique no boto Design da barra horizontal e ento selecione
Look and Feel no menu esquerdo. Selecione o pacote desejado em seguida.

eZ Systems

Pgina 15 / 15