Font Awesome ve Diğer İkon Fontları

Font Awesome için, ikon fontları arasında en çok kullanılanı diyebiliriz. Bootstrap‘ta bir süre font awesome kullanarak bu popüleriteyi arttırdı sanıyorum. Ancak şuanda kullandıkları (yanılmıyorsam) sadece Glyphicons. Bu yazımda bunlardan da bahsedeceğim sizlere.

İkon Fontları Nedir?

Özel olarak font kullanmak istediğimizde bildiğiniz gibi @font-faceyöntemini kullanıyoruz. Bu arkadaşlarda ikonları bir font haline getirmiş ve bize font şeklinde ikonları kullanma imkanı sunuyorlar. Oldukça kullanışlı değil mi?

Font Awesome

Yazı başında da söylediğim gibi, bana kalırsa en yaygın kullanılan ikon fontlarından bir tanesi. Github üzerinden yayınlanan, ücretsiz bir ikon font servisi.

Nasıl Kullanılır?

İlk olarak aşağıdaki bağlantıdan dosyalarını indirin;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome.zip

Eğer Sass ya da Less kullanıyorsanız gerekli dosyalar sass ve less klasörlerinde. Biz normal olanı kullanacağımız için css ve font klasörlerini almamız yeterli. Daha sonra index sayfamızda çağırmamız gerekenler şöyle;

<!-- gerekli dosyalar -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- ie7 fix -->
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />

Eğer IE7 sizin için önemli değilse, sadece ilk css dosyasını çağırmanız yeterli olacaktır.

Buradan sonra yapmanız gereken ikonları seçip kullanmak.. İkonların tamamına aşağıdaki bağlantıdan ulaşabilirsiniz;
http://fortawesome.github.io/Font-Awesome/icons/

Örneğin popüler ikonlardan windows ikonunu kullanalım;

<i class="icon-windows"></i>

İşte kullanımı bu kadar basit 🙂 İsterseniz başka bir nesne ilede kullanabilirsiniz, örneğin span gibi. Tercih size kalmış, önemli olan sınıf ismini doğru yazmanız.

Animasyonlu İkonlar: Eğer ikonlara animasyon katmak isterseniz 2. bir sınıf olarak “icon-spin” atamanız gerekir.. Yani;

<i class="icon-windows icon-spin"></i>

İkon’a border eklemek: Yuvarlak şekilde düzgün gözükmesi için önceden tanımlı şu sınıfı verebilirsiniz; “icon-border“.. Yani;

<i class="icon-off icon-border"></i>

İkon Boyutları: İkon boyutlarını font-size ile belirleyebileceğiniz gibi, font awesome’ın önceden tanımlı şu sınıflarını da kullanabilirsiniz;
– icon-large
– icon-2x
– icon-3x
– icon-4x

Örnek bir kullanım;

<i class="icon-camera-retro icon-4x"></i>

Diğer İkon Font Siteleri;

Font Awesome hariç birkaç tane daha popüler ikon font sitesi bulunuyor.. Bunlarında çalışma mantığı birbiriyle aynı, kullanımıda aynı şekilde, biraz incelerseniz eminim anlayacaksınızdır;

jQuery ile Son Tweetleri Çekmek (REST API uyumlu)

Bildiğiniz gibi twitter api 1.1’e geçti ve artık izin almadan twitter’da işlem yapamıyoruz.. Dolayısı ile çalışan tüm twitter eklentileri patladı. Bu konuyla ilgili http://www.erbilen.net/513-twitter-rest-ap-11-ile-son-tweetleri-cekmek.html şu konuda zaten son tweet’leri çekmeyi anlattım. Şimdide bunu bir php dosyası haline getirip jquery ile bu php dosyasından çekmeyi göstereceğim. Böyle yapıyoruz çünkü php’yi dahil edip çalıştırdığımızda sitenin hızını etkiliyor, ancak böyle olduğunda yüklendiği zaman istek cevaplanıyor ve verileri yazdırılıyor, açılış hızına bir etkisi olmuyor.

Adım Adım İlerleylelim

Öncelikle twitter.php dosyası oluşturalım bir tane. Ve içerisine buradan indireceğiniz sınıf dosyalarını include delim.

require 'twitteroauth/twitteroauth.php';

Ancak bunun hemen öncesinde çıktıyı json olarak ayarlayalım;

header('Content-type: application/json; charset=utf8');

Şimdi consumer ve access keylerimizi elde ettikten sonra sınıfımızı başlatalım.

// consumer ve access
$consumer_key = 'BpyIHhw6GdvUnEu9ARwrHA';
$consumer_secret = 'OwKDNx4qtUqVbOtNuMJXusMldfXrlNqwG1GqSRZpSw';
$access_token = '24186944-9lI0G4BKEySlN4tMbcz5oTxrfmNam24J6VffbhzOs';
$access_token_secret = 'aLevlosLliXvSDYQVbKKJ7Wrmh2rGbqFSLsCU9BaY';

// sıfını başlatalım
$twitter = new TwitterOAuth($consumer_key, $consumer_secret, $access_token, $access_token_secret);

Bunları elde edebilmek için uygulama oluşturmanız gerekiyor. Nasıl uygulama oluşturacağınızı bilmiyorsanız aşağıdaki konuya göz atın;
http://www.erbilen.net/twitterda-uygulama-olusturmak

Sırada twitter kullanıcı adını almak var. Bunu get parametresi ile alalım. username olsun parametre adımız.

$username = isset($_GET['username']) ? htmlspecialchars($_GET['username']) : NULL;

Kaç tweet çekeceğimizi belirleyelim. Bunuda get ile yapalım. Eğer get yok ise default bir değer verelim. Örn: 5 gibi..

