28 Aralık 2014 Pazar

PHP Regex Kullanımı


Regex'in temel kullanım amacı eşleştirme yapmak veya bir değer içerisinde başka bir değeri aratmaktır. En çok php ile bot yapımında karşınıza çıkacaktır. Email doğrulama, telefon numarası doğrulama veya kredi kartı bilgilerini doğrulama da büyük iş görür.

En Basit Haliyle Regex

Şimdi basit bir string oluşturup o string içerisinde aradığımız karakter var mı yok mu aratalım:

$string = 'phpdeveloper';
echo preg_match("/dev/", $string);

string isimli bir değişken oluşturduk. Değer olarak 'phpdeveloper' verdik. Bu değer içerisinde preg_match metodunu kullanarak 'dev' karakterleri var mı yok mu diye sorgulattık. Bu işlemi echo ettirdiğimiz zaman sonuç 1 çıkacaktır. 1 'dev' karakterleri bulundu anlamına gelir. Sonuç bulamazsa 0 değerini verir...

String Değerinin Başlangıcını Eşleştirmek

$string = 'phpdeveloper';
echo preg_match("/^php/", $string);

String değerinin başlangıcını eşleştirmek için ^ karakterini kullanıyoruz. Yukarıda ki kodu çalıştırdığımızda sonuç 1 olacaktır.

String Değerinin Sonunu Eşleştirmek

$string = 'phpdeveloper';
echo preg_match("/per\$/", $string);

String değerinin başlangıcını eşleştirmek için $ karakterini kullanıyoruz.
Burada dikkat etmeniz gereken yer \ işaretini $ den önce kullanmak zorundasınız.
Yukarıda ki kodu çalıştırdığımızda sonuç 1 olacaktır.
Unutmadan $ yerine z işareti koyarsanız aynı işi görecektir.



Büyük Küçük Harfe Karşı Duyarlı

Yukarıda yazdığımız kodlar büyük küçük harfe karşı duyarlıdır. Yani 'Php' olarak aratırsanız sonuç 0 çıkar. Regex büyük küçük harf uyumunu kaldırmak için sonuna i eklememiz gerekir.

$string = 'phpdeveloper';
echo preg_match("/^Php/", $string);

Sonuç 0 çıkar.

$string = 'phpdeveloper';
echo preg_match("/^Php/i", $string);

Sonuç 1 çıkar.

Meta Karakterler Ve Meta Karakterleri Kaçırmak

Meta karakterlerden kastım az önce kullandığım z ^ $ gibi işaretlerdir. Bu meta karakterlerden başka şu karakterlerde bulunmakta:
. * ? [ ] { } | ( ) +

Yazının devamında bu meta karakterler için birer regex örnekleri vereceğim. Örnekelere geçmeden önce meta karakterlerin nasıl normal karakterden ayırt edilidğini görmemiz lazım.

$string = '1+1=2';
echo preg_match("/^1+1/i", $string);

Bu örneğin sonucu 0 dır. Çünkü + işaretini meta karakter olarak algılıyor sistem. Yani '1+1' olarak görmüyor.

$string = '1+1=2';
echo preg_match("/1\+1/i", $string);

Bu örneğin sonucu 1 dir. + işaretinin öncesine \ yani backslash işareti koyarak +'nın meta karakter olmadığını normal + işareti olduğunu gösteririz.

Şimdi sırasıyla regular expression ile meta karakterlerin kullanımına bakalım:

Köşeli Parantez Bracket İle Regex Kullanımı

$string = 'bir';
echo preg_match("/b[lki]r/", $string);

Bu örnekte köşeli parantezin içinde birden fazla karakter var. Bu karakter topluluğu Characket Class yani karakter sınıfı olarak adlandırılır. bir değerinin içinde l, k ve i değeri var mı yok mu diye arattığımızda köşeli parantezleri bu şekilde kullanınırız. Verdiğimiz karakter sınıfında eğer i harfi var ise  sonuç 1 yok ise 0 olacaktır.

$string = 'bir';
echo preg_match("/b[asd]r/", $string);

Karakter sınıfı asd ve i harfi yok. Sonuç 0

$string = 'bir';
echo preg_match("/b[+aasdf$]r/", $string);

Bu örnekte karakter sınıfında + ve $ işaretlerini kullandık fakat backslah \ işaretini kullanmadık. Bunun sebebi karakter sınıfı içerisinde yer alan karakterler meta karakter sayılmaz. Tabi bazı istisnai durumlar yok değil. Mesela köşeli parantez içerisinde ^ (caret) işareti kullanırsak karakter sınıfında yer alan karakterler hariç diye aratır.

$string = 'abcefghijklmnopqrstuvwxyz0123456789';

preg_match_all("/[^b]/", $string, $matches);

foreach($matches[0] as $value)
{
echo $value;
}

Bu kodun çıktısı:
acefghijklmnopqrstuvwxyz0123456789

şeklindedir. Dikkat ederseniz b harfi hariç diğer bütün karakterleri aldı.

Bu kodda preg_match yerine preg_match_all kullandık. preg_match bulduğu ilk değeri dikkati alır ve işlemi sonlandırırdı. preg_match_all ise tüm değerleri baştan sona dikkate alır.

Bu işi biraz daha karmaşık yapalım. Örneğin 0 ile 9 arasında ki sayılar hariç diğer karakterleri getirelim:

$string = 'abcefghijklmnopqrstuvwxyz0123456789';

preg_match_all("/[^0-9]/", $string, $matches);

foreach($matches[0] as $value)
{
echo $value;
}

Bu kodun çıktısı:
abcefghijklmnopqrstuvwxyz

0-9 sıfır ile dokuz arasında yer alan bütün sayılar. ^0-9 ise sıfır ve dokuz arasında yer alan hiç bir sayı.


Meta Karakterleri Anlatmaya NOKTA ile Devam Edelim

Nokta . meta karakterinin anlamı her hangi bir karakter anlamına gelir.

$string = 'php developer';

echo preg_match("/p.p/", $string);

 p ve p karakterleri arasında her hangi bir karakter var mı diye kontrol ediyoruz. Bu kodun çıktısı 1 dir.

Asteriks *

Asteriks bizim deyişimizle yıldızın kullanım amacı bir karakterden önce belirtilen bir karakterin olup olmadığını belirler

$string = 'php'; 

echo preg_match("/ph*p/", $string);

Bu kodun çıktısı 1 dir. Çünkü p karakterinden önce belirtilen karakter var. Peki ya kodumuzu şu şekilde olursa:

$string = 'pp'; 

echo preg_match("/pz*p/", $string);

Burda pp içerisinde pz'yi aratıyoruz. Sonucun 0 olarak çıkması gerektiğini düşünmeniz gayet normal fakat sonuç  1 olarak çıkar bunun sebebi. Asteriksten önce pz yazında p karakterini dikkate almasıdır.

İşte Tam Burda Devreye Artı + Meta Karakteri Devreye Giriyor

Bir önceki kodu + meta karakteri ile yaparsak:

$string = 'pp'; 

echo preg_match("/pz+p/", $string);

Bu kodun çıktısı beklendiği gibi 0'dır. Bu şekilde pp karakterleri içerisinde pz karkaterlerini aratmış olduk.

Soru İşareti ? Meta Karakteriyle Dizinin Devamını Aramak

$string = 'phpdeveloper';

echo preg_match("/php?developer/", $string);

Soru işaretinden sonra gelen veriyi bulduğu için sonuç 1 olacaktır.

Kıvrımlı Parantez { } Meta Karakteri

Adınız yanlış söylemiş olabilirim. İngilizcesiyle curly braces meta karakteri belki biraz kafa karıştırıcı olabilir ama emin olun çok işinize yarayacak. Bir karakter sınıfı içerisinde [] değerlerin kaç kere döndüğünü gösterelim. Bu cümlenin tek başına bi anlam ifade etmediğinin farkındayım o yüzden hemen bir örnek vermek iyi olacak:

$string = 'php1234';

echo preg_match("/php[0-9]{3}/", $string);

Karakter sınıfında 0 dan 9 a kadar olan sayıları seçtik. Bu karakter sınıfı php den sonra gelen 1234 karakterleri içerinde 0 dan 9 a kadar sayı olup olmadığını kontrol eder. Curly braces içerisinde ki {3} ün anlamı ise karakter sınıfında ki değerlerin kaç kere eşleştiğini gösterir. Karakter sınıfında 0-9 arasında ki sayılar 4 kere eşleşiyor. Biz 3 kere eşleştiğini söyledik. Sonuç 4 ten küçük olduğu için kodun çıktısı 1 olacaktır. Eğer curly braces {4} olsaydı sonuç yine 1 olacaktı. Fakat {5} yaparsak bu sefer değerlerin en beş kere eşleştiğini belirtmiş oluruz. Bu yüzden sonuç 0 olur.

VEYA Operatörü | ile İşlem Yapmak

$string = "php developer";

echo preg_match("/(pzp|prp|php)/", $string);

php developer kelimesinde pzp veya prp veya php kelimesi var mı  diye sorduk. Çıkan sonuç 1 olacaktır.

String Değerinin Sayı İle başlayıp Başlamadığını Anlamak

Regular expression da kullanılan bazı özel dizinler (special sequences) vardır. Bunlar daha az kodla daha fazla iş yapmamıza örnek sağlar.

Bu özel dizinler :

\d - her hangi bir sayı ile eşleştir - diğer şekli [0-9]
\D - sayısal olmayan değerlerle eşleştir - diğer şekli [^0-9]
\s - white space işe eşleştir - diğer şekli [ \t\n\r\f\v]
\S - white space olmayan karakterlerle eşleştir - diğer şekli [^ \t\n\r\f\v]
\w - Alfa numerik karakterlerle eşleştir - diğer şekli [a-zA-Z0-9_]
\W - Alfa numerik olmayan karakterlerle eşleştir - diğer şekli  [^a-zA-Z0-9_]


Bu özel dizinlerle işimizi daha kolay yollarla halledebileceğiz. Şimdi string değerinin sayı ile başlayıp başlamadığını bulmaya çalışabiliriz

$string = '2 php developers';

