Corporate Hub · Documentación & Guía paso a paso

01 Visión general

¿Qué vamos a construir?

Una agencia ficticia llamada Webnoticias Agency (usando tu propio dominio cristch-x.com) que tiene dos capas: un sitio web público para clientes, y un portal interno privado donde el equipo trabaja. Esta arquitectura es exactamente la que usan empresas reales como bancos, universidades y corporaciones.

Drupal · Capa Pública

Sitio corporativo

El sitio web que ven los clientes: servicios, portafolio de proyectos, equipo, blog y formulario de contacto. Corre en webnoticias.cristch-x.com usando tu hosting Hostinger.

Liferay · Capa Interna

Portal intranet

El portal privado del equipo: gestión de proyectos, documentos internos, directorio de empleados, anuncios y tablero de KPIs. Corre en localhost:8080 con Docker.

02 Arquitectura

Cómo se conectan los dos sistemas

Drupal expone una API REST con su contenido público. Liferay puede consumir esa API para mostrar novedades de la empresa en la intranet. Así los empleados ven las publicaciones del sitio sin salir del portal interno.

👤 Clientes / Internet

HTTPS

→

DRUPAL
webnoticias.cristch-x.com
Hostinger · PHP

JSON:API REST ↓

👥 Equipo interno

Red local

→

LIFERAY
localhost:8080
Docker · Java

📡 Drupal expone JSON:API

→

🔄 Liferay consume la API

→

📰 Noticias en intranet

💡 Por qué esta arquitectura tiene sentido

Drupal es el rey del contenido estructurado y SEO. Liferay es el rey de los portales empresariales con usuarios y roles complejos. Juntos cubren todo lo que una empresa necesita: cara al público + operaciones internas.

03 Funcionalidades del proyecto

Qué tendrá cada sistema

🌐 Drupal — Sitio público (webnoticias.cristch-x.com)

🏠

Página de inicio

Hero section, servicios destacados, últimos proyectos y CTA de contacto

💼

Portafolio de proyectos

Content Type personalizado con campos: cliente, tecnología usada, imagen, descripción, fecha

⚙️

Servicios

Listado de servicios con taxonomía por categoría (Web, Diseño, Consultoría)

👥

Equipo

Content Type para miembros del equipo: nombre, cargo, foto, redes sociales

📝

Blog / Noticias

Artículos con categorías, tags, autor y fecha. Estos se expondrán vía JSON:API

📬

Contacto

Formulario con Webform. Campos: nombre, email, empresa, mensaje, presupuesto

🔒 Liferay — Portal interno (localhost:8080)

📊

Dashboard de bienvenida

KPIs del mes, anuncios internos, accesos rápidos a documentos y últimas novedades del sitio público

📁

Repositorio de documentos

Documents and Media de Liferay. Propuestas, contratos, plantillas organizados por carpetas

🗂️

Directorio de empleados

Web Content Structure personalizada: empleado, área, cargo, teléfono, foto de perfil

📢

Anuncios internos

Portlet de anuncios de Liferay. Solo visible para empleados autenticados con roles

🌐

Feed del sitio público

Portlet que consume la JSON:API de Drupal y muestra los últimos artículos del blog

🎯

Gestión de proyectos

Web Content personalizado para seguimiento de proyectos activos con estado y responsable

04 Punto clave de integración

Cómo Liferay consume Drupal

La integración real entre los dos sistemas ocurre a través de la API REST de Drupal. En Liferay, un portlet personalizado (o iframe + JavaScript) consulta esa URL y muestra los datos en la intranet.

Drupal publica

Activa módulo JSON:API

Endpoint de artículos

Permisos de acceso anónimo

Campos: título, cuerpo, fecha, imagen

REST API
JSON:API

