Aslında bu sistemi K2 teması kullanıyor. Ben de kodu oradan çıkarıp ihtiyaçlarıma göre düzenledim. Gelin size nasıl yapıldığını anlatayım.

Çalışma şekli şu: Birkaç satırlık bir javascript kodu JQuery yardımıyla içeriğinizi barındıran div (burada #container diye adlandıralım) sayfanın en üst noktasına ulaştığında body’ye “smartposition” sınıfını ekliyor. Eğer #container tekrar gözle görünür hale gelirse “smartposition” sınıfı body’den çıkarılıyor. Siz de CSS üzerinden menünüze “smartposition” sınıfı eklendiğinde “position: fixed” komutunu atıyorsunuz. Herşey bundan ibaret.

1. JQuery’i indirin ve sayfanızdan çağırın

JQuery’i sitesi üzerinden indirin, web sitenizin bulunduğu klasöre atın ve sayfanızdan çağırın. Bunun dışında az sonra oluşturacağımız “rollingdiv.js” dosyasını da şimdiden çağırın:

<script src="scripts/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="scripts/rollingdiv.js" type="text/javascript"><!--mce:1--></script>

2. Rollingdiv.js

Herşey burada bitiyor. Yukarıda çağırmış olduğumuz rollingdiv.js isimli dosyayı ilgili klasörde oluşturun ve aşağıdaki kodu belgeye yapıştırın:

function smartPosition(obj) {
	if ( jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 ) {
		return;
	}
 
	jQuery(window).scroll(function() {
		// Detect if content is being scroll offscreen.
		if ( (document.documentElement.scrollTop || document.body.scrollTop) >= jQuery(obj).offset().top) {
			jQuery('body').addClass('smartposition');
		} else {
			jQuery('body').removeClass('smartposition');
		}
	});
};

(Not: Kod K2 temasından alınmıştır.)

3. HTML belgesi

Şimdi de HTML belgemize aşağıdaki kodu yapıştırıyoruz:

<script type="text/javascript"><!--mce:2--></script>

Buradaki “#container” elementi yukarıya ulaştığında harekete geçilecek olan element oluyor. Bu adımla birlikte HTML ve JS bölümünü bitirmiş oluyoruz. Yani #container divimiz sayfanın tepesine ulaştığında sayfanın body’sine “smartposition” sınıfı eklenecek, son görüntü şu halde olacak;

CSS belgesi

Yapmamız gereken son şey CSS belgemizden “smartposition” sınıflı body’ye özel komutlar atamak. Bu adımda tamamen özgürsünüz; sayfanızın arkaplanının kırmızı olmasını da isteyebilirsiniz, navigasyonunuzun havada asılı kalmasını da. Bu örnekte isteğimiz ikinci şık olduğundan, CSS’imize aşağıdaki kodu eklememiz gerekiyor;

body.smartposition #navigation {
	position: fixed;
	z-index: 10;
}

Bitti bile! “position:fixed;” özelliği #navigation isimli alanın (div) veya listenin (ul, ol) havada asılı kalmasını sağlıyor. Tabii sadece “smartposition” sınıfı body’ye ekli olduğunda. Yani içerik alanımız (div#container) sayfanın tepesine ulaştığında…

Yukarıdaki kodu isteğinize göre değiştirebilirsiniz. Bunun temel mantığı anlatmaya yeteceğini düşünüyorum. Sorularınız, ek istekleriniz olursa yorum yazarak bana ulaşabilirsiniz.

Güncelleme – 07.10.08, 18:45

Bu yöntem IE6′da çalışmamaktadır. Çünkü IE6 ‘position: fixed;’ komunutu anlamamaktadır. Fakat bunu çözmek için birçok yöntem bulunuyor… Kısaca göz atmak yeterli.

Dikkat: Tasarımda kullanılmış olan marka ve logolar hayal ürünüdür.

Konsept

Tasarım, alışılagelmiş Türk haber sitelerinden farklı bir konsepte sahip. Aslında; popüler Alman haber siteleri Stern, Bild ve Spiegel Online’ın konseptlerini karıştırıp, ortaya böyle birşey çıkardık. Ziyaretçi uzunca bir sayfa üzerinde ilgilendiği kategorilerde öne çıkarılmış haberlere odaklanıyor. Sayfanın uzunluğu, kategorilerin tekrarı ve kategorilerdeki haber sayıları ortaya Türkiye’de henüz gerçek anlamda kullanılmamakta olan bir konsept çıkarıyor. Ziyaretçi böylece henüz anasayfa üzerinde bile yeterince bilgi sahibi oluyor.

Gerçeği söylemek gerekirse, bu tür bir konseptin Türkiye’de neden hiçbir haber ve gazete sitesi tarafından kullanılmamakta olduğunu anlamakta güçlük geçiyor, ve kullanıcıyı gerçek anlamda içeriğe odaklayan bu tür bir tasarımın getireceği başarıyla gerçekten inanıyorum.

Tasarımı gerçekten anlamak için lütfen indirip ayrıntılı olarak inceleyiniz.

Ne amaçla kullanılabilir?

Tasarımı istediğiniz şekilde değiştirebilir, güncelleştirebilir, çoğaltabilir, ticari ve kişisel projelerinizde kullanabilir, yeni versiyonuyla yeniden dağıtabilirsiniz. Tasarım CC Attribution-Share Alike 3.0 lisansına sahiptir; bundan dolayı eğer tasarımı bir sitede kullanırsanız, sitenin künye sayfasında tasarımcının adını bu sitenin anasayfasına bir bağlantı vererek yayınlamanız gerekmektedir. Tasarımı yeniden dağıtırsanız, tasarımcının ismini bir dosyada yayınlamak ve tasarımı benzer bir lisansla paylaşmak durumundasınız.

İndirin

Tasarımı bu bağlantı üzerinden indirebilirsiniz. Soru ve sorunlarınızı yorum yaparak dile getirebilirsiniz. İyi eğlenceler!

sIFR her ne kadar basit kullanımlı, iyi bir çözüm olsa da düzenleme için Flash programına ihtiyaç duyulması ve .swf formatını kullanması iki büyük dezavantaj. Bu yazıda da, size FLIR’i, yani webde Flash olmadan istediğiniz fontu nasıl kullanacağınızı göstermek istiyorum. Siz metninizi yazıyorsunuz, FLIR onu istediğiniz stilde bir grafiğe dönüştürüyor.

Örnek için tıklayınız.

1) Flir’in son versiyonunu indirin

Bu adres üzerinden Flir’in son versiyonunu indirin ve dosyaları sunucunuza aktarın. Zip dosyasındaki klasörü (örn. facelift-1.2b3-3) öncesinde ‘facelift’ olarak yeniden adlandırmanız kurulumda kolaylık sağlayacaktır. Unutmamanız gereken bir diğer şey ise Flir’in sorunsuz çalışmak için PHP5′e ihtiyaç duyması, eğer hala PHP4 versiyonunu kullanmaktaysanız ve başlıklarınız bir türlü görünmüyorsa kontrol paneliniz üzerinden PHP versiyonunuzu yükseltiniz.

2) Dosyaları çağırın

Sunucunuza ‘facelift’ isimli klasörü de attığımıza göre, artık gerekli JS dosyalarını web sayfamızdan çağırabiliriz. Örnek olarak index.html sayfamızı açıp bölümüne aşağıdaki kodu ekleyin:

1

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

Eğer JS dosyalarınız ayrı bir klasördeyse, ve flir.js dosyasını da o klasöre atıp oradan çağırmak isterseniz, dosyayı açıp 30. satırdan tam adresi belirlemeniz gerekmekte. Diyelim ki flir.js dosyasını ‘js’ isimli bir klasöre attıysanız, dosyanın 30. satırı aşağıdaki gibi görünmelidir:

1

,path: 'facelift/'

Ve gelelim index.html sayfamızdaki son işleme. Flir’in çalışma komutunu alabilmesi ve normal başlıkları resimlere dönüştürmesi için aşağıdaki kodu </body>’nin hemen önüne koymanız gerekmektedir.

1
2
3
4

<script type="text/javascript"> 
    FLIR.init(); 
    FLIR.auto(); 
</script>

3) Fontlarınızı seçin ve çağırın

Bitti bile, Flir’i sitemize neredeyse entegre ettik. Öncelikle fontlarınızı ‘facelift -> fonts’ klasörüne atın. Sonrasında yapmamız gereken ‘facelift’ klasörü içerisinde bulunan ‘config-flir.php’ dosyasını açıp 39. satırdan itibaren fontlarımızı eklemek/düzenlemek.

37
38
39
40
41
42
43
44

// Each font you want to use should have an entry in the fonts array. 
$fonts = array(); 
$fonts['css-font-ismi']   = 'font.ttf'; 
$fonts['css-font-ismi-2']       = 'font2.ttf'; 
$fonts['css-font-ismi-3']  = 'font3.ttf';   
 
// The font will default to the following (put your most common font here). 
$fonts['default']       = $fonts['css-font-ismi'];

‘conflig-flir.php’ dosyasında 37. satırdan itibaren başlayan bölümde yazı tiplerinizi yukarıdaki şekilde ekleyebilir, varolan yazı tiplerini düzenleyebilirsiniz. Dilediğiniz kadar font ekleyebilir, çağırabilirsiniz. Yukarıda ‘css-font-ismi’ olarak geçen bölümde tanımlayacağınız isim CSS dosyanızdan çağıracağınız font ismi olacaktır.

4) CSS ile başlıklarınızı şekillendirin

Ve son adımımızda işlemin başında eklemiş olduğumuz ‘flir.auto()’ komutunu (bkz. Adım 2) düzenleyecek, Flir’i dilediğimiz başlık ve CSS sınıflarına atayacağız.

1

FLIR.auto([ 'h1', 'h2', 'h2.kirmizi', 'strong' ]);

Yukarıdaki komut ile tüm h1, h2 başlıkları ile ‘kirmizi’ sınıflı h2 başlıklarına ve aynı zamanda tüm kalın yazılara (strong) FLIR atanacaktır. Bu adımdan sonra yapmanız gereken son şey, CSS’den yukarıda belirtmiş olduğunuz başlıklara istediğiniz fontu ve rengi atamak. FLIR gerisini sizin için halledecek, başlıklarınız resim olarak görüntülenecektir.

1
2
3

h1 { font-family: css-font-ismi, Arial, serif; }  
h2 { font-family: css-font-ismi-2, Arial, sans-serif; }  
h2.kirmizi { font-family: css-font-ismi-3, Arial, sans-serif; color: red; }

Örnek dosya için tıklayınız.

FLIR’ın artı yönleri

• Kurulumu SIFR’e göre çok daha basit.
• Kurulum için herhangi bir yardımcı program gerektirmiyor (örn. Adobe Flash)
• Flash Player gerektirmediği için her tarayıcıda sorunsuzca görüntülenebiliyor.
• Flash Player gerektirmediğinden dolayı daha stabil bir çözüm sunuyor

FLIR’ın eksi yönleri

• Fontları Photoshop’un ’sharp’ tekniğiyle yorumladığından daha ayrıntılı yazı tiplerinde sorun çıkarabiliyor. sIFR’e göre daha kalitesiz bir görüntü sunuyor.
• Henüz Türkçe karakter desteği sorununu çözemedim. Ancak gelişticiyle iletişime geçtim, kısa süre sonra bir çözüm bulacaktır diye umuyorum.
• FLIR henüz beta versiyonunda olduğundan büyük projelerde kullanmak için biraz daha beklemek gerekiyor.

FLIR, tüm tarayıcılar CSS3 ile birlikte gelen ‘evrimsel’ her yazı tipini destekleme özelliğini sunana kadar sIFR için iyi bir alternatif olacağa benziyor. Bundan sonra bazı projelerimde kullanmayı düşündüğüm bu güzel skripti XHTMLMutfağı olarak sIFR’in yanında desteklemeye başlayacağız.

En önemli neden olarak Photoshop taslaklarının »tıklanabilir« olmamasının gösterildiği yazıda, grafik editöründe detaylara harcanan sürenin tamamen kayıp zaman olduğu anlatılmış. Ayrıca bu programda metinlerin normal bir HTML sayfasına göre çok farklı olduğuna da değinilmiş. Daha birçok madde sıralamışlar, tamamına buradan ulaşabilirsiniz.

37signals‘daki bu arkadaşlar farklı bir konuya değinmiş olsalar bile, bu konuya dar bir açıdan baktıklarını düşünüyorum. Hoş, eğer siz de sadece kendi projeleriniz için çalışmaktaysanız, Photoshop’ta detaylarla uğraşmak zaman kaybetmek için en kolay yöntemdir. Bu durumda kağıda çizim yapabilir veya favori text editörünüzle işe koyulabilirsiniz; sonuçta taslağınızı CSS/XHTML’e çevirecek, tüm detayları son olarak orada vereceksiniz.

Fakat müşterileriniz için çalışmaktaysanız, durum yazının yazarlarının bahsettiği kadar kolay olmuyor. Müşteriniz ilk görüşmede de, son konuşmada da birçok detay görmek isteyeceğinden Photoshop’la biraz daha fazla zaman geçirmeniz gerekmekte. Böyle bir durumda müşteriyle önceden görüşmek, ve onun isteklerine göre bir yol izlemek en iyisi. Unutulmaması gereken şu ki, eğer CSS/XHMTL çevirimini siz yapmayacaksanız, Photoshop’la biraz daha haşır neşir olmalı, en küçük detaylara bile inmelisiniz. 

Alman tasarımcı Manuela Hoffmann‘a göre ise, ilk görüşmede kesinlikle birden fazla grafik taslalığının müşteriye sunulmaması gerekiyor. Bu, zaman kaybından başka birşey değilmiş. Bence de :-).

Tasarımımızda yan yana üç kutumuz olduğunu düşünelim. height elementi ile kolonların uzunluğunu önceden belirlemezsek, bu üç kutunun boyutları içeriğe göre değişecektir;

Fakat tasarımımızın gereksinimlerine göre, üç kolonun boyutunun en uzun kolonunkine göre otomatik olarak uzatılması gerekebilir. Kelimelerin bittiği yerde, işler yine resimlere düşüyor;

Faux Columns

‘Faux Columns‘ methodu, bu konuda en çok kullanılan methodların başında geliyor. Aslında konsept çok basit: Tüm div’leri kaplayan bir ana kutu oluşturuyor ve bu kutuya üç kolonu kaplayan, 1 piksel yüksekliğinde bir arkaplan resmi atıyoruz. Diğer üç kolonu içeren bu kutunun boyutu içeriğe göre otomatik olarak uzayacağından dolayı, arkaplan sorunumuz da çözülmüş olacak. Örnek için tıklayınız.

Lütfen unutmayın: ana kutunun içerisinde bulunan 3 kutuya float:left; efekti uygulandığından, kapsayıcı div’imiz ilk adımda otomatik olarak uzamayacaktır. Bunun için kapsayıcı kutuya da float:left; efektini atayabilir, veya hemen altında yeni bir div oluşturarak kendisine clear:both özelliğini ekleyebilirsiniz.

Diğer Metodlar

Bu en çok kullanılan ve en kolay yöntem olsa da, aynı sonuca ulaşmanın farklı yolları da yok değil. Örneğin kolon genişliklerinin elastik olmasını ve tarayıcı boyutuna göre otomatik olarak değişmesini istiyorsanız, belirli genişlikteki arkaplan resimleri size ne yazık ki yardımcı olamayacaktır. Bu durumda internette dolaşan birçok JS kodunun yardımını alabileceğiniz gibi, Ed Eliot tarafından yazılmış olan bu güzel makaleye de göz atabilirsiniz.

Çok da beklenmedik olan birkaç haftalık Türkiye ziyaretinden sonra, blogun yönetici panelinde olmak bana mutluluk veriyor. Üstelik yanımda getirdiğim memleket havasıyla… Sistemde bitirilip yayınlanmayı bekleyen taslak çok.

Hem sizi, hem de onları daha çok bekletmemek için şimdilik iyi çalışmalar, iyi bayramlar diliyorum efendim…

Yeniliklerden geri kalmamamız için, yeni versiyonun getirdiği gelişme ve avantajlardan bahsedip, yepyeni kullanım tekniğine bir göz atmak istiyorum.

Dikkat: Eğer girişten pek de birşey anlamadıysanız ve “sIFR” kelimesini yanlış yazdığımızı düşünüyorsanız, tekniğin tanıtıldığı yazının giriş bölümünü okumanızı tavsiye ederim.

Yenilikler

sIFR 3′ün getirdiği yenilikler, gerek metnin gösterilmesi, gerek kullanım kolaylığı açısından birçok şeyi geliştirdi, kolaylaştırdı.

• Daha kolay ve iyi font boyutu ayarlama
• FlashCSS; genel anlamda birden çok renk ve metin stillerini bir arada kullanma
• Pixel font desteği
• Daha kolay ve ayrıntılı kurulum
• Flash dosyasının içinden arkaplan atama desteği

Kurulum

Öncelikle şu anki en güncel versiyon olan ‘Revision 278‘i bu bağlantı üzerinden indiriniz. İndirmiş olduğunuz ’sifr3-r278.zip’ dosyasının içinden aşağıdaki dosyaların çıkması gerekiyor;- changelog.txt
- css klasörü
- demo klasörü
- flash klasörü
- js klasörü
- LICENCE

‘CSS’ klasörü gerekli olan CSS dosyalarını, ‘demo’ klasörü çalışan bir demoyu, ‘flash’ klasörü gerekli SWF dosyasını oluşturabilmeniz için gerekli dosyaları, ‘js’ klasörü ile gerekli javascript dosyalarını içeriyor.

Dikkat: En önemli kurulum değişikliklerinden biri, sIFR’in artık sadece bir sunucu üzerinde çalışması. Yani HTML dosyalarını direk açtığınızda hatalı veya eksik gösterim olabileceğinden, sIFR’i ya bir sunucu üzerine, ya da local sunucunuz üzerinde kurmanız tavsiye olunur.

Flash dosyası

‘Flash’ klasöründe bulunan sIFR.fla dosyasını Adobe Flash programı ile açınız (30 günlük test versiyonunu Adobe sitesi üzerinden indirebilirsiniz.). Aynı klasörde bulunan diğer 3 dosyanın yerini değiştirmemeye dikkat ediniz. SWF dosyasının kaydı sırasında bu 3 dosyanın aynı klasörde bulunması gerektiğini lütfen unutmayınız.

Dosyayı açtıktan sonra, karşınıza gelen beyaz alana çift tıklayınız. “Bold Italic Normal” şeklinde bir metinle karşılaşacaksınız.

Dosya boyutunu yüksek tutmamak için tüm metni silin. Ardından, istediğiniz fontu seçip 3 harf girdikten sonra sırasıyla kalın, italik ve normal versiyonlarını seçin. Eğer özel karakterleri de Flash dosyanıza eklemek istiyorsanız (örneğin Türkçe karakterler, rakamlar ve noktalama işaretleri) aşağı palette bulunan ‘embed’ butonuna tıklayıp eklemek istediğiniz karakterleri karşınıza gelen alana girin.

Son olarak, File -> Export -> Export Movie üzerinden Flash dosyasını çıkartın. Şimdi, işin HTML bölümü için hazırsınız.

HTML dosyası

HTML dosyanızda yapmanız gereken tek şey, gerekli CSS ve Javascript dosyalarını kodlarınıza entegre etmek.

1
2

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

Şimdi de JS kodlarının yerlerine gitme vakti geldi;

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Kodları kopyaladıktan sonra, lütfen dosyaların çağrıldığı adresin doğru olduğuna emin olunuz.

JS dosyası

Ve en büyük yeniliklerin olduğu alandayız. JS üzerinde yapacağımız değişikliklerle sIFR’li başlıklarımızı güzelleştireceğiz.

Eskiden HTML dosyasının içerisine yazdığımız sIFR başlık görünüm kodları, artık sifr-config.js dosyasının içinde olduğundan, bu dosyayı favori metin editörünüzle açın. Bu boş sayfada öncelikle sIFR başlığımızın adını tanımlayacağız, ardından font dosyamızı çağıracağız. Resmi sitede verilen ‘cochin’ isimli fontun örneğini alırsak, kodumuz aşağıdaki şekilde olabilir.

1

var cochin = {src: 'cochin.swf'};

var kodunun yanına istediğiniz herhangi bir ismi verebilirsiniz. Bu ismi daha sonra aktifleştirme sırasında çağıracağız. cochin.swf dosyasının yolunu sunucuya göre verdiğimizden, dosyanın yolunu, bulunduğu klasöre göre /cochin.swf ve ../../cochin.swf şeklinde de çağırabiliriz.

Şimdi, başlıkarı çağırma ve aktifleştirme zamanı;

1
2

sIFR.prefetch(cochin);
sIFR.activate(cochin);

Eğer birden fazla başlık stili tanımladıysanız (örneğin cochin, times, ornek gibi…), bunları bir virgül yardımıyla çağırıp aktifleştirebilirsiniz;

1
2

sIFR.prefetch(cochin, times, ornek);
sIFR.activate(cochin, times, ornek);

Ve son olarak, standart başlığın sIFR ile değiştirilmesi için ihtiyaç duyduğumuz kodu ekleyelim. Bu aynı zamanda tüm stillerin ve özelliklerin verildiği bölüm olacak;

1

sIFR.replace(cochin, { selector: 'h1'});

Bu şekilde, oluşturduğumuz cochin ismindeki stil, cochin.swf ile tüm h1‘lerin yerine görüntülenecek. Yukarıda h1′in tanımlanmış olduğu selektöre hangi başlık ve stilleri tanımlayabileceğinizi öğrenmek için, resmi sitedeki bu kaynak yeterli olacaktır.

Ve şimdi işin en güzel yanına gelelim; bu versiyonla gelen taze bir özelliğin yardımıyla, başlıklarımıza artık direk JS üzerinden, kolayca stil verebiliyor, link stillerini atayabiliyoruz;

1
2
3
4
5
6

sIFR.replace(cochin, {selector: 'h1',css: [
'.sIFR-root { text-align: center; font-weight: bold; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #CCCCCC; }'
]});

Ve CSS…

Javascript’i aktif olmayan, veya Flash Player’a sahip olmayan kullanıcıların başlıklarınızı en iyi şekilde görebilmeleri için, CSS dosyasında düzenleme yapabilirsiniz. Ayrıca sIFR’li başlıklarınızın metin boyutları da bu dosyadan alınacaktır. Bunun için sIFR-screen.css dosyasını açın.

1
2
3
4
5
6

.sIFR-active h1 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  font-size: 18px;
}

sIFR-active‘e yapı gereği ihtiyaç duyulmakta. visibility: hidden; sIFR aktif olduğunda normal metni saklıyor. font-family ise deaktif durumda gösterilen başlığın fontunu belirliyor. İdeal gösterim için line-height: 1em kodunu da stilinize ekleyin. font-size başlıkların genel font boyutunu belirliyor.

Laf aramızda…

Hem estetiksel, hem fonksiyonel açıdan ziyaretçilerinizi rahatlatmak için sitenize 5 dk. ayırın, ve gerekli gördüğünüz yerlerde sIFR’in sunduğu güzelliklerden yararlanın. Yeni resmi sitesine buradan, resmi (İngilizce) kurulum kılavuzuna buradan, makyaj konuları hakkınd ayrıntılı bilgilere buradan, Javascript’le yapabileceğiniz sihirlerin kullanım kılavuzuna buradan, bu kadar bağlantı yeter diyorsanız da, internetin sonuna buradan ulaşabilirsiniz.

Güncelleme

Volkan Görgülü sIFR tekniğini kullanma yöntemlerini güzel bir video ile anlatmış. Kelimelerin size yetmediğini düşünüyorsanız video’yu buradan izleyebilirsiniz.

Neden bahsediyoruz?

‘Faviconlar’, web tasarımcıları tarafından web siteleri için hazırlanan ve tarayıcılar tarafından belli yerlerde görüntülenen küçük ‘favori simgeleri’dir. Modern tarayıcılara örnek olarak Firefox, Safari ve Opera bu simgeleri adres çubuğunda ve sekme bölümünde gösterirken, Internet Explorer faviconları yer imleri penceresinde görüntülemektedir.

Mantık

<head></head> kodları arasına yerleştirilen kodlar yardımıyla, sunucuya yüklenmiş olan favicon.ico isimli dosya tarayıcıya iletilmekte, ve bu dosya tarayıcı tarafından belli yerlerde görüntülenmektedir. Genellikle site tasarımı ile aynı stile sahip olan, 16×16 ve 32×32 piksel büyüklüğündeki bu dosyalar sitenin tasarımının, dolayısıyla renk ve genel stilinin ziyaretçinin aklında kalmasına yardımcı olmakta, ziyaretçinin beyninde küçük de olsa yer edinmektedirler.

Farklı kullanıcılar aynı platform üzerinde aynı tarayıcıya sahip olsalar bile, faviconların her bilgisayarda görüntüleneceği garantisi yoktur. Buna rağmen bu durum fazla yaşanmamaktadır.

Ben de isterim!

Tüm bunlar heyecan verici değil mi? Kullanımı da öyle, zira hiç kod yazmadan da sitenize bir favicon atayabilirsiniz! Tüm modern tarayıcılar, sitenin en üst klasöründe bulunan favicon.ico dosyasını otomatik olarak favicon olarak algılamaktadırlar. Kısacası, sitenizin ana klasörüne ‘favicon.ico’ isimli 32×32 veya 16×16 boyutlarındaki ikon dosyasınızı yüklediğinizde, ikonunuz favicon olarak algılanacak ve gerekli yerlere konumlandırılacaktır.

Eğer işinizi yine de ‘garantiye almak’, veya ikon dosyanızı sunucunuzda başka bir klasöre yüklemek isterseniz aşağıdaki iki koddan birini kullanabilirsiniz;

<link rel="shortcut icon" href="http://siteniz.com/favicon.ico" type="image/vnd.microsoft.icon" />

<link rel="icon" href="http://siteniz.com/favicon.ico" type="image/vnd.microsoft.icon" />

Dikkat ediniz

• Yukarıdaki kodu sitenizin head bölümüne uygulamayı unutmayınız.
• Simgenizin 16×16 veya 32×32 boyutlarından birine sahip olmasına dikkat ediniz. Çıktı boyutu 16×16′dır.

Ziyaret ediniz

Oluşturmuş olduğunuz grafikleri ikon dosyasına Photoshop aracılığıyla dönüştürmek isterseniz bu photoshop eklentisi hoşunuza gidecektir. Şayet bu işlemi çevrimiçi ve ücretsiz olarak yapmak isterseniz bu adres tam size göre. Kendi grafiğinizi internetten oluşturmak ister, ve diğer favicon örneklerine göz atmak isterseniz burası tam sizlik.

Finder vs. Explorer

- Windows Vista dosya görüntüleyici

Mac OS X dosya görüntüleyici – Finder

Vista’nın dosya görüntüleyicisine ilk baktığımızda, gerçekten renk zengini olan bu işletim sistemini henüz ilk andan itibaren Mac OS X’e olan benzerliklerini farkediyoruz. Microsoft kendi stilini Vista’yla tanıtmayı başarmış, fakat işlevsellik olarak kendine özgü bir çizgi çizememiş gibi görünüyor. Sol tarafta bulunan kısayol menüleri, yukarı-sağ taraftaki arama kutusu ve ikon dizilimiyle Vista, Mac OS X’ten Vista’ya geçecek olanlar için hiç de zor bir sistem olmayacak gibi görünüyor.

Exposé vs. Flip 3D

F9 tuşuna bastığınızda tüm açık ekranları küçültüp kolay program geçişi yapmanızı sağlayan ‘Exposé’.

Ve Vista.

‘Exposé’ Tiger’ın şüphesiz en iyi yeni özelliklerinden biriydi. Varsa Mighty Mouse’unuzun yan tuşlarına, veya klavyenizde F9 tuşuna bastığınızda açık olan tüm pencereleri ekrana sığacak şekilde düzenleyip karşınıza getiren bu özellik, programlar arasında gerçekten kolay geçiş yapmayı sağlıyordu. Sanıyorum ikinci resim hakkında birşey dememe gerek kalmıyor.

Widgets vs. ‘Gadgets’

- Mac OS X Widgets

- Windows Vista Gadgets

Bu kadar da olur mu demeyin! Microsoft olabildiğini bize ispatladı. Mac OS X’in ünlü ‘dashboard’u ve ‘widget’ları, çok yakında Windows kullanıcılarına da sunulacak! Her ne kadar sağ kolonda olacak da olsa, fotoğraflarda da gördüğünüz gibi Apple Microsoft’a iyi bir fikir ‘hediye etmiş’. Sadece Microsoft da değil, Google ve Opera gibi yazılım şirketleri de bu kervana katıldılar.

iPhoto & Photo Gallery

- iLife’ın vazgeçilmezlerinde iPhoto

- Ve bu da tasarımı değişmiş iPhoto: Photo Gallery

Vista’nın diğer bir ‘yeni özelliği’ ise ‘Photo Gallery’ olacak. Photo Gallery ile albüm oluşturabilecek, fotoğraflarımız arasında gezinebilecek, hatta fotoğraflarımızı direk olarak DVD veya CD’ye çekebileceğiz! Program ikonları yine aşağıda bulunan Photo Gallery’nin sağ kolonunu aynı iPhoto’daki gibi albümler oluşturuyor.

Peki şimdi ne olacak

Internet Cafe sahibi bir abim gidip bilgisayarına Windows Vista yükleyecek, ardından bu mükemmel özelliklerle karşılaşacak: ‘Vay be, ne güzel yapmış adamlar!’

Michael Dell 8 yaşındayken bir derginin arka kapağında gördüğü ‘Tek sınavla lise diploması’ ilanına hemen başvurur. Başvurusunu onaylamak için evine gelen bir kadını karşılayan annesi, oğlunun banyoda olduğu söyler, neler döndüğünü anlamakta da gecikmez. Daha sonra kadının karşısına kırmızı bornozlu, sekiz yaşındaki Dell çıkar.

Dell bu başvurusunu ‘Tek bir basit sınav karşılığında okulun 9 yılını atlamak bana gayet iyi bir fikir gibi gelmişti’ cümlesiyle açıklarken, şu an belki de önünüzde duran mönitördeki ‘Dell’ yazısının oluşması için belki de ilk adımlarını farketmeden atıyordu.

Aslında size de gayet mantıklı geldi değil mi? Dell’in o cesareti kendisinde bulup, hiçbir bilgisi olmadan o sınav ile diploma almak istemesi, kendi deyimiyle ‘gereksiz şeylerin ortadan kaldırılması’ oldukça iyi bir fikir. Kendimizce Dell’e benzemek, onun gibi gereksiz adımları kaldırmak için gidip dergilerin arka kapaklarında ‘tek sınavla lise diploması’ ilanları aramamıza gerek yok. İşimizde web tasarımcılığı olduğuna göre ‘Tuzu Migros’tan alacağınıza en yakın bakkaldan alın’ veya ‘Ekmeği üç lokmada yiyeceğinize iki lokmada yiyerek zaman kazanın’ da demeyeceğimize göre, sanırım yavaş yavaş konuya girebiliriz.

- Öfff, yine mi CSS? -

Dell: Gereksiz adımları ortadan kaldırın!

CSS’in tasarımcılara sağladığı güzellikler sadece yararlı özelliklerde kalmıyor, ayrıca bu listeye kolay kodlama, ve bununla birlikte gelen ‘gereksiz adımları ortadan kaldırma’ da eklenebiliyor. Daha önceki bir yazıda, css’de aynı özellikleri barındıran elementleri gruplayabileceğimizden bahsetmiştim (Bkz. ‘Bahar temizliğine ne dersiniz?‘ Asıl konuya girmeden önce, gruplama işlemine basitçe dönüp, bildiklerimizi pekiştirelim;

Şöyle ki, aynı özellikleri barındıran elementleri çift kez yazmaktansa virgül (,) kullanarak, bu elementlerin özelliklerini tek satırda belirtebiliyorduk;

Yanlış (veya iyi değil);

Doğru (veya daha iyi);

Bir de, yine gruplama işlemi var ki, birkaç özelliklerin iç özelliklerini (evet anlamadınız biliyorum, fakat bu Türkçe ile benden ancak bu kadarı geliyor. En iyisi örnekle pekiştirelim.) gruplayabiliyoruz. Daha önce büyük ihtimalle karşılaşmış olduğunuz bu özelliği örnekte de gördüğüzde ‘Aa, ben bunu biliyorum’ diyeceksiniz.

Let’s go baby!

İsterseniz küçük bir metin stili ile başlayalım. Sıra dışı olmayan, minik bir stil oluşturalım;

1

.metinstil { font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma; font-size:12px; font-variant:small-caps; font-style:italic; }

font-family: Kullanıcıya metnin yazı tipini seçme imkanı veriyor.
font-size: Kullanıcıya metnin büyüklüğünü belirleme imkanı veriyor.
font-variant: Kullanıcıya harf türünü seçme imkanı veriyor (Büyük harfler, küçük harfler, vs)
font-style: Kullanıcıya metnin stilini belirleme imkanı veriyor (Eğik yazı, kalın yazı vs)

Her ne kadar stilimiz şu an hoş görünse de, kodlama olarak çok daha ‘hoş’ duruma getirilebilir durumda. Zira W3C bu durumu da düşünüp, tüm özellikleri tek bir elemente vermeyi, bu örnekte ‘font’ elementine sığdırmayı mümkün kılmış;

1

font: font-style font-variant font-weight font-size/line-height font-family;

Yukarıda biraz karışık görünen kod, aslında çok kolay anlaşılabilir durumda;

1

.metinstil { font: italic small-caps 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma; }

Gördüğünüz gibi, metinstil stiline verdiğimiz tüm özellikleri tek bir element altında toplamayı başardık.

Büyük kolaylık getiren bu gruplama özelliğini, birçok css özelliği üzerinde kullanabiliriz;

1
2

.arkaplan { background-image:url(resim.gif); background-repeat:no-repeat; background-position:bottom; }
.arkaplan { background:url(resim.gif) no-repeat bottom; }

1
2

.kenarlik { border-width:1px; border-style:solid; border-color:#000; }
.kenarlik { border:1px solid #000; }

Bu örnekleri artirmaniz, ve daha geniş bilgiyi W3Schools üzerinde bulmanız mümkün.