-
Notifications
You must be signed in to change notification settings - Fork 0
/
md_2018_11_30.html
346 lines (342 loc) · 24 KB
/
md_2018_11_30.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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Relacionando las entradas del blog - prLázarus</title>
<meta name='Language' content='es' />
<meta name='Content-Language' content='es' />
<meta name="author" content="Carlos J. Peláez Rivas" />
<meta name="description" content="prLázarus - Blog de programación y diario de desarrollo" />
<meta name="keywords" content="lazarus,surazal,prlazarus,blog,programacion,coding,code,desarrollo,development,software,engineer,java,carlos,pelaez,cjpelaez,cjpelaezrivas,malaga,spain" />
<meta property="og:site_name" content="prLázarus" />
<meta property="og:title" content="prLázarus - Blog de programación" />
<meta property="og:description" content="prLázarus - Blog de programación y diario de desarrollo" />
<meta name="twitter:title" content="prLázarus - Blog de programación">
<meta name="twitter:description" content="prLázarus - Blog de programación y diario de desarrollo" />
<link rel="icon" type="image/x-icon" href="media/images/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="media/images/favicon.ico" />
<link rel="canonical" href="https://prlazarus.es/md_2018_11_30">
<link rel="stylesheet" href="static/lib/bootstrap-4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/lib/fontawesome-4.7/css/fontawesome.min.css" />
<link rel="stylesheet" type="text/css" href="static/lib/hint-2.5.1/css/hint.base.min.css" />
<link rel="stylesheet" type="text/css" href="static/lib/lightbox-2.10/css/lightbox.min.css" />
<link rel="stylesheet" type="text/css" href="static/lib/cookieconsent2-3.1.0/css/cookieconsent.min.css" />
<link rel="stylesheet" type="text/css" href="static/css/base.css" />
<link rel="stylesheet" type="text/css" href="static/css/main.css" />
<link rel="stylesheet" type="text/css" href="static/css/entry.css" />
<link rel="stylesheet" type="text/css" href="static/css/project.css" />
<link rel="stylesheet" type="text/css" href="static/css/toc.css" />
<link rel="stylesheet" type="text/css" href="static/css/code.css" />
<link rel="stylesheet" type="text/css" href="static/css/code-github.min.css" />
<link rel="stylesheet" type="text/css" href="static/css/print.css" media="print" />
<script src="static/lib/jquery-3.3.1/js/jquery.min.js"></script>
<script src="static/lib/bootstrap-4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="static/lib/stickytabs-1.2.0/js/stickytabs.js"></script>
<script src="static/lib/scrolltotop-1.0/js/scrolltotop.js"></script>
<script src="static/lib/lightbox-2.10/js/lightbox.min.js"></script>
<script>
lightbox.option({
'albumLabel': "Imagen %1 de %2",
'fadeDuration': 250,
'resizeDuration': 250,
'wrapAround': true,
'disable': true
})
</script>
<script src="lib/cookieconsent2-3.1.0/js/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#d4d4d4",
"text": "#151515"
},
"button": {
"background": "#003379",
"text": "#ffffff"
}
},
"content": {
"message": "Este sitio web utiliza cookies propias y de terceros para que tengas la mejor experiencia de usuario posible. Si continuas navegando estás aceptando el uso de las mencionadas cookies y la política de cookies.",
"dismiss": "Cerrar mensaje",
"link": "Más información",
"href": "https://prlazarus.es/md_cookies_policy.html"
}
})
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PWTT0T2YZ0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-PWTT0T2YZ0');
</script>
</head>
<body>
<div class="container-fluid main-container">
<link rel="stylesheet" type="text/css" href="static/css/navbar.css" />
<div id="navbar">
<div id="zoneA">
<div class="content">
<a href="./">
<div id="logo"></div>
</a>
<h1 id="title">
prLázarus
</h1>
<h2 id="subtitle">
Blog sobre el desarrollo de proyectos, ingeniería software y tutoriales
</h2>
</div>
</div>
<div id="zoneB">
<div class="content">
<div id="menu">
<a class="menuItem" href="./"><i class="fa fa-home"></i><span class="text"> Página principal</span></a>
<a class="menuItem" href="./md_projects.html"><i class="fa fa-rocket"></i><span class="text"> Proyectos</span></a>
<a class="menuItem" href="https://cjpelaezrivas.dev"><i class="fa fa-user-circle"></i><span class="text"> Sobre mí</span></a>
</div>
</div>
</div>
</div>
<div class="fluid-row" id="header">
<h1 class="title toc-ignore ">Relacionando las entradas del blog</h1>
<div class="date"><em>viernes, 30 de noviembre de 2018</em></div>
<div id="entry_section">
<div id="time_section"><b>Tiempo de lectura:</b> 7 minutos</div>
<div id="project_section"><b>Proyecto:</b> <a href="md_projects.html#blog">Actualización del blog</a></div>
</div>
<div id="tag_section">
<b>Etiquetas: </b>
<a class="tag" href="md_search.html?tag=Blog">Blog</a>
<a class="tag" href="md_search.html?tag=Diario de desarrollo">Diario de desarrollo</a>
</div>
</div>
<b>Tabla de contenido</b>
<div class="table-of-contents">
<ul>
<li><a href="#relaciones-matem%C3%A1ticas">Relaciones matemáticas</a></li>
<li><a href="#propiedades-de-las-relaciones">Propiedades de las relaciones</a></li>
<li><a href="#implementaci%C3%B3n-de-la-soluci%C3%B3n">Implementación de la solución</a></li>
</ul>
</div>
<div class="section">
<p>Hola de nuevo,<br>
Parece que le he cogido justo a esto de escribir entradas. En esta ocasión voy a hablar un poco sobre la nueva modificación incluida en el blog: La sección de entradas relacionadas.</p>
<p>Todos hemos visto en muchas páginas una sección que relaciona distintas páginas dentro del sitio que estamos visitando. De este modo se aumenta el número de enlaces internos, y además ofrece a los visitantes una forma cómoda de navegar por el sitio visitando páginas que están relacionas de alguna forma con la actual.</p>
<p>Para realizar esta modificación he recurrido a las relaciones matemáticas y a sus propiedades. A partir de un conjunto, en este caso las entradas, es posible declarar relaciones binarias entre ellas con las propiedades deseadas. A continuación se verá todo esto con un poco más de detalle.</p>
<h2 id="relaciones-matem%C3%A1ticas">Relaciones matemáticas</h2>
<p>Las relaciones permiten clasificar u ordenar los distintos elementos del conjunto sobre las que se declaran usando las características de dichos elementos. Aquí entran en juego muchos conceptos: pares ordenados, producto cartesiano, conjuntos, y un largo etcétera. No vamos a tratar todo esto en profundidad, pero sí se verán algunas partes con más detalle.</p>
<center style="margin: -5px 0 5px 0;">
<img src="./media/images/entries//2018_11_30/1.png" width="235">
</center>
<p>La expresión anterior puede leerse como: una relación <code>R</code> es el conjunto de pares ordenadores <code>(a, b)</code> pertenecientes al producto cartesiano del conjunto <code>A</code> con el conjunto <code>B</code>, cuyos elementos cumplen la propiedad <code>P</code>.</p>
<p>En este caso concreto, los conjuntos <code>A</code> y <code>B</code> son el mismos (todas las entradas del blog) y el resultado del producto cartesiano tendría n<sup>2</sup> elementos, siendo n el número de entradas publicadas. Por otro lado, la propiedad <code>P</code> es binaria, y puede ser cualquier características que necesitemos: "<em>es menor que</em>", "<em>es padre de</em>", "<em>extiende de</em>", ...</p>
<p>La idea aquí es relacionar dos elementos <code>a</code> y <code>b</code> que pertenecen al conjunto <code>A x B</code> y que comparten la propiedad <code>P</code>. Esta relación se representa de este manera:</p>
<center style="margin: -5px 0 5px 0;">
<img src="./media/images/entries//2018_11_30/2.png" width="55">
</center>
<p>Aunque yo, por simplicidad, voy a usar esta otra notación menos matemática:</p>
<center style="margin: -5px 0 5px 0;">
a → b
</center>
<p>Lo que significa que <code>a</code> está relacionado con <code>b</code>.</p>
<h2 id="propiedades-de-las-relaciones">Propiedades de las relaciones</h2>
<p>No todas las relaciones son iguales. Además de la semántica, existen diferentes propiedades que afecta su comportamiento. Las relaciones puede ser:</p>
<ul>
<li><strong>Reflexiva</strong><br>
Una relación es reflexiva si todos los elementos están relacionados con sigo mismos.</li>
<li><strong>Simétrica</strong><br>
Una relación es simétrica si todas las parejas que forman la relación tienen su recíproco. Es decir, para todas las parejas de <code>a</code> y <code>b</code> se cumple que: <code>a → b</code> y <code>b → a</code>.</li>
<li><strong>Transitiva</strong><br>
Una relación es transitiva siempre que un elemento que está relacionado con un segundo, y este a su vez con un tercero, el primero esté relacionado con el tercero. De la forma: <code>a → b</code> y <code>b → c</code>, entonces se da que <code>a → c</code>.</li>
</ul>
<p>Estas propiedades no son excluyentes, de modo que una relación puede cumplir las tres condiciones al mismo tiempo sin ningún tipo de problema.</p>
<h2 id="implementaci%C3%B3n-de-la-soluci%C3%B3n">Implementación de la solución</h2>
<p>Una vez en materia podemos ver cómo he realizado la modificación para añadir el manejo de las relaciones entre entradas. En realidad, he desarrollado una función que trabaja de forma independiente al blog, de modo que la usaré también en el sitio web de mi otro proyecto, <a href="https://cjpelaezrivas.dev/ProjectCreationFX/">Project Creation FX</a>.</p>
<p>En primero lugar es necesario un fichero de configuración. En este caso, un fichero <code>json</code> que guardará todas las relaciones y los conjuntos de pares de elementos, a los que llamaremos instancias. Las relaciones se declaran con un nombre, si es transitiva o no, el nivel de profundidad hasta el que se usa la transitividad, valor opcional que ahora se verá con más detalle; y su relación inversa si la hubiera.</p>
<p>Para el caso que nos ocupa únicamente tendremos una relación: <em>"está relacionada con"</em>. Esta relación se declara así:</p>
<pre><code class="hljs">{
<span class="hljs-string">"name"</span>: <span class="hljs-string">"relatedTo"</span>,
<span class="hljs-string">"transitive"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"transitive_depth"</span>: <span class="hljs-number">1</span>,
<span class="hljs-string">"inverse"</span>: <span class="hljs-string">"relatedTo"</span>
}
</code></pre>
<p>El sistema desarrollado no da soporte a las relaciones reflexivas. Este tipo de relaciones no tienen sentido a la hora de relacionar distintos enlaces en una página web. No se me ocurre un escenario en el que sea necesario relacionar una entrada y generar un enlace a sí misma.</p>
<p>La propiedad simétrica se cumple siempre que la relación inversa sea la misma que la relación que se está declarando, tal y como ocurre en el ejemplo sobre el que trabajamos. Es decir, la relación <code>relatedTo</code> es simétrica porque su relación inversa es ella misma. Es fácil pensar en relaciones que no son simétricas y tienen como inversa una relación distinta: <em>"es padre de"</em>, por ejemplo, su inversa sería <em>"es hijo de"</em>.</p>
<p>Además, por definición es transitiva, ya que estamos indicándolo de ese modo. La funcionalidad del nivel de profundidad de la transitividad se puede ver fácilmente en el siguiente ejemplo:</p>
<p>En el caso de tener las siguientes instancias:</p>
<pre><code class="hljs">a → b
b → c
c → d
d → e
e → f
</code></pre>
<p>Usar la relación <code>relatedTo</code> sobre <code>b</code> con nivel de profundidad 2 nos ofrecería los siguientes resultados:</p>
<pre><code class="hljs">b → a (-<span class="hljs-number">1</span>)
b → c (<span class="hljs-number">0</span>)
b → d (<span class="hljs-number">1</span>)
b → e (<span class="hljs-number">2</span>)
</code></pre>
<p>Junto a cada resultado puede verse el grado de relación que existe entre <code>b</code> y el otro elemento:</p>
<ul>
<li>-1 significa que se ha alcanzado ese resultado usando la relación inversa</li>
<li>0 significa que se ha alcanzado ese resultado de forma directa usando una instancia declarada</li>
<li>Un número positivo significa que se ha alcanzado ese resultado usando transitividad, indicando la profundidad con dicho valor</li>
</ul>
<p>Puede observarse que no se ha podido relacionar <code>b</code> con <code>f</code> debido a que están demasiado lejos entre ellos y se ha limitado la búsqueda hasta el nivel 2 de profundidad. Este límite es necesario establecerlo porque la función que realiza la búsqueda transitiva es recursiva y necesita una condición de parada. El nivel de profundidad por defecto es 1, pero puede establecerse el que más convenga en cada momento.</p>
<p>Aquí entra una cuestión filosófica en juego, aunque en el ejemplo anterior matemáticamente se da que <code>a → f</code>, ¿están relacionados realmente estos dos elementos? o ¿están tan separados que realmente ya no existe una relación valiosa entre ellos? Dependerá de la situación en la que nos encontremos. Para el caso que nos ocupa aquí, un límite de nivel 1 de profundidad es suficiente.</p>
<p>Volviendo a la implementación, la declaración de las instancias se realiza de la siguiente manera:</p>
<pre><code class="hljs">{
<span class="hljs-string">"a"</span>: <span class="hljs-string">"md_2012_09_29"</span>,
<span class="hljs-string">"r"</span>: <span class="hljs-string">"relatedTo"</span>,
<span class="hljs-string">"b"</span>: [
<span class="hljs-string">"md_2012_09_29_B"</span>, <span class="hljs-comment">// md_2012_09_29 → md_2012_09_29_B</span>
<span class="hljs-string">"md_2012_10_07"</span>, <span class="hljs-comment">// md_2012_09_29 → md_2012_10_07</span>
<span class="hljs-string">"md_2012_10_07_B"</span>, <span class="hljs-comment">// md_2012_09_29 → md_2012_10_07_B</span>
<span class="hljs-string">"md_2012_10_14"</span> <span class="hljs-comment">// md_2012_09_29 → md_2012_10_14</span>
]
},
{
<span class="hljs-string">"a"</span>: <span class="hljs-string">"md_2013_03_15"</span>,
<span class="hljs-string">"r"</span>: <span class="hljs-string">"relatedTo"</span>,
<span class="hljs-string">"b"</span>: <span class="hljs-string">"md_2013_06_13"</span> <span class="hljs-comment">// md_2013_03_15 → md_2013_06_13</span>
}
</code></pre>
<p>Como se ve en el ejemplo, es posible realizar varias declaraciones usando una lista. Esto es equivalente a declarar cada instancia por separado y únicamente se hace para facilitar el mantenimiento de la estructura de datos.</p>
<p>Una vez declarado el fichero de relaciones, se pasa a compilar el blog y se genera automáticamente al final de cada entrada la sección de entradas relacionadas con tantos enlaces como corresponda.</p>
<p>Para ver la potencia de este sistema, en el ejemplo anterior se han declarado para la entrada <code>md_2012_09_29</code> cuatro instancias. Estas instancias generan un total de 20 enlaces entre las cinco entradas que forman el grupo. Es decir, se ha declarado un 20% de los enlaces, el 80% restante se ha generado usando las relaciones inversas y transitivas.</p>
<p>El sistema desarrollado está en este caso casi desaprovechado y sé que puede dar mucho más de sí. Como ya he comentado, lo usaré en mi otro proyecto para generar las relaciones dentro de la wiki. En ese escenario, usando varias relaciones y con distintas configuraciones, será donde finalmente se vea la potencia real del sistema y todo lo que puede ofrecer.</p>
<p>Espero que os guste el contenido de esta entrada y os parezca interesante. Estoy atento a los comentarios por si alguien está interesado en algún detalle más acerca de cómo está implementado.</p>
<p>Hasta la próxima, <br>
Lázarus Surazal
</p>
</div>
<link rel="stylesheet" type="text/css" href="static/css/relations.css" />
<div id="relationsContainer">
<span class="relatedTitle">Entradas relacionadas</span>
<ul>
<li><a href="md_2018_03_21.html">Nuevo blog, nuevo alojamiento, nuevo comienzo</a></li>
<li><a href="md_2018_11_27.html">Nuevas actualizaciones en el blog</a></li>
<li><a href="md_2018_12_18.html">Proceso de actualización del blog finalizado</a></li>
<li><a href="md_2024_09_08.html">Usando Lighthouse para construir el blog</a></li>
</ul>
</div>
<link rel="stylesheet" type="text/css" href="static/css/navigation.css" />
<hr>
<div id="navigationContainer">
<a class="item hint--bottom-left navigateButton right" href="md_2018_12_18.html" data-hint="Proceso de actualización del blog finalizado">
Siguiente
<i class="fa fa-arrow-right"></i>
</a>
<a class="item hint--bottom-right navigateButton left" href="md_2018_11_27.html" data-hint="Nuevas actualizaciones en el blog">
<i class="fa fa-arrow-left"></i>
Anterior
</a>
<a class="navigateButton center" href="./">
<i class="fa fa-home"></i>
Volver a la página principal
</a>
</div>
<link rel="stylesheet" type="text/css" href="static/css/info.css" />
<div id="infoContainer">
<div id="infoProfile" class="info_block">
<div class="title">
<b>Perfil</b>
</div>
<div class="content">
<div class="part photo">
<img src="media/images/logo_b.png" width="90px" alt="prLázarus logo info" />
</div>
<div class="part description">
<h3 id="name">Carlos J. Peláez Rivas <em id="alias">(Lázarus Surazal)</em></h3>
Graduado y Máster en Ingeniería Informática por la Universidad de Málaga (España). También cursé un Experto en tecnologías de Blockchain. Actualmente trabajando como Software engineer en Málaga.<br>
Apasionado de los videojuegos, la música y la tecnología; siempre buscando cosas nuevas que aprender, hacer (y a veces romper).<br>
<a href="https://cjpelaezrivas.dev">Más sobre mi...</a>
</div>
</div>
</div>
<div id="infoContact" class="info_block">
<div class="title">
<b>Contacto</b>
</div>
<div class="content links">
<div class="item hint--bottom-right" data-hint="Perfil personal">
<a href="https://cjpelaezrivas.dev" style="font-size: 38px; line-height: 38px;"><i class="fa fa-user-circle"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="prLázarus - RSS">
<a href="./feed.xml"><i class="fa fa-rss-square"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="Enviar correo electrónico">
<a href="mailto:prlazarus.info@gmail.com"><i class="fa fa-envelope-square"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="Perfil de GitHub">
<a href="https://github.com/cjpelaezrivas"><i class="fa fa-github-square"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="Perfil de LinkedIn">
<a href="https://www.linkedin.com/in/cjpelaezrivas"><i class="fa fa-linkedin-square"></i></a>
</div>
</div>
</div>
</div>
<div id="commentsContainer" style="float:left; width:100%;">
<script src="https://utteranc.es/client.js" repo="cjpelaezrivas/prlazarus" issue-term="title" label="comments" theme="github-light" crossorigin="anonymous" async>
</script>
<noscript>
<div class="block warning icon fa-exclamation" style="margin-bottom:20px;">
Por favor, activa JavaScript para ver los comentarios.
</div>
</noscript>
</div>
<link rel="stylesheet" type="text/css" href="static/css/footer.css" />
<div id="footer_message">
¿Has encontrado algún error? <a href="mailto:prlazarus.info@gmail.com">Envía un correo electrónico</a> o <a href="https://github.com/cjpelaezrivas/prLazarus/issues">abre un nuevo <i>issue</i></a> para corregirlo. Gracias.
</div>
<div id="footer">
<div class="content">
<div id="logo_footer">
<a href="https://prlazarus.es"><img src="media/images/logo_c.png" alt="prLázarus logo footer" style="margin-top:10px;" /></a>
<!-- <span class="text" style="display:block; text-align:center; margin-top:-4px;">© 2012 - 2018</span> -->
</div>
<div id="right_column" class="text">
Escrito desde <a href="https://es.wikipedia.org/wiki/Espa%C3%B1a"><img src="media/images/spain.png" style="margin: -2px 2px 0 2px;" alt="Spain flag" /></a> con <i class="fa fa-heart" style="color:#cc0000"></i> por un humano (no IA) <i class="fa fa-child" style="font-size:18px"></i><br>
<i class="fa fa-plug"></i> Con la tecnología de <i><a href="https://cjpelaezrivas.dev/Lighthouse/">Lighthouse</a></i> y <i><a href="https://pages.github.com/">GitHub Pages</a></i><br>
<i><a href="./feed.xml">RSS</a></i>
|
<i><a href="md_cookies_policy.html">Política de cookies</a></i>
|
<i><a href="md_disclaimer.html">Limitación de responsabilidad</a></i><br>
<a href="mailto:prlazarus.info@gmail.com">prlazarus.info@gmail.com</a>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="static/css/progressBar.css" />
<div id="progressBarContainer">
<div class="progressBar">
</div>
</div>
<script src="js/progressBar.js"></script>
</div>
<!-- Default Statcounter code for prLázarus - Blog -->
<script type="text/javascript">
var sc_project = 12995152;
var sc_invisible = 1;
var sc_security = "7de2ea10";
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
<div class="statcounter">
<a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/12995152/0/7de2ea10/1/" alt="Web Analytics" referrerPolicy="no-referrer-when-downgrade"></a>
</div>
</noscript>
<!-- End of Statcounter Code -->
</body>
</html>