Ünite 8: Web Uygulamalarına Yönelik Grafik Tasarım Araçları

Giriş

Son yıllarda Internet kullanımının yaygınlaşması ve hayatımızda çok önemli hâle gelmesiyle birlikte, web sayfalarında sunulan içerik kadar görsel zenginlik de büyük önem taşımaya başlamıştır. Grafik tasarım; bir mesajı iletmek, bir görsel geliştirmek veya bir düşünceyi görselleştirmek için metnin ve görsellerin algılanabilir ve görülebilir bir düzlemde, iki boyutlu veya üç boyutlu olarak düzenlenmesini içeren yaratıcı bir süreçtir. Web uygulamalarına yönelik grafik tasarımı, grafik tasarım alanı ile yakın ilişkili bir konu olarak ele alınabilir fakat kendi içerisinde ayrı bir daldır.

Grafik Tasarım

Başarılı bir grafik tasarım ürününün ortaya çıkması için birtakım temel kavram ve ilkeler ile ilgili bilgi sahibi olunmalıdır. Grafik tasarımında kullanılan temel kavramlar şu şekildedir:

• Çizgi; bir noktanın birbirini izleyen hareketle meydana gelen geometrik bir ifadedir. Çizgiler karakterlerine göre ve konumlarına bağlı olarak bazı mesajlar da iletirler.
• Biçim-form; Biçim iki boyutlu düzlem üzerinde genellikle çizgilerin kullanılmasıyla, şekil almasıyla oluşur. Biçimler üçgen, kare, dikdörtgen gibi geometrik biçimler ve taş, yaprak, bulut gibi organik biçimler olarak ikiye ayrılır. Form ise bu biçimlerin üç boyutlu olarak, derinlik hissinin verilmesiyle bizlere yansıtılmasıdır.
• Ton(Değer); Genel olarak tonlama grinin çeşitlenmesi ya da siyah rengin kullanılmasıyla ilgilidir. Bir renk beyaz katılarak açık tonlara sahip olurken, siyah katılarak koyu tonlara sahip olur.
• Renk; Renkler, ışıkla birlikte var olurlar ve izleyen üzerinde değişik etkiler uyandırırlar. Rengin üç boyutu bulunmaktadır: Uzunluk (rengin türü), genişlik (rengin tonu), derinlik (rengin yoğunluğu). Tasarımcı renk seçerken; Rengin kültürel çağrışımına, hedef kitlenin renk tercihine, firma ya da ürünün karakterine, tasarımdaki yaklaşım biçimine dikkat etmelidir.
• Doku; Doku, bir nesnenin yüzeyinde çizgilerin bir araya gelmesiyle oluşan tasarım elemanıdır.
• Ölçü; bir tasarım elemanı olmaktan ziyade, çizgi, renk, doku ve biçim gibi tasarım elemanlarının birbirleri arasındaki büyüklükler ve tasarımda kapladıkları alanla ilişkilidir.
• Yön: Bir tasarım üzerindeki çizgiler ve noktalar, değişik noktalara yönelerek bir hareket oluştururlar.

Web Teknolojileri ve Uygulama Geliştirme

Tim Berners-Lee 1989 yılında HTML (Hypertext Markup Language) işaretleme dilini geliştirerek Dünya Çapında Ağ (WWW) olarak da tanımlanan bilgi paylaşım sistemini kurarak web’in altyapısını oluşturmuştur. 1990 yılında web sayfalarında gezinmek için kullanılan web tarayıcıyı (browser) geliştirilmiştir. Web sayfalarının gelişti-rilmesinde kullanılan HTML zamanla yeni sürümleri ile birlikte gelişmiştir;

• HTML 1.0: Çok seviyeli baslıklar, paragraflar ve maddelenmiş listeler için özel formatlamadır.
• HTML 2.0: Doldurulabilir web formlarının oluşturulabilmesini sağlayan bu sürüm 1994 yılından önce web dokümanlarında kullanılan eklenti ve özelliklere kaynak olarak çıkartılmıştır.
• HTML 3.2: Sayfa görünümü üzerinde ileri derece kontrol, manşetlerin yönetilmesi, dinamik dokümanlar, matematik dokümanlar, CSS (Cascading Style Sheet-Basamaklı Stil Şablonları) bunlardan bazılarıdır.
• HTML 4.1: Şu an kullandığımız HTML standardıdır.
• HTML 5: Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır.

