Web 2.0 Araçları ile Web Tasarımı Uygulamaları 2024-2025 Bütünleme Soruları

Web 2.0 Devrimi ve İçerik Yönetimi

İnternet dünyasında Web 1.0 sadece tüketim odaklı bir “okunabilir web” iken, Web 2.0 ile birlikte “yazılabilir ve katılımcı web” dönemi başlamıştır. Bu dönemin en büyük katkısı, teknik bilgiye sahip olmayan son kullanıcıların bile içerik oluşturma süreçlerine dahil olabilmesidir. Bu katılımın merkezinde yer alan İçerik Yönetim Sistemleri (CMS), web sitesi oluşturma ve güncelleme süreçlerini basitleştirerek hızı artırmıştır. Örneğin, açık kaynak kodlu ve GPL (General Public License) lisansı ile sunulan WordPress, bu ekosistemin en güçlü temsilcisidir. Herhangi bir CMS projesine başlarken yapılması gereken ilk adım ise teknik detaylardan önce sitenin amacını belirlemek ve buna uygun bir içerik stratejisi kurgulamaktır.

Kullanıcı Deneyimi (UX) ve Arayüz Tasarımı (UI)

Modern web tasarımında kullanıcıyı merkeze alan yaklaşımlar öne çıkar. Bir sitenin “iskeleti” olarak adlandırılan Wireframe (Tel Çerçeve), estetik detaylardan önce sayfa düzenini ve bilgi hiyerarşisini belirler. Kullanıcı deneyimini zenginleştiren mikro etkileşimler, butona tıklandığında gerçekleşen küçük animasyonlarla kullanıcıya anında geri bildirim sağlar. Ayrıca, özellikle erişilebilirliği artırmak adına geliştirilen Sesli Kullanıcı Arayüzü (VUI), hızlı yanıt süreleriyle etkileşimi daha insani bir boyuta taşır. Web sitelerinde bilgiye hızlı ulaşımı sağlayan site içi arama kutuları ve ziyaretçinin ilgisini çeken “Reveal” (ortaya çıkarma) efektleri, etkileşim düzeyini artıran kritik bileşenlerdir.

Veri Görselleştirme ve Grafik Araçları

Büyük veri setlerini anlaşılır kılmak için kullanılan Infogram gibi araçlar, kodlama bilgisi gerektirmeden profesyonel infografikler ve grafikler üretilmesini sağlar. Veri görselleştirme süreçlerinde grafikler, haritalar ve ağ diyagramları kullanılırken; düz metin listeleri bir görselleştirme yöntemi kabul edilmez. Grafik tasarım tarafında ise Canva’nın yapay zeka destekli “Sihirli Düzenleme” (Magic Edit) gibi özellikleri, metin komutlarıyla görselleri manipüle etme imkanı sunar. Web ortamında performans için görsellerin sıkıştırma (compression) yoluyla optimize edilmesi ve şeffaf arka planlar için PNG formatının tercih edilmesi standart uygulamalardır.

Profesyonel Tasarım Ekosistemi: Figma

Tasarımcı ve yazılımcı iş birliğini zirveye taşıyan Figma, bulut tabanlı yapısıyla öne çıkar. Figma’daki Main Component (Ana Bileşen) yapısından türetilen Instance (Örnek) birimleri, tasarımda tutarlılığı ve güncellenebilirliği sağlar. Yazılımcıların tasarım öğelerini doğrudan koda (CSS, iOS, Android) dönüştürebilmesi için Geliştirici Modu (Dev Mode) kullanılır. Tasarımın tamamı yerine belirli bir bölümünü dışa aktarmak için ise Slice (Dilim) aracı tercih edilir.

Yeni Nesil Teknolojiler: API ve Paylaşım Ekonomisi

Web 2.0’ın teknik köprüleri olan API’ler (Uygulama Programlama Arayüzleri), farklı yazılımların birbirleriyle veri alışverişi yapmasını sağlayarak sistemleri entegre eder. Bu teknolojik altyapı, bireylerin kaynaklarını kazanç amacıyla paylaştığı Paylaşım Ekonomisi (Uber, Airbnb vb.) modelinin doğmasına zemin hazırlamıştır. Sektörel birleşmeler de bu süreçte hız kazanmıştır; örneğin Weebly’nin ödeme devi Square tarafından satın alınmasıyla, e-ticaret siteleri artık doğrudan Square Online altyapısına yönlendirilmektedir.

1. Aşağıdakilerden hangisi Infogram aracının özelliklerinden biri değildir?

A) Grafik ve infografikler üzerinde gelişmiş kodlama bilgisi gerektirir.
B) Ücretsiz üyelik seçeneği ile sınırlı sayıda proje ve grafik oluşturulabilir.
C) Google Drive ve Dropbox gibi dijital platformlarla entegre çalışabilir.
D) Kullanıcıların .csv dosyaları üzerinden veri içeri aktarmasına olanak tanır.
E) Kullanıcıların büyük veri setlerini sadeleştirip kolayca anlaşılır hale getirmesini sağlar.

Cevap : A) Grafik ve infografikler üzerinde gelişmiş kodlama bilgisi gerektirir.

Açıklama : Infogram, kullanıcı dostu bir veri görselleştirme aracıdır ve temel amacı, teknik bilgisi olmayan kullanıcıların bile profesyonel grafikler oluşturabilmesini sağlamaktır. Sürükle-bırak mantığıyla çalışır. Bu nedenle, kullanıcının gelişmiş kodlama bilgisine sahip olması gerekmez; aksine, kodlama bilmeden görselleştirme yapabilmek Infogram’ın varlık nedenidir. Diğer şıklar (entegrasyon, veri aktarımı, veri sadeleştirme) aracın sunduğu gerçek özelliklerdir.

2. Bir görselin dosya boyutunu küçültmek için aşağıdaki işlemlerden hangisi yapılır?

A) Renk düzenleme
B) Katman ekleme
C) Maskeleme
D) Sıkıştırma
E) Filtreleme

Cevap : D) Sıkıştırma

Açıklama : Dijital görsellerin web ortamında hızlı yüklenmesi için dosya boyutlarının optimize edilmesi gerekir. Bu işlem “Sıkıştırma” (Compression) ile yapılır. Sıkıştırma iki türlüdür: Kayıplı (Lossy – örn: JPG) ve Kayıpsız (Lossless – örn: PNG). Her iki yöntemde de amaç, görsel veriyi optimize ederek diskte kapladığı alanı (byte cinsinden) azaltmaktır. Renk düzenleme veya filtreleme görselin içeriğini değiştirir ancak boyutunu küçültme garantisi vermez (bazen artırabilir bile).

3. Web sitesi oluşturma sürecinde içerik stratejisi oluşturmanın amacı aşağıdakilerden hangisidir?

A) Görsel tasarımı geliştirmek
B) Hedef kitlenin ihtiyaçlarını karşılayacak içerikler oluşturmak
C) Web sitesinin amacını belirlemek
D) Sayfa yüklenme hızını artırmak
E) Web sitesinin teknik altyapısını kurmak

Cevap : B) Hedef kitlenin ihtiyaçlarını karşılayacak içerikler oluşturmak

Açıklama : İçerik Stratejisi (Content Strategy), sadece metin yazmak değil; “doğru içeriği, doğru zamanda, doğru kişiye” ulaştırmayı planlamaktır. Bu stratejinin temel amacı, sitenin hedef kitlesini analiz ederek onların sorunlarına çözüm üreten, ilgilerini çeken ve ihtiyaçlarını karşılayan materyallerin (metin, video, görsel) planlanması, üretilmesi ve yönetilmesidir.

4. Figma’nın Geliştirici Modu (Dev Mode) kullanım amacı aşağıdakilerden hangisidir?

A) Prototiplerin otomatik olarak dışa aktarılmasını sağlar.
B) Grafik ve veri analizine olanak tanır.
C) Tasarımların programcılar için kodlara dönüştürülmesine yardımcı olur.
D) Tüm dosyaların tek bir formatta kaydedilmesine imkan verir.
E) Tasarım araçlarının görünümünü değiştirir.

