diazo para todos

33
Diazo Para Todos @Tamosauskas

Upload: simples-consultoria

Post on 19-May-2015

665 views

Category:

Technology


4 download

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

Page 1: Diazo para todos

Diazo  Para  Todos    

@Tamosauskas

Page 2: Diazo para todos

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.

Page 3: Diazo para todos

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

Page 4: Diazo para todos

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  

Page 5: 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  

Page 6: Diazo para todos

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  

Page 7: Diazo para todos

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

Page 8: Diazo para todos

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

Page 9: Diazo para todos

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  

Page 10: Diazo para todos

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  

Page 11: Diazo para todos

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  

Page 12: Diazo para todos

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

Page 13: Diazo para todos

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  

Page 14: Diazo para todos

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  

Page 15: Diazo para todos

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  

Page 16: Diazo para todos

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

Link  do  Logo  

Page 17: Diazo para todos

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    

Page 18: Diazo para todos

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

Navegação    

Page 19: Diazo para todos

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  

Page 20: Diazo para todos

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  

Page 21: Diazo para todos

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  

Page 22: Diazo para todos

<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  

Page 23: Diazo para todos

<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  

Page 24: Diazo para todos

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  

Page 25: Diazo para todos

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

Idioma  

Page 26: Diazo para todos

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  

Page 27: Diazo para todos

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

Fazendo  a  cabeça  

Page 28: Diazo para todos

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  

Page 29: Diazo para todos

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

Favicon  

Page 30: Diazo para todos

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  

Page 31: Diazo para todos

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

Personal  Tools  

Page 32: Diazo para todos

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  

Page 33: Diazo para todos

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

Scripts