23 Temmuz 2011 Cumartesi

php for Döngüsü Örnek Kodlar

php for döngüsü
for döngüsü programcılıkta, bilgisayara belirli bir işlemi istenen miktarda tekrarlatmak için kullanılır. php içifor döngüsünün kendisine ait bir sayac değişkeni vardır ve bu değişken döngü içinde belirlenir. Bunun haricinde döngü içindeki hesaplamalarda kullanılacak olan diğer değişkenlerin döngüye girilmeden önce tanımlanması gerekir. Aslında değişkenin döngüye girilmeden önce tanımlanmamış olması programın çalışmasını engellemez. Ancak programın çalıştırılması sonucu görüntülenen sayfanın üst kısmında hata mesaj satırları belirir. Bu da sayfa görüntüsünü bozar, ayrıca ziyaretçinin sitenize olan güvenini de kaybedersiniz. Bu yüzden değişken tanımlamalarını(hesaplama yaptıracağınız işlemde kullanacağınız değişkenler, döngünün değişkeni DEĞİL !! ) döngüye grimeden önce yapmayı ihmal etmeyin. php'de for föngüsünün genel kalıbı şöyledir,

for (sayaç değişkeni(ilk değeri verilir); döngünün şartı; sayaç değişkeninin artış miktarı)
{
döngü içinde yapılacak işlemler....
}

Bilgisayar döngü işlemlerini "{" parantezi gördüğü yerde başlatır, döngü içindeki hesaplamalarla ilgili işlemleri uygular ve "}" parantesini görünce takrar döngünün başına döner. Sizin belirlediğiniz kurala göre sayaç değişkeninin değerini yine sizin belirlediğiniz miktarda arttırır ya da azaltır ve tekrar hesaplama ilemlerini yapmaya koyulur. Bu işlem sizin belirlediğiniz döngü şartı gerçekleşinceye kadar devam eder ve sonuç bir HTML sayfasında görüntülenir. Şimdi bu kadar ön bilgiden sonra kısa bir örnekle konuyu pekiştirelim.

ÖRNEK: php'de for döngüsünü kullanarak web sayfasında aşağıdaki görüntüyü elde ediniz.
X
XX
XXX
XXXX

Problemin çözümü aşağıdaki gibidir.
< ?php
$bir="X";
$topla="";
for ($i=1; $i<=4; $i++) 
$topla= $bir." ".$topla; 
echo $topla; 
echo "</br>"; 
}
?>




Turgut Arslan

7 Temmuz 2011 Perşembe

Windows 7 Home Premium'u Hızlandırmak

windows 7
Aslında hala XP kullanmakta ısrar eden biriyim. Ancak durum malum, teknoloji gelişiyor. Her gün yeni bilgisayarlar yeni sistemler piyasaya çıkıyor. Donanım üreticileri her geçen gün yeni ve daha gelişmiş modeller piyasaya sürüyor. Bilgisayar ve donanım piyasası sürekli değişiyor. Ben de bu değişime ayak uydurmak maksadıyla yeni bir bilgisayar almaya karar verdim ve hemen bir media marketin yolunu tuttum. Kısa bir araştırmanın ardından(uzun uğraşılar beni sıkar) Samsung R540 serisi bir laptop(dizüstü) aldım ve evime döndüm.

Bilgisayarı açtım ve kuruluma başladım. Kurulum
Samsung R540
tamamlandığında Windows7 HomePremium'la da tanışmış oldum. Ama maalesef tanıştığıma memnun pek de olmadım, olamadım. aldığım bilgisayar çok yavaş çalışıyor, kendisinden beklediğim performansı bir türlü gösteremiyordu. Eski sistemlerde mouse işaretçisinin üstündeki  takla atan kum saatini izlerdim. Şimdi onun yerini mavi bir halka almış, dönüp duruyor, açılmasını istediğim program bir türlü başlamıyor. Ayrıca aşırı ısınan işlemci de cabası. Alırken o kısmını sormuştum. Hatta teşhir ürününe bile baktım; laptop ısınmıyordu. Ama aldığım  daha ibilgisayar lk günden ejderha kesildi. Fanı adeta ateş püskürüyor. Bilgisayar kasıllyor, kasılıyor ama doğru dürüst işlem yok. Garanti belgelesine bakıyorum bilgisayarın özelliklerini sıralamışlar:

Samsung
-Intel(R) Core(TM) i5 CPU M480 2.67GHz
-3GB RAM
-1GB Ati Mobility Radeon HD 5470 ekran kartı
-64 bit işletim sistemi...

Şeklinde bir sürü özellik var ama sonuç hiç de tatmin edici değil. Ayrıca R540 çok ısınıyor. Bilgisayar yeni oluğuna göre fanında toz birikmiş olamaz(daha 2 günlük). Üretim hatasıdır diye düşündüm. Tam iade etmeye karar vermiştim ki birden aklıma, Windows XP'de olduğu gibi işletim sistemi altında çalışan gereksiz programları/hizmetleri kapatarak bilgisayarı hızlandırabileceğim fikri geldi. Bunun üzerine biraz araştırma, biraz da deneme yanılma yoluyla bu programları tespit ettim ve kapattım. Hemen ardından bilgisayara bir rahatlama geldi diyebilirim. Aşırı ısınma problemi de bu programları kapatmamın hemen ardından sona erdi. Böylece R540 için aşırı ısınma probleminin kaynağının fazladan çalışan işlemci olduğunu da öğrenmiş oldum.

Şimdi Windows7 Home Premium'u hızlandırmak için kapatapileceğiniz hizmetlerin listesini vererek bu yazımı da sonlandırıyorum. Umarım yeterince faydalı olabilmişimdir.

Windows7 Home Premium'u hızlandıralım

-Önce klavyeden meşhur ctrl+alt+del kombinasyonunu yapıp açılan menüden Görev Yöneticisi'ne giriyoruz ve Kaynak İzleyici butonuna basıyoruz. Karşımıza çıkan ekranda o an işletim sistemi üstünde çalışan hizmetlerin ayrıntılı bir listesi bulunmakta. Burada CPU bölümüne giriyoruz ve sırasıyla şu servisleri kapatıyoruz.

* SearchFilterHost.exe
* WmiPrvSE.exe
* taskhost.exe
* SearchProtokolHost.exe
* audiodg.exe

-Bundan başka, Başlat menüsünden; Denetim Masası > Sistem ve Güvenlik > Yönetimsel Araçlar > Hizmetler yolunu takip ederek bilgisayarda çalışan işletim sistemi hizmetlerinin listesine ulaşabiliriz. Bu listeden şu hizmetleri kapatarak Windows7 Home Premium'u hızlandırabiliriz.

