4V Connect http://blog.4vconnect.com Mon, 02 Aug 2010 12:00:34 +0000 en hourly 1 http://wordpress.org/?v=3.1-alpha Eu sou grande! http://blog.4vconnect.com/?p=186 http://blog.4vconnect.com/?p=186#comments Mon, 02 Aug 2010 12:00:34 +0000 admin http://blog.4vconnect.com/?p=186 Eu sou GRANDE, e você?
Como sabem começou a temporada de pesca, o que isso significa? Que começou o concurso Peixe grande!

Claro, que não iríamos ficar fora dessa… estamos competindo na categoria blog e esperamos pescar esse troféu!

Ao lado direito há um Box chamado “EU SOU GRANDE”, basta clicar no ícone do Peixe Grande e votar.

Vamos que vamos porque a competição começa hoje!

[]s à todos e claro, boa pescaria!

]]> http://blog.4vconnect.com/?feed=rss2&p=186 0 Formatando tags de formulário [input type=" checkbox "] http://blog.4vconnect.com/?p=182 http://blog.4vconnect.com/?p=182#comments Mon, 02 Aug 2010 08:00:51 +0000 admin http://blog.4vconnect.com/?p=182 Como sabemos, não há como formatar diretamente algumas tags de formulários, tais como: checkbox, radio ou select.

Hoje mostrei de uma forma simples como “formatar” a tag de formulário checkbox utilizando css e jquery.

Primeiramente precisamos pegar duas imagens que representem o checkbox ativo e desativo, sugiro este site: http://www.iconfinder.com/search/?q=check+box. Eu juntei as imagens e trabalhei com css sprite.

Logo após isso, vamos criar no estrutura HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<label><span><input type="checkbox" value="0" id="chkAceitar" /></span> Aceitar os termos.</label>
<label><span><input type="checkbox" value="1" id="chkReceber" /></span> Receber notícias.</label>
</body>
</html>

Com a estrutura criada, precisamos formatar nosso HTML com css

<style type="text/css">
	label{
		display:block;
	}

	label input{
		filter: alpha(opacity=0);
		-moz-opacity:.0;
		opacity:.0;
		-khtml-opacity: .0;
	}

	label span{
		background-image:url(checkbox.png);
		background-position:0 0;
		background-repeat:no-repeat;
		float:left;
		height:10px;
		margin:6px 6px 0 0;
		width:10px;
	}

	label span.ativo{
		background-position:0 -10px;
	}

	input{outline:none;}
</style>

Observe que eu deixei a tag input com opacidade zero e utilizei a tag span como máscara.

Agora basta criar o código javascript para podermos manipular quando o ckeckox for clicado.
Para isso o código é bem simples, vamos trabalhar com a classe “ativo” do css que criamos, assim poderemos verificar se a tag input está no seu estado ativo ou não.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('label span input').click(function(){
			if($(this).parent('span').hasClass('ativo')){
				$(this).parent('span').removeClass('ativo');
			}else{
				$(this).parent('span').addClass('ativo');
			}
		});
	});
</script>

Viram como é simples? Na próxima vamos personalizar outras tags.
[],

]]> http://blog.4vconnect.com/?feed=rss2&p=182 0 Page Rank ou site referência? http://blog.4vconnect.com/?p=176 http://blog.4vconnect.com/?p=176#comments Sun, 18 Jul 2010 18:25:27 +0000 admin http://blog.4vconnect.com/?p=176 Quando você pensa em site, o que vem em sua cabeça? Desenvolver um que seja indexado na primeira página do google ou um site referência?

Bom, vamos pensar pelos dois lados:

Site que aparece no page rank do google: É sempre bom mostrar para seus clientes que você/sua empresa é capaz de otimizar de tal forma um site que logo ele é indexado na página de pesquisa do google.

Site referência: Este site com certeza não irá aparecer na primeira página do google, porém ele vai ser um site totalmente estilizado, da forma que a criação o fez ele será replicado.
Além de que o design dele será sempre referência para outros clientes. Claro que podemos unir os dois, mas é muito difícil fazer um site referência que siga todas as normas W3C, falemos a verdade.

[]s.

]]> http://blog.4vconnect.com/?feed=rss2&p=176 0 Criando menu com Jquery http://blog.4vconnect.com/?p=171 http://blog.4vconnect.com/?p=171#comments Mon, 07 Jun 2010 10:00:05 +0000 admin http://blog.4vconnect.com/?p=171 Olá à todos!
Hoje vou postar um código para criarmos menu dropdown com jquery. Para aqueles que trabalham com esse magnífico framework sabem que é muito fácil criar qualquer tipo de função/animação com ele.

