En el capítulo anterior dejamos bastante elegante la plantilla Django para mostrar la página específica de cada videojuego, sin embargo, hablando de estilos, le falta algo de vida; un poco de diseño no le vendría mal.
La plantilla original presentaba la información de forma directa, sin apenas separación visual o énfasis jerárquico. Tenía los siguientes componentes:
- Una imagen a la izquierda del contenido.
- Un bloque con:
- Nombre del juego (
<h2>) - Descripción, precio, género y plataformas como párrafos simples.
- Nombre del juego (
- Todo colocado dentro de un
divcon clases básicas de Bootstrap (row,container,p-3).
Esto era suficiente para mostrar los datos, pero faltaba una clara estructura visual, diferenciación jerárquica entre elementos importantes (como el precio o el nombre del juego), y no había botones de acción para guiar al usuario.
{% extends 'main.html' %} {% load static %} {% block content %}
<div class="p-3">
<div class="container">
<div class="row mt-3 align-items-center">
<!-- Logo a la izquierda -->
<div class="col-md-4 mb-3 text-center">
<img src="{% static 'img/logo.png' %}" class="img-fluid rounded" alt="Logo del juego" />
</div>
<!-- Información del juego a la derecha -->
<div class="col-md-8 mb-3">
<h2>{{ datos_plantilla.juego.nombre }}</h2>
<hr />
<p>
<strong>Descripción:</strong> {{ datos_plantilla.juego.descripcion }}
</p>
<p><strong>Precio:</strong> ${{ datos_plantilla.juego.precio }}</p>
<p><strong>Género:</strong> {{ datos_plantilla.juego.genero }}</p>
<p>
<strong>Plataformas:</strong>
{% for plataforma in datos_plantilla.juego.plataformas %}
<span>{{ plataforma }}</span>{% if not forloop.last %}, {% endif %}
{% endfor %}
</p>
</div>
</div>
</div>
</div>
{% endblock content %}
Nueva plantilla: diseño de página de producto
La nueva versión rediseña la presentación para simular la experiencia de un sitio de comercio electrónico. Los cambios clave son:
Distribución más espaciosa y profesional
<div class="container py-5"> <div class="row g-4 align-items-start">
- Se utilizan
py-5yg-4para dar más aire visual y espacio entre columnas. - Esto mejora la legibilidad y la percepción de calidad del diseño.
Presentación de imagen central y destacada
<img src="{% static 'img/logo.png' %}" class="img-fluid rounded shadow-sm" ... />- Se centra la imagen y se le aplica una sombra suave (
shadow-sm) y bordes redondeados. - Esto ayuda a que el producto (juego) se perciba como un elemento visual principal, similar a una ficha de producto en Amazon o Steam.
Tipografía jerárquica para el título y la descripción
<h1 class="display-5 mb-3">...</h1> <p class="lead">...</p>
- Se usan clases como
display-5para títulos yleadpara la descripción, lo que mejora la jerarquía visual y la lectura.
Bloque destacado de precio
<h3 class="text-success fw-bold">${{ datos_plantilla.juego.precio }}</h3>
<small class="text-muted">Impuestos incluidos</small>- Se separa el precio en un bloque con estilos destacados en verde (
text-success), transmitiendo el mensaje de que se trata de un elemento importante y positivo. - Añadir "Impuestos incluidos" transmite claridad al usuario, como haría una tienda real.
Presentación visual de plataformas
<span class="badge bg-dark me-1">{{ plataforma }}</span>- En lugar de una lista separada por comas, las plataformas se muestran como badges oscuros, lo que ayuda a identificarlas rápidamente.
- También mejora el diseño y reduce la carga cognitiva.
Botones de acción: guía de usuario
<div class="d-flex flex-column flex-sm-row gap-2"> <button class="btn btn-success btn-lg">Comprar ahora</button> <button class="btn btn-outline-secondary btn-lg">Agregar a favoritos</button> </div>
- Se agregan botones claros de interacción, algo esencial en cualquier interfaz moderna de catálogo.
- La disposición vertical en pantallas pequeñas y horizontal en grandes mejora la adaptabilidad y accesibilidad.
El resultado por el momento es este. Por supuesto, los botones aún no están implementados. Hay que trabajar para crear la base de datos, el sistema de cuentas de usuario, carrito de compra, etc.
