Gravatar Kullanımı


Gravatar
 dünyanın dört bir yanında kullanılan, son zamanlarda wordpress’inde bünyesine gravatar özelliğini dahil etmesi ile dahada popülerleşen evrensel bir avatar sistemidir.. Siteye e-posta adresinizle kayıt olup bir resim yüklüyorsunuz.. Ve gravatar destekleyen tüm sitelerde resminiz e-posta adresinize bağlı olarak gözüküyor.. Gravatar’ın sitesinden resminizi güncellediğinizde diğer tüm sitelerde de ortalama 1 saat içerisinde resminiz güncellenmiş oluyor.

Faydası Ne?

Projelerinizde üye resimleri gereksiz yere sunucunuzda yer kaplamasın.. Biraz daha globalleşmek için bu tür projelere sıcak bakmak gerekir.. Bende bu yüzden prototürk’de gravatar desteğini sunuyorum.. Sizinde sunmanızı tavsiye ederim..

Hangi Dilleri Destekliyor?

Gravatar bir çok programlama dilini destekliyor.. Php’de başta olmak üzere tüm listeye aşağıdaki bağlantıdan ulaşabilirsiniz;
http://tr.gravatar.com/site/implement/

Gravatar PHP Entegrasyonu

Bir e-posta adresine ait gravatar resmini php ile şu şekilde alabilirsiniz;

<?php

// eğer bunu tanımlamaz iseniz gravatar otomatik kendisi bir default resim gösterecektir
$default = "burası e-postaya ait gravatar yok ise gözükece default resim linki";
// gravatar için e-posta adresi
$eposta = "[email protected]";
// avatar boyutu
$boyut = 200;
// gravatar linkini oluşturalım
$gravatar = "http://www.gravatar.com/avatar/" . md5( strtolower( trim( $eposta ) ) ) . "?d=" . urlencode( $default ) . "&s=" . $boyut;
// ve şimdi img etiketi içerisinde resmi gösterebiliriz
echo "<img src='{$gravatar}' alt=''>"';

?>

Evet gördüğünüz gibi bu kadar basit 🙂 Gravatar için söylenebilecekler bu kadar, kullanmanız dileğiyle.. Kolay gelsin.

Fareyi Takip Eden Gizli Reklam Nasıl Yapılır?

Bu konuyu yazsam mı yazmasam mı bilemedim.. Normal şartlarda böyle şeyleri hiç sevmem, ama gerçekten iyi bir projeniz var ve hak ettiğiniz ilgiyi göremiyorsanız böyle şeylere baş vurabilirsiniz.. Tabi banlanırsanız ben karışmam  Aslında mantık o kadar zor değil.. Öncelikle bir reklam alanı olmalı.. Yani;

<div class="ads">
	.. reklam kodları ..
</div>

Evet şimdi CSS ile diğer nesnelerden bağımsız hale getirelim;

.ads {
	position: absolute;
	top: 0;
	left: 0;
	display: none
}

Evet şimdide jquery kütüphanesini sayfamıza dahil ettikten sonra pencerede fare hareket ettiğinde bunu yakalayıp reklam divini konumlandıralım..

$(function(){
	$(window).on('mousemove',function(e){
		var height = ($('.ads').height()/2),
		width = ($('.ads').width()/2);
		$('.ads').css({
			top: e.pageY - width,
			left: e.pageX - height
		}).show();
	});
});

Şimdi reklama tıklandığını yakalayamıyoruz, ancak bunun için basit bir işlem yapabiliriz.. Örneğin 7 saniye sonra bir fonksiyon çalıştırıp reklam divini kapatabiliriz, tıklamasa bile kapanır.. Yani jquery kodlarına şunu ilave edelim;

setTimeout(function(){
	$('.ads').remove();
}, 7000);

Evet şimdi son olarak reklam aldığınız sitenin sizi hemen banlamaması için basit çözümler getirelim.. Örneğin günde 1 kez gösterelim bu fare reklamını.. Cookie oluşturalım.. Yani kısaca yukarıda yazdığımız tüm kodları aşağıdaki kodlar içerisine alalım..

<?php if ( !isset($_COOKIE[md5('ads')]) ){ ?>
.. diğer kodlar buraya ...
<?php setcookie(md5('ads'), true, time() + (60 * 60 * 24)); } ?>

Sonuç? Artık sitenize bir ziyaretçi girdiğinde eğer 7 saniye içinde fare ile herhangi bir yere tıklar ise otomatik reklamınıza tıklamış olacak.. Ve 1 gün boyunca bir daha bu reklam gözükmeyecek.. (Tabi cookie’ler aktif olması gerekir tarayıcıda)..

Not: İnternet Explorer’da feci sıkıntıları var, en kötü ihtimalle ie’den girilmiş ise bu işlemi yaptırmayınız  

Böyle Reklam Koyanlardan Nasıl Kurtulurum?

Tarayıcı eklentisi olan AdBlock kurarak 🙂

Reklamlardan Kurtulanları Nasıl Tespit Ederim?

Çektiğim şu video’ya göz atarak tespit edebilirsiniz;
http://www.erbilen.net/ders/javascript-ile-adblock-tespiti

Twitter Rest API 1.1 ile Son Tweetleri Çekmek

Twitter’da nasıl uygulama oluşturacağınızı bilmiyorsanız aşağıdaki makaleye göz atabilirsiniz;
http://www.prototurk.com/article/twitter-039-da-uygulama-olusturmak/176

twitteroauth sınıfını indirebileceğiniz github adresi;
https://github.com/abraham/twitteroauth

Twitter API döküman sayfası için bağlantı;
https://dev.twitter.com/docs/api/1.1

Nedir bu OpenSearch?

Merhaba arkadaşlar, öncelikle sizlere opensearch’ü kısaca tanıtayım..

OpenSearch, arama sonuçlarını kullanıcıya daha basit sunabildiğimiz bir standart olarak kabul edilmektedir.. Google’da başta olmak üzere facebook, twitter, wikipedia, ebay, amazon gibi büyük web sitelerinin tamamı bunu kullanmaktadır.. Zaten kullanmamak için bir sebebimiz yoktur 🙂Merhaba arkadaşlar, öncelikle sizlere opensearch’ü kısaca tanıtayım..

OpenSearch, arama sonuçlarını kullanıcıya daha basit sunabildiğimiz bir standart olarak kabul edilmektedir.. Google’da başta olmak üzere facebook, twitter, wikipedia, ebay, amazon gibi büyük web sitelerinin tamamı bunu kullanmaktadır.. Zaten kullanmamak için bir sebebimiz yoktur 🙂

İlgili Tüm Detaylar İçin;
http://www.opensearch.org/Home

Sitemizde Nasıl Kullanabiliriz?

İlk olarak yapmamız gereken bir opensearch.xml dosyası oluşturmak ve içerisine şu kodları yazarak kayıt etmektir;

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>$prototürk</ShortName>
   <Image width="16" height="16">http://www.prototurk.com/favicon.ico</Image>
   <Url type="text/html" template="http://www.prototurk.com/?q={searchTerms}" />
</OpenSearchDescription>

Burada kodların kısaca ne olduğunu belirtelim;

ShortName – Kısa isim.. Örneğin (prototurk.com gibi..)
Image – görsel belirtmek için kullanılıyor.. Biz burada favicon belirttik.
Url – Arama adresi tanımlanıyor.

Bunu ana dizininize attıktan sonra head etiketleri arasına şu kodu eklemeniz gerekiyor;

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="$prototürk" />

Eğer bunuda yaptıysanız, artık chrome, firefox, internet explorer gibi tarayıcılarda sitenizde arama yapmak çok daha kolay bir hal almış demektir..

WYSIWYG Editör Yapımı

Öncelikle WYSIWYG nedir, bunu öğrenelim..

WYSIWYG, uzun adıyla What You See IWhat You Get kısaltması olup türkçe karşılığı “Ne Görüyorsan Onu Alırsın” dır..
Bunda olay, editörde yazdığınızı çıktı aldığınızda neredeyse birebir benzerlikte olmasıdır.. [Kaynak: Wikipedia]

Bir nesnenin düzenlenebilir olması için contenteditable niteliği eklenmelidir..

<div style="width: 100px; height: 100px; border: 1px solid #ddd" contenteditable="true">bu yazı düzenlenebilir..</div>

