İsterseniz hemen kodlamaya başlayalım;

İlk olarak bir normal PHP için kullanabileceğimiz fonksiyon oluşturalım.

function kucukKarakter ($degisken){
$degisken = strtolower($degisken);
return $degisken;
}

Bu fonksiyonu aşağıdaki gibi kullanarak parantez içerisindeki yazıyı küçük harflere çevirebiliriz.

echo kucukKarakter ('FlashCentury.NET');
//sonuc flashcentury.net olacaktır

Not : strtolower ve strtoupper fonksiyonları hakkında buraya tıklayarak bilgi edinebilirsiniz.

Şimdide aynı fonsiyonu Smarty için hazırlayalım;

function kucukKarakter ($params, $content, &$smarty, &$repeat){
$degisken = $content;
$degisken = strtolower($degisken);
}

Fonksiyonu oluştururken $params, $content, &$smarty, &$repeat degiskenleri eminim dikkatinizi çekmiştir. Bular Smarty fonksiyonu oluştururken standart değişkenlerdir, şuan işimize yarayacak olan değişken tanımlayıcımız $content block arasındaki değişken değerini bize verecek.

Not : Smarty fonksiyonları için ayrıca bir makale yazarak diğer değişkenlerin ve Smartyde fonksiyon oluşturma mantığının hakkında bilgi vereceğim. Şimdilik bu kalıbı bilmeniz yeterlidir.

Evet şimdi sıra geldi Smarty Block oluşturmaya;

$smarty->register_block('kk', 'kucukKarakter');

registe_block fonksiyonunu kullanarak ilk önce block ‘umuzun adını seçiyoruz sonra bir virgül (,) ile ayırarak fonsiyon ismini yazıyoruz.

Bu kodu Smarty templete dosyasında aşağıdaki gibi kullanabiliriz;

{kk}FlashCentury.NET{/kk}

Artık size ait kk isimli bir block var ve bu dosyayı include ederek tüm projelerinizde kullanabilirsiniz.

Bu örneği toparlayıp birde bk (buyuk karakter) block ekleyelim;

.php Dosyası

function kucukKarakter ($params, $content, &$smarty, &$repeat){
$degisken = $content;
$degisken = strtolower($degisken);
}

function buyukKarakter ($params, $content, &$smarty, &$repeat){
$degisken = $content;
$degisken = strtoupper($degisken);
}

$smarty->register_block('kk', 'kucukKarakter');
$smarty->register_block('bb', 'buyukKarakter');

.tpl Dosyası

küçük  {kk}FlashCentury.NET{/kk} <br />
büyük  {bb}FlashCentury.NET{/bb}

Örnek dosyayı buradan indirebilirsiniz.
Smarty Block Ornek1 (102)

Şimdi daha işe yarar bir örnek yapalım
Permalink için linkler içerisinde türkçe ve zararlı karakterleri temizmekte kullanabileceğimiz bir Smarty Block yapalım.

.php Dosyası

<?php
function seoLink ($params, $content, &$smarty, &$repeat)
{
    $text = trim ($content);
    $tr = array("ş", "Ş", "ı", "(", ")", "'", "ü", "Ü", "ö", "Ö", "ç", "Ç", " ", "?", "ş", "Ş", "ı", "ğ", "Ğ", "İ", "ö", "Ö", "Ç", "ç", "ü", "Ü");
    $eng = array("s", "S", "i", "", "", "", "u", "U", "o", "O", "c", "C", "-", "", "s", "S", "i", "g", "G", "I", "o", "O", "C", "c", "u", "U");
    $text = str_replace($tr,$eng,$text);
    $text = eregi_replace('[^0-9A-Za-z]',"-",$text);
    $text = preg_replace("@--*@","-",$text);
    return strtolower($text);
}

$smarty->register_block('seo', 'seoLink');
?>

.tpl Dosyası

{seo}http://www.flashcentury.net/türkçe (şğıçöü) karakterli bir link.html{/seo}

Template dosyasını çalıştırdığınızda ekranda; http://www.flashcentury.net/turkce-sgicou-karakterli-bir-link.html yazdığını göreceksiniz.

Örnek dosyayı buradan indirebilirsiniz.
Smarty Block Örnek 2 (101)

Neden RSS?
Yazıya başlarken “insanların çok fazla sayıda siteyi düzenli olarak takip etmesinden dolayı ihityaç haline gelmiş bir teknolojidir.” şeklinde bir cümle kullanmıştım bu konuyu biraz açmak gerekirse;
Örneğin farzelim ki bir internet kullanıcısının
Hobileri; Sinema, Kitap, Şiir
Mesleği : Öğretmen
Bu kişinin hobıleri ile ilgili takip ettiği 10 adet site olduğunu farzedelim. Mesleği ile alakalı takip ettiği 5 adet kaynak siteler ve 3 tanede blogu takip ettiğini düşünelim. Toplam 17 siteyi takip ediyor. Bu sitelere hergün tek tek girip yeni neler eklenmiş diye bakmak yerine daha önceden RSS ‘leri ekleyerek çok daha hızlı bir şekilde takipedebiliyor. Yani düzenli hemde zaman kaybı olmadan takip imkani oluyor.

Peki sitelere nasıl bir fayda sağlar?
ilk olarak kullanıcılara RSS hizmeti vererek bu kolaylığı sağlaması web sitesinin düzenli bir kullanıcı kitlesine sahip olmasını sağlar. Ayrıca Google ve bazı arama motorlarıda web sitelerin RSS ‘lerini farkeder ve indexler tıpkı bir sitemaps gibi değerlendirir. Yani kısaca SEO içinde avantajlıdır sitenizdeki RSS ‘leri sadece kullanıcılarınız değil Google da takip eder.

RSS kullanımı güncel içerik sağlayan siteler için bir zorumluluk haline gelmeye başladı, ilk olarak üst düzey bilgisi olan internet kullanıcıları bu teknoloji kullanırken şuan orta seviye kullanılara kadar kullanım yayıldı.

Nasıl Kullanırım?
Bir Sitede RSS olup olmadığını asres satırının hemen sağ tarafındaki (Firefox) turuncu RSS iconundan alayabilirsiniz. Bu icona tıkladığınızda RSS adresini ve onu hangi sağlayıcı ile (örneğin Google Reader) izlemek istediğinizi seçebileceğiniz bir sayfa açılır. Buradan Google Readeri seçerek RSS ‘yi takip etmeye başlayabilirsiniz. RSS için birçok hizmet ve program mevcuttur ben şahsen Google Reader ‘i kullanıyorum fakat internette kısa bir araştırma yaparsanız birçok alternatif olduğunu göreceksiniz. İlerleyen günlerde RSS takip edebileceğiniz belli başlı hizmetler hakkında da bir makale daha yazmayı düşünüyorum.

