Formulário de contratação de serviço (V2)

Acabamento de design e documentação de webapp

O desenvolvedor receberá o link do web app, bem como:

Login de FTP
Login de EMAIL / Webmail

- - - - - - - - - - - - - - - - - - - - -

Ajustes da versão 2.0:

- - - -

1 - Endereço

O campo CEP deve vir acima do campo logradouro, deixando que os valores de adesão, custo anual e custo anual parcelado surjam por cima dele depois da validação. Assim o bloco de endereço permanecerá agrupado.

O campo Cidade e Estado deve aparecer abaixo do campo CEP.

Com os ajustes acima, o bloco endereço deve ser separado em uma nova etapa. Neste caso, ao informar o cep, ele deve ser ocultado da primeira etapa e reaparecer (o que realmente vai para o submit) na segunda etapa. Neste caso, na segunda etapa, o campo vem congelado.
Ele só pode modificar CEP, Estado e cidade na primeira etapa (ou poderia burlar a tabela de preços).

- - - -

2 - Etapa Dados do veículo

Na atual segunda etapa (que virará a terceira), mover os campos abaixo para uma nova etapa:

Veículo alienado
Veículo zero KM
Veículo proveniente de leilão
Data da emissão da Nota Fiscal (campo não obrigatório)
Data de saída da Nota Fiscal (campo não obrigatório)

Desta forma e etapa acima se chamará "procedência do veículo".

- - - -

3 - Dados pessoais

A etapa de dados pessoais deve ser subdividida com uma nova etapa "dados do condutor" (abaixo de CNH)

- - - -

4 - Dados para contato

A etapa dos dados para contato deve encerrar na parte que solicita o email. As perguntas sobre recebimentos devem ficar em uma nova etapa chamada "Recebimentos automáticos"

- - - -

5 - Etapa da assinatura

Existe uma quebra de borda no entorno da assinatura. Deixar apenas o traço para assinar, sem o contorno.


- - - -

* O motivo dos ajustes acima é deixar a navegação mais agradável no tablet na posição horizontal. Com um javascript que detecta a largura, ao abrir a página, caso a largura esteja inferior ao que se espera da largura horizontal, alertar " gire o tablet e a navegação ficará mais confortável para você. Neste formato, os campos dos forms podem ficar maiores também, mas com o cuidado de tentar evitar a rolagem se o tablet estiver na horizontal.


- - - -

Design da tela:

Para layout, inserir uma logo horizontal (PNG) na lateral esquerda superior escrito: "Tablet de auto-atendimento" (pequena, para evitar rolagem do form).

O formulário deve permanecer sempre centralizado em uma camada por cima da outra, que terá um fundo. Ex:

http://azevedo.media/clients/techstudio/theiricarus/7.html

(desconsiderar cabeçalho e rodapé desta página. O exemplo é apenas a caixa de login)

Ao carregar a página, verificar se a remoção do loading torna mais leve.


Ao carregar a página iniciarl (abertura do app), exibir um alerta (Bootstrap) de boas vindas.


- - -

A barra de progresso deve vir por cima, informando o número da etapa que a pessoa está. Ex:

http://bootsnipp.com/snippets/featured/form-process-steps

(não precisa dos títulos descritivos, apenas dos pontos com um título)

- - - - - - - - - - - - - - - - - - - - -

Tabela de valores

A tabela deverá constar já nela as colunas de valor do estado ES e outros estados (apenas duplicar o valor para todos os estados).

* O motivo disso é que provavelmente o cliente vai solicitar isso, inclusive com as variações por outros estados. Deixar o código e tabela funcional de forma que fique fácil adicionar novos estados.

Neste caso a soma no campo ficaria obsoleta. Apenas buscar os valores direto da tabela.

- - - - - - - - - - - - - - - - - - - - -

MENSAGENS:

- As mensagens disparadas em PHP devem ser reagrupadas conforme as novas etapas.

Em todos os e-mails enviados pela cooperativa, colocar a assinatura:

Atenciosamente,
Cooperativa de Veículos
www.coopermaxima.com.br
31 3131-3131 (atendimeto)
31 3131-3131 (chamadas de emergência)

- Inserir uma logo no início da mensagem (a mesma que criar pra o form, buscada como embed do site).

- - - -

Na tabela que vai para a cooperativa, agrupar os dados na tabela conforme agrupamento das etapas. Deixar a coluna do título do bloco em cinza, como na primeira coluna.

Enviar um arquivo texto (CSV) com todos os dados (para importarem no sistema até que permita integração). No CSV deve constar a data de recebimento.

O arquivo da assinatura deve ir com o nome "assinatura-do-cliente.png" (se possível com embed no corpo do email, abaixo da tabela). Se for gerar necessidade de armazenamento da assinatura no servidor, ignorar.

- - - - - - - - - - - - - - - - - - - - -

MAILCHIMP

Criar uma conta no Mailchimp para teste, criar o formulário de recebimento (nome, endereço, email, telefone, veículo) e deixar integrado.

- - - - - - - - - - - - - - - - - - - - -

Organizando a codificação:

- Remover arquivos não utilizados de todas as pastas.

- Colocar todo código com nome de variáveis, ids e classes de css, arquivos e imagens com nomenclatura em português (excluindo casos de códigos de bibliotecas prontas).

- Identar código html, javscript e php com tab.

- Organizar da melhor forma possível e comentar o código back-end e front-end para facilitar a compreensão de outros desenvolvedores (inclusive das bibliotecas prontas de PHP).

- - - - - - - - - - - - - - - - - - - - -

Integrando o recurso de autoload como web app para tablets e celulares:

http://cubiq.org/add-to-home-screen

* O problema deste é que não permite apenas "clicar" (no Chrome) e adicionar automaticamente o atalho. Ele apenas orienta como fazer, no Androide. Tentar encontrar uma forma de ter um botão que basta clicar adiciona o atalho.
Colocar esta mensagem (que vem no exemplo acima) em português para o visitante.

O link acima disponibiliza o demo pronto. Só copiar o JS e adicionar a funcionalidade com a opção que vem com o recurso de testar se já existe o link criado.

- - - - - - - - - - - - - - - - - - - - -

O desenvolvedor deverá devolver a aplicação funcionando no link e servidor especificado, encaminhando um email de testes para os emails especificados.

* Algum eventual ajuste de design poderá ser refeito durante o trabalho.

* O projeto precisa ser finalizado entre sábado e domingo, pois será apresentado na segunda.