Düzenlenebilir nesneye komut uygulamak için execCommand() metodu kullanılır.. Mevcut komutların tüm listesini aşağıdaki bağlantıdan görüntüleyebilirsiniz;
https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands

Xampp’da Port Değişimi

Ben sunucu programı olarak Xampp’ı kullanıyorum.. Ve çoğu zaman 80 portunu kullanan bir başka program açık olduğundan localhost’u başlatabilmek için önce o programları kapatmak zorunda kalıyorum 🙂 Ancak bundan sıkıldığım için xampp’da nasıl port değiştirebileceğimizi biraz araştırdım, öğrendim ve sizlerede göstermek istiyorum..

Yapılacaklar;

1) [XAMPP_KURULU_DIZIN]/etc/httd.conf dosyasını herhangi bir editör ile açın.
2) Daha sonra Listen 80 diye aratın.. Buradaki 80 değerini herhangi bir sayı ile değiştirin, bu sizin yeni portunuz olacak.. Örneğin Listen 31 yapın.
3) Ve tekrar aynı dosyada ServerName diye aratın.. Muhtemelen onun değeri localhost ya da localhost:80 olacaktır.. Siz bunu 2. maddede belirlediğiniz port olarak değiştirin.. Yani ServerName localhost:31şeklinde.
4) Xampp’ı yeniden başlatın ve servisleri çalıştırın.
5) http://localhost:31 ya da http://127.0.0.1:31 şeklinde localhostunuza giriş yapabilirsiniz 🙂

Facebook Video Bilgilerini Çekmek (FQL)

Facebook Sorgu Dili (FQL) ile facebook’da herkese açık videoların tüm bilgilerini kolay bir şekilde çekebilirsiniz.. Ben bu dersimde sizlere videoya ait orjinal kaynak linkini, hq kaynak linkini, video resmini ve video başlığını çekerek küçük bir örnek hazırladım.. Yararlı olması dileğiyle..

Facebook Php SDK Kütüphanesi

FQL’de sorgu yapmak için öncelikle facebook’un php sdk kütüphanesini indirip sayfamıza dahil etmemiz gerekir.. İndirmek için aşağıdaki bağlantıyı kullanabilirsiniz;
https://github.com/facebook/facebook-php-sdk/archive/master.zip

Facebook Uygulama Oluşturmak

FQL’de sorgu yapmak için birde facebook uygulaması oluşturmanız gerekiyor.. Uygulama oluşturmak için aşağıdaki bağlantıyı kullanabilirsiniz;
https://developers.facebook.com/apps

FQL Hakkında

FQL yani uzun adıyla Facebook Query Language (Facebook Sorgu Dili), facebook veritabanlarında sorgu yapmamızı sağlayan bir sorgu dilidir. SQL’e çok benzer, sadece facebook üzerinde sorgu yapmak için kullanılır. Facebook’da hangi tablolarda sorgu yapabileceğiniz görmek için aşağıdaki bağlantıyı kullanabilirsiniz;
https://developers.facebook.com/docs/reference/fql/

İNDİR

Derste hazırladığımız örneğin kaynak dosyalarına aşağıdaki bağlantıdan ulaşabilirsiniz;
http://yadi.sk/d/5Zo9ab6C4LbSc

Css, JavaScript ve Resim Dosyalarında Tarayıcı Önbelleği

Bildiğiniz gibi tarayıcı bu dosyaları sürekli okumamak için önbelleğe alıyor.. Dosyalarda bir değişiklik yapsak bile, kullanıcının bunu görebilmesi için ya bir süre beklemesi gerekiyor ya da ctrl + shift + r ile önbelleği temizleyip yenilemesi gerekiyor.. Hal böyle olunca çoğu kullanıcı yaptığınız güncellemleri çok geç görüyor buda projede sorunlara yol açabiliyor.. Bu yüzden küçük bir hile yaparak bu sorunu çözebiliriz.. Normal şartlarda çağırdığımız css, js ya da resim dosyaları şu şekildedir;

<!-- Style -->
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
<!-- Script -->
<script type="text/javascript" src="/script.js">
<!-- Resim -->
<img src="/resim.jpg" alt="" />

Şimdi bu kodları şöyle değiştirelim;

