Catálogo Gamer Estim

Sobre el Proyecto

ESTIM es un proyecto de Lenguaje de Marcas planteado como un sistema completo alrededor de un catálogo de videojuegos, no como una única interfaz visual. La idea central consiste en usar XML como base de datos documental y reutilizar ese mismo modelo en varias capas: validación, presentación directa, transformación XSLT y aplicación web interactiva.

Lo que hace interesante el proyecto no es solo la cantidad de tecnologías que reúne, sino la forma en que se relacionan entre sí. El XML actúa como fuente de verdad y, a partir de él, se obtienen distintas salidas con objetivos diferentes: control de integridad, visualización estructurada, transformación a HTML y una SPA que añade búsqueda, filtros, traducción, moneda y carrito sin duplicar los datos.

Arquitectura del Proyecto

La estructura del proyecto está organizada por capas bien diferenciadas: XML como núcleo de datos, DTD y XSD para validación, CSS para estilización directa del documento, XSLT para generar una salida HTML y una aplicación web construida con HTML, CSS y JavaScript para consumo interactivo del catálogo. A eso se suma una pequeña capa de automatización por consola, pensada para validar, consultar y transformar el documento sin depender del navegador.

Esa separación evita que la lógica de negocio quede mezclada con la representación visual. En términos de portafolio, el valor del proyecto está precisamente en mostrar que un mismo conjunto de datos puede sostener distintos canales de salida con responsabilidades claras y tecnologías adecuadas para cada caso.

XML como Núcleo del Sistema

El catálogo almacena bastante más que un listado básico de títulos. Cada videojuego incorpora título, descripciones en varios idiomas, desarrollador, distribuidor, fecha de lanzamiento, géneros, plataformas, precios por moneda, puntuación, número de reseñas, requisitos mínimos y recomendados, etiquetas y DLCs, lo que convierte el XML en un modelo rico y reutilizable.

También hay un bloque de metadatos del catálogo con título y descripción en varios idiomas, autor y fecha, lo que refuerza la idea de que la internacionalización no se resuelve solo en la interfaz, sino en el propio documento de datos. Esa decisión es importante porque permite que distintas capas consuman el mismo contenido multilingüe sin rehacerlo en cada tecnología.

<xs:element name="catalogo">
  <xs:complexType>
    <xs:sequence>
      <xs:element name="info">
        <xs:complexType>
          <xs:sequence>
            <xs:element name="titulo" minOccurs="1" maxOccurs="unbounded">
              <xs:complexType>
                <xs:simpleContent>
                  <xs:extension base="xs:string">
                    <xs:attribute ref="xml:lang" use="required" />
                  </xs:extension>
                </xs:simpleContent>
              </xs:complexType>
            </xs:element>
          </xs:sequence>
        </xs:complexType>
      </xs:element>
    </xs:sequence>
  </xs:complexType>
</xs:element>

<xs:element name="videojuego">
  <xs:complexType>
    <xs:sequence>
      <xs:element name="titulo" type="xs:string" />
      <xs:element name="descripcion" minOccurs="1" maxOccurs="unbounded">
        <xs:complexType>
          <xs:simpleContent>
            <xs:extension base="xs:string">
              <xs:attribute ref="xml:lang" use="required" />
            </xs:extension>
          </xs:simpleContent>
        </xs:complexType>
      </xs:element>
      <xs:element name="desarrollador" type="xs:string" />
      <xs:element name="distribuidor" type="xs:string" />
      <xs:element name="lanzamiento" type="xs:date" />
    </xs:sequence>
  </xs:complexType>
</xs:element>

const response = await fetch('cataleg.xml');
const text = await response.text();
const xml = new DOMParser().parseFromString(text, 'text/xml');

const nodes = Array.from(xml.getElementsByTagName('juego:videojuego'));
state.games = nodes.map(v => {
  const id = v.getAttribute('id');
  const g = {
    id,
    title: getTagText(v, 'titulo'),
    dev: getTagText(v, 'desarrollador'),
    release: getTagText(v, 'lanzamiento'),
    genres: Array.from(v.getElementsByTagName('juego:genero')).map(x => x.textContent),
    platforms: Array.from(v.getElementsByTagName('juego:plataforma')).map(x => x.textContent)
  };
});

Validación y Namespaces

La validación está planteada en dos niveles: una validación estructural con DTD y una validación más estricta con XSD. Ese segundo nivel introduce tipado fuerte, restricciones numéricas, enumeraciones y patrones, algo especialmente útil en un catálogo con identificadores, fechas, monedas, plataformas, puntuaciones y requisitos técnicos.

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
    targetNamespace="http://estim.com/cataleg"
    xmlns:catalogo="http://estim.com/cataleg"
    xmlns:juego="http://estim.com/videojuego"
    elementFormDefault="qualified">

    <xs:import namespace="http://estim.com/videojuego" schemaLocation="videojuego.xsd" />
</xs:schema>

Estilización Directa del XML

Uno de los aspectos menos habituales del proyecto es la visualización directa del XML con CSS. En lugar de transformar primero el documento a HTML, se aprovecha que el navegador puede aplicar estilos a etiquetas XML si se definen correctamente los namespaces y el comportamiento visual de cada nodo.

La hoja cataleg.css convierte una estructura documental en una interfaz legible con jerarquía visual, color, bloques, etiquetas y comportamiento responsive. Eso tiene interés técnico porque demuestra una capa de presentación poco común, pero muy alineada con los objetivos de trabajar sobre el propio marcado, no solo sobre HTML convencional.

