Este repositório contém uma página que será construída de forma colaborativa com os alunos da turma de Gerência de Configuração e Mudanças
📌 Prioridade: 3️⃣
A página atualmente tem um background não se encaixa no tema do Git.
Aplicar a alteração do background por um que represente melhor o Git como por exemplo: clique aqui
Um dos principais problemas da página que eu pude notar é a navegação, com todo esse conteúdo fica difícil para o usuário navegar entre os tópicos devido ao tamanho da página e ficar usando o scroll toda hora pode ser uma tarefa frustrante para experiência do usuário, por isso eu sugiro a criação de um sumário para a página contendo os tópicos da mesma, isso facilitaria a navegação do usuário, pois caso ele queira ir para um tópico específico basta clickar no link para o tópico desejado livrando o usuário de ficar usando o scroll do mouse, outra sugestão é a criação de um botão de voltar para o topo da página, pois quando o usuário chega no último tópico a única maneira de voltar para o primeiro e com o scroll. Acredito que com a implementação dessas funcionalidades o usuário teria uma navegação bem mais atrativa.
label: Improvement
Atualmente no rodapé do projeto a mistura entre letras escuras e fundo escuro torna extremamente difícil de visualizar o que está escrito.
Utilizando css é fácil alterar o estado atual apenas adicionando uma class aos itens do footer e criando uma tag no arquivo css para mudar a cor destes textos:
Olá!
Situação: Atualmente o site tem um design simples, porém bagunçado. As cores utilizadas no site não tem nenhuma conexão entre si e eu sinto uma sensação de que as seções de conteúdo estão soltas.
**Prioridade: ** (2) - Isso não é tão primordial, nem urgente, mas pode ser pensado para longo prazo.
Mudança proposta: Eu sugeriria que o site fosse reformulado para ter um design minimalista, com cores harmônicas, formas bem definidas e um toque mais moderno. O site vai ficar mais bonito e intuitivo de acessar, bem como a experiência de usuário será melhor com um novo design.
Label: improvement
-Improvement
-Prioridade: 3
-Situação: São muitos comandos listados em apenas uma página, dificultando assim o entendimento do conteúdo para o usuário final.
-Descrição: Seria necessário criar pelo menos duas páginas dentro do index.html principal, para separar o conteúdo, deixando assim o site menos confuso ao usuário. Uma página apenas com os comandos Git e a outra página com as descrições dos comandos, deixando assim a página principal como um Menu para os conteúdos.
<button> com um id;<button> um nome para aparecer dentro do botão;<button id="id_escolhido">nome_escolhido</button><button> e o configure; #nome_escolhido{
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 50%;
width: 70px;
height: 50px;
color: white;
background-color: cor_escolhida;
border: none;
display: none;// pegando o botão
let botao = document.querySelector('#id_escolhido');
// o id_escolhido é o mesmo id que foi escolhido na tag button
function scroll(){
let btn = botao;
if(document.documentElement.scrollTop > 200){
btn.style.display = 'block';
}
else{
btn.style.display = 'none';
}
}
// a função scroll faz o botão aparecer se o scroll for maior que 200 e desaparecer caso contrário3.3 Função voltarTopo:
botao.addEventListener('click', voltarTopo);
// toda vez que o usuário clicar no botão ele vai chamar a funcão voltarTopo e voltar ao topo
function voltarTopo(){
document.documentElement.scrollTop = 0;
}3.4 Mudar a cor quando o mouse entra e sai da região o botão:
botao.addEventListener('mouseenter', inside);
function inside(){
let btn = botao;
btn.style.backgroundColor = 'cor_escolhida';
btn.style.color = 'cor_escolhida';
}
// mudar a cor quando o evento "mouseenter" for pego
botao.addEventListener('mouseout', outSide);
function outSide(){
let btn = botao;
btn.style.backgroundColor = 'cor_escolhida';
btn.style.color = 'cor_escolhida';
}
// mudar a cor quando o evento "mouseout" for pegoMelhorias na explicação do $ nano, a explicação do comando está básica, apenas falando como criar um arquivo usando o nano sendo que existe diversas opções e usos para o mesmo.
Deve ser adicionado os comandos e opções para um melhor entendimento do usuário, pois o mesmo auxilia muito quando possui uma grande quantidade de arquivos:
O usuário deve apertar a tecla CTRL + opção desejada para que seja realizado a ação.
o usuário deve usar o comando nano nome do arquivo e sua extensão, exemplo nano index.html para que possa criar ou editar um arquivo pelo editor.
A) CTRL + X: permite sair do editor, caso tenha feito alguma alteração no arquivo o mesmo vai perguntar se deseja realizar a alteração, para isso deve responder, y para yes e n para no.
B) CTRL + K: deleta por completo a linha que estiver selecionada no editor.
C) CTRL + U: Desfaz a opção anterior, retornando a linha deletada.
D) CTRL + S: Salva o arquivo e exibe o número de linhas escritas na parte inferior do editor.
E) CTRL + W: Permite pesquisar o texto posicionando o cursor.
Conforme a lista de comandos vai aumentando seria interessante considerarmos a ancoragem de elementos dentro da própria página para melhorarmos a navegabilidade. Ainda mais quando se pensarmos que hoje os usuários são leitores com pouco engajamento na leitura de textos completos. Assim, quando o usuário clicar em um comando específico ele será guiado até a sua descrição.
Com HTML poderíamos criar uma espécie de âncora que linka diferentes elementos sem sair da mesma página. Por exemplo, para linkar o primeiro comando Git Init com a sua descrição:
Nós determinaríamos um identificação id para o primeiro elemento de descrição.
<h3 id = "git-Init"> Git Init </h3>
No comando Git Init inserimos uma referência de link href apontando para a id especificada anteriormente, precedida por uma #.
<li><a href = "#git-Init"> Git Init </a> - Inicializa um repositório git em um diretório ou reinicializa um existente.</li>
Isso seria feito para cada comando que for sendo acrescentado.
💛 Melhoria
Olá!
Situação: Atualmente o site tem um design simples, porém bagunçado. As cores utilizadas no site não tem nenhuma conexão entre si e eu sinto uma sensação de que as seções de conteúdo estão soltas.
Prioridade: (2) - Isso não é tão primordial, nem urgente, mas pode ser pensado para longo prazo. 2️⃣
Mudança proposta: Eu sugeriria que o site fosse reformulado para ter um design minimalista, com cores harmônicas, formas bem definidas e um toque mais moderno. O site vai ficar mais bonito e intuitivo de acessar, bem como a experiência de usuário será melhor com um novo design. ✔️
🔴 bug 🔵 documentation
Nível: 5
Irá deletar o fechamento de tag inexistente
</header>, como também um conteúdo já descrito anteriormente.
background: url("../img/contato.jpg") no-repeat center;Irá resolver o problema com o background do formulário de contato.
📌 Label: Improvement
🚩 Prioridade: 2️⃣ (desejável)
❌ Situação:
Em suma, temos um design total, um tanto agradável à quem visualiza a página. Mas para termos um conforto ainda maior, independente de onde vimos, precisaríamos de uma responsidade na mesma.
Ao observarmos de um smartphone, por exemplo, vemos uma "quebra" no layout, segue uma amostra:
✔️ Uma possível solução seria uma adição na própria documentação da página, com o uso de Media Queries, exemplo:
@media screen and (max-width: valor escolhido px) { /* estilos */ }.
Improvement - Para sugerir melhorias na página em si.
🔍 Prioridade da Mudança: 1 (Desejável)
🔴 Situação:
No momento página se encontra estruturada em blocos, com informações descritas que complementam umas as outras e algumas informações estão soltas. Existe também, no design, uma diversificação de cores e fontes.
📝 Descrição da Mudança:
-Manter a estrutura da página dividida em blocos porém, adicionar mais páginas para dividir os blocos e certificar-se de que todas as informações estão dentro do seu respectivo bloco mantendo assim a organização.
Porque por mais que as informações se complementem não dá para jogar para o usuário uma enxurrada de informações
numa única página.
-Padronização de cores e fontes.
Para obter uma harmonia de cores e fontes na página, gerando assim conforto e proporcionando uma boa experiência ao
usuário.
(desejável)
Atualmente o visitante precisa percorrer procurando o comando, o que é um incômodo.
Para facilitar quando se esquece como usar dado comando, em vez de procurar manualmente na página ou depender do conhecimento do usuário quanto à ferramenta de busca do navegador, poderia se adotar um sistema semelhante aos dos gerenciadores de arquivos, em que basta começar a digitar o nome. Além disso adicionar o comentário, no fundo da página, de que essa opção está disponível.
🔴bug - Para relatar um problema ou erro
5️⃣
Código posiciona o rodapé ao lado da box de contato quando deveria posicionar ao final da página. Isso pode ser corrigido configurando o <footer> da página através dos passos a seguir.
<div class="container"> para:.container{ position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 80px 100px; }
Isso Possibilitará que o footer possa se posicionar no final da págiana.
footer{ background-color:rgba(153, 151, 151, 0.5); position:absolute; bottom:0; width:100%; height: 20px; }
@paulofreitasnt
📃 Label: Improvement
✒️ Prioridade: 2 (Tal adição deixaria o site mais intuitivo e abrangente, porém não é totalmente essencial para o funcionamento do site)
✏️ Atualmente o documento se encontra organizado apenas como uma lista corrida, disponibilizando apenas leituras que pode se tornar cansativas ao longo do tempo
📂 A mudança sugere que os comandos git estejam linkados a vídeos ou documentações de que destrincham melhor o comando, além do que é mostrado no site, com tal mudança, até as descrições já apresentadas poderiam ser menores e mais minimalistas, assim, deixando o corpo do site visivelmente melhor.
📑 LABEL: documentation
📌 Prioridade: 4️⃣
Atualmente a documentação se encontra extremamente simples contendo apenas informações básicas.
Desenvolver uma descrição mais detalhada do projeto, bem como os objetivos finais da atividade, descrever os contribuidores e apresentar uma previa do projeto, como por exemplo os comandos git descritos.
Menu topo:
Tópicos:
Footer:
Menu topo:
Tópicos:
Footer:
improvement
O formulário de contato não ocupa o card da forma mais estética possível, todos os campos se encontram no lado direito do card.
Alinhar os campos no meio do card, para ter um aproveitamento melhor de espaço.
Fazer uma alteração no quadro para uma melhor experiência visual dos usuários, movendo os campos para a esquerda e reduzir o quadro branco ou adicionar uma imagem, área de interação para remover o espaço em branco.
O usuário navega no site de forma que fica meio confusa a visualização dos tópicos, assim dificultando a leitura.
Adicionar animação de aparecer os tópicos e acordo com a forma que o usuário visualiza o site, assim, a visualização fica menos confusa e o usuário tem mais facilidade de ler todo o conteúdo.
O site precisa ainda de algumas melhorias uma delas é o afunilamento de informações atualmente o site esta muito conteudista e pouco interativo, o que vai na contramão na maioria dos sites bem desenvolvidos da internet que buscam serem o mais interativos e limpos de informações possível tornando assim uma experiência melhor para o usuário.
O texto do lado da parte do contato esta praticamente inlegível, sugestão é que mude a cor da letra para branca ou coloque dentro de um box branco, igual ao que esta no resto do site.
Adição de Expressões Regulares para validação dos campos do formulário Email,Telefone e Nome.
Como foi falado na Situação, o ideal é tentar encaminhar o site para uma proposta mais limpa e interativa
//Mudança na
Foi adicionada as seguintes linas de codigo para a alteração feita no CSS:
...
Seria interessante e funcional se fosse adicionado um menu flutuante lateral, onde ao clicarmos nas opções pudéssemos passear por cada sessão da página.
- Comandos git
- Descrição dos Comandos
- Contato
Contribuir para melhorar a experiência do usuário.
____________________________________________________________________________________________________________________________________
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.