20 de fev de 2014

Máscara para preenchimento de telefone em javascript

Sabe quando você vai digitar seu telefone em algum formulário, e automaticamente é inserido um parênteses antes e depois do código de área, e um tracinho no meio do telefone, sem que você digite? Isso acontece graças a uma função simples de se fazer em javascript, veja abaixo o html e o javascript comentados.

Html

Telefone:  


Javascript

function mascara(telefone){ 
   if(telefone.value.length == 0)
     telefone.value = '(' + telefone.value; //quando começamos a digitar, o script irá inserir um parênteses no começo do campo.
   if(telefone.value.length == 3)
      telefone.value = telefone.value + ') '; //quando o campo já tiver 3 caracteres (um parênteses e 2 números) o script irá inserir mais um parênteses, fechando assim o código de área.

 if(telefone.value.length == 8)
     telefone.value = telefone.value + '-'; //quando o campo já tiver 8 caracteres, o script irá inserir um tracinho, para melhor visualização do telefone.
 
}


19 de fev de 2014

Mensagem de erro no Onblur de um input

Neste tutorial, explicarei (ou pelo menos tentarei) como fazer uma mensagem de erro ao dar um onblur num campo de um formulário, caso aquele campo não esteja preenchido.

Um exemplo disso, você pode ver aqui.

1- Primeiramente, vamos ao básico, nosso html... Segue abaixo o html, sem segredo nenhum.
Atente-se aos comentários, toda a explicação está neles.

Nome: 
E-mail:
2- Agora, vamos dar um pouco de estilo para nosso código, adicionando o CSS:

body{
 font-family:sans-serif;
 font-size:16px;
}
/* Abaixo, estilo da mensagem de erro, que só aparecerá quando o foco do campo for trocado sem algum preenchimento */
.msg-erro{
 color:#ff0000;
 font-size:12px;
 font-style:italic;
}

3- Por fim, o mais complicado, o javascript. Mais uma vez, veja os comentários no código, toda a explicação do funcionamento está dentro dele!

/* A função validarCampoVazio é aplicada apenas ao campo em que foi trocado o foco, isso por causa do parâmetro 'this' 
que está na chamada de função do input. Ela aplicará o textoErro no segundo parâmetro, no lugar do 'document.getElementById('id da span abaixo do input') */

function validarCampoVazio(campo, textoErro){
 // veja se o campo possui algum texto
 if (campo.value.length == 0) {
 /* caso o campo esteja em branco, uma mensagem de erro será exibida, primeiro verificamos se existe um parâmetro para a mensagem de erro, neste caso estamos usando textoErro */
 if (textoErro != null)
 textoErro.innerHTML = "por favor, preencha este campo."; // o innerHTML irá inserir esta mensagem dentro do span que fica abaixo do input
 return false;
 }
 else {
 /* o campo está preenchido, a mensagem de erro será apagada, novamente verificamos se o parâmetro para a mensagem de erro existe, e deixamos seu valor vazio, através do "" */
 if (textoErro != null)
 textoErro.innerHTML = ""; // o innerHTML apagará qualquer texto do span que fica abaixo do input
 return true;
 }
}


13 de fev de 2014

Validando formulário de contato com jQuery

Aqui no meu blog, já postei alguns exemplos de formulários de contato, você pode usar qualquer um deles para testar este exercício, ou se desejar, pode criar seu próprio formulário.

Caso deseje, seguem os links dos posts criados:
Abaixo, separarei os códigos HTML, CSS e Javascript. Neste exemplo, estamos usando tudo na mesma página HTML pois este é um exemplo apenas para fins de estudo, mas se desejar, pode deixar o CSS e o Javascript em documentos separados, o que é até melhor.

1 - Primeiramente o HTML, vejam que não existe segredo nenhum na construção do formulário, notem apenas que abaixo dos campos de nome, email e mensagem, existem mensagens de erro, que deverão aparecer somente se o campo não for preenchido corretamente.

Se abrir este exemplo em seu navegador, notará que as mensagens de erro aparecem logo que o formulário é exibido, e isso não faz sentido... vamos arrumar isso agora mesmo.

Nome:
O campo NOME é obrigatório

E-mail:
O campo E-MAIL é obrigatório