@namespace catalogo "http://estim.com/cataleg";
@namespace juego "http://estim.com/videojuego";
@namespace xml "http://www.w3.org/XML/1998/namespace";

catalogo|titulo:not([xml|lang="es"]),
catalogo|descripcion:not([xml|lang="es"]),
juego|descripcion:not([xml|lang="es"]),
juego|precio:not([moneda="EUR"]) {
  display: none;
}

Ese fragmento resume bien dos decisiones importantes: usar selectores con namespaces y filtrar visualmente idioma y moneda desde CSS. No es una solución para una aplicación dinámica, pero sí una demostración muy clara de cómo el mismo XML puede tener una presentación útil incluso sin pasar por JavaScript ni por una transformación previa.

&>juego|descripcion {
  order: 4;
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  visibility: hidden;
}

&>juego|requisitos {
  order: 8;
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  visibility: hidden;
}

Transformación XSLT

La capa XSLT introduce una segunda estrategia de salida a partir del mismo catálogo. Frente a la visualización directa del XML, aquí la idea ya no es vestir el documento original, sino transformarlo en una representación HTML más convencional y distribuible.

El proyecto incluye tanto el motor XSLT como un HTML generado a partir de esa transformación (cataleg.html), y además contempla una salida orientada a impresión. Eso convierte el catálogo en un documento reutilizable: el mismo dato puede verse como XML estilizado, como página HTML transformada o como base de una SPA.

XSL_FILE="$DIR/cataleg.xsl"
HTML_OUTPUT="$DIR/cataleg.html"

if xsltproc -o "$HTML_OUTPUT" "$XSL_FILE" "$XML_FILE" 2>&1; then
  echo -e "${VERDE}✓ Transformación completada${NC}"
  echo -e "${VERDE} Archivo generado: $HTML_OUTPUT${NC}"
fi

Aplicación Web Interactiva

La SPA es la capa donde el proyecto se acerca más a una aplicación real. El script app.js carga el XML, lo parsea en el navegador y construye dinámicamente las tarjetas, los filtros, los selectores y la vista general del catálogo sin depender de un listado HTML estático.

La lógica está organizada alrededor de un pequeño estado global y de funciones con responsabilidades bastante claras: carga de datos, parseo de requisitos, procesado del catálogo, actualización de la vista y renderizado. Esa organización ayuda a que la aplicación no sea solo una suma de eventos sueltos, sino una capa coherente sobre el modelo XML.

async function loadXML() {
  const response = await fetch('cataleg.xml');
  const text = await response.text();
  const xml = new DOMParser().parseFromString(text, 'text/xml');
}

function processGames() {
  let raw = [...state.games];

  if (state.query) {
    const q = state.query.toLowerCase();
    raw = raw.filter(g =>
      g.title.toLowerCase().includes(q) ||
      g.dev.toLowerCase().includes(q)
    );
  }

  if (state.activeFilters.genres.length > 0) {
    raw = raw.filter(g => g.genres.some(x => state.activeFilters.genres.includes(x)));
  }

  raw.sort((a, b) => {
    if (state.sortBy === 'precio') return a.prices[state.currency] - b.prices[state.currency];
    if (state.sortBy === 'puntuacion') return b.score - a.score;
    if (state.sortBy === 'ano') return b.release.localeCompare(a.release);
    return a.title.localeCompare(b.title);
  });
}

const currentTitle = state.catalogInfo.titles[state.lang] || "Estim";
document.title = currentTitle;
document.getElementById('cat-title').textContent = currentTitle;
document.getElementById('cat-desc').textContent = state.catalogInfo.descs[state.lang];
document.getElementById('author').textContent = state.catalogInfo.author;
document.getElementById('date').textContent = state.catalogInfo.date;
document.getElementById('search-input').placeholder = t('search');

La aplicación incorpora además funciones propias de un catálogo comercial: filtrado por géneros, plataformas y etiquetas, ordenación por distintos criterios, cambio de moneda, traducción en tiempo real y un carrito de compra con persistencia. En conjunto, esta capa convierte un ejercicio de marcas en una interfaz navegable que demuestra separación entre datos, presentación y lógica de interacción.

Scripts y Automatización

El archivo xml_scarlet.sh amplía el proyecto hacia un contexto más técnico y menos dependiente del navegador. No es un simple script accesorio: agrupa validación con DTD y XSD, consultas XPath, conteos, sumas, extracción de información y ejecución de la transformación XSLT desde un menú de terminal.

if xmllint --valid --noout "$XML_FILE" 2>&1; then
  echo -e "${VERDE}✓ El XML es válido según el DTD${NC}"
fi

if xmllint --schema "$XSD_FILE" --noout "$XML_FILE" 2>&1; then
  echo -e "${VERDE}✓ El XML es válido según el XSD${NC}"
fi

Alcance Técnico

ESTIM demuestra varias cosas a la vez dentro de un mismo proyecto. Demuestra modelado de datos con XML, validación con varios niveles de exigencia, uso correcto de namespaces, técnicas de presentación no habituales como el CSS directo sobre XML, transformación documental con XSLT y consumo del catálogo desde una capa web interactiva.

Pero, sobre todo, demuestra una idea que vale mucho en un portafolio técnico: el proyecto no depende de una única interfaz ni de un único formato de salida, y precisamente por eso funciona bien como pieza de muestra para demostrar estructura, control, reutilización y criterio de diseño técnico en un mismo desarrollo.