Çok detaylı yazamayacağım ama kılavuz niteliğinde birkaç şeyi maddeleyelim:
:arrow: HTML (Hyper Text Markup Language) WWW'in taban platformudur. Hangi dili kullanırsanız kullanın sunucu o kodu HTML olarak yorumlar. HTML; C, V.Basic, Java gibi bir "compiled" (derlenmiş) dil değil, yorumlayıcıdır. HTML (tag) etiketlerden oluşur. Bu etiketler, içerdiği bloğun nasıl görüntüleneceğini belirler. (Örnek; koyu yazı için <b>Koyu yazı</b> gibi...)
:arrow:
HTML'in yapısı
HTML, Head ve Body olmak üzere iki ana bloktan oluşur. Head içersine sayfa ile ilgili özellik bilgileri yerleştirilir. Bu bilgiler browserda görüntülenmezler. Body bölümü ise sayfa içeriğinin yer aldığı bölümdür.
Kod:
<HTML>
<HEAD>
<TITLE>HTML sayfa başlığı</TITLE>
</HEAD>
<BODY>
<B>HTML sayfa içeriği</B>
</BODY>
</HTML>
:idea:
W3 Schools HTML Tutorial
:arrow:
HTML Editörleri
Websayfası yazmak için ille de bir uygulama/program kullanmak gerekmez. Windows'unuzun notepadi ile de hertürlü web-dilini rahatlıkla yazabilirsiniz. Yeni başlayanlara tavsiyem, (bu işi ciddi düşünüyorlarsa) FrontPage, DreamWeaver gibi yazılımlardan önce notepad kullanmaları. Bu şekilde HTML taglarını, attributeları ve diğer dillerin yapılarını çok daha iyi kavrarsınız.
:arrow: 2 tip script dili vardır: Server-Side (Sunucu taraflı/tabanlı), Client-Side (İstemci taraflı/tabanlı)
:arrow:
İstemci Tabanlı Diller
Client-side dillere örnek olarak JavaScript (Sun), JScript (Microsoft), VBScript verilebilir. Bu diller (sitenin barındırıldığı) sunucudan bağımsız, tarayıcı (browser) tarafında çalışırlar. (Tarayıcının Netscape, Internet Explorer veya Opera olması ve versiyon farklılıkları yazılan kodda kullanılan metodlarda düzenleme yapmayı gerektirebilir. Örnek: Eğer browser IE version 4 ve üstü ise şu metodu kullan, Netscape x versionuysa şunu kullan gibi...)
:idea:
W3 Schools JavaScript Tutorial
:idea:
W3 Schools VBScript Tutorial
:arrow:
Sunucu Tabanlı Diller
Server-Side dillere örnek olarak ASP (Active Server Pages), PHP (Personal HomePage), CFM (Cold Fusion), JSP (Java Server Pages) ve daha birçokları verilebilir. Eğer web üzerinde veritabanı uygulamaları (bu forum gibi), değişken/aktif bilgi içeren sayfalar, sunucu tarafında işlem gören uygulamalar (File upload) yapmak istiyorsanız, bu dillerden birini seçmeniz gerekir.
:idea:
W3 Schools ASP Tutorial
:idea:
W3 Schools PHP Tutorial
:arrow:
Veritabanı
Veritabanı uygulamaları için de SQL bilgisi gerekir. SQL cümleleri anlaşılabilir cümlelerdir ve kodla veritabanı arasındaki pazarlığı sağlar. Veritabanı ugulamaları için (uygulamanın içeriğine ve yapısına göre) Microsoft SQL Server, Oracle, MySQL, MS Access seçilebilir.
:idea:
W3 Schools SQL Tutorial
:arrow:
Grafikler
Websayfalarında kullanılan grafikler "optimize" edilmelidir. Yani, kaliteden çok kaybetmeden doya boyutları düşürülmelidir. Web için standard kabul edilen çözünürlük 72dpi'dır ve RGB paleti kullanılır. (CMYK daha çok matbaa işlerinde kullanılan palettir.) Web'de PNG, BMP, TIF gibi grafik formatları kullanılabileceği gibi seçim JPG ve GIF'ten yana olmalıdır. Bu formatlar paletteki renk sayısını daha çok düşürmelerine rağmen kullandıkları algoritma sayesinde resim kalitesi web için çok yeterlidir.
:idea:
W3 Schools Graphics Tutorial
:arrow:
Stiller ve Arayüz
Bir websayfasında en önemli konulardan biri de stillerdir. CSS (Cascading StyleSheets) ile değişik bloklar için stiller hazırlayabilirsiniz. Bu şekilde, aynı stili birçok yere ayrı ayrı uygulamak yerine class referanslarla bu işi çok kolay ve doğru bir şekilde halledersiniz. Arayüz değişikliği yapacağınız zaman CSS dosyasını değiştirmek işin en büyük kısmını halleder. CSS'i JScript ve DHTML (Dynamic HTML) ile desteklemekle sitenize küçük animasyonlar kazandırabilir, sitenizi daha yakışıklı bir hale getirebilirsiniz.
:idea:
W3 Schools CSS Tutorial
:idea:
W3 Schools DHTML Tutorial
ve son olarak:
:arrow:
Dikkat edilmesi gerekenler
Alan Adı
Alan adınızın, işlediğiniz konuyu yansıtması en önemli ilkedir. Eğer ciddi bir site oluşturuyorsanız, konuyu en fazla 2-3 kelimede anlatan (3 bile çok) bir domain almanız çok büyük fayda sağlar. karpuz.com, inek.com benzeri alan adlarından (matrak konular dışında) uzak durmanızı tavsiye ederim.
Bedava alan sağlayan cjb.net, geocities.com gibi sitelerden alınan sub-domainler, ciddi ziyaretçiyi kaçırır, yönetimi einizde değildir ve içeriğinizin yok olması gibi durumlarda hak iddia edemezsiniz. Ayrıca bu bedava alan sağlayıcılar, servis içeriği bakımından da çok yetersizdir. Çoğunlukla veritabanı uygulamalarını desteklemezler (Access dışında) Bunun yerine, konunuza uygun bir domaini
GoDaddy.com'dan senelik 8 USD'ye satın alabilirsiniz. Kaliteli hosting (barındırma) seçenekleri 5-10 USD/ay'dan başlar.
Planlama
Siteyi hazırlamaya başlamadan önce mutlaka kağıt üzerinde planlama yapılmalıdır. Bağlantılar, kategoriler, menuler önceden belirlenmelidir. İleriye dönük yapılan bu çalışma, birçok hatayı önceden önler ve sitenin son halini canlandırdığı için tasarımcıya/programcıya yeni fikrler kazandırır.
Kullanım kolaylığı: Menüler
Hazırladığınız sayfa, kullanıcıyı zorlamamalı. Navigasyon kolay olmalı. Menuler göze hemen çarpmalı ve kısayol linkleri bolca kullanılmalıdır. Tasarım hiçbir zaman kullanım kolaylığının önüne geçmemelidir çünkü ziyaretçinin temel amacı istediği bilgiye bir an önce ulaşmaktır.
Kullanım kolaylığı: Cookie
Özellikle bir üyelik sisteminiz varsa, kullanıcıyı bir sonraki gelişinde tanımak için cookieler kullanılmalıdır. Cookieler, kullanıcının bilgisayarında, sitenizin imzası ile bırakılan zararsız küçük text dosyalarıdır. Bu işlem, kullanıcıya tekrar tekrar login olmadan tanınma kolaylığı sağlar.
Hızlı sayfalar: Grafikler
Grafiklerin optimize edilmesi kadar boyutlarının da standartlara yakın hale getirilmesi önemlidir. Günümüzde en çok kullanılan ekran çözünürlükleri 1024x768 ve 800x600'dür. Bu durumda kullanacağınız grafiklerin en yüksek genişliğinin 800 pixel, uzunluğunun 600 pixel olmasında fayda var. Dijital fotoğraf makinanızla çektiğiniz aile resminizi hiç editlemeden webe koyamazsınız. Genelde bu resimler webe göre gereğinden çok yüksek boyutlarda olur.
Hızlı sayfalar: İçerik
Hızlı sayfalar için bir diğer önemli nokta da ve en büyük yanlışlardan biri de anasayfaya bütün içeriği yerleştirmeye çalışmaktır. Bunun yerine kategoriler/başlıklar oluşturup içeriği alt sayfalara bölmek gerekir.
Hızlı sayfalar: Hızlı/Yavaş Kullanıcı
Türkiye'de ADSL ve KabloNet'in yaygınlaşması ne kadar hızlı olursa olsun, Dial-up'la bağlanan kullanıcıları düşünmek gerekir. 256Kbps ADSL bağlantısı olan bir kullanıcı saniyede 32KByte ( 256/8 ) veri alımı (download) sağlayabilir. Bir dial-up kullanıcı ise 3-4KByte'ı aşamaz. Bu değer neredeyse ADSL'in 10'da biridir. Bu açıdan sayfaların yükleme süresini test edecekseniz bu işi dial-up'ta yapmak önemlidir.
Renkler
Renk seçimi, göründüğünden daha önemlidir. Örneğin, bir hastane sayfası siyah/koyu renklerde olmamalıdır. İç açıcı, daha açık renklerde olmalıdır. Renklerin konuyu destekler biçimde seçilmesi, ziyaretçiyi evinde hissettirir. Çoğu zaman bu seçim özgürce yapılabilir. Fakat bu sefer destekleyici renkler, (yani zemin rengin üzerindeki, cell, table ve grafiklerin içerdiği renkler) çok önem kazanır. Keskin kontrastlar gözü yorar ve algıyı yavaşlatır. Renk uyumunun nasıl çalıştığı en güzel doğada görülür. Örneğim, doğada hiçbir zaman cırtlak bir çingene pembesi üzerinde mat bir kahverengi göremezsiniz.
Logo
Her sitenin bir logosu olmalıdır. Yapacağınız site bir firma olmasa bile, logo şarttır. Zamanla logonuz kimliğiniz haline dönüşür. Farkında olmadan markalaşırsınız. Kimbilir belki ilerde bu logo şirketinizin de logosu olur.
İçerik
İçerik hazırlanırken, site konusunun dışına çıkılmamalıdır. Ek bilgiler vermek, çok bilgi içermek her zaman iyi değildir. Karışıklık, kalabalık yaratır. Bunun yerine (gerektiği yerlerde) diğer ilgili sitelere/sayfalara linkler vermek siteye değer katar. Konu ile ilgili bilgilerin geniş olması siteyi vazgeçilmez hale getirir. Fakat bu bilgileri derlemek işin en önemli noktasıdır. Kategoriler, menüler burda çok önem kazanır. Uzun bir konuyu tek sayfada anlatmamak gerekir. Sayfalara numaralar vererek veya alt-kategoriler oluştururarak konuyu ana başlıklara bölebilir, kullanıcının uzun bir konuyu rahatlıkla algılamasını sağlayabilirsiniz. Aksi halde, içeriğiniz ne kadar dolu ve doğru olursa olsun göz yorar, kullanıcıyı sıkar ve kaçırır.
Linkler
Bir yazının link olduğu ilk bakışta anlaşılmalıdır. Bunu, alt çizgiler veya farklı renklerle sağlayabilirsiniz. (IE ve Netscape'te linklerin altı otomatik olarak çizilmektedir.)
Site dışına verilen linkler yeni pencerede açılmalıdır. Kullanıcı sitenizi gezmeye devam etmek istiyor olabilir. Aynı browserda verilen dış link, ziyaretçi istemediği halde onu kaybetmenize neden olabilir.
:arrow: Web programlama öğrenme sırası şöyle olmalıdır:
1. HTML, CSS
2. JScript (veya JavaScript), VBScript, DHTML
3. ASP, PHP veya diğer bir server-side dili
4. SQL
:arrow: Etkileyici tasarımlar yapmak için en çok önerilen uygulama ve teknolojiler Adobe PhotoShop, Macromedia Flash, Macromedia FreeHand, Macromedia FireWorks...
Çok olmasa da biraz detaya girmişim. :shock: Bunların dışında aklıma gelenleri eklemeye devam ederim. 8)
Kolay gelsin.