echo preg_match("/^\d/", $string);

Bu kodun çıktısı 1 dir.



Kelimeyi Harfi Harfine Almak

Regex içerisinde bazı niteleyiciler vardır. Daha önce yazmış olduğum büyük küçük harf uyumunu insensitive yapan i niteleyicisi gibi. Diğer bir niteliyici ise boundary (sınır) kelimesinin ilk harfi olan b dir. Aratmak istediğiniz kelimeyi iki \b arasında yazarak kesin sonuç elde edebilirsiniz.

$string = 'php developer';
echo preg_match ("/\bloper\b/i", $string);

Bu kodun çıktısı 0'dır. $string içerisinde loper diye bir şey olabilir ama biz kelimeyi tam olarak arattığımızdan dolayı sonuç 0 dır.

$string = 'php developer';
echo preg_match ("/\bdeveloper\b/i", $string);

developer kelimesi ile harfi harfine eşleştiği için bu kodun çıktısı 1 olacaktır.

Eğer $string içerisinde bir grup harften oluşan eşleşme istersek B niteliyicisini kullanmamız gerekmektedir.

$string = 'php developer';
echo preg_match ("/\Bloper\b/i", $string);

preg_replace() İle İşlem Yapmak

preg_replace() bir kelimeyi başka bir kelime ile değiştirmeye yarar:

$string = 'php developer';
$string = preg_replace("/php/", 'java', $string);

Bu kodun çıktısı 'java developer' olacaktır.

Bir Karakterin Sonrasını Aratmak

$string = 'php developer herkes olabilir';
echo preg_match("/(?<=her)kes/i", $string);

her kelimesinden hemen sonra kes kelimesi geldiği için sonuç 1 çıkar. herkes kelimesi ayrı yani her kes şeklinde yazalım.

$string = 'php developer her kes olabilir';
echo preg_match("/(?<=her)kes/i", $string);

Bu kodun çıktısı 0 dır. her den sonra kes gelebilir fakat arada boşluk olduğu için sonuç 0 olur. Bunun çözümü ise ?<= yerine ?!= yazmaktır:

$string = 'php developer her kes olabilir';
echo preg_match("/(?!=her)kes/i", $string);

Bu kodun çıktısı 1 dir.

Bir Karakterin Öncesini Aratmak

$string = 'php developer herkes olabilir';
echo preg_match("/her+(?=kes)/i", $string);

kes kelimesinden hemen önce her kelimesi geldiği için sonuç 1 çıkar. Peki ya herkes kelimesi ayrı yani her kes şeklinde yazılsaydı sonuç nasıl olurdu.

$string = 'php developer her kes olabilir';
echo preg_match("/her+(?=kes)/i", $string);

Bu kodun çıktısı 0 dır. kes den önce her gelebilir fakat arada boşluk olduğu için sonuç 0 olur. Bunun çözümü ise ?= yerine ?! yazmaktır:

$string = 'php developer her kes olabilir';
echo preg_match("/her+(?!kes)/i", $string);

Çıkan sonuç 1 olacaktır.



Niteleyiciler - İfadeler - Sınırlayıcılar (Modifiers - Assertions - Delimiters)

Özel Dizinler (Special Sequence)

\d - her hangi bir sayı ile eşleştir - diğer şekli [0-9]
\D - sayısal olmayan değerlerle eşleştir - diğer şekli [^0-9]
\s - white space işe eşleştir - diğer şekli [ \t\n\r\f\v]
\S - white space olmayan karakterlerle eşleştir - diğer şekli [^ \t\n\r\f\v]
\w - Alfa numerik karakterlerle eşleştir - diğer şekli [a-zA-Z0-9_]
\W - Alfa numerik olmayan karakterlerle eşleştir - diğer şekli  [^a-zA-Z0-9_]

Meta Karakterler

^ - cümlenin başlangıcı
$ - cümlenin bitişi
[ - karakter klası açılış işareti
] - karakter klası kapanış işareti
| - veya operatörü, Örn: a|b = a veya b
( ) - Alt pattern
\ - karakteri kaçır

Niteleyiciler (Quantifiers)

n* - n karakterinden 0 veya daha fazla
n+ - n karakterinden 1 veya daha fazla
n? - n karakterinden 0 veya 1 kez olması
{n} - n sayısı kadar
{n,} - en az n sayısı kadar
{n,m} - n ve m (dahil) sayısı arasında

Kalıp Niteleyicileri (Pattern Modifiers)

i - Büyük küçük harfa duyarsız
m - Çoklu satır
s - \n yani yeni satır kodunu görmesini sağlar
x - string içinde kullanılan yorumları
e - sadece preg_replace() metodu ile çalışır
U - regex kalıbını sınırlandırır
u - regex kalıbını Ut-8 olarak ele alır

İfadeler (Assertions)
\b - Kelimeyi bütün olarak ele alır
\B - Kelimenin içinde ki harfleri ele alır
\A - cümlenin başlangıcı
\Z - Yeni satırda \n cümlenin bitişi
\z - Cümlenin bitişi
\G - Cümlenin ilk eşleşen hali