O E-MAIL que você digitou não é válido

Telefone:
Mensagem:
Por favor, digite uma mensagem

A Mensagem que você digitou é muito curta


2 - Agora o CSS, também não existe segredo nenhum, apenas os campos simplesmente estilizados com uma borda e um padding. O grande "pulo do gato" está em esconder com um display:none, as divs com id #erroNome, #erroMail, #erroMail2, #erroMsg, #erroMsg2, pois estas são as divs responsáveis por exibir as mensagens de erro.

Abra este HTML em seu navegador, e note que agora faz mais sentido, as mensagens de erro não aparecem logo que o formulário é aberto.

p{
 font-family:sans-serif;
 font-size:14px;
}

p img{
 vertical-align:text-top;
}

input, textarea{
 border:solid 1px #ccc;
 padding:5px;
}

/* abaixo estão os estilos das mensagens de erro */

.erroValid{
 padding:5px;
 background:#FFC;
 color:#900;
 border-radius:3px;
 margin:5px 0;
}

#erroNome, #erroMail, #erroMail2, #erroMsg, #erroMsg2{
 display:none; /* Aqui eu escondo todas as mensagens de erro */
}

3 - Agora para fazer tudo funcionar, vamos colocar o Javascript, o código está bem comentado para melhor entendimento.

Ele é responsável por verificar se os campos obrigatórios (no caso nome, email e mensagem) estão preenchidos corretamente, e o jQuery fica responsável por exibir de uma maneira mais "elegante" as mensagens de erro, com um fadeIn e fadeOut.

function validar(formulario){
 if(formulario.nome.value ==''){
  $('#erroNome').fadeIn('slow'); //se o campo nome estiver vazio, o jquery exibe a div #erroNome que até então estava escondida pelo CSS
  return false;
 }
 if(formulario.mail.value ==''){
  $('#erroMail').fadeIn('slow'); //se o campo mail estiver vazio, o jquery exibe a div #erroMail que até então estava escondida pelo CSS
  return false;
 }
 if(formulario.mail.value.indexOf(('@' && '.'),0)== -1){
    $('#erroMail2').fadeIn('slow'); //se o campo mail não conter um ponto ou arroba, ele exibe a div #erroMail2 que até então estava escondida pelo CSS
    return false;
 }
 if(formulario.mensagem.value ==''){
  $('#erroMsg').fadeIn('slow'); //se o campo mensagem estiver vazio, o jquery exibe a div #erroMsg que até então estava escondida pelo CSS
  return false;
 }
 if(formulario.mensagem.value.length < 10){
  $('#erroMsg2').fadeIn('slow'); //se o campo mensagem for preenchido com menos de 10 caracteres, o jquery exibe a div #erroMsg2 que até então estava escondida pelo CSS
  return false;
 }
 return true;
};

function apagarErro(){
 $('.erroValid').fadeOut('slow'); //quando um campo é selecionado, ele dispara esta função, que apaga as mensagens de erro exibidas
}

Para visualizar este exemplo, clique aqui.

Sugestões de melhoria? Dúvidas? Sintam-se a vontade para comentar.

Obs, o exemplo acima serve apenas como consulta, se desejar se basear nele, sugiro que faça as alterações necessárias para que funcione corretamente para suas necessidades, não autorizo a copia total do conteúdo para uso comercial, caso isso seja feito, não me responsabilizo por algum problema técnico.



21 de jan de 2014

Regulamentação do Design no Brasil - Nada mudou

A um tempo atrás, fiz um post falando sobre a regulamentação do design no Brasil que aconteceu em 2012.
Neste post eu falei que provavelmente isso não mudaria em nada, os salários seriam os mesmos, as empresas continuariam nos explorando... bom, aí vai a dúvida: Mudou alguma coisa pra alguém? Porque até onde eu vejo, nada mudou -.-

Foto: Stephen Begin



13 de jan de 2014

Seu site no topo das buscas com Inbound Marketing


Não muito tempo atrás, para um site aparecer no topo das buscas do Google, bastava um bom webdesigner desenvolver um código limpo, semântico, seguindo os padrões internacionais... o famoso SEO.

Hoje a situação está um pouco diferente, o Google está posicionando os sites nas buscas de acordo com a relevância.

