Ücretsiz Web Dersleri : www.WebDerslerim.

Com
www.mertsuslu.com

Web Tasarımın Tarihi

Web Tasarımı nedir? Türkiye'de web tasarımının durumu nasıl? Web Tasarımı için nelere
dikkat edilmeli? Hangi programları kullanmak gerekiyor?

Tasarımın Tarihi

Tasarımın tarihi, MÖ 14.000'lerde yapılmış mağara resimlerine ve M.S. 4. yy'da yazının

başlamasına dayandırılabilir. O dönemlerde entelektüel düşünce din etrafında olduğundan,
ilk basılan kitaplar dinî kitaplardır. Basılı yayınlar için harf ve metin dizimi, erken dönem
tasarım pratikleridir. Asıl çıkış noktası ise; sanayileşme ve modern yaşama geçiş ile, özellikle
de fotoğrafın keşfi sonrasında başlamıştır. Çünkü resim sanatı farklı bir yöne ilerlemeye
başlamış grafik, afiş, ürün katalogları vb. öne çıkmaya başlamıştır.

1891-1896 arasında William Morris tasarladığı kitaplarla zamanına göre çok başarılı grafik
tasarımı işler üretmiştir. Bu dönemler tasarımın sanattan ayrılmaya başladığı dönemlerdir.
1919'da Almanya'nın kurulan
Bauhaus Okulu sanat ve tasarım alanında birçok yeniliğin öncüsü oldu.

Web Tasarımın Tarihi

Tim Berners-Lee 1989'da HTML işaretleme dilini geliştirerek Dünya Çapında Ağ (www)
olarak da tanımlanan bilgi paylaşım sistemini kurmuş
olan bilgisayar profesörüdür. Web`in babası kabul edilir. Aynı zamanda ilk ağ tarayıcısı
yazılımını, 1990 yılında geliştirmiştir. 1994 yılında ağ ile ilgili standartları dünya çapında
belirleyecek açık bir kurum olan W3C`yi kurmuştur ve halen de başkanlığını yapmaktadır.

Web Tasarım Nedir?

Web tasarımı, web sitesinin görsel ve kodsal kısımlarının oluşturulması işidir.

Web sitesi günümüzün medyası olan internet yayıncılığı üzerinde yer alan size ait firmanız
için veya şahsınız için özel olarak hazırlanmış bir iletişim panosudur. Sizi veya firmanızı web
üzerinde temsilen yayınlanır.
Bildiğiniz gibi internet (web), radyo ve relevizyon benzeri bir medya sayılmaktadır. Etkinlik
açısındansa diğerlerinden daha çok ön plana çıkmaktadır.
Bir web sitesi sayesinde, firmanızın veya sizin tanıtımınız, bilgilerinizin sunulmasını çok
daha büyük kitlelere (tüm dünyaya) en ekonomik biçim yapılır.

Web Tasarımı ve Türkiye

1
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

Türkiye'de Web Tasarımı ve Web Programlama sektörü gün geçtikçe daha da büyüyor ve bu
sektöre ilgi gitgide artıyor. Buna rağmen web tasarımı ve Türkiye kelimeleri bir araya
geldiğinde ortaya bir karmaşa çıkıyor.

Maalesef Türkiye henüz web tasarımı ve web programlama konularında bir birliğe, bir
kurumsallaşmaya gitmiş değil.

Türkiye'de web tasarımı yapan firma ve kişilerin profiline bakıldığında grafik

tasarımcılarından çok bu işe hobi olarak başlamış, ama kısa sürede kendini çok iyi bir
webmaster zanneden amatörlerden oluşmaktadır.

Tam siteye yeni eklentiler ekleneceği ya da güncelleme yapılacağı sırada askere giden
webmasterlar, alan adını kendi üzerine alıp daha
sonradan firmaya zorluk çıkaran uyanıklar, hazır script ve ya sitelerden web sitesi oluşturup
programda veya tasarımda bir değişiklik istenince kitlenen sözde web programcıları
yüzünden piyasada maalesef web tasarım firmalarına karşı bir güvensizlik oluşmaktadır.

Profesyonel bir web sitesi hazırlamak için hangi yöntemler izlenmeli?

Web tasarımıyla uğraşıyorsanız mutlaka tasarımınızı mükemmelleştirmek için çalışırsınız;

