Personal tools

Skip to content. | Skip to navigation

Sections

Blog

You are here: Home Blog Como criar um tema para Plone usando o Diazo

Como criar um tema para Plone usando o Diazo

Posted by Thiago Tamosauskas at 26/07/2011 17:20 |

Diazo é uma nova forma de implementar layouts que o Plone está usando e que tem tudo para se tornar a maneira oficial para se desenvolver temas daqui para frente. Basicamente, ele permite que você aplique um tema de uma página com CSS e HTML estático e transformar em um site dinâmico com o mínimo de constrangimento. 

Existem várias vantagens nesta abordagem, entre elas:

  • Abrir a porta para que mais e novos designers possam trabalhar com o Plone.
  • Você pode usar um wireframe HTML criado por um webdesigner que nem conhece o Plone
  • Seu tema passa pode ser facilmente reaproveitado em outros CMS e vice versa.
  • É possível redesenhar uma interface do usuário sem sequer ter acesso ao código fonte da aplicação
  • Você pode implementar temas em um tempo muito mais reduzido.
  • O tema original permanece intocado facilitando a reutilização e manutenção.
  • Há ainda um ganho de performance pois recursos estáticos como imagens, css e javascripts são fornecidos sem passar pelo Plone

Meu primeiro tema


A maneira mais rápida de usar o Diazo é instalar o produto plone.app.theming, com ele você ganha uma nova opção nas configurações do site e então tudo o que precisará fazer é subir um arquivo zipado contendo o seu tema.  Vamos criar um tema bem simples para um fácil e rápido entendimento inicial:

Crie um diretório /meutema e coloque nele o arquivo tema.html:

<html>
    <head>
        <title>Meu Diazo Feliz</title>
        <link rel="stylesheet" href="estilos.css" />
    </head>
    <body>
        <h1 id="title">Meu tema para Diazo</h1>
        <div id="content">
            Lorem ipsum
        </div>
    </body>
</html>


Coloque também nesta pasta o arquivo estilos.css:

body {
    background: #fff repeat-x;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

#content {width: 960px; margin: 0 auto;}


Crie então um arquivo chamado rules.xml:

<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   <theme href="tema.html" />

   <replace css:theme="#content" css:content="#portal-column-content" />
   <drop css:content="#plone-document-byline" />

</rules>


Por fim crie um arquivo zip desta pasta e suba pelo painel de configurações do Diazo em @@theming-controlpanel

Seu mini-tema deve então estar disponível em seu site.

As regras do jogo


É no arquivo rule.xml que a mágica acontece. Este arquivo contêm as regras que unem o Plone e o tema, substituindo com o espaço do html estático com o conteúdo de verdade. Vamos entender nosso exemplo simples:

<rules>  Aqui são definidos três namespaces que fazem o Diazo funcionar. Graças a eles o Diazo permite o uso de seletores completos de CSS3 e XPath, incluindo coisas como o pseudo seletor nth-child.

<theme> Dá a referencia para o arquivo de html estático que será usado no tema.

<drop> Usado para apagar elementos do tema ou do conteúdo. No nosso exemplo estamos eliminando a tag plone-document-byline e tudo o que há dentro dela.

<replace> Uma das mais usadas na implementação de um tema. Isso porque, como o nome já diz, ela substitui um conteúdo estático por um conteúdo dinâmico que você indicar. No nosso exemplo o Diazo colocará todo o #portal-column-content do Plone dentro da tag #content definida em nosso tema estático.


Existem ainda outras tags que podem ser usadas como <before>, <after>, <strip>. <copy>, <notheme> e <merge>. Para  um conhecimento mais aprofundado consulte a documentação do Diazo ou aguarde futuros posts aqui no nosso blog.

Perigos do Diazo


É necessário destacar que o Diazo facilitará bastante o desenvolvimento de temas no futuro, mas ele também abre a possibilidade de estragarmos o Plone no processo (Como fizemos neste tutorial). O Plone possui uma história de preocupação com a experiência de uso e possui uma interface poderosa que agora pode ser destruída com poucas linhas. Entre outras coisas o uso indiscriminado do Diazo pode significar:

  • Perda das validações de código
  • Perda de usabilidade
  • Perda de portabilidade
  • Perda de acessibilidade
  • Perda na otimização para buscas
  • Possível incompatibilidade com alguns produtos


Sendo assim é necessário mais do que nunca implementar um tema preocupando-se em manter estas e muitas outras vantagens nativas do Plone. Isso significa atenção aos detalhes, auto-crítica e constante acompanhamento do código gerado pelo Plone. Pode ser uma tarefa trabalhosa, mas o resultado é compensador.

Document Actions
Spinner