Mevcut Web Sitemin CSS'ine Uyumlu Basit Bir JavaScript Anketini Nasıl Tasarlarım?

Web sitenizde ziyaretçilerle etkileşim kurmanın ve onların fikirlerini almanın en etkili yollarından biri anketlerdir. Ancak, bir anket eklerken yalnızca işlevselliğe odaklanmak yetmez; aynı zamanda sitenizin mevcut tasarım diline kusursuz bir şekilde entegre olması da kritik öneme sahiptir. Aksi takdirde, sitenizin profesyonel görünümünü bozabilir, kullanıcı deneyimini olumsuz etkileyebilir ve hatta AdSense politikaları açısından "düşük değerli içerik" olarak algılanma riskini artırabilir. Bu makalede, sitenizin mevcut CSS stillerine tamamen uyumlu, tamamen istemci tarafında çalışan basit bir JavaScript anketi oluşturmanın adımlarını detaylı bir şekilde inceleyeceğiz.

Neden CSS Uyumlu Bir Anket Bu Kadar Önemli?

>

Web sitenize eklediğiniz her bileşen, sitenizin genel estetiğine ve markasına katkıda bulunmalı veya en azından zarar vermemelidir. Anketler de bu kuralın bir istisnası değildir.

Kullanıcı Deneyimi ve Güvenilirlik

Ziyaretçileriniz, sitenizde tutarlı bir tasarım gördüklerinde kendilerini daha güvende ve rahat hissederler. Bir anketin sitenizin geri kalanından alakasız renkler, fontlar veya boyutlarla ayrışması, ziyaretçide amatör bir izlenim yaratabilir. Bu durum, anketin güvenilirliğini ve katılımcıların ciddiyetini doğrudan etkileyebilir. Amacımız, anketin doğal bir uzantı gibi görünmesini sağlamaktır.

Marka Tutarlılığı ve Profesyonel Görünüm

Her web sitesi bir markayı temsil eder. Logolar, renk paletleri, tipografi ve görsel hiyerarşi, o markanın kimliğinin bir parçasıdır. Anketinizin bu marka dilini yansıtması, sitenizin genel profesyonelliğini artırır. Tutarsız tasarım öğeleri, sitenizin ciddiyetini ve kalitesini düşürebilir, bu da AdSense gibi reklam platformları tarafından "düşük kaliteli" veya "bakımsız" olarak algılanmasına yol açabilir. Bu nedenle, web geliştirme sürecinde estetik entegrasyonu göz ardı etmemek gerekir.

AdSense Politikalarına Uyum

Google AdSense, kullanıcıya değer sunan, özgün ve kaliteli içeriğe sahip siteleri ödüllendirir. Düşük kaliteli, kopya veya kötü tasarlanmış içerik, AdSense politikalarına aykırı görülebilir ve reklam gösterimlerinizin askıya alınmasına neden olabilir. Anketinizin sitenizin mevcut tasarımına uygun olması, sitenizin genel kalitesini yükseltir ve AdSense politikalarına uyumlu, değerli bir içerik sunduğunuzu gösterir.

Anketin Temel Bileşenleri

>

Basit bir JavaScript anketini üç ana bileşenle oluştururuz:

1. HTML Yapısı: Anketin görsel iskeletini, soruları, seçenekleri ve gönder düğmesini tanımlar.
2. CSS Stili: Anketin sitenizin estetiğine uygun görünmesini sağlar. Mevcut CSS'inizden faydalanmak, bu adımın anahtarıdır.
3. JavaScript İşlevselliği: Anketin beynidir. Kullanıcı seçimlerini alır, oyları sayar, sonuçları gösterir ve gerektiğinde oyları kalıcı hale getirir.

Adım Adım Basit Bir JavaScript Anketi Oluşturma

>

Şimdi, sitenizin mevcut CSS'ine uyumlu bir anket oluşturma sürecini adım adım inceleyelim.

1. HTML Yapısı (Anket İskeleti)

>

İlk olarak, anketinizin temel HTML yapısını oluşturacağız. Bu yapı, sitenizin diğer öğeleriyle aynı semantik ve erişilebilirlik standartlarını takip etmelidir.

```html

```

Açıklama:
* `#anketKapsayici` ve `class="anket-container"`: Anketin tamamını saran bir ana kapsayıcı. Bu sayede tüm anketi tek bir blok olarak şekillendirebiliriz.
* `h3` ve `class="anket-sorusu"`: Anket sorusu için uygun bir başlık etiketi. Sitenizin başlık stillerine uyacak şekilde tasarlanacaktır.
* `form` ve `class="anket-form"`: Anket seçeneklerini ve gönder düğmesini barındıran bir form etiketi.
* `input type="radio"` ve `label`: Her bir anket seçeneğini temsil eder. `name="teknoloji"` özelliği, aynı gruptaki radyo butonlarından yalnızca birinin seçilebilmesini sağlar. `id` ve `for` özellikleri, erişilebilirlik için hayati önem taşır; kullanıcı etikete tıkladığında ilgili radyo butonu seçilir.
* `button type="submit"`: Oy verme eylemini tetikleyecek düğme. Sitenizin mevcut düğme stillerini kullanacağız.
* `#anketSonuclari` ve `class="anket-sonuclar"`: Anket sonuçlarının görüntüleneceği boş bir div.

