Como pensar em Orientação a Objetos

T.Colucci · Março 9, 2012

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.

Neste ponto, concordo plenamente com você. Com a confirmação de exclusão a minha sugestão de separar os botões fica sem sentido, realmente.

Então, neste caso, uma simples diferença de cor vai servir perfeitamente.

:clap:

--

Uma coisa que me atentei agora: existem quatro formas de responder uma pergunta: em um input=text (resposta aberta), pode selecionar uma resposta através do input=radio, selecionar várias através do input=checkbox e por fim, selecionar uma (ou várias?) através do select-box.

Essa última, de escolher através do select-box, não se torna redundante? Afinal, se você pode escolher uma, vai de radio. Se são várias, então checkbox. O select foi adicionado por conta de que exatamente? Para perguntas que tenham mais alternativas que as outras?

João Batista Neto · Março 9, 2012

Pessoal, segui a ideia do JCMais e separei as cores da GUI em um arquivo separado, utilizando nomes indicativos, ficou assim:

css/main.css

body {
font-family: Helvetica;
font-size: 12pt;
}

a {
text-decoration: none;
}

css/colors.css

body, a {
color: #666666;
}

/**
* Cores de frente e fundo.
*/
.default-fg {
color: #189AB1;
}

.exclusion-fg {
color: #FF3333;
}

.inclusion-fg {
color: #4E9A06;
}

.default-bg, .exclusion-bg, .inclusion-bg {
color: #FFFFFF;
}

.default-bg {
background-color: #189AB1;
}

.exclusion-bg {
background-color: #FF3333;
}

.inclusion-bg {
background-color: #4E9A06;
}

css/button/button.css

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

.button.inclusion-bg:before {
	font-weight: bold;
	font-size: 1.2em;
	content: "+";
	margin-right: 4px;
}

.button.down {
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4) inset;
}

css/menu/dropdown.css

.dropdown {
width: 200px;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
padding: 0px;
margin:0px;
}

.dropdown li {
	padding: 4px 6px;
	height: 20px;
	line-height: 20px;
	list-style: none;
}

	.dropdown li:first-child {
		border-radius: 4px 4px 0 0;
		background: url("../../img/dropdown-arrow.png") no-repeat scroll right center rgba(0,0,0,0.2);
		text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	}

	.dropdown li:last-child {
		border-radius: 0px 0px 4px 4px;
	}

	.dropdown li:hover {
		background-color: rgba(0,0,0,0.3);
		cursor:pointer;
	}

.dropdown .option {
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	color: #FFFFFF;
	display:block;
}

.dropdown.closed li:first-child {
	border-radius: 4px;
}

.dropdown.closed li:not(:first-child) {
	display: none;
}

E a marcação:

<!DOCTYPE html>
<html lang="pt_BR">
<head>
	<meta charset="UTF-8">
	<title>GUI</title>
	<link rel="stylesheet" type="text/css" href="css/main.css" /> 
	<link rel="stylesheet" type="text/css" href="css/colors.css" /> 
	<link rel="stylesheet" type="text/css" href="css/button/button.css" /> 
	<link rel="stylesheet" type="text/css" href="css/menu/dropdown.css" /> 
</head>
<body>
	<a class="button add inclusion-bg" href="#" title="Alternativa">Alternativa</a>
	<a class="button add inclusion-bg down" href="#" title="Alternativa">Alternativa</a>
	<br /><br />
	<ul class="dropdown closed default-bg">
		<li class="selection">Tipo de resposta</li>
		<li><a class="option" href="#">Radio</a></li>
		<li><a class="option" href="#">Checkbox</a></li>
		<li><a class="option" href="#">Input</a></li>
		<li><a class="option" href="#">Select</a></li>
		<li><a class="option" href="#">Textarea</a></li>
	</ul>
	<br /><br />
	<ul class="dropdown default-bg">
		<li class="selection">Tipo de resposta</li>
		<li><a class="option" href="#">Radio</a></li>
		<li><a class="option" href="#">Checkbox</a></li>
		<li><a class="option" href="#">Input</a></li>
		<li><a class="option" href="#">Select</a></li>
		<li><a class="option" href="#">Textarea</a></li>
	</ul>
	<br /><br />
	<a class="button default-bg" href="#" title="Salvar">Salvar</a>
	<a class="button default-bg down" href="#" title="Salvar">Salvar</a>
	<br /><br />
	<a class="button default-bg" href="#" title="Responder">Responder</a>
	<a class="button default-bg down" href="#" title="Responder">Responder</a>
	<br /><br />
	<a class="button add inclusion-bg" href="#" title="Pergunta">Pergunta</a>
	<a class="button add inclusion-bg down" href="#" title="Pergunta">Pergunta</a>
	<br /><br />
	<a class="button" href="#" title="Cancelar">Cancelar</a>
	<a class="button down" href="#" title="Cancelar">Cancelar</a>
	<br /><br />
	<a class="button exclusion-bg" href="#" title="Excluir">Excluir</a>
	<a class="button exclusion-bg down" href="#" title="Excluir">Excluir</a>
	<br /><br />