* AMD External events Utility
* Bluetooth Service
* İnternet Bağlantı Paylaşımı (ICS)
* McAfee Proxy Service (Samsung R540 alanlar için)
* McAfee Site Advisor Service (Samsung R540 alanlar için)
* Media Center Extender Hizmeti
* Net.Tcp Bağlantı Noktası
* Norton Online Backup (Samsung R540 alanlar için)
* Program Uyumluluk Yardımcısı Hizmeti
* Rezip
* Switch Board (Adobe CS5 kullanıcıları için)
* Windows Live Mesh Remote
* Connections Service
* Windows Media Player Ağ Paylaşım Hizmeti
* Windows Update
* Yönlendirme ve Uzaktan Erişim
* Yazdırma Biriktiricisi (eğer yazıcı kullanmayacaksanız)

Laptoplarla ilgili piyasa - fiyat araştırmalarım için => LapTopCanavarı

6 Temmuz 2011 Çarşamba

found.000 klasörü nedir?

found.000
Çoğu bilgisayar kullanıcısı gibi sizin de başınıza gelmiş olma ihtimali yüksek olan bir olayın sonucudur. Elektrik kesintisi ya da kullanıcıların sıklıkla başvurduğu gereksiz yere resetleme veya  bilgisayarı hatalı kapatma (power düğmesi üzerinden doğrudan kapatma)  sonucu harddisk üzerinde bazı dosyalar zarar görür. Çoğunlukla böyle bir olayın ardından bilgsayarı yeniden açtığınızda checkdisk ekranı ile karşılaşırsınız(eğer harddiskiniz tahrip olmamışsa yani şanslıysanız) checkdisk hdd'nizi tarar ve bozuk dosyaları onarır. Kurtardığı dosyaları c:\found.000 kalsörü altında toplar. Windows yeniden açıldığında eğer kaybolmuş bir dosyanız varsa bakacağınız ilk yer burasıdır. İnternetten bir recovery programı indirerek bu klasördeki dosyalarınızı büyük ölçüde kurtarabilirsiniz. Günün birinde c sürücüsü altında 400-500MB'lık bir found.000 klasörü ile karşılaşırsanız virüs!!! diye paniğe kapılmayın. Büyük ihtimalle sizin masum kurtarılmış dosyalarınızdan başka birşey değildir. Ama açmadan önce güncel bir antivirüs yazılımı ile taramayı da ihmal etmeyin(n'olur n'olmaz!!). Yok ben bunları istemiyorum diyorsanız gönül rahatlığıyla silebilirsiniz. Bir sakınca yok.

Laptoplarla ilgili piyasa - fiyat araştırmalarım için => LapTopCanavarı

3 Temmuz 2011 Pazar

Web sayfasına javascript kodu nasıl eklenir?

Bu çalışmamda, web sayfasına javascript kodları nasıl eklenir? Kodları eklerken nelere dikkat edilmeli onları araştırdım. Umarım hepimize faydalı olur.

Javascript kodu statik HTML sayfalarına işlevsellik kazandırmak, hareketlendirmek veya kullanıcılarla etkileşim kurmasını sağlamak için kullanılır. Javascript ile web sayfasındaki elemanları hareket ettirebilir veya onlara farklı efektler kazandırabilirsiniz. Bunun haricinde sayfada hesaplama, sorgulama, kullanıcı girişi, form doldurtma gibi işlemler javascript ile yapılır. Javascript kodları web sayfasının kullanıcı önyüzünde çalışır. Tasarım dünyasında buna front end derler. Gereksiz yere javascript kullanımı (CSS ya da HTML’nin yapabileceği işleri javascript’le yapmak) tarayıcının ram üzerindeki yükünü arttırır ve sayfanın görüntülenmesini zorlaştırır. Hatta bazı durumlarda sayfa hiç açılmayabilir. Ziyaretçi, tarayıcı ekranında “İnternet Explorer Bu Web Sayfasını Açamıyor” ya da “Sayfadaki betik çalışmıyor” benzeri hata mesajları alabilir. Bu durum sayfanızın ziyaretçi sayısını ve ziyaret süresini olumsuz etkiler. Çünkü internet çağının insanları için hız önemlidir ve insanların beklemeye tahammülü yoktur. Bu sebepten sayfayı kodlarken HTML, CSS, FLash ve Javascript elemanlarını yerinde ve gerektiği kadar kullanmaya özen gösterilmelidir. Bu kadar ön bilgiden sonra Javascript kodlarının web sayfasına nasıl eklendiğini görelim. Javascript kodları web sayfasının herhangi bir yerine yerleştirilebilir ve en genel kullanımı şu şekildedir.

<script type=”text/javascript” language=”Javascript”>

Bu kısımda
--------------------
--------------------
--------------------
Program kodları bulunur.

</script>

Kodları özellikle web sayfanızın <head></head> tagları arasına yerleştirmeniz kodların okunmasını, yorumlanmasını ve programın yüklenmesini hızlandırır. Burada tarayıcının HTML dosyasını yorumlama şeklinden bahsetmekte fayda var. Tarayıcılar HTML dokümanlarını yukardan aşağıya doğru ilk satırdan itibaren, satır satır okuyarak yorumlamaya ve bu yoruma göre sayfa öğelerini yerleştirip kullanıcıya görüntülemeye başlar. Bu sebepten sayfada öncelikle çalışmasını istediğimiz kodların ve CSS özelliklerinin sayfanın baş kısmında olması çalışma verimini arttırır. Ayrıca Javascipt’te yaptığınız değişken tanımlamalarını <head></head> tagları arasında yapıp ana program kodlarını yine sayfanın herhangi bir yerine de yazabilirsiniz. Ayrıca, özelikle fare ile tıklama veya farenin sayfadaki herhangi bir nesne(resim, buton, link vs.) üzerine gelmesi durumlarında işlemesi için(bunlara javascript’te event-olay denir) bazı kodlar HTML elemanları içine de yazılabilir. Buna da bir örnek verelim,

<img src=”resim.jpg” onClick=”parent.location.href=’http://www.google.com’”/>

Bu kodlama ile resim nesnesine ziyaretçi tıkladığı zaman sayfayı belirtilen web sitesine yönlendirme özelliği verilmiş olur. Aynı işlem şu şekilde de yapılabilir; sonuç aynı olur.

Öncelikle <head></head> etiketleri arasına ya da sayfadaki uygun herhangi bir yere şu kodlama yapılır,

<script type=”text/javascript” language=”javascript”>
function git()
{
parent.location.href=”http://www.google.com”
}
</script>

Sonra web sayfasına istenen nesne yerleştirilir ve tıklama olayı için bu fonksiyona aktive olma emri verilir.

<img src=”resim.jpg” onClick=”git()”/>

Burada sayfaya eklenen resim nesnesine tıklandığı zaman git() fonksiyonu devreye girer ve sayfa istenen web sitesine yönlendirilir. Bu basit link verme işlemi aslında HTML’nin <a></a> tagı kullanılarak da yapılabilir. Başta da söylediğim gibi HTML ya da CSS kullanarak yapabileceğiniz şeyleri Javascript ile yapmaktan kaçının ve her zaman tarayıcı yükünü hafifletmeye çalışın. Burada verdiğim örnek sadece siteye Javascript kodlarının nasıl ekleneceğini ve bu kodların nasıl işleyeceğini göstermek içindir.

