Crea un sitio en turco e inglés para mi
[hotel / proyecto residencial] en mi servidor de hosting
[nombre del servidor]. Datos:
1. Nombre:
[nombre del negocio o proyecto], ubicación:
[ubicación], tipo:
[hotel boutique / proyecto residencial]
2. Si es un hotel, los tipos de habitación (tamaño, cama, huéspedes, vistas, servicios), horarios de check-in y check-out, temporada y normas de la casa:
[datos de las habitaciones]
3. Si es un proyecto, los tipos de unidad (habitaciones, metros cuadrados, planta, fecha de entrega) y los datos de la oficina de ventas:
[datos de las unidades]
4. Teléfono:
[teléfono], WhatsApp:
[WhatsApp], correo:
[correo], dirección:
[dirección]
5. Dominio:
[dominio], fotos reales:
[dónde están las fotos, o "usa fotos de stock"]
6. Quién revisará el texto en inglés:
[persona, o "nadie"]
Primero confirma el servidor con list_servers y ejecuta scaffold_site con style="universal", primero con confirm=false y con confirm=true después de mi aprobación. Lee site_design_guide y site_seo_guide. Escribe en _kaynak/ART.md una decisión de diseño lujosa y cálida y muéstramela: una tipografía display serif fina de Fontshare (por ejemplo Boska 300) con una tipografía de cuerpo sencilla (por ejemplo Synonym), tonos café oscuro y lino, un único acento cobre, etiquetas pequeñas con mucho espaciado entre letras y fotografía a pantalla completa. El elemento distintivo es la primera imagen a pantalla completa de la página de inicio y su parallax suave. No superpongas un encabezado transparente sobre la foto; en las páginas claras el texto claro del menú desaparece (en la demo esto bajó la accesibilidad a 95 en las páginas de habitaciones y contacto). Dale a la barra un fondo oscuro.
Estructura de idiomas:
1. Las páginas en turco van en la raíz y sus gemelas en inglés bajo /en/. Cada página en turco tiene su gemela en inglés y las dos se enlazan entre sí. Guarda los pares de páginas en una sola lista en assets/site.config.js y construye el menú, el pie y el selector de idioma a partir de ella; el selector siempre lleva a la página equivalente, nunca a la de inicio.
2. El <head> de cada página lleva hreflang="tr", hreflang="en" y hreflang="x-default" apuntando a la página en turco, todos como URL absolutas; escribe los mismos pares en sitemap.xml como entradas xhtml:link.
3. Las páginas en inglés usan <html lang="en">, title, description y breadcrumb en inglés, y WebPage con inLanguage "en". seo-stamp.mjs estampa og:locale tr_TR en todas las páginas; en build.mjs, después de estampar, cámbialo a en_GB en las páginas en inglés y añade og:locale:alternate en ambos idiomas.
4. Escribe el inglés como lo haría un redactor nativo, no como una traducción, y conserva los nombres de lugares con su ortografía turca.
Páginas y schema (cada una en ambos idiomas):
1. Inicio: primera imagen a pantalla completa, qué es el lugar en un párrafo, datos breves (número de habitaciones, check-in, check-out, temporada), tarjetas de habitaciones y un enlace a la guía local. Schema: WebPage y, en el nodo del negocio, el tipo Hotel con checkinTime, checkoutTime, numberOfRooms, amenityFeature y las habitaciones dentro de containsPlace. Para un proyecto residencial usa Residence o ApartmentComplex en su lugar.
2. Una página de habitaciones y una página por cada tipo de habitación: tamaño, cama, número de huéspedes, servicios, a quién le conviene y un enlace al otro tipo de habitación. Schema: HotelRoom (bed, occupancy, floorSize, amenityFeature, containedInPlace #business). Para un proyecto residencial, un RealEstateListing por tipo de unidad con un Apartment dentro (numberOfRooms, floorSize). Si no te di precios, no escribas offers, y di en el texto "envíanos tus fechas y te diremos la tarifa para ellas".
3. Guía local: conocimiento local con fecha de última actualización. Schema: WebPage.
4. Contacto y reservas: teléfono, formulario de WhatsApp, correo, dirección, "Cómo llegar", notas de viaje y condiciones de reserva. Schema: ContactPage.
5. Una página 404 (breve, en ambos idiomas).
No afirmes una categoría de estrellas, premios, puntuaciones de huéspedes ni "el mejor"; no añadas starRating ni aggregateRating.
Para abrir rápido las fotos grandes: entrega la primera imagen con <picture>; en pantallas de hasta 767 píxeles usa un recorte vertical de 600 y 900 píxeles de ancho (recortado en la dirección de origen y descargado con site_fetch), y en pantallas más anchas la versión horizontal de 1200, 1600 y 2000 píxeles. Sin el recorte vertical, la imagen horizontal se amplía para llenar la pantalla del móvil, de modo que se ve borrosa o descarga un archivo innecesariamente pesado.
Nada de invenciones: no escribas reseñas, puntuaciones, premios, certificados, cifras de clientes ni afirmaciones como "el mejor" que no sean reales. No añadas al schema ni al texto horarios, coordenadas, precios o un correo que no te haya dado; deja el campo fuera y anótalo como pendiente en el informe. No uses rayas largas ni eslóganes manidos, y haz que el primer párrafo de cada página responda directamente a la pregunta de esa página.
Trabajo SEO común: cada página lleva un title único de 48 a 60 caracteres, una description de 145 a 158 caracteres, un único H1 y un canonical que termina en barra. Añade a cada página su propio nodo WebPage y BreadcrumbList, enlazados al grafo base por @id. En robots.txt escribe Allow: / para Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended y CCBot, explica la decisión en un comentario y anota qué cambiar si quiero bloquear a los rastreadores de entrenamiento. sitemap.xml lleva fechas lastmod reales. llms.txt describe el negocio con exactitud en dos frases y lista el NAP y las páginas importantes con enlaces.
Configuración técnica (la ruta por defecto del toolkit no se usa en este sitio, por estas razones):
1. Compila Tailwind y elimina el CDN. El kit carga Tailwind mediante el Play CDN, que compila en el navegador, imprime una advertencia en la consola y reduce el rendimiento en móvil. Escribe _kaynak/package.json con site_write_file, instala con site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) y espera con site_command_status. En _kaynak/tailwind.config.js establece content en "./*.html", "./**/*.html", "!./_kaynak/**" y "./_kaynak/chrome.mjs". Mueve las reglas @font-face, las líneas @tailwind y el anillo de foco, el skip link y la protección contra desbordamiento del app.css del kit a _kaynak/site.css. Genera la salida en assets/app.css, porque design-check.mjs busca las fuentes en ese archivo, y añade ?v=<hash del contenido> al enlace en cada página para que la caché del edge nunca sirva el archivo antiguo.
2. Aloja las fuentes en tu propio servidor. Lee con site_read_url la URL del CSS de las familias de Fontshare que elegiste (api.fontshare.com/v2/css?f[]=...), descarga sus archivos woff2 con site_fetch en assets/fonts/ y decláralos con @font-face y font-display: swap. Precarga cada peso usado por encima del pliegue con <link rel="preload" as="font" type="font/woff2" crossorigin>, tres archivos como máximo. Si te lo saltas, el cambio de fuente desplaza el diseño; en la demo el CLS de escritorio era 0,078 por esa razón y bajó a 0 con la precarga.
3. Haz que el menú y el pie sean HTML estático. Los componentes <site-nav> y <site-footer> del kit funcionan con JavaScript, y la mayoría de los rastreadores de IA nunca ven el menú, la dirección ni el teléfono. Elimina los scripts chrome.js y motion.js de todas las páginas. En _kaynak/chrome.mjs escribe dos funciones que construyan el HTML del encabezado y del pie a partir de assets/site.config.js; construye el menú móvil sin JavaScript con <details> y <summary>, y marca la página actual con aria-current="page". Escribe build.mjs en la raíz del sitio, que, en orden, ejecute node seo-stamp.mjs, vuelva a estampar todo lo que hay entre <!-- chrome:header:start --> y <!-- chrome:header:end --> (y lo mismo para el pie) en cada página, compile Tailwind y actualice el hash en el enlace del CSS. Tras cada cambio, ejecuta solo site_run_command("node build.mjs").
4. Parallax sin JavaScript. Dale a la primera imagen data-parallax y muévela despacio con una animación CSS guiada por el scroll (animation-timeline: scroll(root)) usando solo transform; da a las secciones una entrada data-reveal que también use solo transform, nunca opacity. Envuelve las reglas en @media (prefers-reduced-motion: no-preference) y @supports (animation-timeline: scroll()); con movimiento reducido, o en un navegador sin soporte, la imagen se queda quieta. No cargues GSAP, Lenis ni Swiper.
5. Reduce las imágenes. Descarga cada foto con site_fetch en archivos separados usando resize="480x", "800x", "1200x", "1600x", image_format="webp" y una calidad entre 60 y 68. Da a cada <img> srcset, sizes, y width y height que coincidan con la proporción real; si recortas, añade una clase de proporción como aspect-
[4/3] con object-cover, de lo contrario el diseño se desplaza al cargar la imagen. La imagen de la primera pantalla lleva fetchpriority="high" y no es lazy; todas las demás llevan loading="lazy". Descarga la imagen para compartir como JPG de 1200x630 con site_fetch.
6. Pequeños detalles que cuestan puntos: añade un favicon SVG con <link rel="icon"> (de lo contrario el navegador solicita /favicon.ico, el 404 aparece como error en la consola y baja Best Practices). Escribe DOCTYPE en mayúsculas, no uses atributos style y no dejes espacios al final de las líneas. Usa en lugar de espacios en el texto visible de los enlaces de teléfono (la regla tel-non-breaking de html-validate). Los enlaces del menú, el pie, el breadcrumb y los encabezados deben medir al menos 44 píxeles de alto y de ancho. No incrustes un iframe de Google Maps; el sitio no debe hacer solicitudes externas, así que muestra la dirección y un enlace "Cómo llegar".
7. Ninguna solicitud puede salir del sitio: fuentes, scripts, estilos e imágenes viven todos en tu propio servidor. No hay gestor de formularios, así que el formulario de contacto es un formulario method="get" que apunta a https://wa.me/
[número de WhatsApp] con un textarea prellenado llamado "text"; no hace falta JavaScript.
Controles (en este orden; no lo des por terminado hasta que todos pasen):
1. Ejecuta node build.mjs con site_run_command y después node seo-check.mjs: 0 errores, 0 advertencias. Una advertencia de contenido duplicado significa que dos páginas no son lo bastante distintas; reescríbelas.
2. node design-check.mjs: 0 errores. Si elegiste un estilo sin movimiento, informa de la advertencia de "sin movimiento" como una decisión deliberada y con su motivo.
3. _kaynak/node_modules/.bin/html-validate en cada archivo HTML: 0 errores. Pon una línea _kaynak/ en un archivo .htmlvalidateignore en la raíz del sitio para que no se analicen las dependencias.
4. Comprobación de idiomas: muestra en una tabla que la gemela hreflang de cada página existe, devuelve 200 y apunta de vuelta; seo-check no debe dar ninguna advertencia de hreflang.
5. Revisa cada página con site_preview en view="mobile", view="desktop", y también a 360 y 768 de ancho. Corrige el scroll horizontal, los encabezados que se desbordan, los botones apretados o el texto ilegible y vuelve a mirar.
6. Mide cada página con core_web_vitals en strategy="mobile" y strategy="desktop", y obtén las puntuaciones de accesibilidad, mejores prácticas y SEO con seo_audit. El objetivo en móvil es 100 en accesibilidad, mejores prácticas y SEO y al menos 95 en rendimiento; en escritorio, al menos 95 en las cuatro. En una página que no llegue, ejecuta core_web_vitals con resources=true, encuentra el elemento LCP y cualquier imagen sobredimensionada, corrígelo y repite seo_audit con runs=2, porque una sola ejecución de laboratorio puede fluctuar.
7. Las solicitudes de red no deben contener ninguna dirección fuera del dominio propio del sitio.
