Criar Post-it

rafaelcds · 14 de março de 2011

Galera, boa tarde!

Sou novo no fórum e vim pedir ajuda de vocês, pois estou precisando acabar meu tcc do técnico em informática e o projeto será a criação de um KANBAN. Pois no momento, estou precisando criar um botão que gere post-it. Exemplo: O usuário irá clicar neste botão e irá gerar um post-it para ele escrever. alguém tem alguma noção de como fazer este botão?

Espero que ajudem. Um abração a todos!

DiF · 14 de março de 2011

Galera, boa tarde!
Sou novo no fórum e vim pedir ajuda de vocês, pois estou precisando acabar meu tcc do técnico em informática e o projeto será a criação de um KANBAN. Pois no momento, estou precisando criar um botão que gere post-it. Exemplo: O usuário irá clicar neste botão e irá gerar um post-it para ele escrever. alguém tem alguma noção de como fazer este botão?

Espero que ajudem. Um abração a todos!

isso acho que é bem simples de se fazer podes fazer assim:

(lembre-se é só uma ideia pode ser que tenha alternativas melhores)

primeiro ache uma imagem de um post-it tipo essa:

Editei a imagem no photoshop deixando o tamanho em: 300 x 334 pois a imagem é muito grande.

depois crie uma div e na propriedade da ID dela no css você define como display: none;

então crie uma funçao em jquery algo do tipo:


<script type="text/javascript">
$(document).ready(function(){
$('#postIt').hide();
    $('a#mostraPost').click(function(){
       $('#postIt').show();
    });

    $('a#escondePost').click(function(){
       $('#postIt').hide();
    });
});
</script>

Lembrando que você pode alterar os efeitos de .hide() e .show() para .fadeIn(), .fadeOut(), .slideDown(), .slideUp()

dentro dos parenteses você pode adicionar o tempo em milisegundos algo do tipo 400, 1200.. ou escrever as palavras: 'fast', 'slow'. nao esqueça que se for escrever as palavras deve ser assim: .fadeIn('slow') se for usar em milisegundos deve ser assi: .fadeIn(400)

é importante a declaraçao dos atributos css e a criaçao da div no site.. por exemplo no CSS:


#postIt{ 
     display: none; 
     background-image:url("/postit/post.png");
     background-repeat:no-repeat;
     height: 500px;
     z-index: 1;
}

.textarea{ 
  border:none;
   font-family: arial;
   font-size: 12px;
   border-style: none;  
   background-color:transparent;
   overflow: auto; 
   padding-top: 10px;

}

#conteudo{position: absolute; top: 90px; left: 30px;}

no html:


...

<body>

...

<div> <a id="mostraPost" href="#">Mostrar post-it</a></div>

<div id="postIt">
	<div id="conteudo">
           <a id="escondePost" href="#">Fechar Post-it</a><br/>
           <textarea rows="10" cols="40" class="textarea">Escrevar algo aqui</textarea>
      </div>
</div>

...

</body>
</html>

note que os z-index servem para sobreposiçao de divs. tendo como valor -1 ira jogas o body para tras de todas as divs. e o z-index: 1 tras a tona. assim coomo o z-index: 2 ficará por cima da 1 e assim por diante.

lembrando que tens que importar o plugin jquery dentro do seu head para funcionamento. você pode baixar o plugin diretamente do site do jquery.

resultado:

abraço

rafaelcds · 14 de março de 2011

Gostaria de lhe agradecer pela atenção, está ajudando muito!

Pois bem, até hoje o máximo que eu fiz foi uma página web, não sou muito da área de programação, trabalho com teste de software, então fico meio confuso com "aonde inserir alguns códigos". No momento eu estou usando o Dreamweaver para a montagem do layout (No qual já está pronto) e instalei o EASYPHP para criar o servidor, seria possível você me dar um suporte para a inserção deste post it na página e configurálo para funcionar exatamente igual um kanban eletrônico?

DiF · 14 de março de 2011

bah amigo.. posso te dar suporte na inserçao de codigos.. e configuração do easyphp... mas sobre o kanban... nao tenho a minima ideia como se faz... pois bem.. quando li seu post achei que você queria fazer algo do tipo lembretes na pagina.. por isso fiz daquela maneira.. quando você falou em post-it me surgiu a ideia dos papeizinhos auto colantes que a gente coloca no monitor como lembrete.

isso que me guiou:

estou precisando criar um botão que gere post-it. Exemplo: O usuário irá clicar neste botão e irá gerar um post-it para ele escrever. alguém tem alguma noção de como fazer este botão?