Diyelim ki kapsamlı bir program hazırladınız. Satırlar dolusu kod yazdınız. Programınız sabitler, değişkenler, döngüler hesaplamalarla dolu. Bu programı web sayfanıza eklediğiniz zaman, tarayıcının sırtlanacağı yükü bir düşün. Tarayıcı yukardan aşağı tüm kodları yorumlarken, yükleneceği HTML ve CSS kodları, resimler, videolar, vs. elemanlara ek olarak bir de satırlar dolusu javascript kodunu yorumlamakla uğraşacak. Birde sayfada birden fazla Javacript programı kullanıyorsanız tarayıcının ağır yükten dolayı kaplumbağa hızında işlemesi ya da daha kötüsü, sitenin hiç açılmaması işten bile değil. Yukarıda da bahsettiğim gibi Javascript programları nesneye yönelik programlardır ve genelde çalışmak için kullanıcı tarafından tetiklenmeye(fare ile programa konu olan eleman üzerine gelme, tıklama ya da klavyeden bir tuşa basma gibi) ihtiyaç duyarlar. Eğer sayfanızı ziyaret eden kişi programınıza konu olan; programla ilişkilendirilmiş nesnelerle(resim, link vs) etkileşim kurmazsa(veya “window.onload” gibi bir önyükleme kodu da kullanmayacaksanız) muhtemelen kullanıcının ziyareti boyunca hiç kullanmayacağı bir program için tarayıcıya fazladan kod işleme yükü bindirmiş ve sayfa yüklenmesini yavaşlatmış olursunuz. Tüm bunların önüne geçmek ve tarayıcı yükünü hafifletmek için javascript kodlarınızı aynı CSS’de olduğu gibi harici bir dosya haline getirip, tek satırlık bir kodlama ile sayfanıza bağlayabilirsiniz. Böylelikle programınız sadece ziyaretçi tarafından önceden tarafınızdan nasıl olacağı belirlenen(genellikle tıklama) bir etkileşim gerçekleşirse aktive olur. Bu sayede tarayıcı yükünü hafifletmiş, site yüklenme süresini hızlandırmış ve ziyaretçinin bilgisayarını da gereksiz yere yormamış olursunuz. Şimdi tüm bu söylediklerimi yukarıdaki link işlemi için uygulayalım.

-İlk önce yeni bir metin belgesi oluşturalım ve kullanıcı tıkladığı zaman çalışmasını istediğimiz program kodlarını bu belgeye kodlayalım.

function git()
{
parent.location.href=”http://www.google.com”
}

Burada sadece kodları kopyalıyoruz; script etiketlerini almıyoruz.

-Sonra bu dosyayı link.js adıyla kaydedip, sunucumuzda uygun gördüğümüz bir yere kopyalıyoruz.
-Şimdi sıra link.js dosyasını web sayfamıza bağlamaya geldi. Bunun için aşağıdaki kodları HTML dosyamızın <head></head> etiketleri arasına yazıyoruz.

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

-HTML kısmı diğerleri ile aynı.

<img src=”resim.jpg” onClick=”git()”/>

-HTML dosyamızı kaydedip tarayıcımızdan açtığımızda yukarıda anlattığım yöntemlerle aynı sonucu aldığımızı görüyoruz. Bu yöntemle birden fazla sayfaya aynı dosyayı bağlayarak ziyaretçinin tarayıcısını her sayfa için tekrar tekrar kod yorumlama ve yükleme zahmetinden kurtarmış oluyoruz. Burada link.js dosyamızın adresi doğru verildiğinden emin olmalıyız. Aksi takdirde programımız çalışmaz.

Böylelikle web sayfasına Javascript kodu eklemek için kullanabileceğimiz üç yöntemi de görmüş olduk. Her yöntemin kendine göre avantaj veya dezavantajları bulunmaktadır. Tasarımcı, hazırlayacağı sayfanın ve programın işleyişine uygun yöntemi seçmek durumundadır. Eğer doğru tasarım ve program için doğru yöntem seçilirse sayfanın çalışma verimi en üst seviyede olur. Özellikle web sitelerinin front end (önyüz) tasarımı ile uğraşanların bu kurallara dikkat etmesi gerekir.

25 Haziran 2011 Cumartesi

Site Trafiğini Arttırmak ve SEO (Search Engine Optimization)

seo
Web sitesi hazırlamak göründüğünden daha zor, oldukça zahmetli bir iştir. Etkileyici, kullanışlı ve güzel bir görünümü elde etmek bir yana, hazırlanan içeriğin siteye yüklenmesi ve kullanıcılara sunulması ayrıntılı ve yoğun bir çalışmayı gerektirir. Buna ek olarak hazırladığınız sayfa her web tarayıcı için farklı yorumlanacağından(yaptığınız tasarımlar tüm web tarayıcılarda aynı görünmeyebilir) tarayıcı uyumunu sağlamak, web sitesini ziyaretçiler tarafından kullanılması muhtemel web tarayıcı model ve sürümlerinde en doğru biçimde görüntülenmesini sağlamak, site tasarımının zor taraflarıdır. Tüm bu zahmetlere karşılık web sitesi istatistiklerinin yerlerde sürünmesi, ziyaretçi sayısının düşüklüğü, tüm bu çalışmaları yapan; işin külfetini çeken kişi ya da kişiler için büyük bir hayal kırıklığı ve üzüntü kaynağıdır. Emeklerinizin boşa gitmemesi ve sitenizin amacına yani ziyaretçilerine ulaşabilmesi için yapmanız gereken çok önemli üç şey var.

1-Sitenizi google, yahoo ve bing gibi arama motorlarına kaydedin, indeksleyin.

2-Sitenizin bilinirliğini arttırın; mümkünse reklam yapın.

-Çeşitli forum ve sosyal paylaşım sitelerine(Donanım Haber, Facebook. Twitter gibi) üye olun reklamınızı yapın.

-Bloxoo, Bumerang gibi blogların listelendiği, paylaşıldığı sitelere üye olun ve bloğunuzu tanıtın.

-Google AdWords ile ücret karşılığı web sitenizin reklamını yapabilirsiniz.

3- Site tasarımınız arama motorlarına uygun hale getirin.

-Title, meta tag ve etiketler kullanın.

Title: Buraya yazdığınız yazı web tarayıcının başlık kısmında görüntülenecektir. Site ana başlıklarını buraya yazabilirsiniz. Title içinde sitenizde olmayan içeriklerle ilgili kelimeler kullanmayın. Arama motorları buna kızar.

Meta Tagı: Burada keyword ve description olarak anahtar sözcükler kullanılır. Arama motorları burada yazan kelimeleri sitenizi tanımlamakta kullanırlar. Şunu unutmayın buraya yazdığınız anahtar sözcükler site içeriği ile uyumlu olmalıdır.

Etiketler: Eklediğiniz içeriği anahtar sözcüklerle etiketleyin. Kullandığınız etiket sözcüklerini site içeriğinden seçerseniz arama motorları sitenizi o içerik ile ilgili aramalarda daha üst sıraya koyarlar. Aynı şekilde burada da konu ile alakasız etiket sözcükleri kullanmamaya dikkat edin.