Web teknolojileri de yıllar içerisinde web 1.0,2.0 ve 3.0 evrelerinden geçmiştir. Web 1.0’da kullanıcılar web tasarımcısı tarafından sadece HTML dili ile hazırlanan sitelere erişip bilgiyi sadece okuyabilirler. Web 2.0 ile birlikte internet kullanıcılarının web programlama dillerini bilmelerine gerek olmadan, kendilerine özgün web siteler hazırlamaları, blog kaynaklarını paylaşmaları, site ziyaretçileri ile etkileşime girmeler mümkün hâle gelmiştir. Web 3.0, kullanıcı tarafından sağlanan içeriğin arama motorları tarafından anlamlandırılması, kullanıcının istediği bilgiye ve sağladığı ipuçlarına göre blogunun yorumlanıp kullanıcının özel ihtiyaçlarına uygun bir şekilde sunulması anlamına gelmektedir. Web 3.0 yapısına bakıldığında kişiselleştirme, yapay zeka ve hareketlilik başlıkları öne çıkar.

Web teknolojileri ise şunlardır:

• HTML: Web sayfaları hazırlamak için kullanılan bir işaretleme dilidir.
• Flash: Macromedia firması tarafından geliştirilmiş, vektörel grafik mantığına dayalı bir teknolojidir. Son yıllarda yerini html5’e bırakmaktadır.
• CSS: HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.
• JavaScript: yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir.
• PHP (Personel Home Page): Kişisel Ana Sayfa olarak Türkçeye çevrilen PHP ile veritabanı uygulamaları, e-ticaret siteler, forum, e-posta gönderme vb. birçok etkileşimli uygulamanın geliştirilmesi mümkündür. Çalışma mantığı resim 8.3’deki gibidir.
• ASP (Active Server Pages): Aktif sunucu sayfaları olarak dilimize çevrilir. Sunucu tarafında derlenen betik diller ile veritabanı uygulamaları, e-ticaret siteleri, forum, e-posta gönderme vb. birçok etkileşimli uygulamanın geliştirilmesi mümkündür. Son yıllarda yerini ASP.NET teknolojisine bırakmıştır.
• ASP.NET: Dinamik web sayfaları, web uygulamaları ve XML tabanlı web hizmetleri geliştirilmesine olanak sağlar. ASP teknolojisinin devamını teşkil etmiştir.
• JSP (Java Server Pages): Web sayfalarında Java dilini kullanarak dinamik web sayfaları oluşturmayı sağlayan bir Java teknolojisidir.

Günümüzde web tasarımı sadece grafik tasarımından baret olmadığından, önyüz geliştirici ve arka-yüz geliştirici hakkında da bilgi sahibi olunması gerekmektedir. Ön-yüz geliştirici (front-end developer) kullanıcının etkileşime girdiği web tarayıcıda yan istemci (ön-yüz) tarafında, HTML, CSS ve JavaScript teknolojilerini kullanarak web uygulamaları geliştiren kişidir. Ön-yüz geliştiriciler grafik tasarımcıları le arka-yüz geliştiriciler arasında bir köprü görevi görürler. Arka-yüz geliştiriciler ise bir web sitesinin arka planında bulunan dışarıdan baktığımızda göremediğimiz kodlama ve veritabanı mimarisini inşa eden kişidir. HTML ve CSS gibi dilleri bilirler fakat daha çok MySQL, PostgreSQL, SQL Server, MS-Access, Oracle, DB2, Sybase vb. veritabanı teknolojileri ile PHP, ASP, JSP, Ruby, Python, ASP.Net vb. programlama dilleri üzerinde uzmandırlar.

Web Tasarım

