Coders' Grave http://codersgrave.com Tue, 31 Jan 2012 10:30:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 T-ercüme.com: Yeni Sitehttp://codersgrave.com/1440-t-ercume-com-yeni-site/ http://codersgrave.com/1440-t-ercume-com-yeni-site/#comments Tue, 31 Jan 2012 10:14:53 +0000 Sevil YILMAZ http://codersgrave.com/?p=1440 Yeminli tercüman Taner YILMAZ’ın kişisel web sitesi.

Tasarım, HTML5/CSS3: T-ercume.com

T-ercüme • Türkçe - İngilizce Çeviri. English - Turkish TranslationT-ercüme • Türkçe - İngilizce Çeviri. English - Turkish Translation - What I DoT-ercüme • Türkçe - İngilizce Çeviri. English - Turkish Translation - AboutT-ercüme • Türkçe - İngilizce Çeviri. English - Turkish Translation - SubtitlesT-ercüme • Türkçe - İngilizce Çeviri. English - Turkish Translation - Contact

]]> http://codersgrave.com/1440-t-ercume-com-yeni-site/feed/ 1 Facebook Friend Selectorhttp://codersgrave.com/1336-facebook-friend-selector/ http://codersgrave.com/1336-facebook-friend-selector/#comments Sun, 01 Jan 2012 09:00:23 +0000 Sevil YILMAZ http://codersgrave.com/?p=1336 Continue reading →]]> Facebook Friend Selector is a friend selection assistant for your Facebook application or your website that is equipped with Facebook Connect. This tool returns you your friends ID’s only and you use them as you please. It was built using the jQuery library.

Demo & Download

Facebook Friend Selector Color BlueFacebook Friend Selector Search ResultsFacebook Friend Selector Show Count

  • Ability to set a maximum number for friend selection
  • Exclude as many people as you want from the list
  • Ability to show random friends list
  • Ability to set maximum friends on list
  • Search
  • Facebook invite option
  • Overlay color selection
  • Overlay opacity selection
  • Ability to hide the overlay with a mouse click outside the box or a ESC key press
  • Centers the box on window resize
  • Ability to close the box onsubmit
  • Ability to enable or disable to display the number of selected people in the box
  • Seven color options (easily customizable)
  • Adaptability of texts to any desired language
  • Ability to decide what to do onstart
  • Ability to decide what to do onclose
  • Easy integration
]]> http://codersgrave.com/1336-facebook-friend-selector/feed/ 19 PHP ile Twitter Authenticationhttp://codersgrave.com/1279-php-twitter-connect/ http://codersgrave.com/1279-php-twitter-connect/#comments Tue, 06 Dec 2011 10:41:32 +0000 Önder Yüceur http://codersgrave.com/?p=1279 Continue reading →]]> Twitter yakın zamanda basic authentication sisteminden open authentication sistemine geçmişti. Bu yazıda Twitter’ın REST Api’sindeki kaynaklara erişim için gerekli olan authentication sistemini görelim.

Öncelikle bunun için Twitter’ın PHP için önerdiği kütüphanelere Twitter Libraries adresinden erişebilirsiniz. Ben yazımda TwitterOAuth kütüphanesini kullanacağım. İlk olarak bunu indirmenizi isteyeyim.

Önemli Not 1: Aşağıdaki örnek Framework’lerden soyutlanmış bir örnektir. Sizin bir Framework’ünüz varsa kullanımınızı oraya göre düzenlemeniz kolay olacaktır.

Önemli Not 2: Bu anlatımda sizin Twitter hesabındanızdan bir adet uygulama açıp gerekli erişim anahtarlarına sahip olduğunuzu düşünüyorum. Uygulama oluşturmak için Twitter Apps sayfasına gidebilirsiniz.

Aşama 1 – Twitter kütüphanemizi indirelim

TwitterOAuth adresindeki kütüphayi indirelim

Aşama 2 – Proje dosyalarını oluşturalım

Aşağıdaki dosyaları projenize ekleyin. Buradaki Twitter dizini içine github’dan indirdiğiniz TwitterOAuth kütüphanesi içindeki tüm dosyaları kopyalayın.

