Web Tasarım ve Dijital Tasarımın Temelleri 1 | Web sitelerinin çalışması ve tasarlanması
Bugün web tasarım ile ilgilenen, bu web siteleri nasıl çalışıyor, nasıl tasarlanıyor, web sunucular ne işe yarıyor, www ile başlayan isimleri nasıl alınıyor gibi konuları merak edenlerin meraklarını giderme zamanı geldi. İki bölümden oluşacak olan serinin bu ilk bölümünde web sitelerinin çalışması ve tasarlanmasından bahsedeceğim ikinci bölümünde ise harika bir arayüz tasarlamanın 5 altın kuralını konuşacağız.
New York’ta yapılan Dünya Bilim Festivali’nde internetin geçmişi, bugünü ve geleceği konulu bir panelde Belçikalı bilim insanı Paul Otlet internetin fikir babası olarak anıldı.
Bilim dünyasının “enformasyon biliminin kurucusu” olarak tanıdığı, çağının ötesinde bir bilim insanı olan Otlet’in, 1934’te ünlü eseri “Treaties on Documentation”ı yayımladığı sırada telefon hattı ile televizyonu bağlayacak yeni bir cihaz üzerinde çalıştığı ifade edildi. Yani Otlet interneti, bilgisayarlardan bağımsız olarak keşfetmişti.
Otlet, basılı eserlerdeki bilgileri yaymak için kullanmayı planladığı bu cihazın planlarını hazırladı.
Bilim dünyasının “enformasyon biliminin kurucusu” olarak tanıdığı, çağının ötesinde bir bilim insanı olan Otlet’in, 1934’te ünlü eseri “Treaties on Documentation”ı yayımladığı sırada telefon hattı ile televizyonu bağlayacak yeni bir cihaz üzerinde çalıştığı ifade edildi. Yani Otlet interneti, bilgisayarlardan bağımsız olarak keşfetmişti.
Otlet, basılı eserlerdeki bilgileri yaymak için kullanmayı planladığı bu cihazın planlarını hazırladı.
Bu cihaza “televizyonlaştırılmış kitaplar” adını veren Otlet, hayalindeki tasarımı “Böylece çalıştığımız yerlerin kitaplarla dolu olmasına gerek kalmayacak. Bunun yerine bir ekran ve bir telefon olacak. Telefon aracılığıyla sorguladığımız sayfalar ekranımıza gelecek” diye anlattı.
Hatta bir ekranın aynı anda birkaç sayfaya bölünebileceğini belirten Otlet’in böylece aynı anda bir ekranda birden fazla tarayıcı penceresi ya da sekmesi açılması uygulamasının da fikir babalığını yaptığı ifade edildi.
Otlet’in hayalindeki bu tasarım 1960’lı yıllarda bir askeri proje olarak t tarafından hayata geçirildi. 29 Ekim 1969’da California Universitesi’nde yan yana yerleştirilen iki bilgisayar arasında ARPANet (Advence Research Projects Agency) kullanılarak veri transferi sağlandı.
İnternetin kısa tarihinden sonra bilgisayarların da gelişmesi ile birlikte ilk zamanlarda bilgisayarların haberleşmesi için kullanılan internet sonraları web siteleri ile birlikte rutin yaşantımızın bir parçası haline geldi.
Web sitesi bu haberleşmenin görsel yüzüdür yani internetin görsel yüzü. Günümüzde web siteleri bilgi paylaşımı, ticaret, sosyalleşme gibi pek çok konuda kullanılıyorlar fakat, temelde web siteleri bilgiyi paylaşma ve araştırma mecrasıdır. İki önemli özelliği ise hem hizmet sunması hem de hizmet almasıdır. Web siteleri sayesinde şirketler, kurum ve kuruluşlar hizmet verebilirler. Ya da verdiğimiz reklamlarla, internette yaptığımız satışlarla bize para kazandırır yani hizmet de alabilir.
Bu lafım web tasarım ile ilgilenenlere kesinlikle web sitelerin tasarlanması ve kodlanması sanıldığından çok daha kolaydır.
Web Siteleri İki Çeşittir
DİNAMİK web siteleri ve STATİK web siteleri
DİNAMİK: Müşterinin bir arayüz yardımı ile siteyi kod bilmesine gerek kalmadan bir yönetici paneli yardımı ile düzenleyebildiği web siteleridir. Blogspot, Joomla, Wordpress, SquareSpace gibi... Yazılım dilleri ise genel olarak:PHP, ASP, VBScript
STATİK: Müşteriniz kod bilmeden websiteye müdehale edemez. Site içeriğini değiştirmek için bir paneli bulunmaz. Yalnızca koduna müdehale ederek değişiklik yapılabilir. Yazılım dilleri ise: HTML, CSS, JavaScript
Küçük bir örnekle açıklamaya çalışayım. Örneğin bir e-ticaret sitesi yaptırmak istiyorsunuz. Yani sitenizden satış yapacaksınız ve gerektiğinde yeni ürün ekleyip çıkarabileceksiniz varsa blogunuzu yazacak ya da yazdıracaksınız, müşteri kayıtlarınız olacak vs. vs. bunun için bir web sitesi tasarımına ihtiyacınız oldu. Sizin için yazılımcı siteyi sadece HTML ile kodlar ve size teslim ederse siz yeni ürün ekleme, kullanıcı kaydı, internetten satış gibi özellikleri kullanamazsınız. Fakat ürünlerinizi gösterebileceğiniz tanıtımızı yapacak bir websiteniz olur. Yazılımcı yada coder haricinde sitenize başka bir bilgi ekleyemezsiniz.
Fakat bu HTML tasarıma ek olarak bir de yazılım yapıldıysa ve size bir yönetici paneli teslim edildiyse internetten satış yapamaya hazır, yönetici paneli sayesinde ürün ekleyip silebileceğiniz, sitenize yeni sayfalar ekleyebileceğiniz bir web sitesine sahip olmuş olursunuz.
Dinamik bir web sitenin oluşum aşamasında önce tasarım sonra da programlama vardır. Eğer yapacağınız web sitesi statik bir web sitesi ise programlamaya gerek yoktur.
Burayı çok dikkatli dinleyin lütfen çünkü en çok karıştırılan kısım burası. HTML kodlama ile yazılımsal programlama aynı şey değildir. Biz arayüz tasarlarken arayüzü iki defa tasarlarız ilki grafiksel tasarım ikincisi ise kod ile tasarım.
Grafik tasarımcı arkadaşlar bu kısım sizinle direkt bağlantılı.
Arayüz Tasarımı
Bir web sitenin, uygulamanın ya da oyunun grafik arayüzünün göze hoş gelecek şekilde, belirli tasarımsal kurallar eşliğinde, menü yerleşimi ve sayfa geçiş şemaları ile birlikte tasarlanması işidir.
Arayüzün grafiksal tasarımı için photoshop, sketch, adobe muse gibi programlar kullanabilirsiniz. Bu programlarla tasarlamaya başlamadan önce, elinize bir kağıt kalem alarak bir web sitenin temel taşlarını yerleştirerek bir tasarım yapabilirsiniz. Bu yerleşim şemanız olacaktır ve tasarımdan önce bunu yapmak size büyük ölçüde zaman kazandıracaktır.
Arayüzün grafiksel tasarımı bitti imaj çıktılar alındı artık müşteriye bir sunum yapma vakti geldi çünkü kodlamaya başlamadan varsa bir revizyon bu aşamada onu düzeltmek çok daha kolay olacaktır. Kodlama bittikten sonra revizyon almanız demek bazı şeyleri en baştan kodlamanız demek olabilir. Bu aşamada mutlaka bir müşteri onayı almak gerekir.
Eveeet müşterimiz memnun grafiksel tasarımımız bitti sıra geldi aynı tasarımı koda dökmeye. HTML ve CSS ile elimize görselleri, boyutlandırması bulunan web siteyi aynı ölçülere sadık kalarak kodlayacağız. JS ile de animasyonlarını geçişlerini verelim biraz canlansın di mi? Eee bu kodlamaları bir editör yardımı ile yazmak lazım platform size kalmış artık milyon tane editör var piyasada bu iş için ama en çok kullanılanları sayalım tabi: Coda, Ms Visual Studio, Dreamweaver, NotePad++, Eclipe...
Bunların hiç biri yoksa bilgisayarınızdaki notepad’le bile yazabilirsiniz isterseniz.
Önemli olan kodlamayı bilmek. Ve tasarımcı arkadaşlara kocaman bir tavsiye; mutlaka ama mutlaka HTML, CSS öğrenin devir değişti. Artık bebek yaştaki çocuklar için bile kodlama dillerini öğreten okul programları var, çağın gerisinde kalmayın...
Geldik işin en cafcaflı kısmına. Programlama geçmeden evvel hadi gelin bu siteler nasıl yayınlanıyor bir onu konuşalım. Bir web sitesine gitmek için ne yapıyoruz? En baştan düşünün bunu, bilgisayarınızı açtınız sonra ne açarız web sitesini görebilmek için?
Cevapları duyar gibiyim. Kiminizin cevabı chrome oldu kiminizin Safari, FireFox, Internet Explorer ya da Opera... Daha bu liste uzar gider kısaca bir websitesini gösteren şey web tarayıcıdır.
Açtım web tarayıcısını sonra başlarım o meşhur 3lüyü yazmaya www ya da arama motorunda (Google, Yandex, Bing...) arama yaparım sonuçta karşıma www.websiteadi.com gibi bir adres çıkar ve onu tıklarım. Aslında orada yazdığınız www başlayan adres dünyanın bir yerinde bulunan sunucu bir bilgisayarın ip numarasıdır. Bağlandığım bilgisayar 69.63.187.18 şeklinde bir numara göstermek yerine ben şaşırmayayım diye bu şekilde bir name server yardımı ile bu numaraları bizim iyiliğimiz ve rahat hatırlamamız için www.facebook.com olarak bize gösterir.
Bu şemadaki bilgisayarların konuşmasından da anlaşılacağı gibi tasarımını kodla yapıp kayıt ettiğimiz HTML dosyaları bir web sunucuna koymalıyız ki internetteki kişiler ona ulaşabilsin. Bu hizmeti ise hosting firmaları veriyor. Hosting firmaları internete açık olan sunucularının harddisklerinden bir bölümü diyelim ki bu 1GB lık bir kısım olsun bu bölümü size senelik olarak kiralar. Aynı şekilde domain adı denilen www ile başlayan internet sitesi isimleri de senelik kira şeklinde satılır.
Örneğin isminizsoyisminiz.com adresinin daha önce başkası tarafından alınıp alınmadığını www.nic.tr adresinden kontrol edip -keza domain satan her firma bu aramayı da yaptırıyor yani nic.tr’den aramaya mecbur değilsiniz- istediğiniz bir şirketten bu domaini en az 1 sene kiralayabilirsiniz. Fakat HTML dosyalarınızı da koymak için bir alana ihtiyacınız olacak yani hosting paketi de kiralamak zorundasınız. Bu konu daha baya derin sorularınız olursa yorumlar kısmına yazabilirsiniz.
Programlama
Grafik tasarımı kodlanmış olan arayüzünüzü, site ziyaretçileri ve kullanıcılar ile etkileşime geçebilecek şekilde dinamik olarak tasarlamak istiyorsanız (sosyal medya, e-ticaret, mobil uygulama, oyun vb.) programlama yaptırmalı ya da biliyorsanız kendiniz yapmalısınız.
Programlamanın HTML kodlamadan en büyük farkı (dinamik sitenin statik siteden en büyük farkı da diyebiliriz buna) bir database(veritabanı)nin olmasıdır. Tüm kişiler, sayfalar, ürünler yani sitenizdeki tüm bilgiler kolonlar halinde bir veritabanında tutulur. Böylece onlarca sayfalık HTML dökümanı yerine sadece bir satırlık kod size yeterli olacaktır.
İşlerler daha da karışmadan, bir örnek daha vereyim. Örneğin bir satırlık kodunuzda ürünüzün adı, açıklaması, fiyatı var, ve farz edelim ki bu ürüne benzer 20.000 tane daha ürün girişi yapmalısınız. Bunun anlamı statik HTML bir sitede sizin aynı satırdan 20.000 defa yazıyor olmanız demek. Bu hem size eziyet hem de HTML dökümanının şişmesi ağırlaşması demektir.
Şimdi bir diğer senaryoda ise elinizde bir excel dosyası var kolon başlıkları da şunlar ürün adı, ürün açıklaması, ürün fiyatı. Ve bu excel dosyasına zaten siz 20.000 ürünün adını, açıklamasını, fiyatını girdiniz. Şimdi yazılım yardımı ile bir defa bir satırlık kodu yazdınız ve web sitede tüm ürünlerin bilgilerini bu excel dosyasından çekip adı kısmına exceldeki adı kolonunu, açıklama kısmında exceldeki açıklama kolonunu, fiyat kısmına da fiyat kolonunu gösterdiniz. Ve otomatik olarak satır satır bu ürünleri ekrana bastırdınız. Yani bir satırda veritabanı ile anlaşma yaparak işi hallettiniz. Excel dosyasına benzeyen bu yapı tam olarak veritabanıdır, Yazılım dilleri ise genel olarak PHP ya da ASP olur.
Bu bölümün sonuna geldik. Bir sonraki bölümde arayüz tasarımın 5 altın kuralı konuşuyor olacağız. Web tasarım ile ilgili sorularınız olursa yorum yazmayı unutmayın.
Sonraki yazıda görüşünceye kadar bilgiyle ve hoşçakalın.
