Merge branch 'main' into analiseTarefas/storyboards

docs/AnaliseDeRequisitos/analisedetarefas/analiseHierarquicaDeTarefas.md

@@ -168,4 +168,4 @@ O diagrama feito para analisar esta tarefa foi representado em um diagrama na fi
 |`1.0`| 14/10/2023 | Criação da página de analise de tarefas | [Vinícius Mendes](https://github.com/yabamiah), [Breno](https://github.com/brenob6) e [Mayara Alves ](https://github.com/Mayara-tech)| [Altino Arthur](https://github.com/arthurrochamoreira)|
 |`2.0`| 20/10/2023 | Adicionado diagrama HTA da tarefa doação | [Limirio Guimarães](https://github.com/LimirioGuimaraes)| [Luis Miranda](https://github.com/LuisMiranda10) |
 |`2.1`| 20/10/2023 | Adicionado representação HTA em tabela da figura 5 | [Limirio Guimarães](https://github.com/LimirioGuimaraes)| [Luis Miranda](https://github.com/LuisMiranda10) |
-|`2.2`| 23/10/2023 | Adicionado representação HTA da tarefa Compartilhamento de Experiências | [Altino Arthur](https://github.com/arthurrochamoreira)| [](https://github.com/) |
+|`2.2`| 23/10/2023 | Adicionado representação HTA da tarefa Compartilhamento de Experiências | [Altino Arthur](https://github.com/arthurrochamoreira)| [Milena Baruc](https://github.com/MilenaBaruc) |

docs/AnaliseDeRequisitos/guia-de-estilo.md

@@ -0,0 +1,217 @@
+## Introdução
+
+Segundo Barbosa e Silva (2011, p.282)1, o Guia de Estilo é um registro das principais decisões de design tomadas, garantindo que essas decisões sejam incorporadas efetivamente no produto final. Ele desempenha um papel fundamental como ferramenta de comunicação com os stakeholders da equipe, permitindo fácil consulta e discussão de decisões para projeções futuras e atualizações.
+
+Para atingir esses objetivos, é essencial contar com um Guia de Estilo que oriente a criação de interfaces que atendam às necessidades e expectativas dos usuários, mantendo a consistência visual e de interação em todo o sistema, além de aprimorar a experiência do usuário. Neste documento, analisaremos os elementos do Ventoy.
+
+### Objetivo do Guia de Estilo
+
+Este guia de estilo tem como objetivo fornecer diretrizes e melhores práticas para o design e desenvolvimento de interfaces de usuário eficazes e usáveis na disciplina de IHC. Nele iremos analisar os elementos que são:
+
+- Elementos de interface: disposição espacial e _grid_, janelas, tipografia, cores, símbolos, _widgets_, logo, ferramentas e design de telas;
+- Elementos de interação: estilos de interação, seleção de um estilo, aceleradores (teclas de atalho);
+- Elementos de ação: preenchimento de campos, seleção e ativação.
+
+### Organização e Conteúdo do Guia de Estilo
+
+O guia de estilo do Ventoy vai ser seguido na seguinte ordem: Elementos de interface, Elementos de interação, Elementos de ação, Resultados da análise e Proposta de Intervenção. Com um objetivo para que a experiência do usuário seja a melhor e mais otimizada possível, e assim ficando com uma interação e padronização mais efetiva dentro do site.
+
+### Público-alvo do Guia de Estilo
+
+Este Guia de Estilo destina-se a atender às necessidades dos usuários da Ventoy, incluindo desenvolvedores, entusiastas de tecnologia e designers que desejam compreender e contribuir para a evolução do produto. Ele fornecerá diretrizes e melhores práticas para o uso eficaz da Ventoy. Em que os usuários devem consultar para fornecer feedbacks e atualizações em relação a sua utilização. 
+
+- Usuários do Ventoy: Envolvidos na interação com a tecnologia.
+- Desenvolvedores: Encarregados de executar o design da interface de acordo com as orientações definidas no guia.
+- Entusiastas de tecnologia: Encarregados de contribuir para a melhoria da experiência do usuário e o sucesso da plataforma.
+- Designers: Participantes na elaboração e modelagem da interface, assegurando a correta aplicação dos princípios de design.
+
+### Como utilizar o Guia
+
+O Guia de Estilo é uma ferramenta valiosa para manter a integridade visual, com consistência e coesão de um site. Seguir suas diretrizes cuidadosamente assegura que a identidade da marca seja mantida e que a experiência do usuário seja consistente e agradável, sendo mais usada para um apoio na sua criatividade. A economia de tempo também ajuda a criar uma experiência visualmente harmoniosa para os usuários.
+
+Além de que, o Guia de Estilo do Ventoy pode ser utilizado como referência durante todo o ciclo de vida do projeto, desde a produção até a manutenção. As diretrizes e práticas aqui definidas auxiliarão na tomada de decisões de design que garantam uma interação eficaz e satisfatória com o sistema.
+
+### Como manter o Guia
+
+Para que se tenha um guia de estilo alinhado com o desenvolvimento/progresso do projeto, mantendo as diretrizes estabelecidas, consistência visual e com novidades vindas das interações com os usuários, é necessário que se tenha hábitos para uma manutenção que visa garantir uma melhor experiência do usuário, sendo elas: 
+
+1. **Responsabilidades Designadas** : São atribuidas responsabilidades claras para a manutenção e atualização do guia de estilo, garantindo que alguém seja encarregado de supervisionar esse aspecto do projeto.
+2. **Teste Constante** : Testes são realizados para verificar se o guia de estilo está sendo seguido corretamente em todas as etapas do desenvolvimento do projeto.
+3. **Versionamento e Controle de Mudanças** : É recomendado um sistema de versionamento e um processo de controle de mudanças para rastrear e gerenciar as alterações feitas no guia de estilo ao longo do tempo.
+4. **Feedback Contínuo** : Temos que estar abertos a feedbacks de equipe, usuários e partes interessadas, e usar essas contribuições para o aprimoraramento do guia de estilo.
+
+## Elementos de Interface
+
+### Disposição Espacial e Grid
+
+O layout principal da página consiste em uma estrutura de cabeçalho, conteúdo e rodapé.
+O conteúdo é organizado em seções e subseções.
+Os elementos devem estar alinhados e espaçados para proporcionar uma aparência ordenada.
+
+### Janelas
+
+Não há janelas pop-up,mas a estrutura do site pode ser considerada como seções separadas que podem ser visualizadas como "janelas" virtuais.
+
+### Tipografia
+
+As fontes principais atuais usadas no site são "arial, helvetica, sans-serif" . Contendo tamanhos de fonte variados que são utilizados para cabeçalhos, texto principal e outros elementos. Já na parte de formatação da fonte é incluido o negrito e itálico em alguns lugares. 
+
+   Neste guia, dispõe de uma fonte diferente, sendo ela: Ubuntu, a fonte Ubuntu é uma escolha popular para designers gráficos que desejam criar designs limpos e modernos. Ela pode ser usada em logotipos, cartazes, panfletos e outras peças de design, como é representado na figura 1.
+
+<center>
+
+<p align="center"> <b>Figura 1</b>. Tipografia </p>
+
+![Cores](../assets/tipografico.png)
+
+Fonte: Altino Arthur
+
+</center>
+
+
+### Cores
+
+Cores de Fundo:
+
+- A cor de fundo principal do site é branca (#ffffff).
+- Há uma cor de fundo azul usada para realçar algumas seções (#007aff).
+- A cor de fundo de algumas partes do site pode ser observada como amarelo (#ffff00).
+
+Cores de Texto:
+
+- A cor de texto padrão é preta (#000000).
+- O texto destacado em vermelho tem a cor (#ff0000).
+- O texto em azul claro é usado para links e tem a cor (#007aff).
+
+Cores de Botões:
+
+- Os botões podem ter cores diferentes, incluindo fundos cinza (#ccc) quando não estão ativados e fundos com cores de destaque quando o mouse passa sobre eles.
+- Os botões de anúncio podem ter fundos azuis (#007aff).
+
+Neste guia, as cores a serem utilizadas ( Figura 2 ) na interface, foram selecionadas de acordo com as já presentes no site do Ventoy, apenas deixando mais padronizado e visualmente harmonico.
+
+<center>
+
+<p align="center"> <b>Figura 2</b>. Cores </p>
+
+![Cores](../assets/colorsscale.png)
+
+Fonte: Luis Miranda
+
+</center>
+
+
+### Simbolos não tipográficos
+
+Dentro do site do Ventoy não se tem esses simbolos não tiponográficos. Eles representam elementos gráficos, como ícones, botões, setas e outros indicadores visuais que transcendem o texto. Esses símbolos não apenas simplificam a documentação e a comunicação entre a equipe de design, desenvolvedores e demais partes interessadas, mas também ajudam os usuários a identificar rapidamente funcionalidades e interações dentro de uma interface, contribuindo para uma experiência mais intuitiva e eficaz. 
+
+Os elementos estão representados na figura 5 abaixo. 
+
+<center>
+
+<p align="center"> <b>Figura 3</b>. Simbolos não tipograficos </p>
+
+![Cores](../assets/naotipografico.png)
+
+Fonte: Altino Arthur
+
+</center>
+
+## Elementos de Interação
+
+### Estilo de Interação
+
+Esses elementos do estilo de interação englobam botões de ação, links de navegação e ícones que, juntos, facilitam a navegação intuitiva e eficaz pelos recursos e informações disponíveis. Além disso, elementos de realce, como animações suaves ou mudanças visuais ao passar o mouse sobre itens interativos, fornecem feedback imediato aos usuários, tornando a experiência mais envolvente. 
+
+### Seleção de Estilos
+
+Uma série de elementos de interação de seleções de estilo existe dentro do site, projetados para aprimorar a usabilidade e a personalização da experiência do usuário. Isso inclui botões de seleção, listas suspensas e barras de rolagem que permitem aos visitantes escolher opções, configurar preferências e navegar com eficiência. 
+
+### Aceleradores (Teclas de Atalho)
+
+No site não foram encontradas teclas de atalho.
+
+## Elementos de Ação
+
+### Preenchimento de Campos
+
+<center>
+
+<p align="center"> <b>Figura 4</b>. Preenchimento de Campos </p>
+
+![Preenchimento de Campos](../assets/ventoy_forum.png)
+
+Fonte: Altino Arthur
+
+</center>
+
+Campos de entrada, caixas de seleção e botões de envio são disponibilizados para os visitantes fornecerem informações, configurar preferências e realizar ações específicas, como é visto na aba de fórum (Figura - 4). 
+
+### Seleção
+
+<center>
+
+<p align="center"> <b>Figura 5</b>. Seleção </p>
+
+![Seleção](../assets/seleção.png)
+
+Fonte: Altino Arthur
+
+</center>
+
+Há elementos de seleção como por exemplo seleção de tópicos, seleção de testes de Iso, seleção de perguntas, seleção de fórum, seleção de versão para download, seleção de ferramenta para doação ( paypal, bitcoin ) (Como é visto na figura - 5) e também de idioma. Determinando de maneira clara e intuitiva como o usuário pode efetuar a escolha de elementos ou a seleção de itens.
+
+### Ativação
+
+Apresenta pouca variedade de elementos de ação de ativação projetados para facilitar a interação do usuário. Isso inclui botões intuitivos que desencadeiam ações, como por exemplo os ícones da figura 5, como também o download do software, navegação pelas páginas, acesso a informações essenciais, hyperlinks ( direcionam os visitantes para áreas específicas do site, facilitando a exploração de informações e recursos ). 
+
+## Resultados da Análise
+
+### Descrição do Ambiente de Trabalho do Usuário
+
+A Ventoy é predominantemente utilizada em ambientes de trabalho por meio de dispositivos como pendrives e discos USB. Portanto, é fundamental considerar as especificidades desses dispositivos ao projetar e desenvolver a interface, garantindo uma experiência satisfatória para os usuários que utilizam a Ventoy nesses contextos. Isso envolve a adaptação da interface para diferentes tamanhos de tela, a escolha de elementos visuais apropriados e a implementação de funcionalidades intuitivas.
+
+## Figma
+
+&emsp;&emsp;Consulte o Figma 1 para visualizar os elementos de interface, interação e ação definidos no guia de estilo, com exemplos visuais e especificações detalhadas. Qualquer alteração irá ser atualizada imediatamento no Figma 1.
+
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FmRAQJlidsGWJQ5Hn9j1Kcp%2FGuia-De-Estilo---Ventoy%3Ftype%3Ddesign%26node-id%3D0%253A1%26mode%3Ddesign%26t%3D6MuVVY3eJSwWOsxK-1" allowfullscreen></iframe>
+
+<div align="center">
+<p> <b>Figma 1</b>: Guia de Estilo (Fonte: MOREIRA, Altino; MIRANDA, Luis. 2023). </p>
+</div>
+
+## Propostas de Intervenção
+
+- Implementação de aceleradores (teclas de atalho) para agilizar tarefas comuns.
+
+- Melhorias na disposição espacial e na utilização do grid para facilitar o uso da Ventoy.
+
+- Padronização de elementos visuais, como cores e tipografia, para manter uma identidade visual coesa.
+
+- Manutenção de um vocabulário consistente para garantir a compreensão dos usuários.
+
+- Essas intervenções têm como objetivo principal aprimorar a interação entre o usuário e a Ventoy, tornando-a mais amigável e eficaz, seguindo as melhores práticas de usabilidade e design.
+
+## Conclusão
+
+&emsp;&emsp; Dentro do âmbito do projeto do site Ventoy, desenvolvemos um guia de estilo com o propósito de direcionar tanto o design quanto a interação para um projeto de Interação Humano-Computador (IHC).
+
+&emsp;&emsp; Durante a criação do guia de estilo foi utilizado um comportamento flexível e adaptado às necessidades específicas do site, nos quais fornecerão uma estrutura sólida para o desenvolvimento de um guia de estilo eficaz. 
+
+&emsp;&emsp; Aos usuários do Ventoy, Desenvolvedores, Entusiastas de Tecnologia e Designers seguirem o guia de estilo do site do Ventoy, uma série de benefícios é desencadeada. A consistência visual em todo o site é mantida, criando uma experiência mais intuitiva e agradável para os usuários, à medida que os elementos de interface, cores, tipografia e elementos interativos são aplicados de maneira uniforme. Além de uma manutenção recorrente feita pelos mesmos no projeto ( tendo como referencia o protótipo de alta fidelidade ). 
+
+## Referências Bibliográficas
+
+> <a id="REF1" href="#anchor_1">1.</a> BARBOSA, S. D. J.; SILVA, B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2011.
+
+## Bibliografia
+
+[1] Ventoy.  Disponível em: https://www.ventoy.net/en/index.html . Acesso em: 22 de Outubro de 2023;
+
+## Histórico de Versões
+
+| Versão  | Data       | Descrição       | Autor(es)                | Revisor(es)                                                                                         |
+| ------- | ---------- | ------------------------------------ | ------------------------------------------ | ---------------------------- |
+| `1.0`   | 23/10/2023 | Criação da página guia de estilo.              | [Altino Arthur](https://github.com/arthurrochamoreira) e [Luis Miranda](https://github.com/LuisMiranda10 )        |  Vinicius Mendes   |