SlideShare uma empresa Scribd logo
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 = 'products@simplesconsultoria.com.br'
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	
  

Mais conteúdo relacionado

Mais procurados

Css tutorial
Css tutorialCss tutorial
Css tutorial
Cezar Bruno
 
HTML
HTMLHTML
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
Aula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.brAula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.br
DevCampos
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
Mateus Neves
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Uni Buscapé Company
 
A87c5f081429cf
A87c5f081429cfA87c5f081429cf
A87c5f081429cf
Vinicius de Melo
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
Sedu
 
Python 06
Python 06Python 06
Python 06
Bruno Catão
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
Mayza de Oliveira
 
Resumo html 2012 exercícios 01 21
Resumo html 2012   exercícios 01 21Resumo html 2012   exercícios 01 21
Resumo html 2012 exercícios 01 21
Leonam De Souza Calderaro
 
Python 07
Python 07Python 07
Python 07
Bruno Catão
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
Sliedesharessbarbosa
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
mario_venancio
 
Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5
Ricardo Pereira Rodrigues
 

Mais procurados (19)

Css tutorial
Css tutorialCss tutorial
Css tutorial
 
HTML
HTMLHTML
HTML
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Aula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.brAula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.br
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
A87c5f081429cf
A87c5f081429cfA87c5f081429cf
A87c5f081429cf
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Python 06
Python 06Python 06
Python 06
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Resumo html 2012 exercícios 01 21
Resumo html 2012   exercícios 01 21Resumo html 2012   exercícios 01 21
Resumo html 2012 exercícios 01 21
 
Python 07
Python 07Python 07
Python 07
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5
 

Destaque

O Futuro do Plone (RuPy-Br)
O Futuro do Plone (RuPy-Br)O Futuro do Plone (RuPy-Br)
O Futuro do Plone (RuPy-Br)
Simples Consultoria
 
O Futuro do Plone
O Futuro do PloneO Futuro do Plone
O Futuro do Plone
Simples Consultoria
 
O Estado do Plone - FISL 14
O Estado do Plone - FISL 14O Estado do Plone - FISL 14
O Estado do Plone - FISL 14
Simples Consultoria
 
O Futuro do Plone
O Futuro do PloneO Futuro do Plone
O Futuro do Plone
Simples Consultoria
 
PloneGov.Br: Cadê o .br que estava aqui?
PloneGov.Br: Cadê o .br que estava aqui?PloneGov.Br: Cadê o .br que estava aqui?
PloneGov.Br: Cadê o .br que estava aqui?
Simples Consultoria
 
Plone 5: Você ainda vai ter um!
Plone 5: Você ainda vai ter um!Plone 5: Você ainda vai ter um!
Plone 5: Você ainda vai ter um!
Simples Consultoria
 
Criando Temas com Diazo
Criando Temas com DiazoCriando Temas com Diazo
Criando Temas com Diazo
Simples Consultoria
 
Plone: Funcionalidades que todo gestor de conteúdo Plone deveria saber
Plone: Funcionalidades que todo gestor de conteúdo Plone deveria saberPlone: Funcionalidades que todo gestor de conteúdo Plone deveria saber
Plone: Funcionalidades que todo gestor de conteúdo Plone deveria saber
Simples Consultoria
 
O Futuro do Plone (PythonBrasil[8])
O Futuro do Plone (PythonBrasil[8])O Futuro do Plone (PythonBrasil[8])
O Futuro do Plone (PythonBrasil[8])
Simples Consultoria
 
Minicurso Ruby
Minicurso RubyMinicurso Ruby
Minicurso Ruby
Saulo Arruda
 
V de Vinagre: A história por trás da história do momento que mudou o Brasil
V de Vinagre: A história por trás da história do momento que mudou o BrasilV de Vinagre: A história por trás da história do momento que mudou o Brasil
V de Vinagre: A história por trás da história do momento que mudou o Brasil
Simples Consultoria
 
Criando temas para Joomla, Wordpress, Drupal e tudo mais sem tocar em templa...
Criando temas para Joomla, Wordpress, Drupal e tudo mais  sem tocar em templa...Criando temas para Joomla, Wordpress, Drupal e tudo mais  sem tocar em templa...
Criando temas para Joomla, Wordpress, Drupal e tudo mais sem tocar em templa...
Simples Consultoria
 
Lenguaje, framework, comunidad y cuenta bancaria: De teoría hasta la práctica
Lenguaje, framework,  comunidad y cuenta bancaria: De teoría hasta la prácticaLenguaje, framework,  comunidad y cuenta bancaria: De teoría hasta la práctica
Lenguaje, framework, comunidad y cuenta bancaria: De teoría hasta la práctica
Simples Consultoria
 
Gestión de Contenido con Plone
Gestión de Contenido con PloneGestión de Contenido con Plone
Gestión de Contenido con Plone
Simples Consultoria
 