Relevância? Como assim?
Simples, quando eu digo, "esponja de aço", que marca lhe vem em mente? Quando digo, "refrigerante de cola", que marca lhe vem em mente?

Certo, mas como faço para ser relevante no Google?
Então, o segredo é esse, você não tem que ser relevante para o Google, você tem de ser relevante para seu público.

Ok, então como faço para ser relevante para meu público?
O Google está de olho nas redes sociais (facebook, twitter, blogs, google plus, youtube...), se sua marca possui uma página nas redes sociais com inscritos ativos, isso torna sua marca relevante para um público específico.

Mas atenção, não adiante ter simplesmente uma página em alguma rede social cheia de gente, as pessoas precisam interagir com sua marca.

Hoje em dia é comum empresas criarem enquetes no facebook, postarem fotos ou artigos, e pedirem a opinião dos seguidores, criarem promoções onde a pessoa precisa comentar em uma foto, enviar uma frase, etc.

Antigamente, pensava-se que era melhor uma empresa não ter uma rede social, do que ter e não usar, hoje em dia é diferente, é melhor uma empresa TER uma rede social e USAR! Para aqueles que não tem familiaridade com o assunto, ou não tinham o costume de mexer nisso, agora é hora de se atualizar, se não podem acabar ficando pra trás.

Para mais informações, consulte o artigo: http://pt.wikipedia.org/wiki/Inbound_marketing



22 de out de 2013

Div ocupando toda a altura de uma página

Uma coisa fácil de se fazer com HTML e CSS, é definir que uma div ocupe a largura toda da tela do navegador, basta setar width: 100% no css, mas para esta div pegar toda a altura da tela, independente se o monitor é redimensionado ou não, pode ser uma tarefa um pouco mais complicada, mas pode ser resolvida assim:

HTML:
criei aqui uma div bem simples, apenas para exemplificar


CSS:
html, body{
 height:100%; /* aqui definimos que o html e o body terão altura de 100% */
}
.Sua-Div{
 width:100%; height:auto; min-height:100%; /* aqui é onde acontece a mágica, a propriedade height:auto e min-height: 100% fará com que esta div ocupe sempre a altura total do navegador, mesmo quando redimensionado */
 background:blue;
}

Façam seus testes, se tiverem outros meios de fazer a mesma coisa, postem nos comentários!

Com este código, sua div ocupará a altura total do navegador, mesmo se ele for redimensionado.

18 de jul de 2013

Utilizando o atributo ALT da imagem como legenda

Imagine a seguinte situação: Você precisa inserir várias imagens em uma página, com uma legenda abaixo de cada uma delas.

O modo convencional, seria inserir um abaixo de cada imagem e posiciona-los via CSS, mas pesquisando um pouco, vi uma forma diferente de se fazer isso... A forma convencional é bem simples, mas é legal variar um pouco, veja só como fiz:

Confira o Jscript comentado abaixo, claro, para funcionar, não deixe de inserir alguma versão da biblioteca JQuery em sua página.


$(document).ready(function(){
$("img.legenda").each(function(){
          var title = this.alt;
          $(this).after('
'+ title +'
'); }); });

Esse script simplesmente diz que todas as imagens que forem da classe "legenda" terão uma div (criada automaticamente) embaixo delas exibindo seu texto ALT como legenda. Você poderá personalizar a posição, cores, tamanho, etc, da classe "stap-caption" via css tranquilamente, façam seus testes!

Novos trabalhos - Unicicli e Tonka3D

Atualizando a galeria de trabalhos recentes, confiram abaixo 2 novos trabalhos:

Novo site Unicicli



Terceira versão que faço deste site, a Unicicli é uma parceira antiga, que procura sempre renovar seu visual em seu site e seus catálogos impressos.

A Unicicli é uma empresa que trabalha na produção e distribuição de peças para bicicletas, atendendo todo o território nacional.

www.unicicli.com.br

Novo site Tonka3D



Segunda versão que faço deste site, a primeira foi por volta de 2009. Site responsivo, funcionando perfeitamente em smartphones.

A Tonka3D é oferece cursos profissionais de 3D, modelagem de personagem, animação, games, maquete eletrônica, maquete interativa e muito mais.

www.tonka3d.com.br