2. JavaScript Mantığı (Anketin Beyni)

>

JavaScript, anketin interaktif olmasını sağlayacaktır. Oyları işleyecek, sonuçları gösterecek ve kullanıcının bir kez oy vermesini sağlayacaktır.

```javascript
document.addEventListener('DOMContentLoaded', () => {
const anketFormu = document.getElementById('anketFormu');
const oyVerButon = document.getElementById('oyVerButon');
const anketSonuclari = document.getElementById('anketSonuclari');
const anketKapsayici = document.getElementById('anketKapsayici');

// Oyları localStorage'dan yükle veya boş bir obje olarak başlat
let oylar = JSON.parse(localStorage.getItem('anketOylari')) || {};
let kullaniciOyVerdi = localStorage.getItem('kullaniciOyVerdi') === 'true';

// Sayfa yüklendiğinde sonuçları göster veya anketi etkinleştir
if (kullaniciOyVerdi) {
gosterSonuclari();
anketFormu.style.display = 'none'; // Kullanıcı oy verdiyse formu gizle
} else {
anketFormu.style.display = 'block'; // Kullanıcı oy vermediyse formu göster
}

anketFormu.addEventListener('submit', (e) => {
e.preventDefault(); // Formun varsayılan submit davranışını engelle

if (kullaniciOyVerdi) {
alert('Zaten oy verdiniz!');
return;
}

const secilenSecenek = document.querySelector('input[name="teknoloji"]:checked');

if (secilenSecenek) {
const secim = secilenSecenek.value;
oylar[secim] = (oylar[secim] || 0) + 1;

// Oyları ve kullanıcının oy verdiğini localStorage'a kaydet
localStorage.setItem('anketOylari', JSON.stringify(oylar));
localStorage.setItem('kullaniciOyVerdi', 'true');
kullaniciOyVerdi = true;

alert(`Oyuncunuz kaydedildi: ${secim}`);
anketFormu.style.display = 'none'; // Formu gizle
gosterSonuclari(); // Sonuçları göster
} else {
alert('Lütfen bir seçenek belirleyin!');
}
});

function gosterSonuclari() {
if (Object.keys(oylar).length === 0) {
anketSonuclari.innerHTML = '

Henüz hiç oy verilmedi.

';
return;
}

let toplamOy = 0;
for (let secim in oylar) {
toplamOy += oylar[secim];
}

let sonucHTML = '

Anket Sonuçları

';
for (let secim in oylar) {
const yuzde = toplamOy > 0 ? ((oylar[secim] / toplamOy) * 100).toFixed(1) : 0;
sonucHTML += `

• 
  ${secim}:
  ${oylar[secim]} oy
  (${yuzde}%)
  
  
  

  
  
  
  

`;
}
sonucHTML += '

';
anketSonuclari.innerHTML = sonucHTML;
anketSonuclari.style.display = 'block';
}

// İlk yüklemede sonuçları göstermek (eğer kullanıcı oy verdiyse)
if (kullaniciOyVerdi) {
gosterSonuclari();
}
});
```

Açıklama:
* `DOMContentLoaded`: Sayfa tamamen yüklendiğinde JavaScript kodunun çalışmasını sağlar.
* DOM Manipülasyonu: `document.getElementById` ve `document.querySelector` ile HTML öğelerine erişilir.
* Veri Saklama: `localStorage.getItem` ve `localStorage.setItem` kullanılarak oylar tarayıcıda kalıcı olarak saklanır. Bu sayede kullanıcı sayfayı yenilese bile oylar ve kullanıcının oy verip vermediği bilgisi korunur. `JSON.parse` ve `JSON.stringify`, obje olarak saklanan oyları string'e çevirip geri dönüştürmek için kullanılır.
* `e.preventDefault()`: Formun varsayılan gönderim davranışını (sayfanın yenilenmesi) engeller.
* Oy Verme Mantığı: Kullanıcının seçtiği radyo butonunun değeri alınır, `oylar` objesinde güncellenir ve `localStorage`'a kaydedilir.
* Tek Oy Kuralı: `kullaniciOyVerdi` değişkeni ve `localStorage` kontrolü ile kullanıcının sadece bir kez oy vermesi sağlanır.
* `gosterSonuclari()` fonksiyonu: Anket sonuçlarını hesaplar (toplam oy, yüzde oranları) ve dinamik olarak HTML oluşturarak `anketSonuclari` div'ine yerleştirir. Burada basit bir ilerleme çubuğu (progress bar) yapısı da tanımlanmıştır, bu da sonuçları görsel olarak daha çekici hale getirecektir. Bu kısım için ayrı bir makale yazılabilir: "[Web Depolama Çözümleri: localStorage ve sessionStorage Kullanımı](https://example.com/web-depolama-cozumleri-makale-linki)" (Bu bir örnek linktir).

