-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
executable file
·209 lines (201 loc) · 10.4 KB
/
demo.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>| BlockFiles |</title>
<meta name="description" content="| BlockFiles |">
<link rel="icon" href="img/favicon.png" sizes="32x32" type="image/png">
<!-- custom.css -->
<link rel="stylesheet" href="css/custom.css">
<!-- timeline.css -->
<link rel="stylesheet" href="css/timeline.css">
<!-- bootstrap.min.css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- font-awesome -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<!-- AOS -->
<link rel="stylesheet" href="css/aos.css">
</head>
<body>
<!-- init banner -->
<div class="jumbotron jumbotron-fluid" id="banner" style="background-image: url(img/min-banner-bk.jpg);">
<div class="container text-center text-md-left">
<header>
<div class="row justify-content-between">
<div class="col-3">
<a href="https://danielaagarcia.github.io/blockfiles_web/index.html">
<img src="img/logo.png" alt="BlockFiles">
</a>
</div>
<div class="col-4 align-self-center text-right">
<a href="http://blockfiles.online:80/#/" data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="btn my-4 font-weight-bold atlas-cta cta-green">POC Sellado UNLZ</a>
</div>
<div class="col-4 align-self-center text-right">
<a href="http://blockfiles.online:8082/#/" data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="btn my-4 font-weight-bold atlas-cta cta-green">Verificación</a>
</div>
</div>
</header>
</div>
</div>
<!-- fin banner -->
<!-- atributos -->
<!-- init demo sellado -->
<div class="container my-5 py-2">
<h2 class="text-center font-weight-bold my-5">Demos</h2>
<p>Dado que este es un proyecto desarrollado en marco del proyecto final de la Licenciatura de Gestión de la Información, para la Universidad Nacional de Lomas de Zamora y que el mismo se encontrará en funcionamiento hasta el día 8 de julio del 2022, se dejan como evidencia del funcionamiento, una serie de videos con el flujo de uso de la solución durante el tiempo que continúe productiva.</p>
<h3 class="font-weight-bold my-5">Sellado</h2>
<p></p>
<div class="row">
<div class="col-6 align-self-center text-left">
<p>Esta una solución que le otorga <b>identidad, integridad y confiabilidad</b> a los contenidos digitales generados por la Universidad Nacional de Lomas de Zamora (UNLZ), obteniendo mediante un cálculo matemático complejo el hash de ese contenido digital para luego ser sellado en el tiempo y enviando a la red de la Blockchain Federal Argentina.</p>
<p>Para que esto sea posible se registra en la BFA una billetera digital (wallet) con la cual la UNLZ contendrá una cantidad inicial finita de WEI (valor mínimo del ether) con la cual pagará a la red cada transacción (TX) que genere.</p>
<p>El sellado en el tiempo <b>lo podrán utilizar únicamente las áreas definidas por la UNLZ</b>, debido a que se debe administrar de forma eficiente el consumo del WEI, ya que cada transacción se paga y que dicha tarea dejará evidencia en cada contenido digital que fue sellado en el tiempo por la wallet asignada a la UNLZ.</p>
</div>
<div class="col-6 align-self-center text-left">
<h3>¿Cómo sellar un documento?</h3>
<p>Para el sellado de un documento se deben seguir los siguientes pasos:</p>
<ol>
<li>Contar con un documento a sellar</li>
<li>Ingresar en la web, en el módulo de sellado</li>
<li>Arrastrar o abrir el documento que se desea sellar</li>
<li>Apretar el botón Sellar y aguardar unos segundos</li>
<li>Una vez finalizada la operación, se puede guardar el enlace de verificación para su posterior uso o referencia.</li>
</ol>
</div>
</div>
</div>
<div class="container">
<br>
<h4>Sellado exitoso</h4>
<br>
<video width="900" controls autoplay>
<source src="videos/sellado.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- fin demo sellado -->
<!-- init demo verificacion -->
<div class="container my-5 py-2">
<h3 class="font-weight-bold my-5">Verificación</h2>
<p></p>
<div class="row">
<div class="col-6 align-self-center text-left">
<p>La verificiación...</p>
</div>
<div class="col-6 align-self-center text-left">
<h3>¿Cómo verificar un documento?</h3>
<p>Para verificar un documento se deben seguir los siguientes pasos:</p>
<ol>
<li>Contar con el documento a verificar</li>
<li>Ingresar en la web, en el módulo de verificación</li>
<li>Arrastrar o abrir el documento que se desea verificar</li>
<li>Apretar el botón Verificar y aguardar unos segundos</li>
<li>Una vez finalizada la operación, pueden ocurrir 2 casos:
<ul>
<li>En caso de verificar la documentación, arrojará información sobre la Wallet que selló el documento (en este caso la UNLZ), el bloque en el cuál fue sellado y la fecha.</li>
<li>En caso de no poder verificar la documentación, arrojará información sobre la Wallet que selló el documento (en este caso la UNLZ), el bloque en el cuál fue sellado y la fecha.</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
<div class="container">
<br>
<h4>Verificación exitosa</h4>
<br>
<video width="900" controls autoplay>
<source src="videos/verif-01.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="container">
<br>
<h4>Verificación exitosa a pesar de cambio en el nombre del documento</h4>
<br>
<video width="900" controls autoplay>
<source src="videos/verif-02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="container">
<br>
<h4>Verificación no exitosa por haber editado el documento</h4>
<br>
<video width="900" controls autoplay>
<source src="videos/error.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- fin demo verificacion -->
<!-- contact -->
<div class="jumbotron jumbotron-fluid" id="contact" style="background-image: url(img/contact-bk.jpg);">
<div class="container my-5">
<div class="row justify-content-between">
<div class="col-md-6 text-white">
<h2 class="font-weight-bold">Escribinos</h2>
<p class="my-4">
Nuestros especialistas contestarán
<br> tus inquietudes lo más pronto posible.
</p>
<ul class="list-unstyled">
<li>Email : [email protected]</li>
<li>Teléfono : 54+ 9 11 4444 5555</li>
<li>Dirección : Don Bosco 3729, CABA</li>
</ul>
</div>
<div class="col-md-6">
<form>
<div class="row">
<div class="form-group col-md-6">
<label for="name">Nombre</label>
<input type="name" class="form-control" id="name">
</div>
<div class="form-group col-md-6">
<label for="Email">Mail</label>
<input type="email" class="form-control" id="Email">
</div>
</div>
<div class="form-group">
<label for="message">Contános</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<button type="submit" class="btn font-weight-bold atlas-cta atlas-cta-wide cta-green my-3">Enviar!</button>
</form>
</div>
</div>
</div>
</div>
<!-- AGREGAR LEGALES -->
<div class="jumbotron jumbotron-fluid" id="copyright">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-6 text-white align-self-center text-center text-md-left my-2">
Todos Los Derechos Reservados © 2022 - Blockfiles
</div>
<div class="col-md-6 align-self-center text-center text-md-right my-2" id="social-media">
<a href="https://danielaagarcia.github.io/blockfiles_web/" class="d-inline-block text-center ml-2">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://danielaagarcia.github.io/blockfiles_web/" class="d-inline-block text-center ml-2">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://danielaagarcia.github.io/blockfiles_web/" class="d-inline-block text-center ml-2">
<i class="fa fa-medium" aria-hidden="true"></i>
</a>
<a href="https://danielaagarcia.github.io/blockfiles_web/" class="d-inline-block text-center ml-2">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<!-- AOS -->
<script src="js/aos.js"></script>
<script>
AOS.init({
});
</script>
</body>
</html>