Skip to content

Commit

Permalink
Merge pull request #34 from marianasn/visao_longitudinal
Browse files Browse the repository at this point in the history 
TCC - Visao longitudinal
  • Loading branch information
@marianasn
marianasn authored May 28, 2024
2 parents 9754220 + 30a26b5 commit 709ce48
Show file tree
Hide file tree
Showing 3 changed files with 295 additions and 4 deletions.
14 changes: 10 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,16 @@
<li class="nav-item">
<a class="nav-link" id="topnav-sobre" href="#sobre">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" id="topnav-raio-x" href="#raio-x">Raio-X</a>
</li>
<li class="nav-item">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Raio-X
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#raio-x">Visão Geral</a>
<a class="dropdown-item" href="visao_longitudinal.html">Visão Longitudinal</a>
<!-- Add more items as needed -->
</div>
</li> <li class="nav-item">
<a class="nav-link" id="topnav-banco-de-ideias" href="#banco-de-ideias">Banco de ideias</a>
</li>
<li class="nav-item">
Expand Down
5 changes: 5 additions & 0 deletions project/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ h6 {
border-bottom: solid 0.4vh #d27c90;
}

#topnav-navbarDropdown:hover {
color: #d27c90;
border-bottom: solid 0.4vh #d27c90;
}

.topnav li {
padding-right: 2vh;
}
Expand Down
280 changes: 280 additions & 0 deletions visao_longitudinal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="descripition" content="Raio-X" />
<meta name="author" content="Mariana Nascimento" />
<meta name="keywords" content="data-visualization" />
<title>Raio-X</title>

<!-- styles -->
<link rel="stylesheet" type="text/css" href="project/styles/main.css" />
<link rel="stylesheet" href="project/styles/back_to_top.css" />
<link rel="stylesheet" href="project/styles/responsive.css" />

<!-- font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />

<!-- bootstrap -->
<link rel="stylesheet" href="project/bootstrap/bootstrap.min.css" />

<!-- vegalite -->
<script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>

<!--icones-->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="project/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="project/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="project/favicon/favicon-16x16.png">
</head>

<body>
<section onmousemove="mouseMonitoring(event)" id="section-header" class="container-fluid">
<header>
<nav class="navbar fixed-top smart-scroll justify-content-between navbar-expand flex-nowrap flex-row topnav"
id="topnav">
<ul class="navbar-nav float-left">
<li class="nav-item">
<a class="nav-link" id="topnav-home" href="index.html">
<img src="project/assets/logo-elas-horizontal.png" style="height: 50px"
alt="Logo Elas Computação" />
</a>
</li>
</ul>

<ul class="nav navbar-nav flex-row float-right">
<li class="nav-item">
<a class="nav-link" id="topnav-sobre" href="index.html">Sobre</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="topnav-navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Raio-X
</a>
<div class="dropdown-menu" aria-labelledby="topnav-navbarDropdown">
<a class="dropdown-item" href="index.html">Visão Geral</a>
<a class="dropdown-item" href="#content">Visão Longitudinal</a>
<!-- Add more items as needed -->
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="topnav-banco-de-ideias" href="#banco-de-ideias">Banco de ideias</a>
</li>
<li class="nav-item">
<a class="nav-link" id="topnav-contato" href="#contato">Contato</a>
</li>
</ul>
</nav>
</header>
</section>

<div id="main">
<section id="background">
<div id="background-raio-x" class="img-fluid img-responsive">
</div>
<h3 class="text-center">Raio-X Longitudinal</h3>
<h6 class="text-center">Resgate histórico das mulheres de Computação@UFCG</h6>
</section>

<div id="content">
<section id="raio-x" class="container-fluid">
<h1 class="text-left">Raio-X Longitudinal</h1><br>
<div class="visualization d-flex justify-content-center">
<iframe width="1300" height="700" src="https://app.powerbi.com/view?r=eyJrIjoiMjEwMTE1YTAtMjI0MS00ZWFhLWFkMTctZTVlMGQ0NGRkYTkwIiwidCI6ImE2MThjNzBhLTIzYTYtNDNiMy04MDA1LWYyMTMzNzI3ZWZiZSJ9" frameborder="0" allowFullScreen="true"></iframe>
</div>

<h3>Como essa visão foi construída?</h3>
<h6>
A princípio, é importante observar quantas mulheres entraram no curso ao longo dos períodos. Para
visualizar o ingresso geral dos alunos no curso, foi analisada a quantidade de homens e mulheres que
entram a cada período.
</h6>

</section>

<section id="banco-de-ideias" class="container-fluid">
<h1 class="text-left">Banco de ideias</h1>
<h6>
Que Raio-X você gostaria de ver sobre a participação de mulheres no nosso curso? <br>
O banco de ideias tem como objetivo ser um espaço aberto para contribuição da comunidade acadêmica
sobre a continuidade do Raio-X. O Elas@Computação enquanto organização iniciou esse projeto e
pretende realizar novas análises de dados sobre a participação de mulheres no curso. Para isso, é
importante a participação de todos a respeito de melhorias e aprimoramentos que podem ser realizados
no futuro. Para contribuir com o futuro das análises do Raio-X, acesse nosso Banco de ideias e crie
sua issue no github com sugestões. Acesse todos os dados utilizados nas visualizações e as
estatísticas apresentadas nesta análise e contribua com o nosso banco de ideias:
</h6>

<div class="d-flex justify-content-left">
<a id="btn-banco-de-dados" class="btn-banco-de-ideias" alt="Base de dados" target="_blank"
title="Base de dados" href="https://github.com/elasComputacao/raio-x-dados" type="button">
Base de dados
</a>
<a id="btn-contribuir" class="btn-banco-de-ideias" alt="Contribuir com o banco de ideias"
target="_blank" title="Contribuir com o banco de ideias"
href="https://github.com/elasComputacao/raio-x/projects/2">
Contribuir com o banco de ideias
</a>
</div>

</section>

</div>
</div>

<!-- Back to top button -->
<a id="button"></a>

<section class="container-fluid" id="contato">
<footer>
<div id="footer-raio-x" class="img-fluid img-responsive">
<div class="row">
<div class="col-lg-1 col-md-0 col-sm-0"></div>
<div class="col-lg-11">
<h1 class="text-left">Contato</h1>
</div>
</div>

<div class="row">

<div class="col-lg-1 col-md-0 col-sm-0"></div>

<div class="col-lg-3">

<div class="row no-gutters">
<div class="card col-12">
<a href="mailto:elas@computacao.ufcg.edu.br">
<div class="row no-gutters">
<div class="col-2 d-flex justify-content-center">
<svg class="align-self-center justify-content-center"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
</path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<div class="col-10">
<div class="card-body">
<h6 class="card-text">elas@computacao.ufcg.edu.br</h6>
</div>
</div>
</div>
</a>
</div>
</div>

<div class="row no-gutters">
<div class="card col-12">
<a href="https://goo.gl/maps/xx1zhPUttKVzUSTQ6" target="_blank">
<div class="row no-gutters">
<div class="col-2 d-flex justify-content-center">
<svg class="align-self-center justify-content-center"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<div class="col-10">
<div class="card-body">
<h6 class="card-text">
UFCG - Campus Sede
</h6>
</div>
</div>
</div>
</a>
</div>
</div>

</div>

<div class="col-lg-4 col-md-0 col-sm-0"></div>

<div class="col-lg-3 col-md-12 col-sm-12">
<div class="row d-flex float-left">
<a href="https://www.instagram.com/elascomputacao" class="icon" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://github.com/elasComputacao" class="icon" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="linkedin.com/company/elas-computacao" class="icon" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://dev.to/elascomputacao" class="icon" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fab fa-dev fa-stack-1x fa-inverse"></i>
</span>
</a>

</div>
</div>

<div class="col-lg-1 col-md-0 col-sm-0"></div>

</div>

<div class="row" style="padding-bottom: 2vh;">
<div class="col d-flex justify-content-center align-items-end">
<img src="project/assets/elas-logo.png" style="height: 4vh; padding: 0 0 1vh 0;" />
<h6>© 2021 Elas@Computação</h6>
</div>
</div>

</div>

</footer>
</section>
</body>

<!-- bootstrap -->
<script type="text/javascript" src="project/bootstrap/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="project/bootstrap/bootstrap.bundle.min.js"></script>

<!-- functions -->
<script type="text/javascript" src="project/functions/back_to_top.js"></script>
<script type="text/javascript" src="project/functions/smartscroll.js"></script>
<script type="text/javascript" src="project/functions/popover.js"></script>
<script type="text/javascript" src="project/functions/smothscroll.js"></script>

<!-- visualizations -->
<script type="text/javascript" src="project/visus/ingresso.js"></script>
<script type="text/javascript" src="project/visus/raca.js"></script>
<script type="text/javascript" src="project/visus/nota.js"></script>
<script type="text/javascript" src="project/visus/cota.js"></script>
<script type="text/javascript" src="project/visus/idade.js"></script>
<script type="text/javascript" src="project/visus/conclusao-homens.js"></script>
<script type="text/javascript" src="project/visus/conclusao-mulheres.js"></script>
<script type="text/javascript" src="project/visus/evasao.js"></script>
<script type="text/javascript" src="project/visus/situacao_academica.js"></script>
<script type="text/javascript" src="project/visus/desempenho.js"></script>
<script type="text/javascript" src="project/visus/sucesso.js"></script>

</html>

0 comments on commit 709ce48

Please sign in to comment.