Cargando DevLog #1

SYS > 0%
DevLog #1 — Cómo nació MISide: Pacify Mode

DevLog #1 —
Cómo nació MISide: Pacify Mode

Este es el primer DevLog oficial de MISide: Pacify Mode. Un espacio para documentar cómo se construyó este fan site desde cero — las decisiones que tomé, los problemas que encontré, y todo lo que viene a continuación.

El origen: ¿por qué este sitio?

Todo empezó con una pregunta simple: ¿por qué no existe un fan site decente de MiSide en español? El juego de Aihasto explotó en popularidad a finales de 2024 y siguió creciendo en 2025, pero la comunidad hispanohablante no tenía un lugar centralizado con lore, guías, galería y banda sonora — todo en el mismo sitio, bien presentado.

Así nació la idea: construir el fan site que yo hubiera querido encontrar cuando empecé a jugar. Sin anuncios, sin clutter — solo el universo de Mita, bien contado.

Mita y sus distintas apariencias — la inspiración visual detrás del sitio
Los distintos aspectos de Mita fueron la inspiración visual del sitio

Las primeras decisiones de diseño

Desde el principio tuve claro lo que quería lograr visualmente: un sitio que se sintiera parte del universo de MiSide, no solo un contenedor de información. El juego tiene una estética muy particular — lo digital corrupto, el mundo que parece amigable pero esconde algo más oscuro. Quería que el diseño lo reflejara.

Las tres reglas de diseño que me puse desde el día uno:

1. Oscuro pero vivo — negro profundo con acentos en rosa y cian, nunca plano.
2. Tipografía con personalidad — Outfit para los textos, Share Tech Mono para los elementos de interfaz.
3. Cada página se siente como una sección diferente del "sistema Mita".
Mita con ropa de escuela — referencia visual para la paleta de colores
La paleta rosa-oscuro-cian viene directamente de la estética del juego

La stack técnica

Mantuve todo lo más simple y portable posible. Sin frameworks, sin bundlers, sin dependencias de npm. HTML, CSS y JavaScript vanilla — porque quería que cualquiera pudiera abrir el código y entenderlo sin instalar nada.

HTML5 semántico CSS Variables JavaScript vanilla Google Fonts Service Worker (PWA) Open Graph tags Web Animations API IntersectionObserver

El preloader, el sistema de transiciones entre páginas, el reproductor de música persistente, el banner legal, la instalación como PWA — todo está escrito a mano, sin librerías externas.

Los retos más grandes

Reto 01
Música persistente entre páginas
El reproductor de fondo debía seguir sonando al navegar — sin interrupciones. La solución fue usar sessionStorage para guardar el track actual, el tiempo de reproducción y el estado antes de cada navegación y restaurarlo inmediatamente al cargar la nueva página.
Reto 02
Preloader personalizado por página
Cada página tiene su propio texto en el preloader (el HUD superior e inferior), pero el JS del preloader es uno solo compartido. Tuve que hacer que el script detectara el contexto de cada página y ajustara los textos dinámicamente.
Reto 03
Codificación UTF-8 en todos los archivos
Algunos procesos de edición introdujeron caracteres mal codificados — acentos rotos, símbolos duplicados. Tuvimos que revisar y limpiar cada archivo HTML para restaurar todos los textos en español correctamente.
Reto 04
Estructura consistente a través de 10+ páginas
Con páginas independientes (sin componentes reutilizables), mantener el navbar, el footer y los scripts consistentes requirió disciplina manual. Cada nueva página heredaba la estructura base y la extendía.
Mita con ropa navideña — distintas versiones del sitio a lo largo del tiempo
El sitio ha pasado por múltiples versiones, como Mita con sus distintos atuendos

El estado actual del sitio

A la fecha de este DevLog, MISide: Pacify Mode tiene las siguientes páginas activas:

¿Qué viene a continuación?

El blog es solo el comienzo de la siguiente fase del sitio. Aquí está el roadmap de lo que viene próximamente:

Mita con ropa de vampiresa — el lado más oscuro del sitio está por llegar
El lado más oscuro y profundo del sitio está por llegar
📝

¿Cada cuánto saldrán los DevLogs?

Sin fecha fija. Los DevLogs saldrán cuando haya algo significativo que documentar — una nueva sección, un rediseño mayor, o un problema técnico interesante que valga la pena compartir. Calidad sobre cantidad.

Compartir 𝕏 / Twitter