Son zamanlarda bir çok yerde gözüme çarpan bir menü tipi var; iki kolonlu, üç kolonlu vb. menü tipleri. CSS ile en optimum şekilde bu menüyü nasıl yapabilirim diye araştırdım ve sizlerle paylaşmaya karar verdim. Konuyu inceledikçe çok kolonlu yapıların sadece menülerde değil site içeriklerinde de kullanabileceğimizi gördüm. İlk olarak yapının nasıl olduğunu göstereceğim, sonrada menüde nasıl kullanıldığını.

Web mecrası geliştikçe ihtiyaçlarımızda gelişiyor ve ihtiyaçlarımızı karşılayacak metotlar arıyoruz. Çok kolonlu yapılarda böyle bir metot aslında. Sitemizi kullanan insanlar genelde menü vb. erişim ve gezinti araçlarını kullanarak sitemizi dolaşırlar. Menü gibi gezinti araçları site yapısı düşünüldüğünde sayfamızın en önemli alanlarıdır. Bu alanları en iyi şekilde tasarlanması ve düşünülmesi sitemizi daha kullanışlı ve etkin hale getirecektir. 

Bu düşünceler ile bir çok web site geliştiricisi çeşitli yöntemler denedi ve denemeye devam ediyor. Kullanılabilirliği en üst düzeye çıkarmak için çeşitli metotlar üretilmektedir. Bence bunlardan en güzellerinden biridir çok kolonlu menüler.

Yatay ve dikey örneklerimiz olmasına karşın genelde yatay ve üst menüdeki örnekler daha kullanışlıdır. Kullanıcıya uzun menü alanlarına erişebilmek için kaydırma çubuğunu kullanırlar buda bizim için bir dezavantajdır. Çok kolonlu menüler bu gibi durumlardan bizi kurtarır. Sitemizi daha derli toplu gösterir.

Çok kolonlu menü örneklerini incelediğimizde belli başlı 2-3 yöntem ile oluşturulduğunu görürüz. Bunları aşağıda inceleyeceğiz. Projelerimizde çoklu menü kullanmaya karar verdiğimizde hangisi projemize uygun ise onu kullanacağız. 

Ayrıca javascript yardımı ile ve css3 yardımı ile de çoklu menü oluşturabiliriz bunlarıda göreceğiz.

Burada anlatacağımız metotlar sadece menülerde kullanılmaz, site içeriğindeki benzer yapılar içinde aynı metotlar kullanılabilir. 

1. Yol: float uygulanmış liste ögeleri

Bu yöntemde ul elemanına sabit bir genişlik verip, her bir li elemanına float ve sabit genişlik tanımı yaparak yan yana dizeriz. Çok kolonlu yapılarını oluşturmak için en basit metottur. 

Dezavantajı listelemek istediğimiz ögeleri yan yana dizer. Normalde istenen birinci kolonu bitirdikten sonra ikinci kolona geçmesidir.

<ul>
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz

ul {
    width: 700px;
    list-style-type:none;
}
li {
    width:180px;
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    float:left;
}

Örneği görmek için tıklayınız.

700px tüm genişlik içindir her ögenin genişliğini 180px verip bide sağdan 10px padding değeri ile yan yana dizeriz. 

Örneği biraz daha geliştirip açılır menü haline getirelim. 

HTML Kodu;

<ul id="menu">
    <li><a href="">Tencere</a>
        <ul class="kapsul">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        ....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
    <li><a href="">Tava</a></li>
    <li><a href="">Çaydanlık</a></li>
    <li><a href="">Leğen</a>
        <ul class="kapsulSolda">
        <li><a href="">Birinci Oge</a></li>
        <li><a href="">İkinci Oge</a></li>
        .....
        <li><a href="">Onuncu Öge</a></li>
        </ul>
    </li>
</ul>

CSS kodu;(kodun uzun olduğuna bakmayın çoğu kod menü elemanlarını daha güzel görünmesini sağlamak için eklenmiştir.) Bunu menüye uygulayalım

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover, ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
	    ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

İlk menü öğelerini oluşturduk.

ul li:hover ul, ul li.over ul{display:block;}

Burada virgülün ilk kısmı ie6 hariç olan kısmı için ie6 için ise aşağıdaki javascript kodunu yazacağız.

Tabi başımızın belası ie6 için menüyü açmak için javascript yardımı almamız gerekiyor. Çünkü ie6 linklerin haricinde :hover işleyişini uygulamıyor

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Açılan menü kısmının tam kapsanması için kapsayamama kodu ekleyeceğiz.

ul li ul:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
ul li ul {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html ul li ul {height: 1%;}
ul li ul {display: block;}
/* IE-mac bu bolumu saklam artik */

Açılacak menü ul sinin tanımlarını yapıyoruz.

ul li ul {width: 580px; list-style-type:none; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute;}
    ul li li {width:180px; margin:5px 0 0 0; padding:0 10px 0 0; line-height:15px; float:left; border:0;}
    ul li li:hover{border:0}
        ul li li a{color:#0657ad; text-decoration:underline; padding:0; font-weight:normal}
        ul li li a:hover{color:#C30; text-decoration:none}
    ul li ul.kapsulSolda{right:0}

Kolonlama için yukarıdaki yöntemi uyguluyoruz.

Örneği görmek için tıklayınız.

2. metot: Margin yönlendirmeleri ile

Çok kolonlu yapıları oluşturmak için diğer bir yöntemde ikinci ve üçüncü kolonlara sağdan ve üstten margin değerleri vererek yapmaktır. Bu metodun avantajı kolon dizilişinin istediğimiz gibi olmasıdır. Bu metotta çoğaltacağımız kolonlara ek sınıflar eklemeliyiz. 

<ul>
    <li class="kolon1"><a href="#">Öğe 1</a></li>
    <li class="kolon1"><a href="#">Öğe 2</a></li>
    <li class="kolon1"><a href="#">Öğe 3</a></li>
    <li class="kolon1"><a href="#">Öğe 4</a></li>
    <li class="kolon1"><a href="#">Öğe 5</a></li>
    <li class="kolon2 sifirla"><a href="#">Öğe 6</a></li>
    <li class="kolon2"><a href="#">Öğe 7</a></li>
    <li class="kolon2"><a href="#">Öğe 8</a></li>
    <li class="kolon2"><a href="#">Öğe 9</a></li>
    <li class="kolon2"><a href="#">Öğe 10</a></li>
    <li class="kolon3 sifirla"><a href="#">Öğe 11</a></li>
    <li class="kolon3"><a href="#">Öğe 12</a></li>
    <li class="kolon3"><a href="#">Öğe 13</a></li>
    <li class="kolon3"><a href="#">Öğe 14</a></li>
    <li class="kolon3"><a href="#">Öğe 15</a></li>
    <li class="kolon3"><a href="#">Öğe 16</a></li>
</ul>

CSS kodumuzu yazalım

ul { margin: 0 0 1em 2em; padding: 0; }
    ul li { line-height: 1.2em; margin: 0; padding: 0; }
    * html ul li { position: relative; }
    ul li.kolon1 { margin-left: 0em; }
    ul li.kolon2 { margin-left: 10em; }
    ul li.kolon3 { margin-left: 20em; }
    li.sifirla { margin-top: -6em; }
        ul li a { display: block; width: 7em; text-decoration: none; }
        ul li a:hover { text-decoration:underline}

Örnek kodu görmek için tıklayınız.

Yukarıdaki kodda ilk li tanımımız bir önceki metot ile neredeyse aynıdır. Tek farklı olan kısım position:relative tanımıdır, bu tanım ie’deki sorunları gidermek için eklenmiştir. Her kolonun soldan mesafesi margin-left değerleri tanımlanarak sağlanmıştır. İkinci ve üçüncü kolonları yukarı çekmek içinde menü yüksekliği kadar eksi margin değeri verilerek yukarı çekilmiştir.

Margin yönlendirmeleri ile menü oluşturmak pek mantıklı değildir. Esnek olmayan bu yöntem menü ekleme ve çıkarmalarında osurn çıkarır.

3. Metot: Kapsayıcı katman ile bölmek

Bu metotta çoklu kolonlara ayrılacak listeler kapsayıcı katmanlar ile ayrılarak her bir kolon oluşturulur. Bu metotta yükseklik ile ilgi bir şey yapmaya gerek yoktur ve esnek bir yapıya sahiptir. 

<div class="licol">
    <ol>
        <li>Let me not to the marriage of true minds</li>
        <li>Admit impediments; love is not love</li>
        <li>Which alters when it alteration finds</li>
        <li>Or bends with the remover to remove</li>
    </ol>
</div>
<div class="licol">
    <ol start="5">
        <li>Oh, no, it is an ever fixed mark</li>
        <li>That looks on tempests and is never shaken;</li>
        <li>It is the star to every wand'ring bark</li>
        <li>Whose worth's unknown, although his height be taken</li>
    </ol>
</div>
<div class="licol">
    <ol start="9">
        <li>Love's not Time's fool, though rosy lips and cheeks</li>
        <li>Within his bending sickle's compass come;</li>
        <li>Love alters not with his brief hours and weeks</li>
        <li>But bears it out even to the edge of Doom</li>
    </ol>
</div>

CSS kodumuzda kısadır.

li {
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
}
.licol {
    float: left;
    width: 200px;
}

Örnek kodu görmek için tıklayınız.

Diğer metotlara göre avantajlı görünen bu metodun da kendince sorunları vardır. Menü yaparken kapsayıcı bir katman(div) atayıp bu katman içinde ul’leri float ve genişlik vererek yan yana koyarız.

<ul id="menu">
    <li>
        <a href="">Tencere</a>
            <div class="ucluKolon">
              <ul>
                <li><a href="">Let me not to the marriage of true minds</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Oh, no, it is an ever fixed mark</a></li>
                ...
              </ul>
              <ul>
                <li><a href="">Love's not Time's fool, though rosy lips and cheeks</a></li>
                ...
              </ul>
            </div>
    </li>
....
</ul>

İlk menü kısmını ilk yaptığımız ile aynı kodlara sahip olacaktır.

ul{margin:0; padding:0; list-style:none}
    ul li{float:left; width:180px; border-top:3px solid #fff; position:relative}
    ul li:hover,  ul li.over{border-top:3px solid #C30; background-color:#eee; width:180px;}
        ul li a{ font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; display:block; padding:5px 5px 5px 10px; color:#0657ad; font-weight:bold}

Daha sonra kapsayıcı katman tanımlarını yapıyoruz. Tabi öncesine kapsayamama sorunu kodunu ekleyerek. Kapsayamama sorunu kodlarını başa ekliyoruz çünkü bu kısmı sayfa normal gösteriminde gizlememiz gerekiyor.

    div.ucluKolon:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    div.ucluKolon {display: inline-block;}
    /*IE-mac de bu bolumu sakla \ */
    * html div.ucluKolon {height: 1%;}
    div.ucluKolon{display: block;}
    /* IE-mac bu bolumu saklam artik */
div.ucluKolon{width:600px; display:none; border-bottom:3px solid #C30; background-color:#eee; padding:5px 0 10px 10px; position:absolute}

Üst menüde en sağdaki menü elemanının altında açılan menü sağ doğru değilde sola doğru açılacak, bunun için

.sagda{right:0}

Üç kolonlu yapıyı oluşturmak için katman içindeki ul’lere genişlik ve float tanımı yapıyoruz.

div.ucluKolon ul{float:left; width:200px}

üst menülerin üzerine gelince açılması için

ul li:hover div.ucluKolon, ul li.over div.ucluKolon{display:block}

ie6 için javascript kodumuzu yazıyoruz. Yukarıdaki kodun aynısı.

Örnek kodu görmek için tıklayınız.

4. CSS 3 column-count özelliği ile

CSS3 ile birlikte gelen yeni bir özellik sayesinde işler çok kolaylaştırıyor. 

<ul id="menu">
    <li>Birinci Oge</li>
    <li>İkinci Oge</li>
    <li>Üçüncü Öge</li>
    <li>Dördüncü Öge</li>
    <li>Beşinci Öge</li>
    <li>Altıncı Öge</li>
    <li>Yedinci Öge</li>
    <li>Sekizinci Öge</li>
    <li>Dokuzuncu Öge</li>
    <li>Onuncu Öge</li>
</ul>

CSS kodumuz ise iki satır

ul#menu{
    width:700px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

Örnek kodu görmek için tıklayınız.

Farklı tarayıcılar için yazılan bu kod maalesef ie ve opera’nın desteği olmadığı için uygulaması şimdilik yok.

5. Metot: Javascript yardımı ile

Aslında bu yöntem bir önceki metodun tamamlayıcı bir metodudur.

Bu metotta css3 column-count özelliği ile yine css ile kodu yazacağız, javascript ile de desteklemeyen tarayıcılara uyumlu hale getireceğiz.

Bu javascript kodunu csscripting.com sitende yayınlanmış, ancak bu site yayında değil cvwdesign.com sitesinde kodu buldum. Açıkça söylemek gerekirse bunun dışında çalışan javascript kodu bulamadım. 

Bu kodu kullanırken css kodunuzu harici kullanmalıyız aksi halde kod çalışmıyor. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Çoklu kolon</title>
<link href="kolon.css" rel="stylesheet" />
<!--[if IE]><script type="text/javascript" src="css3-multi-column.js"></script><![endif]-->
</head>
<body>
    <ul class="column">
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
</body>
</html>

Bu javascript dosyasını ekleyince css3 aşağıdaki özelliklere karşılık gelen özellikleri

• column-count 
• column-width 
• column-gap
• column-rule

destekliyor. Mevcut açık kodun boyutu fazla gelince çevrimiçi yui kompresor ile javascript dosyasını sıkıştırdım. Gayet güzel bir oran ile dosya boyutunu 37 kb’dan 19 kb’a kadar düşürdüm.

Örnek kodu görmek için tıklayınız.

jQuery yardımı ile çeşitli çözümler mevcuttur. kaynaklar bölümünde yazdım linklerini.

Kaynaklar

• http://www.useit.com/alertbox/mega-dropdown-menus.html (genel bilgi)
• http://articles.techrepublic.com.com/5100-10878_11-5810687.html 
• http://www.communitymx.com/content/article.cfm?page=1&cid=27F87
• http://www.alistapart.com/articles/multicolumnlists/
• http://archivist.incutio.com/viewlist/css-discuss/88422
• http://www.cssplay.co.uk/menus/drop_lists.html (örnek)
• http://www.cssplay.co.uk/menu/column.html (farklı bir bakış)
• http://blog.pengoworks.com/index.cfm/2008/4/3/Preview-jQuery-Multicolumn-Dropdown-Plugin
• http://green-beast.com/experiments/css_double_lists.php
• http://css-discuss.incutio.com/?page=MultipleColumnLists
• http://welcome.hp.com/country/tr/tr/welcome.html
• http://css.flepstudio.org/en/css3/multi-column.html (css3 multi column)
• http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
• http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript
• http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/ (jquery yardımı işle güzel)
• http://codeasily.com/jquery/multi-column-list-with-jquery (jquery multi kolon eklentisi)
• http://welcome.totheinter.net/columnizer-jquery-plugin/ (jquery multi kolon eklentisi)
• http://www.zenelements.co.uk/blog/css3-multiple-columns/ (css3 multi-kolon ve destekleme listesi)
• http://www.americanstandard-us.com/ (örnek)
• http://www.gatesfoundation.org/Pages/home.aspx (örnek)
• http://www.cssplay.co.uk/menus/multi-column.html (örnek)
• http://www.whitehouse.gov/ (Örnek)
• http://www.wittysparks.com/2009/09/21/build-multi-level-multi-column-multi-menus-with-pure-css/
• http://www.smileycat.com/design_elements/mega_dropdown_menus/#001915

Sitelerinin performansına dikkat eden herkesin gözüne takılmıştır google analitics’in kodları. Açıkçası ben sitemi yavaşlattığı için google analitics’ten vazgeçicektim. Bir aralar site çok yavaştı. O zamanlar düşünüyordum.

Google çalışanlarıda bu konudaki şikayetleri göz önüne alarak asenkron kod geliştirmişler. Asenkron kod sayesinden bir yandan google kodu çalışırken bir yandanda diğer içerikler taranabilme olanağı elde ediyor sistem, buda sitemizin daha hızlı açılmasını sağlayacaktır.

Kodlar aşağıdaki gibi;

<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();
</script>
<!-- site icegi buradan sonra gelir -->
</body>
</html>

Kodumuz eskisi gibi karmaşık ama siz karmaşıklığa aldanmayın. Burada yapacağımız şey çok basit. 9. satırdaki UA-XXXXXXX-X kısım yerine gooagle analytics’in bize verdiği kodu yerleştirmek.

Burada dikkat edeceğimiz bir husus daha vardır. Normalde javascript kodlarının </head> öncesine yazmamız önerilir, sitemizin performansı için. Ancak asenkaron nalytics kodları <head> etiketi içinde yazmanız öneriliyor.

Sonuçta ben kullanıyorum gayet iyi, hızlandı site. Çok büyük beklentiye girmeyin ama hızda bir atış olduğu hissediliyor.

Kaynak

• http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
• http://www.electrictoolbox.com/google-analytics-asynchronous-tracking/
• http://davidwalsh.name/async-google-analytics
• http://webmasterformat.com/news/google-analytics-asynchronous-tracking
• http://www.webresourcesdepot.com/tracking-new-rss-subscribers-with-google-analytics-to-understand-them-better/
• http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html
• http://www.webmonkey.com/blog/New_Asynchronous_Script_Stops_Google_Analytics_From_Slowing_Down_Your_Site
• http://ajaxian.com/archives/google-analytics-unblocks-the-web-w-async-support
• http://www.webresourcesdepot.com/new-google-analytics-code-for-better-load-times/
• http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
• http://googlesystem.blogspot.com/2009/12/optimized-google-analytics-code.html
• http://blog.chartbeat.com/2009/12/04/google-analytics-goes-asynchronous/
• http://www.further.co.uk/blog/New-Google-Analytics-Asynchronous-Tracking-Code-241
• http://www.highposition.net/article/google-analytics-launches-asynchronous-tracking-code-for-greater-speed/4561763

Aslında bundan önce bir web ajansının yapısını ve iş akışını çıkarmak gerekir ve buna göre görev tanımları yapılmalıdır, ama o biraz daha kapsamlı bir iş.

Bizim memlekette genelde bir iş yapılır daha sonra standartları yerleşir. Aynı durum web mecrasında da var. Bir çok kişi bu mecrada çalışmasına ve bir sektör oluşmasına rağmen iş akışı ve görev tanımları tam olarak oturmamıştır. Ben yaklaşık 10 senelik bir çalışma hayatımdaki yaşadıklarım ve okuduklarım ile Arayüz Geliştiricileri için şöyle bir liste çıkardım;

• HTML bilmek: Çok iyi derecede HTML bilmelidir ve uygulamada gereksiz kod yığınlarında kaçınmalıdır.
• CSS Bilmek: Çok iyi derecede CSS bilmelidir. Katman tabanlı kodlamayı bilmelidir. Tablosuz sayfa yapısını tasarlamalıdır.
• Javascript: Çok iyi derecede javascript bilmelidir. Ajax ve  javascript kütüphanelerinden birine(jquery, mootools, vd.) hakim olmalı ve uygulama geliştirebilmelidir.
• Gelişmiş Kod Yazma: Arama motorlarına, erişebilirlik ilkelerine, farklı platform ve tarayıcılara uygun kod yazmalıdır. En az kod ile en yüksek performansı almalıdır.
• İçerik Yönetim Sistemleri: Şirket içi CMS vb. içerik yönetim sistemlerini bilmeli ve kullanmalıdır.
• Mailing: Mailing standartların bilemeli ve buna uygun mailing kodları hazırlamalıdır. HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler | HTML Mailing 2 – Mailing HTML Kodunun Yazılması
• Görsel Araçlar: Adobe Photoshop, Firework veya benzeri bir programı kendi işini yapacak kadar bilmelidir.
• Takım Çalışması: Takım çalışmalarına uyumlu olmalıdır. Proje Yöneticisi, tasarımcı, flashçı ve programcılar ile etkileşimli çalışmalıdır.
• Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.
• Yabancı Dil: En az yenilikleri takip edecek kadar İngilizce bilmelidir.
• Sunucu Taraflı Diller: Asp.Net, PHP vb. sunucu taraflı dillerin genel mantığını bilmelidir.
  

Bu liste tasarımcı, programcı, flashçı ve Arayüz geliştirici ayrımını yapabilmiş şirketler için geçerlidir. Memlekette hala bu ayrımı yapmamış şirketlerin olması üzücü. Ayrıca yukarıda tanımladığımız Arayüz Geliştiricilerinin Görev Tanımı zamanla gelişebilir. Örneğin Arama motoruna uygunluk ve erişebilirlik ve javascript  için gelecekte ayrı birimler kurulabilir. Daha da ileri gidip jquery geliştirici bile aranabilir. Malum sektör hızlı gelişiyor.

• http://v1.garrettdimon.com/archives/the-time-is-now-for-front-end-architects
• http://www.cherny.com/webdev/105/front-end-web-designers-developers-and-engineers
• http://fuelyourcoding.com/steps-to-becoming-a-front-end-web-developer/
• http://onlinetools.org/articles/fed2.html

Sayfalama

Web sitelerinde sayfalama genel olarak içeriğin uzun olduğu durumlarda kullanıcıya daha kullanabilir sayfalar üretmek için içeriğin belli mantıksal kısımlara ayrılmasıdır. Genelde arama sonuç sayfalarında, günlük(blog) sitelerinde, uzun içeriğe sahip makalelerde uygulamalarına rastlarız.

Sayfalama alanları genel olarak sitede gezinme alanlarının(navigation) bir parçasıdır. Sitedeki kullanılabilirliği ve düzeni sağlayan normal menü yapılarının dışındaki yapılardır. Aslında bir bakıma gezinme elemanı sınıfına da sokabiliriz. Sayfalama yaparken aşırıya kaçıp görünüşü çok hoş olsun diye kullanıcıyı zora sokan tasarımlardan kaçınmak gerekir. Sayfalamada önemli olan kullanıcı dostu ve işlevsel bir yapı oluşturmaktır, ondan sonra görsellik gelir. İşlevselliği kaybetmeden görsellikde geliştirilebilir.

Sayfalamada dikkat edilecek hususları Faruk Ateş‘in makalesinde çok güzel bir liste şeklinde görüyoruz. Biz buraya başlıklarını alalım.

1. Geniş tıklanabilir alanlar olsun. Kullanıcının tıklamasını kolaylaştırmak için.
2. Altı çizili kullanmayın. Zaten tıklanacak alanlar olduğu belli.
3. Mevcut sayfada olduğumuz belli olsun. Önemli bir ayrıntı.
4. Linkler arasına mesafeler bırakın. Kullanıcının kolay tıklaması için önemli.
5. “Önceki” ve “Sonraki” bağlantılarını verin.
6. Duruma göre “İlk” ve “Son” bağlantıları koyun.
7. İlk ve Son bağlantılarını sayfalama alanın en dışında olmasına dikkat edin.
8. Sayfa bilgisi kısmını ekleyin. Örn: (Sayfa 80 / 3). Listeye bunu ben ekledim :D

Sayfalama için genelde listeme elemanı(ul) kullanıyorum. Listeleme olmadanda kullanılabilir benim sitemde olduğu gibi. Ama benim tercihim liste elemanı ile oluşturmaktan yana çünkü tüm tasarımsal ihtiyaçları karşılayacak bir yapı bütünlüğü sağlıyor bize listeleme.

CSS ile Sayfalama

Sayfalama Örnek 1:

Basit yapılı sayfalamalarda, daha doğrusu resim, ovallik içermeyen sayfalamalarda;

XHTML Kodu:

<div class="sayfalama"><span class="pasif">&#171; Önceki</span><span class="secili">1</span><a href="/page/2/">2</a><a href="/page/3/">3</a><a href="/page/4/">4</a><a href="/page/5/">5</a><a href="/page/6/">6</a><a href="/page/7/">7</a>...<a href="/page/199/">199</a><a href="/page/200/">200</a><a href="/page/2/" class="next">Sonraki &#187;</a></div>

CSS Kodumuz:

.sayfalama {
    padding: 3px;
    margin: 3px;
    text-align:center;
}

.sayfalama a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    text-decoration: none;
    color: #036CB4;
}

.sayfalama a:hover,
.sayfalama a:active {
    border: 1px solid #999;
    color: #666;
}
.sayfalama .secili {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #036CB4;
    font-weight: bold;
    background-color: #036CB4;
    color: #FFF;
}
.sayfalama .pasif {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    color: #DDD;
}

Örneği görmek için tıklayınız.

Basit kodlama tekniğinde linkler ve span kullanarak sayfalarımızı oluşturuyoruz. Sayfa şeklini belirlemek için kenar için boşluk(padding), kenar dışı boşluk(margin), kenar dışı çizgisi tanımlarını yapıyoruz.

Sayfalamada fare üzerine geldiğinde ve aktif haller için genelde farklı renk tanımları yapılarak fark belirtilir.

Mevcut sayfa için ayrı bir sınıf tanımı(örn: secili) yaparak ona göre bir tanım yaparız.

Ayrıca pasif alanlar için bir tanım yapıyoruz. Daha silik bir renk ile.

Sayfalama Örnek 2:

Yahoyt’da yaptığım örnek sayfalama. Genelde kullanılan sayfalamaya bir örnek olacak nitelikte. İkinci yöntem benim daha çok tercih ettiğim yöntem listeler ile sayfalama;

XHTML

<ul class="sayfalama">
    <li><a href="">|<</a></li>
    <li><a href="">Önceki</a></li>
    <li><span>1</span></li>
    <li><a href="" title="Sayfa 2">2</a></li>
    <li><a href="" title="Sayfa 3">3</a></li>
    <li><a href="" title="Sayfa 4">4</a></li>
    <li><a href="" title="Sayfa 5">5</a></li>
    <li><a href="" title="Sayfa 6">6</a></li>
    <li><a href="" title="Sayfa 7">7</a></li>
    <li><a href="" title="Sayfa 8">8</a></li>
    <li><a href="" title="Sayfa 9">9</a></li>
    <li><a href="" title="Sayfa 10">10</a></li>
    <li><a href="" title="Sonraki">Sonraki</a></li>
    <li><a href="" title="İlk Sayfa">>|</a></li>
</ul>

CSS kodu

ul.sayfalama {
    margin:0 auto;
    width:530px;
    padding:10px 0 0 0;
    clear:left
}
ul.sayfalama li {
    font:bold 12px Tahoma, Geneva, sans-serif;
    color:#fff;
    float:left;
    list-style:none;
    margin:0 2px;
    background:#005689;
}
ul.sayfalama li span {
    padding:5px 8px;
    display:block
}
ul.sayfalama li a {
    font:bold 12px Tahoma, Geneva, sans-serif;
    color:#005689;
    text-decoration:none;
    background-color:#e2e2e2;
    padding:5px 8px;
    display:block
}
ul.sayfalama li a:hover {
    background-color:#005689;
    color:#e2e2e2;
}

Örneği görmek için tıklayınız.

Sayfalama Örnek 3:

Son olarakda bonus.com.tr kampanyalarda yaptığım sayfalama.

XHTML kodu

<ul class="sayfalama kapsayamamaSorunu">
  <li class="oncekiSayfa"><a href="javascript:;">önceki</a></li>
  <li class="seciliSayfaNo"><a href="/page/1/">1</a></li>
  <li><a href="/page/2/">2</a></li>
  <li><a href="/page/3/">3</a></li>
  <li><a href="/page/4/">4</a></li>
  <li><a href="/page/5/">5</a></li>
  <li><a href="/page/6/">6</a></li>
  <li><a href="/page/7/">7</a></li>
  <li><a href="/page/8/">8</a></li>
  <li><a href="/page/9/">9</a></li>
  <li class="sonrakiSayfa"><a href="/page/2/">sonraki</a></li>
</ul>

CSS kodu:

ul.sayfalama{
    padding: 3px;
    border-bottom:1px solid #e7e7e7;
    border-top:1px solid #e7e7e7;
}

ul.sayfalama li{
    list-style:none;
    float:left;
    margin-right:10px;
    line-height:15px;
}

ul.sayfalama li.seciliSayfaNo{
	background: url(images/sayfalama_ard.gif) right top no-repeat;
}

ul.sayfalama li.seciliSayfaNo a{
    color:#e2ffcc;
    text-decoration:none;
    padding:0 4px;
    background: url(images/sayfalama_ard.gif) 0 -15px no-repeat;
    font-weight:bold;
}

ul.sayfalama li a{
    color:#5b5d5a;
    text-decoration:none;
    font-size:12px;
}

ul.sayfalama li.oncekiSayfa a{
    display: block;  
    width: 6px;  
    height: 10px;
    margin:3px 2px 0 0;
    background: url(images/sayfalama_ard.gif) 0 -36px no-repeat;
    text-decoration: none;  
    text-indent:-9999px;
}

ul.sayfalama li.sonrakiSayfa a{
    display: block;  
    width: 6px;  
    height: 10px;
    margin:3px 0 0 0;
    background: url(images/sayfalama_ard.gif) 0 -52px no-repeat;
    text-decoration: none;  
    text-indent:-9999px;
}

Listeleri yanyana koyup, seçili olan ardalanına yuvarlak kenarlı olması için li’ye ardalanın sag kısmını li içindeki bağlantıyada sol kısmını koyuyoruz.

Ayrıca ileri ve geri ikonlarını yine ardalan kaydırma tekniği ile aynı resimden yaralanarak ekliyoruz. Bu teknik şimdilerde sprite tekniği olarak adlandırılıyor. İşin mantığı birden fazla resmi ekleyip http isteklerin sayısı azaltarak sayfa yüklenme hızı arttırıyoruz.

Örneği görmek için tıklayınız.

Bu örnek bazı kısımlar yazının ilk kısmında anlattıklarınıza uymuyor diyebilirsiniz. Ama tasarımcının tercihleri böyle ve bu yazıyı daha yazmamıştım. Her yazıda bende bir şeyler öğreniyorum.

Bu sayfalamalar dışında bir çok örneği bulabileceğiniz. http://mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/ sitesini ziyaret etmenizi öneririm.

Kaynaklar

• http://kurafire.net/log/archive/2007/06/22/pagination-101
• http://mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/
• http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html
• http://arjaneising.nl/html/tips-for-better-pagination
• http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/
• http://www.thewebhelp.com/css/pagination_style_template/
• http://css.dzone.com/news/a-digg-flickr-pagination-style
• http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
• http://komunitasweb.com/2009/03/42-pagination-design-inspiration/

Artık neredeyse tüm projelerimde jQuery olmazsa olmaz oluyor. Bu nedenle javascript ile değil jQuery ile kodluyorum bu tip alanları. Sekmeli içerik yapımı jQuery ile çok basit. Bunu burada beraber göreceğiz.

XHTML kodumuz:

<div class="sekmeAlani">
<!--[if !IE]>sekmeler<![endif]-->
<ul class="sekmeler">
<li class="s1"><a href="javascript:void(0);" class="s1">Sekme1</a></li>
<li class="s2"><a href="javascript:void(0);" class="s2">Sekme2</a></li>
<li class="s3"><a href="javascript:void(0);" class="s3">Sekme3</a></li>
<li class="s4"><a href="javascript:void(0);" class="s4">Sekme4</a></li>
</ul>
     
<!--[if !IE]>sekme icerikleri<![endif]-->
<div class="s1">...</div>
<div class="s2">...</div>
<div class="s3">...</div>
<div class="s4">...</div>
</div>

Burada aslında href=”javascript:void(0);” özelliğini kullanmayabiliriz, ancak ie6 ve 7 bu durumda link tanımlarında sorun çıkarıyor. HTML’de dikkat edeceğimiz bir kaç yer var. Link sınıf tanımı(örn: class=”s1″) ve sekme içeriği sınıfları birbiri ile aynı olmalıdır.

Hemen uygulamaya geçersek.

Kodumuza jQuery kütüphanesini ekleyelim. Firefox’un YSlow eklentisinin belirttiği gibi javascript kodlarını sayfamızın altına koyalım.

  <script type="text/javascript" src="jquery.js"></script>
  </body>
  </html>

jQuery kodumuzu yazmaya başlayalım. Mantık olarak sekmeli menüler olsun, sekmeli içerikler olsun aynıdır. Sekmelere tıklayınca o sekmeye ait içerikler görünecek, diğerleri görünmez olacaktır. bu mantığa göre kodumuzu yazalım.

$(document).ready(function() {      
  $('div.sekmeAlani ul.sekmeler li a').click(function(){    
     $(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');                                            
     var mevcutSinif = this.className.slice(0,2);    
     $('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();        
   });
  $('.sekmeAlani ul.sekmeler li a:first').click();
});

Kodumuz sadece bu kadar.

$(document).ready(function() { .. }); jQuery’nin stadart kodu.

5. satırdaki kodda; sekme linklerine tıklanınca yapılacak işlemleri tetikliyoruz.

6. satırda tıklanan sekmeyi seçili hale getiriyoruz. Burada kullandığımız yöntem jQuery’nin bize sunduğu güzelliklerden biridir. Hem tıklanan sekmeyi seçili hale getiriyoruz hemde bu arada diğer sekmeleri(siblings() fonksiyonu sayesinde) normal hale getiriyoruz. Tek satır kod ile bunu bize sağlaması jQuerynin güzelliği

7. satırda tıklanan linkin sekme içeriği ile ilişkisini sağlayan sınıfını yakalıyoruz. Burada slice(0,2) ile sınıfın iki kelimesini alıyoruz, birebir sınıf karşılaştırması yapamıyoruz çünkü bu linke başka sınıflarda atanmış olabilir. Bu sınıf adı bize ilişkili sekme içeriğini göstermek için yardımcı olacaktır.

8. satırda içerikleri gizleme ve gösterme işini çözüyoruz. $(‘div.sekmeAlani > div’) kodu bize sekmeAlani‘nının birincil div’lerini yani sekme içeriğini kapsayan katmanları gizlememizi sağlıyor. Böylelikle sekme içinde div kullansak bile bunlar görünmez olmuyor bu bir çok sekme kodunda göz ardı edilen bir husustur. CSS’de de olan çocuk seçiciler(>) jQueryde gönül rahatlığı ile kullanabiliyoruz çünkü ie6 desteğini jQuery hallediyor. jQuery’nin bize sunduğu avantajlardan biride filter() fonksiyonudur. Bu sayede biz tüm sekme içeriğini kapsayan div’leri gizle ama bu tıkladığımzın(bu tıkladığımızda yukarıdan aldığımız sınıf tanımlaması ile anlıyoruz, aynı sınıf atamamızın sebebi de budur.) içeriği hariç diye biliyoruz. Bize bu kadar kolaylık sağlayan jQuery bundan dolayı çok seviyorum, pardon seviyoruz galiba.

10. satır sekme linki tıklamasını bitirdikten sonra sayfa ilk açıldığında ilk linkin tıklanması ve içeriğinin gösterilmesi için kodumuzu yazıyoruz. Buradaki a:first yine CSS’den bildiğimiz ama ie6 nedeni ile kullanamadığımız bir özellik. click() fonksiyonuda sanki biz tıklamışız işlevi görüyoruz.

Evet koda baktığımızda 5-6 satırlık bir jQuery kodu ile sekmeli bir yapı oluşturduk. jQuery’yi bu yüzden çok güzel. Bende öğrenmeye devam ediyorum. Öğrendikçe sizlerle paylaşacağım. bu konuda ve bir çok yerde yardımlarından dolayı Orhan Ekici‘ye(şu an yapım aşamasında) teşekkürlerimi sunmadan geçemeyeceğim. İnşallah yakında sitesini açarda internet alemine güzel bilgiler sunar.

jQuery UI içinde sekme ekelentisi var onuda tercih edebilirsiniz. jQuery tab eklentisi çok ayrıntılı ve bir çok özellikleri var. Bu bir bakıma avantaj olsada bazen dezavantaja dönüşebiliyor. Ben ufak bir sekmeli içerik yapmak için jQuery UI tab eklentisini kullanmayı uygun görmüyorum açıkçası.

Sekmeli içerik ve sekmeli menülerde farklı şekillerde örnekler var. Stil dosyasını değiştirerek bu örnek üzerinden istediğimiz birçok sekmeli içerik üretebiliriz.

Örnek kodu görmek için tıklayınız.

Örnek kodu IE (6-7-8), Firefox 3.0.10, Opera 9.6, Googel Chrome 1.0 ve Safari 3.2.2 sürümlerinde test ettim.

Kaynaklar

• http://jqueryfordesigners.com/jquery-tabs/
• http://broadcast.oreilly.com/2008/10/how-to-create-tabs-with-css-an.html
• http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
• http://www.barelyfitz.com/projects/tabber/index.php
• http://www.thetruetribe.com/jquery/3-jquery-widgets/77-how-do-i-make-tabs-in-jquery-without-jq-tabs-plugin

Iframe kullanımında en çok yaşanan sorunlardan biridir içeriğin yüksekliğine göre iframe yüksekliğinin artması veya azalması. Daha önce ben bunu javascript ile yapmıştım. Ancak farklı tarayıcılarda bazı sorunlar yaşamıştım. Şimdide javascript ile bunu halledebiliriz. Ancak son zamanlarda(o kadar da yeni sayılmaz :D) popüler olan javascript kütüphaneleri(benim için bunun adı jQuery) ile bu daha basit.

Burada ufak bir ipucu var. Ben bir çok projelerimde jquery kütüphanesini kullandığım için jQuery autoHeight eklentisini kullandım. Eğer projemde jQuery kütüphanesi yüklü değilse javascript ile yapmak daha mantıklı. Javascript ile yapacaklar için bir link jQuery ile yapmanın bir kaç avantajıdaha var tabii

Ben burada jQuery autoHeight eklentisinin nasıl kullanılacağını anlatacağım.

Sayfamıza ilk olarak jQuery kütüphanesini eklemeliyiz. Bu script dosyasının ilk sırada olması önemli jQuery için.

<script type="text/javascript" src="script/jquery.js"></script>

Iframe otomatik yükseklik vermek için kullandığımız eklenti kodu.

<script type="text/javascript" src="script/jquery.autoheight.js"></script>

Sayfaya eklediğimiz iframe kodunda yapmamız gereken sadece class="autoHeight" eklemek.

<iframe id="listeCercevesi" name="listeCercevesi" class="autoHeight" scrolling="auto" frameborder="0" src="/liste.aspx"></iframe>

Örnek sayfayı görmek için tıklayın. (sonspring.com alınmıştır)

Uyarılar:

• İlk uyarımız bu metot aynı alan adı üzerindeki sayfa eklemelerinde çalışıyor. İçreriğini farklı siteden aldığımız iframe’ler güvenlik nedeniyle çalışmayacaktır.
• İkinci uyarım ise içeriği yüklü olan iframe sayfalarında yükleme zaman aldığı için ve scriptimiz sayfa yüklendikten sonra çalıştığı için sayfa yüksekliği ilk açılıştı küçük geliyor ve sonradan gerçek boyutuna geliyor. Ben bunu engellemek için iframe’e ortalama bir yükseklik değeri girdim. Script yüklendiğinde zaten beni girdiğim değeri değiştiriyor.
• Üçüncü olarak bu yöntem javascript yönteminden daha kullanışlı yapan özelliklerden biri de kullanımının kolay olması ve her iframe e id vermek zorun olmuyor olmamız.

Kaynaklar

• http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
• http://lib.mobius.tw/jquery/myplugin/iframe_autoHeight/api.htm
• http://jbscdev.blogspot.com/2007/08/automatic-iframe-height-sizing-using.html
• http://sonspring.com/journal/jquery-iframe-sizing

Tabi jquery ve mootools ile birlikte kullanmamdan dolayı hata vermeye başladı.

Çözüm çok basit $ işareti yerine jQuery yazmak yeterli.

$.ajax

yerine

jQuery.ajax

Geolocation

Geode internet tarayıcıları için yeni kavram. Mozilla laboratuarlarının geleceğin tarayıcıları hakkındaki düşüncelerinden biri idi bu. Kullanıcıların yerini belirleyip ona göre sayfalar ve içerikler sunmak . Örneğin yeni bir yere taşındınız ve en yakın yemek yyiyecek yeri veya marketi bulmak için internet tarayıcını size yardımcı olabilecek.

Firefox 3 ile eklenti yardımı ile gelen bu özelliği, isterseniz deneyebilirsiniz. Buradan indirip deneyebilirsiniz. Deneme yapmak için örnek bir siteye yönlendiriyor, ancak Türkiye’den kullananlar için hata veriyor. Türkiye’deki ip durumu düşünüldüğünde pek kullanışlı bir araç olmayacak. Ama ne diyelim gelecekten ümitliyiz.

Gizlilik konusuda düşünülerek kullanıcının verdiği kadar bilgi ile sonuçları gösteriyor. Üst barda çıkan bilgi ekranı yardımı ile yapılacak.

Firefox3.1 ile birlikte gelecek olan özellik Geode eklentisinden daha iyi olacağı W3C Geolocation specification standartlarını destekleyen bir yapı kullanılacağı belirtiliyor. Bu standardı javascript gibi düşünebiliriz.

İnternet tarayıcıları gittikçe kullanıcıya daha çok düşünen araçlar olmaya başlıyor. Son zamanlardaki rekabet en çok kullanıcıya yaradığı kesin.

http://www.informationweek.com/galleries/showImage.jhtml?galleryID=263&articleID=211201744 sitesinde 3-10 arasındaki resimler bize işleyişin nasıl olduğunu güzel bir şekilde gösteriyor.

@font-face ile yazı tipi desteği

Web kod yazarları ve tasarımcıların en büyük sorunlarından birisi işletim sistemin desteklediği başlangıçta yüklü yazı tipleri dışındaki yazı tiplerini web sitelerinde kullanamama sıkıntısıdır. Tam bir kullanamama diyemeyiz tabi kullanabiliyoruz ama başlangıçta yüklü olanlar gibi değil.

Firefox 3.1 ile birlikte gelen bu özellik desteği sayesinde farklı yazı tipleri kullanımında büyük bir adım daha atılmış oluyor. Gelecek ümit veriyor bize.

Mac ve Windows kullanıcıları için eklenen bu özelikle Linux için Firefox 3.1 kararlı sürümü ile birlikte gelecekmiş.

Beni en çok sevindiren özelliği bu oldu açıkçası.

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Video ve Auido Desteği

HTML 5 ile birlikte gelen <video> ve< auido> elemanı desteği Firefox 3.1 ile birlikte geliyor. Bu elemanlar sayesinde görüntülü ve işitsel öğeleri web sayfalarına eklemek daha basit olacak. Ayrıca Javascript ile bu nesneleri etkileşimli kullanabileceğiz.

Adres Çubuğunda Yenilikler

Adres çubuğunda özel karakterler ile arama sağlanarak sınırlarımızı belirlememiz sağlanmış. Yeni çıkan tarayıcılarda adres çubuğu artık çok fonksiyonlu hale getirilmeye başlandı. Firefox3.1 ile gelen özel arama karakterleri yardımı ile aramayı neredeyse tek adres çubuğuna taşımışlar diyebiliriz.

^ işareti ile geçmişte gezdiğimiz sayfalarda arama yapabiliyoruz.
* işareti ile favorimize eklediğimiz sitelerde arama yapabiliyoruz
+ işareti ile eklediğimiz etiketlerde arama yapabiliyoruz.
# işareti hem başlıkta hemde etiketde arama yapmak için kullanıyor.

Yeni Javascript Motoru – TraceMonkey

Yeni Javascript motoru ile Google Chrome’un tahtını elinden aldı. SunSpider JavaScript testinde bir numara. Google Chrome’un geliştirdiği Javascript motoru ile tarayıcılar Javascript motorlarını tekrar gözden geçirmek zorunda kaldı. Firefox yeni Javascript motoru ile hızını arttırdı. Rekabet kullanıcıya yarıyor.

TraceMonkey başlangıçta kapalı geliyor açmak için

1. Adres bara about:config yazın
2. Filter alanında javascript.options.jit.content girip üzerine iki kere tıklayıp false olan değeri true yapın
3. Tarayıcıyı açıp kapatın

XHR

XMLHttpRequest (XHR) API’si. Javascript ve diğer diller tarafından kullanılan bu API, sunucu ve istemci arasında XML ve diğer verilerin aktarılmasını sağlıyor. Bu API’nin Firefox 3.0 ile beraber gelmemesine sebep olarak, XHR’nin spesifikasyonlarının kesinleşmesi ve güvenlik modelinin iyileştirilmesi için biraz daha zamanın olmasıymış. Mozilla yeterli zamanın geçtiğine kanaat getirmiş ki 3.1 bu özelliği eklemiş.

Bu özelliklere ek olarak

• Web Standartlarına daha uygun: Gecko düzen motorunu web standartlarına daha uygun hale getirilmiş. Acid 3 testinden 89 alarak mevcut tarayıcılar(Google Chrome, İnternet Explorer7 – 8 b2) arasındaki en iyi notu aldı.
• CSS 2.1 ve CSS 3 özelliklerinin desteği eklenmiş
• Daha önce eklenti ile yapılan sekmeler arası geçiş için ön izleme görünümü eklenmiş.
• Adres bar da girdiğimiz kelimeleri filtreleme özelliği eklenmiş.

Kararlı Sürüm ile gelecek özellikler

Özel Mod

Google Chrome ve Internet Explorer 8 ile birlikte gelen özel mod özelliği Firefox 3.1 ile birlikte gelecek. Bu özellik sayesinde

Speed Dial

Speed Dial ile yeni açılan sekmede en sık kullanılan web sitelerini küçük resimleri ile birlikte listeleyebiliyoruz. Daha önce eklentiler ile kullandığımız bu özellik yeni sürüm ile birlikte geliyor.

Daha fazla yenilik

Bunun haricinde Firefox 3.1 ile birlikte bir çok kullanışlı özellikler getirilecek.

• http://developer.mozilla.org/web-tech/2008/10/14/firefox-31-beta-1-an-overview-of-features-for-web-developers/
• http://www.siberkultur.com/?q=firefox-3-1
• http://mehmetergin.blogspot.com/2008/10/firefox-geolocation-api-specification.html
• http://lifehacker.com/5063481/firefox-31-adds-keyword-filters-to-the-awesomebar
• http://lifehacker.com/396154/firefox-31-new-features-already-in-the-works
• http://lifehacker.com/5048604/firefox-31-to-add-private-browsing-mode
• http://lifehacker.com/5049728/firefox-31-to-enable-color-profile-support-by-default
• http://lifehacker.com/5062744/firefox-31-to-include-smarter-session-restore
• http://lifehacker.com/5063202/firefox-31-beta-1-now-available-for-download-first-look
• http://www.readwriteweb.com/archives/firefox_31_beta_1_geolocation.php
• http://blogs.zdnet.com/hardware/?p=2781
• http://news.cnet.com/8301-17939_109-10066397-2.html?part=rss&tag=feed&subj=Webware
• http://ed.agadak.net/2008/07/firefox-31-restricts-matches-keywords
• http://www.tgdaily.com/html_tmp/content-view-39752-140.html
• http://www.informationweek.com/galleries/showImage.jhtml?galleryID=263&articleID=211201744
• http://www.pclabs.com.tr/2008/05/23/mozilla-firefox-31-bu-sene-sonunda-cikiyor/

Dreamweaver’ın “Balancing Braces” özelliği sayesinde parantez takibi kolaylaşıyor. Fonksiyonun nereden başlayıp nerede bittiğini görmek gerekiyor. Bu özellik bize parantez takibi sağlıyor.

Güzel bir özellik olsa da NotePad ++’ ın çizgileri ve parantez takip olayı bence daha iyi. Bilmiyorum belki Dreamweaver’ın böyle bir ayarı vardır. Ama ben bilmiyorum.

Web kod yazarları için büyük kolaylık sağlayan FireBug’ın yeni sürüm çıktı ama kimseden ses çıkmadı. Belkide Google Chrome duyurusunun altında ezildi. Ama Google Chrome’un benim için en büyük dezavantajı FireBug gibi gelişmiş bir CSS ve XHTML aracının olmamasıdır. Aslında ben bile geç kaldım, çünkü ben yazana kadar 1.2.1 sürüm çıktı.

FireBug’ın yeni sürümünde daha çok hata düzeltme, güvenlik düzeltmeleri ve kararlı hale getirme işlemleri göze çarpıyor.

Göze çarpan özellikleri incelersek;

Firefox 3 Desteği

Benim Firefox 3′e geçmememin en büyük nedeni FireBug’ın kararlı bir şekilde Firefox 3′de çalışmaması idi. FireBug 1.2 sürümünde Firefox 3 desteğini sunarak bizi bu dertten kurtarmış oluyor. Artık Firefox3 kullanıyorum ve çok memnunum.

Araçlar daha kaliteli hale getirilmiş

Javascript panel, net paneli  ve Konsol paneli yenilenmiş ve geliştirilmiş. Bu panellerdeki birçok sorun giderilmiş.

Panellerin Aktifleşmesini Seçebiliyoruz

John Resig’in söylediğine göre görünüşte o kadar önemli olmasada bu sürümün en önemli özelliği olarak gösteriyor.

Bu özelliğin bize ne gibi avantajı var derseniz. https://wiki.mozilla.org/User:Rcampbell/Firebug_performance bu çalışmaya göz atmanızı öneririm. Her pencerede FireBug Javascript panelinin açık olması performansı ciddi mana da etkiliyor. Bu nedenle böyle özellik ekleyerek FireBug’ın bir handikapınıda gidermişler.

Artık Javascript panel, net paneli  ve Konsol panellerinin aktif ve pasif olmasını ayarlayabiliyoruz. Normal durumda HTML, CSS ve DOM panelleri çalışıyor, Javascript, Net ve Konsol panelleri ise bizim seçimimize göre aktif ve pasif hale getirilebiliyor.

Yeşil ok işareti yerine FireBug kendi böcek ikonun koymuş. Böcek ikonu eğer Javascript panel veya net panel aktifleştirilirse normal rengini alıyor. Farenin imlecini üzerine getirince kaç sitede aktif olduğu bilgisini gösteriyor.

Önceki sürüm da olan bu sitede FireBug’ı kullanma özelliği biraz daha geliştirilmiş. Aktif site listesinin bulunduğu ayrı bir pencere ile bu kısım geliştirilmiş.

Birlikte Aç Ekranı

Belki birçok kişi için önemsiz gibi görünen bir özellik ancak benim için çok önemli ve kullanışlı bir ekleme oldu. Çünkü buradan kopyalayıp yapıştırmak sorun oluyor, koddan başka içerikleride alıyordu falan ve her defasında kopyala yapıştır gına getiriyordu bazı projelerde.

Bu ekrandan açmak istediğimiz editörleri seçebiliyoruz ekleyip çıkarabiliyoruz.

Suspend/Resume Firebug

Yeni eklenen bu özellik sayesinde FireBug’ın tüm panellerini bir tık ile askıya alabiliyoruz ve daha sonra bu işlemi geri alabiliyoruz. Bu daha çok cep telefonundaki tek tuş gibi bir şey.

Rainbow FireBug ile javascript kodları daha anlaşılır

FireBug’daki javascript kodları renklendirme yapılmadığı için kod yığını şeklinde görünüyor bunu aşmak için güzel bir eklenti hazırlamışlar.

https://addons.mozilla.org/en-US/firefox/addon/7575

Bu eklenti her ne kadar test aşamasında olsa da güzel bir eklenti.

Son olarak Firefox’um Türkçe olduğu için sanırım FireBug’ımda Türkçe oldu. İlk başta bazı sorunlar olsada kullandıkça alışıyor insan. Bazı bölümler hala İngilizce kalmış.

Bu arada FireBug 1.3 çalışmalarına başlanmış bile.

Kaynaklar

• http://ejohn.org/blog/firebug-12-released/
• http://code.google.com/p/fbug/source/browse/branches/firebug1.2/docs/ReleaseNotes_1.2.txt
• https://addons.mozilla.org/en-US/firefox/addon/1843
• http://www.railsjedi.com/posts/24-Firebug-1-2-Excitement açılmıyorsa http://64.233.183.104/search?q=cache:nJW1FmPsOkUJ:www.railsjedi.com/posts/24-Firebug-1-2-Excitement+Firebug+1+2+Excitement&hl=en&ct=clnk&cd=1&client=firefox-a
• http://ajaxian.com/archives/firebug-12-beta-for-firefox-3-rc-1
• http://blog.mozilla.com/about_mozilla/2008/08/25/firebug-12-released/
• http://www.ajaxonomy.com/2008/javascript/firebug-12-released
• http://ajaxian.com/archives/firebug-12-the-final-release-is-out-there
• http://ostatic.com/171732-blog/firebug-group-releases-1-2
• http://justtalkaboutweb.com/2008/04/09/firebug-12-works-with-firefox-3-beta-5/