-
Notifications
You must be signed in to change notification settings - Fork 0
/
md_2018_11_27.html
261 lines (257 loc) · 16.6 KB
/
md_2018_11_27.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
<!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>Nuevas actualizaciones en el 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_27">
<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 ">Nuevas actualizaciones en el blog</h1>
<div class="date"><em>martes, 27 de noviembre de 2018</em></div>
<div id="entry_section">
<div id="time_section"><b>Tiempo de lectura:</b> 3 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>
<div class="section">
<p>Hola de nuevo,<br>
En esta entrada voy a hablar sobre los nuevos cambios que he implementado en el blog en los últimos días. Si echáis un vistazo apenas notareis diferencias, únicamente he cambiado algunos detalles en el estilo. Los cambios grandes se han hecho en el interior interior, más concretamente, en la generación del blog.</p>
<p>Tras aplicar los cambios y hacer algunas pruebas de rendimiento, he medido un tiempo de carga de la página de entre tres y cuatro veces más bajo. Es decir, una carga más rápida obteniendo el mismo resultado. Justo lo que buscaba. Y lo mejor de esto es que la página ya era muy rápida antes de tocar nada.</p>
<p>Cuando realicé el lavado de cara del blog dejé algunos detalles pendientes con los que no estaba muy conforme. Alguno de ellos ya los solucioné: la gestión de los comentarios, por ejemplo. Aunque este era bastante urgente, así que creo que no cuenta. Pero otros, se quedaron en el tintero porque todo funcionaba como quería, aunque no me convencía del todo cómo estaba hecho.</p>
<p>Algunas partes de las páginas del blog se terminaban de componer en el dispositivo cliente usando JavaScript. Cuando un usuario entraba a una página, se terminaban de crear algunos componentes, como por ejemplo: las etiquetas de las entradas, los títulos de las tablas de contenido, los botones de navegación al final de cada entrada, entre otras modificaciones.</p>
<p>El tema de modificar dinámicamente el HTML de la página no me terminaba de convencer. Y es algo normal... Seguridad y velocidad. Además de que algunos usuarios pueden tener la ejecución de código JavaScript desactivada, por lo que básicamente verían la página sin terminar. Funcional sí, pero no completa.</p>
<p>Pensando un poco en este tema, era una estupidez ejecutar este código JavaScript porque todos los usuarios iban a obtener siempre el mismo resultado visual. Las funciones no eran parametrizables ni configurables. Entonces, ¿por qué no ejecutar este código a la hora del renderizado del blog y generar las páginas estáticas ya terminadas? Eso es justamente lo que he hecho.</p>
<p>El ahorro de cálculos por parte del cliente es lo que genera el aumento de velocidad en la carga de las páginas. Ahora todo el contenido está incluido en la página estática y simplemente es descargar y mostrar. Hay cosas, por supuesto, que no se pueden hacer siguiendo esta estratégica, pero son las que menos y de menor importancia. Estoy hablando de la barra de progreso de lectura en la parte superior de la página, o en el botón para volver al inicio de las entradas, por ejemplo. Son añadidos estéticos que de no ejecutarse por cualquier motivo la página no pierde contenido.</p>
<p>El tema de los comentarios va un poco a parte. JavaScript es un requisitos indispensable para mostrarlos, de modo que tampoco se puede hacer mucho. De estar desactivado, aparecerá un aviso para indicar que no puede funcionar correctamente y listo. También he añadido este aviso en la página de búsqueda de entradas para que quede claro que no funciona si la ejecución de scripts está bloqueada.</p>
<p>Con los nuevos cambios, es aun más fácil la creación de entradas. Ahora toda la información está únicamente en las cabeceras de cada fichero usando el formato <code>yml</code>, y no está desperdigada y duplicada como antes. Estaba hecho un poco de aquella manera, lo sé. A la hora de la renderización se leen estas propiedades y se utilizan donde es pertinente. Lo que hace que todo sea más claro y fácil de mantener.</p>
<p>Estos cambios han hecho que la generación del sitio requiera un poco más de tiempo (no mucho más, solo unos segundos), ya que hay más procesamiento y todo el código dinámico se genera en este punto. Pero las páginas generadas ahora están completas, lo que hace que aumente la compatibilidad con más navegadores, dispositivos y configuraciones. En definitiva, estoy muy contento con el resultado final y el blog cada vez está más cerca de estar terminado.</p>
<p>Nos vemos en 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_30.html">Relacionando las entradas del 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_11_30.html" data-hint="Relacionando las entradas del blog">
Siguiente
<i class="fa fa-arrow-right"></i>
</a>
<a class="item hint--bottom-right navigateButton left" href="md_2018_10_30.html" data-hint="Opinión: Máster en Ingeniería Informática (UMA)">
<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>