haklısınız da, bir sitenin tasarımı ne kadar güzel olursa sitenin başarısı da o derecede artar.
Web Tasarımı derken ilk olarak aklımıza bir web sitesinin görsel olarak gözümüze görünen
kısmı gelir. Halbuki iş sadece bundan ibaret değildir.
Sitenin görselliği kadar işlevselliği ve kodlaması da önemlidir. Yaptığımız sitenin
tasarımının kullanıcıyı tatmin etmesi ve kodlaması ile olabildiğince uyumlu olmalıdır.
Web sitesi tasarımı yapmaya başlarken ilk önce algoritma oluşturmak sizin yararınıza
olacaktır.
Tasarımlarınızda estetik ve görselliğe dikkat edin.
Mesela bir oyun sitesi tasarımı yapıyorsanız tasarımın olabildiğince renkli ve görselliğinin
çok iyi olması gerekir.
Web tasarımı özgün ve size ait olmalıdır. İnternet milyonlarca web sitesinin olduğu bir
platform.
Bugün internetin önde gelen sitelerinin tamamını incelediğinizde özgünlükten asla ödün
vermediklerinin görürsünüz.
Arama motorlarında üst sıralarda yer almak içinde özgün metinler yayınlamalısınız.
Müşteriniz web sitenizde dolaşırken, çalışmayan sayfalar, hatalı metinler, kötü tasarım ve
anlaşılmayan bir kurguyla karşılaşırsa sizinle ilgili ilk izlenimi pek de iyi olmayacaktır.

2
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

Web sitesi yapılırken hiçbir şey bilmeyen bir insan baz alınarak yapılmalıdır. Siteye giren
herhangi biri kolayca aradığı bilgilere ulaşabilmelidir.
Yapılan web tasarımının hızlı yüklenmesi aynı zamanda onun iyi bir şekilde kodlandığını
gösterir.
Hız konusunda en önemli unsurlardan biri de web sunucunun güçlü bir server'a sahip
olmasıdır.
Esas olan, kullanıcıya ürün ve hizmeti en kısa yolla ulaştırmaktır. Bu nedenle sitenin hızını
düşürecek abartılı animasyonlar, bekleme süreçleri, video ve ses objeleri, kullanımı zor
menüler tercih edilmemelidir.
Arama motorlarının mantığını bilmek ve bu mantığa göre web sayfası tasarlamak
günümüzde en önemli kriterlerden biridir. Profesyonel bir web sitesinde yer alan her sayfa
arama motorları tarafından indekslenebilir yapıda oluşturulmalıdır.
Web sitenizden en iyi etkileşimi sağlayarak hedeflediğiniz kitleye ulaşabilirsiniz ve bunun
için çok ekonomik bir yol izlemiş olursunuz.

Domain (Alan Adı) Nedir?

Domain (alan adı) web sitenizin internet üzerindeki adı ve adresidir. Mesela en çok
kullandığımız alan adı şüphesiz ki GOOGLE'dur ve bu web
sitesinin domaini (alan adı) google.com'dur.

Domainler, IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan numerik
sisteminin daha kolaylaştırılmış halidir.

Hosting (Barındırma) Nedir?

Hosting, bir ya da daha fazla web sayfasının ilgili tüm materyallerinin barındırılması,
yayınlanması ve korunmasını sağlama işine verilen global bir isimdir.

Müstakil bir ev yaptırmak istiyorsunuz, bunu gerçekleştirebilmek için

sahip olmanız gereken şeyler vardır;

Arsa
İnşaat ruhsatı
İnşaat malzemeleri (demir, tuğla, boya vs.)

Bu örnekten yola çıkarsak, İnşaat ruhsatınız: Alan adı (domain), İnşaatı gerçekleştirebilmek
için ihtiyacınız olan malzeme: Web sayfanız, Arsanız: Hosting'dir.

3
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

HTML

HTML (Hyper Text Markup Language) kişisel, kurumsal veya kitlelere hitap eden web siteleri
oluşturmamızı sağlayan betik bir dildir. HTML
dosyalarının aktarımı için HTTP kullanılmaktadır.

HTML dosyaları sunucu bilgisayarın sabit diskinde html ya da htm uzantısı ile saklanır. HTML
ile tasarladığımız web siteleri ilk bakıldığında pek bir anlam ifade etmeyebilir.

Tasarladığımız sayfalar İnternet Explorer, Firefox, Opera gibi web browserlar ile yorumlanır
ve bizim görsel olarak sayfayı anlamamızı sağlarlar.

HTML İle Neler Yapılabilir?

Tablolar oluşturulabilir,
Listeler yapılabilir ,
Yazılar üzerinde değişik formatlaruygulanabilir ,
Resimler sayfaya istenildiği gibi yerleştirilebilir .

HTML İle Neler Yapılamaz?

Veriler işlenemez ,
Veritabanı ile ilgili işlemler gerçekleştirilemez,
Dosyadan veri okunamaz,
Tarihe bağlı işlemler gerçekleştirilemez,
Mail gönderilemez .

CSS

HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, (Stil şablonları) ise
bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama imkanı
verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için
de kullanılabilir. Bu tekniğin en önemli özelliği
kullanımındaki bu esnekliğidir.

CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer

4
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML
belgesi içerisinde çağırılabilirler.

JAVASCRIPT

Javascript Netscape firması tarafından geliştirilmiş olan bir script dilidir.

Web sayfalarında gördüğünüz açılır menüler, bazı animasyonlar, hesaplamalar vb. pek çok
şey Javascript ile yapılır. Abartmadan kullanıldığında Javascript şu anda web teknikleri içinde
yer alan en önemli ve faydalı bir şeydir desek abartmış olmayız.

JavaScript'in çalışması için tarayıcının onu desteklemesi ve tarayıcının buna izin vermesi
gerekiyor. Eğer tarayıcınızda Javascript kullanımını kapadı iseniz bütün bu etkileşimli web
tekniklerinden dışarıda kalıyorsunuz.

İçinizi rahatlatmak için bir not: JavaScript'in yapamadığı en önemli şey nedir biliyor
musunuz? Bilgisayarınıza müdahale edemez. Yani dosya
silemez, yazamaz vb. Bu da güvenlik için düşünülmüş bir şeydir. Daha iyisi başarısız
olduğunda Javascript sistemi çökertmez.
ASP

ASP, Microsoft tarafından 1996 yılında gelistirilmiştir. ASP, Active Server Pages (Aktif sunucu
sayfaları) ifadelerinin kısaltılmış biçimidir. ASP tek başına bir programlama dili degildir.
Özellikle web sunucusu ile çalışan bir tekniktir. ASP sayesinde veri tabanı uygulamaları ve
elektronik ticaret siteleri kolayca yaratılabilir. İnternet Explorer, Mozilla Firefox, Google
Chrome, Opera gibi browserlarda aynen çalışacaktır. ASP içerisinde Vbscript ve Javascript
denilen scripting dilleri kullanılabilir. Bu da ASP'yi daha cazip hale getiren özelliklerden
birisidir. Eğer daha önce javacript veya Vbscript dilini biliyorsaniz, ASP ögrenmek sizin için
tahmininizden de kolay olacaktır.

ASP.Net

Microsoft tarafından pazarlanan bir web uygulaması teknolojisidir. Özdevinimli web

sayfaları, XML tabanlı web hizmetleri elde edilmesini
sağlar. Her ne kadar isim benzerliği olsa da ASP.NET, ASP'ye oranla çok
ciddi bir değişim geçirmiştir. ASP.NET kodu ortak dil çalışma zamanı alt yapısına dayalı
çalışır.

ASP.NET belgeleri ASPX yapısını kullanırlar. ASPX belgesi, özdevinimsiz

(statik) HTML veya XHTML tabanlı, web sayfasında belirecek olan içeriğin yanı sıra, sunucu
5
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

