-
Notifications
You must be signed in to change notification settings - Fork 0
/
md_2018_12_18.html
305 lines (301 loc) · 21 KB
/
md_2018_12_18.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
<!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>Proceso de actualización del blog finalizado - 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_12_18">
<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 ">Proceso de actualización del blog finalizado</h1>
<div class="date"><em>martes, 18 de diciembre de 2018</em></div>
<div id="entry_section">
<div id="time_section"><b>Tiempo de lectura:</b> 5 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=FdP">FdP</a>
<a class="tag" href="md_search.html?tag=Información">Información</a>
</div>
</div>
<b>Tabla de contenido</b>
<div class="table-of-contents">
<ul>
<li><a href="#creaci%C3%B3n-del-blog-usando-r-markdown-y-github-pages">Creación del blog usando R Markdown y Github Pages</a></li>
<li><a href="#eliminar-disqus-como-gestor-de-comentarios">Eliminar Disqus como gestor de comentarios</a></li>
<li><a href="#seis-meses-sin-cambios">Seis meses sin cambios</a></li>
<li><a href="#eliminar-generaci%C3%B3n-din%C3%A1mica-usando-javascript">Eliminar generación dinámica usando JavaScript</a></li>
<li><a href="#relacionar-las-entradas">Relacionar las entradas</a></li>
<li><a href="#a%C3%B1adir-el-fichero-sitemap.xml">Añadir el fichero sitemap.xml</a></li>
<li><a href="#ajustes-finales">Ajustes finales</a></li>
</ul>
</div>
<div class="section">
<p>Hola de nuevo,<br>
Tras varias semanas y la implementación de nuevas mejoras, por fin puedo decir que la nueva versión del blog está terminada. Claro está que puede haber algún que otro cambio o añadido menor en el futuro, pero por fin la versión 2.0 está acabada.</p>
<p>A continuación detallaré todos los cambios que he realizado desde que en marzo subí la primera actualización del nuevo blog:</p>
<h2 id="creaci%C3%B3n-del-blog-usando-r-markdown-y-github-pages">Creación del blog usando R Markdown y Github Pages</h2>
<p>Los detalles de todo el proceso seguido los podéis encontrar <a href="md_2018_03_21.html">aquí</a>. Claramente este es el paso más extenso y con más cambios. Incluía además de la creación de la estructura básica del blog, toda la migración desde el servicio anterior.</p>
<p>El proceso de aprendizaje de esta tecnología, la parte básica, no fue muy complicada a decir verdad. También es cierto que me falta mucho por aprender, y aunque he profundizado algo más, al menos cuanto necesito para cumplir mis objetivos, aun me queda mucho para dominar esta tecnología.</p>
<h2 id="eliminar-disqus-como-gestor-de-comentarios">Eliminar Disqus como gestor de comentarios</h2>
<p>Esto se llevó a cabo por los motivos ya mencionados en la entrada que da comienzo al proceso de renovación. Este paso incluye, claro, añadir como gestor de comentarios a Github Issues. Podéis encontrar referencias a este cambio <a href="https://github.com/cjpelaezrivas/prLazarus/issues/1#issuecomment-381950057">aquí</a>.</p>
<h2 id="seis-meses-sin-cambios">Seis meses sin cambios</h2>
<p>Como apunte cómico, un descanso de seis meses nunca viene mal. Supongo que en algún momento me cansé del estado y de cómo estaba hecho el blog y me puse manos a la obra con algunas nuevas ideas.</p>
<h2 id="eliminar-generaci%C3%B3n-din%C3%A1mica-usando-javascript">Eliminar generación dinámica usando JavaScript</h2>
<p>Como ya comenté en <a href="md_2018_11_27.html">esta entrada</a>, el blog se terminaba de generar dinámicamente en el dispositivo de cada usuario usando código JavaScript. Como ya se menciona ahí, esto tiene diversos problemas que ya se han solucionado.</p>
<p>En esta fase me tiré a la piscina con las plantillas de R Markdown, básicamente porque era necesario tocar directamente la compilación del blog para generar todo el código en ese momento. Estos cambios trajeron un aumento de velocidad de carga bastante interesante.</p>
<p>Aquí también se incluyó toda la información de las entradas en un único lugar. Ahora todo está mucho más claro y ordenado.</p>
<p>La navegación entre entradas es otro punto que también se llevó a cabo en esta fase. Antes, cada entrada realizaba cálculos en JavaScript para determinar cuál era su anterior y siguiente. Esto era más lento y no compatible para todos los dispositivos. Ahora, este cálculo se realiza también durante la compilación. Se calcula una sola vez, todo está incluido en el código HTML y es compatible con cualquier configuración del navegador.</p>
<p>Estos cambios traen más beneficios a parte de la velocidad. Ahora los buscadores encuentran enlaces funcionales que van a otros artículos del blog en lugar de código JavaScript que ellos no ejecutan. Esto mejora las conexiones internas del blog drásticamente, ya que antes la única página que relacionaba las entradas era la principal.</p>
<h2 id="relacionar-las-entradas">Relacionar las entradas</h2>
<p>Continuando con las relaciones y los cambios hechos en la fase anterior, en esta fase apliqué una idea que me venía rondando la cabeza desde hacía bastante tiempo: la relación de entradas. Todo el proceso está explicado <a href="md_2018_11_30.html">aquí</a>.</p>
<p>A fin de cuentas, se trata de darle significado semántico a cada entrada, creando grupos y enlaces entre ellas de forma más o menos automática. Todos estos enlaces también se crean en tiempo de compilación, de forma que es una característica inmediata a la hora de visualizar el blog. Esta característica mejora de nuevo las relaciones internas del blog, y como he mencionado ya aumenta la semántica de cada entrada.</p>
<p>Ya he aplicado esta tecnología en el boceto de wiki disponible en <a href="https://cjpelaezrivas.dev/ProjectCreationFX/md_wiki.html">Project Creation FX</a>. En este otro caso se utilizan distintas relaciones y propiedades para que la función de relación ofrezca toda la potencia que puede dar.</p>
<h2 id="a%C3%B1adir-el-fichero-sitemap.xml">Añadir el fichero sitemap.xml</h2>
<p>Es posible que debería haber conocido la necesidad de disponer de este fichero en la raíz del alojamiento, pero a decir verdad no he sabido de su importancia hasta hace unas semanas.</p>
<p><s>Este paso es, básicamente, la generación del fichero y la subida del mismo al repositorio. No tiene mucha más relevancia.</s> Al parecer, este fichero ayuda a los buscadores a localizar todas las páginas que son accesibles, pues es, a fin de cuentas, un mapa del sitio web.</p>
<p>La generación del fichero se puede automatizar si se usa GitHub Pages, como es el caso. Bastan con crear el fichero <code>_config.yml</code> en la raiz del repositorio con el siguiente contenido:</p>
<pre><code class="hljs"><span class="hljs-attr">plugins:</span>
<span class="hljs-bullet">-</span> <span class="hljs-string">jekyll-sitemap</span>
</code></pre>
<p>GitHub se encarga del resto. El fichero no será visible en el repositorio, pero si se accede a la URL correspondiente, se debería poder ver el contenido del mismo sin problemas.</p>
<h2 id="ajustes-finales">Ajustes finales</h2>
<p>En este fase se incluyen diversos cambios de estilos y modificaciones menos importantes. Las listo a continuación para haceros una idea de todo lo que se ha ido tocado:</p>
<ul>
<li>Cambios menores en el estilo general de la página</li>
<li>Mejorar la aplicación de los estilos</li>
<li>Actualización del pie de página</li>
<li>Añadir correos electrónicos con dominio personalizado en las secciones de contacto</li>
<li>Añadir títulos de las entradas siguiente y anterior en forma de <em>tooltip</em></li>
</ul>
<br>
<p>Estos han sido todos los cambios que se han realizado en este proceso de actualización. Ya se ha mencionado que es posible que se incluya alguna que otra características o cambio, pero por el momento no hay nada programado. El camino desde Blogger al punto en el que nos encontramos no ha sido corto precisamente, pero nos ha servido para aprender bastantes cosas nuevas y poner en práctica muchas ideas.</p>
<p>Como punto positivo, he de decir que me alegra haber terminado este pequeño proyecto antes de fin de año, de forma que ahora hay sitio para nuevas ideas. Es muy posible que comencemos una nueva serie pronto con nuevas tecnologías.</p>
<p>También tengo pendiente la creación de un nuevo sitio web estático, y además <a href="https://cjpelaezrivas.dev/ProjectCreationFX/">Project Creation FX</a> (tanto el proyecto como el sitio web) sigue teniendo bastantes horas de trabajo por delante. Todavía tengo que crear la versión 1.0 del proyecto y terminar algunas páginas más del sitio web para poder decir que la primera versión está terminada.</p>
<p>Parece que comenzaremos el nuevo año con bastantes ideas nuevas y otras tantas en proceso. Eso no puede ser malo, siempre está bien estar ocupado.</p>
<p>Hasta la próxima entrada,<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_11_30.html">Relacionando las entradas del blog</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_2019_03_25.html" data-hint="Power Shooter - Inicio de proyecto">
Siguiente
<i class="fa fa-arrow-right"></i>
</a>
<a class="item hint--bottom-right navigateButton left" href="md_2018_11_30.html" data-hint="Relacionando las entradas del 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>