http://www.bildirgec.org/ tr-tr 40 bildirgec.org - FlashMan - beğendikleri FlashMan <p>Mükemmel <a href="http://www.bildirgec.org/etiket/jquery/">jQuery</a> eklentilerine ve onları nerede bulabileceğine dair sayısız makale bulunuyor. Ancak bazen bu üçüncü parti kaynaklara ve eklentilere bel bağlamamak en iyisidir. Tıpkı eskiden olduğu gibi kendiniz yapın. Bugün, günümüz modern web siteleri ve uygulamalarında kullanılan 20'nin üzerinde yaratıcı ve pratik jQuery kullanım örneklerini listelemeye çalışacağız. Eminim bu örnekler size bir sonraki projeniz için ilham verecektir.</p> <p><strong>James Padolsey Renk Değiştiricisi</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-01.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://nettuts.com">Nettuts</a> yazarlarından James Padolsey'in web sitesinde güzel bir özellik bulunuyor. Sitenin sağ üst kısmında bulunan "özelleştir" çubuğu başlık kısmının arkaplan rengini değiştirmenizin sağlıyor.</p> <ul> <li><a href="http://james.padolsey.com/">Siteyi ziyaret edin</a>.</li> </ul> <p><strong>Dragon Interactive'in jQuery Navigasyonu</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-02.jpg' alt="\"\"" border="0"><br></div></p> <p>Bu elemanlar aşağı yukarı web tasarımının tanrılarıdır ve siteleri de bunu doğrular nitelikte. Bunun için sadece ana sayfalarının başlık kısmındaki jQuery navigasyonuna bakmak yeterli. Daha önce hiç bu kadar seksi bir navigasyon gördünüz mü?</p> <ul> <li><a href="http://dragoninteractive.com/">Siteyi ziyaret edin</a>.</li> </ul> <p><strong>FamSpams Facebox</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-03.jpg' alt="\"\"" border="0"><br></div></p> <p>FamFamFam, sitenin FamSpam özelliği için özel bir lightbox betiğine ihtiyaç duydu. Site bunun üzerine <a href="http://famspam.com/facebox">FaceBox</a> adı verilen bir yöntem oluşturmaya karar verdi. FaceBox, lightbox'un efektlerini kopyalıyor ancak statik html sayfalarını, iletişim formlarını; kısacası istediğiniz her şeyi gösterebilmenizi sağlıyor. Facebox günümüzde yoğun talebin ardından bir jQuery eklentisi olarak dağıtılıyor.</p> <ul> <li><a href="http://famspam.com/">Siteyi ziyaret edin</a>.</li> </ul> <p><!-- buradan kes --></p> <p><strong>Grooveshark Widget Creator</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-04.jpg' alt="\"\"" border="0"><br></div></p> <p>Sıradan bir flash menüsü / kontrol menüsü kullanmak yerine, Grooveshark biraz karıştırarak özel bir jQuery betiği oluşturmakta bulmuş çözümü. Sitenin sunduğu betik, kendi müzik widgetlerinizi oluşturabilmenizi sağlıyor ve pek güzel görünüyor.</p> <ul> <li><a href="http://widgets.grooveshark.com/">Siteyi ziyaret edin</a>.</li> </ul> <p><strong>CSS-Tricks Fade-In Navigasyonu</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-05.jpg' alt="\"\"" border="0"><br></div></p> <p>Chris Coyier tarafından hazırlanan CSS-Tricks, inanılmaz derecede basit ancak kullanışlı bir jQuery menüsüne sahip. Bağlantıların üzerine fare imleci götürüldüğünde doğrudan renkleri değiştirmektense, jQuery kullanılarak renk geçişi sağlanmış durumda.</p> <ul> <li><a href="http://nettuts.com/articles/web-roundups/the-20-most-practical-and-creative-uses-of-jquery/">Siteyi ziyaret edin</a></li> </ul> <p><strong>David Walsh Link Nudge</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-06.jpg' alt="\"\"" border="0"><br></div></p> <p>DavidWalsh.name'den geliştirici David Walsh, bağlantılarınızın üzerine fare imlecini götürdüğünüzde küçük bir iteleme efekti ile sonuçlanan küçük ve kullanılması çok kolay olan bir betiği bünyesinde barındırıyor. Bu betik jQuery'nin hover yeteneklerinden sonuna kadar faydalanıyor. Yan çubuktaki ve altlıktaki bağlantılar üzerinde efekti görebilirsiniz.</p> <ul> <li><a href="http://davidwalsh.name/">Siteyi ziyaret edin</a></li> </ul> <p><strong>CarrotCreative - Sitelere Yönelik Özel Lightboxlar</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-07.jpg' alt="\"\"" border="0"><br></div></p> <p>CarrotCreative websitesini ziyaret ederseniz, iki özel jQuery efekti ile karşılaşacaksınızdır. İlk olarak eğer sol üst kısımdaki sitelere tıklarsanız, sitelerin ve simgelerinin listelendiği 'lightbox' benzeri bir efektin kendine özgü uygulamasını göreceksinizdir. İkincisi ise eğer herhangi bir navigasyon bağlantısına tıklarsanız, sayfanın yeniden yüklenmediğini, bunun yerine yeni sayfaların sağ taraftan geldiğini göreceksinizdir.</p> <ul> <li><a href="http://carrotcreative.com/">Siteyi ziyaret edin</a></li> </ul> <p><strong>BrightCreative Portfolyosu</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-08.jpg' alt="\"\"" border="0"><br></div></p> <p>Bir diğer "ikisi bir arada" kullanım örneği daha... Bright Creative, site navigasyonu üzerinde gerçekten rahatlatıcı ve sımsıcak bir jQuery efektine sahip. Bunun yanısıra sitenin tüm diğer portfolyo sayfalarının sekme efekti de bulunuyor, bu sebeple kullanıcının her bir yeni sayfa için sayfanın tamamını yüklemesi gerekmiyor - jQuery ve AJAX'ın da yardımıyla.</p> <ul> <li><a href="http://www.brightcreative.com/portfolio/">Siteyi ziyaret edin</a></li> </ul> <p><strong>İnanılmaz Giriş Formu</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-09.jpg' alt="\"\"" border="0"><br></div></p> <p>Çok uzun zaman önce, Connor Zwick nasıl büyüleyici bir açılır menü yapılabileceğine dair güzel bir rehber yazmıştı.</p> <ul> <li><a href="http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/">Siteyi ziyaret edin</a></li> </ul> <p><strong>Aviary'nin Uygulama Kaydırıcısı</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-10.jpg' alt="\"\"" border="0"><br></div></p> <p>Bu kullanımı bir tür "marquee" olarak adlandırmak hata olur. Bunun yerine Aviary, çok güzel görünen ve işleyen bir 'kaydırıcı' kullanarak, çok miktarda metni küçük bir alanda görüntüleyebilmeyi başarabilmişler. Daha da iyisi JavaScript'in etkin olmadığı ortamlarda bile kaydırıcının bir nebzeye kadar işleyebiliyor oluşu.</p> <ul> <li><a href="http://aviary.com/home?v=b">Siteyi ziyaret edin</a></li> </ul> <p><strong>DesignFlavr'ın Geçiş Efekti</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-11.jpg' alt="\"\"" border="0"><br></div></p> <p>İlham alınacak tasarımlara yönelik kaynakları ile tanınan DesignFlavr, sade bir fadeIn/fadeOut efektini sitenin seçkin çalışmalarını ve onlara bağlı açıklamalarını görüntülemek için kullanmışlar. Ayrıca site yetkilileri sitenin ana navigasyonu üzerinde lavalamp eklentisini de çok güzel bir şekilde kullanmışlar.</p> <ul> <li><a href="http://www.designflavr.com/">Siteyi ziyaret edin</a></li> </ul> <p><strong>HV-Design'ın RSS Simgesi İçin Kullandığı Belirme Efekti</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-12.jpg' alt="\"\"" border="0"><br></div></p> <p>HV-Design'ın ana sayfasında RSS simgesinin ilk olarak bir taslak olarak belirdiğini, ardından da fare ile üzerine gelindiğinde tamamlanmış bir RSS simgesine büründüğünü göreceksiniz.</p> <ul> <li><a href="http://hv-designs.co.uk/">Siteyi ziyaret edin</a></li> </ul> <p><strong>Asylum'un Özel Kaydırıcısı</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-13.jpg' alt="\"\"" border="0"><br></div></p> <p>Mükemmel bir web sitesi olmasının yanısıra, Asylum'ın "seçkin makaleler" bölümü için kullandığı kaydırıcı da kendisini benzerlerinden bir adım öne çıkarıyor. Bu kaydırıcının diğerlerinden neden daha güzel olduğunu anlamak zor, bunun sebebi muhtemelen ilgili kaydırıcının diğerlerinden kısmen daha farklı davranıyor olması. Siteye girin ve kendiniz test edin.</p> <ul> <li><a href="http://www.asylum.com/">Siteyi ziyaret edin</a></li> </ul> <p><strong>jQuery Kullanılarak Kolaylaştırılan 5 JavaScript Tekniği</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-14.jpg' alt="\"\"" border="0"><br></div></p> <p>Brian Reindel, hazırladığı web sitesi üzerinde istediğiniz şekilde kullanabileceğiniz 5 özel betiği sergiliyor. Makale, daha önce kullanılan javascript tekniklerini alıyor ve onları daha güçlü, daha sade okunması daha kolay kılmak için jQuery ile harmanlıyor.</p> <p><strong>Coda'nın Tüm Web Sitesi</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-15.jpg' alt="\"\"" border="0"><br></div></p> <p>Coda, büyüleyici kullanıcı arabirimi ve site tasarımı ile kendisini benzerlerinden bir adım öne çıkarıyor. Sitelerinde kullandıkları sekmeli içeriğin kullanım şekli, sitenin yayımlanmasının hemen ardından jQuery geliştiricileri arasında yaygaraya neden oldu ve herkes, sitelerine bu yöntemi entegre etmeye çalıştı. Ayrıca site üzerinde de başlık kısmında bulunan bağlantılar için çok güzel bir hover efekti kullanılmış.</p> <ul> <li><a href="http://www.panic.com/coda/">Siteyi ziyaret edin</a></li> </ul> <p><strong>Clark Lab Geçiş Efekti</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-16.jpg' alt="\"\"" border="0"><br></div></p> <p>ClarkLab, <a href="http://themeforest.net/">ThemeForest</a> sitesinde yazarlık yapan tanınmış ve başarılı bir yazardır. Eğer aşağıdaki bağlantıya tıklayarak onun portföyünü ziyaret ederseniz, büyük boyutlu başlık imajının bir süre sonra kendisinin son çalışmalarını gösteren içeriğe doğru yavaşça geçiş yaptığını göreceksinizdir. Geçiş efekti o kadar başarılı bir şekilde uygulanmış ki üstteki imajın değiştiğini zar zor fark edebiliyorsunuz.</p> <ul> <li><a href="http://www.clarklab.net/blog/">Siteyi ziyaret edin</a></li> </ul> <p><strong>Rob Young Kullanıcı Arabirimi</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-17.jpg' alt="\"\"" border="0"><br></div></p> <p>Tasarımcı ve Sanat Yönetmeni Rob Young, bugüne kadarki çalışmalarını bir Mac ekranı üzerinde görüntüleyen bir kullanıcı arabirimini sitesinde kullanmış. Ardından jQuery kaydırma efektlerini kullanarak, her bir yeni sayfanın sanki bilgisayar ekranı üzerinde görüntüleniyormuşçasına kayarak ekran üzerinde belirmesini sağlamış.</p> <p><a href="http://www.eisforeffort.com/">Siteyi Ziyaret Edin</a></p> <p><strong>Web Designer Wall</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-18.jpg' alt="\"\"" border="0"><br></div></p> <p>Görsel olarak büyüleyici bir site olmasının yanısıra WDW bazı elementlerin üzerine fare imleci götürüldüğünde beliren özel olarak gelitirilmiş bir jQuery betiğini kullanıyor. Efektleri görebilmek için siteyi ziyaret ettikten sonra fare imlecinizi RSS ve navigasyon öğeleri üzerine götürün.</p> <ul> <li><a href="http://www.webdesignerwall.com/">Siteyi ziyaret edin</a></li> </ul> <p><strong>Junaid W. Hanif</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-19.jpg' alt="\"\"" border="0"><br></div></p> <p>Bir diğer güzel sekme efekti daha... Okların yerine sayfalama ve AJAX kullanılarak sade ve kullanışlı bir kullanıcı arabirimi oluşturulmuş. Ayrıca navigasyon öğeleri de sade ve güzel bir efekte sahip.</p> <ul> <li><a href="http://www.jwhanif.net/">Siteyi ziyaret edin</a></li> </ul> <p><strong>KomodoMedia</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-20.jpg' alt="\"\"" border="0"><br></div></p> <p>En sevdiğimi en sona sakladım. İlk olarak tasarıma şöyle bir bakın. Ne kadar güzel, özgün ve rahatlatıcı değil mi? Site üzerinde bugüne kadar gördüğüm en yaratıcı jQuery efektlerinden birisi kullanılmış. 'foilage-o-meter' adı verilen bir kaydırma çubuğu kullanıldığında site tasarımının genelinin yavaşça değiştiğine şahit olacaksınız. Site genelindeki sürprizler için de sitenin kaynak koduna bakmayı unutmayın!</p> <ul> <li><a href="http://www.komodomedia.com/">Siteyi ziyaret edin</a></li> </ul> <p>jQuery'nin sizin yaratıcılığınız ve yetenekleriniz doğrultusunda yapabilecekleri sınırlandırılan bir araç olduğu daima aklınızda bulunsun. Tasarımınız ve geliştirme süreciniz daima kendinize özgü olsun, bunun sonucunda çok güzel sonuçlarla karşılaşacağınızdan emin olabilirsiniz. Lütfen yorumlarınızla sizin de tasarımını ve işlevselliğini beğendiğiniz siteleri bizlerle paylaşmayı unutmayın.</p> <ul> <li><strong>Kaynak:</strong> <a href="http://nettuts.com/articles/web-roundups/the-20-most-practical-and-creative-uses-of-jquery/">NetTuts</a></li> </ul> <strong>jQuery ile ilgili yazdığım diğer yazılar</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/mukemmel-jquery-navigasyonuna-sahip-8">Mükemmel jQuery Navigasyonuna Sahip 8 Site</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-kullanarak-satirici-metinlerin-rengini">jQuery Kullanarak Satıriçi Metinlerin Rengini Değiştirmek</a></li> <li><a href="http://www.bildirgec.org/yazi/size-sifirdan-jquery-ogretecek-15">Size Sıfırdan jQuery Öğretecek 15 Kaynak</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-ile-kolayca-ipucu-tooltip">jQuery İle Kolayca İpucu (Tooltip) Oluşturma Yöntemleri</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/FlashMan">FlashMan</a> tarafından <a href=" http://www.bildirgec.org/yazi/jquery-nin-en-pratik-ve ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 20 Jan 2009 14:25:00 GMT 192829@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/jquery-nin-en-pratik-ve