28/03/2022 - 10:30:00 por Fabio Baccaglioni
- 3001 - 22 - En Programación
El domingo me puse a inventar algo ¿Qué tal si hacía una versión Old Style del blog? No me refiero a una página HTML 1.0 sino algo distinto, en modo exclusivamente texto, algo sólo para joder pero por divertirme en mi tiempo de ocio.
Bueno, con esa premisa empecé a buscar cómo podía hacer para pixelar una foto de una nota, la de portada, y transformarla en HTML puro. Una gronchada porque es perder intencionalmente toda compresión posible y hacer un pixel art de mucho más código por pixel 
pero... lo hice!
Aquí les cuento un poco la idea, sé que es delirante y no tiene fin alguno, pero que me entusiasmó para tirar un poco de código al viejo estilo...
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████████████████████████████████████████████
Les suena de algún post? es una imagen que usé hace unos meses en unos Links de Viernes, la reduje a 100 pixeles de ancho y luego la pasé a un ridículo HTML dentro de un PRE, lo estúpido de esto es que una imagen de 3Kb pesa ahora 300Kb pero sólo de código
Genialmente inútil y con pérdida masiva de datos visuales PERO y aquí el pero más ridículo, hasta es probable que a ojos de un sistema perverso como el de Google sea mejor porque "no tiene imágenes pesadas" jejeje.
Es el anti formato, cada "pixel" está conformado por un SPAN que define el color, todo en texto:
<span style="color:rgb(32,51,58);">█</span>
Absolutamente estúpido, pasé de consumir una fracción de byte a 43 Bytes sumado a más ciclos de procesador para interpretar todo eso por CSS y HTML, una genialidad del despropósito en el que vivimos.
Un aumento del consumo de espacio y ancho de banda del 1000% pero todo en modo texto. Podría hacerlo más pequeño todavía, claro, si cada pixel fuese un caracter █ transformando la foto a una monocromática de dos colores no pesaría tanto, pero no se entendería nada.
Aquí la dejé en cien pixeles de ancho nada más, absurdo, pero manejable. Por ahí en 50 pixeles todavía se podría conservar algo de la imagen original y que todavía fuese reconocible, pero eso lo veré más adelante.
El resto quiero que sea texto plano, sin adornos, sin nada especial salvo el HTML mínimo para ser semánticamente correcto. Que cualquier browser pueda interpretarlo. Sin comentarios, sin videos, sin nada más que párrafos y links y esa foto de portada. El resto que se joda.
Obviamente nada de esto estará acá en el blog, lo pondré como un sitio paralelo, no sé, txt.fabio.com.ar ? algo así podría ser, sólo por diversión.
Ya que estoy desperdiciando mi tiempo libre en código inútil ¿Qué cosa querrían que tuviera el blog? Algo que necesiten imperiosamente y que sea "programable" (tengan en cuenta que soy un anciano), acepto ideas.
Si te gustó esta nota podés...
28/03/2022 - 10:52:27