Mas vamos ao que interessa.

Primeiro vamos criar uma lista com quatro itens.

<ul id="nav">
	<li>Menu 1
    	<ul>
        	<li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
	<li>Menu 2
    	<ul>
        	<li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
	<li><a href="#">Link 1</a</li>
	<li>Menu 3
    	<ul>
        	<li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
</ul>

Em seguida formatar o css para que o menu posso ser horizontal e seus submenu´s verticais.

<style type="text/css">
	*{
		padding:0;
		margin:0;
		list-style:none
	}

	#nav{
		width:auto;
		float:left
	}

	#nav li{
		display:inline;
		float:left;
		margin:0 20px;
		position:relative;
	}

	#nav li ul{
		display:none;
		left:0;
		position:absolute;
		top:20px;
	}

	#nav li ul li{
		width:auto;
		margin:0
	}

	#nav li .on{
		display:block
	}

</style>

Após isso vamos fazer a magia com jquery para que quando passemos o rato (mouse) por cima do menu escolhido o submenu apareça.

<script type="text/javascript">
	$(function(){
		$('#nav li').mouseenter(function(){
			$(this).children('ul')
                        .slideToggle()
                         .addClass('on');
		}).mouseleave(function(){
			$(this).children('ul')
                       .delay(500)
                       .slideUp()
                       .removeClass('on');
		});
	});
</script>

Observem que não utilizamos mais que cinco linhas para criarmos esse menu dropdown. Fácil,não?

[]s.

]]> http://blog.4vconnect.com/?feed=rss2&p=171 0 Novo filme RIO http://blog.4vconnect.com/?p=167 http://blog.4vconnect.com/?p=167#comments Mon, 24 May 2010 15:00:17 +0000 admin http://blog.4vconnect.com/?p=167 A galera que produziu os filmes “Era do gelo, Robô e tchurma ” estão produzindo mais um filme 3D, porém esse terá o cenário do Rio de Janeiro com três super engraçadas como personagens principais.
Vamos ver o que de bom pode sair disto.
[]s.

]]> http://blog.4vconnect.com/?feed=rss2&p=167 0 Prazo para projetos http://blog.4vconnect.com/?p=163 http://blog.4vconnect.com/?p=163#comments Mon, 24 May 2010 14:20:36 +0000 admin http://blog.4vconnect.com/?p=163 Este é um assunto bastante interessante, pois todos nós já passamos por isso em algum momento de nossas vidas, ainda mais para aqueles que trabalham no universo online.

Como podemos definir os prazos para os projetos? Quem será o responsável pelo prazo? O desenvolvedor, o head da área, o coordenador, o gerente de projetos?

Realmente falar sobre isso é complicado. Eu particularmente prefiro que o desenvolvedor do projeto seja responsável pelo prazo, afinal, quem está ciente do que está acontecendo e o que pode acontecer é o desenvolvedor.

Mas também temos o processo de cada empresa, ou seja: a empresa pode julgar que a melhor pessoa para dar o prazo seja o head ou o coordenador.  Muitas vezes o cargo é o fator decisivo, outras vezes a pessoa que irá desenvolvedor tem o mesmo fator.

Uma recomendação que posso dizer é: Verificar qual a capacidade (vendo que quando digo capacidade eu me refiro a conhecimento, velocidade de desenvolvimento e qualidade de entrega.) que o  desenvolvedor tem para assumir tamanha responsabilidade para dizer o prazo de entrega do projeto.

Volto a reafirmar que essa metodologia muda de empresa para empresa, mas é claro, sempre é bom conversar e criar novas idéias para a implantação de novas metodologias.

[]s.

]]> http://blog.4vconnect.com/?feed=rss2&p=163 0 4V saiu em vários sites! http://blog.4vconnect.com/?p=154 http://blog.4vconnect.com/?p=154#comments Mon, 10 May 2010 15:00:50 +0000 admin http://blog.4vconnect.com/?p=154 Semanas atrás tivemos uma ótima notícia, saímos em diversos sites referência tais como:

cssmania: http://cssmania.com/galleries/2010/04/25/4v-connect.php
mostinspired: http://www.mostinspired.com/sites/view/62dcea2177c43b8e0880296d714efca6
cssmenusamples: http://www.cssmenusamples.com/vertical-animated-menu-examples-4vconnect-2323.html
acrisdesign: http://acrisdesign.com/2010/05/showcase-of-beautiful-webdesign-right-from-brazil/
cssbrigit: http://cssbrigit.com/website/2010042604511380