Diğer İfadeler
(?=) - Bir karakterin öncesini aratmak (pozitif)
(?!) - Bir karakterin öncesinde olmayanı aratmak (negatif)
(?<=) - Bir karakterin sonrasını aratmak (pozitif)
(?<!) - Bir karakterin sonrasını aratmak (negatif)
(?>) - Sadece alt kalıpları aratır
(?(x)) - Koşullu alt kalıplar
(?(3)foo|fu)bar - Eğer 3. alt kalıp eşleşirse foo ile eşleşir





20 Aralık 2014 Cumartesi

Web Sitesi Yönlendirme


Her web tasarımcısının yada geliştiricisin illaki web sitesini yönlendirme ile ilgili bir işi olmuştur.
Peki websitesi yönlendirme işi kaç farklı şekilde ve nasıl yapabiliriz.

Html Meta Tag İle Websitesi Yönlendirme
<meta http-equiv="refresh" content="0; URL='https://websitesi.com'" />

content seçeneği yönlendirmenin ne kadar süre sonra yapılacağını bildirir. Bu işlemi yaparken tırnak işaretlerine dikkat etmenizde fayda var.

Meta tag ile yönlendirmek en kolay yöntem olabilir ama bir çok browser meta tag yönlendirmesinde size sorun yaşatabilir. Yani kullanıcı siteye girdiği zaman sieye hemen yönlenmeye başlamaz ve kullancı anlık olarak siteyi görür. Bu her browser için geçerli değildir fakat kullanıcıyı ciddi anlamda rahatsız eden bir durum.

27 Mayıs 2014 Salı

Link Shim - Facebook Kullanıcılarını Kötü Amaçlı Linklerden Korumak

Facebook site entegrasyon ekibinin üyesi olarak ilk amacım kullanıcıalrı spam veya kötü amaçlı yazılımlardan korumak. Site Entegrasyon Ekibi bu mücadelede bize yardımcı olamsı için bir çok güçlü araç üretti. En önemli araçlardan birise 2008'de yazılan "link shim" olarak adlandırılan sistem. Lİnk shim'in çalışma mantığı şu şekildedir: sitede her link tıklandığında link shim URL adresini kendi içinde bulunan kötü amaçlı url listesinde kontrol eder. Bu listenin içerisnde McAfee, Google, Web of Trust ve Websense'in de listeleri vardır. Eğer url adresinin zararlı olduğunu tespit edersek, hedef sitenin zararlı olabilieceğini gösteren bir ara sayfa gösteriyoruz. Bu ara sayfanın amaçlarından bazıları şunlardır:

İnsanları Korur

Emin olduğumuz (yada şüphelendiğimiz) websitesinin spam veya kötü amaçlı olup olmadığından emin olamlıyız. Tıklama olduğu andan itibaren, çok yönlü bir sınıflandırma yapıyor. Bize ait listenin yanında başka kaynakların kara listesini de geziyor.

Gizliliği ve Kimliği Korur

Bazen facebook'da bulunan URL ler kendi kendine özel içerik barındıryor olabilir. Örneğin, zaman tünelinizde bir çok url bulunabilir. link shim olamdan zaman tünelinizde bulunan bir linke tıkladığınızda tarayıcınız referrer'a 3. taraf site oalrak gönderebilir. linke kime tıkladğı belli olur.

Şuanda, 3üncü taraf gördüğünde bilgileri sızdırmayacak şekilde Url'lerimizi randomize etmek uygulanabilir değil. Bu yüzden link shim'in adres defterini referrer olarak kullanıyoruz.

Çalışma Mantığı Nasıldır?

Peki gerçek te link shim nasıl çalışır? Bu facebook.com/l.php veya facebook.com/l/ ile sonuçlanan son noktadır. İki parametre ile çalışır. (1) Url yönlendirme (2) user-specific hash (kullancıya özel hash). Bu hash olmadan herşey güzel çalışabilirdi. tabiki url in güvenli olduğunu varsayarak url yönlendirseydik. Yine de, user-specific hash'i dahil etemden "open redirector" oalrak adlandırılan bir güvenlik koridoru oluşturabiliyoruz. Rastgele seçilmiş URL'ler yönlendiren bitiş noktası kötü amaçlı linkler tarafından patlatılabilinir. Facebook.com url'ini görülürse, URL in kendi yönlendirmesi oladan sayfaya gğvenmeliler.

Open redirector'dan kaçınmak adına kullancıya özel olan her bir link shim url'i için hash üretiyoruz. Sonra, kullanıcı ara link shim sayfasını doldurunca, hash'in kullanıcı için uyumlu olup olmadığını kontrol eder. Eğer uyumlu ise, kullanıcıyı siteye göndeririz. Eğer değilse uyarı sayfası şu şekilde çıkar.

Good UX

Daha basit bir kullanıcı tecrübesi için, bu link shim linklerini doğrudan siteye ayzmak istemedik. Eğer yapsaydık, linkin üzerine gelindiğinde broser hedef bağlantıyı değil facebook bağlantısını gösterirdi. Bunun üstesindne gelmek için, Lİnki moıdifiye etmeye yarayan onmousedown handler yükledik. Eğer kullanıcı javascirpti kapatırsa bu url'i görebilir.

