Escrito durante la malhadada cuarentena durante la epidemia de coronavirus. Ya le dedicaré una filípica... ¡A la cuarentena, no al virus!
Allá por los oscuros años 2001, empecé a escribir y publicar mis opiniones en el viejo Geocities, ignorante aún del incipiente boom de los blogs. Escribir en Word y guardar las páginas en formato .htm bastaba.
Luego de varios años, como tantos, me mudé a Blogger, pero su rigidez en la manipulación del texto era frustrante: ¿párrafos divididos con etiquetas <div> y <br />? Seriously?
Luego instalé WordPress, pero el bloat era insoportable, como se leía ya en 2016 en The web is DOOM'd: Average page now as big as id's DOS classic,* el overhead requerido para mostrar un texto tan corto como unas cuantas oraciones ¡era más pesado que el videojuego Doom! Algo inaceptable.
Pero quería algo aún más minimalista. Por eso pensé en diseñar mi propio Content Management System, o CMS, básicamente copiando y pegando partes de código que entendía de PluXml y consultando constantemente internet.
Para hosting recomiendo 1dollar-webhosting.com, los uso desde hace 10 años y son eficientes y económicos. Eso sí, si el lector prevé que necesitará más servicio al cliente, le convendrá un servicio de mayor valor.
Lo adjunto como repositorio y por si a alguien le sirve. Comentaré el código y al final pondré un archivo descargable.
El núcleo del sistema
Este es “el motor bajo el capót” que actúa cuando el usuario visita la página:
<? ob_start("ob_gzhandler");?> //Esto dizque comprime la página
<html lang="es">
<?php
$data = $_GET['id']; //recibe indicación de qué página quiere el usuario, en dirección; ejemplo: pagina.com/?id=esta-pagina
if ($data==null) //abrir la lista de artículos main.htm si el usuario pide la página principal sin indicar ningún artículo en particular
{// let's print the main menu of articles
$page = file_get_contents("main.htm");
echo $page; //muestra la lista de artículos
}
else
{//let's print the chosen article
$header=file_get_contents("header.htm");//los artículos llevan un pequeño encabezado con dos opciones para facilitar la lectura: añadir guiones y modo nocturno
$url= 'data/' . $data .".htm"; #establece que el archivo que se desea es el nombre de la página más la terminación .htm
$page = file_get_contents("$url"); //busca el artículo pedido en la dirección de la página, en la carpeta "data"
echo $header.$page; #muestra el encabezamiento y la página pedida.
}
?>
<!-- Al final se añade el estilo de la página, para que el usuario pueda ver el texto mientras se cargan estilos .css y note que la página “funciona”, que no se queda en blanco.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="stylesheet" href="style.css" media="screen">
<link rel="icon" href="favicon.ico" />
El encabezado
Esto se añade antes de cada página para facilitar la lectura.
<!DOCTYPE html>
<html lang="es">
<!-- añadiremos una pequeña barra de navegación, sea para el menú de artículos, o para la tabla de contenidos de este artículo concreto. -->
<div class="navbar">
<a href="index.php">Volver</a>
<a href="#contenido">Contenido</a>
</div>
<br>
<center>
<!-- añadimos la opción para que usuario pueda añadir guiones al fin de línea y activar modo nocturno. Lo primero casi no es necesario pues todos los navegadores modernos muestran ya los guiones gracias a .css
Estos códigos pueden añadirse como bookmarklets, por cierto; el de modo oscuro fue gracias a Naked Browser, navegador móvil que recomiendo.
-->
<table><tr><td><a href="javascript:if(document.createElement){void(head=document.getElementsByTagName('head').item(0));void(script=document.createElement('script'));void(script.src='https://mnater.github.io/Hyphenator/Hyphenator.js?bm=true');void(script.type='text/javascript');void(head.appendChild(script));}">Clic aquí para poner guiones al final</a> de línea.</td>
<td><a href="javascript:(function(){N=document.createElement('link');S='*{background:black%20!important;color:white%20!important}:link,:link%20*{color:#ddddff%20!important}:visited,:visited%20*{color:#ddffdd%20!important}';N.rel='stylesheet';N.href='data:text/css,'+escape(S);document.getElementsByTagName('head')[0].appendChild(N);})()">Click aquí para modo nocturno</a></td></tr>
</table>
</center>
Los estilos CSS
/* la fuente Arvo me parece muy legible para pantallas especialmente, la recomiendo. Sugiero incluirla en el propio servidor, no pesa mucho, para que la página cargue más rápido sin tener que consultar servidor externo como Google fonts por ejemplo */
@font-face {
font-family : Arvo;
src : url(Arvo-Regular.ttf);
}
/* No suelo poner fuente negrita pues el navegador la muestra bien simulándola. */
@font-face {
font-family : Arvo;
src : url(Arvo-Italic.ttf);
font-style : italic;
}
body {
/* Ese color gainsboro es un tono suave de gris para eliminar el brillo excesivo de un fondo blanco. */
background-color : gainsboro;
/* Para añadir guiones al final de línea; especialmente útiles en móviles, pues son pantallas poco anchas. En general no me importan demasiado los guiones en títulos, lo que es considerado un faux pas tipográfico... */
overflow-wrap : break-word;
overflow-wrap : break-word;
hyphens : auto;
}
p {
font-size : 14pt;
color : black;
font-family : "Arvo", serif;
text-indent : 1em;
margin-top : 0.2em;
}
.subtitulo {
text-align : center;
font-size : 1.5em;
}
.quote {
display : block;
font-size : 93%;
margin-left : 1em;
margin-right : 0;
}
h1, h2, h3, h4 {
color : brown;
font-family : "Arvo", serif;
}
img {
margin-left : 0;
padding-left : 0;
max-width : 97vw;
height : auto;
}
table, th, td {
font-size : 12pt;
color : black;
font-family : "Arial", sans-serif;
border : black solid 1px;
border-collapse : collapse;
}
.navbar {
overflow : hidden;
background-color : rgb(255, 255, 255, 0.3);
position : fixed;
top : 0;
}
.navbar a {
font-family : "Arial Narrow", Arial, sans-serif;
font-stretch : condensed;
float : left;
display : block;
text-align : center;
padding : 5px 5px;
text-decoration : none;
}
/* Que en tablets y teléfonos no haya márgenes, pero en PCs de escritorio y laptops, sí */
@media only screen and (min-width: 18cm) {
body {
margin : 0 15% 0 15%;
}
img {
max-width : 70vw;
height : auto;
}
}
Si a alguien más le resulta de utilidad, me daré por bien servido.
