---
title: "Porte — software de planificación de rutas | Logic2b Lab"
description: "Demo técnica: TMS con mapa de rutas en SVG, optimizador 2-opt paso a paso, carga del camión en perspectiva, pedidos y Gantt arrastrable — vanilla JS, cero dependencias."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/porte/
  md: https://logic2b.com/lab/porte/index.md
---

# Porte Lab · Logística y transporte

lab.logic2b.com/porte

Ruta: [Lab](https://logic2b.com/lab) › [Logística y transporte](https://logic2b.com/sistemas/logistica-transporte)

## Cómo se construyó Porte

Demo de software de gestión de transporte (TMS) para una flota de reparto. El mapa se genera en SVG con su trama de calles y dibuja la ruta del vehículo con sus paradas; el camión avanza en directo y la hora de llegada se recalcula. El optimizador reordena las paradas con una heurística 2-opt visible paso a paso y muestra el ahorro en kilómetros y euros antes de aplicarlo. En el panel de planificación la carga se pinta en perspectiva sobre la foto del vehículo: al marcar o desmarcar pedidos se llenan o vacían los huecos y se recalcula el peso. Abajo, la lista de pedidos y un diagrama de Gantt con la línea de «ahora» que avanza y barras que se arrastran para reprogramar. Datos seedeados, sin backend.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

### Qué demuestra

- Mapa urbano generado en SVG a partir de una semilla, con ruta, paradas numeradas y el vehículo avanzando en directo
- Optimizador de paradas con heurística 2-opt animada paso a paso y ahorro en km, minutos y euros antes de aplicarlo
- Línea de tiempo arrastrable que previsualiza la posición del vehículo a cualquier hora del turno
- Carga dibujada en perspectiva sobre la foto del vehículo (homografía CSS) que se llena al marcar pedidos
- Tres tipos de vehículo (furgoneta, rígido y tráiler) con su capacidad y su propia foto
- Diagrama de Gantt con línea de «ahora» en vivo y barras que se arrastran con ajuste a 15 minutos
- Pedidos, mapa y Gantt enlazados: seleccionar en uno resalta en los otros
- Fotos de vehículos generadas con IA (Higgsfield) con fondo transparente, autoalojadas

### Detalles

**Categoría**

Logística y transporte

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

[Logística y transporte](https://logic2b.com/sistemas/logistica-transporte) Logística Dashboard SVG Tiempo real Optimización

### Lo ofrecemos con webs de

[Turismo y agencias de viajes](https://logic2b.com/diseno-web/turismo) [Logística y transporte](https://logic2b.com/diseno-web/logistica) [Agro y agroalimentario](https://logic2b.com/diseno-web/agro)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Estiba** Visualización 3D](https://logic2b.com/lab/estiba) [**Aviso** Mantenimiento y activos](https://logic2b.com/lab/aviso) [**Albarán** Inventario y almacén](https://logic2b.com/lab/albaran)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)