Tutor TI

Neste post vou mostrar um plugin bem simples mas que agrega um valor muito grande aos formulários dos nossos sites. O plugin que usaremos é o Masked Input.

Na configuração do Masked Input, você determina qual será a formatação preenchida em um campo do formulário, assim se você tem um campo  que deverá ser preenchido um telefone, você passa a seguinte formatação: “(99) 9999-9999″, agora o usuário só poderá digitar um telefone neste campo. A máscara alem de facilitar a digitação escrevendo apenas os números, também limita o campo.

Download:

• jquery.maskedinput-1.3.min.js

Como usar:

Agora que você já fez o download, você precisa incluir o plugin dentro da tag head no html do seu site para poder usá-lo.

Incluindo os arquivos necessários:

<!-- jQuery carregado diretamente do google -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- Masked Input -->
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>

Ativando a máscara em um input

<script>
$(document).ready(function() {
   $("#data").mask("99/99/9999");
   $("#telefone").mask("(99) 9999-9999");
});
</script>

Inputs que receberão a máscara

<form>
   <input id="data" name="data" />
   <input id="telefone" name="telefone" />
</form>

Configurações

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractere alfanumérico (A-Z,a-z,0-9)

Veja o demo funcionando no site do desenvolvedor.

O plugin jquery que venho apresentar hoje, é muito útil para aplicativos de redes sociais, ele é capaz detectar se existe faces em uma foto e nos mostra qual o posicionamento de cada face.

O funcionamento do reconhecimento de face deste plugin jquery é parecido com o que agente já conhece nas redes sociais como o orkut e facebook. A detecção nos testes que realizei se mostrou bem rápida, ao clicar no botão, rapidinho ele já mostrou os rostos da foto com um quadrado em volta.

Como funciona

É necessário incluir 4 arquivos em sua página.

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="js/facedetection/ccv.js"></script>
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script>

Agora já podemos usar nosso plugin de reconhecimento facial.

<script>
    $(function() {
        var coords = $('#myPicture').faceDetection();
        console.log(coords);
    });
</script>

Quando chamamos a função faceDetection o plugin procura faces em toda a foto e depois de encontradas, traz de retorno as coordenadas de todas as faces. Segue uma foto de exemplo que possui 2 faces:

O plugin de detecção de face dá o seguinte retorno para que possamos manipular da maneira que quisermos:

'0' ...
	'x' => "47"
	'y' => "63"
	'width' => "69"
	'height' => "69"
	'positionX' => "286.922577945233"
	'positionY' => "63.485156433244995"
	'offsetX' => "518.422577945233"
	'offsetY' => "258.485156433245"
	'confidence' => "8.13876"
	'neighbour' => "undefined"
'1' ...
	'x' => "198"
	'y' => "96"
	'width' => "77"
	'height' => "77"
	'positionX' => "438.0552182748371"
	'positionY' => "95.8862892293751"
	'offsetX' => "669.5552182748371"
	'offsetY' => "290.8862892293751"
	'confidence' => "7.8083839999999975"
	'neighbour' => "undefined"

Veja o demo deste plugin e depois faça download.

Sliders são galerias (de imagens ou não) onde o conteúdo fica se reversando de forma automática ou manual, guiado por ícones, botões, textos ou thumbnails.

O bom é que podemos colocar um slider em um espaço de destaque e ocupar pouco espaço mostrando um conteúdo relevante aos usuários.

Dica: se você tiver um bom conhecimento em HTML e CSS, você pode criar(ou modificar) a interface e usar apenas o código jquery do slider, que é quem possui todas as funcionalidades.

Segue a lista dos 8 sliders feitos em jquery que são mais usados nos dias de hoje:

Slide Deck

Ver Demo – Download
Slider bonito e poderoso, o conteúdo é dividido em abas e dentro de cada aba ainda pode conter um slider interno, como na segunda aba do exemplo acima.

Galleria

Ver Demo – Download
Galleria é um plugin para visualização de fotos que possui vários recursos muito bons. O primeiro botão do lado esquerdo mostra todas as fotos da galeria em miniatura para o usuário poder pular direto pra ela quando clicar, o segundo botão é para passar as fotos automaticamente, o penúltimo botão mostra as fotos em uma janela flutuante(na própria página) e o ultimo botão maximiza o slider em tela cheia.

Slider Content

Ver Demo – Download
Esse daqui é bem legal porque ele suporta um conteúdo html como imagens, textos e links como mostra na figura acima.

Feature Content

Ver Demo – Download
Este plugin é bem completo, possui a imagem de destaque com título e resumo, e a navegação fica ao lado direito a thumbnail e título em cada item.

Feature List

Ver Demo – Download
Feature List é daqueles plugins que já vem pronto, se você customiza-lo ótimo, mas se for usar do jeito que ele vem já fica bonito, ele é composto por 3 abas com direito a ícone, titulo e resumo.

jFlow

Ver demo – Download
Com certeza o jFlow não poderia faltar nesta lista, este slider é pra quem precisa usar um numero variável de imagens com ou sem um título.

Supersized

Ver Demo – Download
Esse aqui tem um propósito diferente, ele ocupa 100% da página funcionando em modo de tela cheia. Ele redimensiona proporcionalmente a imagem até que ocupe todo o espaço, a navegação tem suporte ao teclado, carrega as imagens em background e possui integração com o Flickr.

Easy Slider

Ver Demo – Download
Como o nome sugere, ele é bem simples e fácil de usar, você pode usar a navegação por setas como na imagem acima ou por navegação numérica, usar repetição continua (ou não), e também dizer se quer passar de forma automática.