José Mota, profile picture
Carregado porJosé Mota
KEY, PDF458 visualizações

Design Para Desenvolvimento Open Source

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.

Incorporar apresentação

Baixado 20 vezes
José Mota Design para programadores open-source Princípios e práticas @josemotanet
Eu — José Mota
Eu — José Mota • A 3 dias da Licenciatura em Eng. Informática — ISEP.
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.
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).
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.
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.
Sumário
Sumário • Princípios • Equilíbrio • Cor • Usabilidade
Sumário • Princípios • Equilíbrio • Cor • Usabilidade • Práticas • Web standards • Frameworks: CSS, JS, server-side (Zend, Rails, Django, …) • Engenharia de aplicações
Princípios
Equilíbrio
Equilíbrio • Equilíbrio vertical
Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal
Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal • Simetria
Equilíbrio • Equilíbrio vertical • Equilíbrio horizontal • Simetria • Prioridades
Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Simetria • Prioridades
Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Grelhas • Simetria • Prioridades
Equilíbrio • Equilíbrio vertical • Whitespace • Equilíbrio horizontal • Grelhas • Simetria • Medida unitária • Prioridades
Cor
Cor • Conteúdo — Melhor legibilidade
Cor • Conteúdo — Melhor legibilidade • Exposição — Mais intensidade e diversidade
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 • …
Usabilidade
Usabilidade • Estudar audiência — o que destacar?
Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros
Usabilidade • Estudar audiência — o que destacar? • Ícones próprios e claros • Botões fáceis (não apenas clicar no texto, :hover, …)
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?
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
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
Práticas
Web standards
Web standards • XHTML 1.0 — o mais desa ador, o mais íntegro • HTML 5? (modernizr.com)
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
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
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
Frameworks
Frameworks • HTML — Haml
Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, …
Frameworks • HTML — Haml • CSS — Sass, Less, 960.gs, Blueprint, … • JS — jQuery, Prototype, Mootools, YUI …
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, …?
Porquê frameworks?
Porquê frameworks? • Menos trabalho, mais resultados
Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito)
Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito) • De facto standard
Porquê frameworks? • Menos trabalho, mais resultados • Ambiente produtivo (aquele que dá guito) • De facto standard • Menos entediante, menos frustrante, mais divertido
Engenharia de aplicações
Engenharia de aplicações • Papel e caneta 1º, não programem logo.
Engenharia de aplicações • Papel e caneta 1º, não programem logo. • Programação ágil é o futuro (aparentemente)
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.
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!
Exemplo Linux @ DEI
Obrigado! Agora a parte das perguntas.

Mais conteúdo relacionado

PDF
The Outcome Economy
porHelge Tennø
 
PPTX
Exemplo
porUniversidade Federal do Piauí
 
KEY
ISEPonRails
porJosé Mota
 
KEY
How agile is rails
porJosé Mota
 
KEY
Psicologia, Emoção & Rails - Uma perspetiva mais humana do desenvolvimento Web
porJosé Mota
 
PDF
Will Agile Change The World ?
porJoão Cerdeira
 
PDF
Conheça o Épico, o seu tema para Wordpress
porHenrique Carvalho
 
PDF
What's Next in Growth? 2016
porAndrew Chen
 
The Outcome Economy
porHelge Tennø
 
Exemplo
porUniversidade Federal do Piauí
 
ISEPonRails
porJosé Mota
 
How agile is rails
porJosé Mota
 
Psicologia, Emoção & Rails - Uma perspetiva mais humana do desenvolvimento Web
porJosé Mota
 
Will Agile Change The World ?
porJoão Cerdeira
 
Conheça o Épico, o seu tema para Wordpress
porHenrique Carvalho
 
What's Next in Growth? 2016
porAndrew Chen
 

Semelhante a Design Para Desenvolvimento Open Source

PDF
Unidade 1 - Design de Interface do Usuário.pdf
porKaioJonathasAlencarG
 
PPTX
Introdução sobre desenvolvimento web
porRodrigo Rodrigues
 
PPTX
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
porLuiz Antonio
 
PDF
Brasil, Open Source e o Mundo dos Negócios
porOpenBossa
 
KEY
Best pratices para desenvolvimento mobile
pornipjc
 
PPT
RPC.com.br - Produto
porAdriano Brandao
 
PDF
Designing Interfaces
porDanilo Carneiro
 
PDF
It skills para rh aprender e contratar
porAle Uehara
 
PDF
O mercado de trabalho para a T.I.
porYan Magalhães
 
PPTX
Souza naves
porFernando Henrique Gaffo
 
ODP
Apresentação Minas - Desenvolvendo Sites
porthiagolima
 
PDF
P01 - Como ser um desenvolvedor melhor
porLeandro Ferreira
 
PPTX
Rup e metodos ágies
porMárcia Capellari
 
PPT
Webdesign revisãao 2018-02
porRenato Melo
 
PPT
Webdesign Revisão 2019-01
porRenato Melo
 
PPT
Revisão Webdesign
porRenato Melo
 
PDF
Design para a web - da interface ao branding
porJoão Alves
 
PPT
Padrões Web & Code Standard
porToni Albuquerque
 
PPTX
Visão Geral De Desenvolvimento Web Sre 2012
porCarlos Casalicchio
 
PDF
Web Dev Camp
porFabrício Lopes Sanchez
 
Unidade 1 - Design de Interface do Usuário.pdf
porKaioJonathasAlencarG
 
Introdução sobre desenvolvimento web
porRodrigo Rodrigues
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
porLuiz Antonio
 
Brasil, Open Source e o Mundo dos Negócios
porOpenBossa
 
Best pratices para desenvolvimento mobile
pornipjc
 
RPC.com.br - Produto
porAdriano Brandao
 
Designing Interfaces
porDanilo Carneiro
 
It skills para rh aprender e contratar
porAle Uehara
 
O mercado de trabalho para a T.I.
porYan Magalhães
 
Souza naves
porFernando Henrique Gaffo
 
Apresentação Minas - Desenvolvendo Sites
porthiagolima
 
P01 - Como ser um desenvolvedor melhor
porLeandro Ferreira
 
Rup e metodos ágies
porMárcia Capellari
 
Webdesign revisãao 2018-02
porRenato Melo
 
Webdesign Revisão 2019-01
porRenato Melo
 
Revisão Webdesign
porRenato Melo
 
Design para a web - da interface ao branding
porJoão Alves
 
Padrões Web & Code Standard
porToni Albuquerque
 
Visão Geral De Desenvolvimento Web Sre 2012
porCarlos Casalicchio
 
Web Dev Camp
porFabrício Lopes Sanchez
 

Design Para Desenvolvimento Open Source

  • 1.
    José Mota Design para programadores open-source Princípios e práticas @josemotanet
  • 2.
  • 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.
  • 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.
  • 12.
  • 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.
  • 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.
  • 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.
  • 32.
  • 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.
  • 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, …?
  • 42.
  • 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.
  • 55.