NDICE

Documentao

Especificao do Projeto

Metodologia

Projeto de Interface

Template padro do Site

Programao de Funcionalidades

&nbsp &nbsp &nbsp RF-01, RF-02, RF-03, RF-04, RF-05, RF-06, RF-07, RF-08, RF-09, RF-10, RF-11 e RF-12

Plano de Testes de Software

&nbsp &nbsp &nbsp RF-01, RF-02, RF-03, RF-04, RF-05, RF-06, RF-07, RF-08, RF-09, RF-10, RF-11 e RF-12

Registro de Testes de Software

&nbsp &nbsp &nbsp RF-01, RF-02, RF-03, RF-04, RF-05, RF-06, RF-07, RF-08, RF-09, RF-10, RF-11 e RF-12

hospedagem

Responsveis pelo desenvolvimento dos requisitos

Apresentao do Projeto

EDUCAO FINANCEIRA

ANLISE E DESENVOLVIMENTO DE SISTEMAS

Eixo 1 - Projeto: Desenvolvimento de Aplicao Web Front-End

2023/1

Projeto desenvolvido para educar e apoiar na gesto financeira, de forma prtica, rpida e visual, atravs de funcionalidades e informaes em um portal.

Integrantes

• Gabriel Augusto Mendes Do Espirito Santo
• Lorena Poliane De Oliveira
• Matheus Soares Da Silva
• Pedro Henrique De Oliveira Lima
• Pedro Henrique Filgueiras Couto
• Talita Fernandes Silva

Orientador

• Simone De Assis Alves Da Silva

Instrues de utilizao

Assim que a primeira verso do sistema estiver disponvel, dever complementar com as instrues de utilizao. Descreva como instalar eventuais dependncias e como executar a aplicao.

Documentao

Documentao de Contexto

   Atualmente, o conceito de ativo financeiro foi consolidado como qualquer item que pode ser transformado em dinheiro, sendo que o dinheiro em conta o ativo mediador entre as satisfaes humanas individuais e sociais no modelo econmico predominante no mundo.

   Para os brasileiros, usar mais do recurso financeiro do que est disponvel prejudicial prpria vida em longo prazo. Por isso, uma nova tendncia instaurou-se, pessoas com dificuldades financeiras procuram cada vez mais informaes de como orientar-se financeiramente para que sua renda seja maior e melhor distribuda,como por exemplo, fazendo com que muitos investidores adentrem no mercado de aes com o intuito de construrem um patrimnio que permitir uma possvel aposentadoria, antecedendo a que disponibilizada pelo governo.

   Entretanto, para a parcela da populao que no tem o conhecimento inicial da gesto de suas finanas, chegar a este contexto se torna uma tarefa muito mais complexa, visto que possvel encontrar diversos sites de pesquisa com meios que ajudam no controle financeiro, mas em grande parte, no atendem efetivamente as necessidades.

   Posto isso, a busca pelo mtodo mais eficaz que se encaixe em sua realidade, deve ser encontrada na web de forma simples e objetiva, para atender a um pblico maior.

Problema

   Em face do exposto, o problema que este projeto visa resolver falta de educao financeira e a visibilidade das finanas pessoais.

Objetivos

   O objetivo geral deste projeto implementar um portal onde seja possvel orientar e dar visibilidade gesto financeira pessoal.

Como objetivos especficos, pode se ressaltar:

• Demonstrar a importncia da orientao financeira;

• Possibilitar a apresentao da situao das finanas pessoais;

• Informar sobre as vantagens de manter as contas em dia;

• Apresentar maneiras de se evitar situaes de dvida.

Justificativa

   Dentre as pesquisas realizadas, vale evidenciar alguns pontos das mtricas encontradas, pois possvel observar o alto nmero de pessoas endividadas alm do pssimo ranqueamento da populao brasileira em relao ao nvel de educao financeira. Os motivos so diversos, dentre eles, a falta de conhecimento sobre como gerir seu prprio dinheiro e a falta de visibilidade destes dados. O resumo das pesquisas a seguir, trazem um pouco da visibilidade do cenrio atual:

   Segundo o ranking global, que mede o nvel de educao financeira de 144 pases, revelou que o Brasil est na 74 posio, atrs de alguns dos pases mais pobres do mundo como Madagascar, Togo e Zimbbue. (BLEY; 2023)

   Diante disso um dos principais pilares que temos na educao financeira de que todas as pessoas deveriam ter uma reserva de emergncia, valor esse que deveria cobrir todos os seus gastos durante um perodo de 3 a 6 meses, mas apesar disso 67% dos brasileiros no possuem essa reserva. (YAHOO; 2023);

   Dentre esses e outros motivos o nmero de famlias endividadas em 2022 chegou a 78% maior patamar da histria desde 2010, conforme demonstrado na Figura 1 entre os anos de 2020 e 2022 a proporo de famlias com dvidas aumentou 11,4%, nesse mesmo perodo a taxa Selic foi elevada em apenas 2% (CARRANA; 2023)

   Entre os diversos fatores causadores do endividamento pessoal se destacam o carto de crdito, aumento do desemprego e o cheque especial. Como veremos na Figura 2, devido aos efeitos ocasionados pela pandemia como a aumento repentino do desemprego, houve uma acelerao na utilizao de crdito rpido, o carto de crdito e o cheque especial so a alternativa mais fcil para isso, porm com juros girando em torno de 364% a.a e 137% a.a respectivamente, eles se torno uma pssima opo para a sade financeira de quem os usa. (LARGHI; 2023)

   Diante do problema descrito e, visando demonstrar como o acesso s informaes (mesmo que bsicas) vem sendo cada vez mais acessveis, viemos atravs de algumas imagens exemplificar na prtica como alguns bancos visam passar informaes objetivas. Quando falamos de educao financeira, a forma como guardamos e gerenciamos nosso dinheiro fator fundamental.

   Percebemos que startups que trazem um novo conceito de banco vm focando muito mais na insero de seus usurios aplicativos, onde se tem uma melhor visualizao de onde o seu dinheiro est alocado e at mesmo como voc o gastou. Nas figuras 3, 4 e 5 a seguir, podemos conferir atravs dos prints dos bancos Nubank e banco Inter, como as informaes sobre a utilizao do dinheiro tratada de forma interativa e clara.

   Nota-se que, no caso da Nubank, alm de oferecer dados referentes ao saldo e movimentao de forma simples e objetiva, ainda possui as chamadas Caixinhas, onde pode-se optar por guardar o seu dinheiro de forma a render juros, especificando ainda o objetivo daquele dinheiro como criar uma reserva de emergncia ou at mesmo comprar um bem, veja a figura 6.

   Temos tambm no mesmo app, uma ferramenta para organizar e at mesmo automatizar o pagamento de boletos, transferncia em dinheiro, dentre outros compromissos que podemos eventualmente ter. Vejamos exemplos nas figuras 7 e 8:

   J no banco Inter, temos uma plataforma muito boa tambm, trazendo uma fcil visualizao de saldo, gastos, disponibilizando extrato e sendo possvel tambm guardar de forma segura o seu dinheiro, de uma maneira que renda juros a seu favor, no chamado Porquinho. A seguir, na figura 9, 10 e 11 temos exemplos tanto dos informativos de saldo e gastos, quanto do porquinho.

   Vimos que atualmente, a informao nos aplicativos citados, tem chegado de maneira objetiva e de fcil visualizao para o usurio, onde bancos se importam em levar a informao e a praticidade, facilitando assim o gerenciamento de seu dinheiro atravs de dados claros na tela de seu smartphone ou computador. Este ser o foco do nosso site, uma plataforma intuitiva que te d clareza tanto para controle de gastos, quanto para formas de guardar e gerenciar o seu dinheiro.

