WDD 131: Fundamentos da Web Dinâmica

S05 — Tarefa: Formulário de Avaliação de Produto

Visão Geral

Nesta tarefa, você criará uma página de formulário de avaliação de produto. Você usará um bom design de formulário, receberá requisitos de campo específicos e deverá incluir uma confirmação de envio com um contador. Além disso, o formulário deve ser fácil de usar tanto em telas de dispositivos móveis quanto de desktops.

Tarefa

Crie um formulário HTML com uma página de confirmação. O formulário deve atender às especificações listadas nas instruções. O design fica por sua conta, mas deve seguir os princípios de um bom design de formulários. Aqui está um exemplo de captura de tela do que você fará.

Instruções da Atividade

Configuração de Arquivo e Pasta

1. Crie um novo arquivo chamado "formulario.html".
2. Adicione arquivos CSS e JavaScript de suporte conforme necessário e coloque-os nas pastas apropriadas.

HTML

1. Inclua os componentes padrão de head e body HTML necessários neste curso e inclua o conteúdo de footer comum usado nas tarefas.
2. O formulário HTML deve conter os seguintes campos, atributos e funcionalidades:
   • Formulário
     • O formulário deve usar um método "get" para ser compatível com o GitHub.
     • A ação deve fazer referência a uma página de confirmação de formulário chamada "avaliacao.html".
   • Nome do Produto
     • Use um elemento select com atributos id e name apropriados, e defina-o como required (obrigatório).
     • A primeira opção no elemento select é um espaço reservado instrucional que diz "Selecione um Produto..." definido como disabled e selected para ser exibido por padrão, mas não pode ser clicado pelo usuário.
     • As opções restantes são criadas dinamicamente usando um array de produtos fornecido. Cada opção deve ter um atributo value (valor) que é o nome do produto.

       Um array de objetos com produtos é fornecido abaixo para ajudar você a entender como criar um campo de seleção com as opções dinâmicas. Normalmente, os dados viriam de uma fonte externa.

   • Classificação Geral
     • A classificação geral do produto deve ter cinco níveis (1 a 5) ou estrelas.

       O formulário de exemplo usa entidades estrela ☆ (☆) para exibir o nível. Você pode escolher o design que quiser. Aqui está outro exemplo de uso de estrelas que são preenchidas na seleção: Formulário com Input Radio Star+ – CodePen.

     • Utilize um input (entrada) do tipo radio (botão de opção) para cada um dos níveis.
     • Os atributos obrigatórios são id, name (cada um dos botões de opção deve usar o mesmo valor para o atributo name) e ser required.

       Por que cada um dos botões de opção que fazem parte desta classificação deve ter o mesmo valor de name?

   • Data de Instalação
     • Use um input do tipo date (data) para permitir que o usuário selecione a data em que o produto foi instalado.
     • Os atributos obrigatórios são id, name e required
   • Recursos Úteis
     • Este campo permite que o usuário selecione todos os recursos listados que achou úteis. Este é um campo para marcar todas as opções aplicáveis.
     • Use um input do tipo checkbox (caixa de seleção)
     • Cada caixa de seleção deve ter um atributo id, name e value.
   • Avaliação Escrita
     • Use um elemento textarea (área de texto) para permitir que o usuário escreva uma avaliação.
     • Os atributos necessários são id e name
     • A avaliação por escrito não é obrigatória.
   • Nome de Usuário
     • Use um input do tipo text (caixa de texto) para o usuário digitar o nome.
     • Adicione os atributos id e name.
     • A entrada do nome de usuário é opcional.
   • Botão de Envio de Formulário
     • Use um input do tipo submit (botão de envio) com um value apropriado que indique a finalidade da ação do formulário.
3. Cada campo do formulário deve ter um label (rótulo) associado.
4. Verifique se a ordem das tabulações do teclado está correta.
5. Inclua o conteúdo de footer comum encontrado em todas as tarefas.

CSS

1. Use seu próprio esquema de cores e opções de tipografia.
   Você é responsável por praticar bons princípios de design de alinhamento, contraste de cores, proximidade, repetição e usabilidade em todo o seu trabalho.
2. Pratique um bom design fazendo o formulário de acordo com os princípios que você aprendeu na atividade de aprendizagem sobre formulários HTML. Cabe a você desenvolver um design esteticamente agradável, alinhado aos princípios de design que favoreçam a usabilidade e uma experiência satisfatória para o usuário.

JavaScript

1. Use JavaScript para preencher as opções de Nome de Produto. O campo nome do array deve ser usado como o conteúdo de texto do elemento option, e o id do array deve ser usado no atributo value desse mesmo elemento (que estará dentro do elemento select). Copie o seguinte array de objetos com produtos no seu arquivo JavaScript para usar como fonte de dados.
   Array de Produtos

   const produtos = [
     {
       id: "fc-1888",
       nome: "capacitor de fluxo",
       classificacaomedia: 4.5
     },
     {
       id: "fc-2050",
       nome: "fios elétricos",
       classificacaomedia: 4.7
     },
     {
       id: "fs-1987",
       nome: "circuitos de tempo",
       classificacaomedia: 3.5
     },
     {
       id: "ac-2000",
       nome: "reator de baixa tensão",
       classificacaomedia: 3.9
     },
     {
       id: "jj-1969",
       nome: "equalizador de distorção",
       classificacaomedia: 5.0
     }
   ];

2. Use o localStorage para controlar o número de avaliações concluídas pelo usuário cliente adicionando um contador à página avaliacao.html de envio do formulário. Toda vez que a página for carregada corretamente após o envio do formulário, adicione um ao contador.

Teste

1. Sempre verifique seu trabalho renderizando a página localmente usando o Live/Five Server no VS Code.
2. Use o DevTools do navegador para verificar erros de tempo de execução do JavaScript no console ou clique no ícone vermelho de erro no canto superior direito do DevTools.
3. Use CSS Overview do DevTools para verificar o contraste de cores.
4. Gere o relatório do DevTools Lighthouse e execute diagnósticos de Acessibilidade, Melhores Práticas e SEO nas visualizações de dispositivos móveis e desktop.
   É melhor testar sua página em uma janela privada ou anônima do navegador.

Envio e Auditoria

1. Confirme (commit) em seu repositório local e envie (push), ou carregue, seu trabalho para seu repositório wdd131 habilitado para GitHub Pages no GitHub.
2. Use esta ☑️ ferramenta de auditoria para verificar se seu trabalho contém alguns dos elementos HTML e conteúdo CSS necessários. A ferramenta de auditoria também é usada pela equipe de avaliação.
3. Compartilhe seu trabalho publicando seu URL no fórum semanal do curso no Microsoft Teams e comente o trabalho de seus colegas dando feedback construtivo.
4. Volte ao Canvas e envie o URL correto habilitado para o GitHub Pages.

   https://seu-nomedeusuario-github.github.io/wdd131/formulario.html