Sim, isto é ótimo pois mostra como nosso trabalho foi bem reconhecido que saiu em vários sites como referência!

Agradeço a todos pelo ótimo site que lançamos!
[]s e até mais!

]]> http://blog.4vconnect.com/?feed=rss2&p=154 0 Identificar IE 6 com C# http://blog.4vconnect.com/?p=148 http://blog.4vconnect.com/?p=148#comments Mon, 10 May 2010 12:00:35 +0000 admin http://blog.4vconnect.com/?p=148 Olá a todos!
Hoje vamos ver como redirecionar o usuário que estiver utilizando IE6 com c#.  O método é muito mais simples do que vocês imaginam, basta apenas identificarmos o tipo do navegador e a versão que o usuário está utilizando, se for igual a Internet Explorer 6  o redirecionamos para uma página de erro.

protected void Page_Load(object sender, EventArgs e)
        {
            var navegador = Request.Browser.Browser;
            var versao = Request.Browser.Version;

            if (navegador == "IE" && versao == "6.0")
            {
                Response.Redirect("/erro.aspx");
            }
        }

Este código deve ser inserido no Page_load de sua aplicação.
[]s e até mais!

]]> http://blog.4vconnect.com/?feed=rss2&p=148 0 Apagar value dos campos de formulário http://blog.4vconnect.com/?p=132 http://blog.4vconnect.com/?p=132#comments Fri, 30 Apr 2010 15:00:37 +0000 admin http://blog.4vconnect.com/?p=132 Apagar os values dos formulários é bem simples, porém, você deve estar se perguntando “porque eu vou querer apagar o value?”. A resposta é bem simples: imagine se você deixou pré definido algo ao usuário, por exemplo: na label “nome” que contém a tag input está escrito “nome” dentro desta tag para o usuário saber que ele deve digitar o nome dele, seria ruim o usuário ter que ele mesmo apagar este texto para depois ele digitar.

Então por isso, escrevi este script que varre dentro da tag fieldset > label todos os campos input e textarea e apaga esses values.

Segue o exemplo que eu criei para que vocês possam utilizar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('fieldset label').each(function(){
			var vGeral = $(this).children('input[type="text"], textarea').val();
			$(this).children('input[type="text"], textarea').focus(function(){
				var thisValue = $(this).val();
				if (vGeral == thisValue){
					$(this).val('');
				}
			}).blur(function(){
				var thisValue = $(this).val();
				if (thisValue == ''){
					$(this).val(vGeral);
				}
			});

		});
	});
</script>
</head>

<body>
<fieldset>
	<label><input type="text" value="nome" /></label>
    <label><input type="text" value="e-mail" /></label>
    <label><input type="text" value="assunto" /></label>
    <label><textarea cols="10" rows="10">mensagem</textarea></label>
</fieldset>
</body>
</html>
]]> http://blog.4vconnect.com/?feed=rss2&p=132 0 DESIGN x DESENVOLVIMENTO. http://blog.4vconnect.com/?p=128 http://blog.4vconnect.com/?p=128#comments Mon, 26 Apr 2010 12:00:05 +0000 admin http://blog.4vconnect.com/?p=128 Esse é um debate eterno que todos que são do mundo online conhecem, e conhecem muito bem.

DESIGN x DESENVOLVIMENTO.

O que fazer quando o design de um site é todo estilizado? Digo, os campos de formulários todos tem um background, o que fazer? Bom, como todo bom desenvolvedor, iríamos brigar e fazer com que os campos radio button e select Box ficassem sem o background e se torne campos normais do HTML. Sim, isso seria uma solução, mas, pare e pense antes no seguinte: O site que você está produzindo, qual é o objetivo dele? Ter uma boa otimização ou ter seguir fielmente o layout proposto?

Hoje em dia, temos diversos plugins que resolvem este nosso problema com estilização dos campos de formulários até mesmo utilizando CSS conseguiu estilizar certos campos.

O que eu sempre digo é o seguinte: é legal ter um site onde seu código é aprovado pela W3C porém, ter um site onde ele segue fiel ao layout, eu acho muito interessante. Não estou dizendo que não ligo para a regra, estou dizendo que tenho 50% de chance de fazer um site que segue as regras da W3C como posso fazer um totalmente estilizado.

Agora, cabe sempre ao desenvolvedor pensar no que é melhor para o site, apenas ele sabe o que pode ser feito ou não.

]]> http://blog.4vconnect.com/?feed=rss2&p=128 0