Web 2.0 Araçları ile Web Tasarımı Uygulamaları 2024-2025 Final Soruları

Giriş: Web’in Evrimi ve Kullanıcı Deneyimi

İnternet dünyası, sadece “HTML ve HTTP” teknolojileriyle başlayan Web 1.0 döneminden, günümüzün etkileşimli Web 2.0 dünyasına doğru evrilmiştir. Bu yeni dönemde, “hem içerik tüketen hem de üreten” kullanıcıları tanımlayan “prosumer” kavramı ortaya çıkmıştır. Web tasarımında amaç, web sitelerinin farklı cihazlarda (mobil, masaüstü vb.) sorunsuz çalışmasını sağlayan “duyarlı (responsive) tasarım” gibi tekniklerle kullanıcı deneyimini (UX) en üst düzeye çıkarmaktır. Yapay zeka (AI) da bu sürece, veri analizi ve makine öğrenimine dayalı olarak “kullanıcı deneyimlerini kişiselleştirerek” katkı sağlar.

Web Tasarım Süreci ve Planlama

Başarılı bir web sitesi tasarımı, sistematik bir süreci gerektirir:

1. Amaç ve Hedef Kitle: Sürecin “ilk ve en kritik” aşaması, “amaç belirleme ve hedef kitleyi tanımlama”dır.
2. Rakip Analizi: Aynı sektördeki diğer işletmelerin web sitelerinin kapsamlı bir incelemesinin yapıldığı aşamadır.
3. Wireframe ve Mockup: Sitenin iskeletini oluşturan Wireframe tasarımından sonra, renk ve görsellerin eklendiği “Mockup tasarımı” aşaması gelir.

Web Tasarım Araçları ve Platformlar

Günümüzde kod bilgisi gerektirmeyen araçlar ve platformlar yaygındır:

• İçerik Yönetim Sistemleri (CMS): Web sitesi “içeriklerini yönetmek” için kullanılır. Bu sistemlerin kullanıcı deneyimini geliştiren önemli özelliklerinden biri “entegre SEO araçları”dır.
• WordPress: En popüler CMS’lerden biridir. İçerik eklemeyi sağlayan temel bileşeni “Bloklar”dır.
• Weebly: Sürükle-bırak yöntemiyle site oluşturmayı sağlar. “Uygulama Merkezi (App Center)” ile siteye yeni işlevler eklenebilir. “Video arka planları” kullanmak, ziyaretçilere dinamik bir deneyim sunar.

Tasarım ve Görselleştirme

Görsel tasarım, web sitesinin başarısı için kritiktir. Figma gibi tasarım programlarında nesnelerin önde/arkada olma sırasını (derinliği) “Z ekseni” belirler. “Hand Tool” (El Aracı), nesneleri seçmeden “dosyada gezinmeyi” sağlarken, “Component” (Bileşen) kullanmak tasarımda “tutarlılığı artırır ve süreci hızlandırır”.

Renk ve Grafik Formatları: Web tasarımında en sık kullanılan renk modeli “RGB”dir (Kırmızı, Yeşil, Mavi). Vektör tabanlı grafikler için ise kalite kaybı olmadan ölçeklenebilen “SVG” formatı tercih edilir. Veri görselleştirmede, bir bütünün parçalarının oranlarını göstermek için “pasta grafiği” kullanılırken, büyük veri yığınlarının analizinde genel olarak “görselleştirme” yöntemi kullanılır.

1. Figma’da bir nesneyi diğer nesnelerden daha önde göstermek için aşağıdaki hangi eksen kullanılır?

A) X ekseni
B) W ekseni
C) Y ekseni
D) Tekseni
E) Z ekseni

Cevap : E) Z ekseni

Açıklama : Tasarım programlarında nesnelerin üst üste binme sırasını, yani **derinliğini** (öncelik sırasını) belirlemek için **Z ekseni** kullanılır.

2. Weebly’de video arka planları kullanmanın en büyük avantajı aşağıdakilerden hangisidir?

A) Mobil uyumluluğu sağlar.
B) Ziyaretçilere dinamik ve görsel açıdan zengin bir deneyim sunar.
C) İçeriklerin daha hızlı görüntülenmesini sağlar.
D) Sitenin yükleme hızını artırır.
E) Web sitesini arama motorlarında üst sıralara taşır.