e foi o que eu fiz ali.. um link que cria um post-it para escrever. com botao.. é so alterar para um button e arrumar la no jquery

rsrs desculpe o mal entendido.

rafaelcds · 14 de março de 2011

Capaz amigão, estamos no caminho certo!

Preciso mesmo deste botão, porém, quando o usuário criar este post-it, ele vai escrever o nome da tarefa (Tarefa do projeto, no caso) e vai movimentala pela página, preciso que esse post-it fique grudado na página, para que outros usuários possam ver, por isso irei fazer via web.

Resumindo: Vai ser um kanban eletrônico, aonde o usuário irá gerar um post-it, escrever nele e movimetá-lo pelo quadro eletrônico, acha que consegue me dar uma força, parceiro?

Um abraço!

DiF · 14 de março de 2011

amigo, fiz umas mudanças aqui significativas

consegui mover pela pagina o post-it .. mas sempre tem um porém.. o textarea parou de funcionar .. e ainda nao consegui resolver.. por hora vou postar as mudanças pra você testar.

adicione no head:


<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="idrag.js"></script>

e no codigo jquery q eu te passei adicione o seguinte bloco abaixo do ultimo }); :


$(document).ready(function(){
$('#postIt').Draggable({
		zIndex: 	1000,
		ghosting:	false,
		opacity: 	0.7,
		appendTo: 'body'	
	});		
});

note que agora tem mais dois arquivos para importar o idrag.js e o iutil.js estou anexando eles para você baixar:

iutil.js

idrag.js

rafaelcds · 14 de março de 2011

Ok, obrigado amigão. Estou indo para faculdade agora. Lhe pedi o msn por MP. Um abraço

DiF · 14 de março de 2011

Mudanças amigo, consegui resolver o problema da textarea que nao funcionava quando mexia pela pagina.

segue os novos codigos vou postar completo de novo:

CSS:


#postIt{ 
     display: none; 
     background-image:url("/postit/post.png");
     background-repeat:no-repeat;
     height: 340px;
     width: 300px;
     z-index: 1;  
}

#tudo{ width: 300px;}
#mostraPost{margin-left: 10px;}
#form{ position: absolute; top: 80px; left: 30px; }
#conteudo{position: absolute; top: 90px; left: 30px;}
#form input.inputSalvar{
	margin-top: 10px; 
	background-color: transparent;
}

#form input.inputNome{
	background-color: transparent;  
	font-size: 12px; border: none;
}

#mostra{
   background-color: yellow; 
   -moz-border-radius-topleft: 32px; 
   -moz-border-radius-topright: 32px;
}

#form textarea{
   margin-top: 10px; 
   font-family: arial;
   font-size: 12px;
   border-style: none;  
   background-color:transparent;	
}

Jquery:


<script type="text/javascript">
$(document).ready(function(){
$('#postIt').hide();
    $('a#mostraPost').click(function(){
       $('#postIt').slideToggle('slow');
    });
});

$(document).ready(function(){
$('#tudo').Draggable({
	handle:	'#mostra',
	opacity: 0.7,
	});
});
</script>

HTML:



...

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="idrag.js"></script>
</head>
...

<div id="tudo">
<div id="mostra"><a id="mostraPost" href="#">Abrir / Fechar post-it</a></div>
	<div id="postIt">
	<div id="form">
		<form action="#" method="post">
			Nome: <input type="text" name="nome" id="nome" class="inputNome"/><br/>
			Observações:<br/>
    		<textarea rows="10" cols="40" class="textarea"></textarea><br/>
    		<input type="submit" value="Salvar" class="inputSalvar"/>
    	</form>
    </div>	
	</div>
</div>

os tres pontinhos ali significa que tem coisas em cima.. que sao irelevantes aqui.. porque você deve saber ja.. sobre o inicio das tags.. enfim..

fiz pra você uma div que escreve um nome e alguma coisa no textarea, mover a div pela pagi,a abrir e fechar no mesmo lugar e um submit de salvar.

agora salvar o texto que você vai escrever para guardar numa sessao. para os outros olharem.. ai é com você.

detalhe: o fundo do topo ali ta amarelho porque eu coloquei so pra testes.. você pode mudar no css no background-color da id #mostra.

abraço

rafaelcds · 15 de março de 2011

Mudanças amigo, consegui resolver o problema da textarea que nao funcionava quando mexia pela pagina.

segue os novos codigos vou postar completo de novo:

CSS:


#postIt{ 
     display: none; 
     background-image:url("/postit/post.png");
     background-repeat:no-repeat;
     height: 340px;
     width: 300px;
     z-index: 1;  
}

#tudo{ width: 300px;}
#mostraPost{margin-left: 10px;}
#form{ position: absolute; top: 80px; left: 30px; }
#conteudo{position: absolute; top: 90px; left: 30px;}
#form input.inputSalvar{
	margin-top: 10px; 
	background-color: transparent;
}

#form input.inputNome{
	background-color: transparent;  
	font-size: 12px; border: none;
}

#mostra{
   background-color: yellow; 
   -moz-border-radius-topleft: 32px; 
   -moz-border-radius-topright: 32px;
}

#form textarea{
   margin-top: 10px; 
   font-family: arial;
   font-size: 12px;
   border-style: none;  
   background-color:transparent;	
}

Jquery:


<script type="text/javascript">
$(document).ready(function(){
$('#postIt').hide();
    $('a#mostraPost').click(function(){
       $('#postIt').slideToggle('slow');
    });
});

$(document).ready(function(){
$('#tudo').Draggable({
	handle:	'#mostra',
	opacity: 0.7,
	});
});
</script>

HTML:



...

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="idrag.js"></script>
</head>
...

<div id="tudo">
<div id="mostra"><a id="mostraPost" href="#">Abrir / Fechar post-it</a></div>
	<div id="postIt">
	<div id="form">
		<form action="#" method="post">
			Nome: <input type="text" name="nome" id="nome" class="inputNome"/><br/>
			Observações:<br/>
    		<textarea rows="10" cols="40" class="textarea"></textarea><br/>
    		<input type="submit" value="Salvar" class="inputSalvar"/>
    	</form>
    </div>	
	</div>
</div>

os tres pontinhos ali significa que tem coisas em cima.. que sao irelevantes aqui.. porque você deve saber ja.. sobre o inicio das tags.. enfim..

fiz pra você uma div que escreve um nome e alguma coisa no textarea, mover a div pela pagi,a abrir e fechar no mesmo lugar e um submit de salvar.

agora salvar o texto que você vai escrever para guardar numa sessao. para os outros olharem.. ai é com você.

detalhe: o fundo do topo ali ta amarelho porque eu coloquei so pra testes.. você pode mudar no css no background-color da id #mostra.

abraço

Dif!

Cara, queria te agradecer imensamente pela ajuda que tem me dado. O código irei testar para ver como está. Obrigado mesmo!

Um abraço!

rafaelcds · 19 de março de 2011

Dif, amigão!

Irei postar o meu código do layout que fiz para o kanban, ainda não está pronto, mas creio que já dê para inserir esta função do botão, mas a questão é, como?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem título</title>

</head>

<body>

<tr>

<td width="25%" bgcolor="#999999"><h1 align="center"><font size="+6">Accept</font></h1></td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Abração meu velho!

DiF · 19 de março de 2011

Dif, amigão!
Irei postar o meu código do layout que fiz para o kanban, ainda não está pronto, mas creio que já dê para inserir esta função do botão, mas a questão é, como?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem título</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<table width="98%" height="401" border="1">

<tr>

<td width="25%" height="69" bgcolor="#999999"><h1 align="center"><font size="+6">To Do</font></h1></td>

<td width="25%"> </td>

<td width="25%"> </td>

<td width="25%" bgcolor="#999999"><h1 align="center"><font size="+6">Accept</font></h1></td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

</body>

</html>

Abração meu velho!

vou dar uma olhada aqui.

mas nao esquece de usar a tag CODE do forum, que podes achar no painel quando for postar .. tem um icone de # (cerquinha). isso facilita muito quando alguem for ler o codigo porque preserva a identaçao do mesmo. eai nao fica tudo embolotado.

teu codigo ali pelo menos ainda ta pequeno, então ainda da pra ler tranquilo.. mas quando ficar maior.. se nao usar a tag CODE fica maçante de ler q da vontade ate de desistir. rsrs

abração meu velho.

Uma dica que te dou amigo, evite de usar aquelas tags inline. pois ja nao esta mais nos padroes da W3C. use css para setar background color, font-size, e outros atributos.

abraço

Ola de novo.

fiz umas alteraçoes e incrementaçoes:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	  $('#accept').hover(function(){
	    $(this).css("background-color","#7CFC00");
	  }, function(){
	    $(this).css("background-color","#999999");
	  });
	});
</script>

<style type="text/css">

table{width: 98%; height: 30%; border: 1px solid #000000; border-collapse: collapse;}
td{width: 25%;   border: 1px solid #000000; border-collapse: collapse;}
th{ width: 25%;  height:10px; border: 1px solid #000000; border-collapse: collapse;}
#todo{height: 30px; background-color: #999999; text-align: center; font-size: 36px;}
#accept{background-color: #999999; text-align: center; font-size: 36px;}
a:link{ text-decoration: none; color: #000000;}
a:visited{text-decoration: none; color: #000000;}

</style>
</head>

<body>
<table>
	<tr>
		<th id="todo">To Do</th>
		<td> </td>
		<td> </td>
		<th id="accept"><a href="#">Accept</a></th>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		<td> </td>
	</tr>
</table>
</body>
</html>

rafaelcds · 19 de março de 2011

Dif!

Coloquei o código que você informou acima, porém ele só aparece o layout que eu já havia feito, o botão do post-it não, Relembrando que eu apenas tenho o eayphp, será que precisaria mais algum programa?

DiF · 19 de março de 2011

Dif!
Coloquei o código que você informou acima, porém ele só aparece o layout que eu já havia feito, o botão do post-it não, Relembrando que eu apenas tenho o eayphp, será que precisaria mais algum programa?

achei q você ja tinha conhecimento só de olhar o codigo.

usei jquery para fazer um evento de hover na celula accept que quando passa por cima fica verde. verde de aceitar.

fiz a mesma coisa com o do to só q esqueci depostar.

repare ali na importaçao o jquery.

sim eu refiz seu "layout" pos estava fora dos padros da W3C. que diz que todos os atributos que podem ser manipulados, devem ser declarados por via de CSS e nao inline em cada tag.

rafaelcds · 19 de março de 2011

Pois é, eu não tenho muito conhecimento sobre web não!

Como posso fazer para aparecer o botão, então?

DiF · 19 de março de 2011

Pois é, eu não tenho muito conhecimento sobre web não!
Como posso fazer para aparecer o botão, então?

terá que ter um formulario ali. com input type="submit" ou button se for enviar via javascript.

pra fazer o que você quer.. é indubitável o conhecimento de html, javascript/jquery, php.

nao farei o trabalho pra você, só estou te auxiliando no básico.

abraço

rafaelcds · 21 de março de 2011

Dif, está muito legal a função do post-it, mas estou fazendo alguns ajustes na posição da textarea e tal...Você sabe como posso criar mais de um posti-it quando eu clico em "mostrar post-it" (No caso, cada um que eu crie, o mesmo tem que ficar na posição que eu deixei e criar outro, e assim por diante, sabe sobre o que posso pesquisar para fazer esta função?

DiF · 21 de março de 2011

Dif, está muito legal a função do post-it, mas estou fazendo alguns ajustes na posição da textarea e tal...Você sabe como posso criar mais de um posti-it quando eu clico em "mostrar post-it" (No caso, cada um que eu crie, o mesmo tem que ficar na posição que eu deixei e criar outro, e assim por diante, sabe sobre o que posso pesquisar para fazer esta função?

fazer a funçao em si.. eu nao sei, porque nunca pensei em fazer algo do tipo.. mas talvez você teria que por num laço de for... para criar N post-its.

é só uma suposiçao.. por exemplo no php.. talvez funcionaria se você criasse uma function criaDiv()

{

$maxPostit = 20;

for ($i=0; $i<=$maxPostit ; $i++)

{

criaçao de div aqui.

}

echo $variavel_que_exibe_a_div;

}

?>

seria algo do tipo.. agora fazer eu nao sei.. da uma lida aqui:

http://trialforce.nostaljia.eng.br/?p=40

mostra varios exemplo criando div, campos de input .. tudo dinamicamente com php.

claro q deve da pra fazer com javascript.. mas desconheço

rafaelcds · 22 de março de 2011

Amigo,

Seguinte, está havendo alguns comportamentos estranhos, vou lhe mostrar passo a passo com imagens:

Bom, nesta imagem aqui é logo quando abro o código, perfeito!

Nesta aqui, é logo quando eu clico em MOSTRAR POST-IT, aqui ele abre o post-it em um lugar e a textarea em outro.

Após eu escrever algo na textarea, logo após eu tento arrastá-lo para algum lugar:

Então ele fica assim, a partir desta última tela, ele me permite arrastar somente uma vez e aonde eu fixar, ele não arrasta mais. Depois se eu tentar fechar o post-it, o FECHAR POST-IT não funciona Estou apavorado com este trabalho.

DiF · 22 de março de 2011

por acaso você tentou editar o css? aquilo é questao de prosicionamento. sobre fechar.. e arrastar.. veja se você nao deletou alguma coisa do codigo jquery, ou mudou algum nome de ID das divs.

rafaelcds · 22 de março de 2011

Vou editar o css então, mas sobre arrastar e fechar eu não deletei nada no código. Não sei o que pode estar ocorrendo, já comparei a função do abrir com o fechar mas a principio está tudo OK. Você acha que com o post-it se movimentando pela página é mais fácil de gravar em banco de dados do que ter algumas setas para a esquerda, direita, para cima e para baixo movimentando o mesmo? Fiquei na dúvida agora. Por que eu ainda preciso criar tabelas no banco que grave as posições que ele fica, pois na verdade a ideia é essa para que outros usuários possam ver. Na verdade é só para apresentar no TCC, então não precisa estar MUITO perfeito, pois alguma nota que já tenho.

Abraço e obrigado a atenção que tem me dado.

DiF · 22 de março de 2011

Vou editar o css então, mas sobre arrastar e fechar eu não deletei nada no código. Não sei o que pode estar ocorrendo, já comparei a função do abrir com o fechar mas a principio está tudo OK. Você acha que com o post-it se movimentando pela página é mais fácil de gravar em banco de dados do que ter algumas setas para a esquerda, direita, para cima e para baixo movimentando o mesmo? Fiquei na dúvida agora. Por que eu ainda preciso criar tabelas no banco que grave as posições que ele fica, pois na verdade a ideia é essa para que outros usuários possam ver. Na verdade é só para apresentar no TCC, então não precisa estar MUITO perfeito, pois alguma nota que já tenho.
Abraço e obrigado a atenção que tem me dado.

salvar no banco a posiçao da div ja é outra historia .. mais difícil que infelizmente nao posso te ajudar porque nao sei... porque teria que armazenar numa variavel a posiçao x e a posiçao y da div. eu penso que.. no banco nao seria muito viável... e simples de se fazer.. talvez se armazenasse as posiçoes X e Y de cada div num array atraves de uma session.. talvez seria bom.. acho q isso é um assunto que você tem que discutir com o seu orientador. se nao der pra fazer deste jeito... tua unica solução.. é usar a tabela e no maximo divs para abrir e fechar dentro da tabela.. ...tambem estou fazendo meu TCC, um comércio eletrônico baseado em compras coletivas dentro de minha cidade.

rafaelcds · 22 de março de 2011

Bá cara, nem me fale, o ensino foi muito fraco na minha escola técnica, por isso estou marchando para fazer este trabalho "simples". E também apenas estou fazendo isso por que tinha que ser uma melhoria para minha empresa! Vou procurar sobre session na internet e sobre estes tipo de armazenamento. Você pode rever pra mim o que pode estar faltando para fechar este post-it quando for clicado no botão?

Um abraço!

DiF · 22 de março de 2011

Bá cara, nem me fale, o ensino foi muito fraco na minha escola técnica, por isso estou marchando para fazer este trabalho "simples". E também apenas estou fazendo isso por que tinha que ser uma melhoria para minha empresa! Vou procurar sobre session na internet e sobre estes tipo de armazenamento. Você pode rever pra mim o que pode estar faltando para fechar este post-it quando for clicado no botão?
Um abraço!

eu revisei o código aqui.. nao há nada de errado pelo menos na minha máquina. aquela hora eu penguntei se você nao havia mexido no css para tendar editar alguma cor... ou posiçao.. porque eu tinha usado o position absolute.

o uso de sessions com php.. faz gravar variaveis com conteudo para nao ser perdido.. o mesmo vale para os cookies.

mas porque nao usar cookies? os cookies podem ser desabilitados no navegador... uma vez que usam javascript.. a session nao.

rafaelcds · 1 de abril de 2011

Dif!

Você entende algo de Visual Basic C# junto com silverlight? Pois migrei a linguagem em que eu ia fazer o kanban. ach que desta maneira é mis fácil, o que você acha?

Abração!

DiF · 1 de abril de 2011

Dif!
Você entende algo de Visual Basic C# junto com silverlight? Pois migrei a linguagem em que eu ia fazer o kanban. ach que desta maneira é mis fácil, o que você acha?

Abração!

Infelizmente, nao entendo nada de VB e C# .. tenho só conhecimentos em php e alguma coisinha de java( também nao é muito)

esses dias ainda pensei em aprender um pouco de delphi que vi q na minha cidade ainda tem empresas trabalhando com delphi

Entrar

Criar Post-it

Posts recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Arquivado

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais