index.html (7139B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>Cómo gestionar un sitio web estático (HTML+CSS)</title> 7 <link rel="icon" type="image/png" href="/favicon.png" /> 8 <link rel="stylesheet" type="text/css" href="../article.css" /> 9 </head> 10 <body> 11 <header> 12 <p class="title">Cómo gestionar un sitio web estático (HTML+CSS)</p> 13 <p class="date">23 de abril de 2024 • fjbalon</p> 14 </header> 15 <p>Es complicado a menudo explicar el por qué utilizar una web estática es algo conveniente, ya que en el imaginario del vulgo sigue viéndose como algo arcaico, del Internet del siglo pasado quizás, inutilizable. Más aún en una época en la que se encuentra tan engordada la web de servicios, web 2.0, aplicaciones, etcétera. Sin embargo, la simplificación y el uso de esta forma práctica de publicación del servicio, trae innato una serie de conveniencias y ventajas tanto para el programador, como para el servidor y como para el cliente que no deberíamos menospreciar.</p> 16 <p>Pero, ¿qué es un sitio estático?. La definición puede ser algo polémica, a veces, pero <i>grosso modo</i> es un sitio que se compone de archivos preconstruidos, que no dinamiza la información en función de una base de datos o de <i>backend</i>. </p> 17 <p>También, se suele añadir en círculos más tradicionalistas la ausencia de javascript, o al menos, la mínima usable por requerimiento. Un sitio web desprovisto de todo javascript es ciertamente una estética <i>per se</i>. El hecho de buscar disponer de toda la información sin dinamismo, hace que el sitio se encuadre en un halo de simplicidad más que atractivo.</p> 18 <p>Entonces, ¿qué ventajas podemos categorizar o matematizar para un sitio web estático?</p> 19 <ul> 20 <li>Tiempos de carga menos elevados, así como paquetes de datos más livianos. Ligereza, podríamos resumir.</li> 21 <li>Seguridad por la simplificación del proceso, tanto para la parte del cliente como para el servidor, la ausencia de código que se ejecute en el servidor (php) o en el cliente (javascript) reduce significativamente riesgo y vectores de ataque. Esto es elemental además en sitios web dentro de redes anónimas cifradas, como tor o i2p.</li> 22 <li>Simplicidad visual y estética minimalista por necesidad.</li> 23 <li>El programador se hace más consciente de las cargas de trabajo, texto reutilizado, estructura redundante o ineficiente, etcétera. En otras palabras, el administrador del sitio es más cognosciente del propio sitio.</li> 24 <li>Usabilidad y escalabilidad por parte de usuarios <i>heterodoxos</i>, como los que usan navegadores sin soporte para javascript (o al menos los que usan plugins (like)<i>no-script</i>), los que usan navegadores basados en texto... Al fin y al cabo, la experiencia de usuario se suavizará y será más o menos similar para todos; ofreciendo en este caso equidad.</li> 25 </ul> 26 <h2>Modo oscuro</h2> 27 <p>No son pocas las ocasiones en que los sitios web ofrecen, a través de código javascript y cookies, sistemas de switch (o conmutador, en cristiano) de los sistemas claros/oscuros. Por la salud visual de los lectores, creo importante mantener este elemento fácil (aunque no siempre es aplicable, claro está).</p> 28 <p>En mi experiencia personal, creo que con un modo claro (en base a blanco) y un moco oscuro (base a negro puro) es más que suficiente. Además, el segundo se supone que aporta un mejor rendimiento en pantallas amoled, y visualmente un negro puro queda mucho más estético, a pesar de la tentación de mantener unos tonos grisáceos que, según otros, mejoran enormemente la lectura; pero ni tengo el conocimiento para defenderlo ni el necesario para atacarlo. El negro puro se constituye como un elemento, en mi uso personal, básico: utilizo un gestor de ventanas en mosaico con fondo negro, el fondo de la terminal st en negro, etc. Quiero entonces que, en cohesión con mi ecosistema, el fondo sea negro. Simple.</p> 29 <p>¿Cómo lograrlo? Simple, CSS trae la solución consigo: la función de medios CSS <emb>prefers-color-scheme</emb> se utiliza para detectar si un usuario ha solicitado temas de colores claros u oscuros, siendo que indica su preferencia a través de una configuración del sistema operativo o una configuración del agente de usuario que indica el propio navegador.</p> 30 <p>De tal forma que podemos configurar las preferencias para el modo claro o <emb>light</emb> y oscuro o <emb>dark</emb>. Tampoco es estrictamente necesario establecer ambos, simplemente con dejar uno, el otro se establecería como defecto negativo.</p> 31 <pre><code>@media (prefers-color-scheme: light) { 32 body { 33 color: black; 34 background-color: white; 35 } 36 } 37 38 @media (prefers-color-scheme: dark) { 39 body { 40 color: white; 41 background-color: black; 42 } 43 }</code></pre> 44 <p>Pero el problema de todo modo switch de modo oscuro son las imágenes. No hablamos de imágenes vectoriales como SVG, que tienen ya el propio soporte en CSS, sino imágenes de mapas de bits que, a menudo, no tienen siempre transparencia y el fondo blanco contrasta con el fondo negro, dejando un aspecto poco estético. </p> 45 <p>Hay varias formas de solucionar esto:</p> 46 <ol> 47 <li> 48 <p>Utilizando un switch con dos imágenes, una para modo claro y otra para modo oscuro. Indicando un CSS:</p> 49 <pre><code>.only-on-dark { 50 display: none; 51 } 52 53 @media (prefers-color-scheme: dark) { 54 .only-on-dark { 55 display: block; 56 } 57 58 .only-on-light { 59 display: none; 60 } 61 }</code></pre> 62 <p>De tal forma que se indique en el HTML ambas imágenes con la clase a la que se deben:</p> 63 <pre><code><img class="only-on-dark" src="dark-image.png" /> 64 <img class="only-on-light" src="image.png" /></code></pre> 65 <p>Quizá sea preferible también embeberlo directamente en el HTML, de tal forma que:</p> 66 <pre><code><picture> 67 <!-- Usuario prefiere modo claro --> 68 <source srcset="image.png" media="(prefers-color-scheme: light)"/> 69 70 <!-- Usuario prefiere modo oscuro --> 71 <source srcset="dark-image.png" media="(prefers-color-scheme: dark)"/> 72 73 <!-- Usuario no indica preferencia --> 74 <img src="image.png"/> 75 </picture></code></pre> 76 <p>De esta forma evitaríamos la descarga de la variante oculta.</p> 77 </li> 78 <li> 79 <p>Una seguna solución, más eficiente en cuanto a que no necesitaríamos dos versiones de la imagen, sería invertir a través de CSS el color de la imagen original (siempre en el caso de que la inversión no suponga la subversión de la imagen, claro está) en caso de encontrarnos en modo oscuro.</p> 80 <p>De tal forma que mantendríamos una clase, sea por ejemplo <emb>color-invertible</emb>, que identificaría a la imagen:</p> 81 <pre><code><img class="color-invertible" src="image.png"/></code></pre> 82 <p>Para que en el CSS le indicásemos, dentro de <emb>prefers-color-scheme: dark</emb>:</p> 83 <pre><code>@media (prefers-color-scheme: dark) { 84 .color-invertible { 85 filter: invert(100%); 86 } 87 }</code></pre> 88 </li> 89 </ol> 90 </body> 91 </html>