WebApp LK World Control News: Construyendo un dashboard global de monitorización de noticias
- 14 mar
- 18 Min. de lectura
En muchas situaciones necesitamos seguir información global en tiempo real: noticias internacionales, conflictos, mercados, webcams, mapas o canales de televisión en directo.
Profesionales que trabajan en contextos internacionales —operaciones, logística, análisis geopolítico o gestión de proyectos— suelen consultar múltiples fuentes abiertas para mantenerse informados.
El problema es que esa información suele estar fragmentada en decenas de páginas web diferentes.
Un mapa en una pestaña, un canal de televisión en otra, varios periódicos en otra más… y al final se pierde una visión global de lo que está ocurriendo.
Para resolver este problema hemos desarrollado en Lozkorp una pequeña aplicación web llamada:
LK World Control News
Un dashboard de monitorización global que reúne en una sola pantalla diferentes fuentes de información:
mapas interactivos
noticias internacionales
canales de televisión en directo
webcams de diferentes ciudades del mundo
relojes internacionales
eventos y countdowns
Todo ello dentro de una aplicación web ligera, configurable y fácilmente ampliable.
Además, este proyecto es especialmente interesante porque está construido con una arquitectura extremadamente sencilla:
HTML
CSS
JavaScript
JSON
Sin frameworks, sin backend y sin dependencias complejas. Esto hace que el sistema sea muy fácil de mantener, modificar y escalar.
La aplicación puede verse funcionando aquí:
En este artículo vamos a explicar cómo está construida la aplicación, cómo funciona y cómo puede ampliarse fácilmente. Al final del artículo hay un enlace desde donde puedes descargar la aplicación para que puedas modificarla tu mismo y adaptarla a tus necesidades.
El concepto: una sala de control informativa
La idea detrás de LK World Control News es reproducir el concepto de una control room informativa.
En muchos entornos profesionales —centros de operaciones, trading rooms, centros de crisis o salas de control industriales— la información se organiza en paneles visuales simultáneos que permiten observar diferentes aspectos de una situación al mismo tiempo.
En lugar de consultar una única fuente de información, se combinan múltiples vistas:
mapas operativos
canales de noticias
datos en tiempo real
cámaras
indicadores clave
De esta forma se obtiene una visión global y contextualizada de lo que está ocurriendo.
Este mismo principio puede aplicarse al seguimiento de la actualidad internacional.
La mayoría de las veces consumimos información de forma lineal: abrimos un periódico, vemos un canal de televisión o revisamos redes sociales.
Sin embargo, cuando se quiere entender mejor el contexto global, resulta mucho más útil observar varias fuentes simultáneamente.
Por ejemplo:
un mapa de conflictos
titulares de noticias internacionales
un canal de noticias en directo
cámaras de diferentes ciudades
indicadores de mercado
Cuando todo esto aparece en una misma pantalla se obtiene algo parecido a una pequeña sala de control personal.
Ese es precisamente el objetivo de esta aplicación.
Crear un dashboard global de monitorización que permita observar diferentes fuentes de información al mismo tiempo y que pueda utilizarse como panel de referencia.
Además, el diseño visual del dashboard está inspirado en interfaces utilizadas en:
salas de operaciones financieras
centros de control industrial
interfaces de monitorización técnica
paneles de trading o análisis de datos
Por eso se ha optado por una estética oscura, con colores fríos y paneles modulares que recuerdan a una consola de supervisión.
El objetivo no es solo mostrar información, sino hacerlo de una forma que facilite la observación continua y el análisis rápido del contexto global.
Estructura del dashboard
El dashboard de LK World Control News está diseñado como un panel modular dividido en varias zonas, donde cada área muestra un tipo diferente de información.
La interfaz se organiza utilizando CSS Grid, lo que permite construir un layout flexible y fácilmente redimensionable.
La pantalla se divide en tres grandes zonas:
Cabecera superior
Panel principal de información
Barra inferior de enlaces
Esto crea una estructura muy clara que recuerda a los paneles utilizados en centros de control y sistemas de monitorización.
Cabecera (Header)
La cabecera muestra información general del sistema: nombre de la aplicación, estado del sistema, reloj en tiempo real, fecha actual y selector de perfil de configuración
El objetivo de esta zona es proporcionar información contextual rápida sobre el dashboard.
Panel principal
El área principal es donde aparece el dashboard de monitorización.
Este panel se divide en dos columnas principales:
columna izquierda
columna derecha
Cada columna se subdivide en varios paneles independientes.
Visualmente la estructura se puede representar así:
Cada uno de estos bloques es un panel independiente que puede mostrar diferentes tipos de contenido.
Por ejemplo:
Panel Mapas
OpenStreetMap, Liveuamap (conflictos), Earth Nullschool (clima)
Panel Noticias
Links de periódicos
Panel News Live
canales de televisión en directo
Panel Webcams
cámaras en directo de diferentes ciudades
Paneles con pestañas
Cada panel puede contener múltiples pestañas. Esto permite mostrar varias fuentes dentro del mismo espacio.
Por ejemplo, el panel de mapas puede alternar entre:
mapa base mundial
mapa humanitario
mapa de conflictos
mapa climático
El usuario simplemente cambia entre pestañas para visualizar cada fuente. Este sistema permite multiplicar el contenido disponible sin saturar la interfaz.
Paneles redimensionables
Otro elemento importante del diseño es que los paneles pueden redimensionarse dinámicamente.
Entre los paneles existen separadores que permiten modificar el tamaño de cada área arrastrando con el ratón.
La interfaz se comporta de forma similar a las herramientas profesionales de análisis o trading.
Un panel diseñado para escalar
La clave del diseño del dashboard es que cada panel es independiente.
Esto significa que se pueden añadir fácilmente nuevos módulos como:
datos de mercados
seguimiento de vuelos
actividad sísmica
seguimiento marítimo
indicadores económicos
El sistema está pensado para evolucionar y convertirse en una plataforma de monitorización completamente personalizable.
Arquitectura del proyecto
Uno de los objetivos principales de LK World Control News era construir una herramienta útil sin depender de frameworks complejos ni de infraestructuras pesadas.
Por eso la aplicación se ha desarrollado siguiendo un principio muy simple:
máxima funcionalidad con la mínima complejidad técnica.
El resultado es una aplicación basada únicamente en tecnologías web estándar:
HTML para la estructura
CSS para el diseño visual
JavaScript para la lógica de funcionamiento
JSON para la configuración
Esto permite que la aplicación funcione simplemente sirviendo archivos estáticos desde cualquier servidor web.
No requiere:
backend
base de datos
compilación
frameworks externos
Cualquier servidor web sencillo —incluso un hosting estático— es suficiente para ejecutarla.
Estructura de archivos
Cada archivo cumple una función muy concreta dentro del sistema.
Archivo | Función |
index.html | estructura del dashboard |
styles.css | diseño visual de la interfaz |
app.js | lógica de la aplicación |
config.json | configuración del contenido |
Separación entre lógica y contenido
Uno de los aspectos más importantes del diseño es la separación entre:
la lógica de la aplicación y el contenido que se muestra
Toda la lógica está implementada en el archivo:
app.jsMientras que todo el contenido del dashboard —mapas, canales, webcams, RSS, enlaces— está definido en:
config.jsonEsto significa que es posible modificar completamente el contenido del dashboard sin tocar el código JavaScript.
Por ejemplo:
añadir nuevos canales de noticias
cambiar webcams
modificar paneles
crear nuevos perfiles de configuración
Todo esto se realiza únicamente editando el archivo JSON.
Flujo de funcionamiento de la aplicación
El proceso de arranque de la aplicación sigue una secuencia sencilla:
Carga de la página
↓
Inicialización del sistema
↓
Carga del archivo config.json
↓
Creación dinámica del dashboard
↓
Renderizado de paneles y pestañasEste flujo permite que la interfaz se genere automáticamente en función de la configuración.
Una arquitectura pensada para escalar
Aunque el proyecto es sencillo, la arquitectura permite ampliarlo fácilmente.
Por ejemplo, podrían añadirse módulos como:
integración con APIs de noticias
datos financieros en tiempo real
seguimiento de vuelos
mapas de actividad sísmica
monitorización meteorológica avanzada
Todo ello manteniendo la misma estructura de base.
Este tipo de diseño demuestra que una buena arquitectura no depende de utilizar herramientas complejas, sino de organizar correctamente el sistema.
Archivo 01: La estructura HTML del dashboard
El archivo HTML define la estructura básica de la aplicación. Su función principal es crear los contenedores donde posteriormente el JavaScript insertará dinámicamente los distintos elementos del dashboard.
El archivo principal de la aplicación es:
index.htmlEste archivo contiene tres grandes bloques:
Cabecera
Panel principal
Barra inferior
La estructura general de la página
La estructura principal de la aplicación está organizada dentro de un contenedor llamado:
app-shellEste contenedor define el layout general del dashboard.
<div class="app-shell">
<header class="banner"></header>
<main class="main-grid"></main>
<footer class="footer-bar"></footer>
</div>Este diseño permite separar claramente:
la zona de información superior
el área principal de monitorización
los accesos rápidos inferiores
La cabecera del sistema
La cabecera muestra la información básica del dashboard.
Incluye:
logotipo de la aplicación
nombre del sistema
estado del panel
reloj en tiempo real
selector de perfil
El contenido de algunos elementos se actualiza dinámicamente desde JavaScript, como por ejemplo
la hora, la fecha y el perfil activo
Este enfoque permite que la interfaz sea parcialmente dinámica sin complicar el HTML. LK_WorldControlNews
El área principal del dashboard
La zona principal de la aplicación está contenida dentro de:
main-gridEste elemento organiza todo el dashboard.
<main class="main-grid" id="mainGrid">
<section class="column left-column"></section>
<section class="column right-column"></section>
</main>El layout está dividido en dos columnas principales.
Columna izquierda: contiene dos paneles:
panel superior (normalmente mapas)
panel inferior (noticias)
Columna derecha: Contiene tres paneles:
panel superior (tiempo / operaciones)
panel central (canales de noticias)
panel inferior (webcams)
Los paneles del dashboard
Cada zona del dashboard es un panel independiente.
En el HTML estos paneles aparecen como contenedores vacíos:
<section class="panel panel-slot" id="panel-topLeft"></section>
<section class="panel panel-slot" id="panel-bottomLeft"></section>
<section class="panel panel-slot" id="panel-topRight"></section>
<section class="panel panel-slot" id="panel-middleRight"></section>
<section class="panel panel-slot" id="panel-bottomRight"></section>Estos contenedores funcionan como slots donde el JavaScript insertará posteriormente el contenido correspondiente. Este diseño permite que el HTML permanezca limpio y simple, mientras que el contenido se genera dinámicamente. LK_WorldControlNews
Separadores para redimensionar paneles
Entre los paneles existen elementos llamados resizers.
Estos elementos permiten modificar el tamaño de los paneles arrastrando con el ratón.
Por ejemplo:
<div
class="resizer resizer-horizontal"
data-resize="leftColumn"
data-target-a="panel-topLeft"
data-target-b="panel-bottomLeft">
</div>Estos separadores no contienen contenido visual complejo, pero permiten implementar la lógica de redimensionado mediante JavaScript.
La barra inferior
El último bloque del HTML es la barra inferior del sistema.
<footer class="footer-bar" id="footerLinks"></footer>Al igual que los paneles, su contenido se genera dinámicamente desde el archivo de configuración.
Archivo 02: Diseño visual con CSS
El aspecto visual del dashboard está definido en el archivo:
styles.cssEste archivo contiene todo el diseño de la interfaz y define elementos como:
colores
tipografías
paneles
layout del dashboard
animaciones
diseño responsive
El objetivo del diseño era recrear una estética similar a la de una sala de control o dashboard técnico, donde la información se muestra de forma clara, organizada y fácil de consultar durante largos periodos de tiempo.
Uso de variables CSS
Uno de los primeros elementos del archivo es la definición de variables CSS.
Esto permite controlar todo el estilo de la aplicación desde un único punto.
Por ejemplo:
Estas variables se utilizan posteriormente en todo el diseño.
Esto tiene varias ventajas:
facilita cambiar el tema visual
permite mantener coherencia de colores
hace el código más fácil de mantener
Este tipo de diseño basado en variables es habitual en interfaces modernas. styles
Paneles del dashboard
Cada sección del dashboard está representada por un panel independiente.
Los paneles tienen:
fondo oscuro
bordes sutiles
sombras suaves
efecto de iluminación azul
Por ejemplo:
.panel {
border: 1px solid rgba(47, 107, 255, 0.28);
box-shadow:
0 0 0 1px rgba(47, 107, 255, 0.10),
0 0 12px rgba(47, 107, 255, 0.08);
}Este tipo de diseño ayuda a que cada panel se perciba como un módulo independiente dentro del dashboard. styles
Sistema de pestañas
Muchos paneles contienen pestañas internas que permiten alternar entre diferentes fuentes de información.
El diseño de estas pestañas busca mantener una estética técnica y minimalista.
Las pestañas activas se resaltan mediante:
cambios de color
borde luminoso
gradiente azul
Esto facilita identificar rápidamente qué contenido está activo en cada panel.
Paneles redimensionables
Entre los paneles existen separadores llamados resizers. Estos elementos permiten redimensionar los paneles arrastrando con el ratón.
Visualmente se representan mediante barras sutiles con iluminación azul que aparecen entre los paneles.
Cuando el usuario pasa el ratón por encima, el separador cambia ligeramente de color para indicar que es interactivo.
Adaptación a diferentes pantallas
El dashboard también incluye reglas responsive para adaptarse a diferentes tamaños de pantalla.
Por ejemplo, cuando el ancho de la pantalla se reduce, el layout cambia automáticamente y los paneles pasan a organizarse en una sola columna.
Una estética pensada para uso prolongado
Otro objetivo importante del diseño era que la interfaz fuese cómoda de observar durante largos periodos de tiempo.
Por ello se han utilizado:
colores oscuros
contrastes moderados
tipografías claras
animaciones muy sutiles
Archivo 03: La lógica del sistema con JavaScript
El comportamiento de LK World Control News se apoya en un único archivo JavaScript:
app.js
Aquí es donde se concentra toda la lógica de la aplicación:
carga de la configuración
creación dinámica de paneles
gestión de pestañas
renderizado de contenido
actualización de relojes
countdowns
redimensionado de paneles
Es decir, si el HTML pone la estructura base y el CSS define la apariencia, el JavaScript es lo que realmente da vida al dashboard.
Un sistema guiado por configuración
La aplicación no tiene los paneles definidos manualmente uno a uno en el HTML.
En su lugar, el JavaScript lee la configuración desde el archivo JSON y genera el dashboard en tiempo de ejecución.
Ese proceso comienza con una función muy clara:
async function loadConfig() {
const response = await fetch("config/config.json");
return await response.json();
}Con esto, la aplicación obtiene toda la información necesaria para construir la interfaz. Este enfoque tiene una ventaja enorme: el comportamiento del dashboard depende de la configuración, no de código fijo.
Identificación de paneles
Desde el principio del archivo se define una lista con los paneles del sistema:
const PANEL_IDS = ["topLeft", "bottomLeft", "topRight", "middleRight", "bottomRight"];Esto permite recorrer el dashboard de forma ordenada y aplicar la lógica de renderizado a cada zona.
En paralelo se mantiene un objeto de estado:
const panelState = {};
Inicialización de la aplicación
Toda la aplicación arranca a través de una función principal:
async function init() {
appConfig = await loadConfig();
setupHeader(appConfig);
populateProfileSelector(appConfig);
renderProfile(activeProfileKey);
normalizeColumnWeights("left");
normalizeColumnWeights("right");
setGridSizes();
attachResizeHandlers();
startClock();
startWorldClocks();
startCountdowns();
}
Y esta función se ejecuta cuando el DOM ya está cargado:
document.addEventListener("DOMContentLoaded", init);
Este patrón hace que la aplicación se inicialice de forma ordenada y fácil de entender.
Construcción dinámica de perfiles
Uno de los elementos más interesantes del sistema es que soporta varios perfiles de configuración.
El selector superior se rellena automáticamente recorriendo los perfiles disponibles en el JSON.
Object.entries(config.profiles).forEach(([key, profile]) => {
const option = document.createElement("option");
option.value = key;
option.textContent = profile.label || key;
select.appendChild(option);
});
Después, cuando el usuario cambia de perfil, se vuelve a renderizar todo el dashboard:
select.addEventListener("change", (event) => {
activeProfileKey = event.target.value;
renderProfile(activeProfileKey);
});
Esto permite pasar, por ejemplo, de una vista global a una vista especializada sin recargar la página.
Renderizado de paneles
Cada panel se construye dinámicamente con la función:
renderPanel(panelId, panelConfig)
Esta función:
localiza el contenedor HTML correspondiente
genera la cabecera del panel
crea la barra de pestañas
define el contenido inicial
Si un panel no tiene configuración válida, el sistema muestra una tarjeta de fallback para evitar errores visuales. Esto hace que la app sea más robusta frente a configuraciones incompletas.
Gestión de pestañas
Cuando un panel tiene varias pestañas, el JavaScript crea automáticamente un botón para cada una.
const button = document.createElement("button");
button.className = `tab-btn${tab.id === defaultTabId ? " active" : ""}`;
button.textContent = tab.label || tab.id;
Cada botón incorpora su propio evento de clic:
button.addEventListener("click", async () => {
panelState[panelId].activeTabId = tab.id;
updateActiveTabButton(panelId);
await renderTabContent(panelId);
});
Con este sistema, el cambio de contenido dentro de cada panel es inmediato y limpio.
Renderizado según el tipo de contenido
Una de las partes más potentes del archivo es la función que decide cómo pintar cada pestaña según su tipo:
function buildTabHtml(tab) {
switch (tab.type) {
case "embed":
case "youtube":
case "webcam":
return buildLazyEmbed(tab);
case "rss":
return buildRssList(tab.items || []);
case "calendar":
return buildCalendarCard();
case "links":
return buildLinksGrid(tab.links || []);
case "countdowns":
return buildCountdownsGrid(tab.events || []);
case "webcamGrid":
return buildWebcamGrid(tab.cams || []);
case "html":
return `<div class="html-card">${tab.html || "<p>Sin contenido HTML definido.</p>"}</div>`;
}
}
Aquí está una de las claves del diseño:cada pestaña declara un type, y el sistema sabe automáticamente cómo construirla.
Este enfoque hace que el sistema sea muy escalable, porque añadir un nuevo contenido consiste en:
declararlo en el JSON
asignarle un tipo
dejar que el motor lo pinte
Carga diferida de iframes
La app integra muchos contenidos embebidos, como YouTube, mapas o webcams. Para no sobrecargar la página desde el principio, se utiliza un sistema de lazy loading.
Primero se genera un placeholder:
return `
<div
class="lazy-embed"
data-url="${escapeAttribute(tab.url)}"
data-label="${escapeAttribute(tab.label || tab.title || "Media")}"
data-type="${escapeAttribute(tab.type || "embed")}"
>
<div class="lazy-embed-placeholder">
<div class="lazy-embed-loader">Loading…</div>
<div class="lazy-embed-title">${escapeHtml(tab.label || tab.title || "Media")}</div>
</div>
</div>
`;
Después, cuando toca hidratar ese bloque, el sistema inserta el iframe real:
const iframe = document.createElement("iframe");
iframe.className = "content-frame";
iframe.src = url;
iframe.loading = "lazy";
Esto mejora bastante la experiencia de uso y evita cargar decenas de iframes simultáneamente al arrancar la aplicación.
Relojes y countdowns
Además del contenido informativo, el sistema incorpora componentes dinámicos de tiempo.
Por ejemplo, el reloj principal se actualiza cada segundo mediante setInterval, al igual que los relojes mundiales y los countdowns.
Esto añade una capa operativa al dashboard y refuerza su estética de centro de control.
Una lógica sencilla, pero muy escalable
La gran virtud de este archivo no es la complejidad, sino la organización.
El sistema está pensado para:
leer configuración
interpretar tipos de contenido
generar interfaz
actualizar componentes dinámicos
Y todo ello de una forma relativamente compacta y fácil de mantener.
Archivo 04: El corazón del sistema: el archivo de configuración JSON
Si hay un elemento que define realmente el funcionamiento de LK World Control News, ese es el archivo:
config.jsonEste archivo contiene toda la configuración operativa del dashboard.
En lugar de definir los paneles directamente en el HTML o en el JavaScript, el sistema lee este archivo y genera dinámicamente toda la interfaz.
En otras palabras: la aplicación no está programada panel por panel, sino que se construye a partir de configuración.
Este enfoque hace que el sistema sea extremadamente flexible.
Qué define el archivo de configuración
La versión actual del archivo JSON define varios niveles de información:
los datos generales de la aplicación
el perfil por defecto
una librería global de webcams
los perfiles disponibles
los paneles de cada perfil
las pestañas de cada panel
los enlaces y recursos que se muestran en pantalla
Es decir, el JSON no solo contiene contenido: contiene también la estructura funcional del dashboard.
Estructura general del archivo JSON
La estructura principal del archivo es bastante clara.
{ "app": { ... }, "webcams": [ ... ], "profiles": { ... }}Cada uno de estos bloques cumple una función distinta.
Bloque general de la aplicación
El primer bloque es app, y define la identidad básica del dashboard:
"app": {
"title": "LK World Control News",
"subtitle": "Global Real-Time News",
"statusText": "Online · Perfil cargado correctamente", "defaultProfile": "global_news"
}Aquí se establecen elementos como:
el título que aparece en la cabecera
el subtítulo del sistema
el texto de estado
el perfil que debe cargarse al arrancar la aplicación
Esto permite modificar el comportamiento inicial del dashboard sin tocar el JavaScript. config
Librería global de webcams
Una de las mejoras más interesantes de esta última versión es la existencia de un bloque independiente llamado:
"webcams": { ... }Aquí se define una biblioteca reutilizable de cámaras y streams.
Cada webcam tiene su propia ficha de configuración: label, type y url
Esto es importante porque evita repetir URLs dentro de varios paneles y permite reutilizar fácilmente cámaras en distintos grids o perfiles. En otras palabras, el JSON ya no solo define vistas, sino también recursos compartidos reutilizables.
Sistema de perfiles
El siguiente gran bloque es:
"profiles": { ... }En la versión actual existen dos perfiles principales:
global_news
iran_focus
Cada perfil representa una forma distinta de organizar la sala de control.
Perfil global_news
Es la vista general del sistema. Está pensada como dashboard global, con cobertura amplia de mapas, medios, canales en directo, mercados y webcams internacionales.
Perfil iran_focus
Es una variante especializada. Mantiene la misma arquitectura general, pero reorganiza el contenido para centrarse en seguimiento regional de Irán, Israel/Palestina, contexto geopolítico, medios regionales y cámaras relacionadas.
Esto demuestra una de las ideas más potentes del proyecto:
la misma aplicación puede comportarse como herramientas distintas simplemente cambiando de perfil.
La estructura de paneles
Dentro de cada perfil aparece el bloque panels, que define la distribución del contenido en las cinco zonas principales del dashboard:
"panels": {
"topLeft": { ... },
"bottomLeft": { ... },
"topRight": { ... },
"middleRight": { ... },
"bottomRight": { ... }
}Estas zonas se corresponden con la estructura visual de la app:
arriba izquierda: mapas
abajo izquierda: noticias / enlaces
arriba derecha: tiempo y contexto operativo
centro derecha: canales de noticias en directo
abajo derecha: webcams
El valor de este enfoque es que la posición física del panel queda desacoplada del contenido. El JavaScript solo necesita saber qué panel debe renderizar y qué pestañas contiene.
Las pestañas como unidad real de contenido
Dentro de cada panel aparece una lista de tabs.Y aquí es donde realmente se define lo que verá el usuario.
Cada pestaña incluye normalmente:
id
label
type
y después los datos concretos según el tipo
Por ejemplo, una pestaña sencilla de mapa puede definirse así:
{
"id": "maps",
"label": "Maps",
"type": "embed",
"url": "https://www.openstreetmap.org/..."
}Es decir :el tipo de pestaña determina cómo debe interpretarse y renderizarse su contenido.
Tipos de contenido presentes en la versión actual
La versión actual del JSON utiliza varios tipos de contenido reales dentro del dashboard:
html para paneles informativos o tarjetas explicativas
embed para webs embebidas, mapas o radares
youtube para streams en directo
links para colecciones de enlaces temáticos
countdowns para eventos con cuenta atrás
webcamGrid para mosaicos de varias cámaras simultáneas
Esto le da a la aplicación bastante riqueza, porque puede combinar vistas muy distintas dentro de una misma arquitectura.
Cómo ampliar el dashboard y añadir nuevas fuentes
Una de las principales ventajas de la arquitectura de LK World Control News es que el sistema está diseñado para ampliarse fácilmente.
Gracias al enfoque basado en configuración, añadir nuevas fuentes de información no requiere modificar el código principal de la aplicación.
En la mayoría de los casos basta con editar el archivo config.json y añadir una nueva pestaña o un nuevo recurso.
Esto convierte el dashboard en una plataforma flexible que puede adaptarse a diferentes necesidades.
Añadir una nueva pestaña a un panel
El método más sencillo para ampliar el dashboard es añadir una nueva pestaña dentro de uno de los paneles existentes.
Por ejemplo, si queremos añadir un nuevo mapa al panel de mapas, bastaría con añadir un nuevo bloque dentro de la lista de tabs.
{
"id": "earthquakes",
"label": "Earthquakes",
"type": "embed",
"url": "https://earthquake.usgs.gov/earthquakes/map/"
}Una vez añadido al JSON, el sistema lo integrará automáticamente como una nueva pestaña en el panel correspondiente. No es necesario modificar el HTML ni el JavaScript.
Añadir un nuevo canal de televisión
El sistema también permite integrar canales de televisión o streams en directo.
Para ello se utiliza normalmente el tipo:
"type": "youtube"Por ejemplo:
{
"id": "cnn",
"label": "CNN",
"type": "youtube",
"url": "https://www.youtube.com/embed/live_stream?channel=UCupvZG-5ko_eiXAupbDfxWw"
}Esto hará que el dashboard muestre automáticamente el canal dentro de un iframe. Este tipo de contenido es especialmente útil para el panel News Live.
Añadir nuevas webcams
Las webcams pueden añadirse de dos formas:
Como cámara individual
{
"id": "newyork",
"label": "New York",
"type": "webcam",
"url": "https://www.youtube.com/embed/..."
}Como grid de webcams
El sistema también permite crear mosaicos de cámaras mediante el tipo:
"type": "webcamGrid"En este caso se puede utilizar la librería global de webcams definida en el JSON.
Esto permite reutilizar fácilmente cámaras ya configuradas.
Crear un nuevo perfil del dashboard
Una de las ampliaciones más interesantes es crear un perfil completamente nuevo.
Por ejemplo, podríamos crear un perfil orientado a seguimiento económico o financiero.
La estructura sería algo como:
"finance_monitor": { "label": "Finance Monitor", "panels": { ... }}Este perfil podría incluir:
mapas de actividad económica
paneles de mercados
noticias financieras
cámaras de bolsas internacionales
Al seleccionar ese perfil desde el menú superior, el dashboard se reorganizaría automáticamente.
Añadir nuevos tipos de contenido
Si se desea ampliar aún más el sistema, también es posible crear nuevos tipos de contenido en el archivo JavaScript.
Por ejemplo, en el futuro podrían añadirse tipos como:
stocks
crypto
weather
alerts
Bastaría con añadir un nuevo caso dentro del renderizador de pestañas.
De dashboard personal a herramienta operativa
Aunque el proyecto nace como una herramienta personal de monitorización de noticias, su arquitectura permite convertirlo en algo mucho más amplio.
Por ejemplo:
panel de seguimiento geopolítico
dashboard de operaciones internacionales
monitorización de eventos globales
sala de control de proyectos internacionales
Con pequeños ajustes en la configuración, el mismo sistema puede adaptarse a diferentes contextos.
Conclusiones y descarga del proyecto
El desarrollo de LK World Control News demuestra que es posible construir herramientas útiles y potentes utilizando tecnologías web muy sencillas.
La aplicación está basada únicamente en: HTML, CSS, JavaScript y JSON- Sin frameworks complejos, sin backend y sin dependencias externas.
Sin embargo, gracias a una arquitectura bien planteada, el resultado es un sistema capaz de integrar múltiples fuentes de información y presentarlas de forma organizada dentro de un único panel.
Una pequeña sala de control personal
El concepto detrás de esta aplicación es bastante simple:
crear una pequeña sala de control informativa que permita observar lo que está ocurriendo en el mundo desde una única pantalla.
En lugar de abrir múltiples páginas web, el dashboard permite combinar en tiempo real:
mapas globales
titulares de noticias
canales de televisión en directo
webcams internacionales
relojes y eventos
enlaces a fuentes relevantes
Esta forma de consumir información facilita tener una visión más amplia del contexto global.
Desarrollo asistido con inteligencia artificial
Este proyecto también es un buen ejemplo de cómo la inteligencia artificial puede utilizarse como herramienta de ingeniería.
Durante el desarrollo de esta aplicación se ha utilizado ChatGPT como asistente técnico para:
diseñar la arquitectura del sistema
generar partes del código
estructurar el archivo de configuración
optimizar la interfaz
documentar el proyecto
En lugar de sustituir al desarrollador, la IA actúa como un acelerador de desarrollo, permitiendo construir herramientas funcionales de forma mucho más rápida.
Próximos pasos
En el futuro es posible ampliar el proyecto con nuevas funcionalidades, como por ejemplo:
integración con APIs de noticias
alertas automáticas
datos de mercados en tiempo real
seguimiento de vuelos o tráfico marítimo
integración con herramientas de automatización como N8N
Este tipo de evoluciones convertirían el dashboard en una plataforma todavía más potente para monitorización global.
Descargar el proyecto
Online: Ver la aplicación en funcionamiento
Puedes ver la aplicación funcionando online en:
Si quieres probar LK World Control News o utilizarlo como base para tus propios dashboards, puedes descargar el proyecto completo.
Para facilitar las pruebas hemos preparado dos versiones diferentes del proyecto.
Opción 1 — Versión estándar del proyecto
Esta versión contiene la estructura original del proyecto con los cuatro archivos principales:
LKWorldControlNews/
│
├── index.html
├── styles.css
├── app.js
└── config.jsonEn esta versión el archivo de configuración se carga mediante JavaScript utilizando fetch(). Por este motivo es necesario ejecutar la aplicación desde un servidor web.
Por ejemplo:
Apache
Nginx
un servidor local con Python
Live Server de VSCode
cualquier hosting web
Esto se debe a que los navegadores modernos bloquean las peticiones fetch() cuando se abre un archivo directamente desde el sistema de archivos (file://). Una vez servido desde un webserver, la aplicación funciona normalmente.
📦 Descargar proyecto (versión estándar)
Opción 2 — Versión standalone (sin servidor)
También hemos preparado una segunda versión pensada para probar la aplicación rápidamente sin necesidad de servidor web.
En esta versión el contenido del archivo:
config.jsonse ha integrado directamente dentro del HTML.
De esta forma el JavaScript no necesita realizar ninguna petición fetch() y la aplicación puede ejecutarse simplemente abriendo el archivo:
index.htmldirectamente en el navegador.
Esta versión es especialmente útil para:
pruebas rápidas
demostraciones
compartir el proyecto fácilmente
ejecutar el dashboard sin infraestructura adicional
📦 Descargar proyecto (versión standalone)
Diferencias entre ambas versiones
Versión | Uso recomendado |
Versión estándar | desarrollo y ampliación del proyecto |
Versión standalone | pruebas rápidas sin servidor |
La versión estándar es la más adecuada si se quiere modificar el sistema o ampliar el dashboard.
La versión standalone, en cambio, es perfecta para explorar la aplicación o utilizarla como demo.
Un pequeño proyecto… con muchas posibilidades
A veces los proyectos más interesantes no son los más grandes, sino aquellos que combinan ideas sencillas de forma inteligente.
Con unas pocas tecnologías web y una arquitectura flexible es posible construir herramientas muy útiles.
Y en el contexto actual, con el apoyo de la inteligencia artificial como asistente de desarrollo, este tipo de proyectos se vuelven cada vez más accesibles.
Comentarios