diazo para todos
DESCRIPTION
Esta palestra pretende ser uma introdução ao uso do Diazo e de minha experiência criando temas com ele para o Plone. Inclui também uma discussão sobre os prós e contras desta ferramenta se comparado com a antiga forma de implementar layouts. Mais especificamente mostrarei diversas regras de diazo que foram escritas especificamente para o Plone com a finalidade de conservar suas caracteristicas nativas de usabilidade e acessibilidade e que são agora usadas como padrão nos temas desenvolvido pela Simples Consultoria.TRANSCRIPT
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 = '[email protected]' 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