Web tasarımda müşteri analizi, renk seçimi, özgün tasarım, taslak oluşturma ve web tarayıcıları ile uyumluluk gibi huşulara dikkat etmek gerekir. Esnek ya da duyarlı web tasarımı (responsive design), arayüzün, siteye girilen cihazların ekran tanımlarına göre otomatik olarak uyarlandığı tasarım anlayışıdır. Uyarlanabilir tasarım (adeptive design) ve akışkan tasarım (liquid design) yaklaşımlarından oluşur. Duyarlı tasarımın kolay kullanım, kolay bakım, arama motoru optimizasyonu ve düşük maliyet gibi faydaları vardır. Duyarlı tasarım aracılığı le web sayfasının mobil uyumlu olması saylanabileceği gibi mobil ortamlar için özel tasarım da gerçekleştirilebilir. Mobil cihazlar için tasarımda tipografi, kullanışlı menüler, içerik kullanımı, görseller ve animasyonlar gibi noktalara dikkat edilmesi gerekir. Arama motoru optimizasyonu (SEO-Search Engine Optimization) arama motorlarının web sayfalarını daha kolay bir ş ekilde taramasına olanak sağlayan teknik düzenlemelerdir. Arama motoru optimizasyonu için:

• Başlık: Sitenin her sayfasının kendisine özel bir başlığı olmalı ve bu başlık içeriği açıklayacak şekilde seçilmelidir.
• Anahtar kelimeler: Anahtar kelimeler, her sayfa için ayrı belirlenirse çok daha başarılı sonuçlar alınacaktır.
• Açıklama: Sayfa içeriğinin bir cümlelik tanımıdır. Yine her sayfa için ayrı tanımlanmasının önem büyüktür.
• İndeksleme: Sitede php, ajax v.b. yapılar ya da bağlantısı olmayan gizli sayfalar var ise arama motoru her sayfaya ulaşamayabilir. Bunun için site hartası tanımlamak indekslemeyi kolaylaştıracaktır.

Web Grafik Tasarım ve Geliştirme Araçları

Web grafik tasarım ve geliştirmesi için kullanılan pek çok araç vardır. Bunlardan biri olan Photoshop, web ve baskı için gelişmiş grafikler oluşturmayı isteyen profesyonel tasarımcılara yönelik, güçlü ve endüstri standardı hâline gelmiş piksel tabanlı bir resim işleme düzenleme programıdır. Photoshop ile;

• Özgün tasarımlar oluşturulabilir,
• Bir fotoğraf taranarak o fotoğraf işlenebilir,
• Bir video görüntüsü yakalanabilir ve işlenebilir,
• Sayısallaştırılmış resimler bilgisayara aktarıp işlenebilir,
• Bir negatif taranıp işlenebilir.

Photoshop web araçları, web sayfalarının bileşen parçalarını oluşturmaya veya hazır ayar ya da özelleştirilmiş biçimlerde tam web sayfalarının çıktısını hazırlamaya yarar. Photoshop rollever (web sayfasında yer alan ve fareyle üzerine gelindiğinde değisen bir düğme veya görüntüdür) görüntü oluşturmada ve web sayfalarını dilimlemede kullanılır. En iyi web tasarım programlarından biri olan Fireworks, Photoshop programına benzer fakat sadece web tasarım yapmak, web grafikler oluşturmak, düzenlemek ve iyileştirmekte kullanılan çok yönlü bir programdır. Tasarımcılar hem Bitmap (resim 8.9 ) hem de vektör görüntüler (resim 8.9) oluşturup düzenleyebilir, rollover ve açılır menüler gibi web efektler tasarlayabilir, dosya boyutlarını küçültmek için grafikler kırpıp iyileştirebilirler ve dilimler oluşturarak düzenlemeler yapabilirler. Bir diğer araç olan Flash etkileşimli web siteleri ve dijital animasyonlar oluşturmak için gelişmiş bir ortam sunmaktadır. Flash; v-ideolar, grafikler ve animasyonlarla desteklenen ilgi çekici uygulamalar oluşturmak için yaygın bir şek ilde kullanılmaktadır. Ve son araç olarak Dreamweaver, web sitesi ve sayfalarını oluşturmayı ve yönetmeyi sağlayan bir programdır. Basit HTML olayları olarak nitelendirebilecek tablo, resim, metin flash (swf) ve her türlü HTML bileşen sayfalara görsel bir arayüz ile ekleyebilme imkânı sağlamaktadır. Arka-yüz geliştiriciler ilgili kodları HTML etiketlerinin içine Dreamweaver kullanarak rahatlıkla entegre edebilir.