Criando Temas com Diazo

Criando Temas com Diazo
@Tamosauskas

Plone para Designers
Lá e de Volta Outra Vez

2010
Paul Everitt, Laurence Rowe and Martin Aspeli

Antigo XDV

Que Diazo isso faz?
Com um simples XML você substitui elementos
de seu template html por conteúdo gerado pelo
Plone.

Porque usar Diazo

Designers e Programadores trabalham melhor.

Torna a entrada ao mundo Plone mais amigavel

As vezes o design já existe.

Reduz o templo de implementação.

Performance e Flexibilidade.

O tema pode ser reaproveitado em outros CMS e vice versa.

É possível redesenhar uma interface do usuário sem sequer tocar
o código fonte da aplicação

O tema original permanece intocado facilitando a reutilização
e manutenção.

Porque NÃO usar Diazo

Risco de perda das validações de código

Riscos de usabilidade

Riscos de portabilidade

Riscos de acessibilidade

Riscos na otimização para buscas

Possível incompatibilidade com alguns produtos

Diazo X Deliverance
Muito Parecidos (regras)
Deliverance saiu na frente
Deliverance usa Python
Diazo Plone 4, Deliverance is no more

Requisitos
•Plone 4.1.x + plone.app.theming
Ou
•Plone 4.2

Estrutura Básica
Um pacote diazo é uma pasta compactada .zip
contendo ao menos 2 arquivos:

• index.html
• rules.xml

Estrutura Básica
Normalmente o arquivo é bem mais complexo.
Contém CSS, imagens, javascripts.

Mas podemos começar dessa maneira...

Crie uma pasta
Crie a pasta com o nome do seu tema
Esta pasta irá guardar os arquivos do seu tema:

rules.xml
index.html

index.html
<html>

<head>
<title>Meu primeiro Diazo</title>
</head>

<body class=”diazo” >
<h1 id="title">Meu Diazo</h1>
<div id="menu">Menu do site</div>
<div id="conteudo">Conteúdo</div>
</body>

</html>

rules.xml
<?xml version="1.0" encoding="UTF-8"?>
<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=“index.html" />

</rules>

Aplicando um pacote
Zipe a pasta e suba no Plone

Site Setup -> Diazo theme

Ou

@@theming-controlpanel

Instale e tente acessar o Plone e Zope

Entendendo o rules.xml
Define namespaces
<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

</rules>

Chamando o Template
Define qual o template utilizado

<theme href=“index.html" />

Colocar uma condição:

<theme href=“index.html"
css:if-content="#visual-portal-wrapper" />

Condicionais

<notheme css:if-content="#edit-wrapper" />

<notheme if-path="presentation_view" />

Anatomia de uma Regra

<regra css:content="#elemento-no-Plone"
css:theme="#elemento-no-Template" />

Exemplos de regras

Adiciona a navegação do Plone
<replace css:content="#portal-globalnav"
css:theme="#menu" />

Adiciona o Conteúdo do Plone
<replace css:content="#portal-columns"
css:theme="#conteudo" />

Desafio

Crie uma regra que coloque na tag #title o H1 do Plone.

Desafio
Após aplicar o tema, você verá seu HTML,
com o menu e o conteúdo e titulo do Plone.

Entretanto os estilos do Plone não são aplicados

Porque? Você consegue arrumar isso?

Adicionando estilos
Importando CSS do Plone
<replace css:content="head" css:theme="head" />

Essa chamada substitui todo o HEAD do seu HTML
pelo HEAD do Plone

<replace />
<replace css:theme="title" css:content="title"/>
O resultado aqui é que o elemento <title /> no tema
será substituido pelo elemento <title /> do conteúdo (dinamico).

<before /> e <after />
<after css:content="#portlet-patrocinadores"
css:theme="#footer" />
Este exemplo colocara o portlet de patrocinadores abaixo do rodape
de um site.

Desafio
Usando a regra after, coloque a busca do plone #portal-searchbox
logo abaixo do #conteudo

Solução
<after css:content="#portal-searchbox" css:theme="#conteudo" />
Este exemplo colocara o busca do Plone no final da página.

<drop />
<drop css:content=".portlet .portletHeader" />

É usado para apagar elementos do tema ou do conteúdo
que não serão usados.

O exemplo acima apagará o Header de todos os portlets

Desafio
Usando a regra drop apague o “Apenas essa seção” da busca do
site.

Solução
<drop css:content="#portal-searchbox .searchSection" />

O exemplo acima apagará o “apenas nesta seção”
que vem junto da busca do Plone.

<merge />
Usado para combinar os valores dos atributos, especialmente para
combinar classes de CSS
<merge attributes="class" css:theme="#prato"
css:content="#prato" />d

Tema: <div id=”prato” class="arroz">
Conteúdo: <div id=”prato” class="feijao">

O resultado do exemplo será:
<div class="arroz feijao">

Desafio
Crie uma regra que junte o atriubute class do body do tema com o
do conteúdo.

Solução
<merge attributes="class" css:theme="body"
css:content="body" />

.

<append />
<append css:content-children="head"
css:theme="html head" />

<append css:theme="head">
<link rel="stylesheet" href="++theme++pacote/style.css"
type="text/css" charset="utf-8" />
</append>

Este exemplo inclui uma tag link no head do tema

Pais e Filhos
As regras podem tratar diretamente das tags filhas:

<append css:content="#footer"
css:theme="#footer"/>

<append css:content-children="#footer"
css:theme="#footer"/>

Desafio
Usando a regra append inclua um script function.js no seu tema.

Solução
<append css:theme="head">
<script type="text/javascript" src="/++theme++pacotefunction.js” />

</append>

Ordem de Execução
O Diazo executará as regras segundo uma ordem própria e não
necessariamente segundo a ordem escrita. Não é preciso
decorar, mas é bom ter anotado:
1º lugar: <before> e <append>
2º lugar: <drop />
3º lugar: <replace>
4º lugar: Regras que usam attributes.
5º lugar: Regras usando "theme-children"
6º e último lugar: <after/>

Desafio do Dragão
1. Escolha um template feito pelo seu sobrinho:

freetemplatesonline.com
templatesgratis.org

2. Crie um pacote diazo instalável e teste

3. Crie um arquivo com as regras necessárias para
substituir conteudo

4. Crie regras onde você use o estilo do template com os
itens do head do Plone

Referências e Documentação
Você pode encontrar um exemplo de tema mais completo no
seguinte endereço:

http://plone.org/products/beyondskins.responsive

Referências e Documentação

http://diazo.org
http://pypi.python.org/pypi/diazo
http://www.simplesconsultoria.com.br/blog/como-criar-um-tema-para-plone-usando-o-dia
estaaopresentacao

Criando Temas com Diazo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (20)

Similar a Criando Temas com Diazo

Similar a Criando Temas com Diazo (20)

Más de Simples Consultoria

Más de Simples Consultoria (13)

Último

Último (8)

Criando Temas com Diazo