Como pensar em Orientação a Objetos

[João Prado 64]

E João Prado, eu tenho uma pequena sugestão. Você deixou o botão com efeito negativo (excluir pergunta por exemplo) da mesma cor que o botão com efeito positivo (responder no caso), não seria interessante deixar os botões com efeito negativo com uma cor diferente?

 

Certo. O botão "excluir pergunta" é visível apenas para o criador do form. Neste caso, ele esta igual ao "Salvar", mas será que é mesmo necessário criar mais um estilo apenas para diferenciar isso? Não é melhor manter o simples?

 

Como é só o criador do form que terá acesso a estes botões negativos, não vejo necessidade de diferenciá-los, afinal presumo que o cara saiba o que ele quer, certo?

 

 

Mas valeu a sugestão, era algo que eu realmente não tinha me atentado :)

[João Batista Neto 448]

Você definiu um CSS para um botão new, que já está na cor Verde.

 

...

 

Se eu mais tarde quero que um botão de confirmação seja utilizado para adicionar uma pergunta, adicionado assim o "+" ao ínicio dele. Bastaria criar uma classe

.action-create {
   content: '+';
   padding-right: 3px;
}

 

JCMais, veja só, o new é exatamente isso, não existe nada além disso, veja:

 

.new:before {
content: "+ ";
font-weight: bold;
}

 

O estilo acima é, exatamente, o estilo do .new, nada além disso!

 

Se eu mais tarde quero que um botão de confirmação seja utilizado para adicionar uma pergunta, adicionado assim o "+" ao ínicio dele. Bastaria criar uma classe

 

Novamente, é exatamente o que foi feito:

 

.button.new {
background-color: #4E9A06;
color: #FFFFFF;
}

.button.new.down {
	background-color: #3B7A2A;
}

 

Na prática, utilizei o Cascading do CSS para "herdar" o estilo do .button e do .new, que já estavam definidos. O .button.new é apenas a definição do estilo específico desse botão.

 

Para usar:

<a class="button new" href="#" title="Botão">Botão</a>

 

Sei que CSS não é minha área, tenho plena consciência de que meus conhecimentos em CSS são limitados, mas o que estou vendo você sugerir é exatamente o que eu fiz, porém com nomenclatura diferente.

 

Não tenho nenhum problema em fazer um merge no nosso repositório com qualquer ponto de vista diferente do meu, porém é fundamental que eu compreenda qual é o objetivo final pois, pelo que estou vendo, não há um objetivo, apenas mudança de nomenclatura.

[T.Colucci 33]

Certo. O botão "excluir pergunta" é visível apenas para o criador do form. Neste caso, ele esta igual ao "Salvar", mas será que é mesmo necessário criar mais um estilo apenas para diferenciar isso? Não é melhor manter o simples?

 

Como é só o criador do form que terá acesso a estes botões negativos, não vejo necessidade de diferenciá-los, afinal presumo que o cara saiba o que ele quer, certo?

 

 

Mas valeu a sugestão, era algo que eu realmente não tinha me atentado :)

 

Opa, tô acompanhando o tópico e estou curtindo muito, altíssimo nível! Parabéns a todos!

 

--

 

Agora deixa eu dar um pitaco, hehehe

 

João, você está certo e está errado.

 

Sim, presumimos que sim, o autor saberá o que ele quer fazer.

 

Mas, quanto mais você "indicar" o caminho, facilitar o máximo a diferenciação dos elementos, mais simples e rápida será a leitura sobre a interface. É nesses caos que, por exemplo, o cara está tão apressado e acaba clicando no botão errado. Já imaginou a "shit"?

 

A sugestão é bem válida. :)

 

 

De restante, está bem simples e direto! Parabéns!

 

:clap:

[João Batista Neto 448]

Mas, quanto mais você "indicar" o caminho, facilitar o máximo a diferenciação dos elementos, mais simples e rápida será a leitura sobre a interface. É nesses caos que, por exemplo, o cara está tão apressado e acaba clicando no botão errado. Já imaginou a "shit"?

 

Tiago,

 

Imagine uma situação onde tenhamos 3 botões: Salvar, Excluir e Adicionar.

Três cores diferentes: Azul, Vermelho e Verde.

 

Não virará um carnaval a interface de usuário?

[T.Colucci 33]

Tiago,

 

Imagine uma situação onde tenhamos 3 botões: Salvar, Excluir e Adicionar.

Três cores diferentes: Azul, Vermelho e Verde.

 

Não virará um carnaval a interface de usuário?

 

 

Não virará se as cores escolhidas foram bem combinadas. A questão é o usuário não lê o que está escrito. A percepção por cor é muito mais rápida do que a leitura de uma palavra. E como eu disse, em uma hipotética situação de pressa (nem tão hipotética assim) alguém trocar o "salvar" por "excluir" não é muito difícil...

 

É só uma sugestão com um pé de usabilidade. Como o projeto não tem esse foco, talvez não seja necessário. Mas, achei interessante explicar o por quê isso seria muito bom em uma aplicação "real". Talvez evite dores de cabeça futuras... :P

 