</body>
</html>

João Prado · Março 9, 2012

Uma coisa que me atentei agora: existem quatro formas de responder uma pergunta: em um input=text (resposta aberta), pode selecionar uma resposta através do input=radio, selecionar várias através do input=checkbox e por fim, selecionar uma (ou várias?) através do select-box.

Essa última, de escolher através do select-box, não se torna redundante? Afinal, se você pode escolher uma, vai de radio. Se são várias, então checkbox. O select foi adicionado por conta de que exatamente? Para perguntas que tenham mais alternativas que as outras?

Certo. Não havia pensado nisso quando criei, apenas inseri os campos de formulário que são utilizados mais comumente.

Pensando agora nesta questão, acredito que pode ser qualquer um. As vezes o usuário não gosta de utilizar radio ou checkbox, prefere um select. Como o form é o criador que determina os campos de resposta, fica a escolha dele.

Evandro Oliveira · Março 9, 2012

Queridos, primeiramente peço desculpas por chegar atrasado e querer mudar o rumo do bonde mas, não vi resposta para este post:

Quanto ao frontend, iremos usar alguma biblioteca? Ou será td do zero?

Se for feito o uso de alguma, acho que apenas o HTML5 Boilerplate (já vem com o Normalize.css, Modernizr e o jQuery) já está ótimo.

Edit: Aproveitando que estou em casa, vou continuar os botões que o JB iniciou, irei elaborar os restantes presentes no design passado pelo João Prado. É interessante elaborar uma convensão à ser seguida. Referente ao CSS, eu pensei no seguinte, vejam se vocês estão de acordo.

Usar dash-cased quando for nomear classes e IDs.

Fazer a estrutura do CSS de forma à seguir a estrutura que os elementos seguiriam na página, ou seja, nada de colocar as declarações do footer no começo do arquivo, do header no meio e do conteúdo principal no fim.

Aninhar as regras de elementos comuns e/ou elementos que são aninhados no HTML. O JB já iniciou mais ou menos assim, porém aninhou as regras do mesmo elemento nas declarações dos botões.

Ordem alfabetica na declaração de propriedades.

Ex:
#main-header {
}
   #main-header nav {
   }
       #main-header li {
           display: inline-block;
           float: left;
           z-index: 2;
       }
       #main-header li.is-active {
       }
Sugestões? Críticas?

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?

Sugeriria o uso do http://twitter.github.com/bootstrap para CSS e http://html5boilerplate.com para markup/js

Ambos pregam design responsivo e aplicam conceitos sólidos e já muito difundidos na Web.

O caso particular do comportamento dos botões é coberto pelo Bootstrap aqui. Há alguns elementos de formulário já estilizados que poderemos aproveitar e adequar o nosso layout nas regras já montadas.

Sugiro o uso desse par por que são o de menor curva de aprendizado. Se propõem a serem utilizados "as is", sem que você tenha que ficar recorrendo a uma documentação chata e extensa.

No backend, vamos utilizar o PHP 5.3?

Gostaria de finalmente poder construir um sistema utilizando namespaces e outros recursos, pq ainda é complicado achar hospedagens com preço acessível para PHP 5.3.

Em off, porque não assina um serviço como Linode ou Rackspace? Acesso root a um servidor na nuvem é tudo que você precisa pra se livrar dos tickets de pedidos de suporte. Ridículo você precisar aumentar o max_upload_filesize e o suporte te dizer que isso não é possível devido a diretrizes de segurança.