Cómo Brasil está construyendo una nación digital con código abierto y Python
Cómo Brasil está construyendo una nación digital con código abierto y PythonCómo Brasil está construyendo una nación digital con código abierto y Python
Cómo Brasil está construyendo una nación digital con código abierto y Python
Simples Consultoria
 
Python como primeira linguagem de programação
Python como primeira linguagem de programaçãoPython como primeira linguagem de programação
Python como primeira linguagem de programação
Simples Consultoria
 
Integrando Python e JavaScript
Integrando Python e JavaScriptIntegrando Python e JavaScript
Integrando Python e JavaScript
Luiz Cláudio Silva
 
Node.js, Uma breve introdução
Node.js, Uma breve introduçãoNode.js, Uma breve introdução
Node.js, Uma breve introdução
Pablo Feijó
 
Collective Cover
Collective CoverCollective Cover
Collective Cover
Simples Consultoria
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
info_cimol
 

Destaque (20)

O Futuro do Plone (RuPy-Br)
O Futuro do Plone (RuPy-Br)O Futuro do Plone (RuPy-Br)
O Futuro do Plone (RuPy-Br)
 
O Futuro do Plone
O Futuro do PloneO Futuro do Plone
O Futuro do Plone
 
O Estado do Plone - FISL 14
O Estado do Plone - FISL 14O Estado do Plone - FISL 14
O Estado do Plone - FISL 14
 
O Futuro do Plone
O Futuro do PloneO Futuro do Plone
O Futuro do Plone
 
PloneGov.Br: Cadê o .br que estava aqui?
PloneGov.Br: Cadê o .br que estava aqui?PloneGov.Br: Cadê o .br que estava aqui?
PloneGov.Br: Cadê o .br que estava aqui?
 
Plone 5: Você ainda vai ter um!
Plone 5: Você ainda vai ter um!Plone 5: Você ainda vai ter um!
Plone 5: Você ainda vai ter um!
 
Criando Temas com Diazo
Criando Temas com DiazoCriando Temas com Diazo
Criando Temas com Diazo
 
Plone: Funcionalidades que todo gestor de conteúdo Plone deveria saber
Plone: Funcionalidades que todo gestor de conteúdo Plone deveria saberPlone: Funcionalidades que todo gestor de conteúdo Plone deveria saber
Plone: Funcionalidades que todo gestor de conteúdo Plone deveria saber
 
O Futuro do Plone (PythonBrasil[8])
O Futuro do Plone (PythonBrasil[8])O Futuro do Plone (PythonBrasil[8])
O Futuro do Plone (PythonBrasil[8])
 
Minicurso Ruby
Minicurso RubyMinicurso Ruby
Minicurso Ruby
 
V de Vinagre: A história por trás da história do momento que mudou o Brasil
V de Vinagre: A história por trás da história do momento que mudou o BrasilV de Vinagre: A história por trás da história do momento que mudou o Brasil
V de Vinagre: A história por trás da história do momento que mudou o Brasil
 
Criando temas para Joomla, Wordpress, Drupal e tudo mais sem tocar em templa...
Criando temas para Joomla, Wordpress, Drupal e tudo mais  sem tocar em templa...Criando temas para Joomla, Wordpress, Drupal e tudo mais  sem tocar em templa...
Criando temas para Joomla, Wordpress, Drupal e tudo mais sem tocar em templa...
 
Lenguaje, framework, comunidad y cuenta bancaria: De teoría hasta la práctica
Lenguaje, framework,  comunidad y cuenta bancaria: De teoría hasta la prácticaLenguaje, framework,  comunidad y cuenta bancaria: De teoría hasta la práctica
Lenguaje, framework, comunidad y cuenta bancaria: De teoría hasta la práctica
 
Gestión de Contenido con Plone
Gestión de Contenido con PloneGestión de Contenido con Plone
Gestión de Contenido con Plone
 
Cómo Brasil está construyendo una nación digital con código abierto y Python
Cómo Brasil está construyendo una nación digital con código abierto y PythonCómo Brasil está construyendo una nación digital con código abierto y Python
Cómo Brasil está construyendo una nación digital con código abierto y Python
 
Python como primeira linguagem de programação
Python como primeira linguagem de programaçãoPython como primeira linguagem de programação
Python como primeira linguagem de programação
 
Integrando Python e JavaScript
Integrando Python e JavaScriptIntegrando Python e JavaScript
Integrando Python e JavaScript
 
Node.js, Uma breve introdução
Node.js, Uma breve introduçãoNode.js, Uma breve introdução
Node.js, Uma breve introdução
 
Collective Cover
Collective CoverCollective Cover
Collective Cover
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 

Semelhante a Diazo para todos

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
Guga Alves
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
introfini
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
Israel Messias
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
Daniel Marcos
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Arlindo Santos
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
Leandro Santos
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Marcelo Mattos
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
Sérgio Laranjeira
 
Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)
Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)
Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)
Pedro Fernandes Vieira
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
antonio sérgio nogueira
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
Fábio Costa
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
Fábio Costa
 
Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )
Rodrigo Dias
 
