Webmaster.pt - Marketocracia Digital » Web Design

Formulário De Registo E Login Animado Com jQuery

Zeeshan Rasool — Mon, 06 Sep 2010 08:51:16 +0000

O jQuery é agora parte integrate de qualquer site. Oferece muitas funcionalidades que não são possíveis sem o jQuery. Sistemas de rating, de comentários e formulários de login criados com jQuery acrescentam um visual com estilo a qualquer site. Espero que você goste do formulário de login. E obrigado por se interessar por este tutorial.

Demo Do Formulário De Registo E Login Animado Com jQuery

Código para download no fim do tutorial.

Código JQuery





$(document).ready(function(){  



  $('a#login').click(function(){

    

    var email_address = $('#email_address').val();

    var password     = $('#password').val();

    

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    

    if(!emailReg.test(email_address) || password == "")

    {

      alert('Enter valid input.');

      return false;

    }

    

    showLoader('login');

    

    $.post("login.php?email_address"+email_address+'&password='+password, {

      }, function(response){

      

      hideLoader('login');

    });

  });

  $('a#signUp').click(function(){

  

    var signup_email       = $('#signup_email').val();

    var signup_password     = $('#signup_password').val();

    var confirm_password     = $('#confirm_password').val();

    

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    

    if(!emailReg.test(signup_email) || signup_password == "" || confirm_password =='')

    {

      alert('Enter valid input. All fields are requied.');

      return false;

    }

    if(confirm_password != signup_password)

    {

      alert('Password must be same.');

      return false;

    }

    

    showLoader('signUp');

    

    $.post("register.php?signup_email"+signup_email+'&signup_password='+signup_password+'&confirm_password='+confirm_password, {

      }, function(response){

      

      hideLoader('signUp');

    });

  });



  $('a#register').click(function(){

    

    $('#first').animate( {

      width: '0px',

      opacity: 1,

      height: '0px'

    },function(){$('#first').hide();} );

    

  });

  

  $('a#back').click(function(){

    

    $('#first').animate( {

      width: '360px',

      opacity: 1,

      height: '200px'

    },function(){} );

    

  });

  jQuery(function($){



    $("#email_address").Watermark("Email");

    $("#password").Watermark("Passwrd");

  });



  jQuery(function($){



     $("#email_address").Watermark("watermark","#369");

     $("#password").Watermark("watermark","#EEEEEE");

     

  });  

  

  function UseData(){

     $.Watermark.HideAll();

     $.Watermark.ShowAll();

  }

});



//show loading bar

function showLoader(id){

  $('#'+id).fadeOut(200);

  $('#loader_'+id).html('Please wait...');

  

}

//hide loading bar

function hideLoader(id){

  

  $('#loader_'+id).html('Successfull');

};

Código HTML





  

  

    

    


    SignUp 
Login

    


    Email

    

    


    Password

    

    


    Confirm 

    

    

    



    

    Register


    

  


  

  

    


    Login
Register

    



    Email

    

    


    Password

    


    

    


    

    Login

Aqui está o CSS.

Código CSS