tarafından çalıştırılacak olan özdevinimli kodu da iki ayraç arasında tutar Bu her ne kadar
sıkça kullanılan bir durum olsa da, genelde uzmanlarca tavsiye edilmez. Onun yerine, içerik
ve kodun ayrılması önerilir. Kullanılan dile göre, sunucu tarafından çalıştırılacak kodu içeren
belge Sayfam.aspx.cs (C#) veya Sayfam.aspx.vb (VB.NET) olarak adlandırılabilir.

ASP.NET'in kullandığı diğer belge türleri arasında ascx, asmx, ashx,

master, sitemap, skin ve config sayılabilirler.

PHP

PHP programlama dilinin, 1994 yılında Rasmus Lerdorf tarafından 1995 yılı başlarında ise
PHPPersonel Home Page Tools adı altında iki sürümü piyasaya çıkarıldı. İlk sürümde sadece
sayaç, misafir defteri ve buna benzer basit işlemler gerçekleşebiliyordu.

1995 yılının ortalarına doğru, PHP'nin ana mekanizması yeniden yazıldı. İçerisine Rasmus
Lerdof'un yazmış olduğu başka bir paket olan FI, MySQL desteği ve HTML form yorumlayıcı
yerleştirildi. Sonunda yeni
çıkan pakete PHP/FI sürüm 2 adı verildi.

1997 yılının ortalarında ise PHP'nin ana mekanizması Andi Gutmans tarafından yeniden
kodlandı ve yeni pakete PHP sürüm 3 (PHP3) adı verildi. Günümüzde PHP dili milyonlarca
web sayfası tarafından kullanılmaktadır.

PHP, HTML içerisine sıkıştırılmış, sunucu tarafında çalışan, C tipinde

bir script yazılım dilidir. PHP'nin en güçlü ve en önemli özelliği Oracle, Adabas D, Sybase,
FilePro, mSQL, Velocis, MySQL, Informix, Solid, dBase, ODBC, Unix dbm ve PostgreSQL veri
tabanlarına hızlı ve güvenli erişebilmesidir.

Expression Web (Frontpage)

Herkesin çok iyi bildiği Microsoft FrontPage, artık yerini Expression Web programına
bırakmıştır. Expression Web, Web sayfası ve Web sitesi oluşturmak için geliştirilmiş bir
programdır.

Microsoft'un kendisine aittir. Expression Web'i önemli kılan birkaç özellik ise;

Basit bir doküman dosyası hazırlar gibi web sitenizi hazırlayabilir, sitenize ait sayfaları
şema halinde oluşturup şemaya göre sitenizi düzgün temellere oturtabilirsiniz.

6
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

Sitenizi oluştururken yerleştireceğiniz web alanına ait dizini tanımlamada bir yığın FTP
işlemi ile uğraşmadan kendi dizin yapısıyla sitenizi yayımlayabilirsiniz.

Frontpage'den sonra birçok değişikliklere sahne olan Expression Web ile neler
yapılabileceğini Sanalkurs.net'te bu programla ilgili bölümden öğrenebilirsiniz.

Dreamweaver

Macromedia şirketi tarafından geliştirilen, Adobe'nin Macromedia'yı

satın almasından sonra Adobe Dreamweaver adını alan yazılım, bir ağ sayfası geliştirme
aracıdır.

Server Behaviors Dreamweaver ile sunucu taraflı projeler geliştirme imkânı sağlayan
kullanıcı dostu bir ara yüzü de bünyesinde barındırmaktadır.

Dreamweaver'da;

Kayıt giriş
Güncelleme ve silme gibi veritabanı işlemlerinden,
Üyelik sistemi ve kullanıcı yönetimi gibi birçok işlemi yapabilmek mümkün.
Üstelik herhangi bir programlama bilgisine de ihtiyacınız olmadan bu tür projeler
geliştirebilmeniz de mümkündür.
Dreamwaver'da kullanılabilecek web programlama dilleri şunlardır: HTML, PHP, ASP (VB
script ve Javascript, ASP.NET, Javascript, CSS, XLS, XML, Action Script, Java vs.

Photoshop

Photoshop grafiklerinizi ve fotoğraflarınızı şekillendirebileceğiniz ve

düzenleyebileceğiniz bir resim editörüdür.

Photoshop ile:

Web sitesi oluşturabiliriz,

Web sitemize link verebiliriz,
Fotoğraflarımızı istediğimiz şekilde düzenleyebiliriz,
Küçük çaplı gif animasyon uygulamaları yapabiliriz.

Niçin Photoshop Kullanmalıyız?

7
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

İnternet dünyasında milyonlarca tanıtım, site, duyuru vs. gibi bir çok temeli tasarıma
dayanan planlar veya projeler hazırlanmaktadır. Bunların amacı, insanların dikkatini
çekmektir. Dikkat çekmek ise güzel
bir tasarım ve insanları gözlerini kamaştıracak türden şekiller olmalıdır.

Bunlar için de günümüzde grafik tasarımlı programlar kullanılmaktadır.

Photoshop, kullanımının daha kolay ve özelliklerinin daha fazla olmasıyla en çok tercih
edilen grafik düzenleme programıdır diyebiliriz.

Flash:

Flash; ilk olarak Macromedia firmasının çıkarmış olduğu, hareketli animasyonlar

yapabildiğiniz, tasarımcıların bir numaralı gözdesi olan programdır. Sonradan yine Adobe
tarafından satın alınarak geliştirilmiştir.

ActionScript desteğinin güçlendirilmesi ile de son derece ciddi bir kimlik kazanmıştır.

Flash ile:

Tamamen animasyonlu bir flash web sitesi yapabiliriz,

Web sitelerimiz için hareketli animasyonlar,
Logo, banner vb. tasarımlar
Ziyaretçi defteri,
İletişim formu,
Çeşitli kullanıcı arabirimleri vs.

Freehand

Macromedia Freehand olarak piyasaya sunulan program MX (v.11) sürümü ile birlikte
Adobe tarafından satın alınmış ve Adobe içinde muadili olan programlar (InDesing,
Illustrator) olduğu için geliştirilmesi durdurulmuştur.

Vektörel çizim üzerine geliştirilmiş bir masaüstü çizim uygulamasıdır.

Türkiye'de halen yaygın şekilde kullanılmaktadır. Freehand ile vektörel grafikler oluşturmak
oldukça kolaydır.

8
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

Fireworks

Fireworks programı daha çok internette web tasarımı yapmaya, grafik sayfaları ve
animasyonlar hazırlamaya imkân veren gelişmiş bir grafik programıdır. Sadece web için
kullanılyor olması onu Photoshop'tan ayırır.

Photoshop gibi gelişmiş özellikler içermez, ama web tasarımı konusunda

birçok seçenek sunar.

Açılır pop-up menüler, animasyonlar, güçlü efektler ve bunun gibi bir çok imkânlarla estetik
web sayfaları hazırlayabilirsiniz.

Fireworks programının artı bir özelliği de Adobe'nin tüm programlarıyla

uyum içinde çalışmasıdır.

Fireworks ile:

Bir web sayfasını tamamen grafik tabanlı hazırlayabileceğiniz gibi, tek başına küçük
bannerlar, hareketli resimler de yapabilirsiniz.
Ekstra özellikleri olduğu gibi mutlaka Photoshop kullanmak isteyeceğiniz negatif yönleri
de vardır.
Kısaca; Fireworks, her açıdan son sürümünde eklenen gelişmiş özellikleri ile bir web
tasarımcısına ihtiyacı olan her şeyi sunuyor diyebiliriz.

Ajax

Ajax anlam olarak Javascript ve XML'in farklı zamanlarda kullanması anlamına geliyor.
Özetle sayfanız yüklendikten sonra sayfanızın hala veri alıyor ya da gönderiyor olmasıdır.

Ajax, 2005 yılında Google'ın önerisi üzerine popülerleşmiştir. Ajax yeni bir dili programlama
değildir, mevcut dilin farklı şekillerde kullanılmasıdır.

Ajax, javascript ile yazılır ve ASP, PHP, ColdFusion gibi diğer diller ile zengin ve aktif olarak
kullanılabilir.

FTP

FTP'nin açılımı File Transfer Protocol'dür. Örneğin bir bilgisayar firması yeni donanım
sürücülerini, bedava yazılımlarını kullanıcılara FTP sunucusu üzerinden iletebilir.

9
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com
 Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com

Çoğu FTP sunucusu hat kesintisi gibi durumlarda yarıda kalan dosyaları
kaldığı yerden indirmeyi destekler.

Örneğin bedava Web alanı veren bir siteden bir alan aldınız; hazırladığınız Web sayfalarını
oluşturan dosyaları bu alana göndermek istiyorsunuz. Bu işlemi, size verilen kullanıcı ismi ve
şifrenizi kullanarak ilgili FTP sunucusuna gönderebilirsiniz. FTP sunucuları PC'nizde olduğu
gibi klasörler şeklinde düzenlenmiştir ve herkesin kullanımına açık olan klasörler genelde
pub adlı klasör altında bulunur.

Gelişmiş özelliklere sahip bir FTP programının adını vermek gerekirse, CuteFTP ve Filezilla yı
örnek gösterebiliriz.

10
Ücretsiz Web Dersleri : www.WebDerslerim.Com
www.mertsuslu.com