Cevap : B) Ziyaretçilere dinamik ve görsel açıdan zengin bir deneyim sunar.

Açıklama : Video arka planları, statik görsellere göre sitenin daha canlı, modern ve etkileyici görünmesini sağlayarak ziyaretçilere **dinamik ve görsel açıdan zengin bir deneyim** sunar.

3. Aşağıdakilerden hangisi pasta grafiğinin veri görselleştirmedeki temel işlevlerinden biridir?

A) Farklı veri kümelerini yan yana karşılaştırmak
B) Bir bütün içerisindeki parçaların oranlarını görsel olarak temsil etmek
C) Verileri sıralı kategorilere göre düzenlemek
D) Verileri coğrafi konuma göre haritalandırmak
E) Zaman içindeki değişiklikleri göstermek

Cevap : B) Bir bütün içerisindeki parçaların oranlarını görsel olarak temsil etmek

Açıklama : **Pasta grafiği** (Pie chart), bir veri bütününün, onu oluşturan parçalara (kategorilere) göre nasıl **oranlandığını** görsel olarak temsil etmek için kullanılır.

4. Weebly’de Uygulama Merkezi (App Center) kullanım amacı aşağıdakilerden hangisidir?

A) Sunucu yapılandırmalarını düzenlemek için
B) Mobil uyumluluğu otomatik hale getirmek için
C) Sitenin tema seçimini kolaylaştırmak için
D) Web sitesine yeni işlevler ve özellikler eklemek için
E) Site performansını otomatik olarak artırmak için

Cevap : D) Web sitesine yeni işlevler ve özellikler eklemek için

Açıklama : **Uygulama Merkezi (App Center)**, Weebly kullanıcılarının sitelerine haritalar, rezervasyon formları, e-ticaret özellikleri gibi **yeni işlevler ve özellikler** eklemesini sağlayan mağazadır.

5. Aşağıdakilerden hangisi, Web 2.0 ile birlikte ortaya çıkan “prosumer” kavramını en iyi tanımlamaktadır?

A) Web 2.0 araçlarını sadece profesyonel amaçlarla kullanan kullanıcılar
B) Hem içerik tüketen hem de üreten kullanıcılar
C) İçerik üretimi yerine tüketici davranışlarını analiz eden kullanıcılar
D) İnternet üzerinden ürün ve hizmet satın alan kullanıcılar
E) Sadece içerik tüketicisi olan kullanıcılar

Cevap : B) Hem içerik tüketen hem de üreten kullanıcılar

Açıklama : **Prosumer** (Producer + Consumer), Web 2.0’ın çift yönlü doğası gereği, pasif **tüketici** olmaktan çıkıp aktif olarak **içerik üreten** kullanıcıları tanımlar.

6. Web tasarımında en sık kullanılan renk modeli aşağıdakilerden hangisidir?

A) GNU
B) TMP
C) Grayscale
D) RGB
E) CMYK

Cevap : D) RGB

Açıklama : Web tasarımında ve dijital ekranlarda renklerin oluşturulması için temel olarak **Kırmızı, Yeşil ve Mavi** (Red, Green, Blue) bileşenlerinden oluşan **RGB** renk modeli kullanılır.

7. Aşağıdakilerden hangisi yaygın olarak kullanılan vektör tabanlı grafik formatlarından biridir?

A) PNG
B) BMP
C) SVG
D) GIF
E) JPEG

Cevap : C) SVG

Açıklama : **SVG** (Scalable Vector Graphics), çözünürlükten bağımsız olarak kalite kaybı olmadan ölçeklenebilen, **vektör tabanlı** bir grafik formatıdır. PNG, BMP, GIF ve JPEG ise piksel tabanlı (raster) formatlardır.

8. Bir web sitesi tasarım sürecinin ilk ve en kritik aşaması aşağıdakilerden hangisidir?

A) Web sitesini yayınlama
B) İçerik ekleme
C) Amaç belirleme ve hedef kitleyi tanımlama
D) Wireframe tasarımı
E) Site haritası oluşturma

Cevap : C) Amaç belirleme ve hedef kitleyi tanımlama