RSS Browser iconları

Son olarak RSS hakında biraz da teknik bilği vernek istiyorum;
RSS dosyaları XML olarak oluşturulmaktadır ve uzantıları genelikle .rss ve .xml olmaktadır. Bir web sitesi RSS ile en fazla 20 içerik verebilir ama RSS okuyucuları eski içeriklerileri arşivleyerek daha fazla gösterebilirler fakat kaynak dosyasının maksimum kapasitesi 20 adet ile sınırlıdır. RSS içeriği Channel ve Item olmak üzere iki ana bölümden oluşur Channel bölümünde RSS ve Siteye ait genel bilgiler verilirken item kısmında ise içerikler listelenir.

Web sitenize RSS kodlamayı planlıyorsanız PHP proğramcıları için bu konuda daha önceden yazmış olduğum Php ile Dinamik RSS beslemesi Yapımı başlıklı makalemi okumanızı tavsiye ederim…

Ayrıca Aşağıdaki kaynaklardan da RSS hakkında bilgi edinebilirsiniz.

• Wikipedia : http://tr.wikipedia.org/wiki/RSS
• xml.com : http://www.xml.com/pub/a/2002/12/18/dive-into-xml.html
• Harvard Uni : http://cyber.law.harvard.edu/rss/rss.html
• Youtube Video Anlatım : http://www.youtube.com/watch?v=0klgLsSxGsU

• usejquery.com
  Özellikle jQuery dersleri bulabileceğiniz ayrıca jquery pluginlerini nasıl kullanıldığı hakkında bilgi veren bir kaynak sitesi.

  https://twitter.com/usejquery

• jquerylabs.com
  jQuery eklentileri, Menüleri, araçları, dersleri vs bulabileceğiniz bir kaynak sitesi.

  https://twitter.com/jQuerylabs

• jquerystyle.com
  jQuery hakkında çok başarılı makaleler bulabileceğiniz bir kaynak.

  https://twitter.com/jquerystyle

• buildinternet.com
  Sam ve Zach kardeşlerin ünlü blogunu bilen bilir jquery ve internet teknolojileri hakkında özenle hazırlanmış makale ve dersler bulabilirsiniz.

  https://twitter.com/buildinternet

• jqueryfordesigners.com
  Çok fazla bir içeriğe sahip olmasa da jquery için en iyi kaynak sitelerinden bir tanesi. Görsel anlatımlar yapılan örnekleri indirme imkanı sunan çok kullanışlı bir kaynak.

  http://twitter.com/rem

• jquery-howto.blogspot.com
  jquery ve jquery pluginlerini nasıl kullanacağınız konusunda dersler ve makaleler yayınlayan bir site.

  http://twitter.com/jQueryHowto

• sohtanaka.com
  Web uygulamarı ve ağırlıklı olarak jquery makaleleri bulabileceğiniz bir site.

  http://twitter.com/SohTanaka

• ajaxrain.com
  Ajaxrain sadece jquery pluginleri yayınlayan bir site olmamasına rağmen çok geniş bir jquery plugin arşivine sahip.

  http://twitter.com/ajaxrain

• marcgrabanski.com
  Ağırlıklı olarak jquery makaleleri bulabileceğiniz harika bir site.

  http://twitter.com/1Marc

• jquery.com
  ve tabii ki jquery.com. jquery hakkında haber ve duyuruları kurumsal sitesinde takip etmek isteyebilirsiniz.

  http://twitter.com/jquery

Bu makaleyi daha detaylı bildirgec ‘ten okuyabilirsiniz.
http://www.bildirgec.org/yazi/twitter-dan-takip-edebileceginiz-10

TrustRank yarı otomatik bir sistemdir yani bazı kriterler bot ‘lar tarafından otomatik denetlenirken bazı unsurlar editörler tarafından kontrol edip puanlandırılmaktadır.

Kök Siteler
Şimdi isterseniz sistemin ne şekilde çalıştığı konusuna biraz değinelim. TrustRank ‘ın bazı kriterleri editörler tarafından belirleniyor demiştik. Editörler link olarak yüksek derecede güvenilir siteleri seçiyor ve bu siteler 100 puan vererek işaretliyor bu sitelere kök siteler deniliyor. (Örneğin : wikipedia.org, Apple.com, wordpress.com) Kök sitelerden nofollow olmadan link aldığınızda 100 puan değerinde link çıkışı alıyorsunuz siz başa bir siteye link verdiğinizde 90 değerinde bir link göndermiş oluyorsunuz. Aldığınız TrustRank link puanları tabiki sitemin bir parçası ve TrustRank argoritmasında önemli bir yer tutuyor fakat TrustRank puanı için tek kriter alınanTrustRank link puanları değil.

Diğer belli başlı kriterler;
Bazı kriterler google PageRank ‘tan tanıyorsunuz örneğin sitenin yaşı Google Pagarank kriterlerinden bir tanesi ve aynı şekilde TrustRank argoritması içinde bir puanlamada etki gösteen bir faktaör fakat TrustRank ‘ın iş güven olduğu için olaya daha geniş kapsamda bakıyor ve domain yaşı ile birlikte domain ileri senelr için kaç yıllığına kiralandığıda kriterler arasında yerini almış.

isterseniz bilinen bazı TrustRank krite bir göz atalım;

Özğün içerik
TrustRank birincil amacı özgün siteleri belirlemek. Bildiğiniz gibi google veya diğer arama motorlarında herhangi bir konuyu aradığımızda karşımıza aynı içeriğe sahip onlarca site çıkıyor fakat orjinal içeriğe sahip site beliki en altlarda hatta sonuçlar olmayabiliyor. Bu sonrunu uzun zamandır çözmeye çalışan Google PageRank sisteminde aynı içeriğe sahip siteleri toplu halde aşağı indirken TrustRank sisteminde siteyi başka sitelerden içerik çalmışmı düşüncesi ile inceliyor. Bir tek içerik alınması bir puanı etkiliyor.

Yeni Nesil Tasarım
Editörler tarafından incelenen bir kriter. Site tasarımının ne kadar güven verdiğini ve yeni standartlara uyup uymadığı kontrol ediliyor. Ayrıca diğer sitelerden ve template ‘ler direk kopyalanıp kopyalanmadığı gözönünde bulunduruluyor.

Yeni Nesil Kodlama Teknikleri
Kodlama konusunda da sitelerin ne kadar güven verdiği inceleniyor. Özellikler hatalrla dolu bir site ve arkasındaki teknik ekip güvenli bulunmuyor. Ayrıca google bot ‘larının kolay erisimi link yapısı ve standartlar inceleniyor.

Güncelleme Aralıkları
PageRank ‘tede yer alan bu kriter TrustRank içinde kullanıyor fakat arada şöyle ufak bir fark var PageRank sisteminde güncelleme sıklığı puanı etkilemesinin yanı sıra Google robotlarını siteyi ne sıklıkla kontrol edeceği konusunda da bilgi verirken TrustRank sitenin ne derece güncel olduğunu ve ilerideki istikrara önem veriyor.

Sitenin Yaşı
Yukarıda da bahsettiğim gibi Sitenin ne kadar süredir yayın yaptığı önemli kriterler arasında aynı konuda 1 senelik yayın yapan bir siteye göre 10 senedir hizmet veren başka bir site arasında bir güven farkı olmalı diye düşünülüyor ve haksızda değiller.

Domain Kralama süresi
Sitenin alan adı yanı domaini kaç yıllığına kralandı? Bu da TrustRank için orjinal bir kriter. Örneğin bir spam site 2 seneden fazla kralanmazken bir şirket sitesi5 seneliğine kralanıyor. Aslında mantık çok basit “Bu domain ileri 5 sene için daha kralanmış ise demmek ki önümüzdeki 5 sene daha yayında olacak”. Puanlamanın amacının güven olduğunu düşünürsek bence kayda değer bir kriter.

Sitenin Ulaşılabilirliği
Bilirsiniz bazı siteler arada bir çöker yada girilemez server veya teknik sorunlar olur veya sitenin açılışı çok uzun sürebilir. Bu gibi durumlarda TrustRank puanlama sistemini etkileyen bir etkendir.

Ziyaretçi Sadakati
Ziyaretçi spam bir siteye yanışlıkla veya hilelerle girmiş olabilir fakat tekrar siteye girme olasılığı azdır. Bu düşünceyle ziyaretçi sadakati da puanlayı etkiliyor yani ziyaretçi siteye tekrar tekrar giriyorsa demekki bu site güvenli deniliyor.

SSL Sertifikalar
Özellikle alışveriş siteleride SSL sertifikaların kullanılması ve sertifikaya bağlı sitenin ilegal bir olaya karışmamış olması.

Siteye Bağlı Linkler
Backlink faktörü TrustRank ‘tada bir kriter, aynı konuya ait referans linkler sitenin güvenirliğini arttırıyor.

Backlinlerin Yaşı
Evet PageRank ‘te olmayan bu kriter de sitenize verilen linklerin ne kadar eski olduğunu gözönünde bulunduruyor. Örneğin bir siteden 3 yıldır link alıyorsunuz TrustRank bu durumu olumlu olarak yorumluyor Spam veya hile ile alınan linkler bu kadar uzun süreli olmuyor.

Ayrıca bu kriterlerin dışında bilinmeyen ve kesin emin olunmayan bazı unsurlarda var örneğin sitenin tek bir IP ‘ye sahip olması, Google Webmasters ‘a kayıtlı olması veya sitede kullanılan dilin doğru yazılmış olması gibi.

Sitede Kullanılan Dilin Kusursuzluğu
Google Translate ‘i duymayan kalmamıştır sanırım. Google ‘un bu süper hizmeti gün geçtikçe gelişiyor ve hatta kullanıcılar tarafından bir geliştiriliyor, Google her ne kadar bunu bizlere hizmet olarak sunsa da ileriye dönük projelerde geliştiriyor örneğin sitelerde kullanılan dilin (örneğin Türkçe) ne kadar doğru kullanıldığı, kelimelerin yanlış, yabancı harflerle yazılıp yazılmadığının kontrolu gibi unsurları otomatik kontrol etmek projeler arasında. Kesin olarak açıklanmasada söylentilere göre TrustRank kriterlerinden biri de imla hataları olduğu düşünüyor. Köklü ve ciddi bir site kelime hataları ile dolu bir içerik sunması sanırım çok az bir ihtimalken tutarsız bir site cok fazle sayida hata we yanlis barindira bilür

TrustRank Yahoo ve Stanford Üniversitesi işbirliği ile geliştiren ve onrasında Google ‘lun dahil olduğu bir projedir ve şu an faaliyettedir fakat orjinal sitesi henüz tam anlamıyla doğru sonuç vermiyor ve beta aşamasında.
Aşağıdaki linkte ulaşabilirsini;

www.trustrank.org

Ayrıca TrustRank ‘ı Wikipedia ‘dan da inceleyebilirsini
http://tr.wikipedia.org/wiki/TrustRank

Son olarak
Bazı otoriteler PageRank yerini alacağını düşünüyor hatta yapılan çalışmalarda TrustRank odaklı alınan linklerin arama motorlarında çok daha çabuk etki gösterdiği söyleniyor. Aslında TrustRank ‘ın amacı Spam ve gereksiz içeriğe sahip sitelerin arama sonuçlarından arındırmak olduğu için benim düşüncem PageRank ve TrustRank birbiriyle paraler çalışsan iki sitem olrak varlığını sürdürecek ama yinede zaman gösterecek. Ayrıca Google Spam sitelerden hariç bir diğer amaç ise kişisel siteler ile şirket sitelerini birbirinden ayırmak. Örneğin bir farzedinki bir LCD tv modeli hakkında bilgi arıyorsunuz veya internetten sipariş vermeyi düşünyorsunuz, arama motoru sonuçlarına baktığınızda kişisel bir blogtaki bilgi online shop ‘lardn hatta üretici firma sitesinden hada üst sıralarda çıkabiliyor. Bu sebeple Google artık kişisel sitelere 5 puandan fazla PageRank vermeyeceğini duyurdu artık bir sitenin PageRank puanı 5 ‘in üstünde olması için ya şirket sitesi veya insanlığa faydalı TrustRank puanı yüksek bir site olması gerekiyor.

Plugin ‘izin adı WP-CSS

• ilk olarak buraya tıklayarak WP-CSS pluginini bilgisayarınıza indiriyoruz ve zip dosyasından çıkartıyoruz
• ikinci olarak indirdiğimiz dosyayı ZIP ‘ten çıkartarak herhangi bir FTP proğramı ile wordpress blog ‘umuzun  wp-content/plugins/ klasörüne upload yapıyoruz.
• Sonra Wordpress Admin paneline girerek plugin ‘i aktif yapıyoruz. (Rutin işlemler burada sona eriyor)
• WP-CSS eklentisini aktif ettiğimizde wp-content/plugins/wp-css klasörünün içinde  cache isimli yeni bir klasör oluştuğunu göreceksiniz. Bu klasöre yazma izni veriyoruz (bir diğer değişle mod 777 yapıyoruz)
• Son olarak temamızda yer alan Css dosyalarının baglantılarını header.php dosyasını açarak <?php wp_css('dizin/cssdosyamiz.css'); ?> şeklinde düzenliyoruz.

