Design Para Desenvolvimento Open Source

912 views

Published on

Slideshow presented to the Portolinux meetup, regarding principles and practices on designing for the web in open-source.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
912
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design Para Desenvolvimento Open Source

  1. 1. José Mota Design para programadores open-source Princípios e práticas @josemotanet
  2. 2. Eu — José Mota
  3. 3. Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP.
  4. 4. Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP. • 3 anos de experiência pro ssional em web design e desenvolvimento open-source. Inclui freelance.
  5. 5. Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP. • 3 anos de experiência pro ssional em web design e desenvolvimento open-source. Inclui freelance. • Trabalho na Weemagine (www.weebiz.com).
  6. 6. Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP. • 3 anos de experiência pro ssional em web design e desenvolvimento open-source. Inclui freelance. • Trabalho na Weemagine (www.weebiz.com). • Não uso M$ Windows há ano e meio. Tem peso.
  7. 7. Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP. • 3 anos de experiência pro ssional em web design e desenvolvimento open-source. Inclui freelance. • Trabalho na Weemagine (www.weebiz.com). • Não uso M$ Windows há ano e meio. Tem peso. • Linguagens que programo: PHP e Ruby.
  8. 8. Sumário
  9. 9. Sumário • Princípios • Equilíbrio • Cor • Usabilidade
  10. 10. Sumário • Princípios • Equilíbrio • Cor • Usabilidade • Práticas • Web standards • Frameworks: CSS, JS, server-side (Zend, Rails, Django, …) • Engenharia de aplicações
  11. 11. Princípios
  12. 12. Equilíbrio
  13. 13. Equilíbrio • Equilíbrio vertical
  14. 14. Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal
  15. 15. Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal • Simetria
  16. 16. Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal • Simetria • Prioridades
  17. 17. Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Simetria • Prioridades
  18. 18. Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Grelhas • Simetria • Prioridades
  19. 19. Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Grelhas • Simetria • Medida unitária • Prioridades
  20. 20. Cor
  21. 21. Cor • Conteúdo — Melhor legibilidade
  22. 22. Cor • Conteúdo — Melhor legibilidade • Exposição — Mais intensidade e diversidade
  23. 23. Cor • Conteúdo — Melhor legibilidade • Exposição — Mais intensidade e diversidade • Interface — Tirar proveito de psicologia da cor • Vermelho - perigo / urgência / falha • Verde - aprovação / noti cação / dinheiro • Amarelo - cuidado / alarme / energia / mensagens • Cinzento - incapacidade / deprecação / cronologia • …
  24. 24. Usabilidade
  25. 25. Usabilidade • Estudar audiência — o que destacar?
  26. 26. Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros
  27. 27. Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros • Botões fáceis (não apenas clicar no texto, :hover, …)
  28. 28. Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros • Botões fáceis (não apenas clicar no texto, :hover, …) • Primeira página — o quê & como pôr a informação?
  29. 29. Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros • Botões fáceis (não apenas clicar no texto, :hover, …) • Primeira página — o quê & como pôr a informação? • Pesquisa evidente
  30. 30. Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros • Botões fáceis (não apenas clicar no texto, :hover, …) • Primeira página — o quê & como pôr a informação? • Pesquisa evidente • Hierarquia
  31. 31. Práticas
  32. 32. Web standards
  33. 33. Web standards • XHTML 1.0 — o mais desa ador, o mais íntegro • HTML 5? (modernizr.com)
  34. 34. Web standards • XHTML 1.0 — o mais desa ador, o mais íntegro • HTML 5? (modernizr.com) • CSS 3 — menos backgrounds, mais out-of-the-box
  35. 35. Web standards • XHTML 1.0 — o mais desa ador, o mais íntegro • HTML 5? (modernizr.com) • CSS 3 — menos backgrounds, mais out-of-the-box • Javascript inobtrusivo (document.onLoad) e e caz
  36. 36. Web standards • XHTML 1.0 — o mais desa ador, o mais íntegro • HTML 5? (modernizr.com) • CSS 3 — menos backgrounds, mais out-of-the-box • Javascript inobtrusivo (document.onLoad) e e caz • Floated Div based layouts ≠ Table based layout
  37. 37. Frameworks
  38. 38. Frameworks • HTML — Haml
  39. 39. Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, …
  40. 40. Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, … • JS — jQuery, Prototype, Mootools, YUI …
  41. 41. Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, … • JS — jQuery, Prototype, Mootools, YUI … • server-side • PHP: Zend, CodeIgniter, CakePHP, Kohana, … • Ruby: Rails, Merb, … • Python: Django, …?
  42. 42. Porquê frameworks?
  43. 43. Porquê frameworks? • Menos trabalho, mais resultados
  44. 44. Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito)
  45. 45. Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito) • De facto standard
  46. 46. Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito) • De facto standard • Menos entediante, menos frustrante, mais divertido
  47. 47. Engenharia de aplicações
  48. 48. Engenharia de aplicações • Papel e caneta 1º, não programem logo.
  49. 49. Engenharia de aplicações • Papel e caneta 1º, não programem logo. • Programação ágil é o futuro (aparentemente)
  50. 50. Engenharia de aplicações • Papel e caneta 1º, não programem logo. • Programação ágil é o futuro (aparentemente) • Pesquisa • Já está feito? Aproveitar. • Não está feito? Fazer para aproveitar.
  51. 51. Engenharia de aplicações • Papel e caneta 1º, não programem logo. • Programação ágil é o futuro (aparentemente) • Pesquisa • Já está feito? Aproveitar. • Não está feito? Fazer para aproveitar. • Desenhar uma aplicação não é só Photoshop. • ALTAMiENTE!
  52. 52. Exemplo Linux @ DEI
  53. 53. Obrigado! Agora a parte das perguntas.

×