Liferay consume
Portlet web con fetch()
Muestra últimas 5 noticias
Solo visible a empleados
Link directo al sitio público

      // URL de la API de Drupal (en webnoticias.cristch-x.com)

      https://webnoticias.cristch-x.com/jsonapi/node/article

      // En el portlet de Liferay (JavaScript/HTML)

      fetch('https://webnoticias.cristch-x.com/jsonapi/node/article?sort=-created&page[limit]=5')

        .then(res => res.json())

        .then(data => {

          // data.data = array de artículos del blog

          // data.data[0].attributes.title = título

          // data.data[0].attributes.created = fecha

        });

05 Stack técnico

Módulos y herramientas a usar

Herramienta / Módulo	Sistema	Para qué sirve en este proyecto
JSON:API (incluido en core)	Drupal	Expone el contenido como API REST. Es el puente con Liferay
Views (incluido en core)	Drupal	Crear listados del portafolio, equipo y blog con filtros
Webform	Drupal	Formulario de contacto con notificaciones por email
Pathauto	Drupal	URLs amigables automáticas: /proyectos/nombre-proyecto
Bootstrap Barrio	Drupal	Tema base responsive para personalizar el diseño corporativo
Metatag	Drupal	SEO: meta títulos y descripciones para cada página
Web Content Structures	Liferay	Definir campos del directorio de empleados y proyectos
Documents and Media	Liferay	Repositorio de documentos internos con permisos por rol
Roles & Permissions	Liferay	Admin, Editor, Empleado — cada uno con acceso diferente
Asset Publisher	Liferay	Mostrar listado de empleados y proyectos activos
Fragments	Liferay	Diseñar el layout del dashboard con bloques drag & drop
Docker Desktop	Ambos	Corre Liferay en local sin necesitar un servidor Java real

06 Plan de ejecución

Las 5 fases del proyecto

Entornos y estructura base Semanas 1–2

Montar todo antes de escribir una sola línea de contenido.

D Instalar Drupal en webnoticias.cristch-x.com (subdominio en Hostinger)

D Instalar módulos: Views, Pathauto, Admin Toolbar, Webform, Bootstrap Barrio, JSON:API, Metatag

L Instalar Docker Desktop y correr: docker run liferay/portal:7.4.3.112-ga112

L Configurar Site en Liferay llamado "Webnoticias Intranet" y crear 3 roles: Admin, Editor, Empleado

Content Types y Structures Semanas 3–5

Definir la arquitectura de datos de ambos sistemas.

D Crear Content Types: Proyecto (cliente, tech, imagen), Servicio (categoría, descripción), Miembro del equipo

D Crear taxonomías: Tecnologías (Drupal, WordPress, Webflow...), Servicios (Web, Diseño, Consultoría)

L Crear Web Content Structure "Empleado": nombre, área, cargo, foto, teléfono, email interno

L Crear Web Content Structure "Proyecto interno": nombre, cliente, estado (activo/pausado/cerrado), responsable

Diseño y páginas Semanas 6–8

Construir las interfaces de los dos sistemas con contenido real de prueba.

D Diseñar tema hijo de Bootstrap Barrio con colores y logo de Webnoticias

D Crear Views para: listado de proyectos, listado de servicios, página del equipo

D Configurar formulario de contacto con Webform + notificación por email

L Diseñar dashboard con Fragments: bienvenida, accesos rápidos, KPIs de ejemplo

L Crear página de Directorio con Asset Publisher mostrando empleados

L Configurar Documents and Media con carpetas: Propuestas, Contratos, Recursos, Plantillas

La integración: Drupal → Liferay Semanas 9–10

El momento más interesante: conectar los dos sistemas.

D Habilitar JSON:API y verificar que webnoticias.cristch-x.com/jsonapi/node/article devuelve datos

L Crear portlet HTML/JavaScript en el dashboard que hace fetch() a la API de Drupal

L Mostrar las últimas 5 noticias del blog en el panel de empleados con título, fecha y link

✓ Probar el flujo completo: publicar en Drupal → ver automáticamente en la intranet de Liferay

Pulido, documentación y portafolio Semanas 11–12

