TRAMA Surface - Zemin ve Duvar Kaplamaları Web Sitesi Teması

TRAMA nedir?

TRAMA, zemin ve duvar kaplaması satan firmalar için sıfırdan yazılmış bir PHP web sitesi temasıdır. Dokuma vinil, LVT parke, halı karo, akustik keçe, büyük ebat porselen, reçine zemin ve dış mekân dek bayilerini hedef alır.

Tema tek bir ticari gerçeği kabul ederek kurgulandı: bu sektörde satış sepetten değil numuneden başlar. Kaplama alıcısı bir metrekare fiyatı görüp "sepete ekle" demez. Malzemeyi eline alır, ışıkta çevirir, mekânındaki dolapla yan yana koyar, sonra teklif ister. Bu yüzden TRAMA'da ödeme altyapısı yok. Onun yerine numune talebi, teknik föy ve proje danışmanlığı akışı var.

Kartela mantığı: renk başına sayfa açmıyoruz

Kaplama sitelerinin en yaygın hatası her rengi ayrı ürün sayfasına bölmektir. Sekiz koleksiyon ve her birinde altı renk, 48 ayrı sayfa demektir. Ziyaretçi renkleri yan yana göremez, sekme açıp kapatır; arama motoru da birbirinin neredeyse aynısı olan 48 sayfayı zayıf içerik sayar.

TRAMA bunun tersini yapar. Bir koleksiyon sayfası ailenin bütün renklerini tek ızgarada gösterir; her hücrede renk adı, kodu ve dokunun makro fotoğrafı vardır. Üstündeki ton süzgeci renkleri parlaklığa göre açık, orta ve koyu diye üçe ayırır. Mimar "koyu grinin hangi tonları var" diye sorduğunda cevap tek tıklama uzaktadır. Arama motoru tarafında aile başına tek güçlü sayfa kalır ve bütün renkler ProductGroup şemasıyla aynı künyede bildirilir.

Desen büyüteci

Doku satan bir sitede en kritik etkileşim yakından bakmaktır. TRAMA'da renk hücresinin üzerine gelmek yeterli: doku imlecin bulunduğu noktadan yüzde 280 oranında büyür ve imleci takip eder. Dokuma ipliği, keçe yüzeyi veya porselen damarı çözünür hâle gelir. Tıklamak tam ekran görüntüleyiciyi açar, ok tuşlarıyla aynı ailenin renkleri arasında gezilir.

Büyütme için ek bir DOM katmanı üretilmez, background-size ve background-position ile yapılır; bu yüzden uzun kartelalarda bile kaydırma akıcı kalır. Dokunmatik cihazda tarayıcıya hover sorulur ve mekanizma hiç devreye girmez, orada tam ekran düğmesi çalışır. Klavye kullanan ziyaretçi hücreye sekme ile ulaşır ve Enter ile açar.

Yüzey Bulucu

Teknik alıcı katalogda gezinmez, eleme yapar. Yüzey Bulucu üç eksende çalışır:

• Mekân: ofis, otel ve restoran, sağlık, eğitim, perakende, konut, spor ve wellness, kültür ve sanat
• Malzeme ailesi: tekstil zeminler, sert zeminler, duvar ve akustik, dış mekân
• Öncelik: akustik performans, hijyen, ıslak alan güvenliği, ağır trafik dayanımı

Seçimler sayfa yenilenmeden listeyi daraltır. Bulunan kombinasyon adres satırına yazıldığı için müşteriye doğrudan bağlantı olarak gönderilebilir: "sizin için filtrelediğim liste şu" demek tek link işidir.

Numune tepsisi

Ziyaretçi gezinirken beğendiği renkleri tepsiye ekler. Tepsi sekiz renkle sınırlıdır, çünkü kargolanan numune kutusunun gerçek kapasitesi budur ve sınırsız seçimin maliyeti sizin üstünüzde kalır. Tepsi tarayıcıda saklanır, sayfa değiştirince kaybolmaz.

Numune formuna geçildiğinde renk listesi kodu ve aile adıyla forma hazır gelir. Talep yönetim paneline seçilen renk kodları, teslimat adresi ve proje notuyla birlikte düşer. Böylece zaman içinde hangi rengin kaç kez numune olarak istendiğini görebilirsiniz; bu, stok ve kartela yenileme kararının verisidir.