-Eklediğiniz resimlere konu ile ilgili alternatif metinler yazın.

Mesela ben bu sayfaya seo.jpg isimli bir resim ekledim. Bunun için yaptığım kodlama şu şekilde oldu;

< img src=”seo.jpg” alt=”seo”/>

Siz de kodlamayı bu şeklinde yaparsanız sitenize koyduğunuz resim arama motorları tarafından verdiğiniz isim altında indekslenir. Eğer resme verdiğiniz alt metin konu metnindeki önemli sözcüklerden biri olursa internette o konu ile ilgili görselleri arayan bir kullanıcı rahatlıkla resim dosyanıza ulaşır. Arama motoru resim dosyanızı konu ile ilgili diğer resimlerin arasında gösterir. Böylelikle resimler aracılığıyla sitenize ulaşmış olurlar.

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,




17 Haziran 2011 Cuma

Javascript if Uygulaması (Javascript ile Basit Bir Hesap Makinesi)

javascript ifProgramlama öğrenmeye çalışan herkesin eninde sonunda karşılaşacağı bir problem vardır. Programcılar buna "Program Akış Denetimi" derler. Bilgisayar programı dediğimiz şey esasen akış halinde birbirini takip eden bir dizi işlemden ibarettir. Program akışı içinde bu işlemler bilgisayar tarafından süratle gerçekleştirilir ve sonuçları ekrana yansıtılır. Bazı programlar yapı itibariyle basittir. Sadece kullanıcıdan ya da herhangi bir yerden aldığı verileri işleyerek sonucunu gösterirler. Bu tip programlar tek yönde çalışırlar ve genelde sadece tek bir şarta dayalı işlemleri gerçekleştirirler ve çözüme ulaşırlar. Ancak bazı problemlerin çözümü bu kadar basit olmaz. Programcılar sıklıkla bilgisayara, "Şu şart halinde şunu yap, bu şart halinde bunu yap" şeklinde komutlar etkleyerek programa farklı durumlar için esneklik kazandırmak zorunda kalırlar. İşte bu farklı durumların sorgulandığı yer, belirlenen şarta göre program akışının yön değiştirdiği ya da olağan akışına devam ettiği bir kavşak noktası gibidir. Program akışı bu noktalardan denetlenir. Hemen hemen tüm programlama dillerinde bu denetleme "if" komutu ile yapılır. "if" komutu program akışını iki kola ayırır. İngilizce'de "eğer" anlamına gelen bu sözcük programa işleyeceği verileri, programcı tarafından önceden belirlenen kriterlere göre(büyüklük, küçüklük, eşitlik gibi)karşılaştırıp sonuca göre (evet yada hayır) program akışını yönlendirme olanağı verir.

Buraya kadar anlatılanlar Javascript için de geçerlidir. Javascript'te "if" komutu şu şekilde kullanılır;

if(aranan şart){
uygulanacak işlem
}
Bir sonraki işlem

Aranan Şart: x==5, secim=="yeni", a<5 gibi şartların sorgulandığı bölüm.

Uygulanacak İşlem: x=sayi1+sayi2, document.hesap.sonuc.value=islem gibi komutların uygulandığı, çeşitli işlemlerin yapıldığı kısım. Bu bölümde çeşitli aritmetik işlemler, karşılaştırmalar, döngüler gerçekleştirilebilir. Bir sonraki işlem: aranan şartın sağlanamadığı durumlarda yapıl Javascript'te "if komutu şu şekilde çalışır;

1- Önce parantez içindeki şart sorgulanır. Sorgulama sonucu evet ya da hayır dır.

2- Sonuç evet ise yani şart sağlanıyorsa, süslü parantezler içindeki işlemler gerçekleştirilir.

3- Sonuç hayır ise yani şart sağlanmıyorsa süslü parantez içindeki işlemler uygulanmaz. "if" bloğundan çıkılır ve hemen bir sonraki işlem gerçekleştirilir.

Birden fazla "if" komutunu iç içe kullanabilirsiniz. Yani bilgisayara "şu şart halinde, şu şartta şu şartı sorgula" şeklinde komutlar verebilirsiniz. Bu komutun iç içe uygulamasını daha sonraki bir yazıya bırakıp örnek bir program ile yazımı sonlandırmak istiyorum. Aşağıdaki kodlar web sayfasında çok basit, ilkel bir hesap makinesi oluşturmak için yazıldı. Kullanıcı arayüzü olarak HTML'nin form elemanlarını (textbox ve button) kullandım. Program yaı ve işlevsellik açısından o kadar iyi olmasa da "if" komutunu anlamamız açısından yararlı olacaktr. Ayrıca şunu da belirtmek istiyorum bu programın "endeks=selectedIndex " ile başlayan kısmını "Hakkı İcal"'in Javascript ders notlarından aldım. Oradan öğrendiklerimi geliştirip değiştirerek ürettiğim uygulamaları buradan sizlerle paylaşıyorum. Umarım hem sizin için hem de benim için faydalı olur.

İşte hesap makinesi kodları:

<script language="javascript1.2">
function hesapla(secme){ /* Bu satırda bir fonksiyon tanımlanıyor*/
var sayi1,sayi2,endeks, secilenIslem,islem /*değişkenler belirleniyor*/
endeks=secme.selectedIndex
secilenIslem=secme.options[endeks].text /*bu kısımda açılır menüden seçilen değeri"secilenIslem" değişkenine aktarıyor */

sayi1=eval(document.hesap.birinci.value)/* Sayısal işlem yapılacak değişkenlere*/
sayi2=eval(document.hesap.ikinci.value) /* kullanıcının girdiğideğerleraktarılıyor*/

if(secilenIslem=="Topla"){ /* bu kısımda kullanıcının seçtiği işlem*/
islem=sayi1+sayi2 /* sorgulanıyor ve işlem gerçekleştirilip sonucu*/
document.hesap.sonuc.value=islem /* "Sonuç" adlı text box'a yazdırılıyor*/
}
if(secilenIslem=="Çıkar"){
islem=sayi1-sayi2
document.hesap.sonuc.value=islem
}
if(secilenIslem=="Çarp"){
islem=sayi1*sayi2
document.hesap.sonuc.value=islem
}
if(secilenIslem=="Böl"){
islem=sayi1/sayi2
document.hesap.sonuc.value=islem
}
if (secilenIslem=="İşlemi Seçiniz"){ /*kullanıcı işlem seçimi yapmazsa uyarı*/
alert("Lütfen Bir İşlem Seçiniz") /*mesajı veriyor*/
}
}
</script>
<form name="hesap">
<div style="float:left;">
1. Sayı : <input type="text" value="" name="birinci" maxlength="10"

/><br />
2. Sayı : <input type="text" value="" name="ikinci" maxlength="10"

/><br />
Sonuç = <input type="text" value="" name="sonuc" maxlength="10" />
</div>
<div style="float:left;">
<select name="secim" onchange="hesapla(this)">
<option selected>İşlemi Seçiniz
<option>Topla
<option>Çıkar
<option>Çarp
<option>Böl
</select>
<input type="reset" value="Sil" />
</div>

</form>



Bu kodlamanın sonucunda hesap makinemiz şu şekilde görüntülenir.


1. Sayı :

2. Sayı :

Sonuç =





14 Haziran 2011 Salı

CSS3 ile Web Sayfasına Yuvarlak Köşeli Elemanlar Koymak

Bir web sayfasına içerik yerleştirilirken genellikle div, span gibi kutu özelliği olan ve sayfa üzerinde belirli bir yüzeyi kaplayan elemanlar kullanılır. Tablo ile web tasarımının modasının geçtiği şu günlerde, tasarımcılar sayfalarını "div" veya "span" gibi kutu elemanları ile hazırlamaktadırlar. Bu elemanlar CSS'nin verdiği sayısız özellikler sayesinde web tasarımcıların daha keliteli ve daha güzel görünümlü siteler tasarlamasına olanak sağlamıştır. Bu yazıda artık üçüncü versiyonu ile karşımıza çıkan CSS'nin tasarımcılara verdiği yeni bir imkandan bahsetmek istiyorum. CSS3 ile gelen "border-radius" kodu sayesinde artık tasarımcı hazırladığı web sayfasına köşeleri yuvarlatılmış HTML elemanları yerleştirebilir. Bunu bir örenek kod üzerinde gösterelim. Mesela bir "div" elemanı CSS3 sayesinde şu şekilde biçimlendirilebilir,

<div style="float:left; text-align:center; font-size:18px; background: #9CF; border:solid 5px #c1c6c7; border-radius: 55px 35px 20px 10px; padding:30px;">Köşeleri Yuvarlatılmış Div</div>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Köşeleri Yuvarlatılmış Div

İsterseniz benzer bir kodlama ile yuvarlak butonlar da yapabilrisiniz. Alın size bir örnek,

<input type="button" value="Yuvarlak buton" style="text-align:center; font-size:18px; color:#fff; background: #9CF; border-radius:10px; padding:5px;"/>

Bu kodlama da şu şekilde görüntülenir,


"border-radius" bu kodun standart halidir. Eğer yaptığınız kodlamanın diğer web tarayıcılarda da sorunsuz çalışmasını istiyorsanız Şu kodları da sayfanıza eklemelisiniz,

-moz-border-radius:55px 35px 20px 10px; / Firefox için /
-webkit-border-radius:55px 35px 20px 10px; /Safari ve Google Chrome için /

Burda verdiğiniz
ilk değer: sol-üst köşeyi,
ikinci değer: sağ-üst köşeyi,
üçüncü değer:sağ-alt köşeyi,
dördüncü değer:sol-alt köşeyi

yuvarlatmak için vermeniz gereken yarıçap değerleridir. Eğer yarıçap için tek bir değer girerseniz, tüm köşeler aynı değerde yuvarlatılır.

Son olarak "border-radius" kodu ile uymlu tarayıcı listesini de verelim.

Uyumlu tarayıcılar:
-----------------------------
Firefox 3.5 ve üzeri
Internet Explorer 9 ve üzeri
Netscape Navigator 3 ve üzeri
Opera 10.5 ve üzeri
Google Chrome 4.0 ve üzeri

10 Haziran 2011 Cuma

Yazıların Arkaplan Rengini Değiştirmek

Web sayfanıza koymak istediğiniz metin içeriğinin önemli gördüğünüz kısımlarını işaretlemek, belirgin hale getirmek isteyebilirsiniz. Basit bir CSS kodu yardımıyla ders çalışırken kullandığınız fosforlu kalemle işaretler gibi metin içeriğinizin istediğiniz kısımlarını ya da tamamını işaretleyebilirsiniz. Bunun için kullanmanız gereken CSS kodu "background-color" dur. Bu kodu metin içeriğinizi işarelemek içi kıullandığınız HTML tagına (<b>, <a>, <span>, <div>,... gibi) bir "Style" özelliği olarak ekleyebilrsiniz. Bunu bir örnekle açıklayalım,

< b style="background-color: #9fc666;" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at...... </b>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.

Taglar arasındaki farkı görebilmemiz açısından aynı işemi <div> tagı için uygulayalım.

<div style="background-color: #9fc666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.

Dikkat ettiyseniz iki tag arasında önemli bir fark var. HTML'nin bazı tağları sayfayı satır satır işaretlerken bazıları kutu şeklinde bir alanı işaretler. Tasarımınızı yaparken bu önemli farkı da göz önünde bulundurmalısınız.

Program Kullanmadan Bilgisayarın MAC Adresini Değiştirmek

rj45 soketFiziksel adres olarak da bilinen MAC(Media Access Control-Ortam Erişim Kontrolü) adresi, bir bilgisayarın yerel ağa ya da internete bağlanırken kullandığı cihazın (ethernet, FDDI, Bluetooth, Wi-fi gibi) değişmeyen numaralarıdır. Her üretici firma kendisine özel bir numara grubu kullanır. MAC adresi 12 numaradan oluşur. Bu numaralar onaltılık sistemde oluşturulmuştur.

Ethernet Kartı
İnternete bağlanan bir bilgisayara servis sağlayıcı tarafından bir IP numarası verilir. Bilgisayar bu numarayı kullanarak bağlanmak istediğiniz web sitesinin sunucu bilgisayarına kendisini tanıtır ve bu şekilde bağlantı kurulur. Bu numara modemi açıp kapattıkça değişir. Ancak MAC numarası değişmez. IP numarasını öğrenmek için Başlat >Çalıştır' a tıklayıp komut satırına cmd komutu yazılır ve DOS ekranı karşınıza çıkar. DOS oratmında "ipconfig /all" komutu yazılır. Bu komut bilgisayarın yerel ağ yapılandırmasını bir liste halinde size sunar. Burada "fiziksel adres" başlıklı satır sizin MAC numaranızdır.


Şimdi MAC numarasını program kullanmadan nasıl değiştirebileceğimizi gösterelim,

İlk olarak Masaüstünde "Ağ Bağlantılarım" a girilir. Buradan sodaki menüden "Ağ Bağlantılarını Görüntüle" seçeneğine tıklanır ve bilgisayarın "Yerel Ağ bağlantısı" görüntülenir. Bunun üzerine fare ile gelinerek Sağ tuş > Özelliklere tıklanır

Açılan menüde "Microsoft Ağları İçin İştemci" seçili olmalıdır. "Yapılandır" düğmesine tıklanır.

Sekmeli menüden "Gelişmiş" seçeneği seçilir. Ardından açılan listeden "Network Address" seçilir. Burada değer olarak sizin MAC numaranız görüntülenmektedir. Bu numara üzerinde istediğiniz sayısal değişiklikleri yapın ve "Tamam" düğmesine basın.


Bu işlemin ardından bilgisayar ağ bağlantınızı yenileyecektir. Tekrardan DOS ekranına dönüp "ipconfig /all" yazdığınızda "Fiziksel adres" kısmında MAC numarası üzerinde yaptığınız değişikliklerin gerçekleştirildiğini görebilirsiniz.

9 Haziran 2011 Perşembe

Web Sayfasına Resimli Arka Plan Yapmak

Sevdiğiniz, beğendiğniz ya da yaptığınız tasarıma uygun olduğunu düşündüğünüz bir resmi web sayfanızın arka planı olarak kullanabilirsiniz. Bunun için HTML dosyanızın <body > tagının içine "background" parametresini kullanarak istdiğiniz resmi (jpg ,gif ya da png) arkaplan olarak belirleyebilirsiniz. İstediğiniz bir resmi arkaplan yapmak için,

< body background="arlaplan.gif" >
....................
....................
...................< /body >

şeklinde bir kodlama yeterlidir. "background" parametresine değer olarak arkaplan resminin konumu verilir. Burada dikkat edilmesi gereken husus adresin doğru olarak verilmesidir. Aksi takdirde resim görüntülenmez. Bu işlem sonucunda seçtiğiniz resim sayfanın arka planına döşeme şeklinde (sayfa boyunca tekrar ederek) yerleşir.

Artık günümüzde arkaplan resmini yerleştirmek için CSS kodlarından faydalanılmaktadır. CSS kodları web tasarımda nesnelerin yerleştirilmesi için HTML kodlarına göre daha çok imkan tanımaktadır. Bunu bir örnek ile açıklayalım.

< body style="background:url(arkaplan.jpg); background-repeat:no-repeat;" >
....................
....................
...................< /body >

Son olarak tag içinde kullanılan parametreleri de açıklayalım,

background-repeat : Arkaplan resminin tekrarlanma şeklini belirlemek için kullanılır. Dört farklı değeri vardır.

no-repeat : Tekrarlama olmaz.
repeat : Resim tüm sayfa boyunca döşenir.
repeat-x : Yatay doğrultuda döşeme yapar.
repeat-y : Düşey doğrultuda döşeme yapar

Gelen Mailin Kaynağını (IP'sini) Bulmak (Hotmail için)

Hotmail Mesajınız var!
MSN'de biri ile konuşuyorsunuz birden mesaj kutunuza bir mail geliyor. Açıp bakıyorsunuz abuk sabuk şeyler, reklamlar, vs.vs.... Bazısının gönderen kısmında sitenin ismi yazıyor bazısında o da yok. Kendi kendinize düşünüyorsunuz. Bu mailleri kim gönderiyor? Mesele sadece abuk sabuk mesajlarla da bitmiyor.Bazı mailleri ise görünüm itibariyle bir bankanın ya da devlet kurumunun resmi sitesinden farksız. Sizden kimlik numaranızı kişisel bilgilerinizi talep ediyorlar.



-Lütffen aşağıdaki formu doldurunuz.
-Kredi kartınızın kullanım süresi dolmuştur. Yenisini gönderebilmemiz için lütfen eski kredi kart numaranızı ve şifrenizi giriniz, kişisel bilgilerinizi giriniz vesaire vesaire....

Acaba bu mesaj gerçekten bankanızdan ya da devlet kurumundan mı geldi? ya da üye olduğunuz internet sitesinden mi? Bir kere şunu kafanıza yazmanız lazım. Bankalar ya da devlet kurumları bu şekilde mailler ile işlerini yürütmezler. Bunu olsa olsa kötü niyetli kişiler yapar. Bu kişilerin yaptığı işe "phishing" (yemleme) denir. en çok kullanılan internet dolandırıcılığı yöntemlerinden biridir. Özellikle internet üzerinden alım - satım, e-ticaret işleri ile uğraşanlar için çok tehlikelidir. Dikkat edilmezse sonuçları çok ağır olabilir. İşte bu durumda kullanıcıya düşen görev ilk olarak mesajın kaynağını kontrol etmektir. Bu yazıyı Hotmail için hazırladım. Ancak diğer önemli e-posta servislerinin de buna benzer hizmetleri bulunmaktadır. Şimdi Hotmail'de bu işin nasıl yapıldığını görelim

hotmail ip sorgulama
Hotmail'inize gelen mesajların kaynak ip'sini öğrenmek için tek yapmanız gereken fare ile iletinin üstüne gelip sağ tuşa basmak ve çıkan menüden ileti kaynağını göster seçeneğine tıklamak. Ardından açılacak olan sayfada hotmail size bu mesajı gönderen kişinin ya da internet sitesinin ip numarasını gösterecektir.Bu ip numarasının internetten whois sorgusunu yapıp yerini öğrenebilirsiniz. Eğer böyle bir mesaja cevap verme niyetiniz var ise bunu İp kontrolünden sonra gönül rahatlığıyla yapabilrisiniz. Ama ben yine de bu tarz maillere karşı dikkatli olun derim.

8 Haziran 2011 Çarşamba

Flash Yıldız Gezegen Animasyonu Ver. 1.01

Daha önce yapmış olduğum yıdız gezegen animasyonunu biraz daha geliştirdim. Flash animasyon tekniklerini öğrendikçe yaptığım çalışmaları buradan sergilemeye devam edeceğim.

Eğer animasyon görüntülenmiyorsa bilgisayarınızın DNS numaralarını değiştirin. İsterseniz şu numaraları kullanabilirsiniz:

64.81.79.2
128.107.241.184



HTML Kodları ile Web Sayfasının Arkaplan Rengini Değiştirmek

Web sayfanızın arkaplan rengini değiştirmek için < body > tagının "bgcolor" parametresine o rengin ingilizce adını (red, yellow, white, black gibi) ya da onaltılık sistemde hazırlanmış renk kodunu girmeniz yeterlidir. Arkaplan rengi şu şekilde değiştirilir.

< body bgcolor="red" >
............
...........bu kısımda diğer sayfa elemanları bulunur.
...........
...........
< /body >

Bu kodlama ile sayfa arkaplanı kırmızı olarak değiştirilir. Burada "bgcolor" için red yerine onun hexadesimal(onaltılık) RGB kodu olan #FF0000 da yazılabilir. Sonuç aynıdır. Hexadesimal sayı sistemi 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F elemanlarından oluşur.

Burada RGB sisteminden de bahsedelim. RGB, Red-Green-Blue (Kırmızı-Yeşil-Mavi) ışık renklerinin karışımı ile diğer renklerin elde edilmesine dayalı bir renklendirme standardıdır. Her renk için hexadesimal sayılardan oluşan bir sayı çifti bulunmaktadır. Bu çiftlere verilen değere göre istenilen renk elde edilebilir. Konunun daha iyi anlaşılabilmesi için RGB sistemini bir tablo haline getirdim.

RENKLERKIRMIZIYEŞİLMAVİ
KODLAR#0,1,2..A,B,..F0,1,2..A,B,..F0,1,2..A,B,..F



Laptoplarla ilgili piyasa - fiyat araştırmalarım için => LapTopCanavarı

6 Haziran 2011 Pazartesi

Flash Saat

Web sayfanızda kullanabileceğniz. Granit desenli flash saat uygulaması.

Eğer flash saat görünmüyorsa DNS numaranızı değiştirin.

64.81.79.2
128.107.241.184

Numaralarını kullanabilirsiniz.

31 Mayıs 2011 Salı

Javascript iç içe for döngüsü

Javascript for döngüsü
Döngüler bilgisayarlara belirli bir işi, belirli şartlar altında istenen miktarda yaptırmak için kullanılır. Döngü yazmak programcıyı aynı kodu defalarca tekrarlamaktan kurtarır. Bu konuyu çarpım tablosu üretmeye yarayan bir program üzerinde inceleyelim. Bu arada javascriptte kullanılan for döngüsünü de anlatmış olacağız.

Neden çarpım tablosu diye sorabilirsiniz. Biliyorum, yararsız bir program. Ama döngü kavramını incelemek ve for döngüsünü hem de iç içe eklenmiş bir vaziyette uygulamak için ideal bir çalışma. Önce For döngüsünün ne olduğuna bir bakalım



For Döngüsü:

Javascript'te bir işlemi/hesaplamayı istenen sayıda tekrarlamak için kullanılır. Ufak bir hesaplama ile programcıyı sayfalar dolusu kod yazmaktan kurtarır, zaman ve emekten tasarruf sağlar. For döngüsü şu şekilde kullanılır,

for (sayılacak değişkenin ilk değeri; sayılacak değişkenin limiti; altma veya azalma miktarı)
{
Bu bögeye (süslü parantezler arasına) yaptırılmak istenen işlem yazılır.
}
sayılacak değişkenin ilk değeri şöyle belirlenir;

i=1;

Javascript'te for döngüsü içinde önceden tanımlanma şartı olmaksızın değişken yazabilir ilk değerini verebilirsiniz. Şimdi "i=1" ile bir değişken oluşturduk ve buna ilk değernin atadık. Hesaplamanın ne zamana kadar yapılacağını belirlemek için değişkenin alabileceği değerlerin, programın işleyişine uygun bir şekilde sınırlanması gerekir. Bunu da yapalım,

i<=10;

Böylelikle i değişkeni 10 değerine gelinceye kadar(10 da dahil) döngü için belirlenen işlemler tekrarlanır. Verilen değerlerin artma ya da azalma miktarı şu şekillerde verilebilir.

i=i+1 veya ++i
i=i-1 veya --i 

lkinde bire birer artar ikincisinde birer birer azalır. isterseniz artma/azaltma miktarını değiştirerek işlem adedini küçültebilirsiniz. süslü parantezler içinde de yapılacak işlemi yazarsınız.

{
k=i*j
}

For döngüsü matruşka gibidir
For döngüleri iç içe kullanılabilrler. İç içe for döngüsü kullanılırken süslü parantezleri açık unutmamaya ve doğru yerlerde kullanmaya dikkat edin. iç içe for döngüsü matruşka gibidir.  Yani iç döngüyü kendi içinde dış döngüyü de kendi içinde kapatmalısınız.

Bu kadar önbilgiden sonra programı incelemeye başlayabiliriz. Programımız şunları yapıyor
Aşağıdaki butona basınca;

-Çarpım tablosunu oluşturmakla görevli carp isimli bir fonksiyon tanımlıyor. (Aslında bu fonksiyona ihtiyacımız yok Ama programın sayfa açılır açılmaz çalışmasını istmediğim için ben üzerine tıkladığım zaman olayı başlatacak bir düğme için bu fonksiyonu yazdım)
-Bir tablo başlatıyor,
-İlk satırı açıyor ve içine birden 9 a kadar numaraları sıralıyor. (bu kısım elle yapıldı döngüye dahil değil)
-İlk döngüye giriyor bu döngü "i=1" için ilk satırı oluşturuyor
-ikinci döngüye giriyor bu döngü "j=1" için ilk sütunu oluşturuyor.Böylelikle tablonun ilk hücresi oluşturulmuş oluyor. Ardından k=i x j çarpımını yapıyor ve hem çarpma işlemini hem de sonucunu bu hücreye yazıyor. İç döngünün başına geliyor ve ikinci hücreyi oluşturuyor. Bu iç döngü bu şekilde "j=9" oluncaya kadar hücreleri oluşturup içine sonuçları yazmaya devam ediyor."i=9" değeri de hesaplandıktan sonra iç döngüden çıkılıyor ve dıştaki döngüye giriliyor. İç döngü tmamlandığında "i=1 "olan değer +1 arttırılarak "i=2" için aynı döngü yeniden tekrarlanıyor. "i="10" olduğunda dış döngü de tmamlanıyor ve son olarak tablo etiketi kapatılıp çarpım tablosu tamamlanıyor.

İşte tüm bu hesaplamaları yapan programın kodları ;

<script language="javascript1.2">

function carp(){

document.writeln("<table Border=1>")

document.writeln("<tr><td>"+ 1 + "</td><td>"+2+"</td><td>"+ 3 + "</td><td>"+4+"</td><td>"+ 5 + "</td><td>"+6+"</td><td>"+ 7 + "</td><td>"+8+"</td><td>" + 9 + "</td></tr>")

for (i = 1; i <= 10; ++i)

{

document.writeln("<tr>")

for (j =1; j<=9; ++j)

{k = i * j

document.writeln("<td>" + i + "x" + j + "=" + k + "</td>")

}

}

document.writeln("</tr>")

document.writeln("</table>")

document.writeln("<input type=button Value= geridön_geridööön onclick=parent.location='http://infial.blogspot.com/2011/05/function-carpdocument.html' />")

}
</script>
<input type="button" Value="Çarpım tablosunu göster" onclick="carp()" />


Turuncu ile işaretli olan yeri yazmayın. O kısmı bu sayfaya geri dönüş için koydum.
Bu kadar kafa yormaya ne gerek var? Ben elimle oturur yazarım bütün tabloyu diyorsanız, uğraşmak istiyorsanız siz bilirsiniz. :)))
İşte size tek tıkla çarpım tablosu!!!


29 Mayıs 2011 Pazar

HTML Metin Hizalama

Web sayfanıza yerleştirmek istediğiniz metin içeriğnin daha güzel görünmesi ve özellikle sayfa tasarımıyla uyumlu olması için metnin uygun bir biçimde hizalanması gerekir. Hizalama işlemi CSS kodları ile yapılır. Hizalama işlemi için metni işaretlemekte kullandığımız herhabgi bir HTML tagının (< div >, < b >, < p > gibi) içinde, "text-align" kodunun parametrelerine "left, right, center ve justify" değerlerinden birini yazmamız yeterli olacaktır. Ben aşağıdaki metinleri < div > tagının içinde hizaladım. İşte size bir hizalama örneği,

< div style="text-align: left; border:solid #333;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.< /div >

"text-align" ile hizalanan metinler şu şekillerde görüntülenir;

text-align:left (sola yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align:center (ortala)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align:right (sağa yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.


text-align: justify (iki yana yasla)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque. Curabitur id lectus nulla, ac mattis quam. Aliquam malesuada feugiat turpis a aliquet. Phasellus faucibus magna lobortis lectus semper vel scelerisque risus hendrerit. Integer tristique eros in augue suscipit tristique. Duis dui felis, vulputate scelerisque rutrum in, cursus in urna. Nam placerat condimentum odio at adipiscing. Curabitur posuere lacus in magna cursus a sagittis est dignissim.

Not :
Metinlerdeki garip yazı dikkatinizi çekmiştir. Örnek metni Lorem Ipsum' dan aldım. Bu da nedir yahu? diyorsanız işte size sitesinden kısa bir açıklama,

"Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur."

Eğer bu kadar bilgi sizi tatmin etmediyse, ayrıntılı bilgi ve örnek yazı almak için Lorem Ipsum dan yararlanabilirsiniz.

25 Mayıs 2011 Çarşamba

Web Sayfasına Button Eklemek


Butonlar web sitelerinin kullanıcı kayıt formlarında ya da üye giriş panellerinde sıklıkla karşılaştığımız HTML form elemanlarıdır. Kendilerine verilen işleve bağlı olarak, tıklandıklarında formdaki ya da paneldeki bilgileri sunucuya iletmekten tutun da kullanıcıyı başka bir HTML sayfasına yönlendirmeye kadar pek çok işi yaparlar. Web sayfalarına buton <input type="button(veya submit") / > tagı ile eklenir. Şimdi bunu bir örnek üzerinde açıklayalım,

<input type="button" value="Gönder" name="buton1" title="Düğmeye bas" onclick="parent.location='http://www.google.com'"/>
< input type="reset" value="sil" name="silgi" title="Temizle"/>

Bu kodlamanın sonucu sayfada şu şekilde görüntülenir.


Son olarak bu tag içindeki parametreleri açıklayalım.

name : Button'u isimlendirmek için kullanılır. Burdan alınan bilgilerin sunucudaki programda işlenmesi için gereklidir.

title : Kullanıcı fare ile buton üzerine geldiğinde görüntülenmesi istenen bilgi mesajı için kullanılır.

value : Buton üstüne yazı yazmak için kullanılır.

Yukarıda turuncu ile işaretlenmiş iki tane parametre var. Birincisinde bulunan onclick="parent.location='http://www.google.com'" ifadesinde onclick ziyaretçinin butona tıklaması olayıdır. "parent.location" ise butona tıklandığında ziyaretçinin belirtilen web sayfasına yönlendirilmesi için kullanılılan javascript kodudur. İkincisi ise type="reset" ile butona form sayfasındaki bilgileri silme özellği kazandırmak için kullanılır.


24 Mayıs 2011 Salı

Blogger'a swf Flash Eklemek

Sitenizde ziyaretçilerinize hoşça vakit geçirtmek için flash oyunlar koymak istiyor. ve karmaşık javascript kodları ile uğraşmak istemiyorsanız < embed / > tagı'nı kullanabilirsiniz.İşte size bunun bir örneği,

< embed src="oyun.swf" height="349" width="425" / >

Burada "src" parametresine swf dosyasının konumunu yazıyoruz. Peki bloguma flash oyun nasıl eklerim dediğinizi duyar gibiyim. Bildiğiniz gibi Blogger swf uzantılı dosyaları eklemeye izin vermiyor. Bu durumda önce swf dosyamızı internette bulacağımız ücretsiz depolama sitelerinden birine(Fileden, swfcabin, googlesites gibi) yüklemekle işe başlıyoruz. Bu herhangi bir ftp sunucusu da olabilir. Sonra bu dosyanın adresini alıyoruz ve "src" parametresinin karşısına yazıyoruz. Böylelikle blog sayfanız görüntülendiğinde oyunun swf dosyası sizin belirttiğiniz adresten sayfanıza yüklenir ve kullanıcı oyunu rahatlıkla oynamaya başlayabilir. Tabi burda yüklenme süresi normal sitelere göre biraz daha uzun olabilir ama oyun bir kere yüklendikten sonra sorunsuz çalışacaktır.

Yok ben yüklemeyle uğraşmak istemiyorum da diyebilirsiniz. Bu durumda bir alternatifiniz daha var. Oyun sitelerinden beğendiğiniz bir oyunun o site üzerindeki konumunu belirleyip adres olarak orayı gösterebilirsiniz. Ancak bu durum anlaşılırsa site sahibi ile aranızda tatsız olaylar gelişebilir. Ben swf dosyamı google sites üzerinde bir adrese yükledim. Google sites Türkiye'de hala yasaklı olabilir bu durumda oyunu göremeyebilirsiniz. Oyunu görmek istiyorsanız ağ bağlantılarınızdan DNS ayarlarınızla oynamanız gerekir.

Size kullanabileceğiniz iki DNS adresi vererek yazımı bitiriyorum.

64.81.79.2
128.107.241.184

Oyun görüntülenmiyorsa DNS olarak bu numaraları girin. İyi eğlenceler...


Web Sayfasına Textbox (Yazı Kutusu) Eklemek

Textboxlar web sitelerinin kullanıcı kayıt formlarında veya üye giriş panellerinde sıkça rastladığımız, üyelerin ya da üye olacak ziyaretçilerin ad, soyad kullanıcı adı, şifre v.b. bigilerini toplamak için kullanılan HTML form elemanlarıdır. Web sayfasına textbox; için < input type="text" / > tagı ile eklenir. Bu tagın genel kullanılış biçimi şu şekildedir,

< input maxlength="40" name="ad" title="Adını Yaz" type="text" value="Kullanıcı Adı" width="150" height="20" / >

Daha iyi anlaşılması açısından bu tag'ın nasıl kullanıldığını bir örnek üzerinde gösterelim.

Kullanıcı Adı : < input type="text" name="ad" value="e-mail adresiniz" title="Kullanıcı Adını Yaz" maxlength="40" width="150" height="20" / > < br/ >
Şifre : < input maxlength="15" name="ad" title="Şifreni Yaz" type="password" value="" width="150" height="20" / >

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir,

Kullanıcı Adı :

            Şifre :

Son olarak bu tag içindeki parametreleri de açıklayalım.

name : Textbox'u isimlendirmek için kullanılır. Burdan alınan bilgilerin sunucudaki programda işlenmesi için gereklidir.

maxlenght : Textbox'a girilecek karakter sayısını kısıtlamak için kullanılır.

height : Kutu yüksekliğini belirlemek için kullnılır.

width : Kutu genişliğini belirlemek için kullanılır.

value : Textbox'a ilk değerini vermek için kullanılır. Buraya yazdığınız yazı kutu içinde görüntülenir. Kullanıcını kutuya herhangi bir değer(ad, soyad bilgisi, şifre gibi)girdiği zaman başlangıç değeri değişir ve yeni değer işlenmek üzere sunucuya gider.

title : Kullanıcı fare ile kutu üzerine geldiğinde görüntülenmek istenen bilgi mesajı için kullanılır.

Not : Verdiğim kod örneğinde turuncu ile işaretlediğim yer dikkatinizi çekmiştir. Eğer "type" parametresine değer olarak "password" girerseniz browser kullanıcının girdiği şifreyi göstermez onun yerine yıldız veya içi dolu dairecikler koyar.