Projeto Final: Desenvolvimento de Site Frontend para a Telecall

Página 1 CENTRO UNIVERSITÁRIO AUGUSTO MOTTA CURSO Graduação Análise e Desenvolvimento de Sistemas ADS ANO 2023 MÓDULO Modulo I FrontEnd SEMESTRE 1 PROFESSOR Sílvio Eutímio A Telecall httpswwwtelecallcom é uma Empresa de Telefonia e Telecomunicações que oferece um amplo conjunto de serviços como Internet Dedicada Banda Larga e Wifi Recentemente a empresa fez um estudo de viabilidade para divulgação de seus produtos e serviços e identificou a necessidade de construir um site chamado CPaaS Communications Platform as a Service 2 Funcionalidades do Sistema Desafios Neste projeto final o aluno tem a oportunidade de elaborar um Site apenas frontend com um conjunto de páginas interconectadas de modo a trazer várias informações desejadas pela Empresa O site deve ter as seguintes funcionalidades principais Tela 1 Cadastrar Novo Usuário O cadastro de usuário deve ter as seguintes informações Nome Data de Nascimento Sexo Nome Materno CPF Telefone Celular Telefone Fixo Endereço Completo Login e Senha e Confirma Senha Especificidades da Tela A tela só poderá ser enviada caso atenda aos seguintes prérequisitos pré validação de formulário com Javascript 1 Campos nome Data de Nascimento Sexo Nome Materno CPF Telefone Celular Telefone Fixo Endereço Completo Login e Senha devem ser preenchidos 2 O campo nome deve ter no mínimo 15 caracteres e no máximo 60 caracteres alfabéticos 3 Os campos Telefone Celular e Telefone Fixo devem ter os seguintes formatos 55XXXXXXXXXX 4 O campo Login deve ter exatamente 6 caracteres alfabéticos 5 O campo Senha deve ter 8 caracteres alfabéticos INFORMAÇÕES IMPORTANTES i O projeto pode ter até 2 alunos ii Informações para quem não FEZ o Módulo 1 Utilizar prévalidação de formulários com Javascript criar um site que seja responsivo e utilizar algum framework de FrontEnd para este propósito iii Informações para quem já FEZ o Módulo 2 Para vocês podem criar o BackEnd mas não será avaliado portanto sintamse à vontade para implementar o BackEnd da forma que acharem mais adequado Página 2 6 Os campos Senha e Confirma Senha devem ser iguais Implemente uma forma elegante de feedback de mensagem ao usuário evite o comando alert do Javascript Ao invés de usar alert pense em algo do tipo toasts ou modal ou div eou span para exibir e esconder a mensagem Após atender a todos os prérequisitos implemente uma funcionalidade com Javascript que guarda as informações de login e senha do usuário no localstorage do browser e redirecione para a tela 2 Tela de Login do sistema Tela 2 Tela de Login A Tela de Login deve apresentar os campos login e senha além dos botões enviar e Cadastrar Novo Usuário Observação 1 Na tela 1 você implementou os prérequisitos para submeter o formulário Quais pré requisitos você implementaria para submeter este formulário Use o bom senso Observação 2 Na tela 1 você implementou mecanismos de feedback Utilize os mesmos mecanismos de feedback em todo site para que seja preservada a mesma identidade visual Após atender a todos os prérequisitos implemente uma funcionalidade com Javascript que guarda o login do usuário logado no localstorage do browser e redireciona para a Tela 3 Tela Principal do sistema Tela 3 Tela Principal do Sistema A Tela Principal do Sistema deve oferecer um menu com todos os serviços pelo portal da CPaaS Vide Anexo no Final deste documento O menu desta tela deve apresentar submenus Ao clicar em algum submenu deve ser redirecionado para determinado tópico do serviço selecionado Sugestão As imagens abaixo foram extraídas do documento pdf do CPaaS Veja que cada ícone é descrito no documento pdf como uma funcionalidade do Site Portanto os ícones poderiam ser extraídos para montar o menu da forma como você achar melhor assim você garante que seu site preserve a identidade visual do CPaaS Telas Internas Leia o pdf do CPaaS e defina quais tópicos você elegeria como submenu Faça uma pesquisa com o contato da Telecall na UNISUAM ou com o professor da disciplina para ajudálo a compreender o que deve ser apresentado das páginas internas após a autenticação Página 3 A partir do momento em que o usuário se autentica o menu deve ser apresentado em todas as páginas internas do site O Login do usuário também deve ser apresentado no canto superior direito em todas as telas Lembremse que você utilizou e guardou o login no localstorage do browser 3 Desafio Plus O Site deve prover uma barra com 2 mecanismos de acessibilidade 1 Troca de Contraste Fundo Escuro Fonte Clara e Fonte Clara Fundo Escuro Exemplo httpswwwgovbrptbrservicosconsultarcadastrodepessoasfisicas 2 Aumento e Diminuição do tamanho das fontes Exemplo httpsptstackoverflowcomquestions102712comocriarbotC3B5esparaaumentar diminuirfonte 4 Demais Requisitos do Sistema a O sistema deve ser responsivo e devem ser utilizados Frameworks de FrontEnd como Materialize Bootstrap Foundation Pure ou outro Teste todos os cadastros no formato Desktop e no formato Mobile para verificar se seu site é responsivo b O sistema deve utilizar a identidade visual da Telecall 5 Método de Avaliação Para fins de avaliação os seguintes critérios serão considerados a FrontEnd aderência à identidade visual da telecall responsividade qualidades técnicas das telas apresentadas e Javascript b Qualidade do Código HTML e Javascript c Aderência da implementação com os desafios d Desafio Plus 6 Nota Final O presente projeto vale 4 pontos Os pontos serão distribuídos nos critérios de avaliação descritos no item 5