Diazo para todos

Diazo
Para
Todos

@Tamosauskas

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

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

Após implementar diversos layouts em Diazo para o Plone acabamos colecionando
algumas práticas e soluções que fazem sentido estarem presentes em qualquer projeto.
O objetivo desta apresentação é mostrar estas soluções.
Diazo
Para
Todos

O Arquivo manifest.cfg pode ser usado para estabelecer alguns valores
que serão usados em suas regras. Veja o exemplo abaixo:
[theme]
title = Diazo
description = Design by Simples Consultoria
author = 'Simples Consultoria'
author_email = 'products@simplesconsultoria.com.br'
doctype = <!DOCTYPE html>
Estes atributos serão usados pelo Plone na interface do Diazo.
Des-no
Manifest.cfg

1. Edite o arquivo manifest.cfg e inclua:
[theme:parameters]
portal_url = python: portal_state.portal_url()
2. Agora você pode chamar este valor dentro das regras. Por exemplo:
<replace css:theme="#footer”>
<a href="{$portal_url}">
<img src="{$portal_url}/++theme++beyondskins.responsive/static/selo.png" />
</a>
</replace>
Des-no
Manifest.cfg

Nome do usuário
member = python: portal_state.member().getUserName()
<xsl:value-of select="$member"></xsl:value-of>

https://github.com/plone/plone.app.layout/blob/master/plone/app/layout/globals/
portal.py

Em alguns casos você vai querer puxar conteúdo de outras páginas para seu tema.
Graças ao diazo vocês consegue fazer isso..
1. Habilite a opção "Read network" em @@theming-controlpanel
2. Crie uma página chamada footer na raiz do Plone
2. Use a seguinte regra:
<replace css:theme="#footer" css:content="#content-core" href="/footer"/>
Esta parte do tema agora pode ser modificada pelo administador do site.
Usando
conteúdo
interno

Você pode ser solicitado a pegar conteúdo de outro site para colocar no seu. Tente o
seguinte.
1. Habilite a opção "Read network" em @@theming-controlpanel
2. Crie uma página chamada footer na raiz do Plone
2. Use a seguinte regra:
<replace css:theme="#footer" css:content=".cotacao .ic-cotacao"
href="http://economia.uol.com.br/cotacoes/" method="document"/>
Atenção existe um custo de performance no uso das duas tecnicas acima.
Usando
conteúdo
externo

As regras de diazo permitem "recortar" conteúdo e "colar" em um tema. Mas será
possível simplesmente trocar um conteúdo de lugar?
Ou seja "recortar" um elemento do conteúdo e "colar" em outra parte?"
Tente tirar o breadcrumb de dentro das colunas usando drop e depois replace, after ou
before
Trocando
conteúdo
de
lugar

Solução
<drop css:content="#portal-breadcrumbs"/>
<before method="raw" css:theme="#main" css:content="#portal-breadcrumbs"/>

Existem dois modos de criar uma condição para as regras de diazo.
Por caminho:
<notheme if-path="area-restrita" />
Por css
<notheme css:if-content=".portaltype-topic" />
Liberdade
Condicional

Como maior parte do layout está no template (que por sua vez chama uma uma folha
de estilo em particular) podemos mudar totalmente a interface variando o template
usado no diazo.
Usamos para isso as mesmas confições de path ou css:
<theme href="theme.html" />
<theme href="theme-coluna-unica.html"
css:if-content="#portal-column-content.width-full" />
Usando
diferentes
templates

Na maior parte das vez seu tema já poussuirá um logo próprio. mas você não quer
perder a referência do Plone para a página principal.
É necessário uma regra para isso.
Link
do
Logo

Solução:
<copy attributes="href title" css:content="#portal-logo" css:theme="#logo a" />
Link
do
Logo

Outro elemento comum nos layouts é a navegação global, que no Plone é feita pelo
portal-globalnav.
Na maior parte das vezes vocẽ precisará de uma regra que chame a navegação.
Navegação

Solução:
<replace css:content="#portal-globalnav li" css:theme-children="#nav ul" />
Navegação

Isso é importante por conta do html e marcação das colunas que variam conforme a
existência ou não de portlets. Como seria sua regra (ou regras) para isso?
Colunas
e
Portlets

Solução:
Esta é a maneira rápida de trazer o Diazo para o Plone. O exemplo abaixo coloca toda
a colunagem do plone dentro do container do seu tema.
<replace css:content="#portal-columns" css:theme="#content" />
Colunas
e
Portlets

O plone e muitos produtos dele fazem um bom uso de classes na tag body para
diferenciar templates, seções e outras variações de layout. Assim é preciso garantir que
estas classes não sejam perdidas no processo de fazer o tema.
Body
de
classe

<copy attributes="*" css:theme="body" css:content="body" />
Forma verborragica:
<merge attributes="class" css:content="body" css:theme="body" />
<copy attributes="id dir" css:content="body" css:theme="body" />
<------ PERIGO!!!!!!!!!!!!!!
Body
de
Classe

<copy attributes="*" css:theme="body" css:content="body" />
Forma verborragica:
<merge attributes="class" css:content="body" css:theme="body" />
<copy attributes="id dir" css:content="body" css:theme="body" />
Body
de
Classe

A tag html do plone possui o atributo lang e dir usado para definir qual o idioma de
leitura da página.
É preciso trazert isso para nosso tema. Como você faria isso?
Idioma

Solução:
<copy attributes="*" css:content="html" css:theme="html" />
Outra forma:
<copy css:content="html" css:theme="html" attributes="lang dir" />
Idioma

Tanto a tag título como a tag base são usadas de forma dinâmica pelo Plone. É
necessário portanto substituir as do tema por elas.
Fazendo
a
cabeça

Solução:
<prepend css:content-children="head" css:theme="head" />
Fazendo
a
cabeça

Se você quiser fazer um tema completo vai ter que incluir as tags de favicon abaixo.
<link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="static/touch_icon.png">
Mas se fizer isso e usar nossa regra dee chach vai acabar com tags redundantes no
seu código. O que fazer?
Favicons

Solução:
<drop css:content="head link[rel='shortcut icon']" />
<drop css:content="head link[rel='apple-touch-icon']" />
Favicon

Seja como for o seu layout você vai querer acesso as ferramentas pessoais e login. A
Crie uma regra que inclua no seu site sem conflitar com seu layout.
Personal
Tools

A Regra abaixo assume que você tem tag #main no seu template.
<before css:theme='#wrapper' css:content='#portal-personaltools-wrapper' />
Personal
Tools

Por razões de performance é recomendado que os javascripts sejam os ultimos
elementos a serem carregados em uma página.
Felizmente com Diazo podemos garantir isso. Como você faria?
Scripts

Solução:
<drop css:content="script"/>
<after method="raw" css:content="script" css:theme="#wrapper"/>
Scripts

Diazo para todos

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Diazo para todos

Mais de Simples Consultoria

Diazo para todos