Başak A.Ş. için geliştirdiğimiz web projesinde hedefimiz yalnızca kurumun projelerini tanıtan bir kurumsal site hazırlamak değildi. Kentsel dönüşüm projelerini, proje ilerlemelerini, duyuruları ve hak sahiplerinin ihtiyaç duyduğu işlem bilgilerini aynı sistem altında toplayan kapsamlı bir dijital portal oluşturduk.
Bağcılar Belediyesi iştiraki olarak faaliyet gösteren Başak A.Ş.; farklı aşamalardaki kentsel dönüşüm projelerini yürütürken vatandaşlar, hak sahipleri, proje sakinleri ve kamuoyu ile düzenli olarak büyük miktarda bilgi paylaşmak durumunda. Bu nedenle sitenin hem kurumsal iletişim platformu hem de vatandaşın ihtiyaç duyduğu bilgiye doğrudan ulaşabileceği bir dijital hizmet noktası olarak çalışması gerekiyordu.
Kurumsal web sitesinden daha fazlası
Projeyi tasarlarken ilk ele aldığımız konu bilgi mimarisi oldu. Çünkü kullanıcıların siteye geliş nedenleri birbirinden oldukça farklı.
Bir ziyaretçi devam eden projeleri incelemek isterken başka bir kullanıcı kura sonuçlarına ulaşmak, tapu işlemleri hakkında bilgi almak veya ilgili evrak listesini görüntülemek isteyebiliyor. Aynı zamanda kurumun haberleri, proje tanıtım filmleri ve şantiyelerin güncel hava görüntüleri de düzenli olarak yayınlanıyor.
Bu nedenle birbirinden farklı görünen tüm bu içerikleri tek bir navigasyon ve içerik yönetim sistemi altında, kullanıcıyı mümkün olduğunca az adımda aradığı bilgiye ulaştıracak şekilde yapılandırdık.
Projeler için özel veri mimarisi
Başak A.Ş.’nin yürüttüğü projeler standart WordPress sayfaları içerisinde yönetilmiyor. Proje içerikleri için kuruma özel bir içerik modeli geliştirdik.
Her proje; mevcut durumu, lokasyonu, başlangıç yılı, açıklamaları, medya içerikleri ve ilgili işlem bağlantılarıyla bağımsız olarak yönetilebiliyor. Devam eden, tamamlanan ve planlanan projeler aynı veri yapısı üzerinden kategorize edilebildiği için yeni projeler sisteme eklenirken mevcut sayfa tasarımının yeniden oluşturulmasına gerek kalmıyor.
Proje yapısında yönetilebilen içeriklerden bazıları
- Devam eden, tamamlanan ve planlanan projeler
- Proje lokasyonu ve durum bilgileri
- Proje açıklamaları ve teknik bilgiler
- Tanıtım videoları ve medya içerikleri
- Proje görselleri
- İlgili işlem ve bilgi alma bağlantıları
Böylece site büyüdükçe yeni projeler aynı standart içerisinde eklenebiliyor ve kullanıcı her projede tutarlı bir bilgi düzeniyle karşılaşıyor.
Projenin ilerleyişini gösteren hava görüntüleri
Kentsel dönüşüm projelerinde kullanıcıların en çok merak ettiği konulardan biri inşaatın güncel durumu. Bu nedenle proje hava görüntülerini sitenin ayrı bir içerik sistemi olarak ele aldık.
Kullanıcılar projelerini seçerek farklı tarihlerde kaydedilmiş hava görüntülerine ulaşabiliyor ve yapım sürecinin zaman içerisindeki ilerleyişini takip edebiliyor.
Her proje için görüntüleme dönemleri ayrı ayrı yönetilebildiğinden yeni bir çekim geldiğinde mevcut sayfayı yeniden hazırlamak yerine ilgili dönem ve medya içeriği yönetim panelinden sisteme eklenebiliyor.
Hak sahipleri için dijital işlem merkezi
Başak A.Ş. projesini klasik bir tanıtım sitesinden ayıran en önemli bölümlerden biri müşteri işlemleri altyapısı oldu.
Kentsel dönüşüm sürecindeki hak sahiplerinin ihtiyaç duyduğu bilgiler farklı ekranlara ayrılarak kullanıcıların uzun açıklamalar veya karmaşık menüler içerisinde kaybolmasının önüne geçildi.
Kura sonuçları ve daire dağılımları
Noter huzurunda gerçekleştirilen kura çekimlerinin ardından oluşan sonuç ve daire dağılım bilgilerinin vatandaşlar tarafından dijital ortamda incelenebilmesi için ilgili içerik akışları oluşturuldu.
Böylece hak sahibi, yalnızca bilgi almak için farklı iletişim kanallarına yönelmek yerine ilgili proje ve kura bilgilerine doğrudan web sitesi üzerinden ulaşabiliyor.
Sözleşme, devir ve tapu evrakları
Kentsel dönüşüm süreçlerinde gerekli belgelerin eksik hazırlanması hem vatandaş hem kurum tarafında ciddi zaman kaybına neden olabiliyor.
Bu nedenle sözleşme, devir ve tapu tescil işlemlerinde ihtiyaç duyulan evrak listeleri ve başvuru dokümanları kullanıcıların erişebileceği merkezi bir yapı içerisinde sunuluyor.
Tapu, tescil ve DASK işlem rehberleri
Tapu devri, tescil ve zorunlu deprem sigortası gibi resmi süreçler için gerekli bilgiler de kullanıcı dostu işlem sayfalarında toplandı. Böylece teknik veya idari terminolojiye hakim olmayan kullanıcıların dahi hangi işlem için hangi adımları izlemesi gerektiğini daha rahat anlayabilmesi hedeflendi.
Güncel bilgi için haber ve duyuru altyapısı
Kentsel dönüşüm projelerinde yalnızca proje sayfalarının güncel olması yeterli değil. Temel atma törenlerinden yeni proje duyurularına, enerji ve yapı teknolojilerinden vatandaş bilgilendirmelerine kadar farklı içeriklerin düzenli olarak yayınlanması gerekiyor.
Bu nedenle haber ve duyurular için bağımsız bir içerik mimarisi oluşturduk. Yayınlanan içerikler tarih bilgileriyle birlikte sistem içerisinde arşivleniyor ve yönetim panelinden düzenli olarak güncellenebiliyor.
Başak A.Ş.’ye özel WordPress mimarisi
Bu ölçekte ve farklı içerik türlerinin bir arada bulunduğu bir projeyi hazır bir WordPress temasının sınırları içerisinde çözmek yerine, kurumun ihtiyaçlarına göre özel bir tema geliştirdik.
Ağır sayfa oluşturucular üzerine kurulu bir yapı yerine, gerekli ekranların ve modüllerin doğrudan proje için geliştirildiği daha kontrollü bir mimari tercih ettik.
WordPress bu projede yalnızca sayfa düzenlemek için kullanılan bir araç değil; projelerin, haberlerin, hava görüntülerinin ve farklı kurumsal içeriklerin birbirinden bağımsız veri modelleriyle yönetildiği merkezi CMS katmanı olarak çalışıyor.
Kuruma özel içerik tipleri
- Kentsel dönüşüm projeleri
- Haberler ve duyurular
- Proje hava görüntüleri
- Görüntüleme dönemleri ve medya içerikleri
- Müşteri işlem ve bilgilendirme içerikleri
Performans odaklı frontend
Kamusal nitelikte bir web sitesinde kullanıcıların farklı cihazlar ve bağlantı hızları üzerinden sisteme erişebilmesi önemliydi. Bu nedenle performansı yalnızca son aşamada yapılan bir optimizasyon işi olarak değil, geliştirme mimarisinin bir parçası olarak ele aldık.
Arayüz Tailwind CSS tabanlı özel bir frontend yapısıyla geliştirildi. Kullanılmayan büyük stil paketlerini ve sayfa oluşturucu kaynaklarını yüklemek yerine yalnızca projede ihtiyaç duyulan bileşenler prodüksiyon çıktısına dahil edildi.
Frontend etkileşimlerinde mümkün olduğunca hafif JavaScript kullanıldı. Slider ve medya alanlarında ihtiyaç duyulan noktalarda Swiper.js gibi bağımsız bileşenler tercih edildi.
Performans tarafında uygulanan çalışmalardan bazıları
- Node.js, PostCSS ve Tailwind tabanlı build süreci
- Minify edilmiş prodüksiyon CSS dosyaları
- Görsellerde native lazy loading
- Responsive görsel kullanımına uygun srcset yapıları
- Kaynakların ihtiyaç durumuna göre yüklenmesi
- Tarayıcı önbelleği için dosya versiyonlama
- Font ve harici kaynaklarda preconnect / resource hint kullanımı
- Optimize edilmiş WordPress sorguları
Güvenlik katmanını tema seviyesinde ele aldık
Vatandaşların aktif olarak kullandığı bir kurumsal portalda güvenlik, projeye sonradan eklenen bir eklentiye bırakılamayacak kadar önemliydi.
WordPress’in ihtiyaç duyulmayan dış erişim noktalarını sınırlandırdık; XML-RPC gibi kullanılmayan servisleri devre dışı bıraktık ve REST API erişimlerini proje gereksinimlerine göre kontrol altına aldık.
Form tarafında WordPress nonce doğrulamaları ve sunucu taraflı veri kontrolleri kullanıldı. Otomatik veya aşırı form isteklerini azaltmak için WordPress Transient API üzerinden IP bazlı rate limiting mekanizmaları oluşturuldu.
Kullanıcıdan alınan verilerin sisteme işlenmesi sırasında WordPress’in sanitization ve escaping mekanizmaları kullanılarak çıktı ve veri girişleri kontrollü şekilde yönetildi.
SEO altyapısı doğrudan sistemin parçası
Başak A.Ş. sitesinde arama motoru görünürlüğünü yalnızca bir SEO eklentisinin ayarlarına bırakmak yerine temel teknik SEO bileşenlerini tema mimarisinin içerisinde de ele aldık.
Sayfa türüne göre dinamik metadata, canonical URL, Open Graph ve sosyal medya paylaşım bilgileri üretilebilecek altyapı kuruldu. Proje, kurum ve haber içerikleri için yapılandırılmış veri desteği oluşturularak arama motorlarının farklı içerik türlerini daha doğru anlamlandırabilmesi hedeflendi.
Teknik altyapı
- CMS: WordPress
- Backend: PHP ve WordPress Core API
- Veritabanı: MySQL
- Arayüz: HTML5, Tailwind CSS 3.4 ve JavaScript ES6+
- İçerik mimarisi: Custom Post Types, custom taxonomies ve özel meta alanları
- Slider / medya: Swiper.js
- Build süreci: Node.js, PostCSS ve Autoprefixer
- Görsel varlıklar: WebP, SVG ve optimize edilmiş medya dosyaları
- Güvenlik: Nonce doğrulama, veri sanitizasyonu, rate limiting ve erişim kısıtlamaları
- SEO: Dinamik metadata, canonical yapı, sosyal paylaşım metaları ve JSON-LD structured data
Ortaya çıkan sistem
Başak A.Ş. için ortaya çıkan yapı; projelerin tanıtıldığı bir kurumsal web sitesinin ötesinde, kurum ile vatandaş arasındaki dijital bilgi akışını tek noktada toplayan bir kentsel dönüşüm portalı oldu.
Kullanıcı bir yandan devam eden projeleri ve güncel hava görüntülerini inceleyebilirken diğer yandan kura sonuçlarından gerekli evraklara, tapu süreçlerinden kurumsal duyurulara kadar ihtiyaç duyduğu bilgiye aynı sistem üzerinden ulaşabiliyor.
Kurum tarafında ise projeler, haberler ve medya içerikleri birbirinden bağımsız ve yönetilebilir veri yapılarıyla WordPress panelinden güncellenebiliyor.
Bu projede temel mesele yeni bir kurumsal site tasarlamak değil; çok sayıda proje, belge, medya ve işlem bilgisini vatandaşın anlayabileceği kadar sade, kurumun sürdürebileceği kadar yönetilebilir ve teknik olarak ölçeklenebilir tek bir sistem içerisinde birleştirmekti.