3. CSS Entegrasyonu ve Stil Uyumluluğu (Görünüm ve His)

>

Bu adım, anketinizin sitenizin mevcut tasarımına uyum sağlaması için en kritik adımdır.

Mevcut CSS'inizi İnceleyin:
Tarayıcınızın geliştirici araçlarını (F12) kullanarak sitenizin genel CSS stillerini inceleyin:
* Fontlar: Hangi `font-family` ve `font-size` değerleri kullanılıyor?
* Renkler: Başlıklar, arka planlar, butonlar ve metinler için hangi `color` ve `background-color` değerleri mevcut?
* Buton Stilleri: `border-radius`, `padding`, `background-color`, `color`, `border` gibi buton stilleriniz neler?
* Form Elemanları: Radyo butonları, checkbox'lar veya diğer input alanları için özel stilleriniz var mı?
* Kapsayıcı Stilleri: Sitenizin ana içerik kapsayıcıları genellikle `max-width`, `padding`, `margin` gibi stillere sahiptir.

Anket Elemanlarına Uygun Stiller Uygulama:
Yukarıdaki HTML yapısına ve gözlemlediğiniz mevcut stillere göre aşağıdaki gibi bir CSS yazabilirsiniz:

```css
/* Mevcut CSS'inizden alınan genel stiller (örnekler) */
:root {
--ana-renk: #007bff; /* Sitenizin ana rengi */
--ikincil-renk: #6c757d; /* Sitenizin ikincil rengi */
--arka-plan-renk: #f8f9fa; /* Açık arka plan */
--metin-renk: #212529; /* Koyu metin */
--font-family-ana: 'Arial', sans-serif;
--border-radius-genel: 0.25rem;
}

body {
font-family: var(--font-family-ana);
color: var(--metin-renk);
background-color: #ffffff; /* Sayfa arka planı */
}

/* Anket Kapsayıcı */
.anket-container {
background-color: var(--arka-fon-rengi, #ffffff); /* Eğer sitenizde ana bir arkaplan rengi değişkeni varsa onu kullanın */
border: 1px solid var(--ikincil-renk);
border-radius: var(--border-radius-genel);
padding: 20px;
margin: 30px auto; /* Sitenizin genel düzenine göre ayarlayın */
max-width: 600px; /* Sitenizin içerik genişliğine göre ayarlayın */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif bir gölge */
}

/* Anket Sorusu */
.anket-sorusu {
font-size: 1.5rem; /* Sitenizin H3 veya benzeri başlık boyutuna göre */
color: var(--ana-renk); /* Sitenizin ana başlık rengine göre */
margin-bottom: 20px;
text-align: center;
}

/* Anket Seçenekleri */
.anket-secenek {
margin-bottom: 10px;
display: flex;
align-items: center;
}

.radio-input {
margin-right: 10px;
/* Mevcut radyo butonu stillerinizi buraya yansıtın */
}

.radio-label {
cursor: pointer;
font-size: 1rem; /* Metin boyutuna göre */
color: var(--metin-renk);
}

.radio-label:hover {
color: var(--ana-renk); /* Hover rengini sitenizin etkileşim rengine göre */
}

/* Anket Gönder Butonu */
.anket-gonder-btn {
display: block;
width: 100%;
padding: 10px 15px;
background-color: var(--ana-renk); /* Sitenizin birincil buton rengine göre */
color: #ffffff;
border: none;
border-radius: var(--border-radius-genel);
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
}

.anket-gonder-btn:hover {
background-color: darken(var(--ana-renk), 10%); /* Sitenizin buton hover rengine göre */
}

/* Anket Sonuçları */
.anket-sonuclar {
margin-top: 30px;
border-top: 1px solid #eee;
padding-top: 20px;
}

.anket-sonuclar h4 {
font-size: 1.3rem;
color: var(--ana-renk);
text-align: center;
margin-bottom: 15px;
}

.anket-sonuc-list {
list-style: none;
padding: 0;
margin: 0;
}

.sonuc-item {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap; /* Küçük ekranlar için kaydırma */
align-items: center;
justify-content: space-between;
font-size: 0.95rem;
}

.secenek-adi {
flex-basis: 30%; /* Oranı sitenizin tasarımına göre ayarlayın */
font-weight: bold;
}

.oy-sayisi {
flex-basis: 20%;
text-align: center;
}

.yuzde-oran {
flex-basis: 15%;
text-align: right;
color: var(--ikincil-renk);
}

.progress-bar-bg {
flex-basis: 100%; /* Yeni satıra geçmesini sağlar */
height: 10px;
background-color: #e9ecef;
border-radius: var(--border-radius-genel);
overflow: hidden;
margin-top: 5px;
}

.progress-bar-fill {
height: 100%;
background-color: var(--ana-renk);
border-radius: var(--border-radius-genel);
transition: width 0.5s ease-in-out;
}

/* Responsiveness için basit bir medya sorgusu */
@media (max-width: 768px) {
.anket-container {
margin: 20px 15px;
padding: 15px;
}
.sonuc-item {
flex-direction: column;
align-items: flex-start;
}
.secenek-adi, .oy-sayisi, .yuzde-oran, .progress-bar-bg {
flex-basis: 100%;
text-align: left;
}
.oy-sayisi, .yuzde-oran {
margin-left: 0;
}
}
```

