WTK204U Web Yayinciliği Araçlari Ünite -4

Giriş

Açık kaynak kodlu masaüstü web yayıncılık araçları, geliştiricilere ve tasarımcılara esnek bir ortam sunarak hem maliyetsiz hem de topluluk destekli çözümler elde etmelerine yardımcı olur. Bu araçlar genellikle platform bağımsız veya çoklu işletim sistemi desteğine sahiptir ve kullanıcıların web sitesi tasarımı, düzenlemesi ve hatta animasyon hazırlığı yapmasına olanak tanır.

Google Web Designer

Google Web Designer, HTML5 tabanlı etkileşimli içerikler ve animasyonlar oluşturmak için tasarlanmış, kullanıcı dostu bir araçtır. Kod yazma ve görsel düzenleme modları bir arada sunularak, hem deneyimli hem de yeni başlayan tasarımcıların kolayca adaptasyon sağlaması hedeflenir. Etkinlik ekleme, animasyon zaman çizelgesi (timeline) yönetimi ve Google ekosistemiyle uyumluluk bu yazılımın dikkat çekici özelliklerindendir.

Eclipse ve NetBeans

Eclipse ve NetBeans, başlangıçta Java IDE (Entegre Geliştirme Ortamı) olarak bilinse de çok farklı dilleri ve web teknolojilerini destekleyecek şekilde genişletilebilir bir mimariye sahiptir. Eklentiler sayesinde HTML, CSS ve JavaScript düzenleme imkanı tanırlar, hatta bazı paketleriyle PHP, Python ve benzeri dillerde de gelişmiş kod renklendirme ve otomatik tamamlama özellikleri sunarlar. Bu sayede web uygulamalarının arka planı (back-end) ve ön yüzü (front-end) Eclipse veya NetBeans üzerinde rahatlıkla geliştirilebilir.

Komodo Edit ve Aptana

Komodo Edit, açık kaynak komut dosyası (script) dilleri ve web dilleri için hafif ama güçlü bir editördür. Python, PHP, JavaScript, Ruby gibi yaygın dillere destek vermekle birlikte HTML ve CSS projelerinde kod renklendirme, otomatik tamamlama ve hata vurgulama gibi özelliklerle iş süreçlerini hızlandırır. Aptana ise özellikle web uygulama geliştirmeye odaklanan bir IDE olarak dikkat çeker. HTML, CSS, JavaScript ve node.js projeleri için zengin bir araç seti sunar.

Notepad ve Notepad++

Microsoft Windows ile öntanımlı gelen Notepad, çok temel bir metin düzenleme aracıdır ve ne yazık ki kod renklendirme, otomatik tamamlama gibi gelişmiş özelliklere sahip değildir. Buna karşın Notepad++, açık kaynak kodludur ve zengin eklenti desteği sayesinde HTML, CSS, JavaScript ve diğer web dillerinde çalışmak isteyenler için verimli bir ortam yaratır. Kod satırı işaretleme, çoklu belge sekmeleri ve renkli sözdizimi vurgulama bu aracın öne çıkan nitelikleridir.

Neden Açık Kaynak Tercih Edilmeli?

Açık kaynak kodlu yazılımların en büyük avantajı, geniş bir topluluk tarafından sürekli güncellenmesi ve hataların hızlı şekilde giderilmesidir. Kaynak kodu görünür olduğu için kullanıcılar yazılıma katkıda bulunabilir veya ihtiyaçlarına göre uyarlamalar yapabilir. Ayrıca lisans ücreti olmadığı için bütçe dostu bir seçenektir.

Sonuç

Açık kaynak kodlu masaüstü web yayıncılık araçları, web tasarım ve geliştirme süreçlerinde hem esneklik hem de ekonomik avantaj sağlar. Google Web Designer, Eclipse, NetBeans, Komodo Edit ve Aptana gibi araçlar sayesinde hem statik HTML sayfalar hem de dinamik, etkileşimli web projeleri oluşturmak mümkündür. Her bir aracın kendine özgü arayüzü ve özellikleri bulunmaktadır ve kullanıcılar ihtiyaçlarına en uygun IDE veya editörü seçerek verimliliklerini artırabilir.