Teknik föy

Mimar ve müteahhit görsele değil değere bakar. Her koleksiyon şu alanlarla belgelenir: malzeme yapısı, format ve kalınlık, kullanım sınıfı (EN 685), aşınma sınıfı, ses yalıtım değeri (ΔLw), ses yutum katsayısı (αw), yangın sınıfı, kayma direnci (DIN 51130 ve R sınıfı), ısıtmalı zemin uygunluğu, garanti süresi ve teslim bilgisi.

Bu alanlar yönetim panelinden satır satır girilir. Koleksiyon sayfası bunları hem okunur bir tabloda hem Product şemasının additionalProperty alanlarında yayınlar, yani değerler arama motoru tarafında da makine okunur hâlde durur. Zemin kesiti ayrıca beş katmanlı bir SVG diyagramla anlatılır: aşınma tabakası, baskı filmi, taşıyıcı çekirdek, denge katmanı ve akustik sırt.

Ürün sayfası: dokuz düzen, tek dil

Koleksiyon sayfası dokuz farklı bölüm düzeninden kurulur ve hiçbir düzen kendini tekrar etmez. Sırasıyla: makro doku hero ve üzerine oturan cam künye kartı, kaydırmada sabit kalan koleksiyon çubuğu, ton süzgeçli renk ızgarası, makro doku ile mekân fotoğrafı arasında sürüklenen karşılaştırma, koyu zeminde teknik föy, kullanım alanı listesi, referans proje şeridi, aileler arası karşılaştırma tablosu ve numune bandı.

Amaç şu: sayfayı aşağı kaydıran kişi her ekranda yeni bir şey görsün, üç eşit kartın alt alta tekrarını değil. Kaplama alıcısı ürün sayfasında ortalama olarak sitenin geri kalanından uzun kalır; o süreyi hak eden bir sayfa gerekiyor.

Mekân ve proje sayfaları

Sekiz mekân sayfasının her biri kendi arama hedefiyle çalışır. O mekân türünün teknik kriterlerini anlatır, önerilen koleksiyonları ve aynı türdeki referans projeleri otomatik listeler. Aynı koleksiyon bir ofiste doğru, bir ameliyathanede yanlış olabilir; mekân sayfaları bu ayrımı satıcı yerine sitenin anlatmasını sağlar.

Proje sayfaları metrekare, konum, yıl, mimar, işveren ve kullanılan koleksiyon künyesiyle yayınlanır. Proje ile koleksiyon arasındaki bağ iki yönlüdür: koleksiyon sayfası da kendisinin kullanıldığı projeleri gösterir, böylece her yeni referans eski koleksiyon sayfalarını güçlendirir.

Modüler blog ve yazar sistemi

Blog altyapısı ayrı bileşen dosyalarından kuruludur: üç varyantlı yazı kartı, yazar kartı, içindekiler, paylaşım ve ilgili yazılar. Yeni bir yerde yazı listelemek tek satır dahil etme işidir, kopyala yapıştır düzen çoğaltması gerekmez.

Yazı sayfasında Türkçe kelime sayımına göre hesaplanan okuma süresi, kaydırmayı takip eden okuma çubuğu, başlıklardan otomatik üretilen yapışkan içindekiler listesi, uzmanlık alanlarıyla yazar kartı, önceki ve sonraki yazı geçişi ve ilgili yazılar bulunur. Yazarların kendi profil sayfası ProfilePage şemasıyla yayınlanır. Kaplama sektöründe "hangi ofise hangi zemin", "akustik zemin nedir", "LVT ile laminat farkı" gibi aramalar sürekli hacim taşır; blog bu trafiği karşılamak için var, süs olarak değil.

Hareket katmanı

TRAMA durağan bir katalog gibi durmaz. GSAP ScrollTrigger üzerine kurulu on ayrı sahne kaydırmaya bağlanır: hero panelleri ters yönde ayrışır, kartela destesi ekranda sabitlenip aileleri sırayla değiştirir, koleksiyon rayı dikey kaydırmayla yatay kayar, proje kartları üst üste yığılır, katman diyagramı sırayla açılır, marka dizini karşıt yönlerde akar.