Sugiro PHP5.4

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.

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

;)

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

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.

Se for utilizar :active, não devem se esquecer de sempre trabalhar o foco no Javascript.

Sugiro que a ação de "excluir" pergunta seja replicada em cada pergunta, assim como há os sinais de "-" para remover uma alternativa.

Não sei o que acham os designers, mas eu acredito que um botão de "X" no canto de cada pergunta seria bem sugestivo.

UPDATE: Na minha humilde opinião, tão indo na contramão fazendo CSS antes do HTML.

João Batista Neto · Março 9, 2012

Sugeriria o uso do http://twitter.github.com/bootstrap para CSS e http://html5boilerplate.com para markup/js

Ambos pregam design responsivo e aplicam conceitos sólidos e já muito difundidos na Web.

O caso particular do comportamento dos botões é coberto pelo Bootstrap aqui. Há alguns elementos de formulário já estilizados que poderemos aproveitar e adequar o nosso layout nas regras já montadas.

Sugiro o uso desse par por que são o de menor curva de aprendizado. Se propõem a serem utilizados "as is", sem que você tenha que ficar recorrendo a uma documentação chata e extensa.

Não vamos usar framework, nem em front-end, nem em back-end. A aplicação é muito simples para precisarmos desse tipo de ferramenta.

UPDATE: Na minha humilde opinião, tão indo na contramão fazendo CSS antes do HTML.

Discordo,

A interface gráfica de usuário é composta por elementos de interface de usuário. Estamos construindo elemento por elemento, de forma que possam ser utilizados individualmente, e reutilizados posteriormente.

Quando tivermos os elementos da GUI prontos, faremos a composição da interface que o João desenhou. A marcação de cada elemento está sendo feita junto com o estilo de cada elemento. Dessa forma, teremos praticamente toda a marcação da GUI ao terminar a marcação dos elementos.

;)

Daniel Ribeiro · Março 9, 2012

Interessante este tópico...

Como não tenho tempo útil para participar efetivamente do projeto, aí vão algumas pequenas sugestões:

PSR-0
SemVer

Boa sorte!

Juliano amadeu · Março 10, 2012

Pessoal, apesar de ter iniciado o tópico, peço desculpas por acompanhar um pouco distante os acontecimentos, mas vejo que o projeto está em boas mãos e seguindo um ótimo nível para adquiri conhecimento.

Eu queria compartilhar alguns detalhes do projeto real que estou desenvolvendo para ver qual a solução de vocês.

Eu pretendo separar o sistema de perguntas e respostas em dois blocos: questionário e entrevista. Qual a razão para isso?

O questionário tem as perguntas propriamente ditas e as opções de respostas para o entrevistado. As classes Questionario, Perguntas e Respostas teriam um relação de composição.

A entrevista contém as respostas que foram colhidas em campo e que serão utilizadas para gerar as estatísticas posteriormente. As classes que controlam a entrevista poderiam herdar alguns métodos das classes que controlam o questionário. Estou certo?

Como o João demonstrou apenas a estrutura de entrevista, eu fiquei intrigado em saber se a mesma estrutura de classe serviria para ambos propósitos (questionário e entrevista).

Como vocês poderiam abordar essa questão?

João, não sei se é o local apropriado, mas no curso de PHP OOP aqui do iMasters você demonstra um pouco essa questão de abordar um problema e desenhar sua estrutura seguindo os princípiosda OOP?

Abraços.

João Batista Neto · Março 10, 2012

João, não sei se é o local apropriado, mas no curso de PHP OOP aqui do iMasters você demonstra um pouco essa questão de abordar um problema e desenhar sua estrutura seguindo os princípiosda OOP?

O curso foi montado para mostrar os conceitos básicos de OOP, até abordo alguns princípios e padrões de design, mas de forma mais superficial. Preferi separar os princípios e padrões em um outro curso (ainda não publicado), para que eu possa dar foco nisso. Se eu fosse abordar tudo em um único curso, o pessoal que ainda não compreende conceitos de OOP como herança, interface, polimorfismo, etc., não conseguiriam acompanhar o curso completo.

Luis Paullo · Março 10, 2012

Eu queria compartilhar alguns detalhes do projeto real que estou desenvolvendo para ver qual a solução de vocês.

