24 Haziran 2011 Cuma

Web Sitesi İçin Translater (Javascript Translater)

Web sitenizi dünyaya açmak yabancı kullanıcıların da site içeriğinizden faydalanmasını sağlamak istiyorsanız web sayfanıza dil seçenekleri koymak zorundasınız. Bunu sağlamak için elinizde üç seçenek bulunmakta (ya da en azından benim bildiğim bu kadar)
  1. Sitenin her sayfası için farklı dillerde HTML dosyaları oluşturmak
  2. İnternetten bulacağınız ASP ya da PHP tabanlı yazılmış bir çeviri programını kendi sunucunuza entegre etmek
  3. Google Translate kullanmak

İlk seçenek ufak çaplı siteler için uygulanabilir. Ama pek de verimli olmaz.

İkinci seçeneği tercih etmek daha mantıklı. Ancak bu tip programların ücretsiz olanlarından bulmak kolay mı? Ücretsiz yazılımlar ne kadar verimli? denemeden bilemeyiz. Bunun haricinde ücretli programlardan/servislerden de faydalanılabilir. Ayrıca Joomla, Moodle, gibi web portalları kullanıyorsanız bu portalların dil paketlerini sunucuya yükleyerek de kullanıcılar için farklı dil seçenekleri oluşturabilirsiniz. Ancak bu sadece sayfa şablonuun ve bu şablona bağlı üyelerin görünümünü etkiler, içeriğiniz yine aynı kalır. Burda amacım şablonu da dahil olarak tüm siteyi istenen dile çevirmek.

Üçüncü seçenek benim gibi bedavacılar için... Diğer iki seçenekte bahsedilen işlemler sitenin sunucu kısmında(host üzerinde) gerçekleştirilir. Eğer benim gibi Blogger kullanıcıysanız maalese size ulaşabileceğiniz bir host alanı verilmiyor. bu durumda alternatif yollara başvurmanız gerekiyor. Bloggerın sunduğu bazı Gadget'lar bu sorun için çözüm olabilse de Bu gadgetlar ile birlikte gösterilen reklamlar, gadgetın sayfa tasarımına uymuyor oluşu dil bloguna seçeneği koymak isteyen bir blog sahibi için büyük bir problem. Tabii ki bu elimizin kolumuzun bağlı olduğu anlamına gelmiyor. İşte tam bu noktada Google'un çeviri servisi olan Google Translate imdadımıza yetişiyor. Bilindiği gibi bu servis sadece metinleri değil, tüm site içeriğini istenen dile çevirebiliyor. siteyi komple çevirmek için tek yapmamız gereken sitenin tam adresini çeviri kutucuğuna yazmak. Google tüm siteyi otomatik olarak, büyük bir doğrulukla istediğiniz dile çevirecektir. Ancak ziyaretçilerinizden bunu yapmalarını isteyemezsiniz.

İşte ben de tam bu noktada şunu düşündüm. Acaba javascript kullanarak(Javascript kullanıcı tarafında çalıştığı için yukarıda saydığım hosting ve yükleme sorunum olmayacak)bunu otomatik olarak yaptırabilir miyim? Yani ziyaretçi aynı diğer büyük sitelerde olduğu gibi, dil seçeneği menüsünden tek bir tuşa basarak tüm siteyi istediği dile çevirmesini sağlayabilir miyim? Bu düşünce üzerine küçük bir araştırma yaptım ve şu sonuçlara ulaştım,

-İlk olarak google translate'nin nasıl çalıştığını, çeviri ile ilgili sorgulamaların google çeviri sunucusuna nasıl yollandığını araştırdım. Türkçe'den İngilizce'ye çevirmesi için çeviri kutusuna bir metin ya da site adresi yazdığımda bu bilgiler sunucuya şu şekilde gönderiliyordu,

"http://translate.google.com/translate?hl=tr&sl=tr&tl=en&u="

Adres çubuğunda bu ifadenin karşısında çevirlmesi için yazdığım metin ya da site adresi yazıyordu. Böylelikle google sunucusuna sorgu göndermenin yolunu da bulmuş oldum. Yukarıdaki kod sadece ingilizce için geçerlidir. Diğer dillerin kodunu elde etmek için de ayrıca çeviri işlemleri yaptırılmalı ve adres çubuğunda baştan çeviri metnine kadar olan kısım kopyalanmalıdır. Bu şekilde google'un sunduğu tüm çeviri seçenekleri elde edilebilir.

-Sonra bunu javascript'e otomatik olarak nasıl yaptırabileceğim üzerine çalışmaya başladım. Yazacağım program iki şey yapmalıydı,

  1. Kullanıcı herhangi bir dili seçtiğinde program sitenin o anki sayfasına ait url'yi adres çubuğundan kopyalamalı ve bir değişkene aktarmalı
  2. Sonra da bu değişkenin değeri ile google'dan aldığımız o dille ilgili kodu birleştirip ardes satırına yazmalı ve googe sunucusuna dil sorgulamasını yollamalı
İşte aşağıda yazdığım kodlar bu işi yapıyor. Kulanıcı herhangi bir butona bastığında o butonla ilgili bir fonksiyon çalışıyor. Seçeneklerdeki her dil için ayrı bir fonksiyon yazdım. Hepsi temelde aynı işi yapıyor sadece değişken isimleri ve dil sorgusu için kullandığı kodlar farklı. dil sorgusu için kullanılan kodlar turuncu renkle renklendirilmiştir. Bu program üç dil için yapılmıştır. istenirse aynı mantıkla diğer diller de eklenebilr.

<div style="heigth:23px;">
<script language="javascript" type="text/javascript">
function eng(){
var a
a=document.location.href;
parent.location.href='http://translate.google.com/translate?hl=tr&sl=tr&tl=en&u=' +a
}

function ger(){
var g
g=document.location.href;
parent.location.href='http://translate.google.com/translate?js=n&prev=_t&hl=tr&ie=UTF-8&layout=2&eotf=1&sl=tr&tl=de&u=' +g
}

function frn(){
var f
f=document.location.href;
parent.location.href='http://translate.google.com/translate?js=n&prev=_t&hl=tr&ie=UTF-8&layout=2&eotf=1&sl=tr&tl=fr&u=' +f
}


</script>
<input type="button" value="" onclick="eng()" style=" background-image:url(ingiliz.jpeg); width:26px; height:22px; cursor:pointer; " title="English" /><input type="button" value="" onclick="ger()" style="background-image:url(alman.jpeg); width:26px; height:22px; cursor:pointer; " title="German" /><input type="button" value="" onclick="frn()" style="background-image:url(fransiz.jpeg); width:26px; height:22px; cursor:pointer;" title="French" />

</div>

Bu kodlamanın sonucunda oluşturulan javascript dil menü çubuğu şu şekilde görüntülenir,




Hiç yorum yok: