{"id":11225,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc)"},"content":{"rendered":"<p>El\u00a0<strong>modelo C4<\/strong>, creado por Simon Brown, es una forma sencilla, jer\u00e1rquica y amigable para desarrolladores de visualizar la arquitectura de software. Utiliza cuatro niveles de abstracci\u00f3n (de ah\u00ed el \u201cC4\u201d) para describir un sistema desde una visi\u00f3n de alto nivel hasta detalles a nivel de c\u00f3digo:<\/p>\n<ol>\n<li>\n<p><strong>Contexto del sistema<\/strong>\u00a0(Nivel 1) \u2013 La visi\u00f3n general: el sistema y sus usuarios\/dependencias externas.<\/p>\n<\/li>\n<li>\n<p><strong>Contenedores<\/strong>\u00a0(Nivel 2) \u2013 Elecciones tecnol\u00f3gicas de alto nivel y responsabilidades.<\/p>\n<\/li>\n<li>\n<p><strong>Componentes<\/strong>\u00a0(Nivel 3) \u2013 Principales bloques l\u00f3gicos dentro de un contenedor.<\/p>\n<\/li>\n<li>\n<p><strong>C\u00f3digo<\/strong>\u00a0(Nivel 4) \u2013 Detalles opcionales a nivel de clase o estructura de c\u00f3digo.<\/p>\n<\/li>\n<\/ol>\n<p>Est\u00e1 respaldado por tres tipos adicionales de diagramas:<\/p>\n<ul>\n<li>\n<p><strong>Mapa del sistema<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Din\u00e1mico<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Despliegue<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">El modelo es independiente de notaci\u00f3n (puedes usar cualquier herramienta de diagramaci\u00f3n) y se centra en la claridad, la consistencia y los detalles adecuados para el p\u00fablico objetivo. Es ampliamente adoptado porque evita los diagramas de arquitectura de tipo &#8216;bola de lodo&#8217; y escala desde bocetos en pizarra hasta documentaci\u00f3n automatizada.<\/p>\n<p>Para este\u00a0<strong>estudio de caso dirigido<\/strong>, utilizamos el ejemplo can\u00f3nico del sitio web oficial de C4:\u00a0<strong>Sistema de banca en l\u00ednea<\/strong>\u00a0para la ficticia \u201cBig Bank plc\u201d. El objetivo comercial es permitir a los clientes personales ver sus cuentas y realizar pagos en l\u00ednea, al tiempo que se integra con los sistemas centrales existentes del banco.<\/p>\n<p>Revisaremos\u00a0<strong>cada nivel<\/strong>\u00a0con:<\/p>\n<ul>\n<li>\n<p>Prop\u00f3sito y p\u00fablico objetivo<\/p>\n<\/li>\n<li>\n<p>Elementos clave + responsabilidades<\/p>\n<\/li>\n<li>\n<p>Relaciones<\/p>\n<\/li>\n<li>\n<p>Un diagrama C4 de PlantUML listo para usar\u00a0<strong>diagrama C4 de PlantUML<\/strong>(PlantUML admite la sintaxis C4 y se representa magn\u00edficamente en la mayor\u00eda de los visualizadores de Markdown)<\/p>\n<\/li>\n<li>\n<p>Razonamiento y decisiones clave<\/p>\n<\/li>\n<li>\n<p>C\u00f3mo ayuda el diagrama a los interesados<\/p>\n<\/li>\n<\/ul>\n<h3>Paso 1: Definir el alcance y crear el diagrama de contexto del sistema (Nivel 1)<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Mostrar c\u00f3mo se integra el nuevo Sistema de Banca en L\u00ednea en el mundo. P\u00fablico objetivo: interesados del negocio, personas no t\u00e9cnicas y nuevos miembros del equipo.<\/p>\n<p><strong>Elementos<\/strong>\u00a0(desde el ejemplo oficial):<\/p>\n<ul>\n<li>\n<p><strong>Cliente de Banca Personal<\/strong>\u00a0(Persona) \u2013 Un cliente con una o m\u00e1s cuentas bancarias personales.<\/p>\n<\/li>\n<li>\n<p><strong>Sistema de Banca en L\u00ednea<\/strong>\u00a0(Sistema de software) \u2013 El nuevo sistema que estamos construyendo.<\/p>\n<\/li>\n<li>\n<p><strong>Sistema de Banca Principal<\/strong>\u00a0(Sistema de software, existente) \u2013 Mainframe que gestiona los datos del cliente, las cuentas y las transacciones.<\/p>\n<\/li>\n<li>\n<p><strong>Sistema de Correo<\/strong>\u00a0(Sistema de software, externo) \u2013 Servicio Simple de Correo de Amazon Web Services (AWS SES) para enviar confirmaciones.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Relaciones<\/strong>:<\/p>\n<ul>\n<li>\n<p>Cliente \u2192 utiliza \u2192 Sistema de Banca en L\u00ednea (para ver cuentas y realizar pagos)<\/p>\n<\/li>\n<li>\n<p>Sistema de Banca en L\u00ednea \u2192 utiliza \u2192 Sistema de Banca Principal (para datos de cuentas y pagos)<\/p>\n<\/li>\n<li>\n<p>Sistema de Banca en L\u00ednea \u2192 env\u00eda correo a trav\u00e9s de \u2192 Sistema de Correo<\/p>\n<\/li>\n<\/ul>\n<p>Aqu\u00ed est\u00e1 el\u00a0<strong>Diagrama de contexto C4 de PlantUML<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><code data-language=\"mermaid\"><\/code><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagrama de contexto del sistema (Nivel 1) para el Sistema de Banca en L\u00ednea\r\n\r\nPerson(cliente, \"Cliente de Banca Personal\", \"Un cliente con una o m\u00e1s cuentas bancarias personales.\")\r\nSystem(sistema_banca_linea, \"Sistema de Banca en L\u00ednea\", \"El nuevo sistema para ver cuentas y realizar pagos.\")\r\nSystem(sistema_banca_principal, \"Sistema de Banca Principal\", \"Mainframe existente que gestiona datos del cliente, cuentas y transacciones.\")\r\nSystem_Ext(sistema_correo, \"Sistema de Correo\", \"Servicio Simple de Correo de Amazon Web Services (AWS SES) para enviar confirmaciones.\")\r\n\r\nRel(cliente, sistema_banca_linea, \"Utiliza\")\r\nRel(sistema_banca_linea, sistema_banca_principal, \"Utiliza\")\r\nRel(sistema_banca_linea, sistema_correo, \"Env\u00eda correo a trav\u00e9s de\")\r\n\r\nLay_D(cliente, sistema_banca_linea)\r\nLay_D(sistema_banca_linea, sistema_banca_principal)\r\nLay_U(sistema_correo, sistema_banca_linea)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>Razonamiento y valor<\/strong>: Este diagrama \u00fanico responde de inmediato a \u00ab\u00bfQu\u00e9 estamos construyendo y con qui\u00e9n se comunica?\u00bb. Evita el crecimiento del alcance al hacer expl\u00edcitas las dependencias externas. A los interesados del negocio les encanta porque a\u00fan no hay detalles tecnol\u00f3gicos.<\/p>\n<h3>Paso 2: Diagrama de contenedores (Nivel 2)<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Ampliar el enfoque en el Sistema de Banca en L\u00ednea y mostrar las unidades principales desplegables\/ejecutables (contenedores) y sus elecciones tecnol\u00f3gicas. P\u00fablico objetivo: arquitectos, desarrolladores principales y operaciones.<\/p>\n<p><strong>Contenedores dentro del Sistema de Banca en L\u00ednea<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>Aplicaci\u00f3n de p\u00e1gina \u00fanica<\/strong>\u00a0(Navegador web \u2013 JavaScript + Angular) \u2013 Interfaz completa de banca en l\u00ednea.<\/p>\n<\/li>\n<li>\n<p><strong>Aplicaci\u00f3n m\u00f3vil<\/strong>\u00a0(Dispositivo m\u00f3vil \u2013 nativo iOS\/Android o React Native) \u2013 Funcionalidad limitada para uso m\u00f3vil.<\/p>\n<\/li>\n<li>\n<p><strong>Aplicaci\u00f3n de API<\/strong>\u00a0(Lado del servidor \u2013 Java + Spring Boot) \u2013 API de JSON\/HTTPS utilizada por ambos front-ends.<\/p>\n<\/li>\n<li>\n<p><strong>Base de datos<\/strong>\u00a0(BD relacional \u2013 PostgreSQL) \u2013 Almacena datos de sesi\u00f3n, preferencias del usuario, res\u00famenes de cuentas en cach\u00e9 (los datos principales permanecen en el mainframe).<\/p>\n<\/li>\n<\/ul>\n<p><strong>Relaciones clave<\/strong>\u00a0(mismos sistemas externos que en el nivel 1):<\/p>\n<ul>\n<li>\n<p>SPA y Aplicaci\u00f3n m\u00f3vil \u2192 llaman \u2192 Aplicaci\u00f3n de API<\/p>\n<\/li>\n<li>\n<p>Aplicaci\u00f3n de API \u2194 Base de datos<\/p>\n<\/li>\n<li>\n<p>Aplicaci\u00f3n de API \u2192 Sistema de banca central y Sistema de correo electr\u00f3nico<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagrama de contenedores C4 de PlantUML<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml<\/p>\n<p>LAYOUT_ARRIBA_ABAJO()<br \/>\nLAYOUT_CON_LEGENDA()<\/p>\n<p>t\u00edtulo Diagrama de contenedores C4 para el Sistema de Banca en L\u00ednea<\/p>\n<p>Persona(cliente, \u201cCliente de banca personal\u201d, \u201cUn cliente con una o m\u00e1s cuentas bancarias personales.\u201d)<\/p>\n<p>L\u00edmite_del_sistema(internet_banking_system, \u201cSistema de banca en l\u00ednea\u201d, \u201cEl nuevo sistema para ver cuentas y realizar pagos.\u201d) {<br \/>\nContenedor(spa, \u201cAplicaci\u00f3n de p\u00e1gina \u00fanica\u201d, \u201cJavaScript + Angular\u201d, \u201cInterfaz completa de banca en l\u00ednea\u201d, $sprite=\u201dangular\u201d)<br \/>\nContenedor(mobile_app, \u201cAplicaci\u00f3n m\u00f3vil\u201d, \u201ciOS\/Android (React Native)\u201d, \u201cFuncionalidad limitada para uso m\u00f3vil\u201d, $sprite=\u201dreact\u201d)<br \/>\nContenedor(api_app, \u201cAplicaci\u00f3n de API\u201d, \u201cJava + Spring Boot\u201d, \u201cAPI de JSON\/HTTPS utilizada por ambos front-ends\u201d, $sprite=\u201djava\u201d)<br \/>\nContainerDb(database, \u201cBase de datos\u201d, \u201cPostgreSQL\u201d, \u201cAlmacena datos de sesi\u00f3n, preferencias de usuario y res\u00famenes de cuentas en cach\u00e9\u201d, $sprite=\u201dpostgresql\u201d)<br \/>\n}<\/p>\n<p>System(core_banking_system, \u201cSistema principal de banca\u201d, \u201cMainframe existente que maneja datos de clientes, cuentas y transacciones.\u201d)<br \/>\nSystem_Ext(email_system, \u201cSistema de correo electr\u00f3nico\u201d, \u201cServicio Simple de Correo Electr\u00f3nico de Amazon Web Services (AWS SES) para enviar confirmaciones.\u201d)<\/p>\n<p>\u2018 Relaciones<br \/>\nRel(cliente, spa, \u201cUtiliza\u201d, \u201cHTTPS\u201d)<br \/>\nRel(cliente, app_m\u00f3vil, \u201cUtiliza\u201d, \u201cHTTPS\u201d)<br \/>\nRel(spa, app_api, \u201cLlama a\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(app_m\u00f3vil, app_api, \u201cLlama a\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(app_api, base_de_datos, \u201cLee y escribe en\u201d, \u201cJDBC\/SQL\u201d)<br \/>\nRel(app_api, sistema_principal_de_banca, \u201cConsulta \/ Actualiza\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(app_api, sistema_correo, \u201cEnv\u00eda correo electr\u00f3nico mediante\u201d, \u201cHTTPS\u201d)<\/p>\n<p>\u2018 Indicaciones de dise\u00f1o (opcional \u2013 ayuda a PlantUML organizar mejor los elementos)<br \/>\nLay_D(cliente, sistema_banco_en_linea)<br \/>\nLay_D(sistema_banco_en_linea, sistema_principal_de_banca)<br \/>\nLay_U(sistema_correo, sistema_banco_en_linea)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Raz\u00f3n<\/strong>: Elegimos un patr\u00f3n moderno de SPA + backend de API para web, una aplicaci\u00f3n m\u00f3vil nativa para rendimiento, y mantuvimos la base de datos ligera (la mayor\u00eda de los datos residen en el mainframe heredado). Este diagrama es la \u00fanica fuente de verdad para decisiones tecnol\u00f3gicas de alto nivel y ayuda a DevOps a planificar la infraestructura.<\/p>\n<h3>Paso 3: Diagrama de componentes (Nivel 3)<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Ampliar un contenedor (normalmente el m\u00e1s complejo \u2013 la aplicaci\u00f3n API) y mostrar sus componentes l\u00f3gicos principales. P\u00fablico objetivo: equipos de desarrollo.<\/p>\n<p><strong>Ejemplo: Componentes dentro de la aplicaci\u00f3n API<\/strong>:<\/p>\n<ul>\n<li>\n<p>Controlador de cuentas (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>Controlador de autenticaci\u00f3n<\/p>\n<\/li>\n<li>\n<p>Controlador de restablecimiento de contrase\u00f1a<\/p>\n<\/li>\n<li>\n<p>Componente de seguridad (gestiona autenticaci\u00f3n, JWT, etc.)<\/p>\n<\/li>\n<li>\n<p>Componente de gesti\u00f3n de cuentas (orquesta llamadas al sistema principal de banca)<\/p>\n<\/li>\n<li>\n<p>Componente de notificaci\u00f3n por correo electr\u00f3nico<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagrama de componentes C4 de PlantUML<\/strong>\u00a0(enfocado en la aplicaci\u00f3n de API):<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagrama de componentes para el sistema de banca en l\u00ednea - Aplicaci\u00f3n de API\r\n\r\nContainer(spa, \"Aplicaci\u00f3n de p\u00e1gina \u00fanica\", \"javascript y angular\", \"Proporciona todas las funcionalidades de banca en l\u00ednea a los clientes a trav\u00e9s de su navegador web.\")\r\nContainer(ma, \"Aplicaci\u00f3n m\u00f3vil\", \"Xamarin\", \"Proporciona un subconjunto limitado de las funcionalidades de banca en l\u00ednea a los clientes a trav\u00e9s de su dispositivo m\u00f3vil.\")\r\nContainerDb(db, \"Base de datos\", \"Esquema de base de datos relacional\", \"Almacena informaci\u00f3n de registro de usuarios, credenciales de autenticaci\u00f3n cifradas, registros de acceso, etc.\")\r\nSystem_Ext(mbs, \"Sistema inform\u00e1tico principal\", \"Almacena toda la informaci\u00f3n central de banca sobre clientes, cuentas, transacciones, etc.\")\r\n\r\nContainer_Boundary(api, \"Aplicaci\u00f3n de API\") {\r\n    Component(accounts, \"Controlador de cuentas\", \"Spring MVC\", \"Proporciona res\u00famenes y saldos de cuentas a los clientes.\")\r\n    Component(auth, \"Controlador de autenticaci\u00f3n\", \"Spring MVC\", \"Maneja el inicio de sesi\u00f3n del usuario, la gesti\u00f3n de sesiones y la generaci\u00f3n de tokens.\")\r\n    Component(reset, \"Controlador de restablecimiento de contrase\u00f1a\", \"Spring MVC\", \"Permite a los usuarios restablecer su contrase\u00f1a mediante correo electr\u00f3nico.\")\r\n    Component(security, \"Componente de seguridad\", \"Spring Bean\", \"Maneja la autenticaci\u00f3n, la generaci\u00f3n de tokens JWT y el cifrado de contrase\u00f1as.\")\r\n    Component(accountmgmt, \"Componente de gesti\u00f3n de cuentas\", \"Spring Bean\", \"Orquesta las llamadas al sistema de banca central para operaciones de cuentas.\")\r\n    Component(email, \"Componente de notificaci\u00f3n por correo electr\u00f3nico\", \"Spring Bean\", \"Env\u00eda correos electr\u00f3nicos para restablecimiento de contrase\u00f1a y verificaci\u00f3n de cuentas mediante SMTP.\")\r\n\r\n    Rel(accounts, security, \"Utiliza\")\r\n    Rel(auth, security, \"Utiliza\")\r\n    Rel(reset, security, \"Utiliza\")\r\n    Rel(accountmgmt, mbs, \"Utiliza\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Lee\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Utiliza\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Utiliza\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Raz\u00f3n<\/strong>: Este nivel muestra c\u00f3mo se distribuyen las responsabilidades (separaci\u00f3n de preocupaciones) y hace que la incorporaci\u00f3n de nuevos desarrolladores sea mucho m\u00e1s r\u00e1pida. Solo dibujas diagramas de componentes para contenedores lo suficientemente complejos como para justificarlo.<\/p>\n<h3>Paso 4: Diagrama de c\u00f3digo (Nivel 4) \u2013 Opcional<\/h3>\n<p><strong>Prop\u00f3sito<\/strong>: Mostrar la estructura interna de un componente individual (diagrama de clases, secuencia, etc.). P\u00fablico objetivo: desarrolladores que trabajan en ese c\u00f3digo.<\/p>\n<p>Ejemplo para el\u00a0<strong>Controlador de autenticaci\u00f3n<\/strong>componente \u2013 un diagrama de clases UML simple en PlantUML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<p>@startuml<br \/>\ndiagramaDeClases<\/p>\n<p>skinparam {<br \/>\nroundcorner 8<br \/>\nColorFlecha #444444<br \/>\nColorFuenteFlecha #444444<br \/>\nColorBorde #444444<\/p>\n<p>Clase {<br \/>\nColorBorde #1A237E<br \/>\nColorFondo #E8EAF6<br \/>\nColorFuente #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>clase \u201cControladorDeAutenticacion\u201d {<br \/>\n+login(credenciales)<br \/>\n+refreshToken()<br \/>\n}<\/p>\n<p>clase \u201cProveedorDeTokenJwt\u201d {<br \/>\n+generateToken(usuario)<br \/>\n+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201cUserRepository\u201d {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201cusa\u201d<br \/>\nAuthenticationController ..&gt; UserRepository : \u201cusa\u201d<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>En proyectos reales, a menudo se salta el Nivel 4 y se apunta directamente al c\u00f3digo fuente real.<\/p>\n<h3>Paso 5: Diagramas de apoyo<\/h3>\n<p><strong>Diagrama din\u00e1mico<\/strong>\u00a0(ejemplo: flujo de \u201cVer resumen de cuenta\u201d) <\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>t\u00edtulo Diagrama din\u00e1mico para Ver resumen de cuenta<\/p>\n<p>Person(customer, \u201cCliente de banca personal\u201d) {<br \/>\nContainer(spa, \u201cAplicaci\u00f3n de p\u00e1gina \u00fanica\u201d) {<br \/>\nContainer(api, \u201cAplicaci\u00f3n de API\u201d) {<br \/>\nContainerDb(db, \u201cBase de datos\u201d) {<br \/>\nSystem_Ext(coreBanking, \u201cSistema de banca central\u201d)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(customer, spa, \u201c1. Hace clic en \u2018Cuentas\u2019\u201d, \u201c\u201d)<br \/>\nRel(spa, api, \u201c2. GET \/accounts\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api, db, \u201c3. Leer resumen en cach\u00e9\u201d, \u201c\u201d)<br \/>\nRel(api, coreBanking, \u201c4. Obtener datos m\u00e1s recientes\u201d, \u201c\u201d)<br \/>\nRel(api, spa, \u201c5. Devolver JSON\u201d, \u201c\u201d)<\/p>\n<p>MOSTRAR_LEGENDA()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Diagrama de Despliegue<\/strong>\u00a0(mapeo f\u00edsico de alto nivel):<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>t\u00edtulo Diagrama de Despliegue para el Sistema de Banca en L\u00ednea<\/p>\n<p>Nodo_Despliegue(aws, \u201cAmazon Web Services\u201d, \u201cNube\u201d) {<br \/>\nNodo_Despliegue(ec2, \u201cGrupo de Autoescalado EC2\u201d, \u201cLinux\u201d) {<br \/>\nContenedor(api, \u201cAplicaci\u00f3n de API\u201d, \u201cJava Spring Boot\u201d)<br \/>\n}<br \/>\nNodo_Despliegue(rds, \u201cRDS\u201d, \u201cPostgreSQL\u201d) {<br \/>\nContenedorDb(db, \u201cBase de datos\u201d)<br \/>\n}<br \/>\n}<\/p>\n<p>Nodo_Despliegue(customerDevice, \u201cDispositivo del Cliente\u201d, \u201cWeb\/M\u00f3vil\u201d) {<br \/>\nContenedor(spa, \u201cAplicaci\u00f3n de P\u00e1gina \u00danica\u201d)<br \/>\nContenedor(mobile, \u201cAplicaci\u00f3n M\u00f3vil\u201d)<br \/>\n}<\/p>\n<p>Sistema_Ext(coreBanking, \u201cSistema de Banca Central (mainframe local)\u201d)<\/p>\n<p>Rel(spa, api, \u201cRealiza llamadas a la API\u201d, \u201cHTTPS\u201d)<br \/>\nRel(mobile, api, \u201cRealiza llamadas a la API\u201d, \u201cHTTPS\u201d)<br \/>\nRel_U(api, spa, \u201cEntrega al navegador web del cliente\u201d)<br \/>\nRel_U(api, mobile, \u201cEntrega a la aplicaci\u00f3n m\u00f3vil\u201d)<\/p>\n<p>MOSTRAR_LEGENDA()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>C\u00f3mo utilizar este estudio de caso en la pr\u00e1ctica<\/h3>\n<ol>\n<li>\n<p>Comience con un taller: dibuje el contexto en una pizarra.<\/p>\n<\/li>\n<li>\n<p>Itere hacia Contenedores y Componentes utilizando PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Mantenga los diagramas en el repositorio de c\u00f3digo (como c\u00f3digo!) para que permanezcan actualizados.<\/p>\n<\/li>\n<li>\n<p>Genere documentaci\u00f3n viviente autom\u00e1ticamente.<\/p>\n<\/li>\n<\/ol>\n<p>Este ejemplo exacto del sistema de banca en l\u00ednea es la referencia oficial creada por Simon Brown y se utiliza en miles de organizaciones de todo el mundo. Al seguir estos pasos, ahora tiene una descripci\u00f3n completa y lista para producci\u00f3n de la arquitectura que cualquiera, desde el CEO hasta un nuevo desarrollador junior, puede entender al nivel adecuado de detalle.<\/p>\n<h3>Art\u00edculos sobre diagramas C4<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Gu\u00eda definitiva para la visualizaci\u00f3n del modelo C4 utilizando las herramientas de IA de Visual Paradigm<\/strong><\/a>: Esta gu\u00eda explica c\u00f3mo aprovechar herramientas impulsadas por IA para automatizar y mejorar la visualizaci\u00f3n del modelo C4, con el fin de dise\u00f1ar arquitecturas de software m\u00e1s r\u00e1pidas.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Aprovechando el estudio C4 de IA de Visual Paradigm para una documentaci\u00f3n de arquitectura m\u00e1s \u00e1gil<\/strong><\/a>: Este art\u00edculo detalla el uso de un estudio mejorado con IA para crear documentaci\u00f3n de arquitectura de software limpia, escalable y mantenible.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>La gu\u00eda definitiva para el estudio C4-PlantUML: revolucionando el dise\u00f1o de arquitectura de software<\/strong><\/a>: Este recurso explora la combinaci\u00f3n de la automatizaci\u00f3n impulsada por IA, la claridad del modelo C4 y la flexibilidad de PlantUML en una sola herramienta potente.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Una gu\u00eda completa sobre el estudio C4 PlantUML impulsado por IA de Visual Paradigm<\/strong><\/a>: Esta gu\u00eda describe una herramienta dise\u00f1ada espec\u00edficamente, lanzada a finales de 2025, que transforma las instrucciones en lenguaje natural en diagramas C4 con capas.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>Estudio C4-PlantUML | Generador de diagramas C4 impulsado por IA<\/strong><\/a>: Esta vista general de caracter\u00edsticas destaca una herramienta impulsada por IA dise\u00f1ada para generar diagramas de arquitectura de software C4 a partir de descripciones de texto simples.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>Generaci\u00f3n y modificaci\u00f3n de diagramas de componentes C4 con el chatbot de IA de Visual Paradigm<\/strong><\/a>: Esta gu\u00eda muestra c\u00f3mo utilizar un chatbot impulsado por IA para crear y refinar iterativamente la arquitectura a nivel de componentes para sistemas complejos.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>Generador de diagramas C4 impulsado por IA: niveles principales y vistas de apoyo<\/strong><\/a>: Esta p\u00e1gina explica c\u00f3mo el generador de IA apoya los cuatro niveles principales del modelo C4: contexto, contenedor, componente y despliegue, para ofrecer una documentaci\u00f3n completa.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Generador de diagramas de IA: lanzamiento con soporte completo para el modelo C4<\/strong><\/a>: Esta actualizaci\u00f3n detalla la integraci\u00f3n de funciones impulsadas por IA para la creaci\u00f3n automatizada de diagramas jer\u00e1rquicos del modelo C4.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>Generador de IA del modelo C4: automatizando todo el ciclo de modelado<\/strong><\/a>: Este recurso destaca c\u00f3mo un chatbot de IA especializado utiliza prompts conversacionales para garantizar la consistencia en la documentaci\u00f3n de arquitectura para equipos DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Revisi\u00f3n completa: chatbots de IA gen\u00e9ricos frente a las herramientas C4 de Visual Paradigm<\/strong><\/a>: Esta comparaci\u00f3n explica por qu\u00e9 las herramientas especializadas como el estudio C4 PlantUML ofrecen resultados m\u00e1s estructurados y de mayor calidad profesional que los modelos de lenguaje generales.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El\u00a0modelo C4, creado por Simon Brown, es una forma sencilla, jer\u00e1rquica y amigable para desarrolladores de visualizar la arquitectura de<\/p>\n","protected":false},"author":11,"featured_media":11226,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[110],"tags":[],"class_list":["post-11225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc) - Cibermedio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc) - Cibermedio\" \/>\n<meta property=\"og:description\" content=\"El\u00a0modelo C4, creado por Simon Brown, es una forma sencilla, jer\u00e1rquica y amigable para desarrolladores de visualizar la arquitectura de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cibermedio\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":2142,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc) - Cibermedio\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/es\/\",\"name\":\"Cibermedio\",\"description\":\"Aprendiendo una cosa nueva todos los d\u00edas\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/es\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc) - Cibermedio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"es_ES","og_type":"article","og_title":"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc) - Cibermedio","og_description":"El\u00a0modelo C4, creado por Simon Brown, es una forma sencilla, jer\u00e1rquica y amigable para desarrolladores de visualizar la arquitectura de","og_url":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cibermedio","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"Escrito por":"curtis","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":2142,"image":{"@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc) - Cibermedio","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/es\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/es\/"},{"@type":"ListItem","position":2,"name":"Un estudio de caso completo paso a paso: Aplicaci\u00f3n del modelo C4 al sistema de banca en l\u00ednea (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/es\/#website","url":"https:\/\/www.cybermedian.com\/es\/","name":"Cibermedio","description":"Aprendiendo una cosa nueva todos los d\u00edas","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/es\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts\/11225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/comments?post=11225"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts\/11225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/media\/11226"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/media?parent=11225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/categories?post=11225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/tags?post=11225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}