<!-- Style -->
<link rel="stylesheet" href="/style.css?v=1" type="text/css" media="screen" />
<!-- Script -->
<script type="text/javascript" src="/script.js?v=1">

<img src="/resim.jpg?v=1" alt="" />

Sonuna getirdiğimiz ?v=1 ifadesi illaha bu şekilde tanımlanmak zorunda değil.. Yani ?a=1 gibi de tanımlanabilir.. Ama bu çoğu sitenin kullandığı genel bir tanım olduğu için bende bu şekilde kullanıyorum.. Bir nevi versiyonu temsil ediyor 🙂 Böyle kaydettiğimizde, artık bu dosyalarda herhangi bir değişiklik yaptığımızda kullanıcı anlık olarak görecektir.

Güncelleme

Eğer bu şekilde doğru sonucu vermiyorsa php’nin time fonksiyonunu kullanabilirsiniz.

<!-- Style -->
<link rel="stylesheet" href="/style.css?v=" type="text/css" media="screen" />
<!-- Script -->
<script type="text/javascript" src="/script.js?v="></script>
<!-- Resim -->
<img src="/resim.jpg?v=" alt="" />

Htaccess ile WWW Kaldırma / Ekleme

Merhaba arkadaşlar, benim her zaman problem yaşadığım bir konudur bu.. Her projemde de bunu uygularım.. Örneğin site adresini www ile belirlemişimdir.. Ancak www olmadan girince de site açıldığı için, ajax dosyamın yolu www ile belirlendiği için ajax’lar çalışmaz.. Bazı sunucularda www ile giriş yapıp, www’süz siteyi açtığında sanki giriş yapmamış gibi gözükür vs.. Bu tür sorunların önüne geçmek için ya www ile girmesini sağlayacağız kullanıcının ya da hiç www kullanmadan girmesini.. Nasıl yaparız?

Eğer anadizinde bir htaccess dosyanız varsa onu açın ya da bir tane oluşturun ve şunları ekleyin;

RewriteEngine on
RewriteCond %{HTTP_HOST} ^siteadi\.com [NC]
RewriteRule ^(.*)$ http://www.siteadi.com/$1 [L,R=301]

Yukarıdaki örnekte, nasıl girerse girsin her zaman www olarak yönlenecek.. Örn: ogretiyor.com olarak girin sizi www.ogretiyor.com’a yönlendirdiğini görebilirsiniz..

Bunun tam tersini nasıl yaparız? Yani www ile girse bile www ekini kaldıracak.. O zaman kodu şöyle değiştiririz;

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.siteadi\.com [NC]
RewriteRule ^(.*)$ http://siteadi.com/$1 [L,R=301]

Evet artık böyle bir problemimiz kalmadı, kolay gelsin 🙂

Notepad++ Teması (xHTML/CSS)

Merhaba arkadaşlar, kod yazan çoğu kişi notepad++ programını bilir, muhtemelen sıkça da kullanır.. Bende sürekli olarak notepad++ programını kullanan biri olarak, hem farklı olacağını düşündüğüm için hemde o kadar emeği geçtiği için notepad++ temasını css’e aktardım 🙂 Şuan prototürk’de bu temayı kullanıyorum..

CSS halini sizlerle de paylaşıyorum.. İstek olursa DLE halini tamamen bitirdiğimde paylaşabilirim..

Ekran Görüntüleri;

Notepad++ Teması (xHTML/CSS)
Notepad++ Teması (xHTML/CSS)
Notepad++ Teması (xHTML/CSS)
Notepad++ Teması (xHTML/CSS)

Konu yanındaki – butonlarından kapanabiliyor.. Son yorumlarda draggable olduğu için, istediğiniz yere tutup sürükleyebiliyorsunuz.. Şimdilik bu kadar 🙂 Üst butonları süs olsun diye koydum, belki geliştirip v2 ile birlikte daha güzel bir şeyler yapabiliriz..

İndirin; (Github)
https://github.com/tayfunerbilen/notepad_plus_plus
(İndirmek için ZIP kısmına tıklamanız yeterlidir.)WordPress Entegresini yapacak duyarlı insanlar aranıyor 🙂 Eğer entegre yapan olursa, konu altında yorum olarak belirtirlerse konuda dahil edebiliriz, teşekkürler.