Design Para Desenvolvimento Open Source
Transferir como KEY, PDF•1 gostou•458 visualizações
O documento apresenta princípios e práticas de design para programadores open-source, destacando a importância do equilíbrio, cor e usabilidade. Aborda também o uso de padrões da web, frameworks e a engenharia de aplicações, enfatizando a eficácia de métodos ágeis. José Mota, autor e profissional com experiência em web design, oferece insights sobre a criação de interfaces acessíveis e funcionais.
Design Para Desenvolvimento Open Source
- 1. José Mota Design para programadores open-source Princípios e práticas @josemotanet
- 2. Eu — José Mota
- 3. Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP.
- 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. 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. 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. 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. Sumário
- 9. Sumário • Princípios • Equilíbrio • Cor • Usabilidade
- 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. Princípios
- 12. Equilíbrio
- 13. Equilíbrio • Equilíbrio vertical
- 14. Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal
- 15. Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal • Simetria
- 16. Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal • Simetria • Prioridades
- 17. Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Simetria • Prioridades
- 18. Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Grelhas • Simetria • Prioridades
- 19. Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Grelhas • Simetria • Medida unitária • Prioridades
- 20. Cor
- 21. Cor • Conteúdo — Melhor legibilidade
- 22. Cor • Conteúdo — Melhor legibilidade • Exposição — Mais intensidade e diversidade
- 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. Usabilidade
- 25. Usabilidade • Estudar audiência — o que destacar?
- 26. Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros
- 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. 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. 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. 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. Práticas
- 32. Web standards
- 33. Web standards • XHTML 1.0 — o mais desa ador, o mais íntegro • HTML 5? (modernizr.com)
- 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. 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. 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. Frameworks
- 38. Frameworks • HTML — Haml
- 39. Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, …
- 40. Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, … • JS — jQuery, Prototype, Mootools, YUI …
- 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, …?
- 43. Porquê frameworks? • Menos trabalho, mais resultados
- 44. Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito)
- 45. Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito) • De facto standard
- 46. Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito) • De facto standard • Menos entediante, menos frustrante, mais divertido
- 47. Engenharia de aplicações
- 48. Engenharia de aplicações • Papel e caneta 1º, não programem logo.
- 49. Engenharia de aplicações • Papel e caneta 1º, não programem logo. • Programação ágil é o futuro (aparentemente)
- 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. 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. Exemplo Linux @ DEI
- 55. Obrigado! Agora a parte das perguntas.