Sanırım son adımda bahsettiğim işlemi biraz detaylı anlatmam daha yararlı olacak;

Normalde Wordpress temalarının Css dosyaları aşağıda ki şekilde eklenmiştir;

<br />&lt;link rel="stylesheet" type="text/css" href="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/cssdosyasi.css" media="screen" /&gt;<br />

böyle bir kodu şu şekilde değiştirmemiz gerekiyor;

<br />&lt;link rel="stylesheet" type="text/css" href="&lt;?php wp_css('cssdosyasi.css'); ?&gt;" media="screen" /&gt;<br />

Örneğin Temamınızı içindeki dosyalar şu şekilde olsun;

/cssdosyasi.css
/sitiller/stil1.css
/sitiller/stil2.css
/sitiller/stil3.css

Yani Temamızın bulunduğu klasörün kök dizininde cssdosyasi.css ve stiller isimli klasörde de 3 tane daha farklı Css dosyası var. Bu dosyaları aşağıdaki gibi çağırmamız gerekiyor;

<br />&lt;link rel="stylesheet" type="text/css" href="&lt;?php wp_css('cssdosyasi.css'); ?&gt;" media="screen" /&gt;<br />&lt;link rel="stylesheet" type="text/css" href="&lt;?php wp_css('sitiller/stil1.css'); ?&gt;" media="screen" /&gt;<br />&lt;link rel="stylesheet" type="text/css" href="&lt;?php wp_css('sitiller/stil2.css'); ?&gt;" media="screen" /&gt;<br />&lt;link rel="stylesheet" type="text/css" href="&lt;?php wp_css('sitiller/stil3.css'); ?&gt;" media="screen" /&gt;<br />

Bir diğer alternetif ise bu dosyaları style.css dosyasına include yapabilirsiniz. Böylece Php dosyasında hiçbir değişiklik yapmanıza gerek kalmaz. Örneğin yukarıdaki Css dosyalarını Style.css dosyasına direk include yapalım;

[/css]

</pre><br /><br /><p><br />@import url("cssdosyasi.css");<br />@import url("sitiller/stil1.css");<br />@import url("sitiller/stil2.css");<br />@import url("sitiller/stil3.css");</p><pre>

[css]

Böylece ilk örnekte bahsettiğim işmemi yapmanıza gerek kalmaz. Her iki yöntemide hercih edebilirsini fakat benim tavsiyem style.css içine include etmeniz çünkü böylece tek bir css dosyanız olur ve daha iyi bir performans sağlarsınız.
Ayrıca Temaların ana Css dosyası olan style.css dosyasını çağırırken hiç bir değişiklik yapmıyoruz zira WP-CSS style.css dosyasını otomatik algılıyor.

Hepsi bu kadar…

Toplam 33kb büyüklüğünde 8 Css dosyanı include ile tek bir dosyaya birletirerek yapılan testte %91 performans sağlandığı görülmüş. Sizde WP-CSS eklentisini kurduktan sitenizin açılış hızını kontrol eden herhangi bir proğramveya firefox eklentisi ile test edebilirsiniz milisanilerle ‘de olsa aradaki farkı kesinlikle göreceksiniz.

Bir sonraki makalemde hemen hemen aynı şekilde çalışan ve javaScript dosyalarını optimize  edmek için kullanabileceğiniz WP-JS eklentisniden bahsederek bu konuya devam edeceğim.

Aslında çok geniş çaplı bir hizmet sayılmaz ama olabildiğince pratik olduğu kesin.

Peki nedir bu servis? ne işe yarar derseniz; Url ’sini yazdığımız sitenin favicon ‘nunu Png formatında almamızı sağlıyor.

Hemen örnek bir link yazalım;

http://www.google.com/s2/favicons?domain=www.facebook.com

Yukarıdaki linke tıkladığınızda veya kopyalayıp tarayıcınızın adres satırına yapıştırdığınızda ekranda facebook.com ‘com favicon ‘unu göreceksiniz. Oldukça pratik olduğunu söylemiştim yapmanız gereken tek şey url ‘nin sonunda yazan domanin değişkenine bir  değer vermeniz.

http://www.google.com/s2/favicons?domain=www.herhangibirsite.com

Yazdığınız url ‘ye ait favicon.ico dosyasını 16×16 ebatlarında Png formatına çevirip bizlere sunulan bu datayı nasıl daha etkili kulanırız derseniz örneği sitenizde linkler isminde bir kategori var ve siz bazı sitelere link veriyorsunuz;

<h3>Linkler</h3>

<a href="http://www.flashcentury.net">
<img style="vertical-align: middle; border:0;" src="http://www.google.com/s2/favicons?domain=www.flashcentury.net" alt="flashcentury.net" />
Flashcentury.net</a>
<br />

<a href="http://www.google.com">
<img style="vertical-align: middle; border:0;" src="http://www.google.com/s2/favicons?domain=www.google.com" alt="Google.com" />
Google.com</a>
<br />

<a href="http://www.facebook.com">
<img style="vertical-align: middle; border:0;" src="http://www.google.com/s2/favicons?domain=www.facebook.com" alt="Google.com" />
Facebook.com</a>

Yukarıdaki kodun çıktısı şu şekilde olacaktır;

Linkler

Flashcentury.net

Google.com

Facebook.com

işte bu kadar basit. En yalın haliyle incelemek isterseniz resim ekleme kodarınız şu şekilde olmalı

<img src="http://www.google.com/s2/favicons?domain=www.flashcentury.net"  />

www.flashcentury.net yazan kısmı icon ‘unu göstermek istediğiniz sitenin url ’si ile değiştirmeniz yeterli.

Az öncede yazdığım gibi web sayfasında benim tabirimle bir çatı görevi taşır, sayfa öğerleri html olarak yerleştirilir ve eğer dinamik bir işlem gerekiyorsa browser (Tarayıcı) işlemleri için javacript, vbscript vb.. server tabanli işlemler için Php, Asp, Python, jsp vb.. gibi kodlama dilleriyle desteklenir. Eğer bir site sadece HTML kodlarından oluşacaksa bu site büyük bir ihtimalle sadece sunum amaçlı bir site olabilir ki günümüzde sadece html ‘den ibaret bir site çok nadir kullanılmaktadır. Son olarak HTML dosyaları .html veya .htm uzantılarına sahiptir. Bu iki uzantı arasında hiç bir fark yoktur fakat genellikle .html uzantısı kullanılmaktadır.

HTML hakkında bu kadar bilgiden sonra şimdi XHTML ‘ye geçebiliriz. Aslında XHTML 2000 yılında W3C tarafından kabul edilmiş tüm internet tarayıcıları ve Gsm Telefonları tarafından standart olarak kabul edilmiştir. HTML biraz daha derlenip, geliştirilip ve belli bir standarta geçirilip XHTML olmuşturulmuştur. XHTML kullanmanın en temel amaçlarından birisi farklı tarayıcılarda sorun çıkarmamasıdır, bunun yanında tarayılar kodu daha çabuk algılar ve web sayfası HTML ‘ya göre daha hızlı çalışır. Bir diğer avantajı ise başta Google olamak üzere başlıca arama motorları XHTML standarlarına uygun yazılmış siteye tam not veriller ve arama motorlarında kötü kodlanmış rakip sitelere göre üst sıralara yükselir.

XHTML Extensible Hyper Text Markup Language , Türkçe karşılığı Esnetilebilir Hareketli Metin İşaretleme Dili anlamındadır. Her ne kadar Esnetilebilir denilsede bu esneklik kodlayan programcılar değil XHTML ‘yi geliştiren programcılar için geçerli olduğunu düşünüyorum zira XML yapısında var olan söz dizimi ifadelerini bünyesine alan bir dildir. XML ’de var olan sıkı ve uyulması gereken şartlar XHTML ‘de de geçerlidir. Bu doğrultuda XML ’de olan extensible ifadesini bünyesine almıştır.

XHTML kodlama mantığı?
İlk olarak bilmeniz gereken şey XHTML hiyerarşik bir yapıya sahiptir kodlar birbirlerini kapsarlar.

Örneğin ;
<html>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

Ayrıca yukarıdaki örnektede farkettiğiniz üzere <….> şeklinde taglar açılır ve kesinlikle kapatılması gerekmektedir. Kapatılırken de </…..> şeklinde kapatılır.

Bilmeniz gereken bir diğer önemli husus ise XHTML tagları iki ana bölümden oluşur bunlar <head> ve <body> taglarıdır.

Head -> Sayfanın bilgilerini tarayıcıya, arama motorlarına bildirir ve gerekli Css veya js kodlarını import eder. Örneğin site başlığı, arama motorları için taglar, dil ayarları, gibi bilgiler bu alana yazılır ve Head bölümüne yazılan kadlar ziyaretçi tarafından görülmez.

Body -> Bu bölüm ise ziyaretçinin gördüğü bölümdür, sayfanın içeriği bu alana yazılır.

Şimdi en sade haliyle bir XHTML kodu yazalım;

<html>
<head></head>
<body></body>
</html>

Herhangi bir editörle hatta her bilgisayar da yeralan text editor ile bile bu kodu yazıp .html olarak kaydedebilirsiniz. Yukarıdaki kod bir XHTML dosyasının en yalın halidir.

Şimdi biraz dosyamızın içine birşeyler ekliyelim;

<html>
<head>
<title>İlk Deneme</title>
</head>
<body>
Merhaba Dünya
</body>
</html>

Yukarıdaki örnekte Head bölümüne <title> Tag ‘ı ile sitenin başlığını (İlk Deneme) yazdık ve sonra Body Tagları arasına Merhaba Dünya yazarak içeriğimizi eklemiş olduk. Bu kodu .html olarak kaydedip açtığınızda ekranda Merhaba Dünya yazacak, tarayıcının en üst sol kısmında ise sitenin başlığı olan İlk Deneme yazısını göreceksiniz.

Umarım XHML kodlama mantığını kavramışsınızdır. İlerleyen derlerimizde XHTML taglarını ve ne şekilde kullanıldığını bol bol anlatacağım. XHTML oldukça kolay bir programlama dilidir ve web tasarım için en temel unsurlardan biridir.

Bir sonraki dersimizde görüşmek üzere…

Backlink Nedir?

Switch ‘in kullanım mantığı oldukca basittir.

switch ( değişken )
{
case Koşul;
Koşul doğru ise yapılacak işlem
break;

case Koşul;
Koşul doğru ise yapılacak işlem
break;

default:
Hicbir kosul uymuyorsa yapilacak islem
}

Switch -> Ana kodumuz olan Switch değimi ile bir değişken çağırıyoruz ve Switch ‘in kapsadığı kodlarımızı parantez ( { ve } ) içerisine alıyoruz.
Case -> koşullarımızı case ile test ediyoruz ve eğer uygunsa aşağıda ki satirda yapilacak işlemleri belirtiyoruz.
break -> Eğer koşulumuz dogru ise, yapılacak işlemler gerçekleştıkten sonra break parametresi ile switch kontrolunu durduruyoruz.
default -> Eğer hiç bir koşul uygun değılse default devreye giriyor. default ‘u if ile kosullandirmada else ‘ye benzetebiliriz.

Şimdi isterseniz bir önceki dersimizde vermiş olduğum örneği switch ile yapalim

$Adiniz = "Hüseyin";

switch ($Adiniz)
{
case "Hüseyin" :
<a href="http://www.php.net/echo">echo</a> "Merhaba Hüseyin";
break

case "Sevgi":
<a href="http://www.php.net/echo">echo</a> "Merhaba Sevgi";
break

default
echo "Sizi Tanimiyorum";
}

Yukarıda da bahsettiğim gibi Switch ‘in kullanımı oldukca basittir. Bu örnekte $Adiniz isimli bir değişken tanımladık ve değişkene Hüseyin değerini verdik. Sonrasında Switch ‘ten $Adiniz isimli değiskeni kontrol etmisini istedik. Bu kodu çalıştırdığınızda ile Case ‘nin koşulu olan “Hüseyin” doğru olduğu için ekranda “Merhaba Hüseyin” yazacaktir.

ilk Case denememiz de koşul yerine geldi ve break komutunu kullandığımız için, Switch içerisinde yeralan diğer şartlar kontrol edilmeden switch islemi bitecektir, bu kullanım şekli kodunuzun daha sağlıklı ve hızlı çalışması için size tavsiyemdir fakat break parametresini kullanmasaydık birinci koşuldaki $Adiniz isimli değiskenin değeri “Hüseyin” olsa dahi diğer şartlarıda kontrol edecekti.

Şimdi biraz daha ise yarar bir örnek yapalim;

$Ay = 5;

switch ($Ay)
{
case 1:
<a href="http://www.php.net/echo">echo</a> "Ocak" ;
break

case 2:
<a href="http://www.php.net/echo">echo</a> "Şubat" ;
break

case 3:
<a href="http://www.php.net/echo">echo</a> "Mart" ;
break

case 4:
<a href="http://www.php.net/echo">echo</a> "Nisan" ;
break

case 5:
<a href="http://www.php.net/echo">echo</a> "Mayıs" ;
break

case 6:
<a href="http://www.php.net/echo">echo</a> "Haziran" ;
break

case 7:
<a href="http://www.php.net/echo">echo</a> "Temmuz" ;
break

case 8:
<a href="http://www.php.net/echo">echo</a> "Ağustos" ;
break

case 9:
<a href="http://www.php.net/echo">echo</a> "Eylül" ;
break

case 10:
<a href="http://www.php.net/echo">echo</a> "Ekim" ;
break

case 11:
<a href="http://www.php.net/echo">echo</a> "Kasim" ;
break

case 12:
<a href="http://www.php.net/echo">echo</a> "Aralık" ;
break

default
echo "Girdiğiniz ay doğru değil, Lütfen kontrol ediniz";
}

Yukarıdaki kodu çalıştırdığımızda $ay değişkenının değeri 5 olduğu için ekranda Mayıs yazacaktır.

Aynı işlemi if else ile de yapabiliz fakat yukarıdaki gibi çok seçenekli bir mantıksal sorgulama da daha iyi bir performans için Switch metodunu kullanmanızı tavsiye ederim.

Dazu gibt es ein Videotutorial.
Part 1
Part 2
Eine Anleitung im PDF-Format zum Ausdrucken gibt´s hier.

Bir önceki dersimizde XHLML Nedir başlığı altında bu konuya giriş yaptık ve şimdi dilerseniz HTML ve XHTML arasındaki farkları inceleyelim.

Öncelikle şu nu söyleyeyim, eğer daha önceden HTML biliyorsanız XHTML sizi fazla yormayacak aslında hemen hemen aynı taglar kullanılmaktadır fakat bir önceki derstede bahsettiğim gibi XHTML ‘nin belli başlı standartları ve uyulması gereken şartları vardır. Şimdi bu farklılıkları şıklar halinde yazacağım;

1. Küçük harf kullanımı : Normal HTML ‘de büyük yada küçük harf hiç farketmiyordu, bu konuda hiçbir kural yoktu fakat XHTML özellikle küçük harf konusunda çok titiz.

HTML
<BODY>
<div WIDTH=”100%”>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div width=”100%”>Merhaba Dünya</div>
</body>

2. Parametrelerde küçük harf ile yazılmalıdır : Yukarıda bahsettiğim şıkka ek olarak parametrelerde bir standarta baglanmıştır.

HTML
<BODY>
<div>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div>Merhaba Dünya</div>
</body>

3. Düzgün hiyerarşi : Açılan taglar sırası ile kapatılmalıdır.

HTML
<strong><div>Merhaba Dünya</strong></div>

XHTML
<div><strong>Merhaba Dünya</strong><div>

4. Kapalı taglar : Tüm taglar kapatılmalıdır. Örneğin bazı taglar tek başına kullanılır (br , hr, img) bu taglarda XHTML ‘de kapatılmalıdır.

HTML
<br>
<hr>
<image href=”resim.gif”>

XHTML
<br />
<hr />
<image href=”resim.gif” title=”Flashcentury” />

5. Kapatılan taglara / işaretinden önce boşluk bırakmak : Yukarıdaki şıkla bahsettiğim tagları kapatırken / işaretinden önce bir boşluk bırakmanız gerekmektedir. Bu tarayıcılar ve arama motorları tarafından kabul edilmiş bir standarttır.

Yanlış Kullanım
<br/>
<hr/>
<image href=”resim.gif” title=”Flashcentury”/>

Doğru kullanım
<br />
<hr />
<image href=”resim.gif” title=”Flashcentury” />

6. Link ve Resim eklerken bir başlık girilmelidir : Özellikle arama motorları için ve standartlar uymak için bunu yapmanız gerekmektedir. title parametresi ile resim veya link hakkında tarayıcıya bilgi vermemiz gerekmektedir.

HTML
<image href=”resim.gif”>
<a href=”http://www.flashcentury.net“>

XHTML
<image href=”resim.gif”>
<image href=”resim.gif” title=”Flashcentury” />
<a href=”http://www.flashcentury.net” title=”Flashcentury” />

7. Parametreler tırnak içinde olmalıdır : HTML ‘ de bu konuda bir şart yoktu tırnak için ve tırnak içinde kullanmadan parametre değerleri verilebiliyordu.

HTML
<BODY>
<div width=100%>Merhaba Dünya</div>
</BODY>

XHTML
<body>
<div width=”100%”>Merhaba Dünya</div>
</body>

8. Parametrelerde sadeleştirme : Özellikle Form parametrlerinde bazı kolaylıklar vardı, örneğin checked parametresini kullanarak bir radio buttonu seçili hale getirebiliyorduk ama malesef XHTML ‘de bu olay kaldırıldı.

HTML
<input type=”radio” checked>
<option selected>

XHTML
<input type=”radio” checked=”checked” />
<option selected=”selected” />

9. Name parametresi yerine id Parametresi kullanimi : HTML döneminde taglara isim verirken Name parametresi kullaniliyordu, Id parametresi ise ikinci bir olasilik veya javascript ağırlıklıydı fakat XHTML genel tanımlamada Id parametresini kullanmamızı istiyor.

HTML
<div name=”mesaj”>Merhaba Dünya</div>
<image name=”resim” href=”resim.gif”>

XHTML
<div id=”mesaj”>Merhaba Dünya</div>
<image id=”resim” href=”resim.gif” />

10. DOCTYPE bildirimi : HTML kodlarından önce daha doğrusu kodlamanın ilk başına DOCTYPE (DTD ) bir başka değişle HTML dokumanımızın çeşitini bildirmemiz gerekiyor. Bu konuyla daha ayrıntılı bilgiye buradan ulaşabilirsiniz.

HTML
<html>
<head>
<title> HTML Dökümanı</title>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title> HTML Dökümanı</title>
<body>
<div>Merhaba Dünya</div>
</body>
</html>

Eğer standart bir XHTML kodlaması yapacaksanız genel kullanımı yukarıdaki gibidir ve tüm XHTML sayfalarınızın ilk satırına bu kodu ekleyebilirsiniz fakat bazen sayfanızı frameler ile veya farklı türlerde yapmanız gerekebilir, DTD bildimi ile kodlamanızın çeşidini tanımlarsınız ve tarayıcılara yardımcı olursunuz. DOCTYPE ile ilgili yazıma buradan ulaşabilirsiniz.

HTML ‘den XHTML ‘ye geçen veya bu işe yeni başlamış arkadaşlar için dikkat etmesi gereken en önemli gördüğüm 10 maddeyi ekledim, ilerleyen derslerde yeri geldikçe yine bazı ayrıntılardan bahsedeceğim.

Ayrıca hazırladığı Gadget sayesinde sitenizde veya blog ‘unuzda yazınlama imkanı Googla tarafından düşünülmüş.

Buradan daha ayrıntılı bilgiye ve eğer Eurovision 2009 Google Gadget ‘ti sitenizde yayınlamak istiyorsanız yine aynı sayfadan ulaşabilirsiniz.

Son bir ayrıntı daha vermek istiyorum, yapılan oylamalar yarışmacının ait olduğu ülkeden kabul edilmiyor, Bu sene ilk üçe girmesi kesin gözüyle bakılan Hadise şu an listede 2. sırada yeralıyor. Ayrıntılı sonuçlara buladan ulaşabilirsiniz…

Windows server veya host kullananan kişilerin eğer Apachi Server kullanmıyorsa en büzük sıkıntılarından birisi Mod_Rewrite ve .htaccess dosyasını kullanamıyor olması. .htaccess dosyası kullanılamadığı için hazırlanan web projelerine permalink uygulanamıyor. Permalink Web sitenin linklerinin daha profesyonel görünmesine dahada önemlisi başta Google olmak üzere başlıca arama motorlarında daha kolay bulunmasını sağlıyor.

Tamamen bana ait olan H-seo tekniğini yukarıda bahsettiğim sıkıntıyı çeken Windows Server kullanıcılarına armağan ediyorum

isterseniz hemen anlatmaya başlayayım;

1. Adım : url ‘miz üyerinden değişken transferi

ilk olarak Query_String metodu ile web sitemizi url ’sinden sonra gelen değişkenleri alıyoruz;

$url= $_SERVER['QUERY_STRING'];

Sonra ( / ) işaretlerini split fonksiyonu ile parçalıyoruz ve get0, get1, get2 seklinde değişkenlere yazdırıyoruz;

list($get0, $get1, $get2, $get3, $get4, $get5, $get6, $get7, $get8, $get9 ) = split('[/]', $url);

Fakat eğer gelen veriler belirsiz ise ve siz gelen veriye göre kodlamanız faklı yönlere gidecekse aşağıdaki şekilde de url ‘yi parçalayabilirsiniz.

$hseo = explode('/', $url);

Bu şekilde ( / ) işaretleri ile ayrılan değişkenleri hseo adlı Array değişkenine atamış olduk.

2.Adım : Linkler

Aslında linkler her ne kadar hazırladığımız siteye göre değişsede ön önemli şart ( ? ) işareti ile değişkenlerimizin başladığını belirmez gerektiğidir.

Şimdi örnek olarak bir kitap sitesi yaptığımızı farzedelim ve bu kitap sitesinde kitaplar, yazarlar ve yayınevleri adlı üç sayfa olduğunu varsayalım;

www.orneksite.com/?/kitap/flashcentury
www.orneksite.com/?/yazar/Huseyin-kocak
www.orneksite.com/?/yayinevi/xxx-yazıncılık

şeklinde linkler kullanmımız gerekiyor. Aslında kilit nokta ( ? ) işaretinde saklı, bu işaretten sonra tarayıcımız bir veri geldiğini anlıyor ve 404 hata sayfasına yönlendirmiyor. Biz ise bu avantajdan faydalanarak değişkenlerimizi sanki bir klasör dizini gibi sıralıyoruz ve 1. Adımda bahsettiğim şekilde değişkenlerimizi alıyoruz, aslında bu yönteme alternetif bir get tekniğide diyebiliriz.

linklerimizi oluşturuken bir diğer sıkıntı ise eğer url ‘de yeralacak değişkenler bir databank ‘tan gelecekse türkçe karakterler ve özel semboller olacaktır fakat bu sorununda çözümü oldukça kolay;

Aşağıdaki fonksiyonu kullanarak türkçe karakterleri temizleyebilirsiniz:

function uyarla($deger) {
$bul=array("ş","Ş","ı","(",")","'","ü","Ü","ö","Ö","ç","Ç"," ","/","*","?","ş","Ş","ı","ğ","Ğ","İ","ö","Ö","Ç","ç","ü","Ü");
$duzelt=array("s","S","i","","","","u","U","o","O","c","C","-","-","-","","s","S","i","g","G","I","o","O","C","c","u","U");
$deger=str_replace($duzelt,$bul,$deger);
$deger = preg_replace("@[^A-Za-z0-9\-_]+@i","",$deger);
return $deger;
} 

İserseniz şimdi yukarıdaki fonksiyonu kullanarak dinamik bir şekilde link oluşturalım,

$link1 = "www.orneksite.com/?/kitap/" .uyarla(sql['kitap']);
$link2 = "www.orneksite.com/?/yazar/" .uyarla(sql['yazar']);
$link3 = "www.orneksite.com/?/yayinevi/" .uyarla(sql['yayinevi']);

Yukarıdaki örnekte sql isimli bir database baglantisi ve bu bağlantıda kitap, yazar ve yayinevi isimli fielt ‘ler olduğunu düşünün.

uyarla() fonksiyonunu çok daha kapsamlı olarak kullanmak isterseniz buraya tıklayarak açılan linkteki fonksiyonu inceleyebilirsiniz.

3.Adım : değişkenlerimizi kullanma

Sıra geldi son adıma, yukarda bahsettiğim örnekten devam ederek anatmak çok daha faydalı olacağını düşünüyorum;

Kitap sitemizde kitap, yazar ve yayın evi isimli üc bölüm var demistik, şimdi de yine bu üç bölüme ait birer Php sayfası oldugunu farzedelim ve biz url ‘den gelen değişkenlere göre bu sayfalarını index ‘imize include edelim.

switch ($hseo[1]) {
case "kitap":
    include "kitap.php";
    break;
case "yazar":
    echo "yazar.php";
    break;
case "yayinevi":
    echo "yayinevi.php";
    break;
}

işte bu kadar $hseo[1] değişkenimiz (?) işaretinden sonraki slahlar arasındaki (/kitap/) veriyi temsil ediyor ve biz switch aracılığı işle değişkenin ne olduğunu anlayıp uygun sayfayı include ediyoruz.

Şimdi örneği biraz daha dinamik hale getirelim ve tek sayfa üzerinden bir sql sorgusu yaptıralım;

Örneğim vertabani diye bir Mysql tablomuz var ve bu tablo içinde kitap, yazar ve yayinevi isimli fielt ‘ler bulunmakta (2. Adımdaki kullandığımız örnekteki gibi)

$sql = mysql_query ("SELECT * FROM vertabani  WHERE " . $hseo[1] . " = ' " . $hseo[2] . " '  LIMIT 1 ");

www.orneksite.com/?/kitap/flashcentury –> Sol taraftaki linki verdiğimizde MySql sorgumuz aşağıdaki şekilde yorumlanmış olacaktır.

$sql = mysql_query ("SELECT * FROM vertabani  WHERE kitap = ' flashcentury '  LIMIT 1 ");

burada kitap –> $hseo[1] ve flashcentury –> $hseo[2] değişkenlerine atanmış olacaktır.

Evet arkadaşlar umarım faydalı olmuşumdur. Yukarıda da bahsettiğim gibi Windows Server kullanan arkadaşlar için geliştirdiğim bu tekniğin örnek kullanımını aşağıdaki linkten indirebilirsiniz.

Not : Örnek dosyalar hazırlandıktan sonra buraya konulacaktır.

Hseo Yönteminin avantajları
- .Htaccess dosyası kullanılamayan Hosting hesaplarında veya Windows Server ‘lerde rahatlıkla kullanılabilir.
- 404 hata sayfalarına erişim sağlamayan Hosting hesaplarında uygulanabilir
- Benzer bir teknik olan 404 hata sayfası üzerinden yapılan permalink tekniği bazı arama motorları tarafından yinede hata olarak kabul edilir, hatta bazı üstatların ittihasına göre artık Google ‘da hata olarak görmektedir fakat bu yöntemde böyle bir hata algılaması söz konusu değildir.
- Permalink ‘in sagladığı Seo avantajlar (arama motorları tarafından daha üst sıralarda yeralmak) bu yöntem ilede mümkündür.
- 404 hata sayfası üzerinden calışmasına kıyasla daha hızlı ve sorunsuzdur
- 404 hata sayfa üzerinden calistirmak bazen işe yaramaz, örneğin 404.php diye bir dosya oluşturup bütün index sayfasını bu dosya üzerinden calistırısınız fakat Server bu dosyayı bir uyarı sayfası olarak düşünür ve php kodlarını calıştırmaz sadece Html muamelesi yapar, fakat Hseo tekniğinde bözyle bir sorun sözkonusu değildir.

Hseo Dezavantajları
- Aslında kullanım kolaylığı ve hız açısından hiç bir dezavantajı yoktur fakat linklerde yeralan ( ? ) işareti görünüm olarak bir eksi puan kazandırıyor.

Cok basit bir hüner ile Firefox-Browseri öyle manipüle edebilirsiniz ki, ekran versiyonu basim icin kullanabilirsiniz. Bunun icin DOM-Inspector isimli plugin gerekiyor (Mac kullanicilar biraz daha sansli cünkü bu eklenti firefox üzerinde direk kurulu halde geliyor)

Simdi siradan bir website aciyorsunuz, örnegin http://www.seitwert.de ve Extras Menüsünden -> DOM Inspector aciyorsunuz. Ordan asagidaki adimlari takip ediyorsunuz:

HTML -> HEAD -> LINK. MEDIA´ya sag tikla ile oradaki (value) parametreyi “all” veya “print” yazip degistiriyorsunuz, veee iste bu kadar. Artik her siteyi güzel sekilde yazicidan cikartabilirsiniz.

(Bu makalenin Almanca versiyonunu okumak icin buraya tiklayiniz)

Serkan Aydin

Hazırladığınız siteyi birde Internet Explorer, Firefox, Opera, Safari, Chrome gibi tarayılarda sorunsuz calışması için emek harcarız. Hadi bakalım tam hersey bitti site hazır derken birde farklı versiyonlarda site nasıl çalışacak sıkıntısı karşımıza çıkar. Internet Explorer ‘da bu konuda olabildiğince acımasızdır, bir versiyonda sorunsuz çalışan site diğer versiyonda içler acısıdır.

Özellikle Internet Explorer 6 çok sorunlu bir tarayıcıdır bir çok Css ve Js kodu sorunlu çalışır hatta bazı kodlar hiç reaksiyon göstermez. Şu an en son versiyon Internet Explorer 8 olmasına ramen hala Internet Explorer 6 kullanan bir çok bilinçsiz internet kullanıcısı var bu sebeple hala sitenizin Internet nasıl çalıştığını kontrol etmelisiniz. Internet Explorer 6 ‘dan sonraki versiyonlar biraz (az biraz) daha sorunsuz diyebiliriz .

Tam anlamıyla farklı tarayıcı uyumu sorununa bir çözüm olmasada en azından Internet Explorer 6 kullananları azaltma için bir çözümden bahsedeceğim..

• ilk olrak buradaki zip dosyasını bilgisayarınıza indiriniz.
• İndirdiğiniz zip dosyasını açtığınızda bir örnek html dosyası (example.html), ie6update klasörğ içinde ie6update.js isimli bir Javascript dosyası olduğunu göreceksiniz. Ayrıca resim ve resimlerin kaynak dosyasını psd formatında eklenmiştir.
• Tahmin ettiğiniz gibi bu bir jQuery eklentisi. example.html dosyasının kaynak kodlarını incelerseniz bu eklentinin ne sekilde calistiğini çok rahat görebilirsiniz.

Fakat yinede kodları bir gözden geçirelim ;

ilk önce tarayıcının Internet Explorer 6 olup olmadığını kontrol ediyoruz

<!--[if IE 6]>

Eğer tarayıcı Internet Explorer 6 ise jQuery ‘i Googlelaps üzerinden çağırıyoruz.

if(typeof jQuery == 'undefined'){
document.write("<script type=\"text/javascript\"  src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
var __noconflict = true;
} 

Sonra IE6UPDATE_OPTIONS değişkenine açılacak popupta kullanılacak resim dosyalarımızın yolunu bildiriyoruz.

var IE6UPDATE_OPTIONS = {
icons_path: "ie6update/images/"
}

jQuery çağırırken açtığımız <script> etiketini kapatıp

</script>

Son olarak ie6update.js dosyamızı çağırıyoruz ve gizli if sorgumuzu kapatıyoruz..

<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif] >

İşte bu kadar. Artık ziyaretçileriniz sitenize girdiğinde eğer Internet Explorer 6 kullanıyorsa bir uyarı penceresi çıkacak ve Internet Explorer ‘ın yeni versiyonu çıktını bildirip update etmesini isteyecek…

Tarayıcı ve tarayıcı versiyonu uyuşmazlık soruna ne zaman tam anlamıyla bir çözüm bulunur bilmem ama en azından bizim gayretimizle eski versiyon kullanan bilinçsiz ziyaretçi sayısını azaltabiliriz.

Bir sonraki makalede görüşmek üzere
Hüseyin Koçak