Arte Do Design Para Plone

2,207 views

Published on

Palestra de André Nogueira, apresentada durante o Plone Symposium South America de 2009, em São Paulo - Brasil

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,207
On SlideShare
0
From Embeds
0
Number of Embeds
411
Actions
Shares
0
Downloads
29
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Arte Do Design Para Plone

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

×