Pblico-alvo

   O portal poder beneficiar todas as pessoas com dificuldades em manter uma vida financeira saudvel e estvel, ajudar na construo de um mindset (configurao mental) voltado para a educao financeira, auxiliar na compreenso de que no se trata apenas de investir e enriquecer, mas tambm de fazer o melhor com a verba que possui, consumo consciente, poupar para realizao de projetos pessoais e viver dentro de uma realidade financeira sem contrair gastos desnecessrios.

   Visando proporcionar uma ferramenta de fcil acesso, visibilidade e compreenso acerca de gesto de gastos e finanas, concluiu-se que o pblico-alvo deste aprendizado sero: todas as pessoas interessadas no assunto.

Especificao do Projeto

   A equipe consolidou uma definio precisa dos pontos problemticos e questes mais importantes a serem abordadas neste projeto. Houve a participao de voluntrios por meio de uma entrevista que teve como objetivo coletar informaes sobre suas respectivas situaes financeiras. As informaes obtidas foram utilizadas para criar histrias de usurios e personas descritas abaixo.

Personas

   Durante o processo de entendimento do problema, foram analisadas pessoas com diferentes estilos de vida, sendo apresentadas a seguir:

Histrias de usurios

   De acordo com as informaes obtidas com base na entrevista feita acima, foram coletadas as seguintes histrias:

Eu como [PERSONA]	quero/desejo [O QUE]	para .... [POR QUE]
Manoel Gomes	Visualizar informaes sobre como administrar melhor minhas finanas.	Realizar novas atividades, como abrir um negcio prprio.
Michael Douglas Nunes	Entender em quais situaes posso poupar meu dinheiro.	Para investir de modo seguro at poder viver de dividendos.
Raphael Goulart	Buscar dicas sobre distribuir meu oramento de forma mais eficiente.	Poder concluir a faculdade, para expandir os negcios da famlia.
Eduardo Ferreira Souza	Aprender sobre manuteno e diminuio de gastos.	Para me preparar para situaes de emergncia.
Natlia de Ftima Silva	Saber por que meu carto de crdito est sempre sem limite.	Pois desta maneira consigo saber onde parar de gastar.
Mrcia Cristina Santos	Saber os primeiros passos para organizar minha vida financeira.	Conseguir pagar os custos de uma escola particular para meu filho.

Requisitos do Projeto

   Os requisitos apresentados a seguir sero o escopo funcional do projeto, sendo os requisitos funcionais responsveis por: descrever as funcionalidades do site em relao a interao que este ter com o usurio e, os requisitos no funcionais, responsveis por: garantir o funcionamento e escalabilidade do projeto.

Requisitos Funcionais

A tabela a seguir apresenta os requisitos do projeto, identificando a prioridade em que os mesmos devem ser entregues.

ID	Descrio	Prioridade
RF-01	O site deve conter, em todas as pginas, um menu de navegao que permita um redirecionamento entre as prprias pginas.	Alta
RF-02	O site deve conter, em todas as pginas, tradutor de libras (acessibilidade).	Mdia
RF-03	O site deve conter, em todas as pginas, a opo de aumentar ou diminuir a fonte (acessibilidade).	Mdia
RF-04	O site deve conter, em todas as pginas, um rodap com a marca registrada da empresa, CNPJ e link para contato.	Alta
RF-05	O Site deve conter, em todas as pginas textos e imagens relacionados ao tema.	Alta
RF-06	O site deve conter, na "Pgina principal, chamadas para as todas as outras pginas do site.	Alta
RF-07	O Site deve conter, na pgina "Dashboard", campos com nomenclaturas predefinidas para imputar informaes financeiras.	Alta
RF-08	O Site deve conter, na pgina "Dashboard", um grfico apresentando os dados imputados referente aos gastos.	Alta
RF-09	O Site deve conter, na pgina "Dashboard", uma tabela com demonstrativo dos dados imputados referente aos gastos.	Alta
RF-10	O Site deve apresentar, na pgina "Dashboard", uma mensagem orientativa resultante dos dados imputados.	Alta
RF-11	O site deve conter, na pgina Cases de sucesso, uma relao das empresas parceiras da iniciativa do site.	Mdia
RF-12	O Site deve conter, nas pginas "Cases de Sucesso","Desvantagens e "Vantagens", Videos relacionados ao tema.	Alta

