Crypto-sLedger - Versão 1.0
- Alda Aparecida Menezes Ferreira
- Lucas José Martins de Lara
- Rodrigo Damasceno Sampaio
- Ismael de Mesquita Freire
Para o controle do fluxo de desenvolvimento deste código foi utilizado o modelo Kanban feito na ferramenta Trello. Sua estrutura foi feita da seguinte forma:
Além de adotar o método Kanban, cada atividade a ser executada foi relacionada com uma etiqueta que equivale a quantas horas, em média, levariam para ela ser feita, facilantando assim a organização e separação de atividades para cada membro. Abaixo podemos ver as etiquetas usadas e neste link pode-se acessar o quadro no Trello.
Para a inicialização da construção da Landing Page, criou-se um layout utilizando a ferramenta Figma, com o desenho inicial que a página teria.
O layout construído para este projeto pode ser acessado pelo seguinte link: Figma CriptoGama.
Para uma melhor organização e padrinização do nosso trabalho, usaremos referenciadores do Css, que podem se acessados diretamente pelo root.
- Na pasta css você encontrará:
css
|_ global.css
|_ main.css
|_ responsive.css
|_ style.cssEste arquivo contém ou deverá conter todos os estilos usados no layout do arquivo Figma. Portanto, vocé irá se deparas com algumas variáveis css que são:
/* Primary Colors */
--primary: #00de8d;
--secondary: rgba(8, 67, 47, 0.45);
--back-ground: #020e0a;
--card-background: rgba(255, 255, 255, 0.02);
/* Button Style*/
--btn-bg: rgba(255, 255, 255, 0.02);
--border-btn: 1px solid rgba(0, 222, 141, 0.75);
/* Font Colors */
--simple-title: #ecf1f0;
--sub-title: #b6b6b6;Este arquivo é a importação de todos os arquivos css, inclusive do Bootstrap V.5.0.2, isso nos proporciona uma melhor organização do nosso head, uma vez que
iremos importar apenas um arquivo css e não quatro.
/* ===Bootstrap=== */
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css);
/* ===Bootstrap=== */
@import url(/css/global.css);
@import url(/css/style.css);
@import url(/css/responsive.css);Como ficará em nosso head
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="css/main.css" />
...
</head>Este arquivo será destinado a resolver quais quer problemas de responsividade que o bootstrap não conseguir resolver.
Este arquivo irá conter todos os estilos alternativos ao padrão do bootstrap, assim adequando o template ao layout base.
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html {
background-color: var(--back-ground);
font-family: "Raleway", sans-serif;
}
/* === HEADER === */
...O header com a barra de navegação foi feita contendo 4 botões, sendo 3 deles para navegar por alguns tópicos da página principal, sendo eles: Home; Informações e Mercado. E o 4º botão é um de atendimento que envia o usuário para a página contact, na qual é possível entrar em contato com a empresa. O header foi feito utilizando o bootstrap para que em telas menores a navbar colapse e vire um menu hambúrguer.
Para construção do corousel foi ultilizdo o framework Bootstrap, o componente corousel com indicadores, juntamente com os controles. Foi escolhido tres imagens para compor o carousel. No CSS foi usado duas classes : .cripto-carousel - seguindo o layout da pagina .carousel - para o carousel ficar com as dimensões desejadas.
Para os cards foi ultilizado o framework Bootstrap, o componente cards, com imagnes e texto. No CSS foi usado a classe : .cripto-cards - seguindo o padrão do layout.
Para a criação do mapa, primeiro foi escolhido um local fictício, sendo este a sede da Gama Academy, em seguida utilizou-se o BootStrap para implementar o mapa, com as classes referentes a renderização do mapa, e o iframe disponibilizado pelo Google Maps, além de uma trasição utilizando hover no CSS.
Para a criação do rodapé, tendo como base o layout construído inicialmente no Figma, utilizou-se o BootStrap para implementação do mesmo, com as classes referentes a renderização do rodapé, contendo os seguintes componentes com hiperlinks:
- Ícones das principais redes sociais (Linkedin, Instagram e Twitter)
- Botões de navegação para as demais páginas (Home, Informações e Contato)
- Informações de contato (Endereço, Telefone e E-mail)
Visando trazer algumas funcionalidades a mais, a Lading Page desenvolvida conta com outra página html que pode ser acessada pela navbar no botão de Contato. A partir disso o usuário é encaminhado para outra página com um formulário com campos para informações necessárias para a comunicação. O arquivo hmtl referente a essa págica é o Contact
Seguindo a mesma motivação da página "Contato", foi desenvolvido outro arquivo contendo uma breve linha do tempo a respeito da tecnlogica Blockchain, seu acesso é pelo o botão Iniciar na página inicial. O arquivo hmtl referente a essa págica é o TimeLine.
const settings = {
"async": true,
"crossDomain": true,
"url": "https://coingecko.p.rapidapi.com/simple/price?ids=%3CREQUIRED%3E&vs_currencies=%3CREQUIRED%3E",
"method": "GET",
"headers": {
"X-RapidAPI-Key": "YOUR_KEY_HERE",
"X-RapidAPI-Host": "coingecko.p.rapidapi.com"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});O principal desafio enfrentado na construcão dos cards com estilização em percentual foi a mudança de estilo do html usando data attribute, uma
alternativa para não utilizar estilização in line:
<div class="market-data d-flex" data-market-color="up-color" name="market-theme">
<i class="fas fa-light fa-arrow-trend-up" aria-hidden="true"></i>
<span class="mkt-up">4.9%</span>
</div>Dessa forma o estilo, muda de acordo vom os valores recebidos da API, alterando o valor do data attribute de Up para Down em caso do percentual
ser negativo. data-market-color="down-color"
Para facilitar a visualização da aplicação, ela já foi colocada no ar com auxílio do Netlify, assim como foi solicitado , e seu deploy pode ser acessado no seguinte link: CriptoGama.
Além disso, pode-se optar ainda por clonar este repositório e utilizar, por exemplo, a extensão Live Server do VSCode para rodar o site localmente.
- Primeiro passo
git clone https://github.com/Rodrigodsgit/Crypto-sLedger
- Em seguida entre no diretório usando o terminal
cd Crypto-sLedger
- Depois de selecionado o diretório digite no terminal
code .
Por fim poderá usar a IDE de sua escolha para testar essa aplicação.