Nasıl Yapıldı?
Bu proje, modern web teknolojilerini bir araya getirerek hem görsel hem de işlevsel açıdan zengin bir kullanıcı deneyimi sunmak amacıyla geliştirilmiştir. Aşağıda projede kullanılan temel teknolojiler ve kullanım amaçları detaylandırılmıştır.
1. HTML5 ve Semantik Yapı
Nasıl Kullanıldı: Projenin iskeleti, anlamlı (semantik) HTML5 etiketleri (<header>, <main>, <section>, <nav> vb.) kullanılarak inşa edilmiştir.
Neden Kullanıldı: Arama motoru optimizasyonu (SEO) ve erişilebilirlik (ekran okuyucular vb.) standartlarına uygun, temiz ve okunabilir bir DOM yapısı oluşturmak için tercih edilmiştir.
2. CSS3 (Flexbox & Grid) ve Glassmorphism Modeli
Nasıl Kullanıldı: Tasarımda saydamlık, arka plan bulanıklığı (backdrop-filter) ve ince beyaz kenarlıklar birleştirilerek "cam (glass)" dokusu elde edildi. Düzen için Flexbox ve Grid sistemleri aktif bir biçimde kullanıldı.
Neden Kullanıldı: Apple/iPhone tarzı premium hissiyatı veren modern Glassmorphism tasarım dilini uygulamak, arayüzü daha şık göstermek ve cihaz uyumluluğunu (Responsive Design) sağlamak için saf (vanilla) CSS tercih edilmiştir.
3. Vanilla JavaScript (ES6)
Nasıl Kullanıldı: Şehir verileri doğrudan bir JSON / JS objesi olarak tutulup, DOM manipülasyonu işlemleri tamamen saf JavaScript ile (harici kütüphane kullanılmadan) eylemlere bağlanmıştır.
Neden Kullanıldı: Performansı artırmak, sayfalar arası geçişlerde ve hava durumu güncellemelerinde anlık tepki alabilmek ve React/Vue gibi büyük framework yüklerinden kaçınmak amacıyla kullanıldı.
4. WebGL (Fragment & Vertex Shaders)
Nasıl Kullanıldı: Arka plan videosundaki görseller alınarak bir HTML <canvas> üzerine doku (texture) olarak işlendi. Özel yazılmış GLSL shader kodlarıyla balık gözü (fisheye) bükümü, renk sapması ve iç cam yansıması (glossy) efektleri hesaplanıp panele yansıtıldı.
Neden Kullanıldı: Klasik CSS backdrop-filter yeteneklerinin çok ötesinde, ışığın camdan geçerken gerçekçi biçimde kırılmasını (refraction) ve panelin kenarlarındaki iç yansımaları simüle edebilmek için grafik kartı (GPU) destekli WebGL teknolojisine başvurduk.
5. Matter.js (Fizik Motoru)
Nasıl Kullanıldı: Sayfadaki DOM objelerinin pozisyon ve boyutları hesaplanarak Matter.js içinde katı cisimler (rigid bodies) oluşturuldu. Gizli bir yerçekimi motoru arkaplanda çalıştırılarak objelerin koordinatları, tıklama eylemiyle 60 FPS ile HTML etiketlerine dönüştürüldü.
Neden Kullanıldı: Sayfadaki sabit "sıkıcı" elementlere "Google Antigravity" tarzında interaktif, eğlenceli ve fiziksel bir gerçekçilik katarak projenin çarpıcılığını (wow effect) maksimize etmek için entegre edildi.
6. Leaflet.js ve CartoDB (Harita)
Nasıl Kullanıldı: Türkiye merkezine konumlandırılmış interaktif bir harita sol menüye entegre edildi. Her şehir JSON üzerinden konumlandırılarak özel renkli pinlere dönüştürüldü.
Neden Kullanıldı: Klasik bir "Arama" veya "Liste" formunun çok ötesinde, kullanıcının doğrudan gözlemleyebildiği coğrafi bir deneyim sunarak uygulamanın "Enterprise-grade" seviyesine çıkması sağlandı.
7. Chart.js & Progressive Web App (PWA)
Nasıl Kullanıldı: Veriler Chart.js kullanılarak İstatistikler sayfasındaki dinamik pasta/bar grafiklerine dönüştürüldü. Projeye `manifest.json` ve `sw.js` dahil edildi.
Neden Kullanıldı: Veri analitiğini görselleştirmek ve sitenin kullanıcıların cihazlarına (telefon, bilgisayar) "gerçek bir uygulama" gibi yüklenebilmesi, çevrimdışı dahi çalışabilmesi amaçlanmıştır.
8. jQuery, Eklentiler & İstemci Taraflı Form Doğrulama (Final)
Nasıl Kullanıldı: Projenin genelinde DOM etkileşimi, dinamik filtreleme ve animasyonlu geçişler için jQuery tercih edildi. İletişim sayfasındaki form, sayfa yenilenmeden jQuery ile doğrulandı. Galeri sayfasında ise veriler diziden çekilerek harici Magnific Popup eklentisiyle şık bir Lightbox modalında sunuldu.
Neden Kullanıldı: Dersin final projesi kriterlerindeki istemci taraflı gelişmiş form kontrolü, harici eklenti entegrasyonu, parent/sibling gezinmesi ve animasyonlu DOM işlemlerini eksiksiz uygulamak amacıyla entegre edildi.
9. İnteraktif Ödev Portalı
Nasıl Kullanıldı: Dönem boyunca yapılan 5 adet ödev (Kişisel CV, Akıllı Hesap Makinesi, LocalStorage destekli Todo Listesi, Şifre Gücü Ölçer ve Karakter Sınırlayıcı, Kronometreli Canlı Saat) tek bir sayfa altında sekmeli yapıyla çalışan uygulamalara dönüştürüldü.
Neden Kullanıldı: Değerlendirme kriterlerinde bulunan ödev kısımlarını doğrudan nihai final projesiyle birleştirerek tek bir portal üzerinden tüm ödevlerin canlı test edilmesini sağlamak için kurgulandı.