jquery | bildirgec.org

jQuery , ile yapılmış birbirinden güzel 10 tane uygulama ve uygulamaların nasıl yapıldığı burada anlatılmış. Kısaca değinirsek uygulamalara menüler, slide panel, açılır/kapanır yazı kutuları, resim galerisi, link yanlarına küçük resim{ler} ... var. uygulamaların nasıl yapıldığını detaylı bir şekilde öğrenmek için buraya, uygulamaların demoları için buraya, uygulamaları indirmek için buraya tıklamanız yeterli.

css kulllanarak artık çizgi film karakterleri ya da bir resim yapmak düşüncesi bir insanevladının aklına nasıl gelebilir bilmiyorum. homer ve bush çizimlerinin CSS ve ASCII karakterleri kullanılarak yapılışını görünce bu soruyu siz de kendinize sorabilirsiniz.

çizimler jquery isimli bir javscript kütüphanesi kullanılarak gerçekleştirilmiş.(@Ractamainus 'un düzeltmesi şöyle: "bu kütüphane sadece yavaş olarak bu işlemin izlenebilmesi için kullanılmıştır") aşağıda çizimin gerçekleşme anından bir ara kesit bulunuyor.

Birbirinden güzel fotoğraflarınız varsa ve bunları birilerine göstermek istiyorsanız o halde fotoğraf galerileri tam size göre. İşte ajax ve javascript ile hazırlanmış 15 fotoğraf galerisi:

markItUp! jQuery ile yazılış bir çevrimiçi işaretleme dili editörüdür.. Html, Textile, Wiki Syntax, Markdown, BBcode gibi işaretleme dilleri için çevrimiçi yazım gerçekleştirir ve Ajax ile dinamik önizleme özelliği vardır..

Güzel bir arayüze, tema desteğine ve genişleme imkanına sahip markItUp!'ı buradan inceleyebilir ve buradan indirebilirsiniz.

Web geliştirme işi ile uğraşanların bildiği üzere jquery script kütüphanesi geliştirmeye pek çok kolaylık ve estetik anlamda da tasarımlarımıza güzellik katmaktadır. Fakat 3 gündür uğraştığım bir web projesinde dün itibariyle lightbox da eklemeye karar verince bir takım problemler ile karşılaştım. jquery, lightbox ve Swfobject ile beraber bir türlü çalışmak istemedi. sorun Hem IE hem de Firefox'da gözlenebiliyordu.. Uzun uğraşlar sonucunda jquery için de lightbox eklentisi olduğunu farkettim. uygulama sonucunda problem çözüldü. tüm scriptler çakışmadan çalışmayı bildi. Konuyla ilgili benzer sıkıntı çekenler için faydalı olabileceğini düşünüyorum.

Dreamweaver web tasarımlarda en çok kullanılan programlardan bir tanesi. bir arkadaşta buna istinaden burada javascript kütüphaneleri ile (jQuery, Prototype, MooTools, YUI) dreamweaver'da (MX-CS3) kod geliştirenlere yardımcı olması için bu kütüphanelere kod desteği geliştirmiş. jquery ve prototype için beta'lar hazır. mootools ve yui için ise biraz sabretmemiz gerekiyor.

web sitenizde kullanabileceğiniz ya da kod geliştirirken size ilham verecek (open source) açık kaynak kodlardır.

sayfanızdaki küçük reimlerin orjinal hallerini, kullanıcıyı başka bir sayfaya götürmeden göstermenizi sağlar. (arka planı siyah yaparak, kapatma butonu ile birlikte beyaz bordürlü bir şekilde gösterir)
bir zaman çizelgesi üzerinde, bölgelerin arasındaki zaman farkını göstermeye yarar.

reflection.js resimlerinize yada logolarınıza hiçbir işlem yapmadan yansıma özelliği katar.
web 2.0 sitelerde bolca görebilirsiniz, farklı bir yöntem.
(class="reflect rheight50 ropacity33" width="435") sitenizdeki her resme bu yöntemle yansıma ekleyebilirsiniz.

elinizdeki verileri web sitenizde veya bilgisayarınızda grafiksel olarak sunmanızı çok kolay bir şekilde sağlar.
tek yapmanız gereken şablon seçip, başlığı, veri sınıflarını ve değerlerini yazı/xml dosyasına girmek, flash arayüz+animasyon+fare işlevi+güzel tasarıma sahiptir.
sitede farklı amaçlar için tasarlanmış örnekleride mevcuttur.

plotr ise pie & donut chart'ın java versiyonudur. görsel açıdan güzeldir fakat tarayıcıların java destekleri bakımından problem yaratabilir.

tarayıcı üzerinden anında mesajlaşma sistemidir.

rating sistemidir, basit ve güzel bir görünüme sahiptir. sitenize farklı türlerde oylama özelliği ekleyebilirsiniz.

farklı amaçlar için kullanabilceğiniz sekmeli içerik gösterimi sağlayan bir java scripttir. burda tavsiye etmiştim.

sürükle bırak tekniğine bir örnek:) sayfalarınızdaki resimlerin veya diğer içeriğin sürüklenip bırakılmasını sağlamak için kullanabilirsiniz.

yükleniyor...... olayını görselleştirmek için güzel bir örnektir. 4 farklı tasarımda örnek mevcuttur dilerseniz kendi tasarımınızı geliştirebilirsiniz.
sayfadaki icon'lara tıklayarak test edebilirsiniz.

tab content'in biraz daha gelişmiş versiyonudur, sekmelerde resimler veya kaynak kodlar göstermenizide sağlar.

üyelik sistemi olan web sitelerinde üyelerin profil bilgilerini güncellemelerini daha görsel ve aynı sayfada yapmalarını sağlamak için geliştirilmiş bir kod. burda flickr örnek verilmiş.

jquery için güzel bir ajax örneğidir. demo sayfasından test edebilirsiniz.

sayfalarında kod vb. içerik yada detaylı anlatım yayımlayan arkadaşlar için güzel bir okordiyon örneğidir. seri çalışır.

oylama barı'dır (rating bar) sitenize eklemek için kılavuz mevcuttur. kullandığınız cms sistemi için böyle bir eklenti mevcut değilse yahut cms geliştiriyorsanız kullanabileceğiniz bir scripttir.

aşağıdakileride açıklarsam destan olur heralde, bundan sonrasını size bırakıyorum. faydalı olması dileğiyle.
devamı:

monc.se sayfasında alternatif bir javascript resim&fotoğraf galerisi çalışması yapılmış. inceleme sayfasında ingilizce olarak detaylı açıklama var.

jquery kullanılarak yapılmış galeriyi indirebilir, demoyu inceleyebilirsiniz. başka bir demo sayfası da bulunuyor.

ajaxorized web teknolojileri üzerine yoğunlaşmış, web ortamında çalışması planlanan ürünlerin geliştirme sürecinde karşılaşılabilecek ihtiyaçları karşılamak amacıyla kurulmuş bir site.

sitede hemen hemen her konuda yapılmış örnek çalışmalar ve demoları bulunuyor. web programlama ve tasarım açısından hızlı çözümler en kısa yöntemlerle sunulmaya çalışılmış.

örneğin 3 boyutlu resim ve fotoğraf geçişleriyle ilgili olan çalışma yayınlanmış. örneği denemek için deneme sayfasına gidebilirsiniz.