Sürükle Bırak Web Yayıncılığı Araçları

Google Web Designer (GWD), HTML5 teknolojilerini temel alan reklamlar, görseller, videolar ve diğer web içeriklerinin üretilmesine olanak veren bir kodlama ve tasarım aracıdır.

• Üretilen içerikler HTML5 teknolojilerini destekleyen tüm ortamlarda (bilgisayarlar, akıllı telefonlar, akıllı televizyonlar) oynatılabilmektedir.
• İçerikler Google firması tarafından sunulan Drive, Google Reklamlar, Display & Video 360 gibi servislere doğrudan entegre edilebilmektedir.
• Resim galerileri, haritalar, görsel efektler gibi web yayıncılığı iş akışlarında sıklıkla kullanılan bileşenler hazır olarak sunulmaktadır.

• Olay sistemi kullanılarak kullanıcıların eylemlerine (ör. telefonu döndürme, dokunma) tepki verebilen içerikler hazırlanabilmektedir.

• Zaman çizgisi sistemi ile sahneye eklenen nesnelerin canlandırılmasına olanak sağlanmaktadır.
• Videolar ve ses dosyaları için bütünleşik bir düzenleyici sunulmaktadır.
• Üretilen içeriklerin farklılaşan ekranlarda düzgün gösterilebilmesi için esnek tasarım (responsive design) ürünleri şeklinde dağıtılması için gerekli mekanizmalar.

Duyarlı Düzen seçeneği ile farklılaşan tarayıcı genişliklerine tepki verebilen tasarımlar üretilebilmektedir. Bu tasarım anlayışına Esnek Tasarım (Responsive Design) adı verilmektedir.

SVG – Scalable Vector Graphics biçimi noktalar ve bu noktalar arası çizgilerin/eğrilerin kapattığı alanlar
ile tanımlanan vektörel çizimlerdir. Bu çizimler matematiksel yollarla tanımlandığından hem çok küçük
dosya boyutlarına sahiptirler hem de sınırsız ölçeklenebilme potansiyelleri bulunmaktadır.

Tablo 4.1 ARAÇ ÇUBUĞU’nda yer alan araçlar ve işlevlerinin kısa açıklamaları'na göre Öğe aracı kullanılır. 

Tasarımlarda en çok kullanılan içeriklerden biri metinlerdir. Bu nedenle metinlerin düzenlenmesi için pek çok araç ve seçenek sunulmaktadır. GWD uygulamasında projelere metin eklemek için Metin aracı kullanılır. Metin aracının seçenekleri çubuğunda yapılabilecek temel düzenlemeler soldan sağa doğru eklenecek metnin HTML etiketi, yazı tipi, kalınlık ve yatıklığı, boyutu, rengi, hizalaması, girintisi, madde işaretleri ve bağlantılarını içerir. Eklenmiş olan metinlerin düzenlenmesi için bu çubuk değil, Metin paneli kullanılır.

Eklenmiş bir metin kutusu Özellikler paneli ve Metin paneli kullanılarak düzenlenebilir. Seçim aracı ile bir metin kutusuna tıklandığında Metin paneli bu kutunun özelliklerini yansıtacak şekilde güncellenir. Bu panelde kutunun etiketi (ör: h1, h3, p), yazı tipi, yazı stili, yazı boyutu, rengi, hizalaması, liste stili ve girintileri düzenlenebilmektedir. Metin panelinde yapılacak düzenlemelerin seçili metin kutusuna uygulanacağı unutulmamalıdır.

GWD resim, video ve ses gibi medya dosyalarını proje ile ilişkilendirmek ve düzenli bir şekilde tutmak için Kitaplık panelini sunmaktadır. Medya dosyaları kitaplık paneli üzerine sürüklenerek, proje alanına sürüklenerek ya da kitaplık paneli üzerindeki ekleme seçeneği kullanılarak projeye eklenebilir. Projede çok sayıda dosya kullanılması hâlinde bu dosyalar panel içinde oluşturulacak Klasörler altında organize edilebilir. Panel her bir dosyanın projeye ne zaman eklendiği ve projede kaç kez kullanıldığı bilgilerinin yanında, seçili dosyanın önizlemesini de sunmaktadır.

GWD, Google firmasının bir ürünü olduğundan video dosyaları ile ilgili Youtube entegrasyonu otomatik olarak sağlanmaktadır. Bu amaçla Bileşenler panelinde Medya alanındaki Youtube bileşeni kullanılır. İlk olarak bileşende gösterilmesi istenen videonun adresinin URL alanına girilmesi gerekmektedir. Bu amaçla videonun gösterildiği sayfanın internet adresi kullanılabilir. Bunun yanında, videonun altındaki Paylaş düğmesine tıklanarak gösterilen diyalog kutusundaki adres de kopyalanabilir.

Birden fazla resmin bir bileşen içinde gösterilmesi için Galeriler kullanılır. GWD, 360 derece galeri, Geçiş galerisi, Kaydırılabilir galeri ve Rulo galeri olmak üzere birçok galeri seçeneği sunmaktadır. İşlevleri aynı olmakla birlikte bu galerilerin temel farkı kullanıcı etkileşimi yöntemidir.

Özellikler alanındaki önemli seçeneklerden ilki Galeri içinde resimlerin nasıl gösterileceğinin belirlendiği Ölçeklemedir. Özellikle Galeri boyutu ve resimlerin boyutunun uyuşmaması durumlarında buradaki seçeneklerden en iyi sonucu verenin seçilmesi kullanıcı deneyimi açısından önemlidir.  

GWD, çizim araçları ile vektörel çizimler (SVG) oluşturabilir. Vektörel çizimler noktalar, noktalar arasındaki çizgiler ve kapalı alanlarda tanımlı dolgular tanımlanarak oluşturulur. Bu nedenle vektörel çizimlerin dosya boyutları piksel tabanlı görsellere göre (ör: PNG dosyaları) oldukça küçüktür. Bunun yanında vektörel çizimler matematiksel yollarla tanımlandıklarından ölçekleme işlemlerinde tekrar oluşturulabilirler. Bu sayede ölçekleme işlemlerinde kalite kaybı yaşanmaz.

Fırça ve dolgu renklerini oluşturmak için Renk paneli kullanılır. Bu panelde sol üst köşede oluşturulmak istenen rengin türü belirlenir. Ortasında kırmızı çizgi olan beyaz oval
seçildiğinde ilgili renk iptal edilmiş olur. Bu sayede fırça rengi ya da dolgu rengi olmayan bir çizim oluşturulabilir.

Olaylara etkileşim eklemek için Etkinlikler paneli kullanılır. Etkinlikler paneli bu eşleştirmeyi 5 adımda gerçekleştirir.
1. Hedef: Olayı tetikleyecek nesne seçilir (ör.
Düğme).
2. Etkinlik: Takip edilecek olay seçilir (ör. Fare
/ click).
3. İşlem: Olayın gerçekleşmesi hâlinde yürütülecek
işlem seçilir (ör. CSS kodu uygulama).
4. Alıcı: Belirlenen işlemin uygulanacağı nesne
seçilir (ör. Düğme).
5. Yapılandırma: Düğme üzerine uygulanacak
CSS kuralları belirtilir.

Adobe Express, grafik tasarımı konusunda pek çok bilinen uygulaması olan (ör. Photoshop, Illustrator) Adobe firması tarafından üretilen bir tasarım aracıdır. Bu araç ücretsiz ve ücretli olmak üzere iki planla kullanılabilmektedir (Adobe, t.y.). Ücretsiz plan kullanılabilir mekanizmaların büyük kısmını kapsamaktadır. Ücretli planda daha çok firma tarafından sunulan görseller, fontlar, daha fazla bulut depolama alanı gibi avantajlar bulunmaktadır. Adobe Express masaüstü bilgisayarlar, tabletler ve cep telefonlarını da kapsayan
çok geniş bir cihaz yelpazesi üzerinde çalışabilmektedir.

Adobe Express uygulaması kullanıcı verilerini bulut tabanlı bir sistemde tutar. Bu sayede kullanıcı herhangi bir ortamdan (ör. telefon, tablet, tarayıcı) uygulamaya giriş yaptığında tasarımlarına ulaşabilmektedir. Bu özellik uygulamaya bir kullanıcı hesabı ile girişi zorunlu kılmaktadır. Kullanıcılar uygulama üzerinde hesap üretebilecekleri gibi Google, Apple, Facebook gibi firmalar üzerinde oluşturdukları hesapları kullanarak da Adobe Express uygulamasına girebilmektedir.

Replace: Şekli başka bir şekille değiştirmek için kullanılır.

Nesne renginin altındaki renklerle etkileşimini belirlemek için kullanılır. Varsayılan değer normaldir. Normal modda iken nesne rengi opak görünür. Screen ve Multiply seçenekleri seçildiğinde nesne rengi altında kalan renklerle karıştırılarak sunulur.

1. Zaman kırpma
2. Ölçeklendirme
3. Videoları birleştirme
4. GIF biçimine çevirme
5. Alan kırpma
6. Oynatım hızı
değiştirme
7. MP4 biçimine
çevirme
8. Sondan başa çevirme

1. Ölçeklendirme
2. Artalanı kaldırma
3. JPG biçimine çevirme
4. PNG biçimine
çevirme
5. Kırpma
6. SVG biçimine
çevirme