Açıklama : Web sitesi tasarım sürecinde, tüm kararlara (içerik, tasarım, işlev) yön verecek olan ilk ve en kritik aşama **Amaç belirleme ve hedef kitleyi tanımlamadır**.

9. WordPress uygulamasında web sitenize içerik eklemenizi sağlayan temel bileşen aşağıdakilerden hangisidir?

A) Temalar
B) Görsel şablonlar
C) Kod blokları
D) Eklentiler
E) Bloklar

Cevap : E) Bloklar

Açıklama : WordPress’in modern düzenleyicisinde (Gutenberg), web sitesine metin, görsel, başlık gibi her türlü **içerik eklemeyi** sağlayan temel bileşenler **Bloklar**’dır.

10. Aşağıdaki yöntemlerden hangisi büyük veri yığımlarının analiz edilmesinde kullanılır?

A) Görselleştirme
B) Metin tabanlı raporlama
C) Not alma
D) Dosya paylaşımı
E) Sesli anlatım

Cevap : A) Görselleştirme

Açıklama : **Büyük veri** yığınlarının (Big Data) karmaşık yapılarının hızlı ve etkin bir şekilde anlaşılması, kalıpların ve trendlerin tespit edilmesi için **Görselleştirme** (Visualization) yöntemi kullanılır.

11. Aşağıdakilerden hangisi içerik yönetim sisteminin (CMS) kullanıcı deneyimini geliştiren özelliklerinden biridir?

A) Yüksek teknik bilgi gereksinimi
B) Entegre SEO araçları
C) İçeriğe sınırlı erişim
D) Karmaşık navigasyon
E) Pahalı abonelik ücretleri

Cevap : B) Entegre SEO araçları

Açıklama : İçerik Yönetim Sistemleri (CMS), içeriğin daha kolay bulunmasını sağlayarak **kullanıcı deneyimini geliştiren** entegre **SEO araçları** (arama motoru optimizasyonu) sunar.

12. Figma’da “Hand Tool” (El Aracı) kullanım amacı aşağıdakilerden hangisidir?

A) Nesneleri seçmeden dosyada gezinmeyi sağlar.
B) Nesneleri çoğaltır.
C) Tasarımda yer alan metinleri düzenler.
D) Katmanları siler.
E) Tasarım ekranının boyutunu küçültür.

Cevap : A) Nesneleri seçmeden dosyada gezinmeyi sağlar.

Açıklama : **Hand Tool** (El Aracı), tasarım dosyasında nesneleri sürükleyip bırakmadan, yalnızca farenin yardımıyla (pan/kaydırma yaparak) **gezinmeyi** ve görünümü hareket ettirmeyi sağlar.

13. Figma’da component (bileşen) kullanmanın avantajı aşağıdakilerden hangisidir?

A) Grafiklerin kalitesini yükseltmesi
B) Tasarımların dışa aktarımını kolaylaştırması
C) Daha fazla dosya depolama alanı sağlaması
D) Yalnızca mobil cihazlara yönelik tasarımlar oluşturması
E) Tasarım sürecini hızlandırması ve tutarlılığı artırması

Cevap : E) Tasarım sürecini hızlandırması ve tutarlılığı artırması

Açıklama : **Component** (Bileşen) kullanmak, tekrar eden öğelerin tek bir merkezden yönetilmesini sağlayarak, tasarımda **tutarlılığı artırır** ve tasarım sürecini önemli ölçüde **hızlandırır**.

14. Web sitesi tasarlama sürecinin aşağıdaki aşamalardan hangisinde aynı sektörde faaliyet gösteren diğer işletmelere ait web sitelerinin kapsamlı bir incelemesi yapılır?

A) Hedef belirleme
B) Test ve geri bildirim
C) Rakip analizi
D) İçerik planlama
E) Kullanıcı deneyimi ve arayüz tasarımı

Cevap : C) Rakip analizi

Açıklama : Web sitesi tasarlama sürecinde aynı sektördeki diğer işletmelerin web sitelerinin incelenmesi, sektördeki iyi uygulamaları ve eksiklikleri tespit etmeyi amaçlayan **Rakip analizi** aşamasıdır.

