Criando Temas com Diazo

1.685 visualizações

Publicada em

Curso de Diazo para Plone

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

Sem downloads
Visualizações
Visualizações totais
1.685
No SlideShare
0
A partir de incorporações
0
Número de incorporações
11
Ações
Compartilhamentos
0
Downloads
36
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Criando Temas com Diazo

  1. 1. Criando Temas com Diazo @Tamosauskas
  2. 2. Plone para Designers Lá e de Volta Outra Vez
  3. 3. 2010Paul Everitt, Laurence Rowe and Martin AspeliAntigo XDV
  4. 4. Que Diazo isso faz?Com um simples XML você substitui elementosde seu template html por conteúdo gerado peloPlone.
  5. 5. Porque usar Diazo Designers e Programadores trabalham melhor. Torna a entrada ao mundo Plone mais amigavel As vezes o design já existe. Reduz o templo de implementação. Performance e Flexibilidade. O tema pode ser reaproveitado em outros CMS e vice versa. É possível redesenhar uma interface do usuário sem sequer tocar o código fonte da aplicação O tema original permanece intocado facilitando a reutilizaçãoe manutenção.
  6. 6. Porque NÃO usar Diazo Risco de perda das validações de código Riscos de usabilidade Riscos de portabilidade Riscos de acessibilidade Riscos na otimização para buscas Possível incompatibilidade com alguns produtos
  7. 7. Diazo X DeliveranceMuito Parecidos (regras)Deliverance saiu na frenteDeliverance usa PythonDiazo Plone 4, Deliverance is no more
  8. 8. Requisitos•Plone 4.1.x + plone.app.themingOu•Plone 4.2
  9. 9. Estrutura BásicaUm pacote diazo é uma pasta compactada .zip contendo ao menos 2 arquivos: • index.html • rules.xml
  10. 10. Estrutura BásicaNormalmente o arquivo é bem mais complexo.Contém CSS, imagens, javascripts.Mas podemos começar dessa maneira...
  11. 11. Crie uma pastaCrie a pasta com o nome do seu temaEsta pasta irá guardar os arquivos do seu tema:rules.xmlindex.html
  12. 12. index.html <html> <head> <title>Meu primeiro Diazo</title> </head> <body class=”diazo” > <h1 id="title">Meu Diazo</h1> <div id="menu">Menu do site</div> <div id="conteudo">Conteúdo</div> </body> </html>
  13. 13. rules.xml<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="http://namespaces.plone.org/diazo"xmlns:css="http://namespaces.plone.org/diazo/css"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><theme href=“index.html" /></rules>
  14. 14. Aplicando um pacote Zipe a pasta e suba no Plone Site Setup -> Diazo theme Ou @@theming-controlpanel
  15. 15. Instale e tente acessar o Plone e Zope
  16. 16. Entendendo o rules.xmlDefine namespaces<?xml version="1.0" encoding="UTF-8"?><rulesxmlns="http://namespaces.plone.org/diazo"xmlns:css="http://namespaces.plone.org/diazo/css"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></rules>
  17. 17. Chamando o TemplateDefine qual o template utilizado<theme href=“index.html" />Colocar uma condição: <theme href=“index.html" css:if-content="#visual-portal-wrapper" />
  18. 18. Condicionais<notheme css:if-content="#edit-wrapper" /><notheme if-path="presentation_view" />
  19. 19. Chamando o TemplateDefine qual o template utilizado<theme href=“index.html" />Colocar uma condição: <theme href=“index.html" css:if-content="#visual-portal-wrapper" />
  20. 20. Anatomia de uma Regra<regra css:content="#elemento-no-Plone" css:theme="#elemento-no-Template" />
  21. 21. Exemplos de regrasAdiciona a navegação do Plone<replace css:content="#portal-globalnav" css:theme="#menu" />Adiciona o Conteúdo do Plone<replace css:content="#portal-columns" css:theme="#conteudo" />
  22. 22. Desafio Crie uma regra que coloque na tag #title o H1 do Plone.
  23. 23. DesafioApós aplicar o tema, você verá seu HTML,com o menu e o conteúdo e titulo do Plone.Entretanto os estilos do Plone não são aplicadosPorque? Você consegue arrumar isso?
  24. 24. Adicionando estilosImportando CSS do Plone<replace css:content="head" css:theme="head" />Essa chamada substitui todo o HEAD do seu HTMLpelo HEAD do Plone
  25. 25. <replace /><replace css:theme="title" css:content="title"/>O resultado aqui é que o elemento <title /> no temaserá substituido pelo elemento <title /> do conteúdo (dinamico).
  26. 26. <before /> e <after /><after css:content="#portlet-patrocinadores"css:theme="#footer" />Este exemplo colocara o portlet de patrocinadores abaixo do rodapede um site.
  27. 27. DesafioUsando a regra after, coloque a busca do plone #portal-searchboxlogo abaixo do #conteudo
  28. 28. Solução<after css:content="#portal-searchbox" css:theme="#conteudo" />Este exemplo colocara o busca do Plone no final da página.
  29. 29. <drop /><drop css:content=".portlet .portletHeader" />É usado para apagar elementos do tema ou do conteúdoque não serão usados.O exemplo acima apagará o Header de todos os portlets
  30. 30. DesafioUsando a regra drop apague o “Apenas essa seção” da busca dosite.
  31. 31. Solução<drop css:content="#portal-searchbox .searchSection" />O exemplo acima apagará o “apenas nesta seção”que vem junto da busca do Plone.
  32. 32. <merge />Usado para combinar os valores dos atributos, especialmente para combinar classes de CSS<merge attributes="class" css:theme="#prato" css:content="#prato" />dTema: <div id=”prato” class="arroz"> Conteúdo: <div id=”prato” class="feijao">O resultado do exemplo será: <div class="arroz feijao">
  33. 33. DesafioCrie uma regra que junte o atriubute class do body do tema com o do conteúdo.
  34. 34. Solução<merge attributes="class" css:theme="body" css:content="body" /> .
  35. 35. <append /> <append css:content-children="head" css:theme="html head" /> <append css:theme="head"> <link rel="stylesheet" href="++theme++pacote/style.css"type="text/css" charset="utf-8" /> </append>Este exemplo inclui uma tag link no head do tema
  36. 36. Pais e FilhosAs regras podem tratar diretamente das tags filhas:<append css:content="#footer" css:theme="#footer"/><append css:content-children="#footer" css:theme="#footer"/>
  37. 37. DesafioUsando a regra append inclua um script function.js no seu tema.
  38. 38. Solução<append css:theme="head"><script type="text/javascript" src="/++theme++pacotefunction.js” /> </append>
  39. 39. Ordem de ExecuçãoO Diazo executará as regras segundo uma ordem própria e nãonecessariamente segundo a ordem escrita. Não é precisodecorar, mas é bom ter anotado:1º lugar: <before> e <append>2º lugar: <drop />3º lugar: <replace>4º lugar: Regras que usam attributes.5º lugar: Regras usando "theme-children"6º e último lugar: <after/>
  40. 40. Desafio do Dragão1. Escolha um template feito pelo seu sobrinho:freetemplatesonline.comtemplatesgratis.org2. Crie um pacote diazo instalável e teste3. Crie um arquivo com as regras necessárias parasubstituir conteudo4. Crie regras onde você use o estilo do template com ositens do head do Plone
  41. 41. Referências e DocumentaçãoVocê pode encontrar um exemplo de tema mais completo noseguinte endereço:http://plone.org/products/beyondskins.responsive
  42. 42. Referências e Documentaçãohttp://diazo.orghttp://pypi.python.org/pypi/diazohttp://www.simplesconsultoria.com.br/blog/como-criar-um-tema-para-plone-usando-o-diaestaaopresentacao
  43. 43. Criando Temas com Diazo @Tamosauskas

×