Diazo para todos

  • 523 views
Uploaded on

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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
523
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diazo  Para  Todos     @Tamosauskas
  • 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. 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. 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. 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. 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. Nome do usuário member = python: portal_state.member().getUserName() <xsl:value-of select="$member"></xsl:value-of>
  • 8. https://github.com/plone/plone.app.layout/blob/master/plone/app/layout/globals/ portal.py
  • 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. 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. 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. Solução <drop css:content="#portal-breadcrumbs"/> <before method="raw" css:theme="#main" css:content="#portal-breadcrumbs"/>
  • 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. 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. 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. Solução: <copy attributes="href title" css:content="#portal-logo" css:theme="#logo a" /> Link  do  Logo  
  • 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. Solução: <replace css:content="#portal-globalnav li" css:theme-children="#nav ul" /> Navegação    
  • 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. 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. 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. <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. <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. 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. Solução: <copy attributes="*" css:content="html" css:theme="html" /> Outra forma: <copy css:content="html" css:theme="html" attributes="lang dir" /> Idioma  
  • 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. Solução: <prepend css:content-children="head" css:theme="head" /> Fazendo  a  cabeça  
  • 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. Solução: <drop css:content="head link[rel='shortcut icon']" /> <drop css:content="head link[rel='apple-touch-icon']" /> Favicon  
  • 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. A Regra abaixo assume que você tem tag #main no seu template. <before css:theme='#wrapper' css:content='#portal-personaltools-wrapper' /> Personal  Tools  
  • 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. Solução: <drop css:content="script"/> <after method="raw" css:content="script" css:theme="#wrapper"/> Scripts