/* ══════════════════════════════════════════════════════════════════════════ SISTEMA ESCOLAR DE QUERÉTARO — CONTENIDO DE LA PÁGINA ────────────────────────────────────────────────────────────────────────── ESTE ES EL ÚNICO ARCHIVO QUE HAY QUE TOCAR PARA CAMBIAR LA PÁGINA. Aquí viven los textos, los enlaces, el número de WhatsApp, los colores, las tipografías y lo que ve Google. El HTML solo pone la estructura; el diseño está en seq-ui.css y casi nunca hay que abrirlo. ── ÍNDICE ────────────────────────────────────────────────────────────── 1. PORTADA .............. el titular y las tres tarjetas inclinadas 2. QUÉ HACEMOS .......... las cuatro tarjetas de servicios 3. NUESTRA VISIÓN ....... el bloque mitad claro mitad oscuro 4. CÓMO TRABAJAMOS ...... las tres filas del proceso 5. CONVERSEMOS .......... el bloque final y el WHATSAPP 6. MENÚ ................. los enlaces de la barra 7. MARCA ................ el monograma y el nombre 8. PIE .................. razón social y aviso legal 9. COLORES .............. la paleta completa 10. TIPOGRAFÍA ........... la familia y de dónde se carga 11. SEO ................. título, descripción y datos para Google ── REGLAS PARA EDITAR ────────────────────────────────────────────────── · Los textos van entre comillas dobles: "así". · Si un texto lleva comillas dentro, se escapan: "dijo \"hola\"". · Cada elemento de una lista termina en coma, MENOS el último. · Los campos que terminan en _html aceptan etiquetas: , ,
. · Agregar un elemento a una lista agrega una tarjeta o una fila en la página. Quitarlo la quita. El HTML no se toca. OJO: es un archivo de JavaScript aunque termine en .txt. Si se rompe una coma o una comilla, la página carga sin contenido. Ante la duda, abrir la consola del navegador (F12): el error dice la línea exacta. Los textos originales salen del mockup: MOCKUP/Sistema_Escolar_de_Queretaro_Web_Mockup.pdf ══════════════════════════════════════════════════════════════════════════ */ var secciones = [ /* ┌──────────────────────────────────────────────────────────────────────── │ 1. PORTADA │ │ titulo_html admite
para elegir dónde parte cada renglón. En el │ mockup son cuatro renglones en escritorio; en teléfono el navegador │ vuelve a partirlo solo. │ │ OJO: hay que dejar un ESPACIO antes de cada
. El salto ya separa las │ palabras mientras se ve, pero en teléfono el
se oculta, y sin ese │ espacio las palabras quedan pegadas: "Estrategiaeducativa.". │ │ Las tarjetas: agregar una a la lista agrega una tarjeta flotante. La │ inclinación la pone el CSS por posición (-2°, 2.5°, -1°), así que de la │ cuarta en adelante se repite el ciclo. │ barra_estilo es cuánto avanza la barrita del pie de cada tarjeta. └──────────────────────────────────────────────────────────────────────── */ { "referencia": "hero", "etiqueta": "PORTADA", "eyebrow": "Soluciones para instituciones educativas", "titulo_html": "Estrategia
educativa.
Tecnología con
propósito.", "texto": "Acompañamos a instituciones educativas en proyectos de innovación, integración tecnológica, desarrollo profesional y fortalecimiento de sus procesos académicos.", "cta_1": {"texto": "Conoce nuestros servicios", "url": "#servicios"}, "cta_2": {"texto": "Hablemos de tu proyecto", "url": "#contacto"}, "tarjetas": [ { "etiqueta": "01 / Estrategia", "titulo": "Innovación educativa", "texto": "Modelos, metodologías y experiencias de aprendizaje.", "barra_estilo": "--avance: 62%" }, { "etiqueta": "02 / Integración", "titulo": "Tecnología", "texto": "Herramientas digitales alineadas con objetivos pedagógicos.", "barra_estilo": "--avance: 48%" }, { "etiqueta": "03 / Personas", "titulo": "Desarrollo profesional", "texto": "Capacitación y acompañamiento para equipos educativos.", "barra_estilo": "--avance: 56%" } ] }, /* ┌──────────────────────────────────────────────────────────────────────── │ 2. QUÉ HACEMOS — las cuatro tarjetas └──────────────────────────────────────────────────────────────────────── */ { "referencia": "servicios", "etiqueta": "QUÉ HACEMOS", "eyebrow": "Qué hacemos", "titulo_html": "Transformamos necesidades educativas en proyectos concretos.", "texto": "Trabajamos de forma colaborativa con instituciones que buscan fortalecer su propuesta educativa, profesionalizar sus equipos e integrar tecnología de manera estratégica.", "items": [ { "numero": "01", "titulo": "Innovación educativa", "texto": "Diseño e implementación de estrategias académicas, metodologías activas y experiencias de aprendizaje contemporáneas." }, { "numero": "02", "titulo": "Integración tecnológica", "texto": "Planeación e incorporación de ecosistemas digitales que respondan a necesidades pedagógicas y operativas reales." }, { "numero": "03", "titulo": "Desarrollo profesional", "texto": "Capacitación, actualización y acompañamiento para docentes, líderes y equipos académicos." }, { "numero": "04", "titulo": "Transformación institucional", "texto": "Proyectos para fortalecer procesos, cultura, experiencia educativa y capacidad de innovación." } ] }, /* ┌──────────────────────────────────────────────────────────────────────── │ 3. NUESTRA VISIÓN — bloque partido: mitad clara, mitad oscura │ En cita_html, el es el resalte en azul claro dentro de la frase. └──────────────────────────────────────────────────────────────────────── */ { "referencia": "vision", "etiqueta": "NUESTRA VISIÓN", "eyebrow": "Nuestra visión", "titulo_html": "Menos tecnología por moda.
Más tecnología con sentido.", "texto": "La herramienta no es el objetivo. Diseñamos estrategias en las que la tecnología amplifica el aprendizaje y mejora la experiencia de las comunidades educativas.", "cita_html": "“La innovación educativa genera valor cuando existe una estrategia clara, capacidades instaladas y un propósito pedagógico definido.”", "firma": "Sistema Escolar de Querétaro" }, /* ┌──────────────────────────────────────────────────────────────────────── │ 4. CÓMO TRABAJAMOS — las tres filas └──────────────────────────────────────────────────────────────────────── */ { "referencia": "proceso", "etiqueta": "CÓMO TRABAJAMOS", "eyebrow": "Cómo trabajamos", "titulo_html": "Una asesoría diseñada alrededor de cada institución.", "texto": "No proponemos soluciones genéricas. Partimos del contexto, las prioridades y los recursos disponibles para definir una ruta viable, medible y sostenible.", "items": [ { "numero": "01", "titulo": "Diagnosticar", "texto": "Entendemos objetivos, contexto, procesos y oportunidades de mejora." }, { "numero": "02", "titulo": "Diseñar", "texto": "Construimos una estrategia y un plan de implementación alineados a las necesidades institucionales." }, { "numero": "03", "titulo": "Acompañar", "texto": "Apoyamos a los equipos durante la implementación, capacitación y consolidación del proyecto." } ] }, /* ┌──────────────────────────────────────────────────────────────────────── │ 5. CONVERSEMOS — el bloque oscuro del final, y el WHATSAPP │ │ AQUÍ VIVEN LOS DOS CONTACTOS DEL SITIO. Son los mismos que aparecen en │ el pie: se escriben una vez y salen en los dos lados. │ │ ▸ WHATSAPP — "whatsapp" → "numero" │ Con lada de país. Se puede escribir con espacios o con "+"; el código │ deja solo los dígitos: │ +52 55 4682 0818 → 525546820818 │ Si falta el 52, WhatsApp abre y no encuentra a nadie: la página avisa │ en la consola (F12) cuando el número parece venir corto. │ "mensaje" es lo que aparece ya escrito en la conversación; puede ir │ vacío ("") para abrir el chat en blanco. │ │ ▸ CORREO — "correo" │ Se escribe una vez, sin el "mailto:": el código lo agrega solo. │ │ El botón blanco abre WhatsApp y el de contorno abre el correo. Si algún │ día se quiere otra cosa en el botón blanco —un teléfono, por ejemplo— │ se vacía "numero" y se pone en "cta.url": "tel:+525546820818" └──────────────────────────────────────────────────────────────────────── */ { "referencia": "contacto", "etiqueta": "CONVERSEMOS", "eyebrow": "Conversemos", "titulo_html": "¿Tu institución está desarrollando un proyecto de innovación educativa?", "texto": "Podemos acompañarte en la definición de una estrategia clara, práctica y alineada con tus objetivos.", "cta": { "texto": "Escríbenos por WhatsApp", "url": "#contacto" }, "cta_correo": { "texto": "Enviar un correo" }, "whatsapp": { "numero": "+52 55 4682 0818", "mensaje": "Hola, me gustaría recibir información sobre sus servicios de asesoría e innovación educativa.", "aria": "Escribir por WhatsApp", "flotante_aria": "Escribir por WhatsApp" }, "correo": "contacto@sistemaescolarqueretaro.mx", "correo_aria": "Escribir un correo a Sistema Escolar de Querétaro" }, /* ┌──────────────────────────────────────────────────────────────────────── │ 6. MENÚ │ Son anclas dentro de la misma página. Cada href tiene que coincidir con │ el id de una sección de index.html: │ #inicio #servicios #enfoque #nosotros #contacto │ Agregar un enlace aquí lo agrega al menú. Si apunta a un id que no │ existe, el clic no hace nada. └──────────────────────────────────────────────────────────────────────── */ { "referencia": "nav", "etiqueta": "MENÚ", "aria_abrir": "Abrir menú de navegación", "aria_cerrar": "Cerrar menú de navegación", "links": [ {"etiqueta": "Servicios", "href": "#servicios"}, {"etiqueta": "Enfoque", "href": "#enfoque"}, {"etiqueta": "Nosotros", "href": "#nosotros"} ], "cta": { "texto": "Contacto", "url": "#contacto" } }, /* ┌──────────────────────────────────────────────────────────────────────── │ 7. MARCA │ Es texto, no una imagen: la lee Google y un lector de pantalla, escala │ con la tipografía y no pesa nada. El monograma es el recuadro con las │ letras; el CSS le pone la caja y el redondeo. │ │ El favicon y la imagen que se ve al compartir el enlace SÍ son │ imágenes, y viven en MARCA/. Se rehacen con: python _generar_marca.py └──────────────────────────────────────────────────────────────────────── */ { "referencia": "marca", "etiqueta": "MARCA", "monograma": "SEQ", "nombre": "Sistema Escolar de Querétaro", "lema": "Asesoría e innovación educativa", "url": "#inicio" }, /* ┌──────────────────────────────────────────────────────────────────────── │ 8. PIE DE PÁGINA └──────────────────────────────────────────────────────────────────────── */ { "referencia": "pie", "etiqueta": "PIE", "razon_social": "Sistema Escolar de Querétaro, S.A. de C.V.", "linea": "Querétaro, México · Asesoría e innovación educativa", "contacto_titulo": "Contacto", /* El teléfono y el correo del pie NO se escriben aquí: salen de la sección 5 para que haya un solo sitio donde cambiarlos. Aquí solo va cómo se muestra el número. */ "telefono_texto": "55 4682 0818", "legal": "Sitio institucional de servicios profesionales. Las marcas y denominaciones de terceros pertenecen a sus respectivos titulares y no implican afiliación o representación salvo indicación expresa." }, /* ┌──────────────────────────────────────────────────────────────────────── │ 9. COLORES — medidos sobre el mockup, no aproximados │ │ Cambiar un valor aquí lo cambia en toda la página, sin tocar el CSS. │ │ DOS CUIDADOS: │ 1. --tinta-rgb es el MISMO color de --tinta escrito como "r, g, b". │ Lo usan las sombras y las transparencias. Si se cambia uno hay que │ cambiar el otro: CSS no sabe convertir un #hex a "r, g, b". │ 2. --tinta-fuerte está horneado en el favicon y en la imagen de vista │ previa. Si cambia, hay que correr: python _generar_marca.py └──────────────────────────────────────────────────────────────────────── */ { "referencia": "colores", "etiqueta": "COLORES", "tokens": [ {"nombre": "--tinta", "valor": "#122033", "uso": "Azul de los títulos"}, {"nombre": "--tinta-fuerte", "valor": "#0F1C2C", "uso": "Bloque oscuro de «Conversemos»"}, {"nombre": "--tinta-rgb", "valor": "18, 32, 51", "uso": "El mismo azul para sombras y transparencias"}, {"nombre": "--marino", "valor": "#142236", "uso": "Mitad oscura del bloque de visión"}, {"nombre": "--hero-1", "valor": "#0B1524", "uso": "Portada: esquina superior izquierda"}, {"nombre": "--hero-2", "valor": "#111F30", "uso": "Portada: centro del degradado"}, {"nombre": "--hero-3", "valor": "#16283C", "uso": "Portada: esquina inferior derecha"}, {"nombre": "--texto", "valor": "#738194", "uso": "Párrafos"}, {"nombre": "--texto-sec", "valor": "#778496", "uso": "Texto de las tarjetas y las filas"}, {"nombre": "--texto-suave", "valor": "#8190A0", "uso": "Pie de página y letra chica"}, {"nombre": "--etiqueta", "valor": "#66768A", "uso": "Antetítulos sobre fondo claro"}, {"nombre": "--etiqueta-clara", "valor": "#92A7BD", "uso": "Antetítulos sobre fondo oscuro"}, {"nombre": "--azul-claro", "valor": "#9FB5CB", "uso": "Resalte dentro de la cita"}, {"nombre": "--azul-suave", "valor": "#B8C7D8", "uso": "Antetítulo de la portada"}, {"nombre": "--blanco", "valor": "#FFFFFF", "uso": "Fondo de la página"}, {"nombre": "--panel", "valor": "#F7F8FA", "uso": "Relleno de las tarjetas de servicios"}, {"nombre": "--panel-borde", "valor": "#EDF0F3", "uso": "Borde de esas tarjetas"}, {"nombre": "--panel-vision", "valor": "#E9EEF3", "uso": "Mitad clara del bloque de visión"}, {"nombre": "--tarjeta", "valor": "#F6F9FC", "uso": "Tarjetas flotantes de la portada"}, {"nombre": "--linea", "valor": "#E4E8EC", "uso": "Filetes entre las filas del proceso"} ] }, /* ┌──────────────────────────────────────────────────────────────────────── │ 10. TIPOGRAFÍA │ │ El mockup está compuesto ENTERO en Inter: Regular, Semi-Bold y Bold. │ No hay una segunda familia. │ │ PARA CAMBIAR DE FUENTE hay que tocar las DOS cosas de aquí abajo: │ │ · "google_fonts" — la dirección de donde se descarga. Se saca de │ fonts.google.com: se elige la familia, se marcan los pesos 400, 600 │ y 700, y se copia el enlace que aparece en "Embed". │ Si se deja vacío (""), no se descarga ninguna fuente y el navegador │ usa la de respaldo del sistema. │ │ · "familia" — el nombre de la fuente entre comillas, y detrás las de │ respaldo por si la primera no carga. Las comillas de dentro van │ escapadas con barra: \"Inter\". │ │ Si se cambia una sin la otra, la página se ve con la fuente del sistema. └──────────────────────────────────────────────────────────────────────── */ { "referencia": "tipografia", "etiqueta": "TIPOGRAFÍA", "google_fonts": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap", "fuentes": [ { "variable": "--font", "familia": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif", "uso": "Todo el sitio: títulos, texto, menú y botones" } ] }, /* ┌──────────────────────────────────────────────────────────────────────── │ 11. SEO — lo que ve Google y lo que se ve al compartir el enlace │ · titulo: 50-60 caracteres. Aparece en la pestaña y en el resultado. │ · descripcion: 140-155 caracteres. Es el texto gris del resultado. │ │ OJO CON EL DOMINIO: el mockup no lo traía. Está deducido del correo de │ contacto (contacto@sistemaescolarqueretaro.mx → el dominio es │ sistemaescolarqueretaro.mx). FALTA CONFIRMAR que el sitio vaya a vivir │ ahí; si es otro, hay que cambiarlo AQUÍ (en las cuatro direcciones), en │ robots.txt y en sitemap.xml. └──────────────────────────────────────────────────────────────────────── */ { "referencia": "meta", "etiqueta": "SEO", "sitio": "Sistema Escolar de Querétaro", "titulo": "Sistema Escolar de Querétaro | Asesoría e innovación educativa", "descripcion": "Acompañamos a instituciones educativas en proyectos de innovación, integración tecnológica, desarrollo profesional y fortalecimiento académico.", "canonica": "https://sistemaescolarqueretaro.mx/", "robots": "index, follow", "og_titulo": "Sistema Escolar de Querétaro | Asesoría e innovación educativa", "og_descripcion": "Estrategia educativa. Tecnología con propósito. Asesoría para instituciones educativas en Querétaro.", "og_imagen": "https://sistemaescolarqueretaro.mx/MARCA/og-image.jpg", "og_tipo": "website", /* Datos estructurados: es lo que permite que Google entienda a qué se dedica la empresa y muestre la ficha lateral al buscarla. */ "datos_estructurados": { "@context": "https://schema.org", "@type": "ProfessionalService", "name": "Sistema Escolar de Querétaro", "alternateName": "SEQ", "description": "Asesoría e innovación educativa: acompañamiento a instituciones educativas en innovación, integración tecnológica, desarrollo profesional y transformación institucional.", "url": "https://sistemaescolarqueretaro.mx/", "email": "contacto@sistemaescolarqueretaro.mx", "telephone": "+52-55-4682-0818", "areaServed": "Querétaro, México", "address": { "@type": "PostalAddress", "addressLocality": "Querétaro", "addressRegion": "Querétaro", "addressCountry": "MX" }, "knowsAbout": [ "Innovación educativa", "Integración tecnológica", "Desarrollo profesional docente", "Transformación institucional" ] } } ];