Dibujo interactivo con un diseño 100% escrito en CSS y Flexbox partiendo de las medidas orignales de la base de la consola, convertidas de mm a rem. La consola se puede encencer pulsando el led, mostrando el logo de Nintendo con el mítico sonido de encendido (...y de apagado) los botones muestran imágenes del cartucho Zelda: Link's Awakening (Nintendo, 1993) en pantalla.
Link => GAMEBOY Classic.
Para este proyecto me he propuesto profundizar en el aprendizaje de CSS investigando flexbox principalmente y su estructura de contenedores así como las relaciones entre estos.
Tambien he experimentado con texturas, blendmodes, sombreados, gradientes y sistemas de medida.
El dibujo parte de las medidas 148x90mm que son una vez reescalado a rem (1rem = 16px), unos 37x22.5rem. A partir de aquí el dibujo se basó en la observación de un modelo.
A continuacion: un footprint, mi css y un modelo de referencia para los detalles.
Finalmente para la parte de interactividad he decidido mantener el código propuesto para el ejercicio, sin ir mucho más a allá en la investigación del DOM, y sí en CSS para dejarlo más asentado como conocimiento.
Para solucionar la interactividad con el botón on / off y el cambio de imagen he recurrido a un truco que aprendí cuando usaba Arduino con el cual convierto un pulsador en un interruptor guardando el estado anterior y comprandolo con el actual, si el estado actual es ON entonces el resto de botones pueden funcionar tmabien.
En la parte de media, lo que sale por la pantalla y que es la única no dibujada, he decidio no usar vídeos o .gif de momento para mejorar la experiencia de usuario y la interacción fluida con la interfaz. Para ello en su lugar he cargado imagenes estaticas con la resolución real de la pantalla de la GAMEBOY (160x144px) pero con los fondos transparentes para que se vea todo el rato el mismo color de fondo, el del css y su sombreado, y así parezca más ese tipo de pantallan LCD "dot matrix" de 1989.
Si que he añadido el icónico start-up sound al botón de encendido, y los que tuvieron la consola igual también recuerdan el chasquido "chckl!" del speaker al apagar la consola.
El cuerpo de la consola tiene una capa de textura "rough plastic surface", aunque no ha quedado todo lo realista que esperaba.
- Las imágenes se cargan apretar los botones lo que provoca que no se vea nada durante el lapso de tiempo que dura la carga. Una vez cargadas funcionan conrrectamente.
- Solucionado error que se produce al querer mostrar en pantalla letras muy pequeñas, ya que algunos navegadores, por defecto, fuerzan un tamaño mayor que rompia el diseño.
Quedan pendientes las siguientes propuestas para una V2:
- Jugar con las mácaras en CSS, ya que no he conseguido los resultados buscados.
- Añadir más intercatividad.
- Añadir GIF.
- Mejorar el diseño de la página.
Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para obtener más detalles.
Paco Fuentes