29 Haziran Pazar ´08   —   12 Yorum
Biliyorsunuz mootools adamı idim, ancak son dönemde jquery'nin daha sıkı gitmesi ve ihtiyaçlara daha ekonomik çözümler sunması daha çekici yaptı ve okuduklarım/duyduklarım ile jquery'ye geçme kararı almıştım. Birkaç gündür jquery kaynakları toplayıp kolları sıvamaya başlıyorum. Topladığım kaynakları paylaşmak istedim :


Jquery Siteleri, Dökümantasyonlar




Plug-in ve Eklentiler



Makaleler, NASIL Belgeleri



Diğer

Yazıya dalmadan önce kısa bir terim açıklaması yapmayı yanlış görmüyorum;

Regex (Regular Expressions : Düzenli İfadeler) Nedir?

Bütün programlama dillerinde kullanabileceğiniz çok iyi düşünülmüş bir kural mekanizmasıdır.
İlk baktığınızda "bunun neresi düzenli, tam tersine bu şey oldukça düzensiz görünüyor" diyebilirsiniz. Çünkü gerçekten düzensiz görünen karakter grubudur. Regex (Regular Expressions'un genel olarak kısaltması regex olarak kullanılır) bizim metinlerimiz içerisinden belirlediğimiz kurallara benzeyen metin parçalarını seçmemizi; kullandığınız dile göre değiştirmemizi de sağlayabilir. Mesela bir e-posta'nın doğru olabilirlik kuralları vardır. Sitenizde girilen epostaları bu şekilde doğru veya yanlış formatta olup olmadıklarını kontrol edebilirsiniz.
Bu dökümanda otomatik olarak linkleri nasıl çevireceğimizden bahsedeceğim.

Metinlerde girilen şeylerin link olup olmadıklarını bazı mantıksal kurallara göre bölelim
mesela bir link önce protokolü ile başlar "http://" "ftp://" "ssh://" "file://" vb gibi. Bu başlangıçlar bize girilen şeyin link olduğunu gösterebilir. Aynı şekilde hızlı yazımla birlikte "www." ile başlayan şeyler ".com" ile biten şeyler de bize link olarak seçmemizi sağlayacak kriterler.

PHP'de regex fonksiyonları olarak erege_replace fln kullanabilirsiniz fakat preg_replace daha yetenekli olduğundan preg_replace'e özel bir düzenli ifade kuralı kullanacağız. Şimdi doğrudan düzenli ifade kuralını verip sonra açıklamaya çalışacağım :

http:// ftp:// gibi protokolü ile yazılmış linkler için :
([n ])([a-z]+?)://([a-z0-9-.,?!%*_#:;~\&$@/=+]+)
seçim kurallarını kullanıyoruz.

En baştaki [\n] link eğer satır başında ise seçebilmemizi sağlıyor. Eğer bu ibareyi belirtmezsek yüksek ihtimal sadece satır içindeki linkler dönüşecektir. Bunu belirten kural 1. grup parantez olduğundan \1 ile kullanılabilecek.

Genel bir kural koymadık protokol belirtecimz için çünkü tonlarca farklı protokol var. İstersek ikinci grup parantez'e sadece http sadece ftp gibi belirteçler kullanarak istediğimiz protokole istediğimiz link değişimini uygulayabiliriz. Mesela smb:// için bir windows paylaşım işareti koyabiliriz otomatik çevirdiğimiz link'in yanına, ya da ftp:// için dosya transfer'i anlatan küçük bir ikon. Neyse ikinci grup parantez bizim protokol adımızı ifade ediyor. Bunu \2 ile otomatik link çevirmede kullanacağız.

Statik olarak "://" ibaresi arandıktan sonra 2. grup parantezde tüm linkimizi tarayabilecek kural bulunuyor. Burada dikkat etmemiz gereken şeyler, bir link'te kullanılabilecek özel karakterler olacaktır. Mesela bir linkte # & % = : ; gibi çok karakter vardır. Eğer bunları belirtmezsek. Kullanıcının burada belirtmediğimiz karakterleri içeren bir link girişinde otomatik link çevirilirken o belirtmediğimiz karakterden sonrası link'e dahil edilmeyecektir. Eski sitemde böyleydi :-)
Bu üçüncü grup parantez'le seçilen "www.deneme.com.tr/deneme.php?asd=1&qwe=2$%_*#git" gibi kısım \3 değişkenine atanacaktır.

Sonuç olarak biz metinimizi şu aşağıdaki kod ile otomatk link haline çevirebileceğiz :
$yazi = preg_replace("#([\n ])([a-z]+?)://([a-z0-9\-\.,\?!%\*_\#:;~\\&$@\/=\+]+)#ie",
  "'\\1<a href=\"\\2://\\3\">\\2://\\3</a>'", $yazi);
Bu sitede kullandığım otomatik link dönüşüm fonksiyonu ise şu şekilde :
function linkler( $yazi ) {
    // http seklindekiler
    $yazi = preg_replace("#([\n ])([a-z]+?)://([a-z0-9\-\.,\?!%\*_\#:;~\\&$@\/=\+]+)#ie",
      "'\\1<a href=\"\\2://\\3\" >\\2://\\3</a>'", $yazi);

    // www seklindekiler
    $yazi = preg_replace("#([\n ])www\.([a-z0-9\-]+)\.([a-z0-9\-.\~]+)((?:/[a-z0-9\-\.,\?!%\*_\#:;~\\&$@\/=\+]*)?)#i",
      "\\1<a href=\"http://www.\\2.\\3\\4\">www.\\2.\\3\\4</a>", $yazi);

    // epostalar
    $yazi = preg_replace("#([\n ])([a-z0-9\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)?[\w]+)#i",
      "\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>", $yazi);
    
    return($yazi); 
}
Bu fonksiyon ile linklerinizi ve epostalarınızı otomatik dönüştirebilirsiniz.

Hazırlayan : Mehmet Fatih YILDIZ

Başlıklar

p Paragraf Etiketi
Seçilen metini paragrafa dönüştürür, biraz içeri, alt ve üste de biraz boşluk ekler. Kapanış etiketi zorunludur.

h* (Headings : Başlıklar)
H etiketi başlıkları belirler. h1, h2, ... h6 başlıklarından sayı büyüdükçe yazı küçülür.

div ve span
Stil uygulamak için kullandığımız metin bloğudur. class, id, style parametrelerini kullanarak stil tanımlayabilirsiniz.

br ve nobr
Yeni satırla ilgili etiketler; br etiketi yeni etikete geçişi sağlar. HTML yazarken yazdığınız metinde satır sonlarında br etiketi yoksa, yeni satırlar kelime ayracı yani boşluk olarak algılanır. Eğer yazdığınız metin bloğunu tek bir satırda görüntülemek istiyorsanız nobr kullanırsınız. Normalde metinler tarayıcı penceresine sığdırılır. nobr etiketini kullanarak bunu engelleyebilirsiniz.

Örnekler :
<!-- BAŞLIKLAR -->
<h1>En büyük başlık bu başlık</h1>
<h2>2. numara</h2>
<h3>3. numara</h3>
<h4>4. numara</h4>
<h5>5. numara</h5>
<h6>6. numara</h6>

<!-- BLOKLAR -->
<div id="kimliksiz" class="kutu koyu">Bu blok tüm satıra yayılır.</div>
yazı yazı yazı <span class="bilgi">Bilgilendirme yazısı</span> yazı deveam eder.

<!-- BR ve NOBR -->
yazı yazı<br>
yeni satır<br>
3. satır<br>
...

<nobr>
bu
kelimeler
yan
yana
bitisik
cikacaktir
</nobr>

Metin biçimlendirmek

font : Metin bloğunu ifade eder. size parametresine, web font boyutu standartlarında verilen boyuta göre metin bloğundaki yazıların boyutunu, face ile de metin bloğundaki yazıların yazı karakterini ayarlar. size geçerli olarak 3'tür ve 1 ile 7 arasında değerler alır.

b ve strong : İçindeki metni kalın yazı stilinde görüntüler.
i ve em : İçindeki metni yatık stilde görüntüler.
u : İçindeki metni altı çizgili stilde görüntüler.

pre (preformatted : formatlanmamış) : Eşaralıklı (daktilo) metin biçimini ifade eder. Genellikle kod çıktılarını verirken, konsol, komut çıktısı veya ascii çalışmaları görüntülerken kullanırız. Bu etiketler arasına yazılan metinlerde, boşluk sayıları, yeni satırlar olduğu gibi korunur.

Örnekler :
<!-- METİN STİLLERİ -->
<b>Koyu yazı</b>
<strong>Bu da koyu</strong>

<i>Yana yatık yazı</i>
<em>Ben de ben de :)</em>

<u>Altı çizgili</u>
<s>Üstü çizgili</s>

<big>Normalden biraz daha büyük yazı</big>
<small>Bu da küçük</small>


<!-- PRE -->
<pre>
Formatlanmamış metin, Eş aralıklı
Mesela ASCII art bastığınızda
veya kod bastığınızda çok iyi gider :)

.--- İsim ---- Yaş ---- Şehir ----.
|    Ece    |  20   |   Ankara    |
| Jonathan  |  26   |  New York   |
| Muhammed  |  23   |   Cairo     |
'---------------------------------'

Gibi bir ascii tablo. (Şu anda kod bölümünde
gördüğünüz bir preformatted text örneğin.)
</pre>

Köprüler

Başka bir sayfa, sayfa konumu veya dosyaya köprü kurmak için a etiketi kullanılır.

Sayfa konumu belirlemek için sadece name parametresi belirleyin. Çağırırken href="#konum_adi" şeklinde kullanın.

Dosya veya başka bir sayfaya köprü için href="sayfa_dosyasi_adresi" şeklindeki parametreyi belirleyin. Başka sitedeki linkler için kesin protokolü belirlemeniz gerekir.
("www..." yerine "http://www..." şeklinde)

Köprülerin farklı çerçevelerde veya yeni bir pencerede açılmasını sağlamak için target="cerceve_adi" parametresini ayarlayın. Eğer belirtilen çerçeve mevcut değilse sayfa, yeni pencerede açılır. Yeni pencere de açmanın bir diğer (ve en genel) yolu parametreye _blank değeri vermektir.

Epostalara doğrudan köprü vermek için href parametresine "mailto:[email protected]" şeklinde değer verin. İşletim sisteminizin geçerli eposta programına, belirtilen eposta adresine yeni ileti açmasını emreder.

Örnekler :
<a href="http://www.mfyz.com/">Normal link</a>

<a href="http://www.mfyz.com/#sayfanin_sonu">Sayfa içi link (http://www.mfyz.com/ sayfasındaki "sayfanin_sonu" ile isimlendirilmis nenseye gider. Eğer isim yoksa id'ye de bakılır.)</a>

<a href="http://www.mfyz.com/" target="_blank">yeni pencerede açılan link</a>

<a href="mailto:[email protected]">Şikayet etmek için tıklayın.</a>
Hazırlayan : Mehmet Fatih YILDIZ

Bu döküman 30.02.2008 tarihinde yeniden düzenlenmiştir.

Popüler Etiketler

örnek kod apple laptop notebook regex jquery link plugin ios iphone ipad app store store in-app purchase purchase subscription verification storekit itunes connect itunes oyun pharma hack php wordpress kitap ui design development social ie internet explorer css3 html5 sql query injection css javascript cache htaccess apache js db database service free api html table facebook media share meta wanda generator object konsol terminal box cookie subdomain optimization internet statistics sosyal medya istatistik graph imza signature mail doritos kampanya tytz firefox download google search ajax seo mfyz integration network blog cms less compile compiler macosx windows linux app on-the-fly tebrik wireless mobile session form input textarea select server www redirect crossdomain iOS date tarih support browser newsletter radio button switch login screen tool gimp job dokuman ubuntu ntfs fstab mod_rewrite url assets lisans license startups music ipucu twitter bootstrap mootools digital chart grafik workspace ux webkit ruffles developer pear mdb2 mysql mssql pgsql xmlhttprequest export logo route router spam rss xml nedir icon ikon banner calendar kontrol yapıları if while portfolio optimizasyon sitemap opengraph lifestream proje svn subversion git version control deployment widget analyse procedure language style phpstorm jetbrains ide editor osx applications insanlar coding framework auth player diff xhtml parse prepare execute open source fql web app code icons connect browsers howto http kurulum nasıl zaman