
Desgarga de APEX: https://www.oracle.com/tools/downloads/apex-downloads/
Descarga de Oracle Database : https://www.oracle.com/database/free/get-started/#windows
Descarga de ORDS: https://www.oracle.com/database/sqldeveloper/technologies/db-actions/download/
Los parametros de instalacion de ORDS
ORDS Install — Guía del Asistente Interactivo │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ Installation Type: │
│ [1] Install or upgrade ORDS in the database │
│ → Selecciona opción 1 │
│ │
│ Connection Type: │
│ [1] Basic (Host, Port, Service Name) │
│ → Selecciona opción 1 (la más común para instalaciones locales) │
│ │
│ Hostname: [localhost] │
│ → Presiona Enter para aceptar localhost │
│ │
│ Port: [1521] │
│ → Presiona Enter para aceptar 1521 │
│ │
│ Service Name: │
│ → Escribe: FREEPDB1 │
│ │
│ Administrator Username: [SYS] │
│ → Presiona Enter para aceptar SYS │
│ │
│ Administrator Password: │
│ → Escribe la contraseña de SYS que configuraste al instalar la BD │
│ │
│ Default Tablespace: [SYSAUX] │
│ → Presiona Enter para aceptar │
│ │
│ Temp Tablespace: [TEMP] │
│ → Presiona Enter para aceptar │
│ │
│ APEX Static Resources: │
│ → Escribe la ruta a la carpeta images de APEX: │
│ Windows: C:\ords\images │
│ Linux: /opt/apex/images │
│ │
│ Start ORDS in standalone mode when installation completes? [Y] │
│ → Escribe Y para iniciar automáticamente al finalizar │
│ │
│ Standalone HTTP Port: [8090] │
│ → Presiona Enter para aceptar 8090 (o escribe otro puerto)
Variable de configuracion en Tomcat9w.exe : -Dconfig.url=C:\ords\config
**Paso 1: La Consulta SQL**
Vamos a traer los datos puros sin formatearlos en SQL, dejaremos que el HTML/CSS haga el trabajo visual.
```sql
SELECT EMPLOYEE_ID,
FIRST_NAME || ' ' || LAST_NAME AS CARD_TITLE,
JOB_TITLE,
EMAIL,
SALARY,
'https://ui-avatars.com/api/?name=' || FIRST_NAME || '+' || LAST_NAME || '&background=random' AS AVATAR_URL,
HIRE_DATE
FROM OEHR_EMPLOYEES E
JOIN OEHR_JOBS J ON E.JOB_ID = J.JOB_ID
```
**Paso 2: CSS Personalizado**
En las propiedades de la página (Page Properties) -> **CSS -> Inline**, agregamos nuestro estilo moderno:
```css
/* Contenedor personalizado para la tarjeta */
.custom-adv-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Efecto Hover interactivo */
.a-CardView-item:hover .custom-adv-card {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
border-color: #3b82f6; /* Borde azul moderno al pasar el mouse */
}
/* Estilos de la imagen de perfil */
.custom-adv-card img.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
border: 3px solid #eff6ff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Tipografía */
.custom-adv-card .name {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.custom-adv-card .role {
font-size: 0.875rem;
color: #64748b;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
margin-bottom: 15px;
}
/* Badges de información (Salario y Fecha) */
.custom-adv-card .stats-container {
display: flex;
gap: 10px;
width: 100%;
justify-content: center;
}
.custom-adv-card .stat-badge {
background: #f1f5f9;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
color: #475569;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
```
**Paso 3: HTML Expression en APEX**
En los atributos de la región Cards:
1. Apaga el *Title*, *Subtitle* y *Icon* (ponlos en "None").
2. Ve a **Body**, elige **HTML Expression**.
```html
<div class="custom-adv-card">
<!-- Imagen de Perfil -->
<img src="&AVATAR_URL." alt="&FIRST_NAME. &LAST_NAME." class="avatar">
<!-- Info Principal -->
<h3 class="name">&FIRST_NAME. &LAST_NAME.</h3>
<p class="role">&JOB_TITLE.</p>
<!-- Estadísticas (Flexbox) -->
<div class="stats-container">
<span class="stat-badge">
<i class="fa fa-money"></i> $&SALARY.
</span>
<span class="stat-badge">
<i class="fa fa-calendar"></i> &HIRE_DATE.
</span>
</div>
</div>
SCRIPT
SELECT
d.department_name,
COUNT(e.employee_id) empleados,
ROUND(
COUNT(e.employee_id) * 100 /
MAX(COUNT(e.employee_id)) OVER (),
0
) porcentaje
FROM OEHR_DEPARTMENTS d
LEFT JOIN OEHR_EMPLOYEES e
ON d.department_id = e.department_id
GROUP BY d.department_name
ORDER BY empleados DESC
Expresion HTML
<div class="rrhh-bar-card">
<div class="rrhh-header">
<span class="rrhh-depto">
#DEPARTMENT_NAME#
</span>
<span class="rrhh-total">
#EMPLEADOS# empleados
</span>
</div>
<div class="rrhh-progress">
<div class="rrhh-fill"
style="width:#PORCENTAJE#%">
</div>
</div>
</div>
CSS INLINE
.rrhh-bar-card{
padding:12px;
margin-bottom:12px;
background:white;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}
.rrhh-header{
display:flex;
justify-content:space-between;
margin-bottom:8px;
}
.rrhh-depto{
font-weight:600;
color:#1f2937;
}
.rrhh-total{
color:#64748b;
font-size:13px;
}
.rrhh-progress{
height:14px;
background:#e5e7eb;
border-radius:20px;
overflow:hidden;
}
.rrhh-fill{
height:100%;
border-radius:20px;
background:linear-gradient(
90deg,
#2563eb,
#60a5fa
);
}
Expression: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
El recurso proporcionado debes adaptarlo a tu aplicacion
BEGIN
-- Crear módulo
ORDS.DEFINE_MODULE(
p_module_name => 'api_empleados',
p_base_path => '/api/v1/',
p_items_per_page => 25,
p_status => 'PUBLISHED',
p_comments => 'API de gestión de empleados v1'
);
END
Oracle APEX se ha convertido en una de las plataformas más potentes y demandadas para el desarrollo rápido de aplicaciones empresariales. Gracias a su integración nativa con Oracle Database, su enfoque low-code y sus capacidades modernas impulsadas por Inteligencia Artificial, hoy es posible crear aplicaciones profesionales, escalables y seguras en mucho menos tiempo.
En este curso aprenderás Oracle APEX desde cero hasta un nivel avanzado y profesional, siguiendo una ruta estructurada y práctica que te permitirá comprender tanto los fundamentos como las características más modernas de la plataforma.
Comenzaremos desde la introducción a Oracle APEX y su interfaz, donde aprenderás a navegar correctamente dentro del entorno de desarrollo. Posteriormente, trabajarás con bases de datos, SQL Workshop y creación de aplicaciones reales utilizando componentes modernos de interfaz de usuario, reportes interactivos, dashboards y formularios empresariales.
A medida que avances, entrarás en temas más avanzados como acciones dinámicas, JavaScript, seguridad, autenticación, integración con APIs REST y servicios web. Además, aprenderás personalización visual, despliegue profesional de aplicaciones y buenas prácticas utilizadas en entornos corporativos.
Uno de los mayores diferenciales de este curso es que incluye las novedades más recientes desde Oracle APEX 24.2 hasta Oracle APEX 26.1, incluyendo integración con Inteligencia Artificial y APEXLang, permitiéndote mantenerte actualizado con las tecnologías más modernas del ecosistema Oracle.
Este curso está diseñado con un enfoque completamente práctico, orientado al mundo real y enfocado en ayudarte a desarrollar habilidades altamente demandadas en el mercado laboral actual.
Si quieres convertirte en un desarrollador Oracle APEX profesional y aprender a crear aplicaciones modernas, inteligentes y empresariales, este curso es para ti.