{"id":77,"date":"2025-12-19T16:35:25","date_gmt":"2025-12-19T16:35:25","guid":{"rendered":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/home\/"},"modified":"2026-04-14T15:14:16","modified_gmt":"2026-04-14T15:14:16","slug":"home","status":"publish","type":"page","link":"https:\/\/sitios.ces.edu.co\/pruebas\/","title":{"rendered":""},"content":{"rendered":"\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;Agenda tu visita por el campus.<\/p>\n\n\n\n<!DOCTYPE html>\r\n<!--2.0.8-->\r\n\r\n\r\n\r\n\r\n<html lang=\"es\" class=\"dark\">\r\n<head>\r\n<!-- Google Tag Manager -->\r\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\r\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\r\nj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\r\n'https:\/\/www.googletagmanager.com\/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\r\n})(window,document,'script','dataLayer','GTM-WJZS582S');<\/script>\r\n<!-- End Google Tag Manager -->\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n    <title>IP Calculator<\/title>\r\n<meta name=\"description\" content=\"Calculadora de Subnetting IPv4 gratuita. Obt\u00e9n rangos de IP, broadcast, m\u00e1scaras CIDR y an\u00e1lisis binario con el M\u00e9todo Oscar G. Ideal para estudiantes CCNA.\">\r\n<meta name=\"keywords\" content=\"Subnetting, Calculadora IPv4, CCNA, Redes, VLSM, CIDR, M\u00e1scara de Red\">\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script>\r\n        tailwind.config = {\r\n            darkMode: 'class',\r\n            theme: {\r\n                extend: {\r\n                    colors: {\r\n                        primary: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e' },\r\n                        dark: { 800: '#1e293b', 900: '#0f172a' }\r\n                    },\r\n                    fontFamily: {\r\n                        sans: ['Inter', 'sans-serif'],\r\n                        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&#038;family=JetBrains+Mono:wght@400;500&#038;display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        body { font-family: 'Inter', sans-serif; }\r\n        .font-mono { font-family: 'JetBrains Mono', monospace; }\r\n        ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n        ::-webkit-scrollbar-track { background: transparent; }\r\n        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n        .dark ::-webkit-scrollbar-thumb { background: #334155; }\r\n        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n        .fade-in { animation: fadeIn 0.4s ease-out; }\r\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n        .glass {\r\n            background: rgba(255, 255, 255, 0.7);\r\n            backdrop-filter: blur(10px);\r\n            -webkit-backdrop-filter: blur(10px);\r\n        }\r\n        .dark .glass { background: rgba(15, 23, 42, 0.7); }\r\n    <\/style>\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"SoftwareApplication\",\r\n  \"name\": \"Subnetting Pro 2.0\",\r\n  \"operatingSystem\": \"All\",\r\n  \"applicationCategory\": \"EducationalApplication\",\r\n  \"offers\": {\r\n    \"@type\": \"Offer\",\r\n    \"price\": \"0\",\r\n    \"priceCurrency\": \"USD\"\r\n  },\r\n  \"description\": \"Calculadora avanzada de subredes IPv4 que utiliza el m\u00e9todo Oscar G. para an\u00e1lisis binario y c\u00e1lculos CIDR.\",\r\n  \"author\": {\r\n    \"@type\": \"Person\",\r\n    \"name\": \"Tu Nombre o Usuario\"\r\n  }\r\n}\r\n<\/script>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-900 dark:bg-dark-900 dark:text-gray-100 transition-colors duration-300 min-h-screen flex flex-col\">\r\n\r\n    <nav class=\"fixed top-0 w-full z-50 glass border-b border-gray-200 dark:border-gray-800 transition-colors duration-300\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"flex justify-between h-16 items-center\">\r\n                <div class=\"flex items-center gap-3\">\r\n                    <div class=\"bg-primary-500 p-2 rounded-lg shadow-lg shadow-primary-500\/30\">\r\n                        <i data-lucide=\"network\" class=\"w-6 h-6 text-white\"><\/i>\r\n                    <\/div>\r\n                    <div>\r\n                        <h1 class=\"text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-indigo-600 dark:from-primary-400 dark:to-indigo-400 truncate\">Subnetting Pro<\/h1>\r\n                        <p class=\"text-[10px] text-gray-500 dark:text-gray-400 font-medium tracking-wider uppercase hidden sm:block\">Calculadora Avanzada IPv4<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"flex items-center gap-2\">\r\n                    <button id=\"languageToggle\" class=\"p-2 rounded-lg text-sm font-semibold text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all flex items-center gap-1\">\r\n                        <i data-lucide=\"languages\" class=\"w-4 h-4\"><\/i>\r\n                        <span id=\"languageText\">ES<\/span>\r\n                    <\/button>\r\n                    <button id=\"darkModeToggle\" class=\"p-2 rounded-full text-gray-600 dark:text-yellow-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all\">\r\n                        <i data-lucide=\"sun\" class=\"w-5 h-5 block dark:hidden\"><\/i>\r\n                        <i data-lucide=\"moon\" class=\"w-5 h-5 hidden dark:block\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/nav>\r\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-WJZS582S\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\r\n    <main class=\"flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\r\n            <div class=\"lg:col-span-4 space-y-6\">\r\n                <div class=\"bg-white dark:bg-dark-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 overflow-hidden fade-in\">\r\n                    <div class=\"p-6 space-y-5\">\r\n                        <h2 class=\"text-lg font-semibold flex items-center gap-2 text-gray-800 dark:text-white mb-4\">\r\n                            <i data-lucide=\"sliders\" class=\"w-5 h-5 text-primary-500\"><\/i>\r\n                            <span data-i18n=\"subnetParameters\">Configuraci\u00f3n<\/span>\r\n                        <\/h2>\r\n                        <div class=\"space-y-1.5\">\r\n                            <label class=\"text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1\" data-i18n=\"ipBase\">Direcci\u00f3n IP Base<\/label>\r\n                            <div class=\"relative group\">\r\n                                <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\r\n                                    <i data-lucide=\"globe\" class=\"h-4 w-4 text-gray-400 group-focus-within:text-primary-500 transition-colors\"><\/i>\r\n                                <\/div>\r\n                                <input type=\"text\" id=\"ipBase\" value=\"192.168.1.0\" class=\"block w-full pl-10 pr-3 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 outline-none text-sm font-mono shadow-sm\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"space-y-1.5\">\r\n                            <label class=\"text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1\" data-i18n=\"networkClass\">Clase \/ CIDR Inicial<\/label>\r\n                            <select id=\"clase\" class=\"block w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 appearance-none cursor-pointer text-sm outline-none\">\r\n                                <option value=\"8\">Clase A (\/8)<\/option>\r\n                                <option value=\"16\">Clase B (\/16)<\/option>\r\n                                <option value=\"24\" selected>Clase C (\/24)<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                            <div class=\"space-y-1.5\">\r\n                                <label class=\"text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1\" data-i18n=\"numSubnets\">Subredes<\/label>\r\n                                <input type=\"number\" id=\"numSubnets\" min=\"1\" max=\"5000\" value=\"4\" class=\"block w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 outline-none shadow-sm\">\r\n                            <\/div>\r\n                            <div class=\"space-y-1.5\">\r\n                                <label class=\"text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1 truncate\" data-i18n=\"hostsPerSubnet\">Hosts (Opcional)<\/label>\r\n                                <input type=\"number\" id=\"hostsPerSubnet\" min=\"1\" class=\"block w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 outline-none shadow-sm\" placeholder=\"Auto\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"pt-2 flex gap-3\">\r\n                            <button id=\"calcBtn\" class=\"flex-1 bg-gradient-to-r from-primary-600 to-indigo-600 text-white font-bold py-3.5 px-6 rounded-xl shadow-lg flex items-center justify-center gap-2 group\">\r\n                                <i data-lucide=\"calculator\" class=\"w-5 h-5 group-hover:rotate-12 transition-transform\"><\/i>\r\n                                <span data-i18n=\"calculate\">Calcular<\/span>\r\n                            <\/button>\r\n                            <button id=\"clearBtn\" class=\"bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 p-3.5 rounded-xl\"><i data-lucide=\"rotate-ccw\" class=\"w-5 h-5\"><\/i><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div id=\"resultSummaryCard\" class=\"bg-white dark:bg-dark-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-6 hidden fade-in\">\r\n                    <h3 class=\"text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4\" data-i18n=\"calculationSummary\">Resumen de C\u00e1lculo<\/h3>\r\n                    <div class=\"grid grid-cols-1 gap-4\">\r\n                        <div class=\"grid grid-cols-2 gap-4\">\r\n                            <div class=\"bg-emerald-50 dark:bg-emerald-900\/20 p-4 rounded-xl border border-emerald-100 dark:border-emerald-800\/30\">\r\n                                <span class=\"text-xs text-emerald-600 dark:text-emerald-400 font-medium block mb-1\" data-i18n=\"networkJump\">Salto de Red (Bloque)<\/span>\r\n                                <span id=\"valNetworkJump\" class=\"text-lg font-mono font-bold text-emerald-700 dark:text-emerald-300\">&#8211;<\/span>\r\n                            <\/div>\r\n                            <div class=\"bg-indigo-50 dark:bg-indigo-900\/20 p-4 rounded-xl border border-indigo-100 dark:border-indigo-800\/30\">\r\n                                <span class=\"text-xs text-indigo-600 dark:text-indigo-400 font-medium block mb-1\" data-i18n=\"maxHosts\">Hosts \u00datiles<\/span>\r\n                                <span id=\"valMaxHosts\" class=\"text-lg font-mono font-bold text-indigo-700 dark:text-indigo-300\">&#8211;<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"bg-primary-50 dark:bg-primary-900\/20 p-4 rounded-xl border border-primary-100 dark:border-primary-800\/30\">\r\n                            <span class=\"text-xs text-primary-600 dark:text-primary-400 font-medium block mb-1\" data-i18n=\"resultMask\">Nueva M\u00e1scara<\/span>\r\n                            <span id=\"valResultMask\" class=\"text-base sm:text-lg font-mono font-bold text-primary-700 dark:text-primary-300\">&#8211;<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"text-center\">\r\n                    <a href=\"https:\/\/www.amazon.com\/author\/srgurem\" target=\"_blank\" class=\"text-xs text-gray-500 hover:text-primary-600\">By Jose C. Sierra <i data-lucide=\"external-link\" class=\"w-3 h-3 inline\"><\/i><\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"lg:col-span-8 space-y-6\">\r\n                <div id=\"emptyState\" class=\"flex flex-col items-center justify-center h-64 bg-white dark:bg-dark-800 rounded-2xl border-2 border-dashed border-gray-200 dark:border-gray-700 text-center p-6\">\r\n                    <i data-lucide=\"activity\" class=\"w-8 h-8 text-gray-400 mb-4\"><\/i>\r\n                    <h3 class=\"text-gray-900 dark:text-white font-medium\" data-i18n=\"readyToCalc\">Listo para calcular<\/h3>\r\n                    <p class=\"text-sm text-gray-500\" data-i18n=\"instruction\">Ingresa par\u00e1metros y presiona calcular.<\/p>\r\n                <\/div>\r\n\r\n                <div id=\"resultsArea\" class=\"hidden space-y-6 fade-in\">\r\n                    <div id=\"binaryCard\" class=\"bg-white dark:bg-dark-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden\">\r\n                        <div class=\"px-6 py-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50\/50 dark:bg-gray-800\/50 flex justify-between items-center\">\r\n                            <h3 class=\"font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2\">\r\n                                <i data-lucide=\"binary\" class=\"w-4 h-4 text-indigo-500\"><\/i>\r\n                                <span data-i18n=\"binaryRepresentation\">An\u00e1lisis Binario<\/span>\r\n                            <\/h3>\r\n                            <button id=\"downloadBinaryBtn\" class=\"text-gray-400 hover:text-indigo-500\"><i data-lucide=\"image-down\" class=\"w-5 h-5\"><\/i><\/button>\r\n                        <\/div>\r\n                        <div class=\"p-6 overflow-x-auto\">\r\n                            <table class=\"w-full min-w-[800px] border-collapse\" id=\"processTable24Bit\">\r\n                                <thead class=\"bg-gray-50 dark:bg-gray-900\/50 text-xs text-gray-500 font-mono\">\r\n                                    <tr id=\"powersOf2Row\"><\/tr>\r\n                                    <tr id=\"pNotationRow\"><\/tr>\r\n                                <\/thead>\r\n                                <tbody class=\"font-mono text-sm text-center\">\r\n                                    <tr id=\"binaryMaskRow\" class=\"text-gray-800 dark:text-gray-200 font-bold border-t border-gray-200 dark:border-gray-700\"><\/tr>\r\n                                <\/tbody>\r\n                            <\/table>\r\n                            <div class=\"mt-4 flex justify-center gap-6 text-[10px] font-semibold uppercase tracking-wider\">\r\n                                <div class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded\"><\/span> Red (Base)<\/div>\r\n                                <div class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-primary-500 rounded\"><\/span> Subred (Bits Prestados)<\/div>\r\n                                <div class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-amber-400 rounded\"><\/span> Host (Espacio Libre)<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div id=\"tableCard\" class=\"bg-white dark:bg-dark-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 flex flex-col h-[600px]\">\r\n                        <div class=\"px-6 py-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50\/50 flex justify-between items-center\">\r\n                            <h3 class=\"font-semibold text-gray-800 dark:text-gray-200\" data-i18n=\"results\">Tabla de Subredes<\/h3>\r\n                            <div class=\"flex items-center gap-2\">\r\n                                <button id=\"exportExcelBtn\" class=\"text-gray-400 hover:text-green-600 transition-colors\" title=\"Exportar a Excel\">\r\n                                    <i data-lucide=\"file-spreadsheet\" class=\"w-5 h-5\"><\/i>\r\n                                <\/button>\r\n                                <span id=\"recordCount\" class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-500 font-mono\">0<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"flex-grow overflow-auto\" id=\"tableWrap\">\r\n                            <table class=\"w-full text-left border-collapse\" id=\"subnetTable\">\r\n                                <thead class=\"bg-gray-50 dark:bg-gray-900\/50 sticky top-0 z-10 shadow-sm backdrop-blur-sm\">\r\n                                    <tr>\r\n                                        <th class=\"p-4 text-xs font-semibold text-gray-500 uppercase text-center\">#<\/th>\r\n                                        <th class=\"p-4 text-xs font-semibold text-gray-500 uppercase\" data-i18n=\"subnet\">Subred<\/th>\r\n                                        <th class=\"p-4 text-xs font-semibold text-gray-500 uppercase\" data-i18n=\"mask\">M\u00e1scara<\/th>\r\n                                        <th class=\"p-4 text-xs font-semibold text-gray-500 uppercase\" data-i18n=\"range\">Rango \u00datil<\/th>\r\n                                        <th class=\"p-4 text-xs font-semibold text-gray-500 uppercase\" data-i18n=\"broadcast\">Broadcast<\/th>\r\n                                    <\/tr>\r\n                                <\/thead>\r\n                                <tbody id=\"tbody\" class=\"divide-y divide-gray-100 dark:divide-gray-700\/50 font-mono text-sm\"><\/tbody>\r\n                            <\/table>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n<section class=\"mt-12 max-w-4xl mx-auto border-t border-gray-200 dark:border-gray-700 pt-10 fade-in\">\r\n    <div class=\"bg-white dark:bg-dark-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8 space-y-6\">\r\n        \r\n        <h2 class=\"text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2\">\r\n            <i data-lucide=\"book-open\" class=\"w-6 h-6 text-primary-500\"><\/i>\r\n            Subnetting Pro 2.0: Dominando el Direccionamiento IPv4\r\n        <\/h2>\r\n\r\n        <div class=\"prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 leading-relaxed space-y-4\">\r\n            <p>\r\n                El <strong>subnetting<\/strong> es una de las habilidades m\u00e1s fundamentales para cualquier profesional de TI, estudiante de redes o aspirante a la certificaci\u00f3n <strong>CCNA<\/strong>. Dividir una red f\u00edsica en subredes l\u00f3gicas m\u00e1s peque\u00f1as no solo optimiza el tr\u00e1fico, sino que mejora dr\u00e1sticamente la seguridad y la eficiencia en el uso de direcciones <strong>IPv4<\/strong>.\r\n            <\/p>\r\n\r\n            <p>\r\n                <strong>Subnetting Pro 2.0<\/strong> es una herramienta avanzada dise\u00f1ada para simplificar este proceso. Implementando el <strong>M\u00e9todo Oscar G.<\/strong> para el an\u00e1lisis binario, nuestra calculadora permite visualizar c\u00f3mo se transforman los bits de red y host en tiempo real. Al ingresar una IP base y definir los requerimientos de subredes o hosts, el sistema calcula instant\u00e1neamente la m\u00e1scara de subred, el prefijo <strong>CIDR<\/strong>, la direcci\u00f3n de broadcast y el rango exacto de hosts \u00fatiles.\r\n            <\/p>\r\n\r\n            <h3 class=\"text-lg font-semibold text-gray-800 dark:text-gray-200 mt-6\">Beneficios de usar nuestra calculadora:<\/h3>\r\n            <ul class=\"list-disc pl-5 space-y-2\">\r\n                <li><strong>Visualizaci\u00f3n Binaria:<\/strong> Entiende la l\u00f3gica detr\u00e1s de la m\u00e1scara de red mediante nuestra tabla de bits detallada.<\/li>\r\n                <li><strong>C\u00e1lculos VLSM:<\/strong> Ideal para dise\u00f1ar esquemas de direccionamiento complejos que ahorran direcciones IP.<\/li>\r\n                <li><strong>Exportaci\u00f3n T\u00e9cnica:<\/strong> Descarga tus resultados en formato Excel o imagen para documentar tus laboratorios o proyectos de infraestructura.<\/li>\r\n            <\/ul>\r\n\r\n            <p class=\"pt-4 border-t border-gray-100 dark:border-gray-700\">\r\n                Dise\u00f1ada con una arquitectura moderna, esta herramienta es totalmente responsiva, permitiendo realizar c\u00e1lculos cr\u00edticos desde dispositivos m\u00f3viles o estaciones de trabajo. Ya sea que est\u00e9s configurando un router Cisco o planeando la topolog\u00eda de una red empresarial, <strong>Subnetting Pro 2.0<\/strong> te ofrece la precisi\u00f3n y rapidez necesarias para un networking profesional.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n    <\/main>\r\n\r\n    <div id=\"loadingOverlay\" class=\"fixed inset-0 bg-white\/80 dark:bg-black\/80 backdrop-blur-sm z-[100] flex items-center justify-center hidden opacity-0 transition-opacity duration-300\">\r\n        <div class=\"flex flex-col items-center\">\r\n            <div class=\"w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin\"><\/div>\r\n            <p class=\"mt-4 text-primary-600 font-medium\" data-i18n=\"processing\">Procesando&#8230;<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"toast\" class=\"fixed bottom-5 right-5 z-[100] transform translate-y-20 opacity-0 transition-all duration-300\">\r\n        <div class=\"bg-dark-800 text-white px-4 py-3 rounded-lg shadow-xl flex items-center gap-3 border border-gray-700\">\r\n            <i data-lucide=\"check-circle\" class=\"text-green-400 w-5 h-5\"><\/i>\r\n            <span id=\"toastMsg\" class=\"text-sm font-medium\">Operaci\u00f3n Exitosa<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/xlsx\/dist\/xlsx.full.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n    <script>\r\n        const IPService = {\r\n            toLong: (ip) => ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0) >>> 0,\r\n            fromLong: (long) => [24, 16, 8, 0].map(s => (long >>> s) & 0xFF).join('.'),\r\n            isValid: (ip) => \/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$\/.test(ip),\r\n            calculateMask: (cidr) => {\r\n                return [0, 1, 2, 3].map(i => {\r\n                    let bits = Math.min(8, Math.max(0, cidr - (i * 8)));\r\n                    return bits === 0 ? 0 : 256 - Math.pow(2, 8 - bits);\r\n                }).join('.');\r\n            },\r\n            getJump: (cidr) => {\r\n                const octetIndex = Math.floor((cidr - 1) \/ 8);\r\n                const bitsInOctet = cidr - (octetIndex * 8);\r\n                return Math.pow(2, 8 - bitsInOctet);\r\n            }\r\n        };\r\n\r\n        const TRANSLATIONS = {\r\n            es: { calculationSummary: \"Resumen\", networkJump: \"Salto\", maxHosts: \"Hosts\", resultMask: \"M\u00e1scara CIDR\", successCalc: \"C\u00e1lculo OK\", downloadImg: \"Imagen Guardada\", excelExport: \"Excel Exportado\" },\r\n            en: { calculationSummary: \"Summary\", networkJump: \"Jump\", maxHosts: \"Hosts\", resultMask: \"CIDR Mask\", successCalc: \"Calc OK\", downloadImg: \"Image Saved\", excelExport: \"Excel Exported\" }\r\n        };\r\n\r\n        class SubnettingUI {\r\n            constructor() {\r\n                this.currentLang = 'es';\r\n                this.init();\r\n            }\r\n\r\n            el(id) { return document.getElementById(id); }\r\n\r\n            init() {\r\n                lucide.createIcons();\r\n                this.bindEvents();\r\n            }\r\n\r\n            bindEvents() {\r\n                this.el('calcBtn').addEventListener('click', () => this.handleCalculate());\r\n                this.el('clearBtn').addEventListener('click', () => this.handleClear());\r\n                this.el('darkModeToggle').addEventListener('click', () => document.documentElement.classList.toggle('dark'));\r\n                \/\/ Evento para el bot\u00f3n de Excel\r\n                this.el('exportExcelBtn').addEventListener('click', () => this.exportToExcel());\r\n            }\r\n\r\n            \/\/ Nueva funci\u00f3n para exportar a Excel\r\n            exportToExcel() {\r\n                const table = this.el('subnetTable');\r\n                if (!table || table.rows.length <= 1) return;\r\n\r\n                const ipBase = this.el('ipBase').value;\r\n                const wb = XLSX.utils.table_to_book(table, { sheet: \"Subredes\" });\r\n                \r\n                \/\/ Generar nombre de archivo con timestamp\r\n                const filename = `Subnetting_${ipBase.replace(\/\\.\/g, '_')}_${new Date().getTime()}.xlsx`;\r\n                \r\n                XLSX.writeFile(wb, filename);\r\n                this.showToast(TRANSLATIONS[this.currentLang].excelExport || \"Excel Exportado\");\r\n            }\r\n\r\n            \/\/ Funci\u00f3n auxiliar para mostrar notificaciones (Toast)\r\n            showToast(msg) {\r\n                const toast = this.el('toast');\r\n                this.el('toastMsg').textContent = msg;\r\n                toast.classList.remove('translate-y-20', 'opacity-0');\r\n                setTimeout(() => {\r\n                    toast.classList.add('translate-y-20', 'opacity-0');\r\n                }, 3000);\r\n            }\r\n\r\n            handleCalculate() {\r\n                const overlay = this.el('loadingOverlay');\r\n                overlay.classList.remove('hidden');\r\n                setTimeout(() => overlay.classList.remove('opacity-0'), 10);\r\n                setTimeout(() => {\r\n                    try {\r\n                        this.process();\r\n                    } catch (e) {\r\n                        alert(e.message);\r\n                    } finally {\r\n                        overlay.classList.add('opacity-0');\r\n                        setTimeout(() => overlay.classList.add('hidden'), 300);\r\n                    }\r\n                }, 400);\r\n            }\r\n\r\n            process() {\r\n                const ipStr = this.el('ipBase').value;\r\n                if (!IPService.isValid(ipStr)) throw new Error(\"IP Inv\u00e1lida\");\r\n\r\n                const baseCidr = parseInt(this.el('clase').value);\r\n                const reqSubnets = parseInt(this.el('numSubnets').value);\r\n                const reqHostsInput = this.el('hostsPerSubnet').value;\r\n                const reqHosts = reqHostsInput ? parseInt(reqHostsInput) : null;\r\n\r\n                const bitsForSubnets = Math.ceil(Math.log2(reqSubnets));\r\n                let bitsForHosts = 0;\r\n                if (reqHosts) bitsForHosts = Math.ceil(Math.log2(reqHosts + 2));\r\n\r\n                let targetCidr = baseCidr + bitsForSubnets;\r\n                if (reqHosts && (32 - bitsForHosts) < targetCidr) {\r\n                    targetCidr = 32 - bitsForHosts;\r\n                }\r\n                \r\n                if (targetCidr > 31) throw new Error(\"Excede l\u00edmite IPv4\");\r\n\r\n                this.render(baseCidr, bitsForSubnets, targetCidr, reqSubnets, IPService.toLong(ipStr));\r\n            }\r\n\r\n            render(baseCidr, bitsForSubnets, targetCidr, numSubnets, baseIpLong) {\r\n                const hostBits = 32 - targetCidr;\r\n                const blockSize = Math.pow(2, hostBits);\r\n                const maskStr = IPService.calculateMask(targetCidr);\r\n                \r\n                this.el('valResultMask').textContent = `\/${targetCidr} (${maskStr})`;\r\n                this.el('valMaxHosts').textContent = (Math.pow(2, hostBits) - 2).toLocaleString();\r\n                this.el('valNetworkJump').textContent = IPService.getJump(targetCidr);\r\n\r\n                this.el('emptyState').classList.add('hidden');\r\n                this.el('resultSummaryCard').classList.remove('hidden');\r\n                this.el('resultsArea').classList.remove('hidden');\r\n\r\n                const tbody = this.el('tbody');\r\n                tbody.innerHTML = '';\r\n                const limit = Math.min(numSubnets, 1000);\r\n                this.el('recordCount').textContent = limit;\r\n\r\n                for(let i=0; i<limit; i++) {\r\n                    const net = (baseIpLong + (i * blockSize)) >>> 0;\r\n                    const broad = (net + blockSize - 1) >>> 0;\r\n                    const tr = document.createElement('tr');\r\n                    tr.innerHTML = `<td class=\"p-3 text-center\">${i+1}<\/td><td class=\"p-3 font-bold text-primary-600\">${IPService.fromLong(net)}<\/td><td class=\"p-3\">${maskStr}<\/td><td class=\"p-3 text-xs\">${IPService.fromLong(net+1)} - ${IPService.fromLong(broad-1)}<\/td><td class=\"p-3 text-gray-500\">${IPService.fromLong(broad)}<\/td>`;\r\n                    tbody.appendChild(tr);\r\n                }\r\n\r\n                this.renderBinary(baseCidr, bitsForSubnets, targetCidr);\r\n            }\r\n\r\n            renderBinary(baseCidr, bitsSubnet, targetCidr) {\r\n                const powersRow = this.el('powersOf2Row');\r\n                const notationRow = this.el('pNotationRow');\r\n                const binaryRow = this.el('binaryMaskRow');\r\n                powersRow.innerHTML = ''; notationRow.innerHTML = ''; binaryRow.innerHTML = '';\r\n\r\n                for (let i = 23; i >= 0; i--) {\r\n                    const bitGlobalPos = 32 - i;\r\n                    const isOctetBoundary = (i === 15 || i === 7);\r\n                    \r\n                    const isSubnetCut = bitGlobalPos === (baseCidr + bitsSubnet);\r\n                    const borderClass = `border-l ${isOctetBoundary ? 'border-gray-400 dark:border-gray-500' : 'border-transparent'} ${isSubnetCut ? 'border-r-4 border-r-primary-500' : ''}`;\r\n                    \r\n                    let bgClass = \"text-amber-500 bg-amber-50\/30\"; \r\n                    if (bitGlobalPos <= baseCidr) {\r\n                        bgClass = \"text-gray-400 bg-gray-100 dark:bg-gray-800\"; \r\n                    } else if (bitGlobalPos <= (baseCidr + bitsSubnet)) {\r\n                        bgClass = \"text-white bg-primary-500\"; \r\n                    } else if (bitGlobalPos <= targetCidr) {\r\n                        bgClass = \"text-primary-700 bg-primary-100\"; \r\n                    }\r\n\r\n                    powersRow.appendChild(this.createCell('th', Math.pow(2, i).toLocaleString(), `p-1 font-normal text-gray-400 ${borderClass}`));\r\n                    notationRow.appendChild(this.createCell('th', `2^${i}`, `p-1 text-[9px] text-gray-400 ${borderClass}`));\r\n                    \r\n                    const bitVal = bitGlobalPos <= targetCidr ? \"1\" : \"0\";\r\n                    binaryRow.appendChild(this.createCell('td', bitVal, `p-2 ${bgClass} ${borderClass}`));\r\n                }\r\n            }\r\n\r\n            createCell(tag, text, cls) {\r\n                const c = document.createElement(tag);\r\n                c.className = cls;\r\n                c.textContent = text;\r\n                return c;\r\n            }\r\n\r\n            handleClear() {\r\n                location.reload();\r\n            }\r\n        }\r\n\r\n        document.addEventListener('DOMContentLoaded', () => window.App = new SubnettingUI());\r\n    <\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<script>\n  if (typeof hasAmeliaEntitiesApiCall === 'undefined' && ('' === '' && '' !== '1')) {\n    var hasAmeliaEntitiesApiCall = true;\n  }\n  var ameliaShortcodeData = (typeof ameliaShortcodeData === 'undefined') ? [] : ameliaShortcodeData;\n  ameliaShortcodeData.push(\n    {\n      'hasApiCall': (typeof hasAmeliaEntitiesApiCall !== 'undefined') && hasAmeliaEntitiesApiCall,\n      'trigger': '',\n      'trigger_type': '',\n      'triggered_form': 'sbsNew',\n      'in_dialog': '',\n      'show': '',\n      'counter': '1000',\n      'category': '',\n      'service': '',\n      'employee': '',\n      'location': '',\n      'package': '',\n      'layout': '1',\n    }\n  );\n\n  var ameliaShortcodeDataTriggered = (typeof ameliaShortcodeDataTriggered === 'undefined') ? [] : ameliaShortcodeDataTriggered;\n  if (ameliaShortcodeData[ameliaShortcodeData.length - 1].trigger !== '') {\n    if (ameliaShortcodeDataTriggered.filter(a => a.counter === ameliaShortcodeData[ameliaShortcodeData.length - 1].counter).length === 0) {\n      ameliaShortcodeDataTriggered.push(ameliaShortcodeData.pop());\n    } else {\n      ameliaShortcodeData.pop()\n    }\n  }\n  if (typeof hasAmeliaEntitiesApiCall !== 'undefined' && hasAmeliaEntitiesApiCall) {\n    hasAmeliaEntitiesApiCall = false;\n  }\n<\/script>\n\n<div\n  id=\"amelia-v2-booking-1000\"\n  class=\"amelia-v2-booking\"\n >\n    <step-form-wrapper><\/step-form-wrapper><\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;Agenda tu visita por el campus. IP Calculator Subnetting Pro Calculadora Avanzada IPv4 ES Configuraci\u00f3n Direcci\u00f3n IP Base Clase \/ CIDR Inicial Clase A (\/8)Clase B (\/16)Clase C (\/24) Subredes Hosts (Opcional) Calcular Resumen de C\u00e1lculo Salto de Red (Bloque) &#8211; Hosts \u00datiles &#8211; Nueva M\u00e1scara &#8211; By Jose C. Sierra Listo para calcular Ingresa&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_kadence_starter_templates_imported_post":true,"_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-77","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>- Calculadora IPv4<\/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:\/\/sitios.ces.edu.co\/pruebas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"- Calculadora IPv4\" \/>\n<meta property=\"og:description\" content=\"&nbsp;Agenda tu visita por el campus. IP Calculator Subnetting Pro Calculadora Avanzada IPv4 ES Configuraci\u00f3n Direcci\u00f3n IP Base Clase \/ CIDR Inicial Clase A (\/8)Clase B (\/16)Clase C (\/24) Subredes Hosts (Opcional) Calcular Resumen de C\u00e1lculo Salto de Red (Bloque) &#8211; Hosts \u00datiles &#8211; Nueva M\u00e1scara &#8211; By Jose C. Sierra Listo para calcular Ingresa...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sitios.ces.edu.co\/pruebas\/\" \/>\n<meta property=\"og:site_name\" content=\"Calculadora IPv4\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-14T15:14:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/\",\"url\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/\",\"name\":\"- Calculadora IPv4\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/#website\"},\"datePublished\":\"2025-12-19T16:35:25+00:00\",\"dateModified\":\"2026-04-14T15:14:16+00:00\",\"inLanguage\":\"es-CO\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/#website\",\"url\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/\",\"name\":\"Subnetting Pro 2.0 | Calculadora de Subredes IPv4 Gratis\",\"description\":\"Calculadora de IPs\",\"publisher\":{\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CO\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/#organization\",\"name\":\"CES\",\"url\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CO\",\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Logo-ces.png\",\"contentUrl\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Logo-ces.png\",\"width\":680,\"height\":207,\"caption\":\"CES\"},\"image\":{\"@id\":\"https:\\\/\\\/sitios.ces.edu.co\\\/pruebas\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"- Calculadora IPv4","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:\/\/sitios.ces.edu.co\/pruebas\/","og_locale":"es_ES","og_type":"article","og_title":"- Calculadora IPv4","og_description":"&nbsp;Agenda tu visita por el campus. IP Calculator Subnetting Pro Calculadora Avanzada IPv4 ES Configuraci\u00f3n Direcci\u00f3n IP Base Clase \/ CIDR Inicial Clase A (\/8)Clase B (\/16)Clase C (\/24) Subredes Hosts (Opcional) Calcular Resumen de C\u00e1lculo Salto de Red (Bloque) &#8211; Hosts \u00datiles &#8211; Nueva M\u00e1scara &#8211; By Jose C. Sierra Listo para calcular Ingresa...","og_url":"https:\/\/sitios.ces.edu.co\/pruebas\/","og_site_name":"Calculadora IPv4","article_modified_time":"2026-04-14T15:14:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sitios.ces.edu.co\/pruebas\/","url":"https:\/\/sitios.ces.edu.co\/pruebas\/","name":"- Calculadora IPv4","isPartOf":{"@id":"https:\/\/sitios.ces.edu.co\/pruebas\/#website"},"datePublished":"2025-12-19T16:35:25+00:00","dateModified":"2026-04-14T15:14:16+00:00","inLanguage":"es-CO","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sitios.ces.edu.co\/pruebas\/"]}]},{"@type":"WebSite","@id":"https:\/\/sitios.ces.edu.co\/pruebas\/#website","url":"https:\/\/sitios.ces.edu.co\/pruebas\/","name":"Subnetting Pro 2.0 | Calculadora de Subredes IPv4 Gratis","description":"Calculadora de IPs","publisher":{"@id":"https:\/\/sitios.ces.edu.co\/pruebas\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sitios.ces.edu.co\/pruebas\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CO"},{"@type":"Organization","@id":"https:\/\/sitios.ces.edu.co\/pruebas\/#organization","name":"CES","url":"https:\/\/sitios.ces.edu.co\/pruebas\/","logo":{"@type":"ImageObject","inLanguage":"es-CO","@id":"https:\/\/sitios.ces.edu.co\/pruebas\/#\/schema\/logo\/image\/","url":"https:\/\/sitios.ces.edu.co\/pruebas\/wp-content\/uploads\/2026\/01\/Logo-ces.png","contentUrl":"https:\/\/sitios.ces.edu.co\/pruebas\/wp-content\/uploads\/2026\/01\/Logo-ces.png","width":680,"height":207,"caption":"CES"},"image":{"@id":"https:\/\/sitios.ces.edu.co\/pruebas\/#\/schema\/logo\/image\/"}}]}},"campaignId":"","_links":{"self":[{"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/pages\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":40,"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/pages\/77\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/pages\/77\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/sitios.ces.edu.co\/pruebas\/index.php\/wp-json\/wp\/v2\/media?parent=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}