{"id":11326,"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 \u00abC4\u00bb) para describir un sistema desde una visi\u00f3n de alto nivel hasta detalles a nivel de c\u00f3digo:<\/p>\n<ol>\n<li><strong>Contexto del sistema<\/strong>\u00a0(Nivel 1) \u2013 La visi\u00f3n general: el sistema y sus usuarios\/dependencias externas.<\/li>\n<li><strong>Contenedores<\/strong>\u00a0(Nivel 2) \u2013 Elecciones tecnol\u00f3gicas de alto nivel y responsabilidades.<\/li>\n<li><strong>Componentes<\/strong>\u00a0(Nivel 3) \u2013 Principales bloques l\u00f3gicos dentro de un contenedor.<\/li>\n<li><strong>C\u00f3digo<\/strong>\u00a0(Nivel 4) \u2013 Detalles opcionales a nivel de clase o estructura de c\u00f3digo.<\/li>\n<\/ol>\n<p>Est\u00e1 respaldado por tres tipos adicionales de diagramas:<\/p>\n<ul>\n<li><strong>Mapa del sistema<\/strong><\/li>\n<li><strong>Din\u00e1mico<\/strong><\/li>\n<li><strong>Despliegue<\/strong><\/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 \u00abbola de lodo\u00bb 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 \u00abBig Bank plc\u00bb. 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>Prop\u00f3sito y p\u00fablico objetivo<\/li>\n<li>Elementos clave + responsabilidades<\/li>\n<li>Relaciones<\/li>\n<li>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 visores de Markdown)<\/li>\n<li>Raz\u00f3n y decisiones clave<\/li>\n<li>C\u00f3mo ayuda el diagrama a los interesados<\/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 por Internet 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><strong>Cliente de Banca Personal<\/strong>\u00a0(Persona) \u2013 Un cliente con una o m\u00e1s cuentas bancarias personales.<\/li>\n<li><strong>Sistema de Banca por Internet<\/strong>\u00a0(Sistema de software) \u2013 El nuevo sistema que estamos construyendo.<\/li>\n<li><strong>Sistema de Banca Principal<\/strong>\u00a0(Sistema de software, existente) \u2013 Mainframe que gestiona los datos del cliente, las cuentas y las transacciones.<\/li>\n<li><strong>Sistema de correo electr\u00f3nico<\/strong>\u00a0(Sistema de software, externo) \u2013 Servicio Simple de Correo Electr\u00f3nico de Amazon Web Services (AWS SES) para enviar confirmaciones.<\/li>\n<\/ul>\n<p><strong>Relaciones<\/strong>:<\/p>\n<ul>\n<li>Cliente \u2192 utiliza \u2192 Sistema de Banca por Internet (para ver cuentas y realizar pagos)<\/li>\n<li>Sistema de Banca por Internet \u2192 utiliza \u2192 Sistema de Banca Principal (para datos de cuentas y pagos)<\/li>\n<li>Sistema de Banca por Internet \u2192 env\u00eda correo electr\u00f3nico a trav\u00e9s de \u2192 Sistema de correo electr\u00f3nico<\/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\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bLJ1Rjf04BqZyGzJJY0LKAMUUWe5gur40DLOg2ThM2PqfVMkkxks87_JOmyzzHFuiSpQnYHgI9NRykQzcJVpB6wSH-kBJ7KxxwGMgjWH_F0-Tv_6OovvAKQbT0MgOOuMTtAVZOJ9nhb27LH3vtTARiVJZyDLW9Ax-JX3vyaob4wDzdJmexpgt-tC9z-NoJfTBrVfRBbPz0SjjBbTVqtdqPTeCGjej-EbLmGpYNkB6GAx4dKpmsy5Jl8CnliBMVBF3mC8ze2VSLDXnMVK0Y4t5cvPQZNvq7b5rXdT5qeIe--XDwrV5qNDGDNZOgAXOGO3K6W40zdfbmDHC8eEja5Z9R_oHaTkrECbucDmqc-ifXKlbOqJRlsgqp0xKg0BAasxRRLZIRQTVGHBgEG3MgxjpIjpSylfoXpLIuDNvsAOUeTIt_FH2UWGY67rdmN1dfoNl1xiq1jNfT3UyEB7MzGEXM3cipEaqS6tbeInbinp9pN62PBmzlHNIs62cvXiARaRvvhbgWffMZEZ9ym0Jp9yu8Gsj8LQH0xwaqqCSHIVFmzTIZuL1talROPFJ7OxtqXTlechcILUXdC7IH1Surs__HiRj9UAT7dwWozT2J0SlJpz3fdKkypncCx-jytWp7lZ4eqk-IVDgsDkIE_u7-0H\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@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 por Internet\r\n\r\nPerson(cliente, \"Cliente de Banca Personal\", \"Un cliente con una o m\u00e1s cuentas bancarias personales.\")\r\nSystem(sistema_banca_internet, \"Sistema de Banca por Internet\", \"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 electr\u00f3nico\", \"Servicio Simple de Correo Electr\u00f3nico de Amazon Web Services (AWS SES) para enviar confirmaciones.\")\r\n\r\nRel(cliente, sistema_banca_internet, \"Utiliza\")\r\nRel(sistema_banca_internet, sistema_banca_principal, \"Utiliza\")\r\nRel(sistema_banca_internet, sistema_correo, \"Env\u00eda correo electr\u00f3nico a trav\u00e9s de\")\r\n\r\nLay_D(cliente, sistema_banca_internet)\r\nLay_D(sistema_banca_internet, sistema_banca_principal)\r\nLay_U(sistema_correo, sistema_banca_internet)\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bLJ1Rjf04BqZyGzJJY0LKAMUUWe5gur40DLOg2ThM2PqfVMkkxks87_JOmyzzHFuiSpQnYHgI9NRykQzcJVpB6wSH-kBJ7KxxwGMgjWH_F0-Tv_6OovvAKQbT0MgOOuMTtAVZOJ9nhb27LH3vtTARiVJZyDLW9Ax-JX3vyaob4wDzdJmexpgt-tC9z-NoJfTBrVfRBbPz0SjjBbTVqtdqPTeCGjej-EbLmGpYNkB6GAx4dKpmsy5Jl8CnliBMVBF3mC8ze2VSLDXnMVK0Y4t5cvPQZNvq7b5rXdT5qeIe--XDwrV5qNDGDNZOgAXOGO3K6W40zdfbmDHC8eEja5Z9R_oHaTkrECbucDmqc-ifXKlbOqJRlsgqp0xKg0BAasxRRLZIRQTVGHBgEG3MgxjpIjpSylfoXpLIuDNvsAOUeTIt_FH2UWGY67rdmN1dfoNl1xiq1jNfT3UyEB7MzGEXM3cipEaqS6tbeInbinp9pN62PBmzlHNIs62cvXiARaRvvhbgWffMZEZ9ym0Jp9yu8Gsj8LQH0xwaqqCSHIVFmzTIZuL1talROPFJ7OxtqXTlechcILUXdC7IH1Surs__HiRj9UAT7dwWozT2J0SlJpz3fdKkypncCx-jytWp7lZ4eqk-IVDgsDkIE_u7-0H\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Raz\u00f3n y valor<\/strong>: Este \u00fanico diagrama responde de inmediato a \u00ab\u00bfQu\u00e9 estamos construyendo y con qui\u00e9n se comunica?\u00bb. Evita el crecimiento de 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>: Ampl\u00ede el Sistema de Banca en L\u00ednea y muestre las unidades principales desplegables\/ejecutables (contenedores) y sus opciones tecnol\u00f3gicas. P\u00fablico objetivo: arquitectos, desarrolladores principales, operaciones.<\/p>\n<p><strong>Contenedores dentro del Sistema de Banca en L\u00ednea<\/strong>:<\/p>\n<ul>\n<li><strong>Aplicaci\u00f3n de p\u00e1gina \u00fanica<\/strong>\u00a0(Navegador web \u2013 JavaScript + Angular) \u2013 Interfaz de usuario completa de banca en l\u00ednea.<\/li>\n<li><strong>Aplicaci\u00f3n m\u00f3vil<\/strong>\u00a0(Dispositivo m\u00f3vil \u2013 nativo iOS\/Android o React Native) \u2013 Funcionalidad limitada para uso en movimiento.<\/li>\n<li><strong>Aplicaci\u00f3n de API<\/strong>\u00a0(Lado del servidor \u2013 Java + Spring Boot) \u2013 API de JSON\/HTTPS utilizada por ambos front-ends.<\/li>\n<li><strong>Base de datos<\/strong>\u00a0(Base de datos relacional \u2013 PostgreSQL) \u2013 Almacena datos de sesi\u00f3n, preferencias del usuario y res\u00famenes de cuentas en cach\u00e9 (los datos principales permanecen en el mainframe heredado).<\/li>\n<\/ul>\n<p><strong>Relaciones clave<\/strong>\u00a0(mismos sistemas externos que en el Nivel 1):<\/p>\n<ul>\n<li>SPA y Aplicaci\u00f3n m\u00f3vil \u2192 llaman \u2192 Aplicaci\u00f3n de API<\/li>\n<li>Aplicaci\u00f3n de API \u2194 Base de datos<\/li>\n<li>Aplicaci\u00f3n de API \u2192 Sistema de banca central y Sistema de correo electr\u00f3nico<\/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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:lLLBZjj64DqBq1qwGe1ea96qY5S10bY_n6F88zcKCCXAA94bJa-QtNH_Q6k20Bv3Jk1b5bvvvwrkafEaYgH-0yd8oYi9zNrTzLxnkVDWVSXKi_6TrB4A2OfxxtFtSwz7BY_ZRY5T0DN9mK8YqwmRcwoNAz2SrN4-KNBL6pxhpDYqU3NfPU0yMZ8jXqPxa1fjDp_VmSAxRYhzVLW5XpQcSDI-RE133edzwT18ahUpfeYEowtqw7Pz4YpOvtgWqw3Ws_HwW0A-IQFSE9zQT6zLtQxPcFH_doxco_bqjXnDxsxRLtlJtStynN8o_cryEs9hi-6bLoX64b8B6GW2MS71n51DCNmcUAi2bOWazQr21g1ZicansNxI25ndXjOPtOw3yoP3UorQGoNfLSZngp8-BqD0jSYvq2Ak_THF10t2Y6pxqOaua1LSbMCb_TlbeUksIipHXf4i1oRe1EocBQcCrUYNbFE7rEdIbG7KvZ9c1Z5MGWSiZ71rMFdK0kqUn4PO12KVmP8lDGn0_Dbix5dRTZbGeNwkP0ont7xMt2hVVamblMZxHPEPExqaCaInbRaNFuf-nKAstp3oDJnoLY0DMMbe7bckqCDXS0HQxK1_Nz7WbrRDPPx80KvcLbBX4lBy2Qfi-xcGvUJbDEhrTMADJ4Jx3KBinIs9kC0hzluQT2nvs3A1H2YPIGz9FPZW34F9J45cceyvXcEvqYaOoEKP9FIg_kncDnGQHqGLT2e6ndYsafDZNaRJszwB-NmMYU0bhu1X62iWMnadrfObWJfnno1OSoSOHgjs0XvMu91A3-Y7QvF9S5vhLaadUZqfEwiCOgIzbNuETEWOyxN8BQxH8iq6sA7sosA2kEsNZ0HJPko8GtEY1zzl_pc6Tr0gW_phGELsJ6BxAdih8X0wRoi1lQBthKcoAF0zXx6ItWOK6MXyE7f2hJ9tVSHfgg4TnBpeMbEreiRlVPiQIdKM0u6qI1HG67jBOw7pmqWYj7I9Q1QHPE9ovB2Av5Ldy4ZwliELgE9eJEt-NIIYSNHLdnPTID8NdO6rjBI10wfcumVn1bLjQZRe_z61gQItgCZ1G4gsSDvft8acBeMNnGw4dIWwXYL7zpJSHHwN-ry9-w0Z9auGQG_ew2IiQ8Ewp1mDXZscujEyy-GWZhkWw4pqH3_s0NRF-Wg09wiTwsBx2NPhpJ2HzCt1az7m1gAG7b5V9D8HZsKbvhR9gtD1Q_ttmzy2De5a2cBtfQU_ngQWomkQuGFfLn4lYK8P7n377oROB4T7wxfmpFUH5u_zcJ7LIOidfBxSejbuJZU5lgB_0G00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagrama de contenedores C4 para el Sistema de Banca en L\u00ednea\r\n\r\nPerson(customer, \"Cliente de banca personal\", \"Un cliente con una o m\u00e1s cuentas bancarias personales.\")\r\n\r\nSystem_Boundary(internet_banking_system, \"Sistema de Banca en L\u00ednea\", \"El nuevo sistema para ver cuentas y realizar pagos.\") {\r\nContainer(spa, \"Aplicaci\u00f3n de p\u00e1gina \u00fanica\", \"JavaScript + Angular\", \"Interfaz de usuario completa de banca en l\u00ednea\", $sprite=\"angular\")\r\nContainer(mobile_app, \"Aplicaci\u00f3n m\u00f3vil\", \"iOS\/Android (React Native)\", \"Funcionalidad limitada para uso en movimiento\", $sprite=\"react\")\r\nContainer(api_app, \"Aplicaci\u00f3n de API\", \"Java + Spring Boot\", \"API de JSON\/HTTPS utilizada por ambos front-ends\", $sprite=\"java\")\r\nContainerDb(database, \"Base de datos\", \"PostgreSQL\", \"Almacena datos de sesi\u00f3n, preferencias del usuario y res\u00famenes de cuentas en cach\u00e9\", $sprite=\"postgresql\")\r\n}\r\n\r\nSystem(core_banking_system, \"Sistema de banca central\", \"Mainframe existente que maneja datos de clientes, cuentas y transacciones.\")\r\nSystem_Ext(email_system, \"Sistema de correo electr\u00f3nico\", \"Servicio Simple de Correo de Amazon Web Services (AWS SES) para enviar confirmaciones.\")\r\n\r\n' Relaciones\r\nRel(customer, spa, \"Utiliza\", \"HTTPS\")\r\nRel(customer, mobile_app, \"Utiliza\", \"HTTPS\")\r\nRel(spa, api_app, \"Llama\", \"JSON\/HTTPS\")\r\nRel(mobile_app, api_app, \"Llama\", \"JSON\/HTTPS\")\r\nRel(api_app, database, \"Lee y escribe en\", \"JDBC\/SQL\")\r\nRel(api_app, core_banking_system, \"Consulta \/ Actualiza\", \"JSON\/HTTPS\")\r\nRel(api_app, email_system, \"Env\u00eda correo mediante\", \"HTTPS\")\r\n\r\n' Sugerencias de disposici\u00f3n (opcionales \u2013 ayuda a PlantUML a organizar mejor los elementos)\r\nLay_D(customer, internet_banking_system)\r\nLay_D(internet_banking_system, core_banking_system)\r\nLay_U(email_system, internet_banking_system)\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:lLLBZjj64DqBq1qwGe1ea96qY5S10bY_n6F88zcKCCXAA94bJa-QtNH_Q6k20Bv3Jk1b5bvvvwrkafEaYgH-0yd8oYi9zNrTzLxnkVDWVSXKi_6TrB4A2OfxxtFtSwz7BY_ZRY5T0DN9mK8YqwmRcwoNAz2SrN4-KNBL6pxhpDYqU3NfPU0yMZ8jXqPxa1fjDp_VmSAxRYhzVLW5XpQcSDI-RE133edzwT18ahUpfeYEowtqw7Pz4YpOvtgWqw3Ws_HwW0A-IQFSE9zQT6zLtQxPcFH_doxco_bqjXnDxsxRLtlJtStynN8o_cryEs9hi-6bLoX64b8B6GW2MS71n51DCNmcUAi2bOWazQr21g1ZicansNxI25ndXjOPtOw3yoP3UorQGoNfLSZngp8-BqD0jSYvq2Ak_THF10t2Y6pxqOaua1LSbMCb_TlbeUksIipHXf4i1oRe1EocBQcCrUYNbFE7rEdIbG7KvZ9c1Z5MGWSiZ71rMFdK0kqUn4PO12KVmP8lDGn0_Dbix5dRTZbGeNwkP0ont7xMt2hVVamblMZxHPEPExqaCaInbRaNFuf-nKAstp3oDJnoLY0DMMbe7bckqCDXS0HQxK1_Nz7WbrRDPPx80KvcLbBX4lBy2Qfi-xcGvUJbDEhrTMADJ4Jx3KBinIs9kC0hzluQT2nvs3A1H2YPIGz9FPZW34F9J45cceyvXcEvqYaOoEKP9FIg_kncDnGQHqGLT2e6ndYsafDZNaRJszwB-NmMYU0bhu1X62iWMnadrfObWJfnno1OSoSOHgjs0XvMu91A3-Y7QvF9S5vhLaadUZqfEwiCOgIzbNuETEWOyxN8BQxH8iq6sA7sosA2kEsNZ0HJPko8GtEY1zzl_pc6Tr0gW_phGELsJ6BxAdih8X0wRoi1lQBthKcoAF0zXx6ItWOK6MXyE7f2hJ9tVSHfgg4TnBpeMbEreiRlVPiQIdKM0u6qI1HG67jBOw7pmqWYj7I9Q1QHPE9ovB2Av5Ldy4ZwliELgE9eJEt-NIIYSNHLdnPTID8NdO6rjBI10wfcumVn1bLjQZRe_z61gQItgCZ1G4gsSDvft8acBeMNnGw4dIWwXYL7zpJSHHwN-ry9-w0Z9auGQG_ew2IiQ8Ewp1mDXZscujEyy-GWZhkWw4pqH3_s0NRF-Wg09wiTwsBx2NPhpJ2HzCt1az7m1gAG7b5V9D8HZsKbvhR9gtD1Q_ttmzy2De5a2cBtfQU_ngQWomkQuGFfLn4lYK8P7n377oROB4T7wxfmpFUH5u_zcJ7LIOidfBxSejbuJZU5lgB_0G00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Razonamiento<\/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 las 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>: Ampl\u00ede un contenedor (normalmente el m\u00e1s complejo \u2013 la Aplicaci\u00f3n de API) y muestre sus componentes l\u00f3gicos principales. P\u00fablico objetivo: equipos de desarrollo.<\/p>\n<p><strong>Ejemplo: Componentes dentro de la Aplicaci\u00f3n de API<\/strong>:<\/p>\n<ul>\n<li>Controlador de cuentas (Spring MVC)<\/li>\n<li>Controlador de autenticaci\u00f3n<\/li>\n<li>Controlador de restablecimiento de contrase\u00f1a<\/li>\n<li>Componente de seguridad (gestiona autenticaci\u00f3n, JWT, etc.)<\/li>\n<li>Componente de gesti\u00f3n de cuentas (orquesta llamadas al sistema de banca central)<\/li>\n<li>Componente de notificaci\u00f3n por correo electr\u00f3nico<\/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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:hLPDRnit4BqRy7zWTP81sxhar5DiMKXYsB4GoKrp4cQvuyqa_DYINALkqH-JOmyv5BdbkdyiG-wkj9AsIGfKW021V3Fpviq7zTG7SA7IwlZe9p9ILJcAjo6K_kV9XAy2oVCr-GhKMGaESYhqkRHwKYemqUhCXrnHDfa-EPl7e_lRcua67z3nqMfgTMaDcd1UfWZ7HpSNR-xkbwlNBvRFLpUpPxENL-EJU1ueA1HN18K33O99oCuMlOYX1IhXYJqtrnaOoMT6gFgJGH1dug9K945I_Tb4mCNyHNGyjIO06NHZNyAf6EsXolfZGGP4_SNmyOW1xs0DNZegWtWKO8fAWOldSsTBwoHPHWURWnUAlm-LIKUASiYPwG0p4Cfw8HKrkR2rWtNzTyBwIXXOOm6vTU83PkUZapvblSzOrv_Nf2ATNracHsQVMMNOPoQjULUPO8KYJO6TnrZ_3zsSV6az1LhRbiqkvwjid6TCwX8yHfCSWlMHvSp_LcrgrxiJ3XKqf2BiGccGo9cGUR1ERolbiE3gkvHAnGtfoFfJ8Htco3c1QhA1AZ3lZLwI7hXfWO6TUOEI4hqz5HXaOhzuZ7srclqUnZfZy6ZHDbf3elx87gqeMMz99QYDR3k4OrEmoBl4-ORrsre8RpE76tavWOf_H88CCvw9iHBnlAFMatPrQIkJWtiSGqc7hSmDFpeHVnuV2Vvi9c_CBjainAoY9sTLQhOuOKtecCGYvbQ8sr-c-mtbqDTVD38d7WSFAcyKR6ttkYKntWjVXRU7eNVBTCZW6VgGmlFG4qycfR9xz5sosmvWnOk8RYyYnZPiqmthjfKesFTeXbXobXWEQV9nW4oXv372E4zfByMAUgp_WG7bqF70OIjBHtBh1rsSePuBeJ4dtflHhtDeEM6KmJ5VxhW1eXvbvIWy9gxTWcpoBlY2fphIk4H8-JRaTWHbKNR5F_rNdSJrwoNBo2LencW__S5oDzsc2nqEAFRBrEkzGx9tZbS5AvPMbbAywUAwXO7zturNUY1icN98rT-66239BaWTq3CsqCDce7W0XaeoJ7XcrlKdQF5-nw1zlFeTq9UGzLsZIt7TPgWsFR6uNSxRBH0pU8MgDywzLhWFfEWFw39Dk3HttyQqNVyTH_sADjknGyLdYD_xvylbVD4tQVLDxy0DOiHTNrrE8-Ilc4l4fDUujvjwFgyNTo-tJhVWPfDy7zWDypUH-Z-4rpyONVz8yATeSlupz1K0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@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 de banca\", \"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\", \"Gestiona el inicio de sesi\u00f3n de usuarios, 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\", \"Bean de Spring\", \"Gestiona 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\", \"Bean de Spring\", \"Orquesta las llamadas al sistema de banca central para operaciones de cuentas.\")\r\n    Component(email, \"Componente de notificaci\u00f3n por correo electr\u00f3nico\", \"Bean de Spring\", \"Env\u00eda correos electr\u00f3nicos para restablecer contrase\u00f1as y verificar 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\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:hLPDRnit4BqRy7zWTP81sxhar5DiMKXYsB4GoKrp4cQvuyqa_DYINALkqH-JOmyv5BdbkdyiG-wkj9AsIGfKW021V3Fpviq7zTG7SA7IwlZe9p9ILJcAjo6K_kV9XAy2oVCr-GhKMGaESYhqkRHwKYemqUhCXrnHDfa-EPl7e_lRcua67z3nqMfgTMaDcd1UfWZ7HpSNR-xkbwlNBvRFLpUpPxENL-EJU1ueA1HN18K33O99oCuMlOYX1IhXYJqtrnaOoMT6gFgJGH1dug9K945I_Tb4mCNyHNGyjIO06NHZNyAf6EsXolfZGGP4_SNmyOW1xs0DNZegWtWKO8fAWOldSsTBwoHPHWURWnUAlm-LIKUASiYPwG0p4Cfw8HKrkR2rWtNzTyBwIXXOOm6vTU83PkUZapvblSzOrv_Nf2ATNracHsQVMMNOPoQjULUPO8KYJO6TnrZ_3zsSV6az1LhRbiqkvwjid6TCwX8yHfCSWlMHvSp_LcrgrxiJ3XKqf2BiGccGo9cGUR1ERolbiE3gkvHAnGtfoFfJ8Htco3c1QhA1AZ3lZLwI7hXfWO6TUOEI4hqz5HXaOhzuZ7srclqUnZfZy6ZHDbf3elx87gqeMMz99QYDR3k4OrEmoBl4-ORrsre8RpE76tavWOf_H88CCvw9iHBnlAFMatPrQIkJWtiSGqc7hSmDFpeHVnuV2Vvi9c_CBjainAoY9sTLQhOuOKtecCGYvbQ8sr-c-mtbqDTVD38d7WSFAcyKR6ttkYKntWjVXRU7eNVBTCZW6VgGmlFG4qycfR9xz5sosmvWnOk8RYyYnZPiqmthjfKesFTeXbXobXWEQV9nW4oXv372E4zfByMAUgp_WG7bqF70OIjBHtBh1rsSePuBeJ4dtflHhtDeEM6KmJ5VxhW1eXvbvIWy9gxTWcpoBlY2fphIk4H8-JRaTWHbKNR5F_rNdSJrwoNBo2LencW__S5oDzsc2nqEAFRBrEkzGx9tZbS5AvPMbbAywUAwXO7zturNUY1icN98rT-66239BaWTq3CsqCDce7W0XaeoJ7XcrlKdQF5-nw1zlFeTq9UGzLsZIt7TPgWsFR6uNSxRBH0pU8MgDywzLhWFfEWFw39Dk3HttyQqNVyTH_sADjknGyLdYD_xvylbVD4tQVLDxy0DOiHTNrrE8-Ilc4l4fDUujvjwFgyNTo-tJhVWPfDy7zWDypUH-Z-4rpyONVz8yATeSlupz1K0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\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 \u00fanico (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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:XPBFIWCn4CRlWRn3M2yjGi4_QF4WtMxRWoSH-m13Cbr3ivaooRQe-5G-WYzcThSMknGD8P3lc_dDJCWaHE1OLquAxI24cOMIeP92Yh2sVWFfejwbOAgzqSGUMOsbo9bfLv0ZLcVNxTfh2_Anfq-93N9FbA9eoZNe8_yYlxowdISHzBfiY-wD-NYUBswa-5NW9_QZtVi1L5Qa22O7XdY6UHtHHwj1swzFdpNrpXsLrWyqeq6lBJWCmwGohXZ3opEjqG-6nyX7fYrY2spzXrtiK2Mc1u7OgOCwrC2M6jeMd3K78pPdZ_c46mesKagOuRBBxA0hwytqTHcGFLHuwEMFkTHeTAzEDAdkL5P7w-mRPFy3JdLqJ9YWD-clV0C0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\nclassDiagram\r\n\r\nskinparam {\r\nroundcorner 8\r\nArrowColor #444444\r\nArrowFontColor #444444\r\nBorderColor #444444\r\n\r\nClass {\r\nBorderColor #1A237E\r\nBackgroundColor #E8EAF6\r\nFontColor #1A237E\r\n}\r\n}\r\n\r\nclass \"ControladorDeAutenticaci\u00f3n\" {\r\n+login(credenciales)\r\n+refreshToken()\r\n}\r\n\r\nclass \"ProveedorDeTokenJwt\" {\r\n+generateToken(usuario)\r\n+validateToken(token)\r\n}\r\n\r\nclass \"RepositorioDeUsuario\" {\r\n+findByUsername()\r\n}\r\n\r\nControladorDeAutenticaci\u00f3n ..&gt; ProveedorDeTokenJwt : \"utiliza\"\r\nControladorDeAutenticaci\u00f3n ..&gt; RepositorioDeUsuario : \"utiliza\"\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:XPBFIWCn4CRlWRn3M2yjGi4_QF4WtMxRWoSH-m13Cbr3ivaooRQe-5G-WYzcThSMknGD8P3lc_dDJCWaHE1OLquAxI24cOMIeP92Yh2sVWFfejwbOAgzqSGUMOsbo9bfLv0ZLcVNxTfh2_Anfq-93N9FbA9eoZNe8_yYlxowdISHzBfiY-wD-NYUBswa-5NW9_QZtVi1L5Qa22O7XdY6UHtHHwj1swzFdpNrpXsLrWyqeq6lBJWCmwGohXZ3opEjqG-6nyX7fYrY2spzXrtiK2Mc1u7OgOCwrC2M6jeMd3K78pPdZ_c46mesKagOuRBBxA0hwytqTHcGFLHuwEMFkTHeTAzEDAdkL5P7w-mRPFy3JdLqJ9YWD-clV0C0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:PPA_Rjim4CPt0Ng7gvUeG2oXRR9qYcCPIGl7Dcmtgt6Y28S0_u6aZ1P57yPZvsnPzM8vKWuQr007uhlVTxplf1iVq8LEoJpx83IJNSlXAGJhlrOLbO9WvK7u3kNOeiDMx5N9ZAgiH1rTOnzQAPfgUZLUHUd7mxnIw0Dt9ErgRgNvfRWEfKrFv5aGGNAe1UuTAeHMwFwe13CGsyEZe3TXpNr79g1HfXsPCHfNt7cZiM1IaCGlOJGTRX6xHSqGJeWSVOJVUJOrLDIyDQxm5ecVM2aOCj4_fzQsF-w5HkXVDCbd7hJYt3DPVViVh9kYROYyHPz6QJ4OFq0RIiCLxcO_G-67-w9_OP8Rua_5Q6dIz8p2k3XydlrvT_9ipUM_r4EKJoNS8-D0CWFQrCMm9tynecBi43q97M9yBk5kjeKA6JET3ZvYtpVBHNM_tQusRuR4fZ1VIfXpxi2TlWGTsi9J__Tz_uIVvRegOTd4tRXX5Q3wewT6B0NmvmrIeEiIQdumya2sEDWRbcSFoyrsFLdlvhExsQAU52JUSDtIx_GA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Diagrama din\u00e1mico para Vista Resumen de Cuenta\r\n\r\nPersona(cliente, \"Cliente de Banca Personal\") {\r\nContenedor(spa, \"Aplicaci\u00f3n de p\u00e1gina \u00fanica\") {\r\nContenedor(api, \"Aplicaci\u00f3n de API\") {\r\nContenedorDb(db, \"Base de datos\") {\r\nSistema_Ext(sistemaN\u00facleo, \"Sistema de banca central\")\r\n}\r\n}\r\n}\r\n}\r\n\r\nRel(cliente, spa, \"1. Hace clic en 'Cuentas'\", \"\")\r\nRel(spa, api, \"2. GET \/accounts\", \"JSON\/HTTPS\")\r\nRel(api, db, \"3. Leer resumen en cach\u00e9\", \"\")\r\nRel(api, sistemaN\u00facleo, \"4. Obtener datos m\u00e1s recientes\", \"\")\r\nRel(api, spa, \"5. Devolver JSON\", \"\")\r\n\r\nMOSTRAR_LEGENDA()\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:PPA_Rjim4CPt0Ng7gvUeG2oXRR9qYcCPIGl7Dcmtgt6Y28S0_u6aZ1P57yPZvsnPzM8vKWuQr007uhlVTxplf1iVq8LEoJpx83IJNSlXAGJhlrOLbO9WvK7u3kNOeiDMx5N9ZAgiH1rTOnzQAPfgUZLUHUd7mxnIw0Dt9ErgRgNvfRWEfKrFv5aGGNAe1UuTAeHMwFwe13CGsyEZe3TXpNr79g1HfXsPCHfNt7cZiM1IaCGlOJGTRX6xHSqGJeWSVOJVUJOrLDIyDQxm5ecVM2aOCj4_fzQsF-w5HkXVDCbd7hJYt3DPVViVh9kYROYyHPz6QJ4OFq0RIiCLxcO_G-67-w9_OP8Rua_5Q6dIz8p2k3XydlrvT_9ipUM_r4EKJoNS8-D0CWFQrCMm9tynecBi43q97M9yBk5kjeKA6JET3ZvYtpVBHNM_tQusRuR4fZ1VIfXpxi2TlWGTsi9J__Tz_uIVvRegOTd4tRXX5Q3wewT6B0NmvmrIeEiIQdumya2sEDWRbcSFoyrsFLdlvhExsQAU52JUSDtIx_GA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bPFFRjf04CRlIBp3bfEH2fQYddeAO9Is0aenKOzel3jrLzf_ygwTD5KU9W_GKswv-iKoYo6b8PVULhF-VTytC-jB7w0AjLRztZjfkAe5ifyXEFynJUagI3vkfAz1ZHnK86Ifnzpgr2amaHhv89Giqjc7qJgMhfUBL8CFM55fbw5JzfT64yPkRz7l1HaKian2MO46Hcu2lLCIonfPj62v9BoxceBXmD2mHVl784H-POKbtIEIm8r_pmOJ3NVMiEzOi1ohHdBq0oglwW87G_Rx74D-GVTNLUriD4BFGO6m3EfWTVj0RLisdrr4aOKqzMsdChCce45XgmISZBwanu7Bzj54cSdwSoI-G4Djk4gQaasj3ODXltT_dg4ICVecooEpjZwK5URV5g-jiY8H1Nqn1O_xUK6m_Y1v_zP8XFJEUXbaOsTK8XsYixz54b6CTpVHcgQMBjl7HggpBhs3yovT-r1A0wnzCbIEIKu8RGkfy1Ma3-g7m8SDx-Qt8V7TUTK-SOMMk9Fr5_lrSyfPWMA91cb-qAj1fYojQnZr-hqDgYvcjv4DWf9tm9IYvoN0Cph2SJ6Vjjjr7h487PF-9xUxxdRVZMPEsR04HlaCD7IY6R0RUeQdC_uNV9dG2nkTuCrnzNlBh_bsCzdi5lEh-IgR95IyH2FeRte6\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Diagrama de despliegue para Sistema de Banca en L\u00ednea\r\n\r\nNodo_Despliegue(aws, \"Amazon Web Services\", \"Nube\") {\r\nNodo_Despliegue(ec2, \"Grupo de escalado autom\u00e1tico EC2\", \"Linux\") {\r\nContenedor(api, \"Aplicaci\u00f3n de API\", \"Java Spring Boot\")\r\n}\r\nNodo_Despliegue(rds, \"RDS\", \"PostgreSQL\") {\r\nContenedorDb(db, \"Base de datos\")\r\n}\r\n}\r\n\r\nNodo_Despliegue(dispositivoCliente, \"Dispositivo del cliente\", \"Web\/M\u00f3vil\") {\r\nContenedor(spa, \"Aplicaci\u00f3n de p\u00e1gina \u00fanica\")\r\nContenedor(mobile, \"Aplicaci\u00f3n m\u00f3vil\")\r\n}\r\n\r\nSistema_Ext(sistemaN\u00facleo, \"Sistema de banca central (mainframe local)\")\r\n\r\nRel(spa, api, \"Realiza llamadas a la API\", \"HTTPS\")\r\nRel(mobile, api, \"Realiza llamadas a la API\", \"HTTPS\")\r\nRel_U(api, spa, \"Entrega al navegador web del cliente\")\r\nRel_U(api, mobile, \"Entrega a la aplicaci\u00f3n m\u00f3vil\")\r\n\r\nMOSTRAR_LEGENDA()\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bPFFRjf04CRlIBp3bfEH2fQYddeAO9Is0aenKOzel3jrLzf_ygwTD5KU9W_GKswv-iKoYo6b8PVULhF-VTytC-jB7w0AjLRztZjfkAe5ifyXEFynJUagI3vkfAz1ZHnK86Ifnzpgr2amaHhv89Giqjc7qJgMhfUBL8CFM55fbw5JzfT64yPkRz7l1HaKian2MO46Hcu2lLCIonfPj62v9BoxceBXmD2mHVl784H-POKbtIEIm8r_pmOJ3NVMiEzOi1ohHdBq0oglwW87G_Rx74D-GVTNLUriD4BFGO6m3EfWTVj0RLisdrr4aOKqzMsdChCce45XgmISZBwanu7Bzj54cSdwSoI-G4Djk4gQaasj3ODXltT_dg4ICVecooEpjZwK5URV5g-jiY8H1Nqn1O_xUK6m_Y1v_zP8XFJEUXbaOsTK8XsYixz54b6CTpVHcgQMBjl7HggpBhs3yovT-r1A0wnzCbIEIKu8RGkfy1Ma3-g7m8SDx-Qt8V7TUTK-SOMMk9Fr5_lrSyfPWMA91cb-qAj1fYojQnZr-hqDgYvcjv4DWf9tm9IYvoN0Cph2SJ6Vjjjr7h487PF-9xUxxdRVZMPEsR04HlaCD7IY6R0RUeQdC_uNV9dG2nkTuCrnzNlBh_bsCzdi5lEh-IgR95IyH2FeRte6\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar PlantUML en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>C\u00f3mo utilizar este caso de estudio en la pr\u00e1ctica<\/h3>\n<ol>\n<li>Comience con un taller: dibuje el contexto en una pizarra.<\/li>\n<li>Itere hacia Contenedores y Componentes utilizando PlantUML C4.<\/li>\n<li>Mantenga los diagramas en el repositorio de c\u00f3digo (como c\u00f3digo!) para que permanezcan actualizados.<\/li>\n<li>Genere documentaci\u00f3n viva autom\u00e1ticamente.<\/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 en todo el mundo. Al seguir estos pasos, ahora tiene una descripci\u00f3n completa y lista para producci\u00f3n de la arquitectura que cualquiera\u2014desde el CEO hasta un nuevo desarrollador junior\u2014puede 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 simplificada<\/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 poderosa.<\/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 especializada lanzada a finales de 2025 que transforma las solicitudes de 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 descripci\u00f3n 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 usar 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\u2014Contexto, Contenedor, Componente y Despliegue\u2014para proporcionar 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 autom\u00e1tica 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 para el modelo C4: Automatizaci\u00f3n del ciclo de vida completo de modelado<\/strong><\/a>: Este recurso destaca c\u00f3mo un chatbot de IA especializado utiliza indicaciones conversacionales para garantizar la consistencia en la documentaci\u00f3n de arquitectura para equipos de 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 herramientas especializadas como el C4 PlantUML Studio ofrecen resultados m\u00e1s estructurados y de calidad profesional que los modelos de lenguaje de prop\u00f3sito general.<\/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":11327,"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-11326","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=\"7 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\":1612,\"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-1.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-1.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-1.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5-1.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":"7 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":1612,"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-1.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-1.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-1.png","contentUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/03\/img_69a8e7e9e8ab5-1.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\/11326","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=11326"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts\/11326\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/media\/11327"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/media?parent=11326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/categories?post=11326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/tags?post=11326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}