Hiç düşündünüz mü ? Bizim çok rahat bir şekilde erişebildiğimiz, aradıklarımızı gayet kolay bir şekilde bulduğumuz, birçok işimizi kolaylaştıran bir web sitesi , hangi aşamalardan geçtikten sonra bizlere ulaşıyor ? Bir web sitesi yapmak zor mu ? Bir web sitesi ne kadar zamanda yapılır ? İşte bu makalemizde de anlatacağımız konu bu, Bir Web Sitesi Nasıl Yapılır, Hangi Aşamalardan Geçer ?
Bu makale aynı zamanda web sitesi yapmak isteyenler için bir yol gösterici niteliğinde de olabilir. Hiç vakit kaybetmeden ilk adım olan tasarımdan başlayalım.
Aşama – Web Sitesi Tasarımının Yapılması
Eğer bir şeyler çizmeyi seviyorsanız bu aşama sizin için en eğlenceli aşama olacak büyük ihtimalle. Bir web sitesi çizileceği zaman genellikle ilk yapılan iş sitenin belli bölümlerinin tasarımcının kafasında canlandırması ve bunları bir kağıda aktarmasıdır. Tasarımcı sitenin genel bölümlerini düşünür ve bunları kullanıcıya en iyi deneyimi sunacak şekilde yerleştirilir. Örnek olarak; web sitesinin içeriği sitenin sol tarafında olacak, sitenin sağ tarafında sık kullanılan bağlantılar olacak, alt kısımda telif hakkı ve sosyal bağlantılar, üst kısımda tıklandığında açılacak şekilde hazırlanmış kayıt ve giriş kutucukları olacak gibi. Tasarımcı bu düşüncelerini kağıt üzerine aktardıktan sonra şuna benzer bir görüntü çıkar ortaya.
Web sitesinin kağıt üzerindeki çizimi yapıldıktan sonra sıra bu çizimin bilgisayara aktarılmasına gelir. Kağıt üzerindeki tasarım renklendirmeler ve düzeltmelerle bilgisayarda tekrar çizilir. Bu çizim işlemleri için en çok kullanılan programlar Windows ve OS X işletim sistemleri üzerinde Adobe Photoshop ve Adobe Fireworks’tur. Daha birçok çizim ve tasarım aracı mevcuttur. Linux dağıtımlarında da en çok kullanılan çizim ve tasarım programı GIMP’tir. Birazcık araştırdıktan sonra bu programların kullanımlarını öğrenebilirsiniz. Web sitesi tasarımı yapmak için sadece programları kullanabilmeniz yetmez. Tasarım aşamasında kullanılan renkler, yazı tipi ve yazı boyutu, nesnelerin birbirine yakınlığı/uzaklığı ve benzeri şeyler son derece önemlidir. Yapılan tasarımda okunulabilirlik ve kullanıcının aradığını rahatça bulabilmesi en çok önem verilmesi gereken unsurlardır. Özellikle de yazı tipi ve boyutu burada son derece büyük önem taşımaktadır. Bunlara dikkat edilirse kullanıcılar hazırlanan web sitesindeki içerikleri yorulmadan ve severek okuyacaktır. Bu ipucu niteliğindeki bilgileri de verdiğimize göre örnek bir tasarıma bakabiliriz. İşte size web sitesi çizim aşamasından ufak bir görüntü. Kullanılan program da Adobe Photoshop.
Tasarım aşamasını da bu şekilde açıkladıktan sonra şimdi yavaş yavaş kodlamaya geçelim.
2. Aşama – Web Sitesinin Arayüzünün Kodlanması
Kod yazmak isteyen veya kod yazmayı seven birisiyseniz bu aşama tam size göre ve oldukça eğlenceli. Web sitesi yapımındaki belki de en önemli kısım budur. Her aşamanın önemi çok büyük ama kullanıcının etkileşim içinde olacağı kısım burası olduğu için birazcık daha fazla öneme sahip olabilir. Web sitesi arayüzü kodlanırken önce HTML dilinde sitenin iskeleti oluşturulur. HTML dilini öğrenmek isterseniz google’da “HTML Dersleri” aramasını yapmanız yeterlidir. HTML konusu diğer konulara göre anlatması daha karmaşık bir konu olduğu için bu kısmı hızlıca geçiyorum ama kısaca açıklamak gerekirse HTML sitemize nesneler eklememizi sağlar, örneğin resim, video, paragraflar ve diğer nesneler. HTML yazım şekli genel olarak şöyledir;
İsterseniz Wikipedia sayfasından daha detaylı bir şekilde okuyabilirsiniz. Bir de sizlere örnek bir HTML kodu gösterelim.
Web Sitesi arayüzü kodlarken kullanılan dillerden bir diğeri de CSS’tir. CSS’in görevi de HTML ile oluşturulan nesneleri biçimsel olarak düzenlemektir. Örneğin HTML ile oluşturduğunuz bir resim nesnesine CSS dili ile genişlik, yükseklik, kenarlıklar, iç boşluk, dış boşluk gibi özellikler atayabilirsiniz. Bu özellikler web sitesi için hayati önem taşıyan unsurlardır, sitenizin güzel görünmesini sağlar. Eğer siteniz güzel görünürse de kullanıcılar sitenizde daha fazla durmak isterler ve sizin sitenizden içerikler okumaktan zevk alırlar. CSS yazmak HTML yazmaktan birazcık daha eğlencelidir. Tabiki bu kişiden kişiye değişebilir. CSS’in yazım şekli de genel olarak şöyledir.
nesne ismi {
özellik_ismi : değer;
diğer_özellik : değer;
bir_başka_özellik : değer;
}
CSS hakkında daha fazla bilgi sahibi olmak isterseniz ilgili Wikipedia sayfasını okuyabilirsiniz. Bir de merak edenler için örnek bir CSS kodu paylaşalım dedik. Buyrun;
Tahmin edebileceğiniz gibi hazırlanan web sitesinin kullanıcıyla etkileşim halinde olması için sadece HTML ve CSS yetmez. Sayfalarınızda kullanıcının hoşuna gidecek ufak animasyonlar, sayfa yenilemeden yapılan bazı ufak tefek işlemler de sitenizin kullanıcılara daha şirin görünmesini sağlar. Bu tarz işlemler için de Javascript kullanmanız lazım ama javascript burada anlatamayacağım kadar uzun bir konu. Bu yüzden Wikipedia sayfasından okumanızı tavsiye ederim. Yine de kısaca yaptığı işten bahsedecek olursak şunları listeleyebiliriz;
-
Kullanıcının yaptığı işlemleri hızlandırmak (Mesela kullanıcı formundaki tüm alanların dolu olup olmadığını kontrol etmek, böylece kullanıcı formu göndermeden olası hataları gösterebilecek)
-
Sayfaya görsel açıdan zenginlik kazandırmak (Animasyonlar vs…)
-
Sayfalarınızı dinamik ve etkileşimli hale getirir
En temel yararları bunlardır. Web sitesi hazırlanırken kullanılması oldukça önemlidir. Arayüz kodlaması da bu şekilde yapılıyor. Şimdi web sitesi yazılımının nasıl yapıldığına geçmeden önce ufak bir javascript kod örneği gösterelim.
Yukarıda sizlere gösterdiklerimiz sadece basit örnek kodlar, normal bir web sitesi daha karmaşı ve daha uzun kodlamaya sahip, bunu unutmayalım. Arayüz kodlama hakkında söyleyeceklerimiz burada son buluyor. Şimdi benim asıl alanım olan Web Sitesi Yazılımı kısmına geçelim. İşte bu web sitesi yapımının en zahmetli ve zor kısmı.
3. Aşama – Web Sitesi Yazılımının Yapılması
Böyle söylediğimizde belki anlamamış olabilirsiniz. Yazılım derken ne kastettiğimi bilmiyor olabilirsiniz. Şimdi bunu açıklayacağım. Web sitesi yazılımı sitenin sistemi diyebilir. Bir vücut gibi düşünün. HTML vücudun iskeleti oldu, CSS bu iskelete deri ve kas oldu, Javascripti de sizlere bırakıyorum, eğer anlattıklarımı anladıysanız javascriptin vücudun nesi olduğunu bulursunuz. Şimdi yazılım kısmına bakalım. Sitenin yazılımı da sitenin içindeki organlardır. Vücudun çalışmasını sağlar. Bir site için her şeyi yapabilir. Burada yapabileceğimiz her şeyi yazamayız ama kısaca birkaç madde gösterebiliriz.
-
Kullanıcılardan veriler almak (Formlar yoluyla vs…)
-
Alınan verileri işlemek
-
Verileri veritabanına kaydetmek
-
Veritabanındaki verileri tekrar çekip kullanıcıya sunmak
Bu maddeleri örnek gösterebiliriz, ama bu konuyla hiç alakanız olmadığını düşünürsek şu şekilde daha basitçe yapabileceğimiz şeyleri listeleyebiliriz.
-
Siteye haber / konu / ders ekleme
-
İçeriklere yorum yapma
-
Yapılan yorumları silme / düzenleme
-
Üye kayıt ve üye giriş sistemleri
-
İçerik beğenme / beğenmeme sistemi
Bunun gibi aklınıza gelebilecek her şeyi yapabilirsiniz. Peki nasıl yapılıyor bunlar ?
Bir sitenin yazılımını yapmak için birçok alternatif diliniz var. Bu dillere şunları örnek verebiliriz mesela;
-
PHP
-
C#
-
Ruby
-
Python
-
Java
Bizim ele alacağımız dil ise PHP. Şimdi konuyu daha fazla saptırmayalım. Web sitesi tasarımı yapıldı, arayüzü kodlandı ve bana yani yazılımcıya gönderildi. Ben ne yapıyorum peki ? Aldığım kodlanmış arayüzü parçalara ayırıyorum. Mesela üst kısım, yan kısım, alt kısım gibi. Daha sonra bir veritabanı oluşturuyorum. Parçaladığım bölümlerdeki içerikleri dinamikleştirmeye çalışıyorum. Yani oraya önceden yazılmış içerikleri alıyorum ve bu içerikler yerine veritabanıma kaydedilen içerikleri çekiyorum. Böylece yeni içerik kaydedildiği zaman her seferinde kodları yenilemem gerekmiyor. Bu kısım diğer kısımlara göre çok daha karmaşık olabilir. Bu yüzden tam olarak anlamayabilirsiniz ama şunu söyleyebiliriz: “Web sitesi yazılımı, web sitesinin kalbi ve beynidir”. Yazılım kısmı çok karmaşık olduğu için hemen örnek bir PHP kodu verip bu kısmı geçelim.
4. Aşama – Hosting Ve Domain
Hosting ve Domain kavramlarının ne olduğundan başlayalım isterseniz önce.
Hosting için Wikipedia’nın tanımı şu şekildedir : “Hosting veya Barındırma, bir web sitesinde yayınlanmak istenen sayfaların, resimlerin veya dokümanların internet kullanıcıları tarafından erişebileceği bir bilgisayarda tutulmasıdır.”
Domain için Wikipedia tanımı da şu şekildedir : “Alan adları IP adresi denilen, bilgisayarların (sunucuların/serverların) birbirini tanımasını sağlayan numara sisteminin daha basitleştirilmiş ve akılda kalması için kelimelerle ifade edilmiş halidir.”
Domain ve hosting’in ne olduğu öğrendik. Şimdi web sitesi ile alakasına geçelim. Web sitesinin diğer kullanıcılara sunulabilmesi için bu siteyi bir sunucuya/hosta atmamız lazım. Daha sonra da bu sunucuya kolay erişilebilmesi için bir alan adı / domain gerekecek. Hosting ve domain alabileceğiniz birçok yer mevcut. Fiyat konusu da oldukça iyi. Benim kişisel sitemde kullandığım (dikkat edin megafonn.com‘da değil, kişisel sitemde) hosting hizmeti domain ile birlikte yıllık 80 TL. Ufak bir kişisel site için de gayet iyi bir hizmet bence. Konuyu daha fazla dağıtmayalım. Bir web sitesi hazırladınız diyelim, hosting ve domain hizmeti de satın aldınız, peki şimdi ne olacak ?
Meraklanmanıza gerek yok, şimdi de tek yapmanız gereken hazırladığınız web sitesini alıp sunucunuza atmak. Artık gönül rahatlığıyla satın aldığınız domain’i kullanarak sitenize erişebilirsiniz.
Diğer Sorular
Bir Web Sitesi Yapmak Ne Kadar Sürer ?
Bu Tamamen Yapacağınız Sistemle Alakalı Bir Durum, Ama Ortalama Bir Haber Sitesi Üzerinden Düşünecek Olursak Saat Açısından Tasarımın Yapılması Yaklaşık Olarak 4-5 Saat, Çizilen Arayüzün Kodlanması Da Yaklaşık Olarak 4-5 Saat Sürer. Web Sitesi Bu Aşamaya Geldikten Sonra Yazılımının Yapılması İse Bahsettiğimiz Haber Sitesi + Bütün İçeriğin Yönetilebilir Hale Gelmesi Yazan Kişinin Hızına Bağlı Olarak 15 Saat ile 25 Saat Arasında Değişebilir. Bu Verdiğim Rakamlar Herkes İçin Aynı Olmayabilir. İşini Orta Dereceyle İyi Derece Arasında Bilen İnsanların Ortalama Süreleri Budur. Saat Olarak Baktığımızda En Kötü Şartlarda Bir Sitenin Yapımı Yaklaşık Olarak 35 Saat Sürmektedir Ama Bir İnsan 35 Saat Boyunca Oturup Aralıksız Çalışamayacağı İçin Günde 1-2 Saat Çalışmayla 17-35 Gün Arasında Değişebilir.
Bir Web Sitesi Yapmak Zor Mudur ?
Bu zorluk kişiden kişiye değişebilir. Ayrıca bu zorluk kişinin ne kadar bilgili olduğuyla da ilgilidir. Web sitesi yapımı çok zor bir iş değildir ama küçümsenecek kadar kolay bir iş de değildir. Çok ciddi anlamda odaklanma yeteneği ve uygun bir çalışma ortamı ister.
Web Sitesi Yapmayı Öğrenmek Ne Kadar Sürer ?
Web sitesi yapımını öğrenme süreci tamamen kişiyle ilgilidir, normal şartlar altında 1-2 sene arasında orta seviye web siteleri yazacak kadar öğrenilebilir. Öğrenme aşamasında en önemli unsur pratiktir. Pratik yapmazsanız öğrendiklerinizi unutursunuz. Bunun için yeni şeyler öğrendiğinizde bunu eski bilgilerinize katarak pratik yapmanızda fayda var.
Bu yazımızda anlatacaklarımız bu kadar. Eğer bir web sitesi yapmayı düşünüyorsanız veya bir web sitesinin nasıl yapıldığını merak ediyorsanız sizler için gayet açıklayıcı ve güzel bir yazı olduğunu düşünüyorum. Başka yazılarda görüşmek üzere…
