criando temas com diazo
DESCRIPTION
Curso de Diazo para PloneTRANSCRIPT
Criando Temas com Diazo@Tamosauskas
Plone para DesignersLá e de Volta Outra Vez
Paul Everitt, Laurence Rowe and Martin Aspeli
Antigo XDV
2010
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 frenteDeliverance usa PythonDiazo Plone 4, Deliverance is no more
Requisitos
•Plone 4.1.x + plone.app.themingOu•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 temaEsta pasta irá guardar os arquivos do seu tema:
rules.xmlindex.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>
<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="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>
rules.xml
Aplicando um pacoteZipe a pasta e suba no Plone
Site Setup -> Diazo theme
Ou
@@theming-controlpanel
Instale e tente acessar o Plone e Zope
Define namespaces<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="http://namespaces.plone.org/diazo"xmlns:css="http://namespaces.plone.org/diazo/css"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</rules>
Entendendo o rules.xml
Define qual o template utilizado
<theme href=“index.html" />
Colocar uma condição:
<theme href=“index.html" css:if-content="#visual-portal-wrapper" />
Chamando o Template
<notheme css:if-content="#edit-wrapper" />
<notheme if-path="presentation_view" />
Condicionais
Define qual o template utilizado
<theme href=“index.html" />
Colocar uma condição:
<theme href=“index.html" css:if-content="#visual-portal-wrapper" />
Chamando o Template
<regra css:content="#elemento-no-Plone" css:theme="#elemento-no-Template" />
Anatomia de uma Regra
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" />
Exemplos de regras
Desafio
Crie uma regra que coloque na tag #title o H1 do Plone.
DesafioApó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 estilosImportando 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.
DesafioUsando 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
DesafioUsando 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">
DesafioCrie 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 FilhosAs 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çãoO 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
http://diazo.orghttp://pypi.python.org/pypi/diazohttp://www.simplesconsultoria.com.br/blog/como-criar-um-tema-para-plone-usando-o-diazo/estaaopresentacao
Referências e Documentação
Criando Temas com Diazo
@Tamosauskas