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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Diazo para todos

Ähnlich wie Diazo para todos (20)

Mehr von Simples Consultoria

Mehr von Simples Consultoria (13)

Diazo para todos