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 "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.ymlname: AntPack Theme
type: theme
base theme: bootstrap_barrio
description: Tema corporativo de AntPack Agency
core_version_requirement: ^10
libraries:
- antpack_theme/global-styling
regions:
header: Header
primary_menu: Primary Menu
content: Content
sidebar_first: Sidebar
footer: Footer
Crear la carpeta antpack_theme con los 3 archivos arriba (info.yml, libraries.yml, css/style.css)
En Drupal: Appearance → buscar "AntPack 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:
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
Login con usuario: test@liferay.com y contraseña: test
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 AntPack 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: "AntPack 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 AntPack 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 AntPack 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:
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: antpack-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.