WDD 231: Desenvolvimento Frontend para Web I

S04 - Tarefa: Página Associe-se à Câmara

Visão Geral

O objetivo desta página é que um possível membro possa se associar à câmara de comércio por meio de um formulário de pedido de associação. As instruções fornecem os requisitos específicos de entrada do formulário e de funcionalidade.

Instruções

Configuração

1. Crie um novo arquivo chamado associacao.html na sua pasta câmara, usando seu modelo de câmara. O cabeçalho, a navegação e o rodapé serão iguais para todas as páginas do site.

Requisitos

A página do formulário deve conter os seguintes elementos, tipos e atributos de formulário. Os atributos "title" e "label" são úteis para tecnologia assistiva.

1. Use um formulário com um método get e uma ação que aponte para uma página de confirmação chamada "agradecimento.html".
2. Campos do formulário:
   • nome do candidato, tipo texto, obrigatório, nome, título e valor de preenchimento automático correto para que este campo seja preenchido automaticamente com o nome. (Quando você começa a digitar em um campo, O atributo autocomplete do HTML controla se o navegador deve ou não sugerir automaticamente valores para preencher campos de formulário, baseando-se em dados que o usuário digitou anteriormente.)
   • sobrenome do candidato, tipo texto, obrigatório, nome, título e valor de preenchimento automático correto para que este campo seja preenchido automaticamente com o sobrenome
   • cargo na organização do candidato, tipo texto, nome, título, valor de preenchimento automático de "cargo-na-organizacao" e padrão para aceitar apenas caracteres alfabéticos, hifens e espaços com pelo menos 7 (sete) caracteres usando uma expressão regular
   • endereço de e-mail, tipo e-mail, obrigatório, nome, título, valor de preenchimento automático correto e espaço reservado que contém um exemplo de e-mail.
   • número de celular, tipo telefone, obrigatório, nome, título e valor de preenchimento automático correto
   • nome da empresa/organização, tipo texto, obrigatório, nome, título e valor de preenchimento automático correto de "organizacao".
   • seleção de nível de associação, usando um campo de formulário apropriado de sua escolha, para permitir que o usuário selecione um nível de associação. Há quatro níveis de associação.
     • A Associação NP é para organizações sem fins lucrativos e não há taxa.
     • Associação Bronze
     • Associação Prata
     • Associação Ouro
   • descrição da atividade/organização, área de texto, título e nome
   • registro de data e hora, tipo oculto, nome e id. Este campo contém a data e a hora atuais em que o formulário foi carregado pelo usuário.
   • Botão de envio de formulário (button), usando entrada do tipo submit, com o rótulo devido no nó de texto do botão.
3. Cada elemento de campo, incluindo a área de texto, deve ser encapsulado em uma tag label para oferecer suporte à acessibilidade.
4. Crie 4 cartões diferentes para exibir os nomes dos níveis de associação e um link para obter mais informações. Em telas pequenas, eles são exibidos abaixo do formulário e, em telas grandes, eles são exibidos à direita do formulário. Use quatro modais HTML para exibir os benefícios de cada nível de associação. Os modais devem ser exibidos quando o usuário clicar no link em cada cartão (exemplo em tela pequena – exemplo em tela grande).
   • Quanto maior o nível de associação, maior a taxa e mais benefícios. Os benefícios podem incluir eventos especiais, treinamentos, publicidade (como posições de destaque na página inicial), descontos em eventos, etc.
5. Garanta que o design atenda a padrões como rastreamento visual favorável e progressão adequada pelo teclado (tabulação) para acessibilidade. 📃 Criando Formulários Mais Eficientes (conteúdo em inglês)
6. Incorpore animação/transição na exibição inicial de 4 cartões ou botões de níveis de associação diferentes. (É diferente de usar uma transição ao passar o mouse.) Por exemplo, você pode alterar a cor ao longo do tempo, alterar a opacidade, a margem, etc. Tente chamar a atenção para esses cartões de membro sem causar muita distração. Exemplo de animação no carregamento inicial da página
7. Crie uma nova página, chamada "agradecimento.html", que agradeça o preenchimento do formulário. Essa página deverá ser carregada após o usuário enviar o formulário. O design deve seguir o padrão do seu site.
8. Na página "agradecimento.html", você exibirá as informações do formulário preenchidas pelo usuário para todos os campos "obrigatórios" (nome, sobrenome, e-mail, número de celular, nome da empresa/organização e data e hora atuais do campo oculto). Crie o estilo e exiba as informações conforme você praticou ao concluir a atividade de aprendizagem "Formulários Avançados".

Teste

1. Continue aprimorando cada página do projeto do site da câmara em que você trabalhou até agora no curso, corrigindo problemas de padrões de desenvolvimento.
2. Certifique-se de que todos os links estejam funcionando entre as páginas existentes.
3. Verifique seu trabalho de tempos em tempos, renderizando localmente no navegador usando a ferramenta Live Server no VS Code.
4. Desenvolva seu trabalho seguindo os Padrões de Desenvolvimento do curso.
5. 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.
6. Use CSS Overview do DevTools para verificar o contraste de cores.
7. Gere um relatório do Lighthouse no DevTools, nas categorias Acessibilidade, Melhores Práticas e SEO para as visualizações em dispositivos móveis e desktop.

Auditoria e Envio

1. Adicione (add), confirme (commit), envie (push) e sincronize (pull) as alterações do seu trabalho local com o repositório wdd231 habilitado para o GitHub Pages.
2. Use esta ☑️ ferramenta de auditoria para verificar partes da sua página em relação aos padrões e alguns requisitos.
3. Compartilhe o URL no canal do seu grupo e veja o que os demais integrantes enviaram.
4. Volte ao Canvas e envie o URL correto habilitado para o GitHub Pages.

   https://nome-de-usuario.github.io/wdd231/camara/associacao.html