arte do design para plone
DESCRIPTION
Palestra de André Nogueira, apresentada durante o Plone Symposium South America de 2009, em São Paulo - BrasilTRANSCRIPT
![Page 1: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/1.jpg)
André Nogueira
![Page 2: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/2.jpg)
Um pouco sobre a história da Simples...
![Page 3: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/3.jpg)
Simples Consultoria
• Usabilidade• Arquitetura da Informação• Gestão de Conteúdo
![Page 4: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/4.jpg)
Simples Consultoria
• Busca por um CMS:– Fácil de usar– Acessível– Foco na organização de conteúdo– Aderente aos padrões web
![Page 5: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/5.jpg)
Simples Consultoria
• Testamos vários CMS• Iniciamos o desenvolvimento de um
CMS próprio.
![Page 6: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/6.jpg)
Até que um dia...
![Page 7: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/7.jpg)
![Page 8: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/8.jpg)
Simples Consultoria + Plone =
• + 500 projetos em Plone• + 200 pessoas treinadas em Plone e
CSS• Diversos produtos desenvolvidos e
disponibilizado a comunidade
![Page 9: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/9.jpg)
A arte do design para Plone
![Page 10: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/10.jpg)
Ou em outras palavras...
![Page 11: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/11.jpg)
Como fazer qualquer coisa com o Plonee garantir que fique bonito e funcional.
![Page 12: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/12.jpg)
4 histórias rápidas:
![Page 13: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/13.jpg)
História 1
![Page 14: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/14.jpg)
World Usability Day
Feito em poucas horasBaseado em layout existente
![Page 15: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/15.jpg)
World Usability Day
Um deficiente visual elogiou o site,pois conseguiu fazer sua inscrição
![Page 16: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/16.jpg)
História 2
![Page 17: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/17.jpg)
AbraspeAssociação Brasileira de PedestresMantido por usuário com mais de 70 anos
![Page 18: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/18.jpg)
Abraspe
Maior problema enfrentado:• Configurar o Outlook
![Page 19: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/19.jpg)
História 3
![Page 20: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/20.jpg)
Simples “Estacionamentos”Nosso antigo site indicava qual o
estacionamento mais próximo denossos eventos
![Page 21: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/21.jpg)
Simples “Estacionamentos”
Éramos um dos primeiros resultado noGoogle para a tag “estacionamento”
![Page 22: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/22.jpg)
História 4
![Page 23: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/23.jpg)
ECA 18 anos
Website ColaborativoVárias pessoas adicionando conteúdo
![Page 24: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/24.jpg)
ECA 18 anos
Depois de receber muita informaçãoO site virou um livro
![Page 25: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/25.jpg)
Todos esses sites foram feitosapenas com alterações de CSS...
![Page 26: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/26.jpg)
...usando o melhor “framework”para desenvolver um Plone site:
![Page 27: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/27.jpg)
O próprio Plone
![Page 28: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/28.jpg)
Características do Plone “out of the box”
• Fácil de usar e colaborar• Alto nível de acessibilidade• SEO• Separação de conteúdo, estrutura e
apresentação
![Page 29: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/29.jpg)
Regras para criar um Plone Site de sucesso:
![Page 30: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/30.jpg)
Regra #1
Pense primeiro, faça depois
![Page 31: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/31.jpg)
Pense primeiro, faça depois
• Plone é uma ferramenta fantástica• Mas não faz tudo sozinho• Não basta instalar o site e pronto
![Page 32: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/32.jpg)
Pense primeiro, faça depois
• Também precisa de passos básicos:– Levantamento de informações– Briefing– Análise dos usuários– Análise da concorrência e mercado– Arquitetura da informação
![Page 33: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/33.jpg)
Regra #2
Faça o design para o seu site,não para um Plone site.
![Page 34: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/34.jpg)
Design do seu site
• Um bom design é bom no Plone, no Drupal, no Joomla, Wordpress, HTML...
• Pense apenas nos padrões de design, de usabilidade, consistência da interface...
• Respeite todos os dados levantados na regra anterior
![Page 35: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/35.jpg)
Design do seu site
• A estrutura do Plone não foi criada ao acaso.• Um bom design “encaixa” no Plone.• Se não, pode ter algo errado com seu design.
![Page 36: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/36.jpg)
Regra #3
Design não é CSS
![Page 37: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/37.jpg)
Design não é CSS
• Lugar para fazer layout é no Photoshop, Gimp, ou na sua ferramenta preferida
• Nunca implemtente um sitesem um layout
![Page 38: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/38.jpg)
Regra #4
Não estrague as coisas
![Page 39: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/39.jpg)
• A instalação Padrão cobre 90% das necessidades de sites
• Não altere as coisas sem necessidade
Não estrague as coisas!
![Page 40: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/40.jpg)
Não estrague as coisas!
• Não mude templates apenas para alterar a aparência.
• Consistência da interface.• Acessibilidade.
![Page 41: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/41.jpg)
Não estrague as coisas!
• Deliverance é uma ferramenta incrível,mas pode criar vários problemas– Acessibilidade– Padrões web– Facilidade de uso– SEO
• Só deve ser utilizado por pessoas habilitadas
![Page 42: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/42.jpg)
Regra #5
Vire um Ninja CSS
![Page 43: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/43.jpg)
• Toda apresentação precisa estar na CSS.
• Não misture Apresentação e Estrutura.
• Com conhecimento avançado de CSS dá pra implementar qualquer layout
CSS Ninja
![Page 44: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/44.jpg)
• Não é possivel implementar um bom layout em qualquer sistema sem CSS
• Ou melhor, sem um bom CSS
CSS Ninja
![Page 45: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/45.jpg)
Regra #6
Livre-se do desnecessário
![Page 46: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/46.jpg)
• Elimine tudo o que não estiver usando:– CSS– JS– KSS– IMG
Livre-se do desnecessário
![Page 47: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/47.jpg)
• Use CSS Sprites– Todas as imagens num único arquivo
Livre-se do desnecessário
![Page 48: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/48.jpg)
Regra #7
Tome cuidado com Acessibilidade
![Page 49: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/49.jpg)
• Garanta que tudo o que você desenvolver vai seguir os padrões
• Nunca esqueça de coisas básicas:– Alt das imagens– Atalhos– Cuidado com o contraste– Cuidado com scripts
<p class="hiddenStructure">
<a accesskey="2" href="documentContent">Ir para o conteúdo.</a> |
<a accesskey="6" href="portlet-navigation-tree">Ir para a navegação</a>
</p>
Acessibilidade
![Page 50: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/50.jpg)
Regra #8
Cuide bem do seu usuário
![Page 51: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/51.jpg)
• Ensine seu usuário a usar o sistema.• Ensine os conceitos do Plone.• Ofereça material de apoio.
Cuide do seu usuário
![Page 52: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/52.jpg)
Regra #9
Não complique as coisas
![Page 53: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/53.jpg)
• Mantenha as coisas simples:– Para seu usuário.– Para você.
• De nada adianta uma ferramenta poderosa se ela não for fácil de usar
Não complique as coisas
![Page 54: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/54.jpg)
“Simplicity is the ultimate sophistication”Leonardo Davinci
![Page 55: Arte Do Design Para Plone](https://reader035.vdocuments.pub/reader035/viewer/2022062513/555ad516d8b42a024a8b4a82/html5/thumbnails/55.jpg)
André Nogueira – Plone Symposium South America [email protected]
http://www.simplesconsultoria.com.br