Terminar con calidad profesional y documentar para tu portafolio técnico.

D SEO: configurar Metatag en todos los Content Types, sitemap.xml

L Permisos finales: que empleados no puedan editar documentos de otros roles

✓ Crear repositorio en GitHub con README documentando la arquitectura

✓ Grabar un video corto (Loom) mostrando el flujo completo — ideal para entrevistas

07 Estructura de archivos

Cómo organizar tu repositorio en GitHub

webnoticias-corporate-hub/
├── README.md ← documentación del proyecto
├── drupal/ ← todo lo de Drupal
│ ├── config/ ← exportación de la config (drush config:export)
│ ├── themes/antpack_theme/ ← tu tema hijo personalizado
│ │ ├── antpack_theme.info.yml
│ │ ├── css/style.css
│ │ └── templates/
│ └── screenshots/ ← capturas para el portafolio
├── liferay/ ← todo lo de Liferay
│ ├── docker-compose.yml ← para levantar Liferay fácil
│ ├── portal-ext.properties ← config de Liferay
│ ├── portlets/drupal-feed/ ← el portlet de integración
│ │ └── index.html ← HTML+JS que consume la API de Drupal
│ └── screenshots/
└── docs/
├── arquitectura.png ← diagrama del sistema
├── drupal-contenidos.md ← content types documentados
└── liferay-roles.md ← roles y permisos

💡 Por qué documentar desde el inicio

El README de GitHub con capturas de pantalla del proyecto funcionando vale más en una entrevista que cualquier certificado. Muestra que entiendes la arquitectura, no solo que seguiste un tutorial. Cuando le cuentes a Geraldine que tienes esto en GitHub, te va a mirar diferente.

Drupal ⏱ 30 minutos

Paso 1: Instalar los módulos esenciales

Tu Drupal en webnoticias.cristch-x.com está recién instalado. Lo primero es agregar los módulos que vas a necesitar para todo el proyecto.

Los módulos en Drupal son como plugins en WordPress. Se instalan desde el panel de administración sin tocar código. Ve a tu Drupal en webnoticias.cristch-x.com/admin y sigue estos pasos.

ℹ️

Cómo instalar módulos en Drupal

Ve a Manage → Extend → Install new module. Pega la URL del módulo desde drupal.org/project/NOMBRE_MODULO. Ejemplo: drupal.org/project/webform → copia la URL del .zip → pégala en Drupal.

📦 Módulos a instalar (uno por uno)

⚙️

Admin ToolbarBarra de admin mejorada, navegación más rápida

🔗

PathautoURLs automáticas como /proyectos/nombre-proyecto

📝

WebformPara el formulario de contacto con notificaciones

🔍

MetatagSEO: títulos y descripciones por página

🎨

Bootstrap BarrioTema base responsive para diseñar el sitio

📡

JSON:API (ya incluido)Solo activarlo en Extend, no hay que instalarlo

✅ Tareas de este paso

Ir a webnoticias.cristch-x.com/admin y hacer login con tu usuario admin

Instalar Admin Toolbar desde drupal.org/project/admin_toolbar

Instala también Admin Toolbar Extra Tools cuando lo pida

Instalar Pathauto desde drupal.org/project/pathauto

Instalará Token automáticamente como dependencia

Instalar Webform desde drupal.org/project/webform

Instalar Metatag desde drupal.org/project/metatag

Instalar Bootstrap Barrio desde drupal.org/project/bootstrap_barrio

Después de instalar, ve a Appearance → Enable and set as default

Activar JSON:API: ve a Manage → Extend → busca "JSON:API" → Enable

Ya viene incluido en Drupal core, solo necesita activarse

Drupal ⏱ 45 minutos

Paso 2: Crear los Content Types

Los Content Types son la columna vertebral de Drupal. Piénsalos como Custom Post Types de WordPress pero mucho más configurables.

Vas a crear 4 tipos de contenido para el sitio corporativo. Cada uno tendrá campos específicos que definirás tú. Ve a Structure → Content types → Add content type.

