La web monoespaciada

 (owickstrom.github.io)
1 puntos por GN⁺ 2024-08-28 | 1 comentarios | Compartir por WhatsApp

Introducción

Las fuentes monoespaciadas son muy apreciadas por muchas personas. Ofrecen excelente legibilidad, consistencia y sentido estético. Esta página alinea texto y diagramas usando una cuadrícula monoespaciada. Se genera a partir de un documento Markdown simple y se renderiza con CSS y un poco de Javascript. Adopta un diseño responsivo que se reduce en unidades de tamaño de carácter. Busca que los elementos estándar funcionen correctamente. Se renderiza como HTML semántico con estilo de los años 70.

Aspectos básicos

  • El documento usa algunas clases adicionales, pero en su mayor parte es marcado.
  • Como ejemplo, hay párrafos normales y una línea horizontal.
  • Se puede ocultar contenido usando el elemento <details>.

Listas

  • Lista de viñetas común:

    • Bananas
    • Barco de papel
    • Pepino
    • Cohete

  • Lista ordenada:

    • Objetivo
    • Motivación
      • Intrínseca
      • Extrínseca
    • Efectos secundarios

  • Visualización en árbol:

    • /dev/nvme0n1p2
      • usr
        • local
        • share
        • libexec
        • includes
        • bin
        • src
        • lib64
        • lib
      • games
        • solitaire
        • snake
        • tic-tac-toe
      • media
      • run
      • tmp

Tablas

  • Se pueden usar tablas normales que se ajustan automáticamente a la cuadrícula monoespaciada.
  • Ejemplo:
    • Nombre: Boboli Obelisk, tamaño: 1.41m × 1.41m × 4.87m, ubicación: 43°45’50.78”N 11°15’3.34”E
    • Nombre: Pyramid of Khafre, tamaño: 215.25m × 215.25m × 136.4m, ubicación: 29°58’34”N 31°07’51”E

Formularios

  • Ejemplos de botones y campos de entrada:
    • Botones: RESET, SAVE
    • Campos de entrada: nombre, apellido, edad

Cuadrícula

  • Se puede dividir el espacio horizontal de forma uniforme agregando una clase de cuadrícula al contenedor.
  • Se puede llenar el espacio restante configurando flex-grow: 1; en una celda específica.

Arte ASCII

  • Se pueden dibujar figuras con caracteres de caja usando la etiqueta <pre>.

  • Ejemplo:

    ╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

  • Se puede resaltar agregando las etiquetas <figure> y <figcaption>.

  • Ejemplo de transmisión de mensajes:

    ┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │ msg 1   │         │
    └────────►│         │
              │ msg 2   │
              └────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

  • Ejemplo de gráfico:

               Things I Have
                       │
                 ████ Usable
15 │
                 ░░░░ Broken
12 │       ░
9 │  ░     ░
6 │  █     ░     ░
3 │  █     █     █
0 └───▀─────────▀─────────▀──────────▀─────────────
   Socks   Jeans   Shirts  USB Drives

Medios

  • Se admiten objetos multimedia como imágenes y videos.
  • Ejemplo:
    • Habitación de un castillo francés (2024)
    • El centro de la web (1914), Wikimedia

Discusión

  • Fue creado para desarrollar técnicas de CSS y disfrutar el diseño.
  • Sería bueno que lo usaran o dejaran retroalimentación.
  • El código fuente completo está disponible en GitHub: github.com/owickstrom/the-monospace-web
  • Expresa agradecimiento a U.S. Graphics Company.

Resumen de GN⁺

  • Este proyecto es un experimento de diseño web que usa fuentes monoespaciadas.
  • Combina diseño responsivo y HTML semántico para implementar una página web con estilo de los años 70.
  • Puede ayudar a desarrolladores a mejorar sus habilidades de CSS y diseño.
  • Un proyecto con funciones similares es "CSS Zen Garden".

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-08-28
Comentarios en Hacker News

  • Un usuario mantiene una lista de páginas monospace, y actualmente tiene unas 50

    • Renunciar a las fuentes proporcionales reduce la legibilidad
    • El ajuste del espaciado en fuentes proporcionales marca una gran diferencia para reconocer la forma de los grupos de letras
    • En un editor de código, el texto monospace está bien cuando está estructurado y resaltado
    • Se ve especialmente bonito cuando se usa junto con tablas Unicode y arte ASCII

  • Un usuario está buscando una guía de videojuego escrita en fuente monospace que vio hace algunos años

    • Era un texto perfectamente alineado solo mediante la elección de palabras
    • Pregunta si alguien conoce un enlace al respecto

  • Un usuario menciona la filosofía de la "web indie"

    • Excluye los algoritmos y adopta los elementos que hacían buena a la web del pasado
    • Incluye RSS, blogs personalizados, foros, web rings y más
    • También empezó con ello y le parece muy bueno

  • Un usuario comenta que la fuente monospace en sí está bien, pero que el problema son los saltos de línea forzados

    • Con una fuente pequeña, se forma un muro de texto y el modo lectura no funciona
    • Al inclinarlo horizontalmente, es posible que aparezca una barra de desplazamiento
    • Tiene la misma queja sobre las listas de correo técnicas

  • Un usuario está pensando en cambiar la fuente de su sitio web personal a monospace

    • Le gustaría recibir recomendaciones de fuentes monospace con buena legibilidad para textos largos
    • Da puntos extra si la fuente está en Google Fonts

  • Un usuario menciona que monospace se ve bien y es responsiva, pero que no es adecuada para el texto principal

    • Ha leído texto principal en monospace en varios sitios, pero cree que las fuentes proporcionales son mejores

  • Un usuario menciona que el famoso recurso de C64, "VIC article", sigue estando disponible en monospace

    • El principal problema es la impresión
    • Los diagramas usan un espacio bidimensional que requiere una referencia fija
    • Este artículo es el material de referencia técnica más importante del C64
    • El 99% de los efectos de demos técnicas pueden descomponerse en los trucos básicos que se encuentran aquí

  • Un usuario comenta que la web está volviendo a ser como era originalmente

    • Cada vez hay más comunidades satélite de la web temprana
    • Se vuelve cada vez más interesante visitar distintas partes de la web

  • Un usuario cree que la clase CSS tree ul-list debería formar parte del estándar HTML

    • Es muy útil

  • Un usuario menciona que OpenBSD configuró la fuente de consola como "Spleen" desde hace algunos años