15. Weebly ile web sitesi oluştururken kullanılan temel yöntem aşağıdakilerden hangisidir?

A) Sürükle-bırak
B) Grafik tasarımı
C) Sunucu yapılandırma
D) Kod yazma
E) Veritabanı oluşturma

Cevap : A) Sürükle-bırak

Açıklama : Weebly gibi modern İçerik Yönetim Sistemleri (CMS) ve site kurucuları, teknik bilgi gerektirmeden kolay kullanım sağlamak için temel olarak **Sürükle-bırak** (Drag-and-drop) yöntemini kullanır.

16. Web 1.0 dönemi aşağıdaki hangi teknolojilerle başlamıştır?

A) HTML ve HTTP
B) Blokzincir ve Kripto Para
C) AJAX ve Zengin İnternet Uygulamaları
D) Sosyal Medya Platformları
E) Anlamsal Web ve Yapay Zeka

Cevap : A) HTML ve HTTP

Açıklama : İnternetin ilk dönemi olan **Web 1.0**, temel web sayfalarının oluşturulmasını sağlayan **HTML** (HyperText Markup Language) ve iletişim protokolü olan **HTTP** (Hypertext Transfer Protocol) teknolojileriyle başlamıştır.

17. Aşağıdakilerden hangisi web geliştirmede duyarlı (responsive) tasarımın temel amacıdır?

A) Web sitesinin etik ilkelere uygun olmasını sağlamak
B) Görsel olarak etkileyici grafikler oluşturmak
C) Web sitesinin farklı cihazlarda sorunsuz çalışmasını sağlamak
D) Web sitesindeki içeriğin doğruluğunu kontrol etmek
E) Sunucu bakımını yönetmek

Cevap : C) Web sitesinin farklı cihazlarda sorunsuz çalışmasını sağlamak

Açıklama : **Duyarlı (Responsive) tasarımın** temel amacı, web sitesinin ekran boyutu ne olursa olsun (telefon, tablet, masaüstü) **farklı cihazlarda sorunsuz çalışmasını** (görüntü, düzen ve işlevsellik) sağlamaktır.

18. Bir web sitesinin wireframe tasarımından sonra aşağıdaki hangi aşama gelir?

A) İçerik yönetim sistemi seçimi
B) Site haritası oluşturma
C) SEO stratejileri geliştirme
D) Web sitesini yayınlanma
E) Mockup tasarımı

Cevap : E) Mockup tasarımı

Açıklama : **Wireframe** (tel kafes) tasarımından (düşük çözünürlüklü yapı) sonra, siteye renk, font ve gerçek görsel öğelerin eklendiği, yüksek çözünürlüklü ön görünümü ifade eden **Mockup tasarımı** aşaması gelir.

19. Aşağıdakilerden hangisi web sitesi tasarımında İçerik Yönetim Sistemi (CMS) kullanma amaçlarından biridir?

A) Bilgisayar oyunları oynamak
B) Elektronik tablo oluşturmak
C) Grafik tasarımı yapmak
D) Web sitesi içeriklerini yönetmek
E) İnfografik hazırlamak

Cevap : D) Web sitesi içeriklerini yönetmek

Açıklama : İçerik Yönetim Sistemi (**CMS** – Content Management System), adı üstünde, teknik bilgiye ihtiyaç duymadan bir web sitesinin **içeriklerini yönetmek** (eklemek, düzenlemek, silmek) amacıyla kullanılır.

20. Yapay zeka (AI) web tasarımına katkı bulunma şekli aşağıdakilerden hangisidir?

A) Web sitesi içeriğini yöneterek
B) Web sitesi trafiğini artırarak
C) Web sitesi güvenliğini artırarak
D) Veri analizi ve makine öğrenimine dayalı kullanıcı deneyimlerini kişiselleştirerek
E) Sunucu maliyetlerini düşürerek

Cevap : D) Veri analizi ve makine öğrenimine dayalı kullanıcı deneyimlerini kişiselleştirerek

Açıklama : **Yapay zeka (AI)**, web tasarımında veri analizi ve **makine öğrenimi** kullanarak, her bir kullanıcının davranışına ve tercihlerine göre web sitesi deneyimini **kişiselleştirerek** katkı sağlar.