Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[kurum adı] için
[yıl] etki raporunu kaydırdıkça anlatan bir site olarak kur. Kurum:
[ne yapıyor, nerede, kuruluş yılı]. Raporun ana mesajı:
[tek cümle]. Öne çıkan dört rakam:
[rakam, birim, bir cümle açıklama]. Grafik verileri:
[her grafik için başlık, dönemler ve değerler]. Bütçe:
[gelir kaynakları ve gider kalemleri, tutarlar ve paylar]. Bölümler:
[bölüm adları ve her birinin metni ya da notları]. Gelecek yıl planı:
[maddeler]. Rakamların kaynağı ve sınırlılıkları:
[hangi kayıt, eksik veri nasıl ele alındı]. Hazırlayan ve yayın tarihi:
[editör adı, tarih]. İletişim:
[e-posta],
[telefon],
[adres]. Alan adı:
[alan adı]. Fotoğraflar:
[bağlantılar; çocuk ya da yararlanıcı yüzü görünmesin].
Sayfalar: rapor (/: kapak başlığı, cevap önce özet paragrafı, hazırlayan ve tarih, kapak görseli, yapışkan bölüm gezintisi ve sırasıyla yıl özeti, bölümler, bütçe, gelecek yıl planı, rapor hakkında sorular), yöntem notu (/yontem/: her rakamın kaynağı ve sınırlılıkları), kurum ve iletişim (/dernek/ ya da kurumunuza uygun bir ad), gizlilik ve KVKK (/gizlilik/) ve 404.html. Grafikleri Chart.js ya da D3 ile değil, verdiğim değerlerden üretilen statik SVG olarak yaz; değerleri yuvarlama ve toplamların tuttuğunu kontrol et. Bütçeyi grafik değil, en küçük genişlik verilmemiş bir `<table>` olarak göster.
Tarz: gazete veri haberi gibi uzun okuma. Kağıt tonunda zemin, Fontshare'den bir serif başlık (ör. Bespoke Serif) ve tabular-nums destekleyen okunaklı bir gövde (ör. Epilogue), en fazla iki grafik rengi. Masaüstünde solda 220 piksellik yapışkan bölüm listesi, telefonda üstte yapışan yatay kaydırılabilir bölüm şeridi ve altında ince bir okuma ilerleme çizgisi.
Hareket kuralları (en zor kısım, harfiyen uygula):
1. Kütüphaneler: yalnız GSAP 3.13 çekirdeği ve ScrollTrigger, yalnız rapor sayfasında. Lenis YÜKLENMEZ, çünkü uzun okumada yerel kaydırma daha rahattır; SplitText ve grafik kütüphanesi de yüklenmez. Yöntem, kurum ve gizlilik sayfalarında hiç betik olmasın.
2. Çizgi grafikler: her çizgi `<path pathLength="1">` olsun ve HTML'de tam çizili dursun. JS yalnız yüklendiğinde ekranın altında kalan grafiklerde strokeDasharray 1 ve strokeDashoffset 1 verip ScrollTrigger scrub ile 0'a getirsin (start "top 75%", end "bottom 65%"); veri noktaları çizgi geçtikçe büyüyerek belirsin. SVG yazılarını 600 birimlik viewBox'ta en az 22 birim yap ki telefonda 12 pikselin altına düşmesin ve son eksen etiketi kesilmesin diye sağda en az 40 birim boşluk bırak.
3. Her grafik `<svg role="img" aria-labelledby>` ile title ve tüm değerleri cümleyle anlatan desc taşısın; figcaption kaynağı ve yöntem notunu göstersin ve figürün HEMEN ARDINDAN "Verileri tablo olarak görün" diye açılan bir `<details>` içinde gerçek `<table>` dursun. Bu tablo hem erişilebilirlik hem yapay zeka aramaları için verinin metin halidir.
4. Sayaçlar: son değer HTML'de Türkçe biçimiyle yazılı olsun (31.540 gibi). Görsel sayı aria-hidden bir span'de, ekran okuyucu için aynı değer sr-only bir span'de dursun. JS yalnız yüklendiğinde ekranın altında kalan sayaçları 0'a çekip ekrana girince Intl.NumberFormat("tr-TR") ile son değere saydırsın; ekranda görünen bir sayıyı asla geri sarma. Sayı genişliği değişip satırı oynatmasın diye tabular-nums ve son değerin karakter sayısı kadar en küçük genişlik ver (Tailwind sınıfıyla, style niteliğiyle değil).
5. Bölüm gezintisi: bağlantılar JS'siz de çalışan çapalar olsun. JS her bölüm için ScrollTrigger ile etkin bölümü bulup bağlantıya aria-current="true" versin ve telefondaki şeridi etkin bağlantı görünecek kadar yatay kaydırsın (sayfayı değil, şeridi). Yapışkanlığı iç nav'a değil, raporun tamamını kapsayan ızgaranın doğrudan çocuğu olan kenar çubuğuna (aside) ver; demoda iç nav'a verilen sticky telefonda hiç yapışmadı.
6. Okuma ilerleme çizgisi ve data-reveal ile beliren görseller dışında hareket olmasın.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı düşürdü ya da bir şeyi bozdu, atlama):
1. Sunucuda yayında bir site varsa önce bana söyle, çünkü kurulum index.html ve assets klasörünü ezer. scaffold_site'ı önce confirm=false ile önizle, onayımla confirm=true çağır. Sonra site_design_guide ve site_seo_guide'ı oku. Koda başlamadan tasarım yönünü (tipografi, renk, ızgara, imza öğesi, hareket dili ve YÜKLENMEYECEK kütüphaneler) assets dışında kısa bir ART.md dosyasına yaz ve bana göster.
2. Tailwind'i derle, CDN'den yükleme. site_run_command ile background=true vererek `npm i -D tailwindcss@3` kur ve sonucu site_command_status ile izle. `tailwind.config.js` içindeki content yolları bütün HTML dosyalarını, şablonları ve sınıf yazan JS dosyalarını kapsasın. `_src/tw.css` dosyası `@import "../assets/app.css";` satırı ve üç `@tailwind` satırından oluşsun; `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify` ile tek dosyaya derle. Sayfalardan cdn.tailwindcss.com betiğini ve satır içi tailwind.config'i kaldır, yalnız `/assets/site.css` bağla. Her HTML değişikliğinden sonra yeniden derle.
3. Fontları kendi sunucunda barındır. Seçtiğin Fontshare ailesinin Türkçe harfleri (ş, ğ, ı, İ, ç, ö, ü) içerdiğini önce kontrol et: demoda Tanker ailesinde noktasız ı, Outfit ailesinde ş, ğ ve İ yoktu, bu harfler başlıkta yedek fonta düşerdi. Her ağırlığın woff2 dosyasını site_fetch ile `assets/fonts/` altına ayrı ayrı indir, @font-face kurallarını `font-display: swap` ile `assets/app.css` içine yaz (design-check özgün fontu orada arar) ve indirdiğin CSS'teki font-family adını kontrol et. İlk ekrandaki başlığın ve gövdenin fontunu her sayfada `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile stil dosyasından önce yükle; ikiden fazla dosyayı preload etme, demoda üçüncü ağırlığı da preload etmek mobil LCP'yi 0,2 saniye uzattı. Fontshare fontlarının çoğunda ₺ işareti yok, fiyat yazacaksan "TL" kullan.
4. Menüyü ve alt bilgiyi statik HTML yap. chrome.js ve site.config.js'i sayfalara yükleme. site.config.js'teki nav listesini okuyup `_src/header.tpl` ve `_src/footer.tpl` şablonlarını her sayfadaki `<!-- nav:start --><!-- nav:end -->` ve `<!-- footer:start --><!-- footer:end -->` işaretlerinin arasına basan küçük bir `chrome-stamp.mjs` yaz; etkin sayfanın bağlantısına aria-current="page" eklesin. Şablonların uzantısı .html olmasın ve içlerinde `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide kurum adı, adres ve telefon düz metin olsun; alt bilgi ve kırıntı bağlantıları dahil her dokunma hedefi en az 44x44 piksel olsun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı fotoğrafı resize="480x", "800x" ve "1200x", image_format="webp", quality=65 ile ayrı dosyalara yaz. site_fetch kırpmaz; Unsplash fotoğrafında farklı oran gerekiyorsa adresin sonuna `?w=1600&h=1200&fit=crop` gibi parametre ekleyerek kırpılmış hali indir. Her `<img>` için srcset, sizes ve gerçek orana uyan width ve height ver. İlk ekrandaki ana görsel fetchpriority="high" olsun ve lazy olmasın; diğerleri loading="lazy" decoding="async" olsun. Mobilde ana görsel ekranı dolduruyorsa `<picture>` ile mobile daha küçük bir kırpım ver.
6. Logonun SVG halini site_write_file ile favicon.svg olarak yaz ve her sayfaya `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` ekle. Favicon yoksa tarayıcı konsola 404 yazar ve En İyi Uygulamalar puanı 96'ya düşer.
7. HTML doğrulayıcısının kuralları: belge büyük harfli `<!DOCTYPE html>` ile başlasın, tel: bağlantılarının görünen metnindeki boşluklar ` ` olsun, style="" niteliği kullanma, her düğmeye type="button" yaz, `<details>` bir `<figure>` içinde figcaption'dan sonra gelmesin.
8. Hareket kütüphanelerini (GSAP, ScrollTrigger) jsdelivr'den site_fetch ile `assets/vendor/` altına indir, sürümü sabitle ve yalnız rapor sayfasında yükle. `<script defer>` kullanma; sayfanın sonuna küçük bir yükleyici koy: load olayından sonra iki requestAnimationFrame ve ardından requestIdleCallback beklesin, betikleri sırayla async=false ile eklesin. `<head>` içindeki tek satırlık bir betik `<html>`'e `js` sınıfını, prefers-reduced-motion "reduce" değilse `anim` sınıfını eklesin; yükleyici `anim` yoksa hiçbir şey indirmesin. Gizli başlangıç durumlarını yalnız `.anim` altında tanımla ve kütüphane gelmezse diye gizlenen her öğeyi 2,5 saniye sonra görünür yapan bir CSS animasyonu güvenlik ağı olarak ekle. Önceki demolarda defer ile yüklenen kütüphaneler mobil LCP'yi 3,2 saniyeye itti; bu yükleyiciyle 99 ile 100 arası ölçüldü. Kaydırınca beliren öğelerin niteliği data-reveal olsun; design-check hareketi bu adla tanır.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/yontem/, /dernek/, /gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Sayfaya özel şemayı (rapor sayfası WebPage, mainEntity olarak headline, datePublished, dateModified, image, author (Person, editör) ve publisher içeren Report ve FAQPage; yöntem notu Article; kurum sayfası AboutPage ve kurum türüne uygun alt tür (ör. NGO); iç sayfalarda BreadcrumbList. Ziyaret edilen bir ofisi yoksa site.config.js'te localBusiness:false) ayrı `<script type="application/ld+json">` bloklarına yaz ve @id ile temel grafiğe bağla. BreadcrumbList'i @graph içine gömme, kendi bloğunda dursun; seo-check onu yalnız böyle görür.
2. Title en fazla 60 karakter olsun (seo-check 65'i aşanı hata sayar), description 120 ile 158 karakter, her sayfada tek h1 ve başlık sırası atlamasın (h1'den sonra h3 gelince erişilebilirlik 98'e düştü). Her sayfanın ana içeriği en az 150 kelime olsun; iletişim ve gizlilik sayfaları bu sınırın altında kalmaya yatkın.
3. Her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin. Sayfaya özgü SSS'yi `<details>` ile yaz ve FAQPage olarak işaretle. Yayımlayan kurumu ve "Son güncelleme" tarihini `<time>` ile göster.
4. robots.txt'te GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot ve CCBot için kararını gerekçesiyle yaz ve sitemap'i göster. sitemap.xml'de gerçek lastmod olsun. llms.txt'te sitenin iki cümlelik doğru özeti, önemli bilgiler ve önemli sayfaların listesi bulunsun.
5. Uydurma yok: bana sormadan yorum, puan, ödül, müşteri sayısı, sertifika, çalışma saati, koordinat ya da fiyat yazma. Bilmediğin alanı şemaya hiç koyma.
Kapılar (sırayla; hepsi geçmeden "bitti" deme):
1. site_run_command ile `node chrome-stamp.mjs`, Tailwind derlemesi, `node seo-stamp.mjs`, `node seo-check.mjs` (0 hata, 0 uyarı), `node design-check.mjs` (0 hata; kalan uyarıyı gerekçesiyle yaz) ve `npx html-validate "**/*.html"` (0 hata).
2. Her sayfayı site_preview ile view="mobile" ve view="desktop" olarak gör. site_preview sayfayı hareket kapalıyken (reduced-motion) çeker; bu görüntüde içerik eksiksiz görünmüyorsa hareketsiz hal bozuk demektir. Tam sayfa görüntüsünde aşağıdaki lazy görseller boş çıkabilir; bunu hata sayma ama yolunu kontrol et.
3. Her sayfa için core_web_vitals'ı strategy="mobile" ve strategy="desktop" ile çalıştır. Kabul: mobilde Performance en az 95, Accessibility, Best Practices ve SEO 100; masaüstünde dördü de en az 95. Tutmayan sayfada resources=true ile hangi dosyanın geciktirdiğini bul, düzelt ve yeniden ölç. Ardından ana sayfada seo_audit'i strategy="mobile" ve runs=2 ile çalıştır. Ağ istekleri listesinde kendi alan adın dışında bir adres kalmamalı.
4. 360, 390, 768 ve 1440 piksel genişlikte yatay kaydırma olmasın, dokunma hedefleri en az 44 piksel olsun, konsolda hata olmasın. Site, prompt sayfalarındaki gibi 390x790 ve 1440x898 boyutlu bir çerçevede de kusursuz görünmeli.
Hareket kontrolü: site_preview hareketi gösteremediği için bana kendi tarayıcımda neye bakacağımı tarif et. Masaüstünde sayaçlar ekrana girince sıfırdan son değere saymalı, grafik çizgileri kaydırdıkça soldan sağa çizilmeli ve noktalar sırayla belirmeli, soldaki bölüm listesinde okuduğun bölüm işaretlenmeli. Telefonda bölüm şeridi üstte yapışık kalmalı ve etkin bölüm görünür alana kaymalı. Hareketi azalt açıkken ve JavaScript kapalıyken bütün rakamlar son değerinde, bütün grafikler tam çizili görünmeli; veri tabloları açılabilmeli.
Yayından sonra: site_headers ile `/assets/* Cache-Control: public, max-age=31536000, immutable` kuralını önizle ve onayımla uygula; bundan sonra CSS ya da JS değiştiğinde dosya adını sürümle (site-v2.css gibi). gsc_submit_sitemap ile sitemap.xml'i gönder ve gsc_url_inspect ile ana sayfanın durumuna bak. En sonda bana şunları ver: sayfa sayfa puan tablosu (sayfa, mobil dört puan, masaüstü dört puan, LCP, CLS), kapıların sonucu, tarayıcıda denediğin etkileşimlerin sonucu ve uyguladığın düzeltmelerin listesi.
