Diazo para todos

1.348 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.348
No SlideShare
0
A partir de incorporações
0
Número de incorporações
13
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Diazo para todos

  1. 1. Diazo  Para  Todos     @Tamosauskas
  2. 2. 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.
  3. 3. 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
  4. 4. 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  
  5. 5. 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  
  6. 6. 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  
  7. 7. Nome do usuário member = python: portal_state.member().getUserName() <xsl:value-of select="$member"></xsl:value-of>
  8. 8. https://github.com/plone/plone.app.layout/blob/master/plone/app/layout/globals/ portal.py
  9. 9. 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  
  10. 10. 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  
  11. 11. 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  
  12. 12. Solução <drop css:content="#portal-breadcrumbs"/> <before method="raw" css:theme="#main" css:content="#portal-breadcrumbs"/>
  13. 13. 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  
  14. 14. 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  
  15. 15. 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  
  16. 16. Solução: <copy attributes="href title" css:content="#portal-logo" css:theme="#logo a" /> Link  do  Logo  
  17. 17. 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    
  18. 18. Solução: <replace css:content="#portal-globalnav li" css:theme-children="#nav ul" /> Navegação    
  19. 19. 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  
  20. 20. 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  
  21. 21. 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  
  22. 22. <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  
  23. 23. <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  
  24. 24. 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  
  25. 25. Solução: <copy attributes="*" css:content="html" css:theme="html" /> Outra forma: <copy css:content="html" css:theme="html" attributes="lang dir" /> Idioma  
  26. 26. 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  
  27. 27. Solução: <prepend css:content-children="head" css:theme="head" /> Fazendo  a  cabeça  
  28. 28. 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  
  29. 29. Solução: <drop css:content="head link[rel='shortcut icon']" /> <drop css:content="head link[rel='apple-touch-icon']" /> Favicon  
  30. 30. 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  
  31. 31. A Regra abaixo assume que você tem tag #main no seu template. <before css:theme='#wrapper' css:content='#portal-personaltools-wrapper' /> Personal  Tools  
  32. 32. 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  
  33. 33. Solução: <drop css:content="script"/> <after method="raw" css:content="script" css:theme="#wrapper"/> Scripts  

×