$count = isset($_GET['count']) ? (int) $_GET['count'] : 5;

Şimdi kullandığımız sınıfta bulunan get() metodu ile tweetleri çekelim.

$tweets = $twitter->get('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name='.$username.'&count='.$count);

Sıra geldi bu tweetleri json olarak çıktı verdirmeye.

Yapmamız gereken şey php’de bulunan json_encode() fonksiyonunu kullanmak 🙂

print json_encode($tweets);

Unutmadan, jquery ile çekmek için en üstte şu header tanımlamasını yapmamız gerekiyor;

header('access-control-allow-origin: *');

Evvet.. tamamdır 🙂

Kodlarımızın Son Hali

Eğer her şey yolunda ise yazdığınız kodlar son haliyle şöyle olmalı;

get('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name='.$username.'&count='.$count);

	print json_encode($tweets);
	
?>

Bunu sunucunuza twitter sınıf dosyaları ile birlikte bir klasöre ya da ana dizine atın.. Şimdi gelelim jquery ile nasıl kullanacağımıza..

jQuery ile Kullanımı

jQuery’de json değerlerini işlemek için $.getJSON() metodu bulunuyor. Yapmamız gereken önce sunucudaki twitter.php’ye bağlanmak ve dataları almak olacak.

$(function(){

	$.getJSON('http://www.erbilen.net/twitter.php?username=tayfunerbilen&count=10', function(data){
		// tweetler burada işlenecek..
	});

});

Artık data değerinde çektiğim son 10 tweet bulunuyor. Bu objeleri for ile işleyip herhangi bir div içerisine yazdırabiliriz.
Bu arada twitter tarih formatı biraz ilginç geliyor 🙂 Bu yüzden onu “x zaman önce” haline çevirmek için şuradaki cevaptan yararlanıyoruz;
http://stackoverflow.com/a/6549563

Ve devam edip, verileri bir nesne içerisine yazdırıyoruz..

$(function(){
	
	// twitter tarih formatını parse eden fonksiyon
	function parseTwitterDate(tdate) {
		var system_date = new Date(Date.parse(tdate));
		var user_date = new Date();
		var diff = Math.floor((user_date - system_date) / 1000);
		if (diff <= 1) {return "şuan";}
		if (diff < 20) {return diff + " saniye önce";}
		if (diff <= 3540) {return Math.round(diff / 60) + " dakika önce";}
		if (diff <= 5400) {return "1 saat önce";}
		if (diff <= 86400) {return Math.round(diff / 3600) + " saat önce";}
		if (diff <= 129600) {return "1 gün önce";}
		if (diff < 604800) {return Math.round(diff / 86400) + " gün önce";}
		if (diff <= 777600) {return "1 hafta önce";}
		return "on " + system_date;
	}
	
	// tweetlerin yer alacağı nesne
	var $twitter = $('#twitter');
	
	$.getJSON('http://www.erbilen.net/twitter.php?username=tayfunerbilen&count=10', function(data){
		var total = data.length,
			i = 0;
		$twitter.html(''); // önce içindekini temizle sonra tweetleri yazdır.
		for ( i; i < total; i++ ){
			var tweet = data[i].text; // tweet
			var date = parseTwitterDate(data[i].created_at); // tarih
			var url = 'https://twitter.com/' + data[i].user.screen_name +'/status/' + data[i].id_str;
			$twitter.append('<div class="tweet"><a href="' + url + '">' + tweet + '</a> (' + date + ')</div>');
		}
	});

});

Birazcıkta css kastınız mı bu iş tamamdır 🙂 Sonuç olarak benim demoya aşağıdaki linkten göz atabilirsiniz;

İndir

http://yadi.sk/d/-z84lvgj9GxfB

Twitter’da Uygulama Oluşturmak

Merhaba arkadaşlar, twitter’ın yeni api servisini (rest api 1.1) yayına almasıyla birlikte, çalışan bir çok örnek çalışmaz hale geldi.. Bunun sebebi, twitter’ın kullanıcılardan oturum bilgisi istemesidir.. Bunun içinde öncelikle twitter’da bir uygulamanızın olması gerekir.. Bu makale’de sizlere twitter’da nasıl uygulama oluşturabileceğinizi anlatacağım..

Öncelikle uygulama oluşturmak için developer sayfasında twitter hesabınız ile giriş yapın.. Daha sonra aşağıdaki bağlantıyı kullanarak uygulama oluşturma sayfasına gidin.
https://dev.twitter.com/apps/new

Twitter'da Uygulama Oluşturmak

Yukarıda gerekli yerleri kendinize göre doldurduktan sonra uygulamanız oluşmuş ve aşağıdaki gibi bir sayfaya yönlendirilmiş olmanız gerekir..

Twitter'da Uygulama Oluşturmak

Evet buraya kadar bir sorun yok ise şimdi bize lazım olan 4 bilgi var.. Bunlar;
– consumer_key
– consumer_secret
– access_token
– access_token_secret

İlk ikisi yönlendiğiniz sayfada mevcut.. Ancak diğer 2’si ni aynı sayfada en altta bulunan create my access token butonuna basarak oluşturuyorsunuz..

Twitter'da Uygulama Oluşturmak

Bastığınızda aşağıdaki gibi token’lerin oluşması gerekir;

Twitter'da Uygulama Oluşturmak

Buraya kadarda sorun yoksa tebrikler, twitter uygulamanızı başarıyla oluşturdunuz..

Şimdi Ne Yapacağım?

Bu makale’de sadece uygulama oluşturmayı öğrendik.. Bu uygulama işlem yapmak için diğer makale/videolara göz atabilirsiniz.
Örn: http://www.erbilen.net/twitter-rest-ap-11-ile-son-tweetleri-cekmek

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