este capítulo é novo 371
10
jQuery UI
Transformação radical
do formulário
Gostei do seu formulário.
O que acha de irmos
para a minha casa para
passarmos um tempo na
interface?
Glup... Espero que
meu formulário
seja validado.
A web vive e morre pelos usuários e seus dados. Coletar dados dos
usuários é um grande negócio e pode ser um desafio que consome o tempo de um
desenvolvedor web. Você viu como jQuery pode ajudar a fazer aplicações web em
Ajax, PHP e MySQL funcionarem mais efetivamente. Agora vejamos como o jQuery
pode nos ajudar a construir a interface do usuário para os formulários que coletam
dados dos usuários. Ao longo do caminho, você receberá uma dose saudável do
jQuery UI, a biblioteca oficial da interface do usuário para o jQuery.
BOOK - UCjQuery - PRODUTO FINAL.indb 371 16/05/2013 10:51:28
372 Capítulo 10
o pé grande pode precisar de mais do que um corte de cabelo
Os criptídeos são criaturas
desconhecidas ou não
reconhecidas pela comunidade
científica. Coletar bons dados
dos usuários é crucial para a
nossa pesquisa.
Alguns criptídeos famosos
incluem o Pé-Grande, o Chupa-
cabras e o Monstro do Lago Ness.
Precisamos de um formulário que
capture melhor quando e onde as
pessoas os veem.
Queria que os
paparazzi me
deixassem em paz!
Dr. Gimli
Dra. Pattersby
?
?
Os criptozoologistas querem dizer adeus ao
seu formulário HTML antigo e desajeitado.
A aparência do formulário
não é envolvente. Parece que
é do final dos anos 90.
Submit Your Cryptid Sighting
Please report the details of your crytpid sighting below along with
your contact information.
Fill out the form below and click "Enter" to Submit
Date of Sighting:
Where You Saw the Creature:
Creature Type:
Mammal
Reptile
Bird
Describe Creature:
Observer First Name:
Observer Last Name:
Observer email:
Submit Your Sighting Data:
Não há qualquer
coisa que assista ao
usuário na entrada
de dados de boa
qualidade, e o HTML
não oferece muitas
opções para isso. Como
resultado, os doutores
recebem muitos dados
indesejados.
O Criptozoologistas.org precisa de uma transformação
A Dra. Pattersby e o Dr. Gimli dedicam-se a coletar o máximo de dados possíveis
sobre o descobrimento de criptídeos, vindos de usuários ao redor do mundo. Seu site,
criptozoologistas.org é reverenciado por criptozoologistas profissionais e amadores do
mundo todo. Esses bons doutores têm outro trabalhinho para você: atualizar o formulário
dos Achados sobre os Criptídeos que está bastante desatualizado.
BOOK - UCjQuery - PRODUTO FINAL.indb 372 16/05/2013 10:51:30
você está aqui 373
jQuery UI
Submit Your Cryptid Sighting
CRYPTID SIGHTING DATA
Date of Sighting:
Creature Type:
Mammal
Distance from Creature (estimate in feet):
Creature Weight:
Creature Height:
Color of Creature Hide/Fur/Covering:
R
G
B
SIGHTING LOCATION DATA
Latitude of Sighting Location:
Longitude of Sighting Location:
Enter your sighting data:
Enter
Month
No formulário atual, esse é um campo de
texto que nos traz muitos dados desajeitados.
Queremos que o usuário faça uma opção a partir
de um calendário pop-up, para que os dados sejam
os mais precisos possíveis.
Gostaríamos que nossos
usuários clicassem e
arrastassem para digitar
os campos de dados
numéricos. Mais preciso
para nós. Mais fácil
para nossos usuários.
Você consegue deixar o botão bonito? O botão em
forma de pílula em nosso formulário atual faz com
que pareça que estamos desatualizados.
Que tal um
misturador de
cores aqui?
Usamos botões de opção para isto no formulário
atual; é possível deixá-los mais convidativos?
Coloque informações em seu formulário HTML
Abaixo há um modelo de como nossos criptozoologistas querem que fique o novo
formulário, junto com algumas observações extras.
Os criptozoologistas fizeram um pedido grande aqui. Eles querem que
você construa uma interface do usuário da forma que você encontraria
em uma aplicação do desktop. O que você acha que o jQuery oferece
para fazer isso?
BOOK - UCjQuery - PRODUTO FINAL.indb 373 16/05/2013 10:51:30
Get Use A Cabeça jQuery now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
