Tövbe]{aR

1 - Bir Web Sitesinin Sahip Olması Gereken Özellikler

Web Tasarım Eğitim Serime Hoşgeldiniz.

Bu ders ilk dersimiz. Bu derste bazı şeylere giriş yapacağım. Sadece teorik olarak birşeyler anlatacağım. Bu yüzden deneyimli internet kullanıclarının bu dersi okumasına gerek yok.

Bir websitesini güzel kılan birkaç unsur vardır. Siz kendi tasarımınızda bu unsurları yerine getirdiğinizde websiteniz güzel olur. Ayrıca belirteyim her zaman güzel site güzel hit alan site demek değildir. O yüzden bizim için önemli olan sitenin hit alması değil yeterli olmasıdır. Bu yeterliliği sağlayan unsurlar şunlardır :

* Tasarım - Renk Uyumu
* Menü
* İletişim Bilgileri
* Hız
* Kullanım Kolaylığı - Açıklamalar
* Dinamik İçerik

'tir. Bu özellikleri aşağıda tek tek açıklıyorum.
Tasarım - Renk Uyumu
Bir websitesinin ikinci göze çarpan özelliği tasarımıdır. Birincisinide websitenin açılmasını sağlayan hız faktörüdür. Hız'ı aşağıda inceleyeceğim için geçiyorum. Tasarımda benim fikrime göre sadelik önemlidir. Dediğim gibi benim fikrime göre. Her zaman sade tasarımlardan hoşlanmışımdır. Ayrıca iyi renk seçimi tasarım için önemlidir. Renk seçimi için COLOURlovers :: Color Trends + Palettes adresinde öneriler bulabilirsiniz. Genel bir renk temasını önceden belirleyip, o renkleri kullanmanız sitenin görünüşünü daha güzel hale getirir. Bu sayede kullanıcının gözüde yorumlamış olur. Güzel bir logo ile tasarımı süslemeyi ise benim burda bahsetmeme gerek yok. Zaten çoğu kişi bunun farkındadır.
Menü
Menüler sitedeki gerekli olan gezintiyi sağlayan yapılardır. Olmazsa olmazlar arasındadır. Menülerde dikkat edilmesi gereken bir kaç husus vardır. Menü'de genel olarak çok fazla seçenek bulunmaması gerekir. Çünkü bu kullanıcının seçimini zorlaştırır. Eğer çok seçeneğim var diyorsanız bir alt menü uygulaması yapabilirsiniz. Yani ya menüdeki linke tıklayınca yada linkin üstüne gelince bir alt menü açılması sağlanarak bu karışıklık giderilmiş olur. Menünün aynısından sitenin altında bulunması kullanım kolaylığı bakımından önemlidir. Büyük siteleri incelediğinizde de zaten alta bir tanede daha menü olduğunu görürsünüz.
İletişim Bilgileri
İletişim bilgilerinin doğru ve tutarlı olması kullanıcıya site hakkında güven verir. Ayrıca sitedeki hataların, şikayetlerin, önerilerin geri dönmesinde yardımcı olur. Siteye bir mail adresinin yanında kolayca site sahibine mesaj gönderebilecekleri bir form koyarsanız kullanıcın mesaj göndermesini kolaylaştırmasını sağlanırsınız. Hazırladığını bu iletişim formuna sizinle alakası olmayan (telefon numarası, ayakkabı numarası) gibi soruları sormazsanız kullanıcıyı sıkmamış olursunuz.
Hız
Yukarıdada bahsettiğim gibi bir sitenin göze çarpan ilk özelliği hızlı olup olmadığıdır. Hızlı bir sitenin her zaman daha çok şansı vardır. Bu hızın %50'lik kısmı hazırlayan kişiye, diğer %50'si ise hosta bağlıdır. Hazırlayan kişinin resimleri olabildiğince sıkıştırması, table yerine div kullanması hızda artış sağlayacaktır. Belki küçük farklar yaratacak düzenlemeler büyük bir çalışmada sitenizi gözle görünür bir şekilde hızlandıracaktır. Algoritmaları daha iyi düşünürek kurmada hızınızı artıracaktır. Host seçiminizide hız farktörünü göz önüne alarak yapmanız gerekmektedir.
Kullanım Kolaylığı
Bir siteye giren herkesin interneti iyi bilme zorunluluğu yoktur. O yüzden sitenizdeki bütün açıklamaları hiç bilmeyene göre yapmanız sitenizin genele hitap etmesini sağlar, ama mesela siz sadece doktorlara hitap edecek bir site yapacaksanız doktorların anlayacağı dilde bir açıklama yapmanız kullanıcıyı sıkmamış olur. Şu anda aklıma gelen bir düşünceyide paylaşayım. Sitenize ilk girişte bir seçim yeri ekleyerek kullanıcının deneyimini sorabilirsiniz. Deneyime göre farklı mesajlar gösterebilirsiniz sitede. Bu sayede kullanıcıyı ne sıkmış, ne de zorlamış olursunuz.
Dinamik İçerik
Dinamik içerik sitenin içeriğinin veritabanından alınmasıdır. Haber siteleri, kişisel siteler ve çoğu site dinamik içerikten oluşmuştur. Dinamik içerik bulunduran bir site server-side programlama dili (PHP,ASP,ASP.NET,JSP) kullanmak zorundadır. Bu sitelerde genelde bir admin paneli bulunur kullanıcı bu admin paneliden siteye bilgi ekler. Bu bilginin her yerde kolayca eklenebilmesini sağlar.

Yukarıda bahsettiğim özelliklere sahip olan siteler, genellikle başarılı olurlar. İleriki dersimde HTML ufaktan bir giriş yapacağım.

Tövbe]{aR

Serimizin ikinci dersine hoşgeldiniz. Bu derste websiteyi yapmadan önce yapmanız gereken şeylere değineceğim. Zira bu yapacağımız şeyler, sizi ileride projenizi sıfırdan kodlamaya varacak şekilde hatalardan uzak tutacaktır.

Web Sitesini yapmaya başlamadan önce iyi bir düşünme sürecinden geçmeniz lazım. Ayrıca projenin bütün detaylarını bilmeniz gerek. Elinize bir kağıt alarak yada not defteri'ni açarak sayfa adlarını ve bu sayfalarda neler yapılacağını yazmanız gerek. Örneğin :

index.php -> Giriş yapılan sayfa
kayit_oku.php -> Kayıtların okunduğu sayfa

gibi. Bunu hazırladıktan sonra veritabanını hazırlayın. Veritabanında bütün alanları ekleyin. Veritabanınızıda hazırladıktan sonra tasarımı yapmaya başlayın. Tasarım tam olarak bitmeden kodlamaya geçmeniz, daha sonradan olabilecek değişikler nedeniyle zorlayacaktır. Bu nedenle tasarımı hazırladıktan sonra kodlamaya geçilmesini tavsiye ediyorum. Tasarımı sayfa sayfa hazırladıktan sonra, tasarımı kodlarımızın içine gömebiliriz. Her sayfanın başında olacak bir ayarlar sayfası hazırlayın. Bu sayfada adından da anlaşılacağı gibi sitenin genel ayarları bulunacak. title tagları arasına bir tane daha php dosyası ekleyin, bu dosya sayesinde daha sonradan ekleyebileceğimiz javascript,css dosyalarımızı her sayfaya kolay bir şekilde ekleyebileceğiz. Bu örnekler daha da çoğaltılarak, alt kısma yan kısma ekleme sayfalar yapılabilir.

Projenizi kodlamaya başladıktan sonra projenizin sık sık yedeğini alın. Yani mesala V0.1 deyin yedekleyin. V0.2 deyin yedekleyin. Farklı farklı yedekleriniz olsun. Ayrıca çıkarılabilir bir diske güncel olarak yedekleyin. Bu güncel yedekleme işlemini belirlediğiniz zamanlar arasında yapan goodsync adında bir program var. Bende onu kullanıyorum.

Tövbe]{aR

Merhabalar, 3.dersimize hoşgeldiniz. Bu dersimizde kodlarımızı yazmak ve test etmek için gerekli olan programlardan bahseteceğim.

Web Tasarım Eğitimi yazı dizisinde bundan sonra php ile anlatımlar vereceğimden php kodlarını test etmek için gerekli olan uygulamalara yer vereceğim.

Kodlarımızı yazdıktan sonra bu kodları her seferinde uzaktaki bir siteye atmak gayet yorucu ve zaman savurganıdır. Bu yüzden yazdığımız kodları hiçbir yere göndermeden, kendi bilgisayarımız üzerinde test etmemiz gereklidir. Bu testi yapan uygulamalardan en önemlisi apache'dir. Microsoft'un IIS'nin üzerine php kurarakta php kodlarınızı çalıştırabilirsiniz fakat ben bunu hiç tavsiye etmem. Nedeni ise hız konusunda büyük kayıplar yaşamamız. Apache'nin ise içinde mysql vb. bulunan bir toplu paketi var. Adı xampp . Bu paketi indirip doğrudan bilgisayarınıza apache kurabilirsiniz.
xampp'ı kurduktan sonra dosyalarımızı C:\xampp\htdocs adresine atarak çalıştırabiliriz.

Geldik kullanacağımız metin editörüne. Benim kullandığım 2 tane editör var. Bir tanesi notepad++ diğeri dreamweaver . Notepad++ bildiğimiz not defteri gibi sadece kodlara renklendirmeler yapıyor. Dreamweaver ise çeşitli efektleri, çeşitli kodları kendisi yazabiliyor. Size tavsiyem dreamweaver olacaktır. Dreamweaveri kurduktan size nasıl yeni proje açıldığını anlatacağım.

Video : DreamWeaver Site Oluşturma

Projemizi açmayı öğrendik şimdi ise kurduğumuz xampp test edelim. Dreamweaver ile yeni bir sayfa açıp (kısayol : CTRL + N) sayfanın kod kısmına
view source
print?
1. <?php phpinfo(); ?>
yazıp index.php diye kaydedelim. Daha sonra bunu localhost/site_ismi diye açıp test edelim. Eğer çalıştıysa tebrikler başardınız.