Flowcharts de arquitectura web
12 diagramas del sitio ortegaygasset.mx: mapa del sitio, flujos de usuario, estructura de páginas y sistema de plantillas.
Institucional / Home
Maestrías
Acuerdo 286
Programas en España
Educación Continua
Entrada / tráfico
01
Mapa del sitio
Jerarquía completa de páginas. Cada color identifica una categoría académica que se mantiene en todo el sitio.
graph TD
ROOT["ortegaygasset.mx"]
ROOT --> HOME["/ Home"]
ROOT --> MAEST["/maestrias"]
ROOT --> A286["/acuerdo-286"]
ROOT --> ESP["/programas-en-espana"]
ROOT --> CONT_ED["/educacion-continua"]
ROOT --> CONOC["/conocenos"]
ROOT --> EGRE["/egresados"]
ROOT --> BLOG["/blog"]
ROOT --> CONTACTO["/contacto"]
MAEST --> M1["/maestrias/gobierno-y-administracion-publica"]
MAEST --> M2["/maestrias/comunicacion-politica"]
MAEST --> M3["/maestrias/politicas-publicas-y-gestion"]
MAEST --> M4["/maestrias/liderazgo-y-gestion-publica"]
MAEST --> M5["/maestrias/estudios-electorales"]
MAEST --> M6["/maestrias/gobierno-digital"]
ESP --> E1["/programas-en-espana/intensivo-1"]
ESP --> E2["/programas-en-espana/intensivo-2"]
ESP --> EN["...más programas"]
CONT_ED --> C1["/educacion-continua/diplomado-1"]
CONT_ED --> C2["/educacion-continua/microcredencial-1"]
CONT_ED --> CN["...más programas"]
BLOG --> B1["/blog/articulo-1"]
BLOG --> BN["...más artículos"]
style HOME fill:#003d71,color:#fff
style MAEST fill:#1ea7c4,color:#fff
style A286 fill:#314b39,color:#fff
style ESP fill:#c9a33a,color:#fff
style CONT_ED fill:#811c3b,color:#fff
style CONOC fill:#2b587d,color:#fff
style EGRE fill:#2b587d,color:#fff
style BLOG fill:#2b587d,color:#fff
style CONTACTO fill:#003d71,color:#fff
02
Navegación global
Barra de navegación (header) y footer. Idénticos en todas las páginas. Las categorías con programas despliegan mega-menú.
graph LR
subgraph NAV["Barra de navegación"]
LOGO["Logo OyG MX"]
N1["Maestrías ▾"]
N2["Acuerdo 286"]
N3["Prog. España ▾"]
N4["Ed. Continua ▾"]
N5["Conócenos"]
N6["Egresados"]
N7["Blog"]
N8["Contacto"]
CTA_NAV["Solicita información"]
end
N1 --> MEGA1["Mega-menú: lista de maestrías + Ver todos"]
N3 --> MEGA2["Mega-menú: intensivos España + Ver todos"]
N4 --> MEGA3["Mega-menú: diplomados y micro + Ver todos"]
CTA_NAV --> CONTACTO_FORM["Contacto #formulario-medio"]
subgraph FOOTER["Footer · 4 columnas"]
F1["Programas: Maestrías, A286, España, Continua"]
F2["Instituto: Conócenos, Egresados, Blog, Contacto"]
F3["Contacto: Tel, WhatsApp, Correo, Redes"]
F4["Legal: RVOE, Privacidad, Accesibilidad, Términos"]
end
style CTA_NAV fill:#003d71,color:#fff
style CONTACTO_FORM fill:#003d71,color:#fff
03
Embudo de matrícula (ruta principal)
El flujo que recorre el prospecto típico: desde Google hasta la inscripción. Incluye el lead magnet (descarga del plan) como punto intermedio de captura.
flowchart TD
ENTRY["Google / RRSS / Referido"]
HOME["Home: descubre las 4 categorías"]
LIST["Listado de categoría: compara programas"]
FILTER["Filtra: modalidad, doble titulación, área"]
FICHA["Ficha del programa: 10 bloques"]
LEAD["Lead magnet: descarga plan de estudios\n(nombre + correo)"]
FOLLOWUP["Admisiones contacta por correo"]
CONTACT["Contacto: formulario nivel 2 o agenda sesión"]
CALL["Conversación con admisiones"]
INSCRIPCION["Inscripción"]
ENTRY --> HOME
HOME --> LIST
LIST --> FILTER
FILTER --> FICHA
FICHA --> LEAD
LEAD --> FOLLOWUP
FOLLOWUP --> CONTACT
FICHA -->|"CTA directo"| CONTACT
CONTACT --> CALL
CALL --> INSCRIPCION
style ENTRY fill:#4A6E8C,color:#fff
style INSCRIPCION fill:#314b39,color:#fff
style LEAD fill:#c9a33a,color:#fff
style CONTACT fill:#003d71,color:#fff
04
Acuerdo 286 (titulación por experiencia)
Flujo propio para el segmento que busca titularse por experiencia laboral. El test de elegibilidad filtra y captura a la vez.
flowchart TD
SEO["Google: 'acuerdo 286 titulación experiencia'"]
LANDING["/acuerdo-286: hero + explicación"]
PERFIL["Se reconoce en el perfil que califica"]
PROCESO["Lee el proceso paso a paso (4 etapas)"]
TEST["Test de elegibilidad:\n3 preguntas de filtro +\nnombre + correo + teléfono"]
ADMISIONES["Admisiones contacta con resultado"]
INSCRIPCION["Inscripción al proceso A286"]
SEO --> LANDING
LANDING --> PERFIL
PERFIL -->|"Sí, soy yo"| PROCESO
PERFIL -->|"No aplico"| REDIR["Redirige a maestrías"]
PROCESO --> TEST
TEST --> ADMISIONES
ADMISIONES --> INSCRIPCION
style SEO fill:#4A6E8C,color:#fff
style TEST fill:#314b39,color:#fff
style INSCRIPCION fill:#314b39,color:#fff
05
Tráfico SEO / Blog
El blog como puerta de entrada orgánica. Cada artículo redirige a fichas de programa mediante cross-sell y lead magnets.
flowchart TD
GOOGLE["Google: artículo temático"]
ART["/blog/articulo: lectura"]
BLOG["/blog: índice con filtros por tema"]
LEAD["Lead magnet: descarga plan de estudios\n(nombre + correo)"]
CROSS["Programas relacionados (cross-sell)"]
FICHA["Ficha del programa"]
EMBUDO["Entra al flujo A de matrícula"]
GOOGLE --> ART
ART --> BLOG
BLOG --> LEAD
BLOG --> CROSS
CROSS --> FICHA
ART -->|"CTA en artículo"| FICHA
FICHA --> EMBUDO
style GOOGLE fill:#4A6E8C,color:#fff
style LEAD fill:#c9a33a,color:#fff
style EMBUDO fill:#003d71,color:#fff
06
Usuario institucional (confianza primero)
Para el prospecto que necesita verificar la credibilidad del instituto antes de ver la oferta. Conócenos construye confianza y devuelve al embudo.
flowchart TD
NAV["Nav: clic en Conócenos"]
CONOC["/conocenos"]
FOM["Lee herencia FOM (casi 50 años)"]
CLAUSTRO["Ve profesorado real"]
CONVENIOS["Ve convenios: UNAM, ITAM, INE, SAT..."]
CTA["CTA: Conoce nuestros programas"]
LIST["Listado de maestrías"]
EMBUDO["Entra al flujo A de matrícula"]
NAV --> CONOC
CONOC --> FOM
FOM --> CLAUSTRO
CLAUSTRO --> CONVENIOS
CONVENIOS --> CTA
CTA --> LIST
LIST --> EMBUDO
style CONOC fill:#2b587d,color:#fff
style EMBUDO fill:#003d71,color:#fff
07
Escalera de valor (ruta modular)
El prospecto que no está listo para la maestría puede entrar por un peldaño inferior y subir progresivamente.
flowchart LR
MICRO["Microcredencial\n(entrada baja)"]
DIPLO["Diplomado\n(compromiso medio)"]
MAEST["Maestría\n(compromiso alto)"]
DOBLE["Doble titulación\nMéxico-Madrid\n(máximo valor)"]
MICRO -->|"Peldaño siguiente"| DIPLO
DIPLO -->|"Peldaño siguiente"| MAEST
MAEST -->|"Diferenciador"| DOBLE
style MICRO fill:#811c3b,color:#fff
style DIPLO fill:#811c3b,color:#fff
style MAEST fill:#1ea7c4,color:#fff
style DOBLE fill:#c9a33a,color:#fff
La ficha de programa muestra la escalera en su bloque 10: si el prospecto no está listo para la maestría, ve el peldaño inferior como alternativa.
08
Contacto: formularios escalonados
Tres niveles de compromiso en paralelo. El prospecto elige su propio paso: bajo (descarga), medio (que lo llamen) o alto (agendar sesión en vivo).
flowchart TD
CONTACTO["/contacto: Da el paso que quieras dar hoy"]
CONTACTO --> N1["Nivel 1: Descarga el plan\n(nombre + correo)\nCompromiso bajo"]
CONTACTO --> N2["Nivel 2: Solicita información\n(nombre + correo + tel + categoría)\nCompromiso medio"]
CONTACTO --> N3["Nivel 3: Agenda sesión informativa\n(nombre + correo + tel + programa + fecha)\nCompromiso alto"]
N1 -->|"Recibe PDF"| NURTURE["Nurturing por correo"]
N2 -->|"Admisiones llama"| CALL["Llamada de admisiones"]
N3 -->|"Sesión en vivo"| SESSION["Sesión con asesor"]
NURTURE --> CALL
CALL --> INSCRIPCION["Inscripción"]
SESSION --> INSCRIPCION
style N1 fill:#4A6E8C,color:#fff
style N2 fill:#003d71,color:#fff
style N3 fill:#093862,color:#fff
style INSCRIPCION fill:#314b39,color:#fff
09
Estructura de bloques por tipo de página
Cada tipo de página tiene un número fijo de bloques en orden deliberado. La ficha de programa (10 bloques) es la más densa: cada bloque responde a una objeción del prospecto.
graph TD
subgraph HOME["Home (7 bloques)"]
H1["01 Hero de enrutamiento"]
H2["02 Las 4 categorías"]
H3["03 Cómo es el camino (3 pasos)"]
H4["04 Egresados reales"]
H5["05 Por qué Ortega (autoridad)"]
H6["06 Ruta modular (escalera)"]
H7["07 Cierre + formulario captura"]
end
subgraph LISTADO["Listado categoría (5 bloques)"]
L1["01 Cabecera de categoría"]
L2["02 Filtros (chips)"]
L3["03 Grid de programas (tarjetas)"]
L4["04 Nota de plantilla (interno)"]
L5["05 Cierre + lead magnet"]
end
subgraph FICHA["Ficha de programa (10 bloques)"]
F1["01 Encabezado + tarjeta sticky"]
F2["02 A quién va dirigido"]
F3["03 Qué vas a lograr"]
F4["04 Plan de estudios + descarga"]
F5["05 Profesorado real"]
F6["06 Titulación doble sello"]
F7["07 Precio y financiación"]
F8["08 Fechas y formato"]
F9["09 Egresados del programa"]
F10["10 Cierre + ruta modular"]
end
style HOME fill:#003d71,color:#fff
style LISTADO fill:#1ea7c4,color:#fff
style FICHA fill:#093862,color:#fff
10
Sistema de plantillas reutilizables
5 páginas únicas + 2 plantillas que se reutilizan. La plantilla de listado genera 3 instancias, la de ficha genera todas las fichas de programa.
flowchart TD
subgraph UNICAS["Páginas únicas (5)"]
P_HOME["Home"]
P_A286["Acuerdo 286"]
P_CONOC["Conócenos"]
P_EGRE["Egresados"]
P_CONTACTO["Contacto"]
end
subgraph REUTILIZABLES["Plantillas reutilizables (2)"]
TPL_LIST["Plantilla: Listado de categoría"]
TPL_FICHA["Plantilla: Ficha de programa"]
end
TPL_LIST -->|"Instancia 1"| I_MAEST["/maestrias"]
TPL_LIST -->|"Instancia 2"| I_ESP["/programas-en-espana"]
TPL_LIST -->|"Instancia 3"| I_CONT["/educacion-continua"]
TPL_FICHA -->|"~6 fichas"| F_MAEST["Fichas de maestrías"]
TPL_FICHA -->|"~N fichas"| F_ESP["Fichas de España"]
TPL_FICHA -->|"~N fichas"| F_CONT["Fichas de Ed. Continua"]
subgraph PENDIENTE["Pendiente de wireframear"]
P_ART["Artículo de blog (individual)"]
end
style UNICAS fill:#003d71,color:#fff
style REUTILIZABLES fill:#1ea7c4,color:#fff
style PENDIENTE fill:#c9a33a,color:#fff
11
Señales de confianza
Cada señal de confianza aparece en ubicaciones estratégicas. Las más fuertes (RVOE, doble titulación, egresados) se repiten en 3 o más páginas.
flowchart LR
subgraph SIGNALS["Señales de confianza"]
S1["RVOE (SEP)"]
S2["Doble titulación MX-Madrid"]
S3["Herencia FOM (50 años)"]
S4["Red GOBERNA"]
S5["Logos de convenios"]
S6["Profesorado real"]
S7["Egresados reales"]
S8["Precio visible"]
S9["Marco legal A286"]
end
S1 -->|"Ficha sticky + precio + tarjetas"| MULTI1["3 ubicaciones"]
S2 -->|"Home + Ficha + Conócenos"| MULTI2["3 ubicaciones"]
S3 -->|"Home + Conócenos + Footer"| MULTI3["3 ubicaciones"]
S4 -->|"Home + Conócenos + Egresados"| MULTI4["3 ubicaciones"]
S5 -->|"Solo en Conócenos"| UNI1["1 ubicación"]
S6 -->|"Ficha + Conócenos"| MULTI5["2 ubicaciones"]
S7 -->|"Home + Egresados + Ficha"| MULTI6["3 ubicaciones"]
S8 -->|"Ficha + Contacto + Tarjetas"| MULTI7["3 ubicaciones"]
S9 -->|"Solo en Acuerdo 286"| UNI2["1 ubicación"]
12
Flujo de formularios y puntos de captura
8 puntos de captura en todo el sitio, organizados por nivel de compromiso. Los de compromiso bajo alimentan el nurturing, los medios generan llamada, los altos cierran sesión en vivo.
flowchart TD
subgraph BAJO["Compromiso bajo (2 campos)"]
CAP1["Ficha: descarga plan"]
CAP2["Blog: descarga plan"]
CAP3["Contacto nivel 1"]
end
subgraph MEDIO["Compromiso medio (4 campos)"]
CAP4["Home: formulario final"]
CAP5["Ficha: solicita info"]
CAP6["Contacto nivel 2"]
end
subgraph ALTO["Compromiso alto (5+ campos)"]
CAP7["Contacto nivel 3: agenda sesión"]
CAP8["A286: test de elegibilidad"]
end
CAP1 --> NURTURE["Email nurturing"]
CAP2 --> NURTURE
CAP3 --> NURTURE
NURTURE --> CAP6
CAP4 --> ADMISIONES["Llamada de admisiones"]
CAP5 --> ADMISIONES
CAP6 --> ADMISIONES
CAP7 --> SESSION["Sesión informativa en vivo"]
CAP8 --> RESULTADO["Resultado de elegibilidad"]
ADMISIONES --> INSCRIPCION["Inscripción"]
SESSION --> INSCRIPCION
RESULTADO --> ADMISIONES
style BAJO fill:#4A6E8C,color:#fff
style MEDIO fill:#003d71,color:#fff
style ALTO fill:#093862,color:#fff
style INSCRIPCION fill:#314b39,color:#fff