h2{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

  filter: dropshadow(color=#e5e5ee,offX=0,offY=1); 

  font-family:"Courier New", Courier, monospace;}

.form{ 

  height:200px; width:360px; border:solid #C7E69D 1px;

  -moz-border-radius: 6px;  position:absolute;

  -webkit-border-radius: 6px;

  background-color:#C7E69D;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  }

#demos{text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

  filter: dropshadow(color=#e5e5ee,offX=0,offY=1); 

  font-family:"Courier New", Courier, monospace; font-size:14px; width:100%}

  

#s4{margin: 0 auto; width:30%;}



.login{

  display:block; width:100px; padding:5px; background:#FF3333;-moz-border-radius: 6px; 

  -webkit-border-radius: 6px;

  color:#FFFFFF;

  background-color:#FF3333;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  text-decoration:none;

  margin-left:35px;

  float:left;

}

.register{

  display:block; width:100px; padding:5px; background:#3093C2;-moz-border-radius: 6px; 

  -webkit-border-radius: 6px;

  color:#FFFFFF;

  background-color:#3093C2;

  float:left;

  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  margin-left:10px;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

  text-decoration:none;

}



.heading{ text-align:left; font-size:22px; font-weight:bolder; padding-left:20px; float:left;color:#999999}

#signup_email{ margin-top:7px;}

input{ border:solid #D4D4D4 1px; width:215px;float:left margin:2px 0 2px 0px; padding:5px; background:#F8F8F8;-moz-border-radius: 6px; 

  -webkit-border-radius: 6px;}

label{ width:50px; float:left; padding-left:20px; padding-top:3px; text-align:left}



.bottom{ padding-left:30px;}

Download do código usado neste tutorial: Formulário De Registo E Login Animado Com jQuery

Formulário De Registo E Login Animado Com jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

22 Imagens Espantosas De Movie Fan Art

Sérgio — Fri, 03 Sep 2010 13:23:36 +0000

Movie Fan Art

Sexta-Feira é o dia em que privilegiamos a arte aqui no blog. Seguindo essa tradição, publicamos hoje imagens de Movie Fan Art.

Últimos 5 artigos publicados sobre arte:

22 Imagens Espectaculares De Movie Fan Art

Transformers by Wanbao

Rocky by Ing1

The Lord of the Rings by D17rulez

Avatar by Patrick Brown

Stormtrooper by Jprart

Indiana Jones by Ssava

Jurassic Park by Ejp2007

District 9 by Patrick Brown

Godfather by Angelgaby

Schindler’s List by Twistedbrow

Batman by Chrisgabrish

Fight Club by Bluedicius

Cyborg Head (Terminator) by Mmarti

Saving Private Ryan by Dangerousbob

Avatar by Eggar919

Blade Runner by Ornicar

X Men Origins by Patrick Brown

The Matrix by Web-head-uk

Titanic by Bencurtis

Pirates Of The Caribbean by D17rulez

Alice in Wonderland by Mr–Jack

Predators by Patrick Brown

22 Imagens Espantosas De Movie Fan Art é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

11 Dicas Para Você Reduzir O Bounce Rate

Rui Soares — Wed, 01 Sep 2010 15:30:44 +0000

O Que É O Bounce Rate Ou Taxa de Rejeição?

Um Bounce Rate elevado é um alerta de que o seu site não está sintonizado com os respectivos visitantes. E esse facto pode determinar o insucesso da sua presença online. Vamos analisar o que é o bounce rate, a importância dessa medida estatística e dicas para reduzir um bounce rate elevado.

Em termos básicos, um Bounce é uma visita que acede a uma página do seu site e sai sem visitar outra página. Portanto, é uma vista com um único pageview.



Bounce Rate = número de visitas que visualizaram apenas uma página  /  pelo número de visitas total

Este valor não pode ser interpretado em termos absolutos, porque representa comportamentos diferentes dos visitantes, que nem sempre são negativos. É necessário analisar esta medida em conjunto com outros dados estatísticos e tendo em conta a média para o mesmo tipo de site.

Um visitante acede a uma página do seu site, clica logo de seguida num link para outra página do seu site e sai poucos segundos depois, para nunca mais regressar. Este visitante não foi contabilizado como um bounce.
Um visitante acede a uma página do seu site, estuda detalhadamente o conteúdo dessa página, faz um pequeno intervalo para tomar um café, regressa e, 35 minutos depois de ter acedido à primeira página, clica num link para outra página do seu site. Este visitante foi contabilizado como um bounce. Uma sessão no Google Analytics dura 29 minutos de inactividade. Houve apenas 1 pageview durante a sessão. Contou como bounce.
Um visitante acede a uma página do seu site e sai 5 segundos depois para nunca mais regressar. Bounce. Um visitante acede a uma página do seu site, lê cada palavra do texto dessa página, durante 15 minutos, entusiasmado com a qualidade do mesmo, e sai para regressar todos os dias para ler o último artigo publicado. Bounce.

O facto de ser um valor relativo, não significa que você possa ignorar o bounce rate do seu site ou blog. Se o valor for elevado é exactamente igual ao problema de alguns homens que sofrem de ejaculação precoce. Pense um pouco. É essa a imagem que você quer associar ao desempenho do seu site ou blog? O blog dos 5 segundos…

Análise Comparativa Entre As Diferentes Origens Do Tráfego

Aceda no Google Analitics à opção Origens Do Tráfego. Clique em Todas as origens de tráfego e compare o Bounce Rate ou Taxa de Rejeição entre as diferentes fontes.

Este estudo comparativo pode ajudá-lo a trabalhar melhor fontes de tráfego onde o bounce rate é mais elevado ou a priorizar fontes de tráfego onde o bounce rate é menor. Inclusivamente, permite avaliar o seu investimento em marketing e publicidade. Se você investe tempo e dinheiro numa determinada fonte de tráfego cujo Bounce Rate é substancialmente mais elevado que o Bounce Rate doutras fontes, se não for possível diminuir esse valor, parece-me que a medida mais racional será investir o seu tempo e dinheiro em tráfego de qualidade, ou seja, em fontes de tráfego com Taxas de Rejeição Menores.

Bounce Rate No Comércio Electrónico

Num site duma empresa, que promove os seus serviços ou produtos, ou numa loja online, a taxa de conversão determina o sucesso ou insucesso da presença online, especialmente existindo um investimento em publicidade, como por exemplo no Google AdWords. Uma taxa de conversão abaixo dum determinado valor significa prejuízo.

Ora, para que um visitante aceda

ao formulário ou página de contacto e contacte a empresa
ao formulário de encomenda e submeta uma encomenda dum produto ou serviço
ao processo de checkout da loja online e finalize a compra

é necessário que o visitante clique em mais do que 1 página. Se esse visitante for um bounce, não vai somar na taxa de conversão.

Em qualquer site de comércio electrónico e processo de conversão, temos visualmente um funil:



O visitante acede à pagina inicial. > Seleciona uma categoria. > Acede à página com informação sobre um produto. > Adiciona o produto ao shopping cart. > Finaliza a compra.

Ora, em cada passo deste processo, nós queremos que o visitante dê o passo seguinte. Mas, para perceberem a importância do bounce rate, esse primeiro passo é o NÃO BOUNCE. O visitante, ao ser confrontado na primeiro página visitada com um Call To Action, responde positivamente e clica para aceder à página seguinte. Logo, não bounce. Não rejeitou o seu site.

Um site com um Bounce Rate elevado, está à partida a alienar uma percentagem elevada do seu tráfego. Já sabemos que não é uma valor absoluto. Mas, num site de comércio electrónico, um valor acima de 50% é preocupante. E acima de 35% deve ser objecto de análise.

O problema é fácil de entender. Você não consegue vender um produto a um visitante que não fica sequer 5 segundos no seu site.

Bounce Rate Nos Blogues

O Bounce Rate num Blog é mais elevado do que num site de comércio electrónico. E não é preocupante. Mas, também não significa que você não deva trabalhar para baixar esse valor. Quanto menor for esse valor, maior será a capacidade do seu blog para fidelizar leitores, converter nos links de afiliados, monetizar publicidade com base no modelo Custo Por Mil Impressões (CPM), alcançar os seus objetivos.

Mas, vamos focar a nossa atenção na razão pela qual o Bounce Rate nos blogues é maior do que num site de comércio electrónico.

Nos blogues que publicam 1 artigo diário, não é normal o comportamento do leitor (não é visitante, é leitor mesmo) que acede ao blog para ler o último artigo publicado? E, no dia seguinte, acede novamente para ler o artigo publicado nesse mesmo dia. Este visitante acede TODOS OS DIAS ao blog para ler o artigo publicado nesse dia. E não clica noutras páginas, porque o artigo está publicado na primeira página e porque já leu todos os artigos anteriores… É o visitante PERFEITO. E, no entanto, é um Bounce. Soma mais 1 no bounce rate.

E o comportamento do visitante que acede a uma página do seu blog, porque está pesquisando uma palavra chave no Google e o seu blog apareceu nos resultados orgânicos do Google para essa pesquisa? Leu com interesse o seu artigo, gostou muito, mas como tinha várias tabs abertas com outros sites com informação relevante para a pesquisa que estava a fazer, não clicou noutra página do seu blog. Este visitante até já conhecia o seu blog e visita regularmente. Bounce. Soma mais 1 no Bounce Rate.

No Google Analytics, podemos analisar o bounce rate de cada página clicando em Conteúdo > Principais páginas de destino. Depois, clicamos na página que queremos analisar, na lista que é apresentada.

No drop down menu do lado direito, eu gosto de selecionar a opção Tipo de Visitante, para comparar os dados estatísticos entre entre novos visitantes e visitantes que retornam ao blog. Qual a percentagem de visitantes que retornam nessa página com um Bounce Rate elevado? Qual o tempo médio na página para os novos visitantes?

Também seleciono a opção Palavra-chave, para verificar se há um percentagem relevante de visitantes que chegam a essa página, mas que estão a pesquisar palavras chave que não são relevantes para o conteúdo publicado nessa página. O que é que vai acontecer com esses visitantes? Não vão encontrar o que procuram e obviamente saem logo a correr.

Você ainda pode seleccionar a opção Origem, para comparar o bounce rate entre as diversas fontes de tráfego que trouxeram visitas para aquela página e retirar conclusões.

Relação Bounce Rate E SEO

O Google tem repetido em várias ocasiões que o algoritmo valoriza a felicidade dos usuários que pesquisam no Google. E essa felicidade manifesta-se concretamente através de várias acções:

bookmark do site
fidelização como leitores
links para o site

Em termos gerais, um visitante que acede a uma página e depois a outra e a mais outra tem uma experiência mais positiva do que um visitante que acede a uma página e fecha a tab ou o browser logo de seguida.

Portanto, o Bounce Rate também é um indicador de satisfação. Quanto menor o Bounce Rate, maior a satisfação dos visitantes, do Google e do webmaster…

www.youtube.com/watch?v=rasT-oQW3hY

11 Dicas Para Você Diminuir O Bounce Rate

1. Usabilidade

Um site ou blog com problemas de usabilidade, com um interface de navegação difícil de usar, que não respeita convenções, terá um bounce rate mais elevado do que um site fácil de usar.

Escrevemos um artigo sobre usabilidade e sugerimos que leia as dicas apresentadas nesse artigo:

15 Dicas Para Aumentar a Usabilidade Do Seu Website

2. Tipografia Web

Os visitantes examinam o conteúdo duma página dum site ou blog rapidamente, à procura da informação que procuram. Olham para as imagens, para os títulos e subtítulos, para qualquer texto destacado. E é com base nesse exame rápido que decidem se o texto merece uma leitura mais cuidada e atenta.

Se estudarmos os princípios da tipografia web, podemos apresentar o nosso conteúdo de modo a facilitar a leitura do visitante, seja no primeiro exame rápido ao conteúdo, seja numa leitura palavra a palavra do texto.

Um site ou blog com uma fonte demasiado pequena, com um contraste pobre entre a cor do background e da fonte, com demasiadas palavras por linha e com outros erros de tipografia terá um bounce rate mais elevado por essa razão.

Encontrará nestes artigos dicas importantes sobre tipografia web:

Venda Mais Na Sua Loja Online -- Procure tipografia
Princípios De Tipografia Para Web

3. Páginas De Erro 404

No Google Analytics, aceda a Conteúdo > Páginas principais de destino e clique Em Taxa De Rejeição na lista apresentada. Veja as páginas de erro 404. Qual o Bounce Rate ou Taxa de Rejeição das páginas de erro 404? 100% ?

Se alguém aceder ao seu site e aparecer uma página de erro 404, se essa página não estiver personalizada e não oferecer acções alternativas, o visitante vai sair do seu site. E vai somar mais 1 no Bounce Rate. Leia as nossas dicas para personalizar a sua página de erro 404:

4. Conteúdo

A qualidade do conteúdo do seu site, da informação que você publica, dos serviços e produtos que você está a vender tem um papel decisivo no interesse dos visitantes de explorarem o seu site. Se alguém aceder a um artigo dum blog e não gostar desse artigo ou não encontrar informação útil, dificilmente vai ler outras páginas. Se acederem a uma loja online e o preço dos produtos ou serviços for exorbitante, vão abandonar o barco num só salto.

Outro aspecto importante é a consistência entre o tema do site e o conteúdo publicado. Se o tema do seu blog é nutrição, talvez não seja boa ideia escrever a maioria dos artigos sobre temas diferentes, que não são relevantes para o tema nutrição.

Abro uma excepção para os blogues onde o tema é o próprio autor do blog. Esse autor até pode escrever sobre nutrição, mas como estabelece uma relação de tal forma pessoal com os seus leitores, através da sua foto, dos vídeos que publica, dos artigos que escreve sobre a sua vida privada, o tema nutrição deixa de ser o íman que atrai os visitantes ao blog, passando para um lugar subsidiário. Nestes blogues, não é necessário focar tanto no tema aparente do blog, porque nem sequer é esse o tema principal. Nos blogues onde não existe essa promoção do Eu Autor, é importante escrever artigos que são relevantes para o tema do blog.

5. Velocidade de acesso

Quem é que toma um chá e espera que o seu site entre? A expectativa dos usuários é que o seu site entre rápido. Se o tempo de acesso for muito lento, não vão esperar…

Leias estas dicas para tornar o seu site num Super Ferrari:

6. Palavras Chave

Já abordamos aqui a questão de você analisar as palavras chave que os visitantes estão a pesquisar para aceder às páginas com um bounce rate mais elevado. Se o conteúdo da página não for relevante para as pesquisa que os visitantes estão a fazer, você deve analisar porque razão é que a página está a aparecer nos resultados orgânicos dos motores de busca para a pesquisa dessas palavras chave e tentar afinar o on-site SEO dessa página.

Você poderá colocar um link no topo de página para o conteúdo que esses visitantes estão a procurar, caso seja relevante para a temática do seu site. Alterar o conteúdo dessa página de modo que seja relevante para esses visitantes. Ou otimizar melhor a página para as palavras chave relevantes, de modo a receber visitantes interessados no conteúdo essa página.

7. Title e Meta Description

Leia este artigo para compreender como é que o Google escolhe o título, a descrição e o URL do seu site que aparece nos resultados orgânicos do Google. Esse conjunto de 3 elementos principais chama-se Snippet.

Aprenda A Optimizar A Tag Title Para O Google

Ou veja este vídeo do Matt Cutts:

www.youtube.com/watch?v=vS1Mw1Adrk0

Ora, como é fácil de compreender, se não existir uma correspondência entre esse título e descrição nos resultados orgânicos do Google e o conteúdo da página, o bounce rate vai ser elevado. Os visitantes clicam no site, porque leram com interesse o título e descrição da página no Google, mas depois não encontram a informação prometida.

Outro aspecto importante é a falta de correspondência entre o título dum artigo e depois o respectivo conteúdo. O autor escrever um título sobre o tema A e depois escreve um artigo sobre o tema AB.

Finalmente, não escreva para si. Escreva para os seus visitantes e leitores.

8. Função De Pesquisa

Imagine que um visitante acede a uma página no seu site e não encontra a informação que procura.

Eu consigo imaginar essa situação com facilidade. Visito a Amazon com frequência, dado que tenho vício pela leitura. E normalmente não encontro o livro que procuro na página inicial. Tenho que procurar. Uso quase sempre a função de pesquisa da Amazon. Acho que não seria capaz de chegar ao livro pretendido através do interface de navegação. Experimente você. Aceda à Amazon e procure um livro específico. A função de pesquisa é uma benção de Deus!

Em qualquer site ou blog, a função de pesquisa é uma ferramenta que pode ajudar o visitante a procurar informação. E é mais um instrumento para combater o Bounce Rate.

9. Call To Action

Quem é que tem um Bounce Rate menor? O blogueiro que oferece no fim de cada artigo opções adicionais de leitura ou o blogueiro que obriga o visitante a voltar ao topo de página para procurar outros artigos interessante ou relacionados? A empresa que oferece produtos relacionados, promoções e os produtos mais populares nas páginas de cada produto ou a empresa que entrega ao visitante a responsabilidade exclusiva de encontrar o que procura.

Usa o WordPress? Experimente o Yet Another Related Posts Plugin para exibir artigos relacionados no fim de cada artigo.
Coloque uma lista com os seus artigos mais populares na barra lateral ou no footer.
Publique também uma lista dos artigos mais recentes e dos artigos mais comentados.
No próprio artigo, promova outros artigos já publicados e relevantes, com links para esses artigos.
Edite artigos mais antigos e adicione links para artigos mais recentes e relacionados.

10. Mídia

Uma imagem vale mil palavras.

Adicionar imagens ao conteúdo do seu site ou blog é importante. A leitura forna-se mais fácil, especialmente em artigos longos como este, dado que há pausas para olhar para as imagens e, desde que estas sejam relevantes, não se tornam uma distracção perigosa.

Complementar um artigo ou um tutorial com um vídeo também funciona muito bem. Você prefere ler um livro ou ver um filme?

11. Redes Sociais

Fomentar a interatividade entre o visitante e a empresa ou o autor do blog, através das redes sociais, vai criar um diálogo que é muito importante para o sucesso atual de qualquer presença online.

Você pode:

Conhecer as necessidades e expectativas do visitante.
Estabelecer um meio de comunicação duradouro com esse visitante, através do qual poderá promover novos produtos, serviços ou conteúdos.
Criar relação pessoais que reforçam a identidade entre o visitante e o site ou blog.

Essa interatividade pode ser incentivada através da publicação dos streams das suas conversas no Twitter e Facebook ou das suas fotos no Flickr, através de widgets com os últimos comentários no blog, com a identificação dos usários que mais comentam, com convites no fim de cada artigo aos visitantes para que participem nos comentários.

11 Dicas Para Você Reduzir O Bounce Rate é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

24 Imagens De Sonho De Matte Painting

Sérgio — Fri, 27 Aug 2010 14:48:45 +0000

Gostava de ter o talento destes artistas para poder desenhar sonhos…

Waterfall Castle Matte Art by fstarno

Matte Painting Babel Myth by fstarno

City Matte by mortalitas

Back to the Future by tigaer

Matte Painting Practice by bramleech

Fantasy Matte Painting by martanael

Rise of Niburo Matte by fstarno

Matte Painting by astrokevin

Futuristic City by jjasso

Matte Duel by sketchboook

monkey island by silentparts

Matte Painting Experiment by nahema08

The Hide-out by memod

Quot Paranoia Quot by grivetart

Waterfall Matte Painting by airaf

armageddon 2012 by Chris-Law

Cloud Lake City by jjasso

Rhino Rides by alegion

Matte Painting 5 by astrokevin

Castle Matte Painting by rebekahlynn

Sea Matte by shinou

Waterfall City by =FrozenStarRo

Matte Painting Arrival by diegohc

Lost Among Ruins by martanael

24 Imagens De Sonho De Matte Painting é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

Galeria De Imagens Espectacular Com Super Efeitos jQuery

Zeeshan Rasool — Thu, 26 Aug 2010 08:49:16 +0000

Uma galeria de imagens dá outro estilo ao site e torna-o mais atraente. É uma montra de tudo o que você quer mostrar aos seus visitantes. Eu criei esta galeria de imagens baseada em jQuery com alguns efeitos animados. Usei a função animate() do jQuery para esta galeria e é simples de usar. Espero que você goste do tutorial. Outro efeito que eu usei é o efeito hover. Com o efeito hover, as imagens a preto a branco mudam para imagens a cor.

Veja aqui uma DEMO desta Galeria De Imagens Com Efeitos jQuery. Pode descarregar o código no fim do tutorial.

Código jQuery do Efeito Hover



$(document).ready(function(){

  $("img.a").hover(

  function() {

  $(this).stop().animate({"opacity": "0"}, "slow");

  },

  function() {

  $(this).stop().animate({"opacity": "1"}, "slow");

  });   

});

Você precisa de 3 versões da mesma imagem: uma versão pequena a preto e branco, uma versão pequena a cores e uma versão maior a cores. Quando você passa o rato por cima da imagem pequena a preto e branco, a imagem muda para a imagem pequena a cores. Quando você clica na imagem pequena a preto e branco, a imagem grande a cores carrega no frame.

Código jQuery Para Criar As Animações





$( init );

var num =0;

function init() {

  

  $('img.a').click( function() {

    

    var num = Math.floor(Math.random()*15);

    

    hideImage(num);

    

    var id   = $(this).attr("id");

    

    $('#'+id+'image').animate( {

        bottom: '0px',

        width: '500px',

        height: '302px',

        opacity: 1,

      },300 );

     

  } );

}

function hideImage(num)

{

  if(num%2 == 0)

  {

    $('img#1image').width(0).hide();

    $('img#2image').width(0).hide();

    $('img#3image').width(0).hide();

    $('img#4image').width(0).hide();

    $('img#5image').width(0).hide();

    $('img#6image').width(0).hide();

  }

  else

  {

    $('img#1image').height(0).hide();

    $('img#2image').height(0).hide();

    $('img#3image').height(0).hide();

    $('img#4image').height(0).hide();

    $('img#5image').height(0).hide();

    $('img#6image').height(0).hide();

  }

}

Código HTML





      

      

        

        

        

      


      

      

        

        

        

      


      

      

        

        

        

      


      

      

        

        

        

      


      

      

        

        

        

      


      

      

        

        

        

      


      

      

    


    

    

      

      

      

      

      

      

      

      1 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. 


      2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. 


      3 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. 


      4 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Image one. 


      5 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images. 


      6 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.

Download do código usado neste tutorial: Galeria De Imagens Espectacular Com Super Efeitos jQuery

Galeria De Imagens Espectacular Com Super Efeitos jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

52 Super Designs De Sites Com 1 Página

Rui Soares — Wed, 25 Aug 2010 13:52:52 +0000

One Page Site

Os sites com 1 única página estão a subir em termos de popularidade, especialmente entre os web designers. Criamos uma lista com 52 exemplos muito criativos.

É necessário visitar os sites para perceber a respectiva mecânica. Você vai encontrar ideias deliciosas…

A necessidade de trabalhar numa única página obriga o web designer a compensar esse limite com inovações espectaculares, que, nos exemplos que seguem, funcionam muito bem, sem prejuízo da usabilidade.

Um site com muito contéudo não cabe neste conceito de one page site. Hoje, em termos de SEO, é muito importante trabalhar as palavras chave com 2 e mais palavras: long tail keywords e isso implica adicionar mais e mais páginas ao site, otimizando os respectivos títulos e URL. Isso não é possível num site com uma única página. Mas, no caso de empresas ou profissionais que vendem 1 produto ou serviço, é uma solução a explorar.

52 Exemplos Fantásticos De Sites Com 1 Página

loscoloresolvidados.com

auzora.templategrow.com

52 Super Designs De Sites Com 1 Página é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

Como Criar Animações Com jQuery

Maicon Sobczak — Wed, 25 Aug 2010 13:00:50 +0000

Animações Com jQuery

O jQuery e outras bibliotecas javascript tornaram muito mais fácil adicionar pequenas animações ao website. Não muito elaborado à lá Flash, mas o suficiente para tornar a interação com as páginas muito mais interessante.

Neste tutorial será demonstrado como adicionar as animações através dos métodos nativos do jQuery, aspectos das animações e também alguns plug-ins que adicionam mais possibilidades nas animações feitas com o jQuery.

Preparativos

Para demonstrar os exemplos de animação apresentados aqui, você vai precisar de um arquivo HTML com o seguinte código no corpo do documento:





Texto animado.

No cabeçalho desta página importe a última versão do jQuery

Crie um arquivo Javascript e importe ele no documento HTML logo após a linha de importação do jQuery.

Opacidade

Este é um efeito suave que torna a navegação mais prazerosa. Dependendo da forma que é feita, torna-se quase imperceptível ao mesmo tempo em que é responsável pelo algo a mais no site.

É a animação mais básica que você pode adicionar a um link ou imagem Tanto, que o CSS 3 traz a possibilidade de fazer isso diretamente nas folhas de estilo.

O jQuery oferece três métodos para trabalhar com a opacidade: fadeIn(), fadeOut() e fadeTo(). O primeiro aumenta a opacidade, que é medida do 0 (invisível) ao 1 (visível), a segunda diminui este número e com a terceira podemos trabalhar o intervalo entre estes números.





$(function(){

  $('p').fadeOut(200);



})

Neste primeiro exemplo o texto do parágrafo desaparece da tela a uma velocidade de 200 milissegundos. Para que a opacidade demore um segundo para chegar ao zero, é preciso colocar 1000 no valor entre parênteses.

Ao invés de valores, você pode utilizar ‘fast’ ou ‘slow’ que se referem aos valores 200 e 600 respectivamente. Se não for configurado nenhum valor, a duração padrão é de 400 milissegundos.

Este efeito não remove o elemento da estrutura da página, apenas adiciona um “display:none” ao final da animação do texto.

Utilizar o fadeIn() segue o mesmo mecanismo:





  $('p').fadeIn(‘slow’);

O fadeTo() permite um maior controle sobre a animação onde você pode definir além da duração valores para a opacidade entre 0 e 1.





$('p').fadeTo(0.5,300);

O código anima faz com que o texto do parágrafo torne-se parcialmente transparente a uma velocidade de 300 milissegundos.

Todos estes três métodos permitem que uma função seja executada ao final da animação o que abre possibilidades para animações encadeadas.





  $('p').fadeOut(200, function(){

    alert('Término da animação.');

  });

Altura

Os métodos slideDown(), slideUp() e slideToggle() trabalham a altura do elemento. Escondem ou mostram com movimento deslizante.

As configurações são as mesmas mostradas acima para os efeitos de opacidade. Sendo que com o slideDown() a altura de elemento aumenta a partir do topo e com o slideUp() ela diminui em direção ao topo.

O slideToggle() para os casos em que não é possível saber se o elemento esta visível (altura 100%) ou invisível (altura 0). Se ele estiver visível o slideToggle() aplica o slideup(), caso contrário aplica o slideDown().





  $('p').slideUp(1000, function(){

    alert('Termino da animação.');

  });

  $('p').slideDown(1000);  

  $('p').slideToggle(1000);

animate()

O animate() é o método de animação por excelência no jQuery e o mais versátil em termos de configuração. Com ele você consegue aplicar os efeitos mostrados acima e qualquer outro baseado em uma propriedade CSS que aceite valores numéricos.

Devido a flexibilidade do método, vamos analisar baseado na sintaxe

.animate( properties, [ duration ], [ easing ], [ callback ] )

A primeira informação a ser fornecida para o método são as propriedades CSS a serem animadas. Vale margem, espaçamento, tamanho da fonte, largura, altura e outras que aceitem número. Falando em número, se você informar apenas o número e não a unidade de medida, será entendido que você se refere a pixels. Se você quiser utilizar porcentagem, pode apenas lembra de colocar entre aspas: ‘150%’.

O interessante é que algumas propriedades aceitam os valores show, hide e toggle. Então ao invés de digitar “width:100px” para mostrar uma div por exemplo, você pode digitar “width:show”.

Em seguida você define qual a duração da animação. O tempo será medido em milissegundos, mas se preferir pode indicar a velocidade com fast ou slow.

Os dois últimos parâmetros são de uso facultativo.

O easing permite que a progressão da animação ocorra de maneira não linear, um ponto mais rápido ou mais vagaroso. Deixa a animação muito mais interessante. As opções ‘linear’ e ‘swing’ que vem por padrão com o jQuery não valem muito a pena. Então você pode utilizar o plugin jQuery Easing Plugin que possibilita maior controle sobre este aspecto das animações sendo totalmente integrável ao método.

O parâmetro callback permite que seja executado código ao termino da animação.

Vejamos alguns exemplos da utilização do animate():





$('p').animate({fontSize:50},500, function(){

    $(this).animate({marginLeft:50},300);

    }

  );

Após aumentar o tamanho da fonte para 50 pixels, é iniciada outra animação deslocando o texto 50 pixels da borda esquerda. Observe que a propriedade CSS é escrita em camelCase.





  $('p').animate({

    opacity:0.2,

    padding:10,

    marginLeft:150,

    width:'hide'

    },'slow');

Diversas propriedades podem ser animadas ao mesmo tempo, sendo que altura, largura e opacidade aceitam os valores show e hide.

Se você tiver importado o plugin jQuery Easing Plugin, os valores que ele oferece serão postos após a duração:





  $('p').animate({marginLeft:150},'slow','easeInCubic');

:animated

Não raro, alguns elementos são animados diversas vezes e nem sempre em sequencia exata. Com o seletor :animated é possível atingir os elementos que estão sendo animados.





  $('p').animate({marginLeft:150},200);  

  $('p:animated').css({color:"#ff0000"});

Mais uma forma de chamar a atenção do visitante para alterações na página.

delay

As animações podem ser encadeadas tornando-se mais completas. Você pode engatar um slideDown() a um fadeTo() e este a um animate(). Mas se por algum motivo você quer que haja um intervalo entre eles, temos à mão o delay().

Ele tem o papel de retardar a execução por alguns milissegundos.





$('p').css({display:"none"}).slideDown().fadeTo(0.7, 'slow').delay(500).animate({marginLeft:50},300);

O texto foi escondido para podermos iniciar a animação. O texto então aparece com efeito deslizante, tem a opacidade reduzida e então a fila para por meio segundo devido ao delay(). E somente depois desse tempo o elemento de parágrafo tem a margem esquerda alterada.

Dica Para Evitar Problemas Com Animação Repetitiva

Adiconamos ao parágrafo um efeito em que o texto desliza alguns pixels para a direita quando o mouse passar sobre o texto e depois ele volta a posição normal.





  $('p').hover(function(){

    $(this).animate({marginLeft:20},500)},

  function(){

    $(this).animate({marginLeft:0},500);  

  })

Desta maneira ele funciona normalmente. Mas, ao passar o mouse rapidademente diversas vezes, vemos o problema: a animação continua mesmo sem o mouse sobre o texto.

Para evitar este problema, basta adicionar stop() antes que a animação comece, com isso, toda a animação que estiver acontecendo vai parar e a fila será reiniciada com a animação atual.





  $('p').hover(function(){

    $(this).stop().animate({marginLeft:20},500)},

  function(){

    $(this).stop().animate({marginLeft:0},500);  

  })

Conclusão

Quando bem explorados e integrados, os métodos de animação nativos do jQuery tornarão o website muito mais interessante e isso sem muitas linhas de comando.

Como Criar Animações Com jQuery é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

38 Fotografias De Cortar A Respiração

Rui Soares — Tue, 24 Aug 2010 10:01:59 +0000

As imagens falam mais alto que as palavras…

Alien

Golfinhos

Dança

Terrorista

Arrumador De Carros

Amor

Peluche

Fashion

Sereia

Malabarista

Sociedade

Advinhe

Fotografia

Floresta

Soldados

Sozinho Em Casa

Mauzão

Olá!

I Kill You

Voar

Vida

Transparente

Cancro

Esperança

Boleia

Rebolar Na Relva

Artistas

Colectivo

Quer Uma Dentada?

Estrangeiro

Sol

Consciente Colectivo

Eu Mordo!

Teatro

Arco Íris

Esplendoroso

Frágil

Ninja

38 Fotografias De Cortar A Respiração é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

30 Colecções De Ícones Grátis Sobre Redes Sociais

Rui Soares — Mon, 23 Aug 2010 11:45:25 +0000

Ícones Grátis Sobre Redes Sociais

Hoje, as redes sociais são fontes relevantes de tráfego, ao ponto de se discutir a morte do SEO e até o tema Google Killer. E também são palcos onde nascem e morrem marcas. Portanto, não é possível ignorar o papel que desempenham no sucesso ou insucesso do seu site ou na gestão PR da sua marca. Consequentemente, os ícones sobre redes sociais são elementos obrigatórios de qualquer blog ou site.

Você está satisfeito com os ícones que usa para promover a sua presença nas redes sociais? Caso não esteja, estou certo que encontrará ícones espectaculares numa destas 30 colecções…

Tabbed Social Media Icon Set

Uma colecção de 50 ícones, criada pelo Cheth Studios para o Creative Nerds, que inclui as redes sociais mais populares.

Os ícones foram desenhados como botões rectangulares.

Formato: PNG
Download: Tabbed Social Media Icon Set

Polaroid Icon Set

Uma colecção de 16 ícones, estilo foto Polaroid, criada pela, que inclui as redes sociais: YouTube, Delicious, RSS, Twitter, Facebook, Flickr, Digg, stumpleupon, mySpace, Feedburner, Skype, Yahoo, Last.fm, Linkin, Reddit e Gmail.

Formato: PNG
Tamanho: 62×78
Download: Polaroid Icon Set

The Free Style Social Media Icon Set

Uma colecção de 20 ícones, com um toque original, criada pela Helen Gizi, da Pink Moustache, para Speckyboy Design Magazine. Inclui as redes sociais mais populares.

Formato: PNG
Tamanho: 24×24, 48×48 e 60×60
Download: The Free Style Social Media Icon Set

Social Post Stamps

Colecção de 13 ícones, desenhados como se fossem selos postais, sobre as seguintes redes sociais: Delicious, Designbump, Designfloat, Digg, FlickR, GMail, Google, PayPal, Reddit, RSS, StumbleUpon, Technorati and Twitter.

Formato: PNG
Tamanho: 32×32, 64×64 e 128×128
Download: Social Post Stamps

Circular Social Media Icons

Colecção de 27 ícones circulares, criada para o Blog Perfume, que inclui as redes sociais mais populares.

Formato: PNG
Tamanho: 32×32, 64×64 e 128×128
Download: Circular Social Media Icons

Gorgeous Mini Social Networking Icon Set

Uma colecção de 40 ícones, criada pelo Cheth Studios, que inclui as redes sociais mais populares.

Formato: PNG
Tamanho: 32×32 e 64×64
Download: Gorgeous Mini Social Networking Icon Set

Free Download Social Icons

Uma colecção de 6 ícones, criada pela Design Reviver. Inclui as redes sociais: Digg, Twitter, Delicious, RSS, Reddit e Stumbleupon.

Formato: PSD, PNG, JPG
Tamanho: 16×16, 32×32, 48×48, 64×64, 128×128, 256×256 e 512×512
Download: Free Download Social Icons

Twitter Vector Icons Massive Icon Set

Uma colecção impressionante de 54 ícones, criada pela Icon Shock. São ícones muito criativos e originais sobre o Twitter. As imagens estão em vectores para mais fácil redimensionamento.

Formato: PNG e .ai
Tamanho: 512×512
Download: Twitter Vector Icons Massive Icon Set

Free Social Media Icon Set

Uma colecção de 42 ícones, criada pela Elegant Themes, que inclui as principais redes sociais.

Formato: PNG e PSD
Tamanho: 64×64
Download: Free Social Media Icon Set

Free Social Iconset in Heart Shape

Uma colecção de 39 ícones sobre as redes sociais mais populares, criada pelo The Design Super Hero. Os ícones foram desenhados com o formato dum coração.

Formato: PNG
Tamanho: 16×16, 32×32 e 64×64
Download: Free Social Iconset in Heart Shape

Social and Web Icons v2 by umar123

Uma colecção de 49 ícones de qualidade, criada pelo usário Umar1 do Deviantart sobre redes sociais.

Formato: PNG
Tamanho: 46×46 px.
Download: Social And Web Icons v2

Free Glossy Social Icons

Uma colecção de 20 ícones, criada pela Webtoolkit4, que inclui as redes sociais: YouTube, Twitter, Digg, StumbleUpon, Flickr, RSS, Feedburner, Skype, Last.fm, Gmail, Linkedin, Yahoo, Facebook, Delicious, mySpace, reddit, Friendfeed, WordPress, Vimeo e um ícon Favoritos.

Formato: PSD
Download: Free Glossy Social Icons

Dark Social

10 ícones de elevada qualidade gráfica, criados pelo La Glanz Studio para a Six Revisions. Inclui ícones relativos a: Blogger, Digg, Yelp, Picasa, MySpace, Yahoo!, Facebook, Twitter, WordPress e RSS.

Formato: PNG
Tamanho: 64×64, 128×128, 256×256 e 512×512
Download: Dark Social

High Detail Social Icons

Colecção de 40 ícones de elevada qualidade gráfica, criada pelo Icon Shock, que inclui as redes sociais mais populares.

Formato: PNG
Tamanho: 256×256
Download: High Detail Social Icons

Furry Cushions Social Icons

Uma colecção de 6 ícones com uma textura de peluche, criada pela Andrea Austoni para o Noupe, sobre o Delicious, Facebook, LinkedIn, RSS, StumbleUpon e Twitter.

Formato: PNG
Tamanho: 48×48, 64×64, 128×128 e 256×256
Download: Furry Cushions Social Icons

Social Clean

É uma colecção de 12 ícones sobre redes sociais, criados para a InstantShift. Inclui o Digg, Delicious, Facebook, Google Buzz, Linked In, Mixx, MySpace, Reddit, StumbleUpon, Technorati e o Twitter.

Formato: PNG
Tamanhos: 16×16, 32×32, 48×48 e 128×128.
Download: Social Clean

Social Sketches

Colecção de 16 ícones desenhados à mão, criada para o Six Revisions, com um visual original. O conjunto inclui, por exemplo, ícones sobre o Digg, StumbleUpon, Faceboo, Mixx, Twitter, Delicious e RSS.

Formato: PNG
Tamanho: 32×32, 48×48, 64×64, 128×128, 256×256 e 512
Download: Social Sketches

Isometrica: A Free Social Media Icon Set

Uma colecção de 18 ícones em 3D, criada pela Arcnerva para a Six Revisions, que inclui as principais redes sociais.

Formato: PNG e PSD
Tamanho: 105×67 e 53×34
Download: Isometrica: A Free Social Media Icon Set

Vector Social Media Icons

Uma colecção de 80 ícones do Icon Dock, que inclui as redes sociais mais populares, como por exemplo o Twitter, Facebook, LinkedIn, Flickr, YouTube, Digg, Mixx e RSS.

Os ícones foram criados no formato de vectores e podem ser redimensionados para o tamanho pretendido.

Formato: PNG e EPS
Tamanho: 16×16, 24×24 e 32×32
Download: Vector Social Media Icons

Social Network Icon Set

Uma colecção de 10 ícones, criados pelo Icon Shock para o Hongkiat, sobre redes sociais: StumbleUpon, Technorati, Twitter, RSS, Reddit, LinkedIn, Flickr, Facebook, Delicious e Blogger.

Visualmente, os ícones parecem pinturas.

Formato: PNG
Tamanho: 12×12, 16×16, 24×24, 32×23, 48×48, 128×128, 256×256, 512×512
Download: Social Network Icon Set

Exclusive WebMag Social Media Icon Pack

Colecção de 26 ícones, criada pela Web Mag, que inclui as redes sociais: Wordpress, Twitter, Tumblr, Technorati, Stumbleupon, RSS Feed, Reddit, Propeller, Newsvine, Myspace, Mixx, LifeLogger, Last.fm, Linkedin, Friendfeed, Flickr, Feedburner, Facebook, DZone, Digg, DesignFloat, DesignBump, Delicious, Bloglines, Blogger e Blinklist.

Visualmente, os ícones parecem desenhados.

Formato: PNG
Tamanho: 64×64 e 128×128
Download: Exclusive WebMag Social Media Icon Pack

Extreme Grunge Social Media Garments Icons Pack

Colecção de 20 ícones, com aspecto usado, criada pelo Web Expedition 18, que inclui as redes sociais mais populares, como poderão comprovar na imagem.

Formato: PNG
Tamanho: 256×256
Download: Extreme Grunge Social Media Garments Icons Pack

Buddycons – Vector Social Media Icons

Uma colecção de 126 ícones, criada para o Webdesigner Depot, que inclui as redes sociais mais populares.

São ícones circulares e o conjunto para download inclui as imagens em vectores para fácil redimensionamento.

Formato: PNG e .ai
Tamanho: 32×32
Download: Buddycons – Vector Social Media Icons

Picasso Social Icons

Uma colecção de 10 ícones artísticos, daí o nome Picasso, criada para a Six Revisions, com ícones referentes ao Blogger, Delicious, Facebook, Flickr, LinkedIn, Reddit, RSS, StumbleUpon, Technorati e Twitter.

Formato: PNG
Tamanho: 12×12, 16×16, 24×24, 32×32, 48×48, 128×128, 256×256 e 512×512
Download: Picasso Social Icons

OLED Social Icons by arrioch

Uma colecção de 21 ícones às bolas, criada pela usário da Deviantart Arrioch. Inclui as redes sociais mais populares.

Formato: PNG
Tamanho: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128 e 256×256
Download: OLED Social Icons by Arrioc

Social Icons Pack by sawb

Colecção de 50 ícones com um aspecto limpo, criada pelo usário Sawb do Deviantart. Inclui as redes sociais mais populares.

Formato: PNG
Tamanho: 50×50
Download: Social Icons Pack by sawb

Handycons

Trata-se de 2 colecções de ícones, desenhados à mão, pelo Janko At Warp Speed.

A primeira colecção inclui 12 ícones sobre as redes sociais: Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter, RSS Feed e Email icone.

Formato: PNG
Tamanho: 16×16, 24×24, 32×32 e 48×48
Download: Handycons 1

A segunda colecção inclui 20 ícones sobre as redes sociais: Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons

Formato: PNG
Tamanho: 16×16, 32×32, 64×64 e 128×128
Download: Handycons 2

Social Media Icons by plechi

Uma colecção de 16 ícones, criada pelo usário do Deviantart Plechi, sobre as redes sociais: Google, Yahoo, RSS, Facebook, Twitter, MySpace, last.fm, Technorati, Vimeo, Stumble Upon, Linked in, Youtube, Reddit, Delicious, Digg e Flickr.

Formato: EPS
Download: Social Media Icons by plechi

Free Twitter Icon Set

Uma colecção de 4 ícones sobre o Twitter, criada pela Productive Dreams para o Instant Shift. Imagens em vectores, o que permite um redimensionamento fácil.

Formato: PNG e PSD
Tamanho: 64×64, 128×128 e 256×256
Download: Free Twitter Icon Set

30 Colecções De Ícones Grátis Sobre Redes Sociais é um artigo da nossa comunidade: Webmaster.pt Marketocracia Digital

Partilha Este Artigo Por Favor:

49 SUPER Pinturas E Imagens 3D De Carros

Sérgio — Fri, 20 Aug 2010 20:15:17 +0000

Paixão Por Carros

Algumas pessoas sentem uma paixão obsessiva por carros. É quase um fetiche. Manifesta-se na compra de miniaturas de réplicas de carros, na criação de imagens 3D, no tuning, na colecção de carros reais, desportivos, antigos ou simplesmente na troca frequente do carro do dia a dia.

Na arte, encontramos imagens espectaculares de carros. Para quem gosta de web design e de todas as expressões de arte…

Por favor, apreciem este festim visual…