1. Aşağıdaki hangi tür dosya Google Web Designer ile oluşturulmaz?

A. HTML
B. CSS
C. PHP
D. XML
E. JavaScript

Cevap : C) PHP

Açıklama : Google Web Designer, HTML, CSS, JavaScript tabanlı tasarımlar (örneğin animasyonlu bannerlar, etkileşimli öğeler) oluşturabilir ve XML formatını da destekleyebilir. Ancak dinamik sunucu taraflı bir dil olan PHP dosyalarını doğrudan oluşturmaya yönelik bir araca sahip değildir. Bu nedenle doğru cevap PHP’dir.

Yanıtınız yanlış ise “Yeni Belge Oluşturma” konusunu yeniden gözden geçiriniz.

2. Google Web Designer ile sahneye video eklemek için araçlar çubuğundaki araçlardan hangisi kullanılmalıdır?

A. Etiket
B. Video
C. Görüntü
D. Şekil
E. Resim

Cevap : A) Etiket

Açıklama : Google Web Designer içindeki temel “Etiket” (Tag) aracıyla HTML etiketi yerleştirilebilir. Video eklemek için de ilgili <video> etiketi veya bir HTML etiketi mantığıyla düzenlenmesi gerekir. “Video” veya “Resim” isimli ayrı araç olsa da GWD mantığında sahneye eklenen nesneler çoğunlukla “Etiket” aracı ile yerleştirilir.

Yanıtınız yanlış ise “Bileşenler” konusunu yeniden gözden geçiriniz.

3. Google Web Designer ile sahneye resim eklemek için aşağıdaki araçlardan hangisi kullanılmalıdır?

A. Etiket
B. Video
C. Görüntü
D. IMG
E. Resim

Cevap : A) Etiket

Açıklama : Benzer şekilde, bir resmi sahneye eklerken de Google Web Designer’daki “Etiket” aracı kullanılabilir ve bu sayede HTML dokümanı içerisine <img> etiketi gömülür. Arayüzde “Görüntü” veya “Resim” adında bazı araçlar yanıltıcı görünse de resmi eklemek için aslında yine temel “Etiket” nesnesi kullanılır.

Yanıtınız yanlış ise “Etkinlik Ekleme” konusunu yeniden gözden geçiriniz.

4. Google Web Designer ile sahnede yeni bir grup oluşturmak için aşağıdaki araçlardan hangisi kullanılmalıdır?

A. Tuval
B. Etiket
C. Görüntü
D. 3D
E. Seçim

Cevap : B) Etiket

Açıklama : Birden fazla öğeyi aynı çatı altında toplamak için grup oluşturma işlemi, yine “Etiket” aracı üzerinden bir <div> veya benzeri HTML etiketi eklenerek yapılır. Böylece farklı öğeler tek bir gruba dâhil edilebilir.

Yanıtınız yanlış ise “Renk Paneli” konusunu yeniden gözden geçiriniz.

5. Google Web Designer’da çok renkli bir öğe için renklerin öğenin ortasında bulunan bir noktasından başlayarak etrafa doğru gidildiğinde farklı renklerin olmasını sağlamak için aşağıdaki renk seçeneklerinden hangisi kullanılmalıdır?

A. Çizgisel renk geçişi
B. Kartelalar
C. Transparan renk geçişi
D. Animasyon renk geçişi
E. Dairesel renk geçişi

Cevap : E) Dairesel renk geçişi

Açıklama : Dairesel (radyal) renk geçişi, merkezin etrafında farklı tonların geçişli olarak yayılmasını sağlar. Bu tür bir görünüm “radial-gradient” mantığıyla oluşturulur ve öğenin ortasından dışarıya doğru renkler değişir.

Yanıtınız yanlış ise “Eclipse” konusunu yeniden gözden geçiriniz.

6. Google Web Designer ile animasyon oluştururken iki kare arasındaki animasyonun hızının önce yavaş sonra normal olması istendiğinde aşağıdakilerden hangisi seçilmelidir?

A. linear
B. ease
C. ease-out
D. ease-in
E. ease-in-out

Cevap : D) ease-in

Açıklama : “ease-in” animasyon başlangıcında yavaş, ardından normal veya daha hızlı hareketle devam edecek şekilde bir geçiş sağlar. “linear”, animasyon boyunca sabit hız kullanır; “ease-out”, bitişte yavaşlatır; “ease-in-out” başında ve sonunda yavaşlatabilir. Burada istenen “başlangıçta yavaş” ifadesine en uygun olan “ease-in” seçeneğidir.

Yanıtınız yanlış ise “Etiket Ekleme” konusunu yeniden gözden geçiriniz.

7. Google Web Designer ile galeride basılı sürükleme yapıldığında 3 boyutlu bir animasyon ile resimler arasında bir değişim olması istendiğinde aşağıdaki bileşenlerden hangisi kullanılmalıdır?

A. 360° Galeri
B. Kaydırılabilir Galeri
C. Galeride Gezinme
D. Hareket
E. Atlı Karınca Galeri

Cevap : E) Atlı Karınca Galeri

Açıklama : Google Web Designer’daki “Atlı Karınca (Carousel) Galeri” bileşeni, 3D efekti ile resimleri kaydırma veya sürükleme yöntemiyle döndürme gibi etkileşimler sunar. Bu sayede resimler arası geçiş bir atlı karınca mantığında 3D animasyonla gerçekleşir.

Yanıtınız yanlış ise “Etiket Ekleme” konusunu yeniden gözden geçiriniz.

8. Aşağıdakilerden hangisi bir fare etkinliği değildir?

A. Touch
B. Click
C. MouseOver
D. MouseOut
E. MouseDown

Cevap : A) Touch

Açıklama : “Touch” (dokunma) bir mobil veya dokunmatik ekran etkileşimidir. Fare (mouse) olayları ise Click, MouseOver, MouseOut, MouseDown gibi isimlerle tanımlanır. Dolayısıyla “Touch” bir fare etkinliği değildir.

Yanıtınız yanlış ise “Etiket Ekleme” konusunu yeniden gözden geçiriniz.

9. Eclipse ile geliştirilen web sayfasının yerel sunucu üzerinden önizlemesinin yapılabilmesi için Target runtime bölümünden aşağıdakilerden hangisi seçilmelidir?

A. HTTP Preview
B. HTTP Server
C. New Static Web
D. Localhost
E. Apache

Cevap : A) HTTP Preview

Açıklama : Eclipse’te bir web projesini yerel sunucu veya gömülü önizleme ile çalıştırmak için “HTTP Preview” özelliği kullanılabilir. Böylece proje, dahili bir web önizleme servisi ile tarayıcıda açılır. “HTTP Server”, “Apache” veya “Localhost” gibi ek seçenekler manuel yapılandırmayı gerektirebilir.

Yanıtınız yanlış ise “Eclipse” konusunu yeniden gözden geçiriniz.

10. Aşağıdakilerden hangisi kodları renklendirme ve kod tamamlama özelliği olan kodlama editörlerinden biri değildir?

A. Netbeans
B. Eclipse
C. Notepad
D. Komodo Edit
E. Aptana

Cevap : C) Notepad

Açıklama : Notepad, Windows işletim sistemiyle öntanımlı olarak gelen temel bir metin düzenleyicidir ve kod renklendirme veya otomatik tamamlama gibi gelişmiş özelliklere sahip değildir. NetBeans, Eclipse, Komodo Edit ve Aptana ise IDE veya gelişmiş metin editörleri olarak bu yeteneklere sahiptir.

Yanıtınız yanlış ise “Eclipse” konusunu yeniden gözden geçiriniz.