Facebook: “Sorry, there was a problem with this link” – should we worry?

Wordpress blog kullanıyor ve Jetpack'in sunduğu WP.com stats (istatistik)'e sahipsseniz Referres kısmında aşağıdaki yeni link gurplarının gürnğm görünmediği kontrol edin:

l.facebook.com – from desktop computers
lm.facebook.com – from mobile devices

Bu linkler Facebook'un normal bağlantılarının extra kaynaklarıdır ce facebook ikonu barındırır. Bu linkler bir şeyleri incelemekte ve bir sorun oluduğunu düşünmekte olduğunu gösterir.

Aslında bunlar sitenizin güvenli olamayabileceğini gösteren facebook'un uyarı sayfalarıdır. Bu mesaj şu şekilde:

Bir hata var

Üzgünüz fakat bu linkle ilgili bir sorun vardı: http://yourdomain.com/post/.

Bu linke devam edebilir veya sayfanıza geri döenbilirsiniz. Unutmayın sadece güvendiğiniz linklere tıklayın

Bu uyarı işleyişi ortalama her 5 linkten 1ine denk geldi. Facebook linlerw .facebook.com veya lm.facebook.com üzerinden yönlendirme yapıyor. Fakat bazen direk yönlendirme yapmak yerine uyarı sayfasını çıkartıyor.

peki neden bu durumu ciddiye almalıyız. Uyarı sadece facebook kullanıcısını linke tıklamasını engellemiyor. click kaybetmek diğer etkilerinin yanında hiçbirşey. uzun dönemde imajınızı zedeleyibilir.

Bu sorunu facebook debugger'da sorgulattım. herşey iyiydi. response code 200. html validation bile kullandım fakat herhangi bir hata çıkmadı.

Spam lerle savaşması için geçenlerde oluşturulan Facebook News Feed ile ilgisi de yoktu. Blogumdan l.facebook.com üzerinden gönderilern postun trafiği yayınlanır yanıynlanmaz Buffer üzerinden dağıtılıyor.

asıl ilginç olan şey ise daha önce söylediğim gibi her 5 clickten biri uyarı sayfasına düşüyor

Olası sebeplerdeb biri (öyle olamsını umut ediyorum) hedef sayfayı doldurmak biraz fazla vakit alıyor. fakat uyarı aslında gözükmez.

“Sorry, there was a problem with this link” sorunu ile ilgili fazla bir bilgi internette yok.

komik olan şey ise google'da cevap aradığınızda Facebook'a ait sayfanın facebook'un güvenmediğini analtan sonuçlar. Uyarı instagram'ın yardım kısmında gösteriliyor. aşşağıda ekran görüntüü mevcut

23.04.2014 tarihinde güncellendi

Jetpack referral kısmın'dan gelen l.facebook.com linkleri uyarı sayfalrını açıyor. postları detaylı bir şekilde kontrol ettim. Farklı fikirler edinmek amacıyla Hem facebook dan direkt tıklayar hemde arkadaşlırımın açmaısını isteyerek.

- farklı kullanıcılar (sadxece facebook sayfa sahipleri ve yönetişcileri değil)
- farklı ip adresleri
- facebook sayfamı beğenmeyen kullanıcılar
- log in olmayan kullanıcılar

Sonuç: Facebook'da uyarı sayfası ile sonuçlanan hiç bir linkle karşılaşmadım.

l.facebook.com parametreleri istatistiklerde 5 Nisan 2014 gibi çıkmaya başladı. Bu Jetpack ve google analtytic'e uygulandı.

içinde çok kod bulunduran Wordpress blogları facebook tartafından potensiyel tehlike olarak algınıyor olabilir. Fark ettiğim bir başka konu ise Google analtic'İn yüklü olduğu Tumbler fotoğraf bloğumda uyarı linklerinin gözükmesi oldu.

Digging more about the issue let find out that since 2008 Facebook is using a set of tools called “link shim”.

2008'den beri uğraşarak facebook'un link shim olarak adlandırılan araçlar kullandığı

genel olarak link shim facebook kullanıcılarını kötü amaçlı url lerden korumak için tasarlandı.

Nasıl çalışır. facebook'a her tıklandığında link shim URL adresini kötü amaçlı linklerin buludnuğu liste de varmı diye kontrol eder (facebook'un kendi içindeki liste). diğer partnerleri ise McAfee, Google, Web of Trust, ve Websense dir.

Eğer kötü amaçlı bir URL ise başka bir sayfa gösteriyoruz.

Eğer kötü amaçlı bir URL ise başka bir sayfa gösteriyoruz.

Yine de, link shim'in asıl yaptığı daha güvenilir dış bağlantılar hazırlamak.

Örneğin kullanıcı HTTP protokolü kullanıyorsa Facebook'tan gelen trafiği tespit eder. HTTTP linkine tıkladığında browser bilinmeyen kaynaktan gelen trafik oalrak tanımlar. Ayrıca link shim doğru referrer kullanmak için kullanılır.

Özetle: Muhtemelen facebook kendi link shim şemasına l.facebook.com olarak istatistikte görünemsini sağlayan yeni bir parametre ekledi ve bu yüzden kullanıcılar uyarı sayfasını göremiyorlar.