Css Curso completo
Css Curso completoCss Curso completo
Css Curso completo
marcossonotec
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
Caio Gomes
 
Html capitulo 07
Html   capitulo 07Html   capitulo 07
Html capitulo 07
Alvaro Gomes
 

Semelhante a Diazo para todos (20)

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)
Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)
Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )Apostila Css ( Apostilando.com )
Apostila Css ( Apostilando.com )
 
Css Curso completo
Css Curso completoCss Curso completo
Css Curso completo
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
 
Html capitulo 07
Html   capitulo 07Html   capitulo 07
Html capitulo 07
 

Mais de Simples Consultoria

Collective.cover: one year later
Collective.cover: one year laterCollective.cover: one year later
Collective.cover: one year later
Simples Consultoria
 
Primeiros passos com Plone, o CMS Pythonico
Primeiros passos com Plone, o CMS PythonicoPrimeiros passos com Plone, o CMS Pythonico
Primeiros passos com Plone, o CMS Pythonico
Simples Consultoria
 
Plone.gov.br: Or how to leverage Plone in the Brazilian Government
Plone.gov.br: Or how to leverage Plone in the Brazilian GovernmentPlone.gov.br: Or how to leverage Plone in the Brazilian Government
Plone.gov.br: Or how to leverage Plone in the Brazilian Government
Simples Consultoria
 
How Brazil is building a digital nation with open source and Python
How Brazil is building a digital nation with open source and PythonHow Brazil is building a digital nation with open source and Python
How Brazil is building a digital nation with open source and Python
Simples Consultoria
 
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e  conta-bancária: Da teoria a práticaLinguagem, framework, comunidade e  conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
Simples Consultoria
 
Simplificando o Plone
Simplificando o PloneSimplificando o Plone
Simplificando o Plone
Simples Consultoria
 
O Estado do Plone
O Estado do PloneO Estado do Plone
O Estado do Plone
Simples Consultoria
 
MythBusting: Zero linhas de código e uma intranet em menos de sete minutos
MythBusting: Zero linhas de código e uma intranet em menos de sete minutosMythBusting: Zero linhas de código e uma intranet em menos de sete minutos
MythBusting: Zero linhas de código e uma intranet em menos de sete minutos
Simples Consultoria
 
O Estado do Plone
O Estado do PloneO Estado do Plone
O Estado do Plone
Simples Consultoria
 
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e conta-bancária: Da teoria a práticaLinguagem, framework, comunidade e conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
Simples Consultoria
 
A hard time giving back: Plone and Brazil
A hard time giving back: Plone and BrazilA hard time giving back: Plone and Brazil
A hard time giving back: Plone and Brazil
Simples Consultoria
 
Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!
Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!
Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!
Simples Consultoria
 
SQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methodsSQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methods
Simples Consultoria
 

Mais de Simples Consultoria (13)

Collective.cover: one year later
Collective.cover: one year laterCollective.cover: one year later
Collective.cover: one year later
 
Primeiros passos com Plone, o CMS Pythonico
Primeiros passos com Plone, o CMS PythonicoPrimeiros passos com Plone, o CMS Pythonico
Primeiros passos com Plone, o CMS Pythonico
 
Plone.gov.br: Or how to leverage Plone in the Brazilian Government
Plone.gov.br: Or how to leverage Plone in the Brazilian GovernmentPlone.gov.br: Or how to leverage Plone in the Brazilian Government
Plone.gov.br: Or how to leverage Plone in the Brazilian Government
 
How Brazil is building a digital nation with open source and Python
How Brazil is building a digital nation with open source and PythonHow Brazil is building a digital nation with open source and Python
How Brazil is building a digital nation with open source and Python
 
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e  conta-bancária: Da teoria a práticaLinguagem, framework, comunidade e  conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
 
Simplificando o Plone
Simplificando o PloneSimplificando o Plone
Simplificando o Plone
 
O Estado do Plone
O Estado do PloneO Estado do Plone
O Estado do Plone
 
MythBusting: Zero linhas de código e uma intranet em menos de sete minutos
MythBusting: Zero linhas de código e uma intranet em menos de sete minutosMythBusting: Zero linhas de código e uma intranet em menos de sete minutos
MythBusting: Zero linhas de código e uma intranet em menos de sete minutos
 
O Estado do Plone
O Estado do PloneO Estado do Plone
O Estado do Plone
 
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e conta-bancária: Da teoria a práticaLinguagem, framework, comunidade e conta-bancária: Da teoria a prática
Linguagem, framework, comunidade e conta-bancária: Da teoria a prática
 
A hard time giving back: Plone and Brazil
A hard time giving back: Plone and BrazilA hard time giving back: Plone and Brazil
A hard time giving back: Plone and Brazil
 
Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!
Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!
Aumentando seu Karma: Como a cultura open source nos torna pessoas melhores!
 
SQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methodsSQLAlchemy e Plone: no more zsql methods
SQLAlchemy e Plone: no more zsql methods
 

Último

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 

Último (6)

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 

Diazo para todos

  • 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>
  • 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  
  • 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