A year in pixels - Parte 2

Tabla de contenido

En la primera parte hablamos sobre la iniciativa A Year In Pixels y dábamos nuestra opinión sobre los beneficios que podía traer. Ahora veremos una implementación con HTML, CSS y JS usando localStorage.

NOTA: La primera vez no tendrás datos pero al guardar al menos un estado, si recargas, el navegador recordará tus elecciones.

HTML

Para simplificar la lectura de los datos hemos utilizado una tabla (<table>) ya que a fin de cuentas son datos tabulados y esta estructura facilita su comprensión. Y para la construcción del marcado, para su simplificación, hemos usado PUGJS

A cada <td> le hemos añadido dos atributos, [data-day] que nos servirá como id y para almacenar la información y recuperarla correctamente y [data-mood] para dar estilos con CSS acorde a los estados de ánimo.

[data-day] es un id único formado por el día del mes y el número del propio día unidos mediante #, de modo que el id del 1 de Enero será 1#1 y el 28 de Julio 28#7.

La tabla tiene un <caption> que funciona como título y es, además, una buena práctica para evitar que el usuario tenga que deducir lo que la tabla representa mediante el propio contenido. Y esto aplica a todos los usuarios, tengan o no dificultades visuales o cognitivas. Además las celdas que representan la leyenda de colores en el <tfoot> tienen un [title] para mostrar el estado de ánimo que representa cada color.

CSS

En la capa de estilos hay pocas sorpresas.

:root {
  --default-color: 0, 0%, 87%;
}
caption {
  padding: 0.5rem 0.5rem 1.5rem;
  font-size: clamp(1.5rem, 50ch, 5vw);
  font-weight: 700;
}
[data-mood="happy"] {
  background-color: var(--happy-color);
}

JavaScript

El funcionamiento es sencillo. Si al cargarse se intenta recuperar datos que ya existiesen. Si los hay, se rellena cada celda con el estado que le corresponde, y sino, se crea un calendario y se guarda en localStorage.

LocalStorage

localStorage es una API sencilla con la que trabajar aunque puede resultar algo volátil porque los datos almacenados desaparecen si el usuario borra la información guaradada por el navegador. Pero para la demo es perfecta porque su nivel de complejidad es bajo y además, ¿qué usuarios borran con frecuencia sus datos almacenados salvo quienes trabajamos en desarrollo web?. Y por otro lado, al ser información guardada en tu navegador personal, aunque no lo puedas compartir entre dispositivos, resulta de caracter más personal si cabe.

Celdas

Cada celda es responsable de manejar su estado interno. Cada una tendrá un handler con un contador para moverse entre los diferentes estados, lo creará o actualizará dependiendo de si encuentra una coincidencia ya existente usando su id y finalmente guardará la modificación del objeto en el localStorage.

Cosas a mejorar

Se me ocurren un par de cosas que podríamos mejorar en la demo, por si te apetece colaborar conimgo o hacer un fork de la misma:

comments powered by Disqus

Si te ha parecido interesante

Tanto si tienes alguna duda o quieres charlar sobre este tema, como si el contenido o nuestros perfiles te parecen interesantes y crees que pdemos hacer algo juntos, no dudes en ponerte en contacto con nosotros a través de twitter o en el email hola@mamutlove.com