dc82cee7ea
|
||
|---|---|---|
| EJEMPLO | ||
| README.md | ||
README.md
Webs ligeras
Aunque hay muchos recursos para crear páginas web desde cero, muchas de ellas requieren de recursos y funciones que "pesan" demasiado (osea, que requieren un rato para cargarse), y algunas webs no cargan bien porque lo que usan es poco eficiente o simplemente está descontinuado. Hay otras formas de hacer una web, y una de las más simples es a través de un poco de magia HTML y formato markdown. Además, podemos hacer un paso más y procesar las imágenes para que sean de muy baja resolución usando difuminado floyd steinberg.
Markdown
Markdown se utiliza para crear texto con un formato más complejo que el texto plano. Te permite añadir negritas, cursiva, código y mucho más. Markdown se puede combinar con HTML (un tipo de formato web) para hacer diseñós simples que sirvan en web.
Usando markdown sin HTML
Para empezar se puede escribir Markdown en muchos editores, incluso es interpretado por sistemas de mensajería instantánea como Telegram. Uno de los programas más interesantes para usarlo es Joplin.
Una vez tenemos dónde escribir, podemos comenzar a probar. Si vas a usar un editor de texto o código normal como Vim, Neovim, emacs, Sublime, Atom o cualquier otro, haz un archivo que tenga la extensión .md, que es la extensión oficial de Markdown.
Hay varios tutoriales muy buenos de Markdown, aquí dejo algunos:
Por si acaso, pondré algunas de las claves:
Para hacer negritas usaremos:
**texto**
De modo que se verá tal que así:
texto
Para hacer cursivas usaremos _esto_ o *esto*, ambas opciones valen.
Para hacer código, lo pondremos entre dos símbolos `mitexto` para un código así, y para una cajita de código usaremos ```mi contenido```, que se verá tal que así:
mi contenido
Usando markdown con HTML
Se pueden mezclar etiquetas de HTML en markdown para enriquecer el contenido. De este modo podemos centrar contenido o crear formatos.
Por ejemplo, para crear un título centrado:
<h1>
<p style="text-align: center;">
Mi título
</p>
</h1>
Nota: Se han añadido los espacios y tabulaciones para que quede una idea más clara, pero no afecta al funcionamiento.
Como se puede comprobar arriba, están las etiquetas <h1> Mi título </h1> que hacen un texto en formato de título con el contenido Mi título. En Markdown esto podría hacerse usando el símbolo #. Osea: # Mi título. Sin embargo, en este caso también queremos centrarlo, de modo que además usamos <p style="text-align: center;"> Mi contenido </p>. En HTML, las etiquetas <p> Contenido </p> Permiten indicarle a un navegador que Contenido es un párrafo de texto. Y, adicionalmente, le podemos decir qué formato tiene. En este caso, le estamos indicando que tiene un estilo centrado.
Para añadir una imagen en Markdown, basta con usar:
Que se parece mucho a lo que se usa para poner enlaces, solo que el enlace va sin la !:
[texto del enlace](enlace.com)
Volviendo a una imagen, si queremos centrarla y reducirla o ampliarla, podemos usar HTML, de este modo:
<img
style="display: block;
margin-left: auto;
margin-right: auto;
width: 50%;"
src="enlace/a_la_imagen.png"
alt="Descripción ALT text">
</img>
En este caso le estamos diciendo que haga un bloque para poner una imagen usando las etiquetas <img>miimagen.png</img>, le estamos diciendo que calcule el espacio exacto entre los márgenes derecho e izquierdo, que utilice la anchura al 50% (a la mitad) del espacio calculado, que el enlace de la imagen src= está entre comillas y la descripción para Alt Text (que ayuda a las personas ciegas a comprender una imagen, o a las personas usando tecnología muy lenta que no carga imágenes bien) con la etiqueta alt=. El resultado sería algo así:
Mientras que sin HTML, sería algo así:
Si se quiere añadir un enlace en un párrafo, como decíamos antes que usabamos con <p> contenido </p>, usaremos el formato de HTML para enlaces:
<a href="enlace.com">texto</a>
Esto es útil cuando queremos, por ejemplo, centrar un texto e incluir un enlace dentro. Por ejemplo:
<p style="text-align: center;">
Esto sería un ejemplo de párrafo con un <a href="https://thebrokenpencil.com/mataameta.html"> enlace </a> a una web.
</p>
Que se vería así:
Esto sería un ejemplo de párrafo con un enlace a una web.
Mientras que sin HTML, usando markdown simple, se vería así:
Esto sería un ejemplo de párrafo con un enlace a una web.
Procesando imágenes para que pesen mucho menos
Aunque se puede cambiar la resolución de una imagen de muchos modos, algo que se usa a veces en redes sociales es el difuminado " floyd steinberg" que también se utiliza para imprimir en impresoras térmicas, porque el resultado es comprensible pero tiene muy baja resolución. Primero se reduce el color a una escala de grises, posteriormente se separa la imagen en pequeños trocitos de información, se simplifican esos trocitos haciendo una reducción de la información que contienen por estadística y finalmente se crea una imagen con esa información simplificada, que pretende reducir mucho el tamaño comprometiendo lo menos posible la calidad de la información. El resultado es una imagen granulada en la que se puede ver la imagen en escala de grises. Por ejemplo:
Imagen sin procesado:
Imagen procesada:
A veces las imágenes son decorativas o sirven para crear descansos de texto o explicaciones. En cualquiera de esos casos, pueden usarse imágenes procesadas para ocupar mucho menos espacio. Aquí hay un enlace con un script de python3 para convertir png normales a la versión ligera.
En mi caso también tengo JPG, así que a veces hago el paso de JPG a PNG primero:
find . -name "*.jpg" -exec mogrify -format png {} \;
Ejemplo
En este enlace hay un ejemplo descargable de una web estática hecha de esta manera. Si estás usando Joplin basta que en la pestaña con el nombre del documento des click botón derecho-> exportar-> html y guardarlo para subirlo en tu servidor o en alguna plataforma que te permita crear webs estáticas, como Gitlab. Si estás usando un archivo y un sistema Linux, puedes usar pandoc:
pandoc -f markdown -t html miweb.md > miweb.html
Y te guardará la versión en HTML.
¿Importa tanto todo esto?
Seguramente a estas alturas te estarás preguntando si realmente es necesario todo esto y si hay un cambio que merezca la pena tanto esfuerzo. Como la mayor parte de los problemas actuales, visto desde una perspectiva individualista la respuesta es: no. Si sólo tú y yo hacemos una web ligera, no hay ninguna diferencia.
¿Entonces?
Bueno, hay mucha más gente con esta misma idea. Que incluso llega más allá y propone formas de comunicarse y hacer webs en internet centrándose en el texto, como si volvieran a un estado de Internet anterior dondo todo era más simple. Un ejemplo son las comunidades trabajando con el protocolo Gémini, como el grupo detrás de Compudanzas o el colectivo de arte 100r. La idea del decrecimiento de todo para mejorar nuestra actual situación climática incluye preocuparse por cómo funciona ahora Internet, incluyendo su infraestructura física y proponer alternativas, en comunidad. Otro enfoque, por ejemplo, propone la idea de usar energías limpias en Internet, o acostumbrarse a la descarga y lectura offline, como en Low Tech Magazine.
Habrás notado si has probado a hacer la web que carga mucho más rápido y mejor que otras webs llenas de recursos, porque no necesita cargar tantas cosas. ¿Cuál es el precio de tener menos estímulos en una web? A lo mejor parece más "aburrido" (a mi personalmente no), pero ¿a qué coste medioambiental?
Gran parte de querer llamar la atención más rápido y más estridentemente tiene un motivo de producción económica detrás. Monetizar nuestra presencia de Internet, arrebatar la atención de las personas o plataformas que estén generando más dinero. Cabe plantearse si ese es el Internet que queremos mantener y desarrollar.
Vale la pena experimentar y dedicar tiempo, al ritmo que cada persona quiera, de estas pequeñas acciones. No sólo por lo que simboliza esa web que se crea, si no por hacer un nodo más en ese pensamiento del decrecimiento, en el que la tecnología tiene sitio, pero no eclipsa todo lo demás.