From 38001668e6f15d88527f1fff6b0b64cea4dc68ce Mon Sep 17 00:00:00 2001 From: Francisco Anfuso Date: Fri, 28 Aug 2026 15:25:16 -0300 Subject: [PATCH] update1 --- README.md | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) diff --git a/README.md b/README.md index e69de29..a1f81f5 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,134 @@ +ARQ & UX – IDE CONSULTORES + +## 1. Mapa del Sitio (Sitemap Definitivo) + +La estructura está diseñada para guiar al usuario según su "nivel de conciencia" sobre su propio problema, sin obligarlo a entender la estructura interna de IDE primero. + +1. **Home** (Resumen sistémico y doble vía de entrada) +2. **Somos IDE** (Identidad, propósito, equipo y metodología) +3. **Desafíos** (Para el que tiene el problema, pero no sabe qué solución necesita) +4. **Soluciones** (Para el que sabe exactamente qué busca: ISO, PMO, IA, etc.) +5. **Ecosistema** (La explicación del "cómo": Excellence, Project, Academy, Digital) +6. **IDE Academy** (Página de aterrizaje simplificada: propuesta de valor y 2-3 cursos destacados) +7. **Insights** (Feed dinámico de las 3 últimas entradas del blog de WordPress + enlace al blog completo) +8. **Contacto** (Formulario inteligente + WhatsApp + Datos) +9. **Trabaja con nosotros** (Página independiente en el footer para captación de talento) + +* * * + +## 2. Esquemática de la HOME (Wireframe Lógico por Bloques) + +*Regla de oro: La Home resume, las secciones desarrollan. No repetir la historia completa en cada página.* + +* **Bloque 1: Hero (La Doble Entrada)** + + * *Eyebrow (Texto pequeño superior):* TODO ESTÁ CONECTADO. + * *H1 (Título principal):* Mejorar una parte no siempre mejora el todo. + * *Bajada:* En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema. + * *Mecanismo de Doble Entrada (Dos tarjetas o botones prominentes):* + * `[ Tengo un desafío, pero no sé exactamente qué necesito ]` → Lleva a la página *Desafíos*. + * `[ Busco una solución concreta (ISO, Proyectos, IA) ]` → Lleva a la página *Soluciones*. +* **Bloque 2: La Tensión (El Quiebre)** + + * *Copy:* "Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. Soluciones aisladas para problemas que nunca estuvieron realmente aislados." + * *Visual:* Gráfico minimalista y elegante (geometría o nodos) que contraste "partes aisladas" vs. "sistema conectado". Cero estética de "cerebros digitales" o "circuitos". +* **Bloque 3: El Principio IDE (La Nueva Forma de Mirar)** + + * *H2:* Comprender el todo para saber dónde intervenir. + * *Metodología (Visual en 4 pasos):* 01. Comprender → 02. Focalizar → 03. Integrar → 04. Transformar. +* **Bloque 4: El Ecosistema (Demostración de Capacidad)** + + * *H2:* No se trata de sumar soluciones. Se trata de conectar capacidades. + * *Grid de 4 tarjetas interactivas:* Excellence | Project | Academy | Digital. (Al hacer hover o clic, se expande brevemente qué resuelve cada una y un link a la página de Ecosistema). +* **Bloque 5: Prueba de Autoridad / Sectores** + + * *Copy:* "Acompañamos la transformación en contextos complejos." + * *Visual:* Logos de clientes o iconografía limpia de sectores (Agro, Salud, Educación, Industria). +* **Bloque 6: CTA Final de Conversión** + + * *H2:* ¿Qué desafío querés transformar? + * *Bajada:* Empecemos por entenderlo. + * *Botón Principal:* `[ HABLEMOS ]` (Lleva a Contacto). + +* * * + +## 3. Esquemática de Subpáginas Clave + +### A. Página: Desafíos + +* **Propósito:** Atender al usuario que dice "Algo no funciona, pero no sé qué necesito". +* **Estructura:** + * Header con pregunta empática: "¿Qué está pasando en tu organización?" + * Listado de tarjetas de desafíos (ej: "Transformar la organización", "Mejorar la gestión", "Incorporar tecnología e IA"). + * *Dinámica:* Al hacer clic en un desafío, no se recarga la página, se abre un **Modal o Acordeón** que muestra: Contexto → Preguntas clave → Posibles caminos de intervención → CTA: "Hablemos de este desafío". + +### B. Página: Soluciones + +* **Propósito:** Atender al usuario que dice "Necesito ISO 9001" o "Necesito una PMO". +* **Regla UX:** La respuesta concreta debe estar a un clic. Sin filosofía previa. +* **Estructura:** + * Buscador o filtro rápido por tipo de solución. + * Listado claro (ej: ISO 9001, ISO 14001, Gestión de Proyectos, IA). + * *Dinámica:* Al entrar a una solución específica (ej: ISO 9001), la página responde: 1. Qué es, 2. Para quién, 3. Qué problema aborda, 4. Cómo intervenimos. + * *Venta cruzada sutil al final:* "¿Sabías que un sistema de gestión requiere también desarrollar capacidades en tu equipo? Conocé cómo IDE Academy puede complementar esta implementación". + +### C. Página: Ecosistema + +* **Propósito:** Explicar el "por qué" y el "cómo" de IDE. +* **Estructura:** Explicación profunda de las 4 capacidades (Excellence, Project, Academy, Digital). Gráfico visual que muestre cómo se relacionan entre sí (ej: un diagrama de Venn o red de nodos). Énfasis en: "No todos los desafíos necesitan todo el Ecosistema, pero todos se benefician de una mirada que comprende el conjunto". + +### D. Página: IDE Academy (Alcance MVP) + +* **Propósito:** Mencionar la academia y captar interés para formación *In Company* o futuros cursos, sin complejidad de LMS. +* **Estructura:** + * Header: "Desarrollamos las capacidades que hacen posible la transformación". + * Breve descripción de la propuesta de valor de la formación en IDE. + * **Sección "Próximos Cursos / Destacados":** 2 o 3 tarjetas de cursos (con datos de relleno o planificados: Título, Modalidad, Duración). + * *Dinámica:* Al hacer clic en un curso, se abre un **Modal** con la ficha técnica (Propuesta, Temario, Docente) y un CTA que dice: "Consultar por próximas fechas o formación In Company" (que lleva al formulario de contacto). + +### E. Página: Insights + +* **Propósito:** Demostrar conocimiento y generar tráfico. +* **Dinámica:** La página mostrará automáticamente (vía API de WordPress) las **3 últimas entradas** del blog en formato de tarjetas (Imagen, Título, Extracto, Fecha). +* *CTA:* Un botón claro al final: `[ Ver todos los artículos en nuestro Blog ]` que deriva al subdominio `blog.ideconsultores.com.ar`. + +### F. Página: Contacto + +* **Propósito:** Convertir el interés en una conversación comercial con baja fricción. +* **Estructura:** + * Mensaje de apertura: "¿Qué desafío querés transformar? Empecemos por entenderlo." + * **Formulario Inteligente:** + 1. Nombre + 2. Organización + 3. Rol + 4. Email + 5. Teléfono (Opcional) + 6. *Dropdown "Estoy buscando":* (Orientación para un desafío / Una solución concreta / Implementar o certificar una norma / Formación para mi organización / Gestionar un proyecto / Transformación digital e IA / Otro). + 7. Campo de texto: "Contanos brevemente en qué podemos ayudarte". + 8. Botón de envío: `[ HABLEMOS ]` + * *Configuración técnica:* El script de envío debe estar configurado para dirigir los datos a `info@ideconsultores.com.ar`. + * *CTA Secundario:* "¿Preferís escribirnos directamente?" → Botón de WhatsApp. + +### G. Página: Trabaja con nosotros + +* **Ubicación:** Enlace exclusivo en el Footer (pie de página) para no distraer a los clientes potenciales. +* **Estructura:** Breve texto sobre la cultura de IDE y un formulario simplificado (Nombre, Email, LinkedIn/CV, Área de interés) que también envía a `info@ideconsultores.com.ar` (o a un alias interno que ellos definan, ej: `talento@...`). + +* * * + +## 4. Dinámica del Sitio y Reglas de UX (Sin Código) + +1. **Navegación Mobile First:** En dispositivos móviles, el menú se convierte en un "menú hamburguesa" limpio. Los filtros de la página de Soluciones o las tarjetas de Academy deben ser fácilmente scrolleables horizontalmente o apilados verticalmente con botones grandes (fáciles de tocar con el pulgar). +2. **Uso de Modales (Pop-ups):** Se utilizarán modales para las fichas de cursos de Academy y para el detalle de los "Desafíos". Esto mantiene al usuario en la misma página, reduciendo la tasa de rebote y acelerando la navegación sin recargar el entorno. +3. **Transiciones y Animaciones Funcionales:** Solo se usarán animaciones con propósito. Por ejemplo, un _fade-in_ suave al hacer scroll para que los bloques de texto aparezcan con elegancia, o el despliegue fluido de un acordeón. Nada de animaciones que distraigan, mareen o ralenticen la carga. +4. **Accesibilidad (A11Y) como estándar:** + * Contraste alto y validado (WCAG) entre textos y fondos en _ambos_ modos de tema. + * Tamaños de fuente base de al menos 16px para cuerpos de texto. + * Etiquetas (`labels`) claras y visibles en todos los campos de formularios. + * Textos alternativos (`alt`) descriptivos en todas las imágenes. + * Navegación completamente operable mediante teclado. +5. **Selector de Tema (Modo Claro / Modo Oscuro):** + * **Funcionalidad:** Un switch discreto pero accesible (ej. ícono de sol/luna) en el header o footer del sitio. + * **Estado por defecto:** **Modo Claro**. + * **Regla de Diseño:** El modo oscuro **no** debe parecer una estética "tech", "hacker" o "cyberpunk" (prohibido usar negros puros #000000 o acentos neón). Debe ser un gris oscuro elegante y mate (ej. #1A1A1A o #2D2D2D) que mantenga la seriedad profesional de la consultora, con textos en blanco o gris muy claro para garantizar una lectura cómoda y reducir la fatiga visual nocturna. La transición entre modos debe ser suave (transición CSS de 0.3s). +6. **Integración del Blog (Insights):** El desarrollador configurará un endpoint en el WordPress del subdominio para que la página principal de IDE extraiga solo el título, extracto, imagen destacada y enlace de las 3 últimas publicaciones, garantizando que el sitio principal cargue rápido y no se vea afectado por la carga del blog. \ No newline at end of file