{"id":1414,"date":"2025-12-11T18:02:37","date_gmt":"2025-12-11T21:02:37","guid":{"rendered":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/?page_id=1414"},"modified":"2025-12-11T19:42:34","modified_gmt":"2025-12-11T22:42:34","slug":"pi-english","status":"publish","type":"page","link":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/pi-english\/","title":{"rendered":"Profesorado de Ingl\u00e9s (PI)"},"content":{"rendered":"\n<div id=\"grids-component\" style=\"width:100%; height:100%;\"><\/div>\n\n<script>\n(function(){\n\n\/* ===========================\n   JSON DIN\u00c1MICO (nombre + tipo)\n   =========================== *\/\nconst DATA = {\n  1: [\n    { nombre: \"Pedagog\u00eda\", tipo: \"ASIG\" },\n    { nombre: \"Problem\u00e1ticas Socioantropol\u00f3gicas en Educaci\u00f3n\", tipo: \"SEM\", taller: false},\n    { nombre: \"Psicolog\u00eda y Educaci\u00f3n\", tipo: \"ASIG\", taller: false},\n    { nombre: \"Pr\u00e1ctica Docente I\", tipo: \"SEM\" , taller: true},\n    { nombre: \"Pr\u00e1cticas Discursivas en Ingl\u00e9s I\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Fon\u00e9tica y Fonolog\u00eda Inglesa I\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Gram\u00e1tica Inglesa I\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Estudios Socioculturales y Literarios de Pueblos de Habla Inglesa I\", tipo: \"SEM\", taller: false }\n  ],\n  2: [\n    { nombre: \"Historia y Pol\u00edtica de la Educaci\u00f3n Argentina\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Did\u00e1ctica General\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Pr\u00e1ctica Docente II\", tipo: \"SEM\", taller: true},\n    { nombre: \"Pr\u00e1cticas Discursivas en Ingl\u00e9s II\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Fon\u00e9tica y Fonolog\u00eda Inglesa II\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Gram\u00e1tica Inglesa II\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Estudios Socioculturales y Literarios de Pueblos de Habla Inglesa II\", tipo: \"SEM\", taller: false },\n    { nombre: \"Problem\u00e1ticas de la Adquisici\u00f3n de una 2da. Lengua\", tipo: \"SEM\", taller: false },\n    { nombre: \"Sujetos de la Educaci\u00f3n Argentina\", tipo: \"SEM\", taller: false }\n  ],\n  3: [\n    { nombre: \"Filosof\u00eda y Educaci\u00f3n\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Pr\u00e1ctica Docente III y Residencia\", tipo: \"SEM\", taller: true},\n    { nombre: \"Fon\u00e9tica y Fonolog\u00eda Inglesa III\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Gram\u00e1tica Inglesa III\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Ling\u00fc\u00edstica I\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Estudios Socioculturales y Literarios de Pueblos de Habla Inglesa III\", tipo: \"SEM\", taller: false },\n    { nombre: \"Did\u00e1ctica del Ingl\u00e9s I\", tipo: \"Expresi\u00f3n\", taller: false },\n    { nombre: \"EOI- Tic y la Educaci\u00f3n\", tipo: \"ASIG\", taller: false }\n  ],\n  4: [\n    { nombre: \"\u00c9tica y Construcci\u00f3n de Ciudadan\u00eda\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Educaci\u00f3n Sexual Integral\", tipo: \"SEM\", taller: false },\n    { nombre: \"Pr\u00e1ctica Docente IV y Residencia\", tipo: \"ASIG\", taller: true},\n    { nombre: \"Pr\u00e1cticas Discursivas en Ingl\u00e9s IV\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Ling\u00fc\u00edstica II\", tipo: \"ASIG\", taller: false },\n    { nombre: \"Literatura de Pueblos Habla Inglesa\", tipo: \"SEM\", taller: false },\n    { nombre: \"Did\u00e1ctica del Ingl\u00e9s II\", tipo: \"ASIG\", taller: false }\n  ]\n};\nconst FORMATOS = {\n  ASIG: \"Asignatura\",\n  SEM: \"Seminario\"\n};\n\n\/* ===========================\n   CSS INYECTADO DESDE JS\n   =========================== *\/\nconst css = `\n:root{\n  --accent-a:#0d4b8f;\n  --accent-b:#1aa3b8;\n  --accent-c:#f2a900;\n  --gray:#e6e6e6;\n  --border:#dcdcdc;\n  --card-bg:white;\n  --radius:10px;\n  --shadow:0 6px 18px rgba(0,0,0,0.08);\n  --gap:22px;\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\n}\n\n\/* wrapper general *\/\n.cg-wrapper{\n  width:100%;\n  height:100%;\n  box-sizing:border-box;\n  padding:16px;\n  display:flex;\n  flex-direction:column;\n  gap:12px;\n  overflow:auto;\n}\n\n\/* top gradient (figuras geom\u00e9tricas) *\/\n.cg-geo-top, .cg-geo-bottom{\n  width:100%;\n  height:72px;\n  flex:0 0 72px;\n  pointer-events:none;\n}\n.cg-geo-top svg, .cg-geo-bottom svg{ width:100%; height:100%; display:block; }\n\n\/* encabezado peque\u00f1o (Times New Roman 14) *\/\n.cg-head{\n  font-family: \"Arial\", Times, serif;\n  font-size:14px;\n  color:#222;\n  padding:6px 4px;\n}\n\n\/* contenedor de grillas: vertical y centrado *\/\n.cg-grids{\n  display:flex;\n  flex-direction:column;\n  gap:var(--gap);\n  align-items:center;   \/* centrar grillas *\/\n  width:100%;\n  flex:1 1 auto;\n  overflow:auto;\n}\n\n\/* cada grilla al 90% y centrada por flex parent *\/\n.cg-grid{\n  width:90%;\n  background:var(--card-bg);\n  border-radius:var(--radius);\n  border:1px solid var(--border);\n  box-shadow:var(--shadow);\n  overflow:hidden;\n}\n\n\/* tabla *\/\n.cg-table{\n  width:100%;\n  border-collapse:collapse;\n  table-layout:fixed;\n  font-size:14px;\n}\n\n\/* Encabezados: solo para columnas 2 y 3. primera celda de thead queda vac\u00eda (sin t\u00edtulo) *\/\n.cg-table thead th{\n  padding:10px;\n  background:#f7f7f7;\n  font-weight:700;\n  text-align:left;\n  border:1px solid var(--border);\n}\n\n\/* primera columna (a\u00f1o) estilo para la celda que hacemos rowspan *\/\n.col-year{\n  background:var(--gray);\n  text-align:center;\n  font-weight:700;\n  font-size:20px;\n  vertical-align:middle;\n  width:120px;\n  border-left: none;\n}\n\n\/* celdas de contenido *\/\n.cg-table td{\n  padding:10px;\n  border:1px solid var(--border);\n  background:white;\n  vertical-align:middle;\n}\n\n\/* Responsivo *\/\n@media (max-width:720px){\n  .cg-geo-top, .cg-geo-bottom{ height:48px; flex:0 0 48px; }\n  .cg-grid{ width:95%; }\n  .col-year{ width:90px; font-size:18px; }\n  .cg-table td, .cg-table th{ padding:8px; font-size:13px; }\n}\n@media (max-width:420px){\n  .cg-grid{ width:100%; }\n  .col-year{ display:table-cell; }\n}\n`;\n\nconst style = document.createElement('style');\nstyle.innerHTML = css;\ndocument.head.appendChild(style);\n\n\n\/* ===========================\n   SVGs GEO (top + bottom)\n   =========================== *\/\nfunction geoTopHTML(){\n  return `\n  <div class=\"cg-geo-top\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <defs>\n        <linearGradient id=\"g1\" x1=\"0\" x2=\"1\">\n          <stop offset=\"0\" stop-color=\"var(--accent-a)\"\/>\n          <stop offset=\"1\" stop-color=\"var(--accent-b)\"\/>\n        <\/linearGradient>\n        <linearGradient id=\"g2\" x1=\"0\" x2=\"1\">\n          <stop offset=\"0\" stop-color=\"var(--accent-b)\" stop-opacity=\"0.95\"\/>\n          <stop offset=\"1\" stop-color=\"var(--accent-c)\" stop-opacity=\"0.95\"\/>\n        <\/linearGradient>\n      <\/defs>\n      <polygon points=\"0,0 1200,0 1200,40 800,80 600,60 300,90 0,40\" fill=\"url(#g1)\"\/>\n      <polygon points=\"0,40 300,10 520,40 780,18 1200,60 1200,120 0,120\" fill=\"url(#g2)\" opacity=\"0.9\"\/>\n    <\/svg>\n  <\/div>\n  `;\n}\nfunction boldAfterColon(texto) {\n  const partes = texto.split(\":\");\n\n  if (partes.length < 2) return texto; \/\/ por si no tiene \":\"\n\n  const izquierda = partes[0] + \":\";          \/\/ \"Carrera:\"\n  const derecha   = partes.slice(1).join(\":\"); \/\/ \" INSTRUCTOR\"\n\n  return `${izquierda} <strong>${derecha.trim()}<\/strong>`;\n}\nfunction geoBottomHTML(){\n  return `\n  <div class=\"cg-geo-bottom\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <defs>\n        <linearGradient id=\"bg1\" x1=\"0\" x2=\"1\">\n          <stop offset=\"0\" stop-color=\"var(--accent-b)\"\/>\n          <stop offset=\"1\" stop-color=\"var(--accent-a)\"\/>\n        <\/linearGradient>\n        <linearGradient id=\"bg2\" x1=\"0\" x2=\"1\">\n          <stop offset=\"0\" stop-color=\"var(--accent-c)\" stop-opacity=\"0.95\"\/>\n          <stop offset=\"1\" stop-color=\"var(--accent-b)\" stop-opacity=\"0.95\"\/>\n        <\/linearGradient>\n      <\/defs>\n      <polygon points=\"0,0 400,40 600,10 900,50 1200,0 1200,120 0,120\" fill=\"url(#bg1)\"\/>\n      <polygon points=\"0,80 200,110 500,76 740,100 1200,60 1200,120 0,120\" fill=\"url(#bg2)\" opacity=\"0.9\"\/>\n    <\/svg>\n  <\/div>\n  `;\n}\n\n\n\/* ===========================\n   CREAR UNA GRILLA (sin barra azul, con columna a\u00f1o como celda \u00fanica)\n   =========================== *\/\nfunction crearGrilla(anio, materias){\n  const grid = document.createElement('div');\n  grid.className = 'cg-grid';\n\n  \/\/ cabecera superior con el texto peque\u00f1o (Times New Roman) - opcional visible en la parte superior del componente\n  \/\/ (ya existe un header global, no repetimos aqu\u00ed)\n\n  \/\/ creamos la tabla\n  const table = document.createElement('table');\n  table.className = 'cg-table';\n  table.setAttribute('role','table');\n  table.setAttribute('aria-label', `Grilla a\u00f1o ${anio}`);\n\n  \/\/ thead: dejamos una celda vac\u00eda para la primera columna (sin t\u00edtulo) y los dos t\u00edtulos para 2da y 3ra columna\n  const thead = document.createElement('thead');\n  thead.innerHTML = `\n    <tr>\n      <th style=\"background:transparent;border:none;\"><\/th>\n      <th>Espacio Curricular<\/th>\n      <th>Formato Curricular<\/th>\n    <\/tr>\n  `;\n  table.appendChild(thead);\n\n  const tbody = document.createElement('tbody');\n\n  \/\/ rellenar filas de materias\n  materias.forEach(m => {\n    const tr = document.createElement('tr');\n\n    const tdYearPlaceholder = document.createElement('td'); \/\/ eventual place for year cell (solo se usar\u00e1 en la primera fila)\n    \/\/ no lo a\u00f1adimos aqu\u00ed en cada fila; a\u00f1adiremos la celda col-year con rowspan en la primera fila\n\n    const tdName = document.createElement('td');\n    tdName.textContent = m.nombre;\n\nconst tdTipo = document.createElement('td');\n\nlet base = FORMATOS[m.tipo] || m.tipo;\n\n\/\/ si tambi\u00e9n es taller, agregar \" \/ Taller\"\nif (m.taller === true) {\n  base += \" y Taller\";\n}\n\ntdTipo.textContent = base;\n\n\n    \/\/ append solo las dos columnas de datos por ahora\n    tr.appendChild(tdName);\n    tr.appendChild(tdTipo);\n\n    tbody.appendChild(tr);\n  });\n\n  \/\/ ahora, si hay filas, insertamos la celda A\u00d1O al comienzo de la primera fila con rowspan = cantidad de materias\n  const rows = tbody.querySelectorAll('tr');\n  if(rows.length > 0){\n    const tdA = document.createElement('td');\n    tdA.className = 'col-year';\n    tdA.rowSpan = rows.length;\n    tdA.textContent = `A\u00d1O ${anio}`;\n    \/\/ insertamos como primera celda de la primera fila\n    rows[0].insertAdjacentElement('afterbegin', tdA);\n  } else {\n    \/\/ Si no hay materias, igual mostramos la celda a\u00f1o con rowspan=1 y una fila vac\u00eda\n    const tr = document.createElement('tr');\n    const tdA = document.createElement('td');\n    tdA.className = 'col-year';\n    tdA.rowSpan = 1;\n    tdA.textContent = `A\u00d1O ${anio}`;\n    const tdName = document.createElement('td'); tdName.textContent = '';\n    const tdTipo = document.createElement('td'); tdTipo.textContent = '';\n    tr.appendChild(tdA); tr.appendChild(tdName); tr.appendChild(tdTipo);\n    tbody.appendChild(tr);\n  }\n\n  table.appendChild(tbody);\n  grid.appendChild(table);\n  return grid;\n}\n\n\/* ===========================\n   MONTAR TODO EN EL DOM\n   =========================== *\/\nconst container = document.getElementById('grids-component');\n\nconst wrapper = document.createElement('div');\nwrapper.className = 'cg-wrapper';\n\n\/\/ top gradient\nwrapper.insertAdjacentHTML('beforeend', geoTopHTML());\n\n\/\/ peque\u00f1o encabezado en Times New Roman\nconst head = document.createElement('div');\nhead.className = 'cg-head';\nhead.innerHTML = boldAfterColon(\"Plan estudio: PROFESORADO DE INGL\u00c9S\");\nhead.style.textAlign = \"center\";\nwrapper.appendChild(head);\n\n\n\n\/\/ contenedor de grillas (verticales centradas)\nconst gridsContainer = document.createElement('div');\ngridsContainer.className = 'cg-grids';\n\n\/\/ orden: a\u00f1o 1..4\n[1,2,3,4].forEach(y => {\n  gridsContainer.appendChild(crearGrilla(y, DATA[y] || []));\n});\n\nwrapper.appendChild(gridsContainer);\n\n\/\/ bottom gradient\nwrapper.insertAdjacentHTML('beforeend', geoBottomHTML());\n\ncontainer.appendChild(wrapper);\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1676,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1414"}],"collection":[{"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/users\/1676"}],"replies":[{"embeddable":true,"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/comments?post=1414"}],"version-history":[{"count":34,"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1414\/revisions"}],"predecessor-version":[{"id":1476,"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/1414\/revisions\/1476"}],"wp:attachment":[{"href":"https:\/\/enscapdevila-cba.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media?parent=1414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}