Colección de diseños de relojes digitales

 (clocks.dev)
1 puntos por GN⁺ 23 시간 전 | 1 comentarios | Compartir por WhatsApp
  • Clocks.dev es un sitio donde se pueden explorar en un solo lugar diseños de relojes digitales que muestran la hora y la fecha de distintas maneras
  • Permite comparar diferentes formas de representación del tiempo, como figuras geométricas, arreglos numéricos, combinaciones de palabras, manecillas, diales circulares y LCD
  • Se pueden revisar los diseños según All time, This week y Newest, y también crear directamente un nuevo diseño de reloj
  • Incluye relojes como number-field, word-field, binary-signal, swiss-railway y corner-date, cuyos nombres ya dejan ver su forma de representación o estilo
  • Todos los relojes publicados son de código abierto, así que además de apreciar los diseños, también sirven como referencia para ideas de implementación

Explorando distintas formas de mostrar el tiempo

  • Clocks.dev reúne y ofrece múltiples diseños de relojes digitales
  • La lista se puede explorar con los filtros All time, This week y Newest, y se puede crear un reloj nuevo en Create new clock

  • Formas y manecillas

  • Números y palabras

  • Fecha e información adicional

    • day-mood: muestra la franja horaria y la temperatura como una oración, por ejemplo It’s slow evening o’clock 22°
    • corner-date, orbit-date: muestran la fecha junto con la hora
    • reloj de color: conecta los 86,400 segundos del día con uno de 16,777,216 colores y muestra el código de color actual
    • Galactic Standard Time: presenta la hora junto con información de zona y pista
    • Digital Quartz LCD: estilo LCD digital que incluye 1983, el día de la semana, 24H y marcas de alarma, señal, luz e inicio

  • Conceptos individuales

Código abierto y creador

  • Todos los relojes publicados se ofrecen como código abierto
  • El sitio fue creado por Lev Miseri

Lecturas relacionadas

1 comentarios

 
GN⁺ 23 시간 전
Opiniones de Hacker News

  • Por diversión hice un reloj digital compuesto por relojes analógicos: https://mikespeed.com/clock

  • Antes del boom de la IA, hice por mi cuenta todos estos watch faces experimentales con SVG y JavaScript.
    Tal vez no sean obras extraordinarias, pero como diseñador me enorgullece haberlos terminado aprendiendo por mi cuenta lo básico de programación: https://watchface.netlify.app/
    También escribí sobre el proceso de creación: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

    • Ver este trabajo me dan ganas de volver a meterme en hardware y fabricación de PCB para crear algo que pueda colgar en la pared.
      Sería aún mejor si en la página donde funciona el watch face se pudiera ingresar la hora manualmente para ver cómo se ve.
    • Entré para hablar de los diseños de Tokyoflash, y me da gusto verlos mencionados aquí.

  • Ya va siendo momento de reunir a los aficionados a los relojes de HN y armar un webring a la antigua.
    Lock Screen se parece a mi reloj Filling Digit, que indica los segundos llenando con agua los números huecos desde abajo.
    El bastante divertido Alphabetical Clock también fue tema en HN, y el concepto de webring se puede ver en Wikipedia.

  • Intenté recrear el Voutilainen Vingt-8 ISO con Svelte, que usé por primera vez: https://clocks.dev/clock/3b254b2789ec

    • Es un concepto nuevo para mí, pero creo que me acostumbraría rápido; además, me dieron ganas de tener un reloj de pulsera así.

  • En Chrome 150.0.7871.115 y Windows, aproximadamente desde dos tercios de la página desaparece la barra de desplazamiento y ya no se puede seguir haciendo scroll.

    • Ya lo corregí, pero el problema de rendimiento más de fondo requiere más investigación.
    • Creo que tocar el comportamiento de scroll predeterminado del navegador es un gran tabú en desarrollo web.
    • El mismo problema ocurre también en Firefox 152.0.5 en Windows 11.

  • Number Field me parece la mejor forma de representar espacialmente un reloj numérico.
    Para ser perfecto habría que pasarlo a formato de 24 horas, pero es un cambio menor; gracias a su estructura de 12 columnas, es fácil captar de un vistazo la hora aproximada.

  • Hice un reloj Soroban usando un ábaco japonés, pero no pude agregarlo a la colección porque usa animaciones basadas en CSS: https://soroban-clock.netlify.app

  • También vale la pena ver 12 o’clocks de John Maeda.
    Su obra de 1996 me hizo ver de otra manera cómo se puede expresar el tiempo gráficamente, y también puede consultarse en la colección del MoMA.
    En especial, por las obras con movimiento suave, terminé odiando los segunderos que se detienen cada segundo, así que cambié el mecanismo de todos los relojes de mi casa por uno de segundero continuo.

  • El reloj binario parece tratar el lugar a la izquierda del 8 como la decena, no como el 16 habitual.
    Por eso las 10 se muestran como 00010000 y no como 1010, y las 23 como 00100011, lo que se ve raro porque interpretado como binario da 35.

    • No convierte la hora en un solo número binario, sino que transforma cada dígito decimal en 4 bits.
      Es decir: 23 → 2 3 → 0010 0011 → 00100011.

  • En algunos relojes se notan detalles ligeramente desajustados.
    En el Number Field naranja parece difícil distinguir entre 12:10 y 10:12, y en Word Field se muestran las letras no usadas como X, lo que reduce la sensación de misterio de cuando aparecen las palabras en el Word Clock original.
    En Temporal Exposure, la franja del área borrosa está desplazada respecto del centro, y en Figure Hands el texto sobresale del área de la figura.

    • En Number Field, la hora siempre queda solo en la fila superior, así que 12:10 y 10:12 se muestran de forma distinta.
    • Si te refieres a Figure Hands, hay bastante margen para mejorar el estilo general.
      Creo que se vería mejor usando dos colores y tamaños diferentes, además de una tipografía más adecuada.