Prq você nao entra no projeto tmb, ele ta no github pro pessoal participar =D

ai você vai desenvolvendo e aprendendo com o pessoal..

eu ja até fiz um pullrequest *__* (acho que fiz certo =X).

https://github.com/iMastersDev/iMasters-Form/pulls

Juliano amadeu · Março 10, 2012

Prq você nao entra no projeto tmb, ele ta no github pro pessoal participar =D

ai você vai desenvolvendo e aprendendo com o pessoal..

eu ja até fiz um pullrequest *__* (acho que fiz certo =X).

https://github.com/iMastersDev/iMasters-Form/pulls

Quando eu importo o projeto, vejo apenas um arquivo README.md e mais nada. É isso mesmo?

Daniel Ribeiro · Março 10, 2012

Quando eu importo o projeto, vejo apenas um arquivo README.md e mais nada. É isso mesmo?

Você está na branch master.

Faça um checkout em dev e estará trabalhando na head do projeto.

git checkout dev

Não entendeu nada? A successful Git branching model

Luis Paullo · Março 10, 2012

você tem que pega o branch dev e nele que esta os arquivos.. !!

voce ta no branch master so tem o README nele

Juliano amadeu · Março 10, 2012

você tem que pega o branch dev e nele que esta os arquivos.. !!

voce ta no branch master so tem o README nele

Luis Paulo e Daniel, obrigado pelas dicas. Já consigo ver os arquivos dentro do projeto. Vou acompanhar o desenvolvimento de perto.

Abraços.

Henrique Barcelos · Março 11, 2012

Estou precisando de algumas orientações:

Na hora de clonar um repositório, eu adiciono o que eu "forkei", mas aí aparecem apenas 2 branches: dev e master.

Quando eu baixo, vem também a pasta public, criada pelo João, mas no meu fork não existe essa pasta. :wacko:

Luis Paullo · Março 11, 2012

você ta mudando o Branch la no gitHub??

e so essas 2 brach que tem msm ..

tem a aba file | commit | branch . na frente delas tem um botão branch:master você passa pra branch:dev !!!

Henrique Barcelos · Março 12, 2012

Finalmente consegui, quem quiser dar uma olhada:

https://github.com/h...ee/dev/lib/Core

Essa é a implementação incompleta da camada de acesso a dados...

Edit: assim que possível, retomo o desenvolvimento e deixo essa camada completamente pronta.

João Prado · Março 12, 2012

Como o João demonstrou apenas a estrutura de entrevista, eu fiquei intrigado em saber se a mesma estrutura de classe serviria para ambos propósitos (questionário e entrevista).

A página com os resultados será outra, amanha eu começo a trabalhar no layout.

Luis Paullo · Março 12, 2012

Legal Prado *_*

Mais cade a galera front? =X

so tem os botanzim pronto. falta o js e as div =X

João Batista Neto · Março 12, 2012

Mais cade a galera front? =X

Galera de front-end parece estar em standby. ¬¬

Acabei de fazer push dos últimos ajustes que fiz nos elementos, para quem quiser ver :seta: http://189.90.143.178/iMasters-Form/gui.html

Como não tenho IE aqui, não tenho como testar mas é provável que funcione adequadamente no IE9. Testei no Firefox, Chrome, Opera, Konqueror, Safari do iOS (iPhone e iPad) e também no navegador do Android (tanto no Xoom, quanto no Galaxy S e Galaxy Tab). Enfim, testei em tudo o que eu tinha aqui para poder testar, quem puder fazer testes em outros ambientes como Mac e Windows...

Vinicius Ianni · Março 12, 2012

Testei no ie9 aqui na empresa, e todos os botões ficam pressionados, não retornando ao estado anterior.

O combo fica em undefined em qualquer das opções escolhidas, ao contrario do FF que mostra se clicamos em qual opção escolhemos, bem como os botões retornam ao estado anterior.

Arquivado

Como pensar em Orientação a Objetos

Recommended Posts

T.Colucci 33

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel Ribeiro 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juliano amadeu 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luis Paullo 47

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juliano amadeu 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel Ribeiro 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luis Paullo 47

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juliano amadeu 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luis Paullo 47

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luis Paullo 47

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vinicius Ianni 189