İpuçları:
* CSS Değişkenleri (Custom Properties): Siteniz CSS değişkenleri kullanıyorsa (yukarıdaki örnekte gösterildiği gibi `--ana-renk`, `--font-family-ana` vb.), anketinizin stillerini bu değişkenlere göre ayarlamak en iyi yaklaşımdır. Bu, gelecekte tema değişikliklerinde anketinizin de otomatik olarak güncellenmesini sağlar.
* Mevcut Sınıfları Kullanın: Sitenizin genel CSS'inde `.btn`, `.card`, `.form-control` gibi genel amaçlı sınıflar varsa, anket öğelerinizde bu sınıfları kullanarak otomatik olarak sitenizin stilini almasını sağlayabilirsiniz. Örneğin, anket gönder butonu için `class="btn anket-gonder-btn"` gibi.
* Responsive Tasarım: Anketinizin mobil cihazlarda da düzgün görünmesini sağlamak için `@media` sorguları kullanın. Flexbox veya Grid gibi modern CSS özelliklerini kullanarak içeriğin farklı ekran boyutlarına uyum sağlamasına yardımcı olun.

Bu adım, anketinizin yalnızca çalışmasını değil, aynı zamanda sitenizin organik bir parçası gibi görünmesini de sağlayarak sitenizin genel kalitesine büyük katkıda bulunur.

4. Gelişmiş Özellikler ve En İyi Uygulamalar

>

* Erişilebilirlik (Accessibility): `label` etiketlerini `for` nitelikleriyle `input` etiketlerine bağlamak, klavye navigasyonu ve ekran okuyucu kullanıcıları için hayati önem taşır. ARIA etiketlerini (`aria-labelledby`, `aria-describedby` gibi) kullanarak daha karmaşık anketlerde erişilebilirlik seviyesini artırabilirsiniz.
* Doğrulama: Kullanıcı "Oy Ver" butonuna tıkladığında hiçbir seçenek seçilmemişse uyarı (`alert`) göstermek basit ama etkili bir doğrulama yöntemidir. Daha karmaşık senaryolarda özel doğrulama mesajları kullanabilirsiniz.
* Veri Saklama Alternatifleri: Bu örnekte `localStorage` kullandık. Daha karmaşık anketler için ve sunucu tarafında veri analizi gerektiren durumlarda, oyları bir veritabanına kaydetmek için bir API çağrısı yapmanız gerekir (örneğin, bir Node.js veya PHP backend'i kullanarak). Bu durumda `fetch` veya `XMLHttpRequest` API'leri kullanılabilir.
* Performans: Çok sayıda anket veya dinamik içerik eklerken sitenizin performansını göz önünde bulundurun. Aşırı DOM manipülasyonundan kaçının ve gereksiz render işlemlerini en aza indirin. Bu konuda daha fazla bilgi için "[Web Sitesi Performansını Artırma İpuçları](https://example.com/web-sitesi-performansi-makale-linki)" gibi bir makaleye göz atabilirsiniz. (Bu da bir örnek linktir.)

Sonuç

>

Mevcut web sitenizin CSS'ine uyumlu basit bir JavaScript anketi oluşturmak, teknik bilgi birikimi ve tasarım estetiği arasında bir denge kurmayı gerektirir. Yukarıdaki adımları takip ederek, yalnızca işlevsel değil, aynı zamanda sitenizin görsel kimliğine kusursuz bir şekilde entegre olan bir anket oluşturabilirsiniz. Bu yaklaşım, sitenizin genel kalitesini artırır, kullanıcı deneyimini iyileştirir ve Google AdSense gibi reklam platformları nezdinde "düşük değerli içerik" riskini ortadan kaldırır. Unutmayın, iyi tasarlanmış ve iyi entegre edilmiş her özellik, sitenizin profesyonelliğine ve değerine katkıda bulunur.