Bir Tasarımın Anatomisi

Bu sayfada sarmalın şu anki görünümünü tasarlarken neleri göz önünde bulundurduğumu; hangi noktalara dikkat ettiğimi beraber incelemeye çalışacağız.

Bu incelemeyi yaparken karşılaştığım önemli ayrıntılara teker teker dikkat çekerek; başlangıç aşamasından son haline kadar adım adım ilerleyeceğiz.

Hazır mısınız?

Gereksinimler

Sitemizi mümkün olduğunca esnek hazırlamaya çalışacağız. Biraz açarsak;

Farklı ekran çözünürlüklerinde,
Farklı tarayıcılarda (internet explorer, mozilla, opera, lynx...)
Farklı platformlarda (ms windows, linux, PC, laptop, cep telefonu...)
Java Betik desteği (JavaScript support) olsun ya da olmasın

erişilebilirliğini ve kullanılabilirliğini kaybetmeyen bir sayfa tasarımı yapmaya çalışacağız.

Yukarıdaki listeyi biraz daha detaylandıralım:

Ekran Çözünürlüğü

Teknoloji ilerledikçe artık giderek daha büyük monitörler kullanılmaya başladı. Artık 1024×768, 1250×864 hatta 1600×1200 ekran çözünürlüğünü tercih eden kullanıcılara rastlamak hiç de zor değil.

Diğer taraftan 100–200 piksel genişliğinde cep telefonu ekranında internette gezinen kullanıcılara rastlamak da hiç zor değil.

Buradan tek bir sonuca varabiliriz:

Sayfalarınızı sadece tek bir çözünürlüğü göz önüne alarak tasarlıyorsanız; büyük bir hata yapıyorsunuz demektir.

Kısacası "Bu site en iyi M$IE'de 800×600 çözünürlükte görüntülenir" düşüncesi yanlıştır.

Bu düşüncede ısrar edenler '90lı yıllarda yaşamaya devam ediyor ve çağın gereklerini takip etmiyorlar diyebiliriz.

sarmal'ın değişik ekran çözünürlüklerinde görünüşü ekran alanından en iyi şekilde yararlanacak biçimde farklılaşır.

Aşağıdaki çizimler bu sayfanın değişik ekran çözünürlüklerinde nasıl göründüğünü gösteriyor:

layout2

layout1

layout3

layout4

layout5

Bu işlevi nasıl sağladığımıza yazının devamında uzun uzadıya değineceğiz. Şimdilik biraz ipucu verirsem bol bol CSS ve az bir miktar JS ile diyebiliriz ;)

Farklı Tarayıcılar ve Farklı Platformlar

sarmal Mozilla, Operanın ve IE'nin en son sürümlerinde görselliği ve işlevselliği bozulmadan incelenebilir.

sarmal, dünya üzerindeki çoğu tarayıcıda –hatta Internet Explorer'da bile– işevselliğini kaybetmeksizin kullanılabilir.

Ayrıca sarmal, Windows dahil olmak üzere pek çok işletim sisteminde de sorunsuz görüntülenebilir.

Betik Bağımsızlığı

Bu sayfalar hazırlanırken kullanıcının tarayıcısında Java Betiği (JavaScript) desteği olsun ya da olmasın, sorunsuz bir şekilde gezinilecek şekilde tasarlandı.

Betikler, yeni bir işlev sunmak içn değil varolan işlevi geliştirmek için vardır.

Konunun meraklıları için birkaç link:

Başlayalım mı Artık?

Dediğim gibi, adım adım ilerleyerek tüm tasarımın üzerinden geçeceğiz. Ancak öncelikle ortak bir başlangıç noktamız olması gerekli. Bunun için önce bu zip arşivini indirin.

İndirdiğiz arşivi açtığınız zaman farklı dizinler ve boş bir index.html sayfası göreceksiniz.

Dizinleri teker teker ele alırsak:

images/ resimlerimizi saklayacağımız dizin.
lib/css/sarmal/ css dosyalarımızı saklayacağımız dizin.
lib/js/sarmal/ js dosyalarımızı saklayacağımız dizin

olacak.

İşe arkaplanımız sayfa düzenini ve yazı biçimimizi birkaç CSS kuralı ile belirlemekle başlayalım:

/* reset default properties for everything */
*{margin:0;padding:0}

/* -- Elements -- */

body{
  font-family:Verdana, Geneva, Arial, 
      Helvetica, sans-serif;
  font-size:0.9em;
  color:#222222;
  background:#19AADF
}

/* Master Container and Wrappers
   ============================= */

#MasterContainer{
  margin:0px auto;
  background:#19AADF url("../../../images/gradientL.png")
  top left repeat-y
}

#MasterWrap{
  background:url("../../../images/gradientR.png") 
  top right repeat-y;
}

#ContentWrap{
  background:#F0F0F0;margin:0 162px 0 162px;
  height:100%; /*required to fix IE's render anomalies*/
  border-left:1px #0D546A solid;
  border-right:1px #0D546A solid
}

Ve de ilgili HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" 
    xml:lang="TR">
<head>
  <meta http-equiv="Content-Type" 
  content="text/html; charset=iso-8859-9" />
  <meta http-equiv="Content-Style-Type" 
      content="text/css" />
  <link rel="stylesheet" title="MasterStyle" 
      type="text/css" 
      href="lib/css/sarmal/Master_1.css" />
</head>
<body>
<div id="MasterContainer">
  <div id="MasterWrap">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
</body>
</html>

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Sayfa İskeleti

Tipografi ve arka planı belirledikten sonra, sayfanın temel elemanlarını eklemenin zamanı geldi:

index.html:
...

<body>
<div id="MasterContainer">
  <div id="MasterWrap">
    <div id="ContentWrap">
      <!--sayfa başlığı-->
      <div id="Header"></div>

      <!--linkler-->
      <div id="Navigation"></div>

      <!--içerik-->
      <div id="Content"></div>

      <!--sayfa altlığı-->
      <div id="Footer"></div>
    </div>
  </div>
</div>
</body>

...

İsterseniz biraz da CSS ile renklendirelim sayfa iskeletimizi:

Master.css (yeni eklenen tanımlar):
---
/* Header
   ====== */

#Header{
  position:relative;height:119px;
  background:#1295E4 
  url("../../../images/gradientHeader.png") 
  top left repeat-x
}


/* Footer
   ====== */

#Footer{
  background:#F0F0F0;
  border-top:1px #093C78 solid;
  margin:52px 0 0 0;
  padding:0.3em 20px 6.64em 0;
  text-align:right
}


/* Navigation 
   ========== */

#Navigation{
  width:100%;/*for ie render problems*/
  background:#CC0056 
  url("../../../images/gradientNavigation.png") 
  bottom left repeat-x;
  
  height:50px;/*test amaçlı -- kaldırılacak*/
}

#Content{
  height:900px;/*test amaçlı -- kaldırılacak*/
}

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

İkincil İçerik Alanları

Sayfamıza birkaç eleman daha ekleyelim:

...
<div id="ContentWrap">
  <!--sayfa başlığı-->
  <div id="Header"></div>

  <!--linkler-->
  <div id="Navigation"></div>

  <!--içerik-->
  <div id="Content">
    <!--ana içerik-->
    <div id="MainContent">Main 
    Content</div>

    <!--yan içerik #1-->
    <div id="PrimarySideContent">Primary 
    Side Content</div>

    <!--yan içerik #2-->
    <div id="SecondarySideContent">Secondary 
    Side Content</div>
  </div>

  <!--sayfa altlığı-->
  <div id="Footer"></div>
</div>
...

Gereksinimler bölümünü incelediyseniz; sayfa daraldıkça ikincil içerik alanlarını sayfanın altına doğru kaydığını, böylelikle ana içerik alanına daha fazla alan bıraktığını fark etmişsinizdir.

Peki nasıl oluyor da oluyor?

CSS ile çok kolay: PrimarySideContent, SecondarySideContent ve MainContent alanlarını float olarak tanımlamamız yeterli.

Master.css (yeni eklenenler)
---
/* Primary Side Content
   ==================== */

#PrimarySideContent{
  width:210px;float:left;
  padding:10px;
}

/* Secondary Side Content
   ====================== */

#SecondarySideContent{
  width:210px;
  float:right;
  padding:10px 20px 10px 10px;
}


/*
  Main Content
  ============ */

#MainContent{
  width:330px;
  float:left;
  padding:10px;
  padding-left:20px;
  background:#ffffff;
  margin-top:30px;
  position:relative;
  left:20px;
  margin-right:30px;
  ...
}

Artık sayfanızın genişliğini değiştirdiğinizde sağ yandaki ikincil alanlar kendi konumlarını en uygun şekilde ayarlayacaktır. Deneyin ve kendiniz görün.

Şu an için sayfanın davranış biçimi ideal olmayabilir; ileriki bölümlerde üzerlerinde oynamaya devam edeceğiz.

Bildiniz! Bu kadar esnek bir tasarımı tablo tabanlı bir yöntem (layout table) kullanarak elde etmenize imkan yok. Sizce de aptal tabloları bir kenara bırakıp; CSS temelli semantik tasarımlar yapmanın zamanı gelmedi mi?

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Birazcık İçerik Ekleyelim

Sayfanın gerçekçi görünmesi için şu anki ana sayfanın içeriğini aynen kopyaladım. Daha sonra sayfanın görünümünü güzelleştirmek için bir miktar daha CSS ekledim.

Şu ana kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Bu noktada belki de farkında olunmayan birkaç ayrıntıya değinmek yararlı olacak:

Gereksiz (unneccessary), Anlamsız (non-semantic) ve Eskimiş (deprecated) Markuptan Kaçınmak

FONT; CENTER... ve onlarca tag zaman aşımına uğradı ve kullanılmıyorlar. Bunların yerine artık SPAN, STRONG, EM... gibi semantik olarak daha uygun olanları tercih ediliyor.

"Semantik" kullanımdan kastettiğim; tagların görsel özelliklerini bir kenara bırakarak içerdikleri anlama göre kullanılması gerektiği.

Şu ana kadar yaptığımız çalışmadan tüm görsel öğeleri kaldırırsak karşımıza böyle bir görüntü çıkar.

Yukarıdaki linki incelediyseniz, sayfadan tüm biçemin kaldırılmış olduğunu ve sayfa içeriğinin mantıksal bir sırayı izlediğini fark edersiniz.

Sayfanın HTML kaynağına biraz daha yakından bakarsanız tüm tagların içerdikleri anlama uygun olarak kullanıldıklarını fark edeceksiniz:

h1 ... h6 (headings): konu başlığı
p: paragraf
strong: vurgulama amaçlı
ul (unordered list): liste çıkartmak için
blockquote: alıntı yapmak için
a (anchor): link vermek amacıyla
abbr (abbrevation): kısaltma
acronym (abbrevation): kısaltma

İnanmayacaksınız ama sayfada bunlar dışıda başka bir markup kullanılmadı.

Sayfanızdan çıkaracak hiç bir şey kalmadığına emin olana kadar gereksiz öğeleri teker teker ayıklayın.

Peki ne zararı var gereksiz markup kullanmanın? Ya da –başka bir deyişle– tagları olması gereken semantik içeriklerinin dışında kullanmanın?

Öncelikle, anlamı dışında kullandığınız her markup sayfanızın erişilebilirliğini olumsuz yönde etkiler.

Bu da sayfanızı gezinen motor yetenekleri tam gelişmemiş (mouse'u sizin kadar iyi kullanamayan); görme sorunu çeken ya da hiç göremeyen kimselerin kullandıkları yardımcı programların (screen reader) sayfanızı yorumlarken kullanıcının kafasını karıştıracak; sayfanızda gezinmesini zorlaştıracak yorumlar yapmasına neden olabilir.

O nedenle sayfanızın erişilebilir olması etik açıdan önemlidir. Ve bazı ülkelerde (örn. Amerika, İngiltere) erişilebilirlik standartlarına uygun sayfalarınızın olması kanuni bir zorunluluktur. Yani yurt dışıyla çalışmayı düşünüyorsanız; internet sitenizi erişilebilirlik standartları bakımından gözden geçirmeniz gerekebilir.
Olayın etik yanıyla ilgilenmeyi tercih etmeseniz bile unutmayın ki;

Google dünya üzerindeki en zengin kördür.

Google (ve diğer arama motorları) sayfanızın gezinirken görsel olarak ne kadar etkileyici olduğuna hiç mi hiç bakmaz. Sayfanızın semantik yapısına önem verir.

Çünkü semantik şekilde düzenlenmiş bir sayfada çok daha az gereksiz içerik olduğu için arama motorları sayfanızı çok daha kolay endeksler ve arama sonuçlarında daha üst sırada gösterirler.

Arama sonuçlarında üst sıralarda olmanın sayfanıza daha çok ziyaretçi; eğer ticari bir kurum iseniz daha çok potansiyel müşteri çekeceğini belirtmeme gerek yok sanırım ;)

inline CSS Kullanmaktan Kaçınmak

<p style="font-color:#ffcc00;margin-top:30px;">...

şeklinde bir kullanım; en az zamanı geçmiş ve semantik olmayan markup kullanmak kadar tehlikelidir. Bunun yerine inline CSS özelliklerinin harici CSS dosyanızda

p{font-color:#ffcc00;margin-top:30px;}

şeklinde tanımlanması daha doğru olacaktır.

Amacınız görsel kısım ile içeriği mümkün olduğunca birbirinden ayrı tutabilmek (separation of view and model).

"alt" "title" "abbr", "acronym" gibi yardımcı elemanları kullanmak

"alt" "title" "abbr", "acronym" gibi yardımcı öğeler sayfanızın erişilebilirliğini arttırır. Sayfanızın niçin erişilebilir olması gerektiğine yeterince değindik diye düşünüyorum.

Web standartlarını öğrenmeye bir yerden başlamak istiyorsanız W3C ana sayfası güzel bir başlangıç olabilir.

Standartlar

standards

Güncel web standardlarına uygun bir sayfanız olursa; yalnız bugün değil gelecekte de sorunsuz olarak çalışan (future-proof), kullanılabilir ve erişilebilir bir siteniz olacak demektir. Eğer siteniz ortak web standartlarını desteklemiyorsa bu cümlenin en iyi ihtimalle tam tersini söyleyebiliriz.

Mümkün olduğunca az "CSS hack" kullanmak

CSS hack'leri, CSS tabanlı tasarımınızın tüm tarayıcılarda birbirine yakın bir görünüm yakalamanız için standartları desteklemeyen tarayıcılara yönelik eklediğiniz (örneğin Internet Explorer) fazlalık CSS kuralları topluluğudur.

CSS hack'lerini kullanırken olabildiğince dikkatli olmalısınız. Çünkü bugün yaptığınız bir CSS hack'i ileride tarayıcının yeni bir sürümünün çıkması (IE7 mesela) nedeniyle geçerliliğini kaybedebilir ve sayfanızın görünümünü düzeltmek yerine daha da alt üst edebilir.

CSS hack'leri konusu apayrı bir konu başlığı olup tek bir makaleye sığdırılması olanaksız. Meraklısına positioniseverything.com'u bir başlangıç noktası olarak önerebilirim.

Unutmadan, eğer bir hack kullandıysanız; bunu açık bir şekilde CSS kaynağınızda yorumlandırın:

#Navigation{
	width:100%;/*HACK: for ie render problems*/
}

#LatestNews .footer div div{
  ...
  font-size:1px /*HACK: for ie*/
}

CSS ve HTML'de Açıklayıcı Yorumlara Yer Vermek

Hazır yorum demişken; kodunuzu ne kadar yorumlarsanız, ileride geri dönüp baktığınızda neyi ne için yaptığınızı hatırlamanız o kadar kolay olur:

...
    </div><!--footer-->
   </div><!--contentwrap-->
  </div><!--masterwrap-->
</body>

...

birkaç örnek daha:

/* TODO: Bu css kuralını siteyi 
yüklerken kaldırmayı unutma */

/* KLUDGE: Render sorununu düzeltmeyi başardım, 
ama bu çözümü beğenmedim */

/* FIX: IE Mac'te sorun çıkarıyordu */

/* BUG: Firefox'un eski sürümlerinde 
halen sorun yaşanıyor.*/

Başlıkların (heading) Mantıksal bir Sırayı Takip Etmesi

Başlık (heading) elemanlarınızı konunun farklı bölümlerini göstermek için kullanın. Ve başlıkların sıralanması (h1'den h6'ya kadar) konunuzun mantıksal sırasını takip etsin. Bu durum sayfanızın erişilebilirliğini ve dolaylı olarak arama motorlarının sayfanıza verdiği önemi de arttıracaktır.

Aşağıda üzerinde çalıştığımız örnek sayfanın başlık hiyeraşisi yer alıyor:

<h1><strong>sarmal</strong> hakkında</h1>
  <h2>Tek şirket</h2>
  <h2>Tek insan</h2>
  <h2>RSS</h2>
  <h2>Latest News</h2>
  <h2>Sponsor</h2>
  <h2>Profil Bilgilerim</h2>
  <h2>Çeşitli</h2>
  <h2>sardalya</h2>
  <h2>EasyPack</h2>
  <h2>orkinos&</h2>
  <h2>Önerdiğim Tarayıcı</h2>
  <h2>Önerdiğim Bağlantılar</h2>
  <h2>Sponsor</h2>

Hayır! H1'i "büyük kalın yazı" H2'yi "biraz daha küçük kalın yazı" oluşturmak için kullanmıyoruz. Aksine görsel değil; semantik anlamlarına göre kullanıyoruz.
H1: birinci seviye başlık;
H2: ikinci seviye alt başlık.

Linklerin Tıklanabilir Alanının Geniş Tutulması

Linklerin tıklanabilir alanı ne kadar geniş olursa; o linki ziyaret edilme potansiyeli o kadar artacaktır.

clickable area illustration

Site Dışına Yönelen Linklerin Görsel Olarak Farklılaştırılması

Site dışına yönlenen (external) linkleri

a.newwin { ... }

gibi bir sınıf tanımlaması ile görsel olarak farklılaştırmanız yararlı olabilir.

Benzer şekilde

a:link { ... }
a:visited { ...}
a:hover { ... }
a:active { ... }

pseudo sınıflarını kullanarak daha önceden ziyaret edilen linkleri görsel olarak farklılaştırabilirsiniz. Böylelikle kullanıcı sitenizi ikinci kez ziyaret ettiğinde daha önceden nereleri gezindiği haklında fikir sahibi olabilir.

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Sayfa Altlığının Ötelenmesi

Önceki örneği incelediyseniz sayfanın altlık kısmının (belirgin olsun diye sarıyla işaretledim) olması gereken yerinde olmadığını fark edeceksiniz.

Bu durumu tek bir CSS kuralı ekleyerek düzeltebiliriz:

#Footer{
  ...
  clear:both
}

Nasıl? Tablolarla uğraşmaktan daha kolay değil mi?

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Üst Navigasyon

Düşünülürse navigasyon linklerin gruplandığı bir yapıdır. Farklı elemanların gruplandığı yapıların semantik karşılığı da listelerdir. O nedenle üst navigasyon için bir unordered list (ul) kullanacağız:

<ul>
<li><a class="selected" ><strong>sarmal</strong></a></li>
<li><a ... >bakış açım</a></li>
<li><a ... >hizmetlerim</a></li>
<li><a ... >portfolio</a></li>
<li><a ... >erişim</a></li>
</ul>

İyi de bu liste nasıl yatay bir navigasyona dönüştü. O da CSS'in alamet-i farikası ;). Ayrıntıları için aşağıdaki arşivdeki CSS dosyasında #Navigation için tanımlı kuralları inceleyebilirsiniz.

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Latest News bölümü

Amacımız aşağıdaki görüntüyü yakalamak:

JavaScript Ekleyerek İşlevselliği Arttırmak

Önemli not: Bu noktadan sonra uçabilir; konuyu dağıtabilirim. Buraya kadar geldiyseniz yazının sonuna kadar dayanmaya çalışın :)

Yazılım geliştirme zamanımızı kısaltmak ve hayatımızı kolaylaştırmak için sayfamızda JavaScript kütüphanesi olarak sardalya'nın modüllerini kullanacağız. Fakat kendinizi rahat hissettiğiniz herhangi JavaScript kütüphanesiyle de benzer şeyler yapabilirsiniz.

Devam etmeden sardalyanın API dokümantasyonu ve kullanım örneklerine bir göz atmak isteyebilirsiniz.

JavaScript işinin ağır kısmını sardalya halledecek. Biz ise birkaç yardımcı JavaScript nesnesi kullanarak sayfa üzerinde daha net bir kontrol sağlayacağız.

lib/js/sarmal/utils.js
---

/* Site genelinde ortak kullanılan
 * metodlar.
 */
var Util=
{
  /*
   * Görsel düzenlemeler.
   */
  prepareLookNFeel:function()
  {
	  ...
  },
  /*
   * png resimlerinin saydamlığı için 
   * gerekli CSS eklentileri oluşturur.
   */
  appendOpacityCSS:function(strSiteName)
  {
      ...
  },
  /*
   * "title" attribute'u olan tüm
   * sayfa elemanlarına ipucu iliştirir.
   */
  appendTooltip:function()
  {
	  ...
  }
};

Ve sayfada ortak olarak yaptığımız işlemler.

lib/js/sarmal/common.js
---

var sarmal=
{
  /* 
   * init:
   * DOM içeriği hazır olur olmaz
   */
  init:function init()
  {
    /* 
     * AJAX ya da DOM desteği yoksa
     * derhal çık.
     */
     if(!_.ajaxdom())
     {
        return;
     }

     sarmal.repaint();
     sarmal.start();
  },
  /*
   * repaint:
   * Sayfadaki görsel elemanları
   * Yeniden konumlandırır.
   */
  repaint:function()
  {
	  ...
  },
  /*
   * Başlangıçta yapılacak işlemler.
   */
  start:function()
  {
      ...
  }
}

JavaScript dosyalarının satır satır ayrıntılarına girmeyeceğim; sadece önemli ayrıntıları vurgulamaya çalışacağım.

Öncelikle sarmal.init metodunu DOM içeriği hazır olur olmaz çağırıyoruz. Bu yöntem 90'lı yıllarda kalma window.onload'a olay dinleyicisi ekleme yönteminden çok daha hızlı ve etkilidir.

_.load(
     sarmal.init,
     ["SecondarySideContent","MainContent",
     ...]
);

Ufak bir ayrıntı daha; örneklerdeki JavaScript dosyalarını anlaşılır olması için herhangi bir sıkıştırma işleminden geçirmedim. Üretim ortamında bu dosyaları orkinos ya da EasyPack gibi bir sıkıştırma aracı yardımıyla sıkıştırmak da isteyebilirsiniz.

Ayrıca kullandığımız JavaScript eklentilerinin sadece bu eklentileri düzgün destekleyen tarayıcılarda çalıştığından; diğerlerinde çalışmasına derhal son verildiğinden emin olmalıyız

Bunu init metodunun en başına koyduğumuz bir kontrolle yapabiliriz:

init:function init()
{
  /* eğer DOM ya da AJAX desteklenmiyorsa 
   * hiçbir şey yapma ve derhal metoddan çık.
   */
  if(!_.ajaxdom())
  {
    return;
  }
...

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Sayfa Yüklenince Ana Alana Odaklanmak

Sayfa yüklendiği, daha doğrusu DOM içeriği hazır olduğu zaman, ana alana dikkat çekmek için bir renk değişim (fade-in / fade-out) efekti:

Effect.colorFade("MainContent","backgroundColor",
  ["FFFFFF","1194E3",{step:10}],
  function()
  {
    Effect.colorFade("MainContent","backgroundColor",
      ["1194E3","FFFFFF",{step:10}],
    );
  }
);

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

AJAX Aracılığıyla İçerik Yüklenmesi

Son haberler bölümünü uzaktan asenkron olarak yüklemek birkaç satırlık kodla mümkün:

var ajax=_.ajax();
ajax.oncomplete=sarmal._news_complete;
ajax.onerror=sarmal._news_error;		
ajax.get(URL.sarmal.news);

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Logo ve Saydam PNG Resimlerinin Eklenmesi

Internet Explorer 6 ve önceki sürümleri PNG saydamlığını düzgün olarak desteklemediği için JavaScript yardımıyla saydamlığın sağlanmasına yardımcı olan bir adet Opacity.css dosyası eklememiz gerekiyor:

Util.appendOpacityCSS();

...

appendOpacityCSS:function(strSiteName)
{
  var opacityCSS=document.createElement("link");
	
  if(!strSiteName)
  {
  strSiteName="";
  }
  
  opacityCSS.type="text/css";
  opacityCSS.rel="stylesheet";
  opacityCSS.href="lib/css/sarmal/"+
	  strSiteName+"/Opacity.css";
  _.gtn("head")[0].appendChild(opacityCSS);
}

Ayrıca Master.css ve Opacity.css dosyalarında #Logo, #ToolTip ve #Scissors katmanlarına ait tanımları incelerseniz yararlı olabilir.

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

İpucu Metinlerinin Ayarlanması

sardalya'nın ToolTip nesnesinin yardımı ile tüm "title" değerlerini kendi tasarladığınız dikkat çekici ipuçlarına çevirebilirsiniz.

sarmal.window_load:function(evt)
{
  Util.appendTooltip();
}

Fakat kaç tane ipucu ilişkilendireceğimizi bilmediğimiz için _.load yerine _.chain metodunu kullanmak zorundayız.

/* additional onload handler */
_.chain(window,"load",sarmal.window_load);

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Sayfa Düzeninde Genişliğe Bağlı Kontroller

Sayfamızın görüntüsü üzerinde daha alt seviyede kontroller yapmak isteyebiliriz. Örneğin sayfamız belirli bir genişliğin altında ise bambaşka bir CSS dosyası kullanmak ya da CSS desteğini tamamen kaldırıp kullanıcıların tarayıcının varsayılan biçemi ile sayfayı gezinmelerini isteyebiliriz.

Bunun için önce farklı çözünürlükler için wrapper sınıflar oluşturmalıyız:

/* resolution-dependent wrappers
   ============================= */

.secondarySideContent_f2{float:left !important}

.mainContent_f2{width:85% !important}

.mainContent_f3{width:50% !important}

.mainContent_f4{width:80% !important}

.mainContent_f5{width:36% !important}

.mainContent_f5 li,.mainContent_f3 li,.mainContent_f4 li
{width:70% !important;padding-right:0 !important}

.mainContent_f5 li li,.mainContent_f3 li li,
.mainContent_f4 li li {width:auto !important}

.contentWrap_f2{margin:0 !important}

.badge_f2{right:0 !important;top:-30px !important;}

.badge_f3{display:none !important}

.navigation_f2 ul li a{background:transparent !important;
border:0 !important;color: #f0f0f0 !important;
padding:0 5px 0 5px !important;margin:0 !important}

	.navigation_f2 ul li a.selected strong{
	color:#F0DE5E !important}

.navigation_f2 ul li a:hover,
	.navigation_f2 ul li a.selected:hover strong
	{background:#F0DA00 !important;
	color:#000000 !important}

.dn{display:none !important}

Ve daha sonra farklı sayfa genişlikleri için ilgili sınıfları aktive etmeliyiz.

_adjustGUI:function(evt)
{
  var width=WindowObject.getInnerDimension().getX(),
  ssc=_.o("SecondarySideContent"),
  mc=_.o("MainContent"),
  cr=_.o("ContentWrap"),
  bg=_.o("Badge"),
  nv=_.o("Navigation");

  if(width>=1205)
  {
    StyleManager.
      activateAlternateStyleSheet("MasterStyle");
    nv.className="";
    bg.className="";
    cr.className="";
    mc.className="mainContent_f5";
    ssc.className="";
  }
  else if(width<1205 && width>=1075)
  {
    StyleManager.activateAlternateStyleSheet("MasterStyle");
    nv.className="";
    bg.className="";
    cr.className="";
    mc.className="mainContent_f3";
   ssc.className="secondarySideContent_f2";
  }
  else if(width<1075 && width>=900)
  {
     ...
  }
  else if(width<900 && width>=755)
  {
     ...
  }
  else if(width<755 && width>=710)
  {
     ...
  }
  else if(width<710 && width>=430)
  {
     ...
  }
  else if(width<430 && width>=390)
  {
     ...
  }
  else if(width<390 && width>=310)
  {
     ...
  }
  else
  {
    StyleManager.
      activateAlternateStyleSheet("AlternateStyle");
  }
}

Bu noktaya kadar yaptıklarımıza bu zip arşivini indirerek erişebilirsiniz.

Son Söz

Böylelikle; baştan sona bir sayfanın tasarımını gözden geçirmiş olduk. Umarım bu yolculukta sizleri sıkmadan yararlı olabilmişimdir.

Merak ettikleriniz; önerileriniz; yorumlarınız ve sorularınız için bana e-posta ile ulaşabilirsiniz.

Bir Tasarımın Anatomisi

Gereksinimler

Ekran Çözünürlüğü

Farklı Tarayıcılar ve Farklı Platformlar

Betik Bağımsızlığı

Başlayalım mı Artık?

Sayfa İskeleti

İkincil İçerik Alanları

Birazcık İçerik Ekleyelim

Gereksiz (unneccessary), Anlamsız (non-semantic) ve Eskimiş (deprecated) Markuptan Kaçınmak

inline CSS Kullanmaktan Kaçınmak

"alt" "title" "abbr", "acronym" gibi yardımcı elemanları kullanmak

Standartlar

Mümkün olduğunca az "CSS hack" kullanmak

CSS ve HTML'de Açıklayıcı Yorumlara Yer Vermek

Başlıkların (heading) Mantıksal bir Sırayı Takip Etmesi

Linklerin Tıklanabilir Alanının Geniş Tutulması

Site Dışına Yönelen Linklerin Görsel Olarak Farklılaştırılması

Sayfa Altlığının Ötelenmesi

Üst Navigasyon

Latest News bölümü

JavaScript Ekleyerek İşlevselliği Arttırmak

Sayfa Yüklenince Ana Alana Odaklanmak

AJAX Aracılığıyla İçerik Yüklenmesi

Logo ve Saydam PNG Resimlerinin Eklenmesi

İpucu Metinlerinin Ayarlanması

Sayfa Düzeninde Genişliğe Bağlı Kontroller

Son Söz

RSS de ne ola ki? RSS

don kişot

linkibol - güncel

Latest News

Profil Bilgilerim

Çeşitli

sardalya

EasyPack

Önerdiğim Tarayıcı

Önerdiğim Bağlantılar