:)

 

 

[João Batista Neto 448]

É só uma sugestão com um pé de usabilidade. Como o projeto não tem esse foco, talvez não seja necessário. Mas, achei interessante explicar o por quê isso seria muito bom em uma aplicação "real".

 

O foco do projeto é adquirir conhecimento multidisciplinar. O desenvolvimento web envolve diversas áreas de conhecimento e, sim, usabilidade é uma delas!

 

;)

[João Prado 64]

Concordo Tiago, alterei a página de edição e o arquivo com as especificações.

 

Edição - http://www.pradoarts.com.br/imastersform/edit.jpg

Especificações - http://www.pradoarts.com.br/imastersform/details.png

 

 

Realmente facilita a vida do usuário. Valeu pela ajuda :)

[T.Colucci 33]

O foco do projeto é adquirir conhecimento multidisciplinar. O desenvolvimento web envolve diversas áreas de conhecimento e, sim, usabilidade é uma delas!

 

;)

 

Bacana!

 

Então vou mais além:

 

- Quando vamos projetar uma interface devemos pensar o que o usuário tem uma lógica para cada uso da aplicação e com isso bem definido, devemos facilitar esse caminho.

- No caso do projeto, o administrador pode: Cadastrar uma pergunta, alterar uma pergunta e excluir uma pergunta. Cada ação muito diferente das demais. Deve-se pensar na sequência que ele irá percorrer em cada ação dessas e ajustar os elementos (botões, formulários, avisos e etc) de uma forma que fique claro o caminho para executar essa ação. As cores, como já disse, é um dos mais eficientes modos de identificação/diferenciação que podemos usar.

- Outro ponto é: não adianta também cada coisa ter uma cor muito diferente ou estilo. Prevalece o bom senso e bom gosto. Uma unidade visual é importante, senão...

 

É basicamente isso! Não existe segredo.

 

"Facilite para o usuário. Sempre."

[João Batista Neto 448]

Cadastrar uma pergunta, alterar uma pergunta e excluir uma pergunta.

 

Deve-se pensar na sequência que ele irá percorrer em cada ação dessas e ajustar os elementos (botões, formulários, avisos e etc) de uma forma que fique claro o caminho para executar essa ação.

 

Sim, nesse caso, a sequência seria:

 

[Adicionar] [Excluir] [salvar]

 

Ele vai adicionando as perguntas e alternativas, é o primeiro passo.

 

O excluir é algo que pode, ou não, ocorrer. Por isso fica centralizado.

 

Salvar é o último passo, fica no lado direito e tem o mesmo sentido visual que o botão "Próximo", que também deve ficar no lado direito.

 

"Facilite para o usuário. Sempre."

 

:clap:

[T.Colucci 33]

Sim, nesse caso, a sequência seria:

 

[Adicionar] [Excluir] [salvar]

 

Ele vai adicionando as perguntas e alternativas, é o primeiro passo.

 

O excluir é algo que pode, ou não, ocorrer. Por isso fica centralizado.

 

Salvar é o último passo, fica no lado direito e tem o mesmo sentido visual que o botão "Próximo", que também deve ficar no lado direito.

 

 

 

:clap:

 

 

Perfeito! Definir essa sequência é o primeiro passo (talvez, na minha ótica, até o mais importante).

 

Feito isso, deve-se pensar: Os botões devem ter tamanho iguais (foco igual) ou um deve se diferenciar dos demais (ex: um botão Salvar gigante :P)?

 

Só penso que o botão excluir, por ser uma ação definitiva, deveria estar em um posicionamento diferente dos demais. Talvez na mesma linha, mas em lado oposto.

 

Ele vai, adicionar e com certeza irá salvar.

Mas ele não irá; ou irá; apagar. Não vejo motivo para aninhar os três no mesmo bloco. Pode ser um problema futuro.

 

Por se tratar de uma ação definitiva, ela deveria ter um caminho a ser percorrido diferente dos demais.

 

:)

 

 

 

 

[JCMais 75]

JB, você continua sem entender, provavelmente porque eu não soube expor corretamente aquilo que tentei.

 

button.css

.button {
padding: 4px 12px;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
color: #666666;
box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
border-radius: 4px;
}

.button:hover {
	color:#333333;
}

.button.down {
	box-shadow: 1px 1px 3px rgba(0,0,0,0.4) inset;
	background-color: #FDFDFD;
}

 

button.new.css

.new:before {
content: "+ ";
font-weight: bold;
}

.button.new {
background-color: #4E9A06;
color: #FFFFFF;
}

.button.new.down {
	background-color: #3B7A2A;
}

 

 

Agora queremos outro botão, também verde, porém para Salvar as alterações em determinado formulário:

button.save.css

.button.save {
background-color: #4E9A06;
color: #FFFFFF;
}

.button.save.down {
	background-color: #3B7A2A;
}

 