💡

La lógica de los Content Types

Cada tipo es un "molde" de datos. Proyecto tiene campos diferentes a Artículo. Drupal te deja agregar cualquier campo: texto, número, imagen, referencia a otro contenido, archivo, fecha, etc.

📋 Content Type 1: Proyecto

Crear Content Type llamado "Proyecto" (machine name: proyecto)

Agregar campo: "Cliente" → tipo Text (plain), requerido

Agregar campo: "Imagen del proyecto" → tipo Image

Agregar campo: "Tecnologías usadas" → tipo Entity reference → referencia a Taxonomy (lo crearás en el paso 3)

Agregar campo: "URL del proyecto" → tipo Link

📋 Content Type 2: Servicio

Crear Content Type llamado "Servicio" (machine name: servicio)

Agregar campo: "Ícono" → tipo Text (para guardar un emoji o clase de ícono)

Agregar campo: "Precio desde" → tipo Number (decimal)

📋 Content Type 3: Miembro del Equipo

Crear Content Type "Miembro del Equipo" (machine name: miembro_equipo)

Agregar campo: "Cargo" → tipo Text (plain)

Agregar campo: "Foto" → tipo Image

Agregar campo: "LinkedIn" → tipo Link

📋 Content Type 4: Artículo (ya existe)

El tipo "Article" ya viene en Drupal. Solo agregar campo "Categoría" → Entity reference → Taxonomy term

Este será el contenido que se expondrá vía JSON:API a Liferay

Drupal ⏱ 15 minutos

Paso 3: Crear las Taxonomías

Las taxonomías son sistemas de clasificación. Son como las categorías y etiquetas de WordPress pero más flexibles.

Ve a Structure → Taxonomy → Add vocabulary. Crearás dos vocabularios de taxonomía.

Crear vocabulario "Tecnologías" y agregar términos: Drupal, WordPress, Webflow, Shopify, React, PHP, JavaScript

Crear vocabulario "Categorías de Servicio" y agregar términos: Desarrollo Web, Diseño, Consultoría, E-commerce, SEO

Volver al Content Type "Proyecto" y conectar el campo "Tecnologías usadas" al vocabulario "Tecnologías"

Crear 3 proyectos de prueba con contenido falso para poder ver los Views funcionando en el paso siguiente

💡

Crea contenido de prueba ahora

Agrega mínimo 3 proyectos, 3 servicios y 3 artículos con texto e imágenes de placeholder (unsplash.com). Sin contenido no puedes ver si los Views funcionan bien.

Drupal ⏱ 60 minutos

Paso 4: Configurar Views

Views es el módulo más poderoso de Drupal. Te permite mostrar cualquier contenido, filtrado y ordenado como quieras, sin escribir código SQL.

Ve a Structure → Views → Add view. Crearás una vista por cada sección del sitio.

ℹ️

Lógica de Views

Un View tiene: Qué mostrar (tipo de contenido), Cómo mostrarlo (grid, lista, tabla), Filtros (solo publicados, por categoría), Ordenamiento (más reciente primero). Es como hacer una query SQL pero con interfaz gráfica.

Crear View "Portafolio" → Show: Content type Proyecto → Display: Grid de 3 columnas → Path: /proyectos

Crear View "Servicios" → Show: Content type Servicio → Display: Lista → Path: /servicios

Crear View "Equipo" → Show: Content type Miembro del Equipo → Display: Grid → Path: /equipo

Crear View "Blog" → Show: Content type Article → ordenado por fecha desc → Path: /blog

Verificar que todas las páginas son accesibles en el navegador sin estar logueado

Drupal ⏱ 90 minutos

Paso 5: Tema e identidad visual

Personalizar Bootstrap Barrio para que el sitio tenga una identidad visual propia, no el aspecto genérico de Drupal.

Vas a crear un "sub-tema" (tema hijo) de Bootstrap Barrio. Es como un tema hijo en WordPress: hereda todo del tema padre y tú solo cambias lo que necesitas.

