Desenvolvimento de Front End

Sep 7

Plugin de Máscara de formulários para JQuery – Masked Input

Se trata de um plugin bem simples e pequeno (2.8kb) de jquery pra fazer máscaras nos inputs de um formulário, como cpf, cnpj, telefone, cep, etc…

Pra usar é bem simples, faça download dos arquivos :

JQuery 1.2.6, versão pack e
Masked Input-1.1.4, versão pack

e chame-os dentro do HEAD da sua página :

<head>
    <title> título do site </title>
    ...
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"/></script>
</head>

Para aplicar a máscara, as regras são simples:

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

Veja os exemplos

<script type="text/javascript">
	$(document).ready(function(){
		$("#telefone").mask("9999-9999");
		$("#cpf").mask("999.999.999-99");
		$("#cep").mask("99999-999");
		$("#data").mask("99/99/9999");
	});
</script>

Depois só faça o html normalmente e veja como ficou preenchendo o formulário:

telefone :

cpf :

cep :

data :

A documentação completa do plugin se encontra aqui.

Sep 5

A interface do usuário do futuro em 3 etapas

Com a velocidade que vão as coisas, eu fico muito feliz em pensar que posso ter meu momento Minority Report logo logo. Além das pesquisas e desenvolvimentos de novos conceitos em interfaces de usuário completamente diferenciadas, a tecnologia vem se tornando melhor (e mais barata) como previu Moore em 1965.

Não vou falar de Iphone e Surface, porque isso já não é o futuro mais. Mas o que podemos esperar? Fiz uma lista de 3 promessas interessantíssimas que estão rodando pela web, povoando os sonhos dos geeks de plantão.

1. Futuro próximo: Tecnologia multi-touch da Apple com comando de voz, sensor de força e reconhecimento gestual

Foi notícia no Gizmodo a novidade em desenvolvimento na Apple. A intenção é aplicar o recurso aos Macbooks e Desktops. Um texto selecionado (via multi-touch, obviamente) poderá ser copiado através de comandos de voz “Copy” e “Paste”.

Tenho lá minhas dúvidas se o comando de voz vai pegar mesmo. Sabe aquela coisa da propaganda do cara que vai comprar as passagens para Bauru e acaba conseguindo sua viagem para Cochabamba? Pois é.

De toda forma, aposto na dupla multi-touch + voice, afinal, são as duas ações mais orgânicas para executar tarefas e se comunicar. E como todo mundo, aposto na Apple também, que sempre soube tratar muito bem a interface do usuário.

2. Futuro médio-prazo: Gadgets inteligentes com telas translúcidas

Esse conceito foi desenvolvido pelo pessoal do Petitinvention (ou terá sido pelo Spielberg?). A idéia é um gadget inteligente que reconhece objetos e gera definições pra você e integra com funcionabilidades como mapas, dicionários, etc. É uma espécie de Wikipedia-GPS-Agenda-eletrônica-WiFi-Contador-de-calorias do futuro, uma graça.

É claro que acho mto difícil alguém sair por aí andando com uma placa de vidro só pra te falar quantas calorias tem uma maçã (vá lá, até uma tabelinha em papel seria mais prática). Mas os entusiastas já fizeram até uma versão do “iphone glass”, e aí a coisa parece fazer mais sentido. Telas translúcidas no celular com funções integradas? Eu quero também (olha só de novo o que o Minority Report fez comigo).

3. Futuro longo-prazo: Um faz-tudo nanotecnológico que não suja, guarda cheiro e ainda combina com sua bolsa!

Esse conceito é de deixar qualquer geek babando por 5 minutos. Na verdade por 10 minutos, os 5 minutos durante o vídeo de apresentação e 5 minutos depois, enquanto tenta voltar ao presente. O projeto é uma simulação da Nokia, para um celular, que chega a ser heresia ser chamado de “celular”.

Talvez ele merecesse uma denominação mais divina, mas na verdade, ele é tem muito mais a ver com o conceitos de célula do que qualquer um dos nossos modelos mais hi-techs de hoje em dia.
Quem me mostrou o Nokia Morph foi a Letícia, o que foi muito cruel da parte dela, porque agora eu vou ficar esperando o dia chegar para ter esse brinquedo.
Espero estar viva quando esse dia chegar!

Sep 5

Pseudo classes first-child e last-child cross browser usando css condicional

Pseudo classes first-child e last-child servem para aplicar css no primeiro ou último ítem de uma seletor CSS.
É muito bom usar pra colocar cantos arredondados.

Normalmente as pessoas colocam :

<ul>
	<li class="primeiro"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="ultimo"></li>
</ul>

E depois aplicam css no li.primeiro e no li.ultimo, e quem tem que programar depois server side no server que se vire fazendo ifs.

Isso não é necessário!

Veja no exemplo de First Child, como colocar uma cor diferente no primeiro ítem do menu.

first-child e last-child cross browser usando css condificional

HTML :

<ul>
	<li>Programas Relacionados</li>
	<li>Comentários (4)</li>
	<li>Espalhe este Post</li>
</ul>

CSS :

#tabs ul li{ 

	/* font padrão - preto */
	font-color: #000;

	/* IE - CSS Condicional */
	font-color: expression(this.previousSibling == null ? '#F00' : '#000');

}

/*
	Pra todos os outros browsers é mais simples,
	é só usar o pseudo-classe :first-child
*/
#tabs ul li:first-child{ font-color: #f00; }

Funciona como um operador ternário normal :
Propriedade css : expression(condição ? valor verdadeiro : valor falso )

E se tivesse que escolher o último ítem?
Veja no exemplo, como colocar uma borda somente no último ítem:

#tabs ul li{
	border: 0;
	border: expression(this.nextSibling == null ? '1px solid #000' : '0');
}
#tabs ul li:last-child{ border: 0; }

Sep 4

MobieMobz, Orkut e a web para o mundo

Com a modinha do 2.0 surgiram redes sociais para qualquer coisa – e as redes socias viraram nome para qualquer coisa onde você possa colocar um link e uma foto. Ainda assim, não há o que discutir: as redes sociais são um fenômeno.

Depois de convencerem a Nestlè a trazer de volta aos supermercados o bom e velho Nescau – que tentou entrar na moda do 2.0 com um gosto de Toddy e latinha torta – os usuários já perceberam que podem usar a força do Orkut para serem ouvidos.

O pessoal do MobieMobz também entendeu isso muito bem ao criar uma rede social voltada exclusivamente para amantes de filmes independentes. O mais interessante disso tudo, não é a rede social em si, e sim a mobilização para a exibição desses filmes.

Filmes que quase nunca figuram nas grandes salas de cinema, agora podem ser exibidos se os usuários se mobilizarem para que a exibição aconteça. Basta que pessoas da mesma cidade escolham votem nos filmes que querem assistir, e uma sessão é marcada.

O conceito é simples, colaborativo, e demonstra a força que a web ganhou nos últimos anos. E o mercado já percebeu essa força. Na Inglaterra, investimentos em publicidade online já ultrapassaram os investimento em televisão, no Brasil, ainda não chegamos a isso, mas a publicidade na internet cresceu 36% no primeiro trimestre desse ano.

E é muito provável que olhos se voltem cada dia mais para web: a promissora TV Digital, a chegada da rede 3G, as bandas cada dia mais largas, as limitações técnicas cada dia menores, são realidades que vão aumentar ainda esse destaque.

Mais interação e recursos significam mais abrangência, e uma web mais poderosa. A tendência passa a ser da web para o mundo físico. Metafóras de uma “Lixeira” no seu desktop? Esqueça… as coisas nascem aqui agora.