Foi isso o que eu quis dizer, repetiu código. Eu sugeri separar os botões primários ( basicamente, o normal, azul, verde e vermelho ) e depois aplicar as regras sem base nestes, isso deve ser feito no HTML, com o uso das classes adequadas, e não diretamente no CSS. O alvo da minha sugestão não foi a nomeclatura, eu não mudei o nome que você criou, pq eu criei aquele botão antes de você enviar o seu, apenas o havia criado com a nomeclatura que eu utilizo, pois não sabia qual seria a utilizada. Neste caso, ficaria algo assim:

button.confirm.css

.button.confirm {
background-color: #4E9A06;
color: #FFFFFF;
}
.button.confirm.down {
	background-color: #3B7A2A;
}

 

button.new.css

.new:before {
content: "+ ";
font-weight: bold;
}

 

button.new.html

<a class="button confirm new" title="Adicionar Nova Pergunta">Pergunta</a>

 

E uma pequena dúvida, teria algum motivo especifico para está utilizando uma classe(down), no local de utilizar o seletor :active?

[João Batista Neto 448]

Agora queremos outro botão, também verde

 

A questão das cores eu já havia compreendido e, essa situação específica, eu concordo contigo.

 

Porém, seu Pull Request foi muito além disso. Eram essas outras várias mudanças que eu não havia compreendido. Quanto ao verde, estou fazendo um ajuste aqui que vai resolver definitivamente essa questão.

 

teria algum motivo especifico para está utilizando uma classe(down), no local de utilizar o seletor :active?

 

Não, não há, podemos utilizar o :active se achar mais adequado.

 

;)

 

Só penso que o botão excluir, por ser uma ação definitiva, deveria estar em um posicionamento diferente dos demais. Talvez na mesma linha, mas em lado oposto.

 

Eu, particularmente, gosto de ter os controles agrupados. Talvez por estar a frente de um computador várias horas por dia, gosto de saber que minha caixa de ferramentas está organizada "ali", em vez de ter ferramentas espalhadas "por ai".

 

Você tem privilégios de moderação aqui no fórum, visualize as ferramentas que estão nos posts (Desaprovar, excluir, quote, etc), veja que existe uma caixa de ferramentas, com todas elas agrupadas.

 

Sei lá, é uma preferência pessoal

 

Por se tratar de uma ação definitiva, ela deveria ter um caminho a ser percorrido diferente dos demais.

 

Não tão definitiva, esse tipo de ação requer confirmação e, sinceramente, não acredito que alguém clicará em excluir e confirmará a exclusão por engano.

[NetBoy16 72]

Com esse topico me veio uma excelente idéia, que tal se tivessemos uma secao dedicada para esse tipo de topico, Projetos Cooperativos, ou algo assim, onde seria exposta uma necessidade do cliente(simulacao) e dai com a participacao do pessoal seria feito todas as etapas, seria muito bom, principalmente quanto ao aprendizado.

 

Eu até queria participar do projeto ajudando no front end, mas to no trampo, quem sabe na proxima.

 

Mas achei muito bom, o pessoal ta bem participativo.

[João Batista Neto 448]

tivessemos uma secao dedicada para esse tipo de topico,

 

A ideia é boa, mas infelizmente não dá certo.

 

Já tivemos uma área para isso, tivemos inclusive um grupo de usuários para isso. Mas nada deu certo. :(

 

Mas achei muito bom, o pessoal ta bem participativo.

 

:D

[João Prado 64]

@NetBoy16, qual era o objetivo do Collective Sense? Não era exatamente isto? E deu no que deu.

 

A questão não é ter uma área dedicada para isso, a questão é se as pessoas vão se dedicar o suficiente para fazer o projeto andar.

 

 

O caso deste tópico é isolado. Iniciou com uma dúvida, o membro postou um problema como exemplo e a comunidade se uniu para criar uma solução para o problema e a dúvida do membro, que com certeza também é de muitos outros profissionais.

 

Este tópico tem futuro justamente pelo engajamento dos membros que estão participando do projeto, do contrário seria uma "causa perdida", assim como foi o Collective Sense e o Tyfu.

[JCMais 75]

De certa forma, mesmo não sendo tão especifica, já temos a área: Brainstorm

[NetBoy16 72]

ë que sou novo na area, nao fui da epoca que tinha essas 2 secoes, pena que o pessoal nao se dedica muito como você disse, pois senao seria perfeito, poderia aprender bastante :rolleyes:

[João Batista Neto 448]

poderia aprender bastante

 

Poderia? No passado? Não pode mais?

 

Veja, esse tópico é uma oportunidade onde você pode, no presente, aprender. Estamos discutindo diversos temas e desenvolvendo uma aplicação, agregando conhecimento para todos os envolvidos.

 

É só acompanhar as discussões, não floodar, perguntar quando tiver dúvidas e contribuir com o que sabe. Todos nós vamos aprender com isso.

[NetBoy16 72]

é pq é um futuro que nao vai acontecer mais, entao já virou passado :grin:

 

sim, estou acompanhando e aprendendo e sem floodar, o que eu quis dizer quanto a passado foi essa idéia da secao.

[WilliansS 73]

Boa NetBoy16 - gostei bastante da iniciativa do pessoal aqui, caso essa sua idéia for levada a frente de alguma maneira contem comigo para as interfaces gráficas =).