Cevap : C) Tasarımların programcılar için kodlara dönüştürülmesine yardımcı olur.

Açıklama : Figma, tasarımcılar ve yazılımcılar arasındaki boşluğu kapatmak için “Dev Mode”u geliştirmiştir. Bu mod sayesinde, bir tasarımcı arayüzü çizdikten sonra, yazılımcı bu moda geçerek tasarım öğelerinin CSS, iOS (Swift) veya Android (XML) kod karşılıklarını, ölçülerini, renk kodlarını (HEX/RGB) ve varlıklarını (assets) doğrudan alabilir. Tasarımı koda dökmeyi hızlandırır.

5. Aşağıdakilerden hangisi Web 2.0 araçlarının web tasarımına en büyük katkılarından biridir?

A) Sadece kodlama bilenlerin web sitesi kurabilmesi
B) Web sitelerinin sadece geliştiriciler tarafından yönetilmesi
C) Web sitesi hızının artırılması
D) Kullanıcıların içerik oluşturma sürecine katılımı
E) Görsel içeriklerin eklenmesi

Cevap : D) Kullanıcıların içerik oluşturma sürecine katılımı

Açıklama : Web 1.0 “Okunabilir Web” (sadece tüketim) iken, Web 2.0 “Yazılabilir Web” (katılımcı web) dönemidir. Web 2.0 araçlarının (bloglar, wikiler, sosyal medya, yorum sistemleri) en devrimci özelliği, interneti tek taraflı bir yayın aracı olmaktan çıkarıp, kullanıcıların da içerik ürettiği (User Generated Content), yorum yaptığı ve etkileşime girdiği dinamik bir platforma dönüştürmesidir.

6. Mikro etkileşimler web sitelerindeki kullanıcı deneyimini iyileştirme biçimi aşağıdakilerden hangisidir?

A) Web sitesi içeriğinin doğruluğunu artırarak
B) Kullanıcı etkileşimlerini zenginleştiren küçük ve etkili animasyonlar sunarak
C) 3D görsellerle içeriğin anlaşılmasını kolaylaştırarak
D) Web sitesinin mobil uyumluluğunu artırarak
E) Kullanıcıların siteye giriş hızını artırarak

Cevap : B) Kullanıcı etkileşimlerini zenginleştiren küçük ve etkili animasyonlar sunarak

Açıklama : Mikro etkileşimler (Micro-interactions); bir butona tıklandığında renginin değişmesi, bir form doldurulurken çıkan onay işareti veya “beğen” butonuna basınca çıkan kalp animasyonu gibi küçük, tekil görevli animasyonlardır. Bunların amacı, kullanıcıya yaptığı eylemin sonucunu anında geri bildirim (feedback) olarak vermek ve deneyimi daha canlı, tepkisel ve insani hale getirmektir.

7. Aşağıdakilerden hangisi Web 2.0 döneminde ivme kazanan “paylaşım ekonomisi” modeline en uygun örnektir?

A) Kişilerin bir sosyal medya platformunda içerik paylaşması
B) Bireylerin sahip oldukları kaynakları veya hizmetleri kazanç sağlamak amacıyla diğer insanlarla paylaşması
C) Bir firmanın dijital reklamcılık hizmeti sunması
D) Şirketlerin ar-ge süreçlerini tamamen otomatikleştirmesi
E) Bir şirketin ürünlerini e-ticaret sitesi üzerinden satması

Cevap : B) Bireylerin sahip oldukları kaynakları veya hizmetleri kazanç sağlamak amacıyla diğer insanlarla paylaşması

Açıklama : Paylaşım Ekonomisi (Sharing Economy); Uber, Airbnb gibi platformlarla özdeşleşen, Web 2.0’ın getirdiği eşler arası (P2P) iletişim sayesinde mümkün olan bir modeldir. Temel mantığı, bireylerin atıl durumdaki kaynaklarını (boş odasını, arabasını, zamanını/hizmetini) merkezi bir otorite olmadan, dijital platformlar aracılığıyla başkalarıyla paylaşıp bundan gelir elde etmesidir.