⚠️

Nunca edites el tema padre directamente

Si editas Bootstrap Barrio directamente y lo actualizan, pierdes todos tus cambios. Siempre crea un sub-tema.

Crear el sub-tema por FTP/File Manager en Hostinger

Abre el File Manager de Hostinger, navega a: public_html/webnoticias/web/themes/custom/ y crea la carpeta antpack_theme.

Archivo 1: antpack_theme.info.yml

antpack_theme/antpack_theme.info.yml name: AntPack Theme type: theme base theme: bootstrap_barrio description: Tema corporativo de Webnoticias Agency core_version_requirement: ^10 libraries: - antpack_theme/global-styling regions: header: Header primary_menu: Primary Menu content: Content sidebar_first: Sidebar footer: Footer

Archivo 2: antpack_theme.libraries.yml

antpack_theme/antpack_theme.libraries.yml global-styling: css: theme: css/style.css: {}

Archivo 3: css/style.css (colores base)

antpack_theme/css/style.css /* === AntPack Corporate Theme === */ :root { --ap-primary: #0f0f14; --ap-accent: #0073BA; --ap-text: #374151; --ap-bg: #fafaf8; } body { background: var(--ap-bg); color: var(--ap-text); } .navbar { background: var(--ap-primary) !important; } .navbar-brand { color: white !important; font-weight: 700; } .nav-link { color: rgba(255,255,255,0.75) !important; } .nav-link:hover { color: white !important; } h1, h2, h3 { color: var(--ap-primary); font-weight: 700; } a { color: var(--ap-accent); }

Crear la carpeta antpack_theme con los 3 archivos arriba (info.yml, libraries.yml, css/style.css)

En Drupal: Appearance → buscar "Webnoticias Theme" → Enable and set as default

Verificar que el sitio se ve con el fondo claro y barra de navegación oscura

Configurar el formulario de contacto: Structure → Webform → Add webform "Contacto"

Agrega campos: Nombre, Email, Empresa, Mensaje. Activa las notificaciones por email en Settings → Emails

Drupal ⏱ 20 minutos

Paso 6: Activar y verificar JSON:API

Este paso conecta Drupal con Liferay. Vas a verificar que tu API funciona antes de tocar Liferay.

JSON:API ya está incluido en Drupal 10 como módulo core. Solo necesitas activarlo y verificar que los endpoints funcionen desde el navegador.

Ir a Manage → Extend → buscar "JSON:API" → marcar el checkbox → Install

Abrir en el navegador y verificar que devuelve JSON:

webnoticias.cristch-x.com/jsonapi

webnoticias.cristch-x.com/jsonapi/node/article

webnoticias.cristch-x.com/jsonapi/node/proyecto

💡

Deberías ver algo así en el navegador

Si el JSON:API funciona, verás un JSON con {"data": [...]} con todos tus artículos. Si ves un error, ve a Configuration → JSON:API → y asegúrate de que esté en modo "Accept all JSON:API create, read, update, and delete operations".

Confirmar que /jsonapi/node/article devuelve los artículos que creaste en el paso 3

🎉 ¡Drupal terminado! El sitio público está listo. Ahora a Liferay.

Liferay ⏱ 20 minutos (descarga)

Paso 7: Instalar Docker Desktop

Docker es la herramienta que te permitirá correr Liferay (que necesita Java) en tu Mac sin instalar nada de Java manualmente.

🐳

¿Qué es Docker?

Docker crea "contenedores" — cajitas virtuales que tienen todo lo que un programa necesita para correr. Liferay necesita Java 11, un servidor de aplicaciones, y configuración específica. Docker ya trae todo eso empaquetado.

Ir a docker.com/products/docker-desktop y descargar Docker Desktop para Mac (Apple Silicon si tienes M1/M2/M3, Intel si tienes Mac más antigua)

Instalar Docker Desktop (arrastrarlo a Applications) y abrirlo

La primera vez pedirá permisos del sistema. Acepta todo.

Verificar que Docker está corriendo: abrir Terminal y escribir el comando abajo

Terminal (Mac) docker --version # Deberías ver algo como: Docker version 26.x.x

⚠️

Requisito de RAM

Liferay necesita mínimo 4GB de RAM asignados a Docker. Ve a Docker Desktop → Settings → Resources → Memory → sube a 6GB si tu Mac tiene 16GB o más.

Liferay ⏱ 15 min + 10 min para arrancar

Paso 8: Levantar Liferay con Docker

Un solo comando en la Terminal y tendrás Liferay corriendo en tu computador.

Primero descargarás la imagen de Liferay (solo la primera vez, pesa ~1GB), luego la levantarás.

Opción A: Comando rápido (solo para aprender)

Terminal — corre Liferay directo docker run -it \ -m 8g \ -p 8080:8080 \ liferay/portal:7.4.3.112-ga112 # Espera ~5 minutos hasta ver el mensaje: # "Server startup in [X] milliseconds"

Opción B: Con docker-compose (recomendado, datos persistentes)

Crea un archivo docker-compose.yml en cualquier carpeta de tu Mac:

docker-compose.yml version: "3" services: liferay: image: liferay/portal:7.4.3.112-ga112 environment: - LIFERAY_JVM_OPTS=-Xmx4g ports: - "8080:8080" volumes: - liferay_data:/opt/liferay/data volumes: liferay_data:

Terminal — en la carpeta donde está el docker-compose.yml docker-compose up -d # Para ver los logs: docker-compose logs -f

Correr uno de los dos comandos arriba en Terminal

Esperar hasta ver "Server startup in X milliseconds" en los logs

Abrir en el navegador:

localhost:8080

La primera vez te pedirá cambiar la contraseña y aceptar términos

Liferay ⏱ 45 minutos

Paso 9: Configurar el Site en Liferay

Crear el sitio de la intranet, los roles de usuario y las páginas principales del portal interno.

En Liferay, todo vive dentro de un "Site". Crearás uno llamado Webnoticias Intranet y configurarás los accesos.

ℹ️

Sites en Liferay vs Drupal

Liferay puede tener múltiples Sites en la misma instalación, cada uno con sus propios usuarios, permisos y diseño. Es similar al multisite de WordPress pero mucho más robusto para empresas.

Crear el Site

Ir al menú de hamburguesa (arriba izquierda) → Sites → Add Site

Seleccionar template "Blank Site" → Name: "Webnoticias Intranet" → Save

Crear los Roles

Ir al menú → Control Panel → Users → Roles → Add Regular Role

Crear rol "Editor Intranet": puede crear y editar contenido pero no publicar

Crear rol "Empleado": solo puede ver el contenido, nada más

Crear las páginas del portal

En el Site Webnoticias Intranet: Site Builder → Pages → Add Page (privada)

Crear página "Dashboard" (página principal del portal)

Crear página "Directorio" (para los empleados)

Crear página "Documentos" (para el repositorio de archivos)

Crear página "Noticias del Sitio" (aquí llegará el feed de Drupal)

Liferay ⏱ 60 minutos

Paso 10: Crear Web Content Structures

Las Structures en Liferay son como los Content Types de Drupal: definen qué campos tiene cada tipo de contenido.

Ve al Site Webnoticias Intranet → Content & Data → Web Content → Structures → Add Structure.

Structure 1: Empleado

Crear Structure "Empleado" con campos: Nombre (Text), Cargo (Text), Área (Select: Dev, Diseño, PM, Ventas), Foto (Image), Teléfono (Text), Email (Text)

Crear Template para la Structure Empleado (con FreeMarker básico que muestra los campos)

Agregar 3-5 empleados de prueba usando esta Structure

Structure 2: Proyecto Interno

Crear Structure "Proyecto Interno" con campos: Nombre del cliente (Text), Estado (Select: Activo/Pausado/Cerrado), Responsable (Text), Fecha inicio (Date), Descripción (Text Box)

Agregar 3 proyectos de prueba

Repositorio de documentos

Ir a Content & Data → Documents and Media → crear carpetas: Propuestas, Contratos, Plantillas, Recursos

Subir algunos PDFs de prueba a cada carpeta

Agregar el widget Documents and Media a la página "Documentos" del portal

Integración ⏱ 60 minutos

Paso 11: Conectar Drupal → Liferay

El corazón del proyecto. Liferay va a consumir la API de Drupal y mostrar los artículos del blog en la intranet en tiempo real.

Crearás un portlet (widget) en Liferay que hace una llamada a la JSON:API de Drupal y muestra las últimas noticias. Lo harás con HTML + JavaScript puro, sin necesidad de programar Java.

🔗

Cómo funciona la integración

Drupal expone los artículos en webnoticias.cristch-x.com/jsonapi/node/article. Liferay tiene un widget "IFrame" o "Web Content Display" donde puedes poner HTML+JS. Ese JS hace fetch() a la URL de Drupal y renderiza los datos.

Código del portlet de integración

En Liferay, ve a la página "Noticias del Sitio" → editar → agregar widget → busca "IFrame" o "Web Content Display" → pega este HTML:

Portlet HTML — Feed de Drupal en Liferay <div id="drupal-feed"> <h3>📰 Últimas noticias del sitio</h3> <div id="feed-content">Cargando...</div> </div> <script> const API = 'https://webnoticias.cristch-x.com/jsonapi/node/article'; const PARAMS = '?sort=-created&page[limit]=5&fields[node--article]=title,created,path'; fetch(API + PARAMS) .then(r => r.json()) .then(data => { const container = document.getElementById('feed-content'); if (!data.data || data.data.length === 0) { container.innerHTML = '<p>No hay artículos.</p>'; return; } container.innerHTML = data.data.map(a => ` <div style="padding:12px 0;border-bottom:1px solid #eee"> <a href="https://webnoticias.cristch-x.com${a.attributes.path.alias}" target="_blank" style="font-weight:600;text-decoration:none"> ${a.attributes.title} </a> <div style="font-size:12px;color:#888;margin-top:4px"> ${new Date(a.attributes.created).toLocaleDateString('es-CO')} </div> </div> `).join(''); }) .catch(() => { document.getElementById('feed-content').innerHTML = '<p style="color:red">Error al cargar noticias.</p>'; }); </script>

En Liferay: ir a la página "Noticias del Sitio" → Click en el lápiz de editar → Add Fragment or Widget

Buscar widget "IFrame" o "Custom HTML" → agregarlo a la página

Pegar el código HTML+JS del bloque arriba en el widget

Guardar y verificar que aparecen los artículos de Drupal en la página de Liferay

Integración ⏱ 30 minutos

Paso 12: Prueba final del flujo completo

Verificar que todo funciona de punta a punta: publicar en Drupal y verlo reflejado en la intranet de Liferay.

Este es el momento de verdad. Vamos a hacer el flujo completo del sistema.

🧪 Prueba del flujo integrado

En Drupal (webnoticias.cristch-x.com/admin): crear un nuevo artículo y publicarlo

En Liferay (localhost:8080): ir a la página "Noticias del Sitio" y refrescar

Confirmar que el artículo nuevo aparece en el feed de Liferay

Hacer screenshots de: el sitio público de Drupal, la intranet de Liferay y el feed integrado

Crear repositorio en GitHub: Webnoticias-corporate-hub con README y las capturas

🎉 ¡Proyecto completado! Tienes un sistema enterprise real en tu portafolio.

🚀

Lo que lograste

Construiste una arquitectura que usan empresas como universidades, bancos y corporaciones. Drupal como CMS headless exponiendo una API, Liferay como portal enterprise consumiéndola. Eso es exactamente lo que tu líder Geraldine quería que aprendieras.