Her sahne kendi hata yakalayıcısının içinde çalışır. Bir sahne ölçüm hatası verirse sayfanın kalanı etkilenmez ve içerik hiçbir koşulda gizli kalmaz; bu, kaydırma animasyonu kullanan sitelerin en sık düştüğü tuzaktır. prefers-reduced-motion tercihi açık olan ziyaretçide hareket katmanı tamamen devre dışıdır, sayfa sade biçimde açılır.

Tasarım dili

Renk

Palet bilinçli olarak monokromdur: beyaz (#FFFFFF), kağıt (#F2F1EE), pus (#E7E4DD), mürekkep (#141518) ve çelik (#6B6E73). Tek aksan olan kobalt (#1F3FD1) yalnızca odak noktasında kullanılır: aktif filtre, seçili renk, birincil düğme. Sebebi basit; sattığınız ürünün kendisi renkli. Arayüz renk yarışına girerse müşteri kaplamanın gerçek tonunu göremez.

Tipografi

Başlıklarda Zodiak (ince ağırlıklı çağdaş serif), gövdede Switzer (grotesk), teknik değerlerde Geist Mono. Başlık içinde vurgulanan kelime serifden kalın groteske geçer; bu karşıtlık temanın imzasıdır ve her sayfada aynı kuralla tekrarlanır.

Biçim

Düğmeler tam yuvarlak (hap), görsel ve kart kenarları keskin. Bu iki karar baştan sona değişmez. Malzeme fotoğrafı yuvarlatılmış köşede küçülür; keskin kenar dokuyu olduğu gibi bırakır.

Bayilik ve talep yönetimi

Bayilik başvuru formu kendi yönetim ekranıyla gelir ve durum takibi yapar: yeni, görüşüldü, onaylandı, reddedildi. Numune talepleri de aynı disiplinle izlenir. İletişim mesajları, indirilebilir teknik doküman arşivi, sıkça sorulan sorular, ekip ve temsil edilen üretici listesi aynı panelde yönetilir. Toplam 28 yönetim ekranı vardır ve hepsi Türkçedir.

Teknik temel

Saf PHP 8.0 ve üzeri ile PDO kullanılarak yazıldı. WordPress bağımlılığı, eklenti güncelleme riski ya da sayfa oluşturucu katmanı yok. 33 veritabanı tablosu, 24 frontend sayfa, 28 yönetim ekranı.

Görseller AVIF ve WebP olarak üretilir ve <picture> ile sunulur, tarayıcı desteklediği en küçük dosyayı alır. Üç formun tamamında CSRF jetonu doğrulanır, numune formunda ek olarak bal küpü alanı vardır, bütün sorgular hazırlanmış ifadelerle çalışır.

Yapısal veri tarafında HomeGoodsStore, ProductGroup, Product, Brand, AggregateOffer, PropertyValue, BlogPosting, ProfilePage, FAQPage, BreadcrumbList, CollectionPage ve WebSite tipleri kullanılır. Dinamik XML site haritası, yönetilebilir robots politikası, sayfa bazlı meta yönetimi, yönlendirme yönetimi ve 404 izleme ekranı temaya dahildir.

Erişilebilirlik

Renk hücreleri odaklanabilir, odak halkası görünür, tam ekran görüntüleyici klavyeyle açılıp kapanır ve ok tuşlarıyla gezilir. Yatay karusel fare, dokunma, klavye ve ok tuşlarıyla çalışır. Hareket tercihi kapalı olan ziyaretçi için animasyon katmanı tamamen kalkar. Kontrast oranları monokrom palet sayesinde her yüzeyde yüksek kalır.

Bu temada olmayanlar

Beklentiyi baştan netleştirmek daha doğru: TRAMA'da sepet, ödeme altyapısı ve online satış yoktur. Üyelik ve müşteri hesabı yoktur. Çok dilli yapı kurulu değildir. Bunlar eksik değil karardır; tema mümessillik ve proje satışı modeline göre kurgulandı. Kaplamayı metrekare fiyatıyla online satacaksanız ihtiyacınız olan farklı bir temadır ve bunu satın almadan önce bilmelisiniz.

Destek ve güncelleme

Kurulum desteği, Türkçe dokümantasyon ve 6 ay ücretsiz teknik destek fiyata dahildir. Tema güncellemeleri yönetim panelindeki güncelleme modülünden tek tıkla yüklenir, her güncellemenin öncesinde otomatik yedek alınır ve sorun çıkması hâlinde önceki sürüme dönülebilir.