|– project
|     |– Twitter (TwitterOAuth Kütüphenesi)
|     `index.php (yeni dosya)
|     `connect.php (yeni dosya)
|     `callback.php (yeni dosya)

Aşama 3 – index.php dosyamıza aşağıdakileri ekleyelim

Her bir satırın üzerindeki açıklamalar aşamaları anlatmaktadır.

<?php

session_start();

// Twitter kütüphanesinden gerekli iki dosyayı(oauth class ve config)
// require_once ile script'e dahil ediyoruz.
require_once('Twitter/twitteroauth/twitteroauth.php');
require_once('Twitter/config.php');

// callback.php'de oluşacak olan access_token SESSION değerini
// farklı bir değişkene aktarıyoruz.
$sesAccessToken = $_SESSION['access_token'];

// Twitter oturumunun açık olup olmadığı bilgisini tutan
// session değerlerinin varolup olnadığının kontrolünü yapıyoruz.
// Eğer yoksa connect.php'ye yonlendiriyoruz
if (empty($sesAccessToken) || empty($sesAccessToken['oauth_token']) || empty($sesAccessToken['oauth_token_secret'])) {
  header('Location: /connect.php');
}

// TwitterOAuth sınıfını gerekli başlangıç değerlerini vererek connection
// nesnesi oluşturuyoruz. Buradaki CONSUMER_KEY ve CONSUMER_SECRET sabit
// değerlerini Twitter/config.php dosyasından ayarlıyoruz.
// Bu değerleri dev.twitter.com adresindeki uygulamalar bölümünde ya uygulama
// açarak ya da mevcut uygulamaların detay bilgileri arasından alabilirsiniz.
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $sesAccessToken['oauth_token'], $sesAccessToken['oauth_token_secret']);

// Ve yaratılan $connection nesnesinin get metodunu Twitter REST Api'ye
// ulaşmak için kullanıyoruz. Burada login olan kullanıcının profil bilgileri
// çekilmektedir.
$content = $connection->get('account/verify_credentials');

?>

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Coders' Grave | Twitter Authentication Demo</title>
</head>
<body>
Twitter bağlantısı başarıyla sağlandı.<br><br>
Merhaba <strong><?php echo $content->name ?></strong>
</body>
</html>

Aşama 4 – callback.php dosyamıza aşağıdakileri ekleyelim

Yine her bir satırın üzerindeki açıklamalar aşamaları anlatmaktadır.

<?php

session_start();

// Twitter kütüphanesinden gerekli iki dosyayı(oauth class ve config)
// require_once ile script'e dahil ediyoruz.
require_once('Twitter/twitteroauth/twitteroauth.php');
require_once('Twitter/config.php');

// Tw uygulama izin ekranından izin ver butonuna tıklandıktan sonra
// önceden bildirdiğimiz callback sayfasına oauth_verifier ve oauth_token
// parametreleriyle birlikte döner. Yani callback.php?oauth_token=xxx&oauth_verifier=yyy
// bu parametrelerden oauth_token anhatarının olup olmadığı ve yine bu anahtarla
// SESSION globalinizdeki oauth_token anahtarının eşit olup olmadığını
// kontrol eder. Eğer koşul sağlanmıyorsa ise login.php'ye yönlendirir.
if (isset($_GET['oauth_token']) && $_SESSION['oauth_token'] !== $_GET['oauth_token']) {
  header('Location: login.php');
}

// TwitterOAuth sınıfını gerekli başlangıç değerlerini vererek connection
// nesnesi oluşturuyoruz. Buradaki CONSUMER_KEY ve CONSUMER_SECRET sabit
// değerlerini Twitter/config.php dosyasından ayarlıyoruz.
// Bu değerleri dev.twitter.com adresindeki uygulamalar bölümünde ya uygulama
// açarak ya da mevcut uygulamaların detay bilgileri arasından alabilirsiniz.
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);

// sayfamıza twitter tarafından parametre geçilen oauth_verifier anahtarını
// $access_token isimli bir değişkene aktarıyoruz. Bu bizim twitter
// tarafından şahsımıza verilen tekil bir doğrulama anahtarıdır.
$access_token = $connection->getAccessToken($_GET['oauth_verifier']);

// Bu anahtarı SESSION globaline yazıyoruz. Sebebi ise uygulamaya bağlı olup
// olmadığımızı ve REST Api kullanımında gerekli yerlerde bu anahtarı twitter'ın
// bizden istiyor oluşudur.
$_SESSION['access_token'] = $access_token;

// Bir üst satırda artık elimizde bize ait bir SESSION oluştuğuna göre
// aşağıdakilere ihtiyacımız kalmadı ve bunları temizleyelim.
unset($_SESSION['oauth_token']);
unset($_SESSION['oauth_token_secret']);

// $connection nesnesinden HTTP RESPONSE eğer 200 dönüyorsa herşey
// yolunda demektir. Artık istediğimiz sayfaya yönlendirebiliriz.
if ($connection->http_code == 200)
  header('Location: index.php');
// Eğer yolunda değilse uygulamanın size verdiği anahtarlarda bir yanlışlık
// olabilir veya izin sonrası dönen oauth_token anahtarının tekrar kullanılmak
// istenmesinden olabilir. oauth_token anahtarı bu arada tek kullanımlıktır.
else
  header('Location: login.php');

?>

Aşama 5 – connect.php dosyamıza da aşağıdakileri ekleyelim

Ve yine her bir satırın üzerindeki açıklamalar aşamaları anlatmaktadır.

<?php
session_start();

// Twitter kütüphanesinden gerekli iki dosyayı(oauth class ve config)
// require_once ile script'e dahil ediyoruz.
require_once('Twitter/twitteroauth/twitteroauth.php');
require_once('Twitter/config.php');

// Burada farkındaysanız 3. ve 4. parametreler verilmemiş.
// Çünkü henüz o parametrelere atananacak olan anahtarlara
// sahip değiliz. Onlara sahip olmak için Twitter'a login
// isteğinde bulunmamız gerek. Yine burda $connection nesnesi
// oluşturuyoruz.
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);

// Burada twitter'a login isteğinde bulunmamız için şart
// koşulan request token değerlerini üretiyoruz.
// Parametrede verilen OAUTH_CALLBACK config.pgp dosyamızdan
// ayarlanmalıdır.
$request_token = $connection->getRequestToken(OAUTH_CALLBACK);

// Oluşan anahtarları tekrar kullanabilmek için oturuma yazıyoruz.
$_SESSION['oauth_token'] = $token = $request_token['oauth_token'];
$_SESSION['oauth_token_secret'] = $request_token['oauth_token_secret'];

// Eğer connection response kodu 200 ise herşey yolunda ve connect
// işlemini sağlayacak olan url'i isteyebiliriz.
if ( $connection->http_code == 200 ){
  // Giriş için link, buton veya herhangi bir şekilde twitter'a login
  // edeceğimiz bir sayfa gerekecek. Hemen alttaki getAuthorizeURL
  // metodu bizim için twitter uygulamamıza bağlantı arayüzü sunan bir
  // url üretecek ve siz bunu istediğiniz gibi kullanabileceksiniz.
  $url = $connection->getAuthorizeURL($token);
  echo '<a href="' . $url . '">Twitter Connect</a>';
}
else{
  echo "Uygulama ayarlarınızı kontrol edin";
}
?>

Oluşturduğumuz projeyi indirmek için tıklayınız.

- Bu dosyaların hepsi projemde hazır, bitti
- Kendime göre daha düzenli hale getirdim
- Ben framework kullanıyorum ona göre düzenledim diyenlerden herhangi biriyseniz. index.php’yi browserdan tetikleyelim ve çalıştıralım bakalım neler oluyor.

Yazını başında da dediğim gibi öncelikle Twtitter hesabınıza bağlı bir uygulama olmalı. Bu bağlantıyı sadece bir uygulama üzerinden gerçekleştirebilirsiniz.

Selamlar…

]]> http://codersgrave.com/1279-php-twitter-connect/feed/ 9 Cufon’la Sağdan Sola Yazmakhttp://codersgrave.com/1242-cufon-sagdan-sola-yazmak/ http://codersgrave.com/1242-cufon-sagdan-sola-yazmak/#comments Tue, 27 Sep 2011 09:06:19 +0000 Sevil YILMAZ http://codersgrave.com/?p=1242 Continue reading →]]> Birkaç ay önce bir Facebook uygulamasında hem Cufon kullanıp hem de bunu sağdan sola olacak şekilde yapmak durumunda kaldım. Bunu yaparken Cufon’un RTL desteklemediğini öğrendim. İleriki zamanlarda sağdan sola yazım Cufon tarafından desteklenecekmiş ama fazla vaktim olmadığı için bir javascript çözümü buldum.

Bu kod sayfa yüklenirken yavaşlamaya sebep olabilir. Ara ara da font değişimi sırasında yaşanan geçişler görünebilir. Ama eğer sayfanın büyük bir bölümünde Cufon kullanmıyorsanız sorun olmayacaktır.

Cufon'la Sağdan Sola Yazmak

HMTL

Sağdan sola yazım için “reverse” isimli bir sınıf kullandım.  Bunu herhangi bir elemente uygulayabilirsiniz.

<span class="reverse">Lorem ipsum dolor sit amet</span>

JS

$('.reverse').wrapInner('<bdo dir=ltr></bdo>');
$('bdo').each(function()    {
  var word = $(this).text();
  var splitText = word.split('');
  var reversedText = splitText.reverse();
  var newText = reversedText.join('');
  $(this).text(newText);
});
Cufon.replace('bdo');

Önce eğer dosyanız sağdan sola tanımlanmış ise bunu soldan sağa yapmak için “dir=ltr” yazıldı. Sonra karakterleri ters çevirmek için bir takım jQuery kodu kullanıldıktan sonra Cufon yenilendi. Kodun çalışması için sayfaya jQuery, Cufon ve kullandığınız Cufon fontlarını eklemeyi unutmayın.

Örnek

Kaynaklar

Using Cufón with Right-To-Left text

]]> http://codersgrave.com/1242-cufon-sagdan-sola-yazmak/feed/ 0 PHP Developer Aranıyorhttp://codersgrave.com/1226-php-developer-araniyor/ http://codersgrave.com/1226-php-developer-araniyor/#comments Tue, 06 Sep 2011 08:29:05 +0000 Sevil YILMAZ http://codersgrave.com/?p=1226 Continue reading →]]> İş tanımı:
Çoğunlukla web tabanlı işlerde çalışmak üzere takımımıza “PHP Developer” arıyoruz.

Gereken Özellikler:

  • Daha önceden PHP ve  açık kaynak “framework”ler ile proje geliştirmiş,
  • Veritabanına hakim,
  • HTML, CSS, JavaScript, Ajax hakkında bilgi sahibi,
  • Gelişime açık,
  • Takım çalışmasına uyumlu

Başvurularınızı bu adrese gönderiniz: info[at]urbsz.net

]]> http://codersgrave.com/1226-php-developer-araniyor/feed/ 0 Google – Çoklu Oturum Açmayı Etkinleştirmehttp://codersgrave.com/1187-google-coklu-oturum-acmak/ http://codersgrave.com/1187-google-coklu-oturum-acmak/#comments Fri, 08 Jul 2011 18:10:44 +0000 Sevil YILMAZ http://codersgrave.com/?p=1187 Continue reading →]]> Biliyorsunuz bir süre önce Google kullanıcı hesaplarını birleştirdi. Artık gmail.com’dan direk Google Apps mail adresinize giriş yapabiliyorsunuz.
Örnek: Hem codersgrave.com hem de çalıştığım şirket (urbsz.net) Google webmail servisini kullanıyor. Google bütün ayrı hesapları tek bir havuzda birleştirdiği için direk gmail.com’a sevil[at]boşcodersgraveboş.com ya da sevil[at]boşurbszboş.net yazarak giriş yapabiliyorum.

Ama bu durumda diğer Google hesabınızdan çıkmanız gerekiyor. Bu sorunu çözmek için Google çoklu oturum açma (multiple sign-in) seçeneği sunuyor. Tabi bazı kısıtlamalarla. Ayrıntılar aşağıdaki adreste:
http://www.google.com.tr/support/accounts/bin/answer.py?hl=tr&answer=181599

“Multiple sign-in“i aktif etmek için: https://www.google.com/accounts/MultipleSessions adresine gidip ya da aşağıdaki görselleri takip edip işlemleri gerçekleştirebilirsiniz.

Google Enabling Multiple Sign-in 1
1. Üstteki siyah bardan eposta adresinize tıklayıp ardından Hesap Ayarları (Account Setting)’a tıklamalısınız.
2. Çıkan ekrandaki Çoklu oturum (Multiple sign-in) kısmında Kapalı (Off) yazıyorsa yanındaki Düzenle (Edit) bağlantısına tıklıyorsunuz.

Google Enabling Multiple Sign-in 2
3. Bir sonraki ekranda Aç (On) radio butonuna tıklayıp bütün şıkları işaretliyorsunuz (Bu şıklar çoklu oturumun neleri kapsadığından bahsediyor özetle; siz de onları anladığınızı belli etmek için işaretliyorsunuz).
4. Sonra da Kaydet (Save) butonuna basıyorsunuz.

Böylece bu hesabınız için işlemleri gerçekleştirmiş oldunuz. Bunu bütün hesaplarınız için tek tek yapmalısınız. Şimdi gelelim hesaplar arasında nasıl geçiş yapacağınıza.

Google Enabling Multiple Sign-in 3
Hesap adresinizin yazdığı yere tıklayıp oradan da Hesap değiştir (Switch account)’a tıklıyorsunuz.

Google Enabling Multiple Sign-in 4
Başka bir hesapta oturum açın (Sign in to another account)’a tıklıyorsunuz.

Google Enabling Multiple Sign-in 5
Giriş yaptıktan sonra geçiş yapmak istediğiniz hesabınıza tıklıyorsunuz. Böylece diğer hesaba geçiş yapmış oluyorsunuz.

Çoklu oturum açtığınız zaman Çevrimdışı Gmail ve Çevrimdışı Takvim gibi uygulamaları kullanamayacaksınız. Çoklu oturumu iptal etmek için yine hesap ayarlarına gidip aynı yerden kapatabilirsiniz.

]]> http://codersgrave.com/1187-google-coklu-oturum-acmak/feed/ 1 Focus border’ı silmekhttp://codersgrave.com/1057-input-focus-border-sil/ http://codersgrave.com/1057-input-focus-border-sil/#comments Thu, 16 Jun 2011 15:35:46 +0000 Sevil YILMAZ http://codersgrave.com/?p=1057 Continue reading →]]> Bir input(text, password v.s.) ya da bir textarea‘ya tıkladığınız zaman tarayıcılarda varsayılan olarak tıkladığınız elementlere çerçeve ekler. Firefox ve Internet Explorer‘da çok belirgin olmasa da Webkit tabanlı tarayıcılarda (Chrome, Safari, Konqueror) sarı kalın bir çerçeve ile kendini belli eder. Bazı tasarımlarda bu istenmeyen bir durumdur. Özellikle input, textarea stili için background özelliği kullanılıyorsa. Ben çoğunlukla varsayılan dışında stiller kullandığım için bu özelliği direk reset.css‘e ekledim.

Webkit Focus Border

Bu çerçeveden kurtulmak için input, textarea focus‘u için CSS outline özelliğini kullanılabilir. Hatta istenirse select için de kullanılabilir.

input:focus,
textarea:focus,
select:focus {
  outline:none
}

Yukarıda dediğim gibi bu sadece özel durumlar için kullanılması gereken bir kod. Stil dosyasına ekledikten sonra unutup gidilecek birşey değil. Sonra “Niye çerçeve çıkmıyor?” diye aranmayın.

]]> http://codersgrave.com/1057-input-focus-border-sil/feed/ 2 Facebook Graph API ve Access Tokenhttp://codersgrave.com/1023-facebook-graph-api-ve-access-token/ http://codersgrave.com/1023-facebook-graph-api-ve-access-token/#comments Fri, 03 Jun 2011 22:43:43 +0000 Önder Yüceur http://codersgrave.com/?p=1023 Continue reading →]]> Open Authentication 2.0 kullanan nadir sistemlerden Facebook, bir arkadaşımın da dediği gibi önceden yapması gereken birşeyi yine sonradan yaptı ve graph api üzerinde access_token anahtarını bazı nesneler üzerinde zorunlu hale getirdi.

İşte o zorunlu olan önemli nesnelerden bazıları;

  • User
  • User/feed
  • User/friends
  • User/posts
  • Photo
  • Photo/comments
  • Photo/likes
  • Photo/picture
  • Photo/tags
  • Status Message
  • Status Message/comments
  • Status Message/likes

Bir çok dil için sağlanan güncel Facebook SDK’lar access token anahtarını sağlayabiliyor.

PHP Facebook SDK’da;

require '/sdk/facebook.php';
$facebook = new Facebook(array(
'appId'  => 'hhhhhhhhhh',
'secret' => 'mmmmmmmmmmmmmmm',
));

$facebook->getAccessToken();

C# Facebook SDK’da;

FacebookApp app = new FacebookApp();
String AccessToken = app.Session.AccessToken;

Bunların dışında kendinize özgü Facebook SDK yazmışsanız access_token anahtarını almanın yolu aşağıdaki linktedir.

http://developers.facebook.com/docs/authentication/

Gelelim access_token anahtarının kullanımına. Bu anahtarı bir şekilde elde etmeyi başarırsanız aşağıdaki örneklerde olduğu gibi kullanmanız yetecektir.

Profil Bilgilerimi Getir

$me_profile = $facebook->api('/me?access_token=xxxxxxxxxx');

Arkadaşlarımı Getir

$me_profile = $facebook->api('/me/friends?access_token=xxxxxxxxxx');

Facebook değiştirdi biz düzelttik. Facebook değiştiriyor biz düzeltiyoruz ve Facebook gene değiştirecek biz gene düzelteceğiz. Selametle…

]]> http://codersgrave.com/1023-facebook-graph-api-ve-access-token/feed/ 15 Twitter – Facebook Rekabeti: “Follow” butonuhttp://codersgrave.com/1010-twitter-follow-butonu/ http://codersgrave.com/1010-twitter-follow-butonu/#comments Thu, 02 Jun 2011 09:52:16 +0000 Sevil YILMAZ http://codersgrave.com/?p=1010 Continue reading →]]> Twitter geçtiğimiz Mayıs ayının sonunda “Follow” butonunu duyurdu. Kimileri Facebook’un “Like” butonuna rakip olarak gördüğü “Follow” butonu şu an için çok farklı amaçlara hizmet ediyor. Twitter ilerde aynı zamanda içeriği de takip etme gibi bir durum geliştirirse, işte o zaman rakip görülmeye başlanabilir. Ama şu anda ikisi farklı kulvarlarda.

Twitter Follow butonu ile ilgili ayrıntılı bilgiye bu adresten ulaşabilirsiniz.

]]> http://codersgrave.com/1010-twitter-follow-butonu/feed/ 0 Yeni “Twitter’da Paylaş” Bağlantısıhttp://codersgrave.com/1000-twitterda-paylas-baglantisi/ http://codersgrave.com/1000-twitterda-paylas-baglantisi/#comments Wed, 25 May 2011 20:04:41 +0000 Sevil YILMAZ http://codersgrave.com/?p=1000 Continue reading →]]> Twitter geçenlerde “paylaş” bağlantısını değiştirdi. Yeni bağlantı şöyle oldu:

http://twitter.com/intent/tweet?text=Başlık&url=http://siteadı/&via=kimin_aracılığıyla

Yeni bağlantıdan anlaşıldığı gibi:
text = Başlık
url = Site Adresi
via = Kimin Aracılığıyla

“via” kısmı isteğe bağlı olarak kullanılabilir. Yani sitenize ait bir Twitter kullanıcınız varsa via kısmına onu yazmanız etkili olacaktır.

WordPress’de paylaş linkini şöyle kullanabilirsiniz: (via için codersgrave‘i kullanacağım örnekte)

<a href="http://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=codersgrave">Twitter'da Paylaş!</a>
]]> http://codersgrave.com/1000-twitterda-paylas-baglantisi/feed/ 1