8. Figma’da “Instance” (Örnek) tanımı aşağıdakilerden hangisidir?

A) Yeni bir dosya açma işlemidir.
B) Ana bileşenden (component) türetilmiş ve tekrar kullanılabilir bir versiyondur.
C) Bir sayfanın (page) altına yerleştirilen (layer) katmandır.
D) Figma kullanıcıları arasında bir mesajlaşma yöntemidir.
E) Prototip oluştururken kullanılması gereken bir araçtır.

Cevap : B) Ana bileşenden (component) türetilmiş ve tekrar kullanılabilir bir versiyondur.

Açıklama : Figma’da tekrar eden öğeler (butonlar, ikonlar vb.) “Main Component” (Ana Bileşen) olarak tanımlanır. Bu ana bileşenden kopyalanarak tasarımın farklı yerlerinde kullanılan kopyalara ise “Instance” denir. Instance’ların özelliği, ana bileşende yapılan bir değişikliğin (örneğin rengin değişmesi) otomatik olarak tüm instance’lara yansımasıdır. Bu, tasarımda tutarlılık ve hız sağlar.

9. Canva’da kısa bir yazılı metin kullanarak görselinize ekleme yapmanıza, görsellerinizi değiştirmenize veya düzenlemenize olanak tanıyan düzenleme aracı aşağıdakilerden hangisidir?

A)
B)
C)
D)
E)

Cevap : A)

Açıklama : Canva’nın yapay zeka destekli aracı olan “Sihirli Düzenleme” (Magic Edit); kullanıcıların bir görsel üzerindeki belirli bir alanı seçip, yazılı bir komut (prompt) girerek (örneğin: “bu çiçeği kırmızı güle çevir”) o alanı değiştirmesine olanak tanır. Generative AI teknolojisini kullanarak metin tabanlı komutları görsel manipülasyona dönüştürür.

10. Modern web geliştirmede sesli kullanıcı arayüzü (VUI) tasarımının temel avantajı aşağıdakilerden hangisidir?

A) Kullanıcı etkileşimini, anlaşılabilir sesli komutlar ve hızlı yanıt süreleriyle geliştirir.
B) Web sitesinin güvenliğini arttırır.
C) Web sitesinin video içerikleriyle etkileşim düzeyini artırır.
D) Web sitesini görsel olarak daha estetik hale getirir.
E) Sunucu maliyetlerini düşürür.

Cevap : A) Kullanıcı etkileşimini, anlaşılabilir sesli komutlar ve hızlı yanıt süreleriyle geliştirir.

Açıklama : VUI (Voice User Interface); Siri, Alexa veya Google Asistan gibi sistemlerin web sitelerine entegrasyonunu ifade eder. Temel avantajı, özellikle eller serbest kullanım senaryolarında veya görme engelli kullanıcılar için erişilebilirliği artırmasıdır. Doğal dil işleme sayesinde kullanıcılar klavye/fare kullanmadan, hızlıca komut verip yanıt alabilir, bu da kullanıcı deneyimini (UX) hızlandırır ve geliştirir.

11. Wireframe tasarımının web sitesi tasarım sürecinde temsil ettiği şey aşağıdakilerden hangisidir?

A) Web sitesinin renk paleti
B) Web sitesinin SEO optimizasyonu
C) Web sitesinin temel yapısını ve sayfa düzeni
D) Web sitesinin yayın tarihi
E) Web sitesinin performans ölçümü

Cevap : C) Web sitesinin temel yapısını ve sayfa düzeni

Açıklama : Wireframe (Tel Çerçeve), bir web sitesinin veya uygulamanın “iskeletidir”. Renkler, görseller veya tipografik detaylar (estetik unsurlar) eklenmeden önce; hangi butonun nerede olacağını, içeriğin nasıl yerleşeceğini ve navigasyonun nasıl işleyeceğini gösteren düşük sadakatli (low-fidelity) bir taslaktır. Mimarlıktaki “kat planı” gibidir.

12. Weebly’de site içi arama özelliği kullanım amacı aşağıdakilerden hangisidir?

A) Tema değiştirmeyi kolaylaştırır.
B) Web sitesini hızlandırır.
C) Resim dosyalarını sıkıştırır.
D) Video ekleme sürecini kolaylaştırır.
E) Ziyaretçilerin içeriklere daha hızlı ulaşmasını sağlar.

Cevap : E) Ziyaretçilerin içeriklere daha hızlı ulaşmasını sağlar.

Açıklama : Site içi arama kutusu, özellikle içeriği bol olan (e-ticaret, blog, haber sitesi) platformlarda kritik bir UX (Kullanıcı Deneyimi) bileşenidir. Kullanıcının menüler arasında kaybolmadan, aradığı spesifik ürüne veya bilgiye doğrudan anahtar kelime yazarak ulaşmasını sağlar. Bu da sitede kalma süresini ve dönüşüm oranlarını artırır.

13. WordPress aşağıdaki lisanslardan hangisi altında sunulmaktadır?

A) Creative Commons
B) Apache
C) GPL
D) Proprietary
E) MIT

Cevap : C) GPL

Açıklama : WordPress, Açık Kaynaklı (Open Source) bir yazılımdır ve GPL (General Public License) lisansı ile dağıtılır. Bu lisans, kullanıcılara yazılımı kullanma, inceleme, değiştirme ve değiştirilmiş halini dağıtma özgürlüğü tanır. WordPress’in bu kadar yaygınlaşmasının ve devasa bir eklenti/tema ekosistemine sahip olmasının temelinde bu özgürlükçü lisans yapısı yatar.

14. E-ticaret özelliğine sahip site türü seçildiğinde Weebly sizi aşağıdaki platformlardan hangisine yönlendirmektedir?

A) Square Online
B) Wix
C) WordPress
D) Shopify
E) Google Sites

Cevap : A) Square Online

Açıklama : Weebly, 2018 yılında ödeme sistemleri devi Square tarafından satın alınmıştır. Bu entegrasyon sonucunda, Weebly üzerinde bir e-ticaret sitesi kurmak istediğinizde, altyapı ve ödeme işlemleri için otomatik olarak Square’in e-ticaret çözümü olan “Square Online” arayüzüne ve sistemine yönlendirilirsiniz.

15. Aşağıdakilerden hangisi veri görselleştirme yollarından biri değildir?

A) Grafikler ve çizelgeler
B) İnfografikler
C) Ağ diyagramı
D) 3 boyutlu modelleme
E) Metin listeleri

Cevap : E) Metin listeleri

Açıklama : Veri görselleştirme, karmaşık verilerin insan beyni tarafından daha hızlı algılanabilmesi için grafiksel öğelere (şekil, renk, boyut) dönüştürülmesidir. Grafikler, haritalar, diyagramlar ve infografikler veriyi “görselleştirir”. Ancak düz “Metin Listeleri” (Text Lists), verinin ham veya metin tabanlı sunumudur; bir “görselleştirme” tekniği olarak kabul edilmezler çünkü veriler arasındaki ilişkiyi görsel desenlerle değil, okuma yoluyla sunarlar.

16. Web tasarımında İçerik Yönetim Sistemi (CMS) kullanmanın birincil avantajı aşağıdakilerden hangisidir?

A) Tasarım öğelerini arttırır.
B) Kullanıcıların web sayfasını görüntüleyebilmesini sağlar.
C) Web sitesinin güncellenebilmesini sağlar.
D) Sayfalara metin ve görselin aynı anda eklenmesine izin verir.
E) Tasarım ve güncelleme sürecini basitleştirir.

Cevap : E) Tasarım ve güncelleme sürecini basitleştirir.

Açıklama : CMS (Content Management System – WordPress, Joomla gibi), teknik bilgisi (HTML/CSS/PHP) olmayan kullanıcıların bile web sitesi oluşturmasını, yönetmesini ve güncellemesini sağlayan yazılımlardır. Birincil avantajı, kodlama zorunluluğunu ortadan kaldırarak veya minimize ederek, bir yönetim paneli üzerinden içerik ekleme ve düzenleme sürecini basitleştirmesi ve hızlandırmasıdır.

17. Weebly’nin sunduğu “Reveal” efekti kullanım amacı aşağıdakilerden hangisidir?

A) SEO optimizasyonunu geliştirmek
B) Sayfa yüklenme hızını artırmak
C) Metinlerin boyutunu büyütmek
D) Video ve ses oynatıcıları eklemek
E) Ziyaretçilerin ilgisini çekmek

Cevap : E) Ziyaretçilerin ilgisini çekmek

Açıklama : Web tasarım araçlarında (Weebly vb.) sunulan “Reveal” (Ortaya Çıkarma) efektleri; genellikle fare ile üzerine gelindiğinde (hover) veya sayfa aşağı kaydırıldığında (scroll) bir öğenin animasyonla görünür hale gelmesidir. Bu tür görsel efektlerin teknik bir işlevden ziyade estetik bir amacı vardır: Sayfayı daha dinamik hale getirerek ziyaretçinin ilgisini çekmek ve etkileşimi artırmak.

18. Aşağıdakilerden hangisi Uygulama Programlama Arayüzleri’nin (API) temel işlevlerinden biridir?

A) Bilgisayar ağları arasında fiziksel bağlantı kurmak
B) Yalnızca yerel veritabanlarıyla çalışmak
C) Yazılım uygulamalarının kullanıcı arayüzlerini tasarlamak
D) Farklı yazılım uygulamalarının birbirleriyle etkileşim kurmasını ve veri alışverişi yapmasını sağlamak
E) Yazılımın donanım performansını optimize etmek

Cevap : D) Farklı yazılım uygulamalarının birbirleriyle etkileşim kurmasını ve veri alışverişi yapmasını sağlamak

Açıklama : API (Application Programming Interface), iki farklı yazılımın birbiriyle konuşmasını sağlayan bir köprüdür. Örneğin, bir e-ticaret sitesinde “Google ile Giriş Yap” butonuna bastığınızda, siteniz Google’ın API’si ile konuşarak kimlik doğrulama verilerini alır. API’nin temel işlevi, farklı sistemlerin entegre çalışmasını ve veri alışverişini sağlamaktır.

19. Figma’da ekranın belli bir bölümünü dışa aktarmak için kullanabileceğiniz araç aşağıdakilerden hangisidir?

A) Section (Bölüm)
B) Scale (Ölçeklendirme)
C) Shape (Şekil)
D) Slice (Dilim)
E) Frame (Çerçeve)

Cevap : D) Slice (Dilim)

Açıklama : Figma’da (ve Photoshop gibi diğer araçlarda) “Slice Tool” (Dilimleme Aracı); tasarımın tamamını değil, sadece kullanıcının belirlediği dikdörtgen bir alanı (dilimi) dışa aktarmak (export) için kullanılır. Bu araç, büyük bir tasarım içinden sadece bir ikonu, butonu veya banner alanını kesip kaydetmek için idealdir.

20. Bir içerik yönetim sistemi (CMS) kullanarak web sitesi oluştururken ilk aşamada yapılması gereken aşağıdakilerden hangisidir?

A) Eklenti yüklemek
B) Sayfa eklemek
C) Sitenin amacını belirlemek
D) Menü eklemek
E) Resim yüklemek

Cevap : C) Sitenin amacını belirlemek

Açıklama : Herhangi bir tasarım veya geliştirme projesinde (CMS olsun veya olmasın), teknik adımlara (sayfa, menü, eklenti) geçmeden önce atılması gereken en temel stratejik adım “Amaç Belirlemektir”. Sitenin kime hitap edeceği (hedef kitle), ne işe yarayacağı (blog mu, e-ticaret mi, portfolyo mu) ve hangi hedefleri gerçekleştireceği belirlenmeden, doğru tema, eklenti veya içerik yapısı seçilemez.