Blue

Mootools é uma framework em Javascript bastente leve e bastante útil. Pode simplificar trabalho, melhorar apresentação, e até mesmo melhorar a performance da user-experience num site.
Aqui ficam 10 Mootools Scripts que fazem exactamente isso:

Formulários Ajax Web 2.0 Style

Download: Web 2.0 Forms

Demo: http://www.stoutlabs.com/demos/formMagic_1.htm

Aumentar caixas de texto

Source: http://ejectmedia.net/examples/moo_textareas/

Formulários de Login

Download: http://joeabiraad.com/ajax/ajax-login-form-php-javascript/89
Demo: http://joeabiraad.com/demos/ajax2/

Calendários

Source: http://www.electricprism.com/aeron/calendar/

Validação de formulários

Source: http://www.phatfusion.net/validate/

Personalização de elementos de formulários

Source: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Selecção múltipla

Source: http://www.wollzelle.com/os/multiple-select-widget/

iMask

Source: http://zendold.lojcomm.com.br/imask/

Auto Completion

Source: http://devthought.com/textboxlist-meets-autocompletion/

Em junho escrevi um artigo sobre a validação de campos usando o jQuery. É uma forma eficaz, pratica e moderna mas que nem sempre o cliente gosta.
Esta semana vi-me forçado a criar uma validação de campos á maneira antiga devido a uma escolha do cliente.

O código que se segue é bastante básico portanto se algum especialista em javascript quiser ajudar a criar um código igualmente simples e eficaz com uma estrutura melhor eu agradeço.

<SCRIPT>
function validate() {
var nome=form1.nome.value;
var empresa=form1.empresa.value;
var telefone=form1.telefone.value;
if (nome=='') {
alert('O seu Nome é um campo obrigatório');
return false;
}
if (empresa=='') {
alert('Por favor indique qual a Empresa');
return false;
}
if (telefone=='') {
alert('O campo Telefone é um campo obrigatório');
return false;
}
}
</SCRIPT>


Na primeira parte declaro variáveis caso tenha de adicionar mais código para trabalhar com o valor dos campos. A seguir faço a comparação caso os campos estejam vazios lança o alerta.
De forma a tornar o formulário mais coeso deveria verificar também se os campos não tiverem um determinado numero de caracteres para não validar.
Por agora este código chega para o que pretendo que é lançar um alert caso o cliente não preencha os campos obrigatórios.

Agora de forma a que o formulário não processe antes de verificar se os campos obrigatórios estão preenchidos é necessário antes da action declarar o seguinte:

onsubmit="return validate();"

Assim quando o formulário for submetido primeiro chama a função validate().
Como podes ver o código é relativamente simples, pode ser melhorado em vários aspectos e adaptados como verificar se o telefone possui apenas valores numéricos, se o nome ou empresa não tem espaços apenas para não ficarem vazios e se têm mais de 1 ou 2 caracteres, etc…

Ficam as sugestões para melhorares o código e caso o faças, partilha-o comigo.

Caso queiras aprender mais sobre JavaScript aconselho-te por começares a ler o tutorial de javascript da w3Schools

Por vezes é necessário alguma segurança nos campos de input dos sites. Para essas ocasiões uma boa forma de controlar se o utilizador é humano ou maquina usa-se um teclado virtual.
As plataformas de home banking adoptaram esta solução e em alguns casos é bastante útil.

Grey Wyvern criou um teclado virtual em JavaScript bastante interessante.

Instalação

A sua instalação é relativamente simples:

1. Faz download do código (Copy/Paste) para um ficheiro e chama esse ficheiro keyboard.js
2. Copia o código CSS e guarda-o num ficheiro que poderá ser keyboard.css
3. Coloca esses ficheiros online
4. Insere o seguinte código dentro da HEAD da página onde queres que apareça o teclado:

   <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">


   Nota: Este código assume que os ficheiros estão na mesma directoria que a página.

5. Para definir qual o campo de input onde o teclado deverá actuar basta atribuir a class keywboard:

   <input type="text" value="" class="keyboardInput">

» Javascript Graphical / Virtual Keyboard Interface

Neste tutorial irei explicar como criar uma secção extensível com conteúdo. O resultado final pode ser visto aqui.

Breve descrição

A secção extensível é composta por 2 partes:

1. O cabeçalho
2. O conteúdo

Read more…