Plataforma responsive para gestión de la cadena de suministro · Desarrollo Blazor
“Tu logística, simple y completa en un solo lugar”
LogiQ es una plataforma de gestión integral de la cadena de suministro, creada para cubrir todas las fases y procesos de un negocio desde el punto de vista logístico. Un único espacio que permite gestionar cada etapa: desde la creación de pedidos hasta la gestión de clientes, proveedores e incidencias.
Con un dashboard intuitivo que ayuda a ahorrar tiempo y costes de gestión, y un panel de informes que ofrece seguimiento en tiempo real, LogiQ se convierte en una herramienta potente para la optimización de cualquier negocio. Su interfaz responsive garantiza un control total en cualquier dispositivo o situación.
Interfaz 100% responsive
Es imprescindible que el cliente tenga el control absoluto de sus procesos logísticos, independientemente de las circunstancias de uso o del dispositivo. Para garantizar la mejor experiencia en todo momento, se ha desarrollado un diseño responsive basado en breakpoints para smartphone, tablet y desktop.
Theming Multi-Brand
El proyecto cuenta con un sistema de diseño multi-cliente, que permite tematizar la interfaz de forma instantánea. Esto facilita la realización de pruebas y demos con clientes de manera ágil y ayuda a reducir tiempos y costes en la implementación de nuevos proyectos.
Además, el mantenimiento y la escalabilidad para el equipo de diseño son muy sencillos: cada cliente dispone de un modo con sus propias variables, lo que aporta flexibilidad para gestionar casos particulares y agilidad en la incorporación de nuevos clientes.
Layout flexible y tablas optimizadas
Gracias al sistema de layout flexible, el cliente tiene control total sobre las secciones y componentes colapsables, lo que permite optimizar el espacio disponible en pantalla y dar prioridad a la información más relevante en cada momento.
Además, todas las tablas del proyecto cuentan con scroll horizontal y columnas fijadas (frozen) para garantizar la visibilidad total de los datos en cualquier breakpoint y asegurar la accesibilidad de las acciones sobre las filas.
+ Práctica en HTML5 & CSS
He realizado el desarrollo front de algunas páginas del proyecto para aplicar conocimientos adquiridos en el curso de Desarrollo Front-End, previo al Máster en Full Stack Developer. Durante las prácticas he aprendido el uso de las etiquetas fundamentales para cualquier dashboard, como listas, tablas o formularios. Te invito a echar un vistazo a mi GitHub para conocer más sobre esta parte del proyecto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LogiQ - Iniciar sesión</title>
<meta name="author" content="Ksenia Konnova">
<meta name="description" content="LogiQ es una plataforma digital para la gestión de la cadena de suministro, diseñada para optimizar procesos logísticos y mejorar la eficiencia operativa.">
<meta name="keywords" content="LogiQ, logística, cadena de suministro, gestión logística, plataforma digital, gestión de almacén">
<meta property="og:title" content="LogiQ - gestión de cadena de suministro" />
<meta property="og:description" content="LogiQ es una plataforma digital para optimizar procesos logísticos y mejorar la eficiencia operativa." />
<meta property="og:image" content="https://drive.google.com/file/d/1wcHiLobLjmnjs577xki7sExADkIkrkjz/view?usp=drive_link" />
<meta property="og:url" content="https://www.behance.net/kseniakonnova" />
<meta property="og:type" content="website" />
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
</head>
<body id="body-login">
<main id="main-login">
<div class="content">
<div class="content-login">
<img src="logo-large.svg" alt="LogiQ Logo" id="logo">
<h1>LogiQ</h1>
<p class="title_medium">Plataforma de gestión integral de tu cadena de suministro</p>
</div>
</div>
<div class="content">
<div class="content-login">
<form class="form">
<h3>Iniciar sesión</h3>
<fieldset class="fieldset">
<div class="input">
<div class="label">
<label for="email" class="label_medium">Correo electrónico</label>
</div>
<input type="email" class="text-input no-icon" name="email" id="email" placeholder="Introduce tu correo" required>
</div>
<div class="input">
<div class="label">
<label for="password" class="label_medium">Contraseña</label>
</div>
<input type="password" class="text-input no-icon" name="password" id="password" class="text-input" placeholder="Introduce tu contraseña" required>
</div>
<a href="forgot-password.html" class="a primary">
<span class="label_large">¿Has olvidado tu contraseña?</span>
</a>
<div class="check-radio">
<input type="checkbox" class="checkbox" name="remember" id="remember">
<label for="remember" class="body_large">Mantener sesión abierta</label>
</div>
<button type="submit" class="button primary solid" style="width: 100%;">
<span class="material-symbols-outlined">check</span>
<span class="label_large">Aceptar</span>
</button>
</fieldset>
<fieldset class="fieldset">
<span class="body-medium--subtle">¿Aún no tienes cuenta en LogiQ?</span>
<a href ="create-account.html" class="a primary">
<span class="label_large">Crear cuenta</span>
</a>
</fieldset>
</form>
</div>
</div>
</main>
</body>
</html>
Te invito a seguir explorando
Te invito a revisar el archivo completo del design system, donde se incluyen los componentes interactivos, las variables y los diferentes modos. También puedes visitar el proyecto LogiQ para descubrir cómo este sistema se aplica en un diseño totalmente responsive. ¡Y ahora, avancemos al siguiente proyecto!