/
index.htm
131 lines (121 loc) · 4.78 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" id="ppstyle" type="text/css" href="style.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/blocs.js"></script>
<title>TFG</title>
</head>
<body>
<!-- Main container -->
<div class="page-container">
<!-- Hero Bloc -->
<div id="hero-bloc" class="bloc hero d-bloc">
<div class="v-center text-center">
<div class="vc-content">
<h1>
TFG
</h1>
<div class="hero-content">
<h3>
Visualización de datos de desarrollo de software libre
</h3>
<h5><br>
Curso: 2014/2015<br>
Tutor: Dr Jesús María González-Barahona<br><br>
Creado por Quan Zhou
</h5>
<a onclick="scrollToTarget('#core')" class="btn-dwn"><span class="fa fa-chevron-down">V</span></a>
</div>
</div>
</div>
</div>
<!-- Hero Bloc END -->
<!-- core feature bloc -->
<div class="bloc d-bloc " id="core">
<br><br><br>
<div align="center" style="width: 60%; margin-left: 18%">
<h3>Resumen</h3>
<span style="color:#59636b; font-size: 18px">
<p>
Este es un trabajo dedicado a la visualización de datos con diferentes bibliotecas de software
libre de manera eficiente y dinámica. Consiste en sacar y dibujar los datos de unos ficheros JSON y que se
pueda filtrar hasta al máximo detalle, pero que interactúen entre todas las gráficas.
Para este propósito, se ha trabajado fundamentalmente con el lenguaje de programación
JavaScript y para la visualización se usó la biblioteca dc.js.
</p>
<p>
En el panel de demografía una de las cosas más significativas en cuanto al funcionamiento aunque no tanto en el
aspecto visual, es la tabla. Que contiene múltiples filtros de los datos, incluso más que los
filtros que se pueden hacer en las propias gráficas. Ya que se pretende hacer que la tabla sea una
especie de panel de control que se pueda tener todo sin necesidad de subir a las gráficas. De esta
manera tenemos un dasboard más intuitivo, al poder filtrar directamente en la tabla que donde
se muestra toda la información detallada de cada entrada.
</p>
<p>
En el panel de commits las gráficas son ligeramente diferentes, al tratarse de un fichero JSON diferente al que
se van a visualizar. No es tan completo como en el panel de demografía por la falta de tiempo aunque el tamaño de
fichero JSON es mucho más grande.
</p>
<p>
Los ficheros JSON que se han utilizado para este proyecto están ubicados en OpenStack que
a su vez usa Metrics Grimoire para la recogida de datos y la creación de esos ficheros JSON.
</p>
</span>
</div>
<div class="container bloc-xl">
<div class="row voffset">
<div class="col-sm-4">
<a href="http://zhquan.github.io/TFG/demografia/"><img width="160" height="160" src="img/designer.png" class="img-responsive center-block mg-lg" alt="Demografía"/></a>
<h4 class="mg-md text-center ">
<strong>DEMOGRAFÍA</strong>
</h4>
<p class="text-center mg-lg">
Para ver el panel de demografía
</p>
</div>
<div class="col-sm-4">
<a href="http://zhquan.github.io/TFG/commit/"><img width="160" height="160" src="img/designer.png" class="img-responsive center-block mg-lg" alt="Commits"/></a>
<h4 class="mg-md text-center">
<strong>COMMITS (10000)</strong>
</h4>
<p class="text-center mg-lg">
Para ver el panel de 10000 commits
</p>
</div>
<div class="col-sm-4">
<a href="http://zhquan.github.io/TFG/Prototipo2-4/"><img width="160" height="160" src="img/designer.png" class="img-responsive center-block mg-lg" alt="Commits"/></a>
<h4 class="mg-md text-center">
<strong>COMMITS (114583)</strong>
</h4>
<p class="text-center mg-lg">
Para ver el panel de 114583 commits.
</p>
</div>
<div class="col-sm-5">
<a href="https://www.github.com/zhquan/TFG/"><img width="150" height="150" src="img/developer.png" class="img-responsive center-block mg-lg" alt="codigo" /></a>
<h4 class="mg-md text-center ">
<strong>CÓDIGO FUENTE</strong>
</h4>
<p class="text-center mg-lg">
Para ver como se hizo el proyecto, puedes acceder al código fuente.
</p>
</div>
<div class="col-sm-5">
<a href="http://zhquan.github.io/TFG/memoria.pdf"><img width="150" height="150" src="img/beginner.png" class="img-responsive center-block mg-lg" alt="Memoria"/></a>
<h4 class="mg-md text-center">
<strong>MEMORIA</strong>
</h4>
<p class="text-center mg-lg">
Para saber el funcionamiento del proyecto.
</p>
</div>
</div>
</div>
</div>
</body>
</html>