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

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