Webgrafismo

Por vezes, desenhar formulários interessantes com alta usabilidade pode ser muito difícil mesmo lendo tutoriais sobre como desenhar formulários com CSS. Agora, existem formulários muito bonitos para você descarregar, os quais você pode sempre desenhar o seu próprio tema. Niceforms é um script que irá substituir os elementos mais comuns utilizados nos seus velhos formulários web com novos personalizáveis.

O que é?

Formulários Web. Toda a gente conhece formulários da web. A cada dia temos de preencher alguma informação em algum formulário, desde um simples login para o seu e-mail, uma compra online, ou registar-se num website. Estes são práticamente, as únicas maneiras de reunir informação na web.
Você básicamente conheçe um formulário mal olha para ele, pois geralmente possuem a mesma aparência (durante anos).
Mas no entanto, os formulários podem mudar tanto a sua aparência. Alguns discutem que é apenas uma característica de boa usabilidade, e eu concordo, mas há sempre uma altura em que você simplesmente necessita de estilizar os formulários para que estes tenham uma aparência diferente.

Como fazer isso? Niceforms vêm salvar-lhe!

Niceforms é um script que irá substituir os elementos mais comuns com novos elementos. Você pode usar o tema por defeito que é disponibilizado ou pode desenvolver a sua própria aparência com o mínimo de esforço.

E como funciona?

A ideia é simples: dado que os campos normais de entrada (incluíndo radio buttons, checkboxes, textareas, etc) podem ser apenas estilizados numa pequena escala, eles têm de estar ocultos e a sua aparência visual substituída com um trabalho semelhante, novo, e com construções totalmente personalizáveis. Em teoria, não soa muito complicado. Mas claro que, da teoria à prática existe sempre um longo caminho…

Começando então com o código XHTML básico para um formulário web, NiceForms obtem todos os campos de entrada, oculta-os, e posiciona as suas localizações com novos gráficos no seu lugar. Tudo isto é feito preservando a transferência dos dados e a selecção das propriedades de um formulário normal. Tudo é feito via JavaScript.

Características

Niceforms trabalha justamente como um formulário web normal. Os campos do formulário e os botões são totalmente escaláveis. Você pode especificar a sua largura (e altura para áreas de texto) através de propriedades regulares HTML como o tamanho, colunas e linhas. Botões são automáticamente expandidos para acomodar o montante de texto presente. A navegação pelo teclado é também suportado.

Compactiblidade

O script é totalmente compactível e foi testado com os principais browsers, com a excepção do IE6.

Temas

Você pode personalizar o aspecto dos seus formulários em qualquer modo que pretende, pela criação dos seus próprios temas. Pois NiceForms substitui os elementos do formulário com imagens, e é apenas uma maneira de cortar estas imagens correctamente e criar o CSS que as sustenta.
Mais temas estão a caminho e você é bem-vindo para contribuir também. Um curto manual sobre como criar correctamente novos temas está em progresso e deverá estar disponível brevemente.

Utilizando Niceforms

Niceforms é aplicado a todos os formulários que têm a classe “niceform”. Você pode ter outras classes também no mesmo lugar mas uma delas tem de ser “niceform” para que o script funcione. Um dos aspectos importantes do script é que necessita de um formulário com o código correcto, incluindo as propriedades declaradas nas “labels” e “values”. Não existe muita margem de erro, mas caso haja, isto irá obrigá-lo a programar os seus formulários correctamente.

Veja a secção de suporte para mais informações sobre como implementar e personalizar Niceforms.

Requisitos: IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+, Mozilla1.5+, Camino1.6+
Download: Niceforms v.2.0 (última versão estável)
Demonstração: Niceforms
Licença: Creative Commons Attribution-Share Alike 3.0

Validação de Formulários com jQuery Twitter ♥ Facebook ♥ Del.icio.us

Quando chega o momento de validar o formulário, é difícil ter uma solução versátil que funcione em todos os formulários. Descobrir como mostrar os erros não é propriamente tarefa fácil. Cedric Dugas criou um Motor de Validação jQuery para que este problema seja resolvido. Quando um erro precisa de ser mostrado, o script cria um [...]

Personaliza o teu Gmail com Cores e Temas fantásticos Twitter ♥ Facebook ♥ Del.icio.us

Os fans do Gmail têm construído extensões não oficiais para personalizar as suas caixas de correio, mas até agora os temas não estavam a ser integrados como parte do Gmail. Nós na verdade, queriamos algo mais do que a simples personalização da cor, mas hoje sairam 30 temas que são muitíssimo bons. Existe um tema estilo [...]