Requisitos no funcionais

A tabela a seguir apresenta os requisitos no funcionais que o projeto dever atender.

RNF-01	O Site deve ter fcil navegao e utilizao.	Mdia
RNF-02	O site deve ser responsivo a diferentes resolues de tela.	Mdia
RNF-03	O site dever ser elaborado utilizando as linguagens (HTML, CSS E JAVASCRIPT).	Alta
RNF-04	O Site dever ter alta disponibilidade.	Mdia
RNF-05	O Site no exigir treinamento prvio dos usurios.	Mdia

Restries

A tabela abaixo apresenta as questes que representam obrigaes claras para o desenvolvimento do projeto em questo e que limitam sua execuo.

RE-01	O site dever ser entregue at o dia 11 de junho de 2023, no podendo extrapolar esta data.
RE-02	O site no ir gerar renda aos usurios.
RE-03	O site no utilizar tecnologia de framework, apenas ferramentas bsicas da Web no Frontend.

Metodologia

A metodologia contempla as definies feitas pela equipe a fim de demonstrar as ferramentas utilizadas para a organizao das tarefas de execuo do projeto e tambm na manuteno de cdigos.

Relao de Ambientes de Trabalho

Esto apresentadas na tabela a seguir, as plataformas utilizadas para o desenvolvimento do projeto e a relao dessas ferramentas com o produto.

Ambiente	Plataforma	Link de Acesso
Repositrio de cdigo fonte	Github	https://github.com/ICEI-PUC-Minas-PMV-ADS/educacaofinanceira
Documentos do projeto	GitHub	https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2023-1-e1-proj-web-t7-rich/blob/main/README.md
Projeto de Interface e Wireframes	Canva	https://www.canva.com/design/DAFgf8cwCXs/iGznyMJUu8l-dfLF3M3OIw/edit?utm_content=DAFgf8cwCXs&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton
Gerenciamento do Projeto	GitHub	https://github.com/orgs/ICEI-PUC-Minas-PMV-ADS/projects/337/views/1

Gerenciamento de projeto

Visando um processo de desenvolvimento mais adequado ao escopo do projeto, aps anlise do contexto, a equipe optou por utilizar o Scrum como estrutura gil. A equipe est organizada da seguinte maneira:

• Product Owner: Pedro Henrique Filgueiras Couto

• Scrum Master: Talita Fernandes

• Equipe de Desenvolvimento

  • Gabriel Augusto Mendes Do Espirito Santo
  • Lorena Poliane De Oliveira
  • Matheus Soares Da Silva
  • Pedro Henrique De Oliveira Lima
  • Pedro Henrique Filgueiras Couto
  • Talita Fernandes Silva

• Equipe de Design

  • Gabriel Augusto Mendes Do Espirito Santo
  • Lorena Poliane De Oliveira
  • Matheus Soares Da Silva
  • Pedro Henrique De Oliveira Lima

A plataforma Github Project est sendo utilizada pela equipe para organizao e distribuio das tarefas do projeto, sendo as atividades segmentadas pelas listas a seguir:

• Product Backlog: contm a lista de todas as macros tarefas previstas para a entrega de todo o projeto e, a cada sprint, sero elencadas para a lista To do conforme prioridades. Se necessrio, podem ser descontinuadas.

• To Do: a lista apresenta todas as tarefas elencadas para serem trabalhadas durante a sprint.

• In Progress: apresenta as tarefas que j foram iniciadas pelos responsveis atribudos.

• Done: assim que a tarefa finalizada ela apresentada nesta lista. Significa que no haver mais a necessidade de atuao.

O quadro kanban do GitHub Project utilizado pela equipe est disponvel atravs da URL https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2023-1-e1-proj-web-t7-rich e atualmente, se encontra neste estado, conforme Figura Kanban.

Projeto de Interface

No desenvolvimento da interface do sistema, foram enfatizadas questes como acessibilidade e usabilidade. Assim, buscamos uma identidade visual uniforme em todas as telas, tanto em desktops quanto em dispositivos mveis.

Fluxo do Usurio

O diagrama demonstrado na Figura 13 mostra os caminhos de interao possveis para que o usurio navegue pelas telas do site. Cada uma das telas deste fluxo esto detalhados na seo de Wireframes. Para visualizao do wireframe interativo, acesse o Wireframe

Wireframes

Conforme fluxo de telas do projeto, apresentado no item Fluxo do Usurio, as telas do sistema apresentam estruturas de blocos que contm os seguintes tens:

Cabealho

Rodap

Tradutor de Libras

Zoom de Fonte

Grficos

Vdeos

Imagens

Links

Tela - Home

A tela Home mostra os cones das pginas que compe o projeto, que levam o usurio para as telas de Dashboard, Vantagens, Desvantagens e Cases de Sucesso.

Tela - Dashboard (Insero, Viso Geral e Grficos)

A tela Dashboard possui os seguintes campos:

Insero, onde ser inserido as despesas e a renda financeira em suas respectivas categorias, categorias essas que esto divididas em: despesas fixas (aquelas que so inalterveis e esto presentes mensalmente); despesas variveis (aquelas despesas peridicas provenientes de imprevistos e ocasies especiais; e renda que contempla salrios, investimentos e outras bonificaes, demonstrada na figura 15 a seguir.

Viso Geral, que obtem-se um demonstrativo geral da renda e despesas, bem como uma classificao resultante do percentual de endividamento, a ainda um breve resumo das despesas em relao aos percentuais ideais, demonstrada na figura 16 a seguir.

Grficos, onde encontra-se um detalhamento mais amplo, bem como grficos dos percentuais dos gastos essencias e variveis em relao a suas respectivas categorias, demontrada na figura 17 a seguir.

Tela - Vantagens

A tela Vantagens apresenta blocos informativos com um texto sobre os proveitos de adotar a gesto financeira; imagem ilustrativa referente ao texto; vdeo de reportagem relacionado ao contedo; texto complementar ao vdeo; e o bloco de barra lateral possui links relacionados.

Tela - Desvantagens

A tela Desvantagens apresenta, inicialmente, um texto informativo, que mostra para o leitor algumas desvantagens de no se ter uma gesto financeira que seja coerente com seus ganhos; em seguida tem-se um bloco informativo contendo um texto que precede uma imagem sobre algumas consequncias da falta da gesto financeira; em seguida apresenta outro bloco informativo que ir conter texto introdutrio falando sobre nome sujo, e um vdeo informativo sobre este assunto.

Tela - Cases de Sucesso

A tela Cases de Sucesso apresenta a histria da RICH, motivao, expectativas, viso e tambm experincias de pessoas que se beneficiaram com o site.

Template do Site

A figura 21, demonstra o layout padro a ser utilizado como base para todas as pginas do site, conforme apresentado anteriomente no tpico referente ao Projeto de Interface.

Funcionalidades do Sistema

Nesta seo so apresentadas as telas desenvolvidas para cada uma das funcionalidades do sistema. O respectivo endereo (URL) e outras orientaes de acesso so apresentadas na sequncia.

---

Menu Cabealho(RF-01)

O menu tem como objetivo dar a possibilidade do usurio navegar entre todas as pginas sem que exista a necessidade de retornar a pgina principal

Requisitos atendidos

• RF-01

Artefatos da funcionalidade

• Cdigo HTML adicionado em cada uma das pginas do site.
• Header.css
• Header.js

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R01

---

Acessibilidade - Tradutor para Libras (RF-02)

A funcionalidade de traduzir os textos em libras est presente em todas as pginas dos site. A figura 22, apresenta o exemplo do tradutor de libras disponvel em tela. O cdigo referente a essa funcionalidade est arquivado na pasta "src" deste projeto, estruturada no HTML contendo importao de link externo.

Requisitos atendidos

• RF-02

Artefatos da funcionalidade

• default.html

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R02
2. A funo de traduzir em libras estar presente em todas as pginas.

---

Acessibilidade - Aumentar e Diminuir fonte (RF-03)

A funcionalidade de aumentar e diminuir os textos est presente em todas as pginas dos site. A figura 23, apresenta o exemplo da funcionalidadew disponvel em tela. O cdigo referente a essa funcionalidade est arquivado na pasta "src" deste projeto, estruturada no HTML, JS e CSS e contendo importao de link externo.

Requisitos atendidos

• RF-03

Artefatos da funcionalidade

• acessibilidadeFonte.js;
• Importao de scripts em todos os htmls;
• Estilizao feita no RF-01, por pentecer ao Menu.

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R03
2. A funcionalidade de aumentar e diminuir os textos est presente em todas as pginas dos site.

---

Rodap (RF-04)

A funcionalidade do Rodap foi desenvolvida como um componente reutilizvel e se encontra disponvel em todas as pginas do site. A figura 34 demonstra como o rodap apresenta-se estaticamente em tela, sendo que, dinamicamente, possui uma funcionalidade de aumentar o tamanho da Logomarca e do cone de e-mail ao passar o mouse por cima destes e de clicar no cone de e-mail para abrir a ferramente Gmail do Google. O cdigo referente a essa funcionalidade est arquivado na pasta "src" deste projeto com o nome de footer.html e footer.css, estruturada no HTML contendo importao de link externo.

Por se tratar de um componente reutilizvel que visa otimizar o aproveitamento da funcionalidade, faz-se necessria duas aes no HTML de cada pgina: a importao de um link dentro da tag Head (linha 10) e a insero de uma div no fim do body (linha 14 a 16) contendo as informaes conforme demarcado na figura 34 a seguir:

Requisitos atendidos

• RF-04

Artefatos da funcionalidade

• footer.html
• footer.css

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R04
2. A funo do rodap estar presente em todas as pginas do site.

---

Textos e Imagens (RF-05)

A funcionalidade de conter textos e imagens relacionados ao tema em todas as pginas do site, tem como objetivo tornar as informaes mais claras e objetivas. O cdigo referente a essa funcionalidade est arquivado na pasta "src" deste projeto, estruturada no HTML/CSS contendo importao de link externo. Um exemplo da tela apresentada na figura 35.

Segue apresentado as aes necessrias feitas no HTML da pgina "Vantagens": a importao de um link dentro da tag main (linha 76), conforme demarcado na figura 36 a seguir:

Requisitos atendidos

• RF-05

Artefatos da funcionalidade

• vantagens.html
• vantagens.css

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R05
2. A funo de apresentar texto e imagens estar presente em todas as pginas do site.

---

Pgina Homepage Completa(RF-06)

A Pgina Home tem como objetivo apresentar e chamar ateno das outras pginas do site.

Requisitos atendidos

• RF-06

Artefatos da funcionalidade

• index.html
• index.css

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R01

---

Dashboard - Campos de input de informaes (RF-07)

Nessa tela, est contido os campos onde sero imputados as despesas fixas do usurio. A figura 42 apresenta os campos existentes e o local onde se deve inserir os valors alm de um campo "resultado" que soma os valores inseridos

Requisitos atendidos

• RF-07

Artefatos da funcionalidade

• dashboard.html
• dashboard.js
• dashboard.css

Estrutura de dados

Instrues de acesso

1. Abra um navegador de internet e informe o seguinte URL: R07
2. Digite os valores nos campos indicados;
3. Clique em "Resultado";

---

Dashboard - Grficos (RF-08)

Essa tela contm todos os grficos com os valores digitados em cada categoria. A figura 46 apresenta um grfico de rosca dividido em renda e despesas e suas respectivas categorias, bem como a soma da renda e despesas e uma mensagem de como voc est sua situao, j a figura 47 contm 3 grficos de barras que demonstra o endividamento geral, despesas fixas e despesas variveis.

Requisitos atendidos

• RF-08

Artefatos da funcionalidade

• dashboard.html
• dashboard.js
• dashboard.css

Estrutura de dados

Instrues de acesso

1. Abra um navegador de internet e informe o seguinte URL: R08
2. Digite os valores nos campos indicados;
3. Os grficos so alimentados automaticamente; **************************

Dashboard - Tabela (RF-09)

Ainda na tela dashboard, aps os dados serem inputados pelo usurio, o site apresentar uma tabela para o usurio, que mostrar se cada dispesa da pessoa est dentro da porcentagem ideal para o salrio dela. Esta tabela utilizar os mesmos dados imputados no inicio da tela.

Requisitos atendidos

• RF-09

Artefatos da funcionalidade

• dashboard.html
• dashboard.css
• dashboard.js

Estrutura de dados

Instrues de acesso

1. Abra um navegador de internet e informe o seguinte URL: https://icei-puc-minas-pmv-ads.github.io/educacaofinanceira/Dashboard.html;
2. Digite os valores nos campos indicados;
3. No fim da tela, clique no boto resumo, abaixo da tabela, as mensagens aparecero em seguida frente de cada despesa.

---

Dashboard - Mensagem orientativa (RF-10)

Ainda na tela dashboard, aps os dados serem inputados pelo usurio, o site apresentar uma mensagem informativa para o usurio, dizendo se sua relao renda/despesas est indo bem ou no.

Requisitos atendidos

• RF-10

Artefatos da funcionalidade

• dashboard.html
• dashboard.css
• dashboard.js

Estrutura de dados

Instrues de acesso

1. Abra um navegador de internet e informe o seguinte URL: https://icei-puc-minas-pmv-ads.github.io/educacaofinanceira/Dashboard.html;
2. Digite os valores nos campos indicados;
3. Tecle enter, a mensagem aparecer em seguida, entre os grficos.

---

Pgina Cases de Sucesso Completa (RF-11)

A pgina Cases de Sucesso tem por objetivo apresentar relatos de casos que obtiveram sucesso ao utilizar o site. Tecnicamente, a pgina deve conter imagem e vdeo relacionado ao tema, alm de texto. A figura 31 apresenta a pgina completa disponvel em tela. O cdigo referente a essa funcionalidade est arquivado na pasta "src" deste projeto, estruturada no HTML e CSS e contendo importao de link externo.

Requisitos atendidos

• RF-11

Artefatos da funcionalidade

• casesucesso.html;
• casesucesso.css.

Estrutura de Dados

Instrues de acesso

1. Abra um navegador de Internet e informe a seguinte URL: R11

---

Vdeos relacionados Educao Financeira (RF-12)

A Funcionalidade de apresentar vdeos sobre a educao financeira encontra-se nas pgicnas de "Cases de Sucesso", "Desvantagens e "Vantagens". O cdigo referente a essa funcionalidade est arquivado na pasta "src" deste projeto, estruturada no HTML/CSS contendo importao de link externo. Um exemplo da tela apresentada na figura 33.

Requisitos atendidos

• RF-12

Artefatos da funcionalidade

• vantagens.html

Estrutura de Dados

Instrues de Acesso

1. Abra um navegador de internet e informe o seguinte URL: https://lorenapoli.github.io/vantagens.html
2. Este requisito estar presente nas pginas "Cases de Sucesso", "Desvantagens" e "Vantagens".

---

Plano de Testes de Software

Os requisitos para realizao dos testes de software so:

• Site publicado na Internet
• Navegador da Internet - Chrome, Firefox ou Edge
• Conectividade de Internet para acesso s plataformas (APISs)

Os testes funcionais a serem realizados no site esto descritos a seguir:

Requisito 01

Caso de Teste	T.1 - Menu deve aparecer em todas as pginas.
Requisitos Associados	RF-01 - O site deve conter, em todas as pginas, um menu de navegao que permita um redirecionamento entre as prprias pginas.
Objetivo do Teste	Verificar se clicando nas opes do manu este redireciona para as pginas corretas. Verificar se o menu est sendo apresentado corretamente em todas as pginas.
Passos	Acessar o site Verificar se o Menu est sendo apresentado na parte superior do site Clicar nas opes do menu Avaliar se na pgina apresentada o menu est disponvel Avaliar se a pgina que selecionou a pgina que est sendo apresentada.
Critrios de xito	A pgina apresentada a pgina que foi selecionada. As pginas subsequentes no esto com o menu sendo apresentado.
Critrios de no xito	A pgina selecionada no menu no a pgina que foi apresentada. O Menu no apresentado em todas as telas do site.

---

Requisito 02

Caso de Teste	T.2 - Visualizar em todas as pginas a opo de traduzir os textos em Libras.
Requisitos Associados	RF-02 - O site deve conter, em todas as pginas, tradutor de libras (acessibilidade).
Objetivo do Teste	Verificar se os textos esto sendo traduzidos em Libras ao usar a funcionalidade; Verificar se a funcionalidade se encontra disponvel em todas as pginas.
Passos	Acessar o site; Clicar no cone do tradutor de Libras; Selecionar algum texto; Verificar se o texto est sendo representado pelo personagem do tradutor de Libras; Repetir o processo em todas as pginas.
Critrios de xito	O texto ser traduzido em Libras; A funcionalidade estar disponvel em todas as pginas.
Critrios de no xito	O texto no ser traduzido em Libras; A funcionalidade no estar disponvel em todas as pginas.

---

Requisito 03

Caso de Teste	T.3 - Visualizar em todas as pginas a opo de aumentar e diminuir a fonte.
Requisitos Associados	RF-03 - O site deve conter, em todas as pginas, a opo de aumentar ou diminuir a fonte (acessibilidade).
Objetivo do Teste	Verificar se a funcionalidade de aumentar e dimnuir a fonte est sendo aplicada; Verificar se a funcionalidade se encontra disponvel em todas as pginas.
Passos	Acessar o site; Clicar no cone que simboliza a opo de ampliar a fonte; Verificar se o texto foi ampliado; Clicar no cone que simboliza a opo de diminuir a fonte; Verificar se o texto diminuiu de tamanho; Repetir o processo em todas as pginas.
Critrios de xito	O texto ser ampliado; O texto ser diminudo; A funcionalidade estar disponvel em todas as pginas.
Critrios de no xito	O texto no ser ampliado; O texto no ser diminudo; A funcionalidade no estar disponvel em todas as pginas.

---

Requisito 04

Caso de Teste	T.4 - Visualizar em todas as pginas o rodap.
Requisitos Associados	RF-04 - O site deve conter, em todas as pginas, um rodap com a marca registrada da empresa, CNPJ e link para contato.
Objetivo do Teste	Verificar se ao passar o mouse sobre a logomarca e o cone de e-mail, eles so levemente ampliados; Verificar se ao clicar no cone de e-mail uma nova guia ser aberta apresentando a ferramenta Gmail; Verificar se a funcionalidade se encontra disponvel em todas as pginas.
Passos	Acessar o site; Passar o mouse sobre a logomarca; Verificar se foi levemente ampliada; Passar o mouse sobre o cone de e-mail; Verificar se foi levemente ampliado; Clicar no nco de e-mail; Verificar se uma nova guia foi aberta na pgina da ferramenta Gmail; Repetir o processo em todas as pginas.
Critrios de xito	A logomarca ser levemente ampliada; O cone de e-mail ser levemente ammpliado; O cone de e-mail abrir em uma nova guia apresentando a ferramenta do Gmail; A funcionalidade estar disponvel em todas as pginas.
Critrios de no xito	A logomarca no ser levemente ampliada; O cone de e-mail no ser levemente ammpliado; O cone de e-mail no abrir em uma nova guia apresentando a ferramenta do Gmail; A funcionalidade no estar disponvel em todas as pginas.

---

Requisito 05

Caso de Teste	T.5 - Visualizar em todas as pginas textos e imagens.
Requisitos Associados	RF-05 - O Site deve conter, em todas as pginas textos e imagens relacionados ao tema.
Objetivo do Teste	Verificar ao acessar as pginas, se os textos e imagens iro aparecer.
Passos	Acessar o site; Clicar no cone "Vantagens"; Verificar se a pgina abriu com os textos e imagem.
Critrios de xito	A pgina exibir imagem e textos.
Critrios de no xito	A imagem e os textos no serem exibidos.

---

Requisito 06

Caso de Teste	T.6 - Na deve possuir chamadas para as todas as outras pginas do site.
Requisitos Associados	RF-06 - O site deve conter, na "Pgina principal, chamadas para as todas as outras pginas do site.
Objetivo do Teste	Verificar se na pgina principal se todos os textos e imagens redirecionam para as pginas corretas.
Passos	Acessar o site; Clicar em qualquer uma das imagens ou textos.
Critrios de xito	A pgina apresentada a pgina que foi selecionada.;
Critrios de no xito	A pgina selecionada no a pgina que foi apresentada.;

---

Requisito 07

Caso de Teste	T.7 - Conter na pgina dashboard campos separados por categoria para inserir os dados financeiros .
Requisitos Associados	RF-07 - O Site deve conter, na pgina "Dashboard", campos com nomenclaturas predefinidas para imputar informaes financeiras.
Objetivo do Teste	Verificar se todos os campos aceitam digitao; Verificar se os dados informados esto sendo captados;
Passos	Acessar o site; Informar os dados em todos os campos; Verificar se foi possivel inserir os dados corretamente; Verificar na soma se todos as campos foram computados;
Critrios de xito	Foi possvel informar os dados corretamente; A soma dos valores informados condiz com os seus respectivos valores;
Critrios de no xito	Foi possivel informar dados no numricos; Houve limite de caracteres; A soma ficou divergente do informado; Houve algum campo desconsiderado na hora da soma.

---

Requisito 08

Caso de Teste	T.8 - Conter na pgina dashboard grficos provenientes dos valores fornecidos .
Requisitos Associados	RF-08 - O Site deve conter, na pgina "Dashboard", um grfico apresentando os dados imputados referente aos gastos..
Objetivo do Teste	Verificar se todos os grficos recebem os valores fornecidos; Verificar se todos os grficos no cumprem o propsito de comparar renda e despesas; Verificar se todos os grficos funcionam parcialmente em relao aos dados fornecidos;
Passos	Acessar o site; Informar os dados em todos os campos; Verificar se os grficos foram alimentados; Verificar se os grficos esto coerrentes com os valores fornecidos;
Critrios de xito	Os grficos demonstram corretamente os valores fornecidos; Os grficos cumprem o papel proposto de comparar renda e despesas
Critrios de no xito	Os grficos no foram alimentados corretamente; Os grficos no cumprem o papel de comparar renda e despesas;

---

Requisito 09

Caso de Teste	T.9 - Conter na pgina dashboard uma tabela com os valores fornecidos pelo usurio.
Requisitos Associados	RF-09 - O Site deve conter, na pgina "Dashboard", uma tabela com demonstrativo dos dados imputados referente aos gastos.
Objetivo do Teste	Verificar se a tabela est funcionando corretamente com os respectivos dados imputados nos campos da pgina dashboard; Verificar se as mensagens apresentadas esto corretas de acordo com o percentual das despesas pr definido;
Passos	Acessar o site; Informar os dados em todos os campos; Verificar se a tabela foi alimentada corretamente; Verificar se a mensagem est coerente com os dados das despesas;
Critrios de xito	A tabela demonstra corretamente os valores fornecidos nos campos da pgina dashboard; A tabela cumpre o papel proposto de comparar renda e despesas A tabela mostra a mensagem correta de acordo com a porcentagem da despesas pr definido;
Critrios de no xito	A tabela no foi alimentadas corretamente; As mensagens no aparecem na coluna status; A mensagem aparece incorretamente na coluna status;

---

Requisito 10

Caso de Teste	T.10 - Conter na pgina dashboard uma mensagem orientativa com base nos dados fornecidos pelo usurio.
Requisitos Associados	RF-09 - O Site deve apresentar, na pgina "Dashboard", uma mensagem orientativa resultante dos dados imputados. .
Objetivo do Teste	Verificar se a mensagem aparece na tela ao imputar os dados nos campos; Verificar se a mensagem est mudando quando os dados forem alterados; Verificar a coerncia das mensagens com os dados do grfico;
Passos	Acessar o site; Informar os dados em todos os campos; Verificar se a mensagem apareceu; Verificar se a mensagem modifica aps a alterao dos dados; Verificar se a se a mensagem est coerente com as porcentagens do grfico, ou seja, enquanto o salrio for maior que as despesas a mensagem ser que ser positiva, caso contrrio, esta ser negativa;
Critrios de xito	A mensagem est aparecendo; A mensagem est modificando de acordo com os dados imputados; A mensagem est correta;
Critrios de no xito	A mensagem no aparece; A no modifica com relao aos dados imputados; A mensagem aparece de forma incorente com os dados imputados;

---

Requisito 11

Caso de Teste	T.11 - Visualizar relao das empresas parceiras.
Requisitos Associados	RF-11 - O site deve conter, na pgina Cases de sucesso, uma relao das empresas parceiras da iniciativa do site.
Objetivo do Teste	Verificar se a pgina Cases de Sucesso possui uma relao de empresas parceiras. Verificar se ao clicar no cone de cada empresa uma nova guia ser aberta com o respectivo site.
Passos	Acessar no menu a opo Cases de Sucesso. Verificar se possui uma sesso com a relao das empresas parceiras; Clicar na logomarca de cada empresa e verificar se esto sendo redirecionados para os respecitivos sites.
Critrios de xito	A relao de empresas parceiras exisitr na pgina Cases de Sucesso; Ao clicar na imagem da logomarca de cada empresa, ser redirecionado corretamente.
Critrios de no xito	A relao de empresas parceiras no exisitr na pgina Cases de Sucesso; Ao clicar na imagem da logomarca de cada empresa, no ser redirecionado corretamente.

---

Requisito 12

Caso de Teste	T.12 - Visualizar nas pginas "Cases de Sucesso","Desvantagens e "Vantagens", videos relacionados ao tema.
Requisitos Associados	RF-12 - O Site deve conter, nas pginas "Cases de Sucesso","Desvantagens e "Vantagens", Videos relacionados ao tema.
Objetivo do Teste	Verificar ao acessar a pgina "Vantagens", os vdeos sero reproduzidos; Verificar se ao clicar nos links relacionados, uma nova guia ser aberta direcionando um outro site.
Passos	Acessar o site; Acessar o Menu e clicar na opo "Vantagens"; Clicar no vdeo e verificar se ir reproduzir; Clicar nos links relacionados e verificar se uma nova guia ser aberta direcionando um outro site.
Critrios de xito	Os vdeos iro reproduzir; Os links relacionados iro abrir em uma nova guia, abrindo um apgina de outro site.
Critrios de no xito	Os vdeos no iro reproduzir; Os links relacionados no iro abrir em uma nova guia, abrindo um apgina de outro site.

---

Registro de Testes de Software

Os resultados obtidos nos testes de software realizados so descritos abaixo:

Requisito 01

Figura 64 * T.1 - Testar o menu em todas as paginas.

Requisito 02

• T.2 - Testar a funcionalidade de traduzir os textos em Libras.

Figura 65

---

Requisito 03

• T.3 - Testar a funcionalidade de aumentar e diminuir textos.

Figura 66

---

Requisito 04

• T.4 - Testar a funcionalidade de aumentar levemente a Logomarca e o smbolo de e-mail do Rodap, alm de direcionar para a pgina do Gmail ao clicar no cone do e-mail.

Figura 67

---

Requisito 05

• T.5 - Testar a funcionalidade de conter imagens e textos relacionados ao tema.

Figura 68

---

Requisito 06

• T.6 - Testar a funcionalidade de conter imagens e textos relacionados ao tema.

Figura 69

---

Requisito 07

• T.7 - Teste dos campos para insero de dados.

Figura 70

https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2023-1-e1-proj-web-t7-rich/assets/128756585/4840b5c2-341c-4084-8722-a2376955db70

---

Requisito 08

• T.8 - Teste dos grficos do dashboard

Figura 71

https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2023-1-e1-proj-web-t7-rich/assets/128756585/915f8e82-a7c8-47cf-938c-e2a05778a1ad

---

Requisito 09

• T.9 - Verificar se a funcionalidade de aparecerem as mensagens ao clicar no boto 'Resumo'.
• T.9 - Verificar se a tabela est sendo preencida corretamente com os dados imputados nos campos respectivos do dashboard.
• T.9 - Verificar se a mensagem alterada quando se altera os dados imputados.

Figura 72

---

Requisito 10

• T.10 - Verificar se a mensagem aparece ao preencher os campos.
• T.10 - Verificar se a mensagem modifica de acordo com os dados.
• T.10 - Verificar se a mensagem est coerente em relao ao valores dispesas/renda.

Figura 73

---

Requisito 11

• T.11 - Testar a funcionalidade de abrir os sites dos parceiros em uma nova guia ao clicar nas suas respectivas logomarcas.
• T.11 - Verificar a pgina completa.
• T.11 - Testar o vdeo da pgina.

Figura 74

---

Requisito 12

• T.12 - Verificar pgina completa.
• T.12 - Testar a funcionalidade de reprodizir vdeos.
• T.12 - Testar a funcionalidade de abrir links relacionados.

Figura 75

Hospedagem

A hospedagem do site do projeto se encontra disponvel na ferramenta Github Pages e pode se acessada das formas listadas a seguir:
* Cdigo fonte: https://github.com/ICEI-PUC-Minas-PMV-ADS/educacaofinanceira
* Visualizao do site: https://icei-puc-minas-pmv-ads.github.io/educacaofinanceira/

Responsveis pelo desenvolvimento dos requisitos

Na tabela a seguir, esto detalhes os responsveis pelo desenvolvimento de cada detalhe do projeto, segmentado por etapas:

Desenvolvedor	Etapa 1	Etapa 2	Etapa 3	Etapa 4	Etapa 5
Gabriel Augusto Mendes Do Espirito Santo	Especificao do projeto - restries Documento de contexto - Justificativa parte 2	Projeto de interface - Wireframes Desvantagem Metodologia - Relao de ambientes de trabalho	RF-10	RF-09 caso e evidncia:RF-09, RF-10	Apresentao do projeto
Lorena Poliane De Oliveira	Especificao do projeto - 3 histrias Documento de contexto - Problema	Arquitetura de soluo - Hospedagem Projeto de interface - Wireframes Vantagens	RF-12	RF-05 caso e evidncia:RF-05, RF-12	Elaborao do documento para a apresentao
Matheus Soares Da Silva	Especificao do projeto - requisitos no funcionais Documento de contexto - Justificativa parte 1	Arquitetura de soluo - Diagrama de Componentes Projeto de interface - Wireframes Dashboard	RF-07	RF-08 caso e evidncia:RF-07, RF-08	Elaborao do documento para a apresentao e gravao do vdeo mostrando o site hospedado
Pedro Henrique De Oliveira Lima	Documento de contexto - Pblico alvo Especificao do projeto - 3 personas	Projeto de interface - Wireframes Cases de sucesso Apoio na padronizao dos Wireframes	-	-	-
Pedro Henrique Filgueiras Couto	Especificao do projeto - 3 histrias Documento de contexto - Documentao de contexto	Projeto de interface - Wireframes Home Page Projeto de interface - Fluxo do usurio	RF 06	RF-01 caso e evidncia:RF-01, RF 06	Apresentao do projeto
Talita Fernandes Silva	Especificao do projeto - 3 personas, Documento de contexto - Objetivo Documento de contexto - Referncia e ajuste ABNT	Metodologia - Gerenciamento do projeto Projeto de interface - Wireframes Geral Apoio na padronizao dos wireframes	RF-02 Template padro do site, Criao repositrio hospedagem	RF-03 RF-04 RF-11 caso e evidncia:RF-03, RF-04, RF-11	Elaborao da pgina "Sobre"; Regularizao geral e final do layout do projeto; Reviso do vdeo e do material para apresentao
Todos	Documento de contexto - reviso geral	Projeto de interface - Wireframes Reviso geral, Arquitetura da soluo - Reviso geral, Projeto de interface - Reviso geral, Metodologia - Reviso geral	Etapa 3	Definio do root, estilo, tamanho e cor da fonte, do padding e da margin, background, logomarca, nome dos arquivos e imagens e responsividade.	Reviso geral

Armazenamento da Apresentao

Para a apresentao do projeto foi criado o video em formato mp4 e um conjunto de slides em um arquivo no formato ppt. Ambos foram alocados na pasta "presentation" conforme soicitado. Endereos: * Slides: https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2023-1-e1-proj-web-t7-rich/blob/main/presentation/Apresenta%C3%A7%C3%A3o%20de%20solu%C3%A7%C3%A3o_Rich.pptx * Video: https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2023-1-e1-proj-web-t7-rich/blob/main/presentation/Richpresentation.mp4

Referncias

   A lista a seguir traz as referncias utilizadas nesse trabalho. so elas:

• 70% das pessoas no tm reserva de emergncia. Yahoo. Disponvel em: https://br.notcias.yahoo.com/7-a-cada-10-pessoas-nao-tem-reserva-de-emergencia-172559188.html. Acesso em: 05 mar.2023.

• BLEY, Cassandra. O Brasil apenas o 74 pas em ranking global de Educao Financeira. Monitor do mercado. Disponvel em: https://monitordomercado.com.br/blogs/financas-beneficios/2022-10-19-o-brasil-e-apenas-o-74-pais-em-ranking-global-de-educacao-financeira. Acesso em: 05 mar. 2023.

• LARGHI, Nathlia. Voc est endividado? Pesquisa mostra que 70% esto! Veja principais viles. Valor investe. Disponvel em : https://valorinveste.globo.com/objetivo/organize-as-contas/noticia/2022/03/23/voce-esta-endividado-pesquisa-mostra-que-70percent-estao-veja-principais-viloes.ghtml. Acesso em: 05 mar.2023.

• VALOR INVESTE. Voc est endividado? Pesquisa mostra que 70% esto! Veja principais viles. Disponvel em: ttps://valorinveste.globo.com/objetivo/organize-as-contas/noticia/2022/03/23/voce-esta-endividado-pesquisa-mostra-que-70percent-estao-veja-principais-viloes.ghtml . Acesso em: 05 mar.2023.

• GALANTE, Raphael. Dados de financiamento mostram que bancos esto abandonando o setor automotivo. Info Money. Disponvel em: https://www.infomoney.com.br/colunistas/o-mundo-sobre-muitas-rodas/dados-de-financiamento-mostram-que-bancos-estao-abandonando-o-setor-automotivo/. Acesso em: 05. Mar.2023.

• CARRANA, THAIS. Brasil bate recorde de endividados: 'Com nome sujo, a gente no nada. BBC. DISPONIVEL EM: https://www.bbc.com/portuguese/articles/c257e50r9rlo#:~:text=Assim%2C%20essa%20modalidade%20de%20crdito,bilhes%20em%20dvidas%20em%20atraso. ACESSO EM: 14 MAR. 2023