Sorun hakkında endişelenmeniz gerektiğini anlamak için 5 Nisan'dan sonra facebook'tan gelen trafiği kontrol edin. eğer azaldıysa, facebook'un yeni link shim parametresinden etkilenmişsiniz demektir.

Gizliliği Referrers ile Korumak

Geçen hafta Wall street muhabirlerinden biriyle yaptığımız görüşme sonucu reklamlcılarımızın bir takım istenmeyen sorunla karşılaştığımı farkettik. Bu hata reklama tıklandığında gözükmekte.

Ufak bir hatırlatma: bazı durumlarda referrer ziyaret ettiğiniz profilin kullanıcı id'sini ve sizinkini alır. fakat reklama tıklandığı zaman referrer da user IDyi tespit etmenin bir yolu olduğunu fark etmedik. User id'yi referrerdan komple kaldırmak için farklı testler yaptık.

Fakat nadiren oluşan durumlarda Facebook Urlinin yapısı hakkında reklamcı bilinirliği reklama tıklayan kişinin kendi profiline bakıp bakmadığını tespit etmek için referrer kullanılır. bu şeklilde, potensiyel olarak o kişinin user id'sini çıkartmak mümkün. hiç bir reklamcının bunu yaptığına ihtimal vermiyoruz ve bunuı yapmak bizim kurallarımıza aykırıdır.

Ayrıca kişisel bilgileri reklamcılarla paylaşmadğımızı söylemekte fayda var. ve satmıyoruzda. sadece reklamcılar ne tarz kullanıcalara ulaşmak istediklerini seçebiliyorlar.

sektünde ilerisnde bir şeyler yapmak istiyoruz. Artık web tarayıcılar linkleri dış bağlantılı websitelerine (reklamcılar dahil) göndermeden önce referrer linklerden user Id leri komle kaldırdık. son bir kaç ayır bu değişiklikle uğraşıyoruz. Firefox, Chrome, Safari ve Opera'da çalışıyor. İnternet explorer içinse halen bir çözüm arıyoruz.

Aşağıda yapıtğımız değişiklilklerin teknik detaylarını açıkladık ki diğer websiterleri diğer websiteleri eğer isterlerse user id'yi referrer linklerden kaldırsınlar.

Teknik Uygulama

Facebookta insanların sitemizle ve internetin geri kalan kısmıyla nasıl bir etkileşim içinde olduklarını anlıyortuz. Trajik yazım hatasına rağmen, HTTP standard'ının browser tarafından gönderilen "referrrer" header'ı wensitesine kullanıcının onları nasıl bulmak istediklerini saklayan bilgiyi verir.

Referrers: her zaman iyi karşılamazlar

fakat bazen referrerlar doğru yerde olmaz. belkide URL'de kiritk bir veri olduğu için yada site kullanıcının verileri görmesini istemez. Bir çok browser kullanıcıya bu özelliğ kapatmak için seçenekte verirken, kimse de yapmaz ve bir websitesinin browser'a referrer göderme demesininde yolu yoktur.

Kullanıcılarımız bilgilerini korumak adına dış bağlantıalrdan da korumaya çalışıyoruz. Bunun için aşağıdaki öselliklerle çalışan bir redirector yaptık. redirector'un yapması gerekenler:

- her türlü durumda redirect edebilmeli
- kullanıcın tıkladığı sayfanın referrer'ını kaldırmalı
- Facebook.com'da tıklamayı iletmek
- açık bir redirector olmamalı

Bunları güvenli bir şekilde oluşturmak için cross-browser yöntemi tek yöntem değildir. Bu yyüzden bunu açacağız.

Arkladaşlarımız, Web Sayfaları

Bu tartışma amacıyla alttaki 3 web sitesini refer edeceğiz.

A.com/source
A.com/redirect
B.com

Varsayalım ki kullanıcı A.com/source içeriğğine bakıyor ve B.com'a gideceğini belirten bir linke tıklıyor. A.com kullanıcıyı B.com'a öyle bir şeki,lde göndermeyi planlıyoruki B.com kullanıcın A.com'dan geldiğini bilsin. Fakat kullanıcın direkt A.com/source'dan gelidğini gizlemeli. Bu yüzden kullanıcıyı direk B.com'a göndermek yerine kullanıcıyı önce A.com/redirect sayfasına gönderiyor. Bu ekstra adımın bazı yararları var. B.com'un kötğ amaçlı bir yazılım olup olmadığını kontrol edebiliyor. fakat biz buna şimdi değinmicez.

So how can we make this happen? There are number of approaches, each with its own advantages and disadvantages. You can see each approach outlined in the following table, and discussed in detail below it.

Peki bunu nasıl yapıcaz. Bununla ilgili bazı yaklaşımlar mevcut her biri kendi avantajına sahip. alttaki tabloda yaklaşımın taslağını görebilirsiniz.

The 302

En basit yöntem HTTP 3012 Foun response dur ki bir çok browser kullanıcın A.com/source dan geldiğini gösterir.

PHP code:

header('Location:http://B.com’);

Yenilemek

Yönlendirmenin en basit yolalrında biride HTTP 200 response'dur. HTTP Refresh header ise "Refresh:0;URL=http://B.com" şeklindedir. Bu tip yönlendirmenin sonuçöları her browserda farklılık gösterir.

- Firefox, ve Internet Explorer (IE)'de bu tip yönlendirmeler B.com'a gönderilen referr'In blank olmasına neden oalcaktır. Gizlilik için iyidir fakat B.com'un trafiğin nereden geldiğini anlaması adına kötü.

- Opera ve webkit browserlarının (Safari, Chrome, iPhone, ve Android) bu gibi yönlendirmeleri ise mükemmel sonuçlanır. "a.com/redirect" being sent as the referrer to B.com - perfect!

PHP code:
header(‘Refresh:0;URL=http://B.com’);

Meta Yenileme

HTML code:

< meta http-equiv="refresh" content="0;URL=http://B.com" />

Document.location.replace()

Biraz daha trick yapalım. varsayalım ki kullanıcın browser'ı Javascript'i desteklesin, biz HTTP 200 response gönderebilelim ve bir javascirpt kodu 'document.location.replace('http://B.com');' oalrak yanıt versin. bu tip bir yönlendirme bile farklı sonuçlar verir.

***kaynağını hatırlayamadığım bir haber sitesinden çeviridir***

26 Mayıs 2014 Pazartesi

Javascript Nesne ( OBJE ) Hakkında Herşey

İleri düzey javascript kodlamada en çok ihtiyaç duyulan Objeler yani nesneler bir kaç farklı yapıya ayrılır. Genel türleri Number, String, Boolean, Undefined ve Null iken diğer adları complex data type (karmaşık veri tipi), the Object data type (nesnel veri tipi) dir.
Peki OBJE (Nesne) Tam Olarak Nedir?
Obje konusunda pek kafa karıştırmaya gerek yok. HTML de bulunan unordered list gibi düşünürseniz nesne konusunu kafanızda daha iyi yerleşmiş olur. Bu listede bulunan her bir element property olarak adlandırılır. Dikkat edilmesi gereken husus propery isimleri unique olması gerektiğidir.

var myFirstObject = {isim: "Barış", soysim: "Manço"};
Yukarıda ki örnekte göründüğü gibi isim ve değer ilişkisi söz konusudur. Burada property name 'isim:' ve 'soyisim' dir. Değerleri ise 'Barış' ve 'Manço' dur.
Property değeri string veya number olabilir. Fakat string ve number property name'lerin çağrılma şekli farklıdır.
var kilo = {60: "Zayif", 150:"Obez"};
console.log(kilo.60) // Hata verecektir
// Number gibi bir değere şu şekilde ulaşabilirsiniz
console.log(kilo["60"]); // Zayif değerini verecektir
Reference Data Tipleri ve Primitive Veri Tipleri Referans veri tipleri ve primitive veri tipleri arasındaki fark referans veri tipleri bir referans olarak kayıt edilir. Yani primitive veri tipleri gibi bir değişkene bir değer olarak kayıt edilmez.
// primitive veri tipi string olarak kayediyoruz
var kim = 'Barış';
var digerKim = kim; // digerKim değişkenin değeri kim olarak ayarlandı
kim = 'Manço'; //kim değişkeni değerini değiştirdik
console.log(digerKim); // Barış
console.log(kim); // Manço
'kim' değişkeninin sonradan değiştirilmesine rağmen 'digerKim' değişkeni değeri 'kim' değişkeninin değerini almaya devam etti.
var kim = {isim: "Barış"};
var digerKim = kim;
kim.isim = "Manço";
console.log(digerKim.isim); // Manço
console.log(kim.isim); // Manço
Bu örnekte ise kim objesini digerKim'in içine gönderdik. Fakat değer obje içine depolandığı için sonradan person objesini değiştirince digerKim değişkenide değişti.
Nesne Veri Property'lerinin Sahip Oluduğu Nitelikler Veriyi depolayan her bir veri property'si (data property) sadece name-value (isim-değer) ilişkisine sahip değildir. Default olarak true ayarlanmış üç niteliği (attribute) vardır
Configurable Attribute (Düzenlenebilir Nitelik):
property'nin silinebilir yada değiştirilebilir olup olmadığını belirler.
Enumerable (Sıralanabilir):
property'nin for/in loop döngüsü içine alınıp alınamdığını belirler.
Writable (Yazılabilir):
property'nin değiştirilip değiştirlemeyeceğini belirler.
Obje (Nesne) Oluşturmak
Obje hakkında bu kadar yazdıktan sonra nasıl oluşturulması gerektiğinden bahsetmemek olmaz. Obje oluşturmanın iki yolu vardır.
1 - Literal Object
// Boş Obje Oluştrumak. Sonradan veri çağırmak için iyi yöntem
var ornek1 = {};
// İçinde öğesi bulunan
var ornek2 = {
hayvan: "kopek",
tur: "gold",
yas: 3,
}
2 - Constructor Object Yeni objeleri çağırmak için kullanıldığından dolayı constructor (yapıcı) adını alan nesne oluşturma yöntemidir.
var kopek = new Object ();
kopek.tur = "gold";
kopek.yas= "2";
Objeler diğer veri türleri olan array, number gibi diğer nesneleride kapsar.



13 Mayıs 2014 Salı

Düzgün CSS Yapısı

RESET

Html elementlerine reset kodu ekleyerek elementlerin arasındaki boşluğu sıfırlayabilirsiniz. Reset kodunu Eric Meyer'in düzenlediği reset kodlarını kullanabilirsiniz. Yada alttaki kodu kullanarak ksıa bi yol izleeyebilirsiniz

* {
    margin: 0px;
    padding: 0px;
}

Fakat bu kodu kullnaırsanız input elementlerini resetleyemezsiniz

ALFABETİK SIRALAMA

Css kodlarını alfabetik sıralamada yaparsanız hem okuması rahat olur hem de daha sonra geri dönüp bakmak istediğinizde aradığınızı kolayca bulabilirsiniz.

#sample1 {
    margin: 0px;
    color: #000;
    background: #fff;
}

#sample2 {
    background: #fff;
    color: #000;
    margin: 0px;
}

Yukarı daki kodları okuduğunuzda eminim ikinci örnek daha anlaşılır gelmiştir.

İSKELET OLUŞTURMA

CSS kodlarınızı yazmadan önce hangi kodun nerede kullanılacağına dair yorumlar yapın. Mesela header elementleri için ayrı bir yer footer için ayrı side bar için ayrı bir yer olsun.

/*****Header*****/
Define all elements in the header
/*****Content*****/
Define all elements in the content area
/*****Footer*****/
Define all elements in the footer
/*****Etc*****/
Continue to define the other sections one by one

Daha detaylı bilgi için

23 Nisan 2014 Çarşamba

jQUERY İle Progress Bar Yapımı

html yapısı

<div class="progress-bar">
    <div class="progressing" data-rate="67"></div>
</div>

iki div açtık. birinci div konteynır  görevi görecek. ikinci div ise progress ilerleyişini sağlayacak. Classı progressing olan div html5 atteibute olan data tagini barındırındırıyor. düzgün çalışması adına doctype html5 uyumlu olduğundna emin olmalısınız. data-rate progress barın ilerlemesini istediğiniz miktarı gösrerir. eğer data-rate içerisine 99 yazarsak 0 dan 99% a kadar ilerleyecektir.
 css yapısı
 .progress-bar {
 width : 100px; 
height: 20 px;
 background: black;
}

.progress-bar .progressing {
  float: left;
  width: 0%;
height: inherit;
background: white;
}

float left yazmamızın sebebi soldan sağa doğru ilerlemesi için. eğer sağdan soşa doğru uzamasını istiyorsanız float right yazabilirsiniz,

jQUERY
$(function(){
    var progress = $("progressing");
    progressing.each(function(){
         var thisData = $(this).data("rate"); // thisData değeri progress barın ilerleyeceği miktar
         $(this).animate({
               width: thisData // genişlik thisData değeri kadar anime olacak
         }, 300, "linear");
    });
});

each fonksiyonu içerisine almamızın sebebi bütün progress barları kendi içinde çalıştırmak içindir



22 Nisan 2014 Salı

Javascript Etkin 'return' Kullanımı

Javascript ile return kullanımını anlatmadan önce 'return' kelimesinin Türkçe karşılığına biraz kafa yormak lazım. Return Türkçeye döndürmek yada çevirmek anlamında karşımıza çıkıyor genelde. Fakat ne yazık ki İngilizcede 'return' gibi çok kullanılan kelimelerin bir iki anlamı yoktur. Örneğin en çok kullanılan kelimelerden 'get' sözcüğünü kullanıldığı yere göre 10 dan fazla şekilde söyleyebiliriz. 'Return' kelimesi de yazılım alanında ki anlamı çalıştırmaktır. Yani siz bir  return true yazdığınızda true olarak döndür değil true olarak çalıştır olur.

Bu ufak ingilizce dersinden sonra asıl konumuz olan etkin return kullanımına geçebiliriz.
if ( num < 10 ) { return 'kucuk'; } else if ( num >= 10 && num < 100 ) { return 'orta'; } else if ( num >= 100 ) { return 'buyuk'; }
 Yukarıda ki kodu çalıştırdığımızda eğer sayı 10dan küçük ise bir sonraki else if bloğuna geçemiyecektir. Yani biz kodumuzu şu şekilde de yazabiliriz:
if ( num < 10 ) { return 'kucuk'; } if ( num >= 10 && num < 100 ) { return 'orta'; } if ( num >= 100 ) { return 'buyuk'; }
Diyelim ki bu şekilde yazdığımızda sayımız 10 dan büyük ve 100den küçük olsun. Bu sefer kod ilk if bloğunu geçecek ve ikinci if bloğunda kalacak. Bu yüzden en son if bloğunu yazmaya hiç gerek kalmadı. Yani kodu şu şekilde tekrar yazabiliriz:
if ( num < 10 ) { return 'kucuk'; } if ( num < 100 ) { return 'orta'; } return 'buyuk';

21 Nisan 2014 Pazartesi