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

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