WTK204U-WEB YAYINCILIĞI ARAÇLARI
Ünite 4: Sürükle Bırak Web Yayıncılığı Araçları
Giriş
Web yazarlığı çoğunlukla editörler kullanılarak gerçekleştirilir. Web yayıncılığının temelinde yatan HTML, CSS ve Javascript dilleri temelde internet tarayıcıları tarafından yorumlanan betikler (script) üretmek için kullanılır. Oldukça başarılı uygulamalar üretebilse de bu dilleri kullanılarak içerik geliştirmek önemli düzeyde kodlama becerisi gerektirir. Sürükle-Bırak web araçlarının amacı, tasarımcıları kodlama yükünden kurtararak olabilecek en basit görsel mekanizmalar yoluyla içerik üretimine olanak vermektir. Bu araçlar sağladıkları kütüphanelerdeki içeriklerin proje sahnesine sürüklenmesi ve düzenlenmesi esasına dayanarak çalışır.
Google Web Designer
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. Aracın tasarım görünümünde çizimler, şekiller, metinler ve üç boyutlu nesneler üretilerek bunlara canlandırma eklenebilmektedir. Kodlama görünümünde ise tasarım görünümünde üretilen içeriklere etkileşim eklenebilmektedir. Kodlama görünümü HTML, CSS, Javascript ve XML dilleri için otomatik kod tamamlama ve sözdizim renklendirmesi özellikleri desteklemektedir. Bunun yanında GWD aşağıdaki önemli yeteneklere sahiptir:
• Ü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.
Karşılama Ekranı ve Yeni Proje Üretme
Uygulama ilk açıldığında karşılama ekranı gösterilmektedir (Şekil 4.1). Bu ekranda sol tarafta yeni proje üretme seçenekleri sunulurken, sağ tarafta son kullanılan projeler gösterilmektedir. Yeni projeye boş bir sayfa ile başlamak için YENİ DOSYA OLUŞTUR, Google tarafından
sağlanmış tasarım şablonlarından biri ile başlamak için ŞABLON KULLAN seçeneği kullanılabilir.
Uygulama Arayüzü
GWD uygulaması projelerde tasarım ve kodlama amaçlarıyla iki farklı görünüm sunmaktadır. Şekil 4.5’te üretilen bir proje Tasarım Görünümünde görülmektedir. GWD tasarım görünümü tasarım alanındaki önemli projelerle (ör: Adobe Photoshop) benzer bir arayüz sunmaktadır.
Metin Ekleme ve Metin İşlemleri
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. Bu araç seçildiğinde araç seçenekleri (Şekil 4.8.) alanı güncellenir. Burada yapılacak ayarlar ile eklenmek üzere olan metin ile ilgili düzenlemeler yapılabilir.
Medya Ekleme
GWD resim, video ve ses gibi medya dosyalarını proje ile ilişkilendirmek ve düzenli bir şekilde tutmak için Kitaplık panelini (Şekil 4.12) 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.
Galeriler
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. Geçiş galerileri fare etkileşimi ve gezinme araçları ile kontrol edilirken, Kaydırılabilir galeriler özellikle dokunmatik ekranlardaki parmak hareketlerine (swipe) duyarlıdır. Bu çerçevede galeri seçiminde hedeflenen platformun (ör: masaüstü, cep telefonu) göz önünde tutulması önerilmektedir. Galeriler çoğunlukla benzer özellikleri paylaştıklarından bu bölümde yalnızca Geçiş galerilerinin özelliklerine değinilecektir. Projeye geçiş galerisi eklemek için Bileşenler panelindeki Galeriler alanından Geçiş Galerisi alınarak sürüklenebilir. Bu işlemin ardından galerinin sayfada istenen bölgeye yerleştirilmesi gerekecektir.
Çizim Ekleme ve Renklendirme
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.
Grafikler ve Efektler Ekleme
Bileşenler panelindeki Grafikler ve efektler alanında sayfalarda sıklıkla kullanılan özel bileşenler görülebilir. Bunlardan ilki sayfada üç boyutlu bir modelin gösterilmesini sağlayan 3D model görüntüleyicidir. 3D model görüntüleyici bileşeni dışında özellikle oyunlarda kullanılan karakterlerin koşması gibi animasyonları içeren Model sayfası bileşeni ve Tanecik efektleri bileşenleri işlevseldir. Tanecik efektler bileşeni ile sayfalara kullanıcı bilgisayarında anlık olarak üretilen basit animasyonlar (ör. duman, ateş, yağmur) eklenebilmektedir.
3D Model Görüntüleyici
3D model görüntüleyici bileşeni (Şekil 4.25) GLB uzantılı üç boyut nesnelerini gösterebilir ve temel özelliklerini düzenleyebilir. Bileşen sahneye eklendikten sonra konum ve boyut ayarlamaları yapılır. Bunun ardından Özellikler panelinde bileşende gösterilecek üç boyutlu model dosyası kaynak olarak belirtilir. Bir modelin gösterilmesi için bu işlemler yeterlidir. Önizleme yapıldığında modelin istenen açılarda döndürülebildiği ve fare tekerleği ile yakınlaşma uzaklaşma yapılabildiği görülecektir.
Etkinlik Ekleme
Etkinlikler, kullanıcı hareketleri (ör. dokunma, kaydırma), zaman çizgisinde anahtar bir kareye gelinmesi ya da HTML nesnelerindeki olaylara (ör. fare tıklaması, farenin nesnenin üzerine gelmesi) yönelik oluşturulan tepkilerdir. Örneğin, kullanıcının bir düğmeye ya da resme tıklaması hâlinde bir animasyonu oynatmak ya da gizli bir resmi göstermek için etkinlikler düzenlenebilir.
Duyarlı Düzenler
Duyarlı düzenler farklı görüntüleme alanı boyutları ve yönelimlerine göre kendini uyarlayabilen tasarımlar yapılabilmesini sağlar. Bu yolla, farklı ekran boyutları ya da en boy oranları için yeni tasarımlar yapılmasına gerek kalmaz. Kullanıcıların kullandığı cihazların ekranlarının boyutları, en boy oranları, yönelimleri, piksel yoğunluğu gibi özellikleri ciddi çeşitlilikler gösterebilmektedir.
Canlandırmalar
GWD CSS dilinde sunulan canlandırma seçeneklerini Zaman Çizelgesi yoluyla oluşturabilmenize yardımcı olur. Zaman Çizelgesi paneli Gelişmiş Mod (Şekil 4.36) ve Hızlı Mod (Şekil 4.37) olmak üzere iki modda sunulmaktadır. Gelişmiş Mod Adobe Animate gibi kare bazlı animasyon üretebilen uygulamalardaki zaman yönetim panellerine benzemektedir. Bu görünümde sahnede canlandırılabilecek her nesne bir katman olarak gösterilir. Her katman için sağ tarafa doğru uzanan küçük karelerden oluşan zaman çizgileri oluşturulur. Her bir nesneye bu zaman eksenlerinde istenen canlandırmalar uygulanabilir. Bu canlandırmalar animasyon karesi bazlıdır. Animasyon kareleri canlandırmalardaki dönüşüm noktalarını ifade eder. Tasarımcı canlandırma için animasyon kareleri oluşturarak her karede istediği dönüşümleri belirler. Uygulama animasyon kareleri arasındaki dönüşümü
zamana bölerek nesnenin ara karelerdeki görüntüsünü hesaplar.
Adobe Express
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 web tarayıcılar üzerinde kullanılabileceği gibi, cihazlara özgü uygulama mağazalarından (ör. Google Playstore, Apple Appstore, Microsoft Store) da indirilebilmektedir. Şekil 4.38’de Adobe Express uygulamasını Microsoft Windows işletim sistemine kurmak için kullanılabilecek Microsoft Store mağazası sayfası görülmektedir. Bu görüntüdeki Al düğmesine tıklandığında uygulama ücretsiz olarak işletim sistemine kurulacaktır.
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. Şekil 4.38’de sağda Adobe Express uygulamasının giriş ekranı görünmektedir.
Giriş Ekranı
Şekil 4.39’da Adobe Express uygulamasının giriş ekranı sunulmuştur. Uygulama henüz Türkçe arayüze sahip değildir. Fakat oldukça anlaşılır bir arayüzü bulunmaktadır. Üstteki barda yer alan Adobe Express logosu ve yazısı tıklanarak bu giriş ekranına geçiş yapılabilmektedir. Üstteki barın ortasında yer alan arama kutusundan sunulan şablonlar arasında arama yapılabilir. Buradaki aramalarda İngilizce ifadelerin kullanılması gerekmektedir. Örneğin birthday (doğum günü) araması yapılırsa, bu konuda hazırlanmış pek çok içeriğe ulaşılabilir. Bu içeriklerden biri üzerinde düzenleme yapılarak özgün tasarımlar üretilebilir. Üstteki barın sağ bölümünde ise hesaplar ve bildirimler bölümü yer almaktadır. En sağdaki Adobe simgesi ( ) ile Adobe Creative Cloud portalına geçiş yapılabilir. Hemen
solundaki uygulamalar düğmesi ( ) ile Lightroom, Stock, Fonts gibi diğer Adobe uygulamalarının internet sitelerine geçiş yapılabilir. Varsayılan olarak pasta grafiği ( ) şeklinde görülen düğme ile hesap ayarları ve hesaplar arası geçiş yapılabilmektedir. Bunun da solunda bildirimlerin gösterildiği ( ) düğme yer almaktadır. Adobe Express uygulaması ücretsiz dağıtılsa da ücretli kullanılabilen içerikler barındırmaktadır. Bu tür içeriklerin
kullanılabilmesi için Premium üyelik sistemi geliştirilmiştir. Premium üyelik avantajlarını sınırlı bir süre denemek için Try Premium düğmesi kullanılabilir. Uygulamanın altında gösterilen barda ise daha önce üretilmiş projelere kısayollar gösterilmektedir. Bu ekran görüntüsünde henüz bir proje üretilmediğinden Recents alanında bunu belirten bir mesaj (You currently have no projects) gösterilmektedir. Bu alanın sağında yer alan Get started düğmesi ile Adobe Express kullanımı hakkında kısa bir bilgilendirme sunan ekrana ulaşılabilmektedir.
Proje Ekranı
Yukarıda görselleri verilen kısayollar ile proje oluşturulduğunda proje alanı boş gelir. Fakat alt bölümlerde yer alan şablon önerilerinden biri seçildiğinde proje verilen görselle başlatılır. Yine de her projede istenen şablon içeriği tekrar uygulanabilir durumdadır. Bu amaçla proje alanında sol barda bulunan Templates sekmesi kullanılır. Proje alanının sol tarafında projeye eklenebilecek içeriklerin sunulduğu bir bar bulunmaktadır. İçerikler bu barda logolar altında gruplanmıştır. Aşağıda içerik grupları ve simgelere ilişkin açıklamalar ve örnekler verilmiştir. Bu alanda sunulan içeriklere tıklandığında içerikler otomatik olarak projeye eklenecektir.
Adobe Express uygulamasının proje sahnesi bölümünde kullanılabilecek önemli araçlar Şekil 4.42’de sunulmuştur. Bu görüntüdeki sahnede balkabaklarının bulunduğu bir sonbahar artalan görseli ile metinler ve yıldız şekillerinden oluşan bir grup bulunmaktadır. Ekran görüntüsünde grup seçili durumda olduğundan çevresindeki ölçekleme, döndürme ve taşıma kontrolleri gösterilmektedir. Kutunun altında bulunan kontrolle içeriğin yönelimi değiştirilebilir. Bu örnekteki grup sola doğru döndürülmüştür. Kutunun sağında bulunan kontrol ise grubu sahne alanında taşıma amacıyla kullanılabilmektedir. Kutunun köşelerindeki noktalar ile kutu ebatları değiştirilebilmektedir.
Sahne alanının sağ üst bölümünde seçili nesnelerin gruplanması, kopyalarının oluşturulması ve silinmesi ile ilgili kontrol grubu yer almaktadır. Ekran görüntüsünde birden fazla nesneyi barındıran bir grup yer aldığından gruplama seçeneği yerine grubu çözme seçeneği gösterilmektedir. Birden fazla nesne seçildiğinde gruplama seçeneği gösterilecektir.
Sahne alanının sağ alt bölümünde sahnedeki nesnelerin katman sıralaması gösterilmektedir. Bu sıralama hangi nesnenin hangisinin önünde görüneceğini belirler. Özellikle içerikleri kesişen nesnelerde hangi içeriğin görünür olacağını belirlemek için bu alandaki sıralamanın değiştirilmesi gerekecektir. Ekran görüntüsünde sahnede iki içerik (metin grubu ve artalan görseli) bulunduğundan görselde iki katman gösterilmektedir. Bunun yanında artalan görseli üzerinde bu katmanın art alan olduğunu belirten özel bir işaret bulunmaktadır. Bu katman her zaman en altta gösterilecektir.
Proje sahnesindeki bir nesne seçildiğinde nesne kontrolleri ve sağdaki özellikler barının içeriği güncellenir. Sahneye
eklenen bir şekil için sağlanan özellikler ve denetimler Şekil 4.43’te sunulmuştur. Nesne denetimlerinde tek bir şekilde seçildiğinde gösterilen şekli değiştirme (Replace) ve katman sıralamasını değiştirme (Layer order) seçenekleri gösterilmektedir. Özellikler barı alanında ise yukarıdan aşağı doğru şu denetimler sağlanmaktadır:
Replace: Şekli başka bir şekille değiştirmek için kullanılır.
Fill: Şeklin dolgu rengini değiştirmek için kullanılır. Sağ tarafındaki onay kutusu ile dolgu rengi eklenebilir ya da kaldırılabilir. Bu görselde kenarlık rengi olmadığından dolgu rengi kaldırma seçeneği pasiftir. Renk değiştirmek için renk kutusuna tıklanarak yeni renk seçilir.
Border: Kenarlık rengini belirlemek için kullanılır. Bu görselde kenarlık rengi kullanılmamıştır.
Blend mode: 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.
Alpha: Nesne saydamlığı. 0 ile 100 arasında bir değerdir. Saydamlığı 100 olan nesneler tam görünür, sıfır olan nesneler ise görünmezdir.
Flip Horizontal/Flip Vertical: Nesneleri ortalarından geçen yatay ve dikey eksenlere göre çevirmek için kullanılır.
Tasarım programlarında en çok kullanılan içeriklerden biri de metinlerdir. Bu nedenle metinlerin eklenmesi ve düzenlenmesi için pek çok özellik sunulur. Proje alanına metin eklemek için Text sekmesinde gösterilen pek çok ön tanımlı tasarımdan birine tıklanabilir. Bunun yanında kullanıcılar kendi metinlerini de ekleyebilir. Bu amaçla Text sekmesinin en üstünde yer alan Add your text düğmesi kullanılır. Bu seçenek seçildiğinde proje sahnesine yeni bir metin kutusu eklenir. Proje sahnesinde herhangi bir metin kutusu seçildiğinde sağdaki özellikler barının içeriği Şekil 4.44’te gösterildiği şekilde güncellenir. Bu görünümde sunulan özellikler aşağıda sunulmuştur.
Edit text: Metni düzenleme kutusu, seçilen metin kutusu içindeki yazıyı güncellemek için kullanılır.
Main style: Adobe Express bir metin kutusunda iki adet metin stili kullanılmasına izin verir. Main style ana stil olarak kullanılırken, Highlight vurgu stili olarak kullanılır. Main style seçeneğinin sağındaki + tuşuna basılarak metin kutusu için vurgu stili oluşturulabilir. Her iki stilde de kendilerine özgü renk, font, font yüksekliği gibi özellikler kullanılmasına izin verilir. Main style ve Highlight alanlarında seçilen özellikler metne harf harf uygulanacaktır. Vurgu stilinin kullanımı zorunlu değildir.
Color: Metin rengini seçmek için kullanılır.
Font: Yazı tipini seçmek için kullanılır.
Text size: Piksel cinsinden metin yüksekliğini belirlemek için kullanılır.
Align: Metni kutu içinde sağa, sola ve ortaya hizalamak için kullanılır.
Curved, Grid and Magic alignments: Metnin çember, yarım çember, ızgara gibi biçimlerde sunulması için kullanılır.
Spacing: Piksel cinsinden metnin harfleri arasındaki boşluğun belirlenmesi için kullanılır.
Alpha: Metin saydamlığının belirlenmesi için kullanılır.
Shape: Metni bir şekil üzerinde göstermek için kullanılır. Onay kutusu açıldığında şekil ve artalan rengi seçmek için kullanılan kontroller gösterilir. Ayrıca şeklin boyutu ve saydamlığını düzenlemek için kullanılabilecek kontroller de sunulur. Mask text özelliği açıldığında metin şekilde bir delik oluşturacak şekilde gösterilir.
Shadow: Metinlerde en çok kullanılan görsel efektlerden biri gölge eklemektir. Metne gölge eklemek için onay kutusu açıldığında, gölge rengi, gölgenin açısı ve gölgenin metne uzaklığını belirlemek için kullanılan kontroller gösterilir.
Outline: Metne dış kenarlık eklemek için kullanılır. Onay kutusu açıldığında kenarlık rengi ve kenarlık kalınlığı belirlemek için kullanılan kontroller gösterilir.
Tasarım programlarında en çok kullanılan içeriklerden biri de fotoğraflardır. Adobe Express zengin bir fotoğraf kütüphanesinin yanında, proje sahnesine eklenmiş fotoğrafların düzenlenmesi için önemli denetimler sunar. Adobe Express ortamında sahneye fotoğraf eklemek için Photos sekmesinden bir fotoğraf seçilir. Bunun yanında tasarımcının kendi fotoğrafını projeye eklemesine izin verilir. Bu amaçla Photos sekmesindeki Upload Photo seçeneği kullanılabilir. Bunun yanında Libraries sekmesi altında üretilecek bir kütüphane içine de fotoğraflar eklenebilmektedir. Sahneye eklenen bir fotoğraf seçildiğinde özellikler panelinin içeriği Şekil 4.45’te gösterildiği şekilde güncellenir.