Javascript ile yapılan birçok örneği zaman zaman bloglarda görmekteyiz. genelde yeni keşfedilen ve yapılan javascript uygulamaları büyük boyutlu ve bandwidth canavarı oluyor. Daha sonra kodlar çeşitli kullanıcılar tarafından yeniden düzeltilerek minimum boyuta indiriliyor. Daha önce yazılarımda örnek verdiğim Michael Leigeber de bu minimalize etme işinden hoşlanıyor olacak ki “1KB’lık akordiyon menü“,”1KB’lik kayan menü” ve “2KB’lik tooltip” gibi popüler uygulamaları minimalize etmiş.

Leigeber‘in son projesi ise birçok sitede rastladığımız slideshow uygulaması olmuş. 5KB’lık çok hoş bir slideshow kodu hazırlayan leigeber’in örneğine buradan ulaşabilirsiniz.

sIFR, sayfalarımızda göze hitap etme fonksiyonunun yanında Arama motorları tarafından indekslenebilme özelliği ile bir anda tasarım dünyasının göz bebeği konumuna geldi. 1-2 dezavantajı bulunmasına rağmen hala çok etkili bir rakip üretilemedi ve flir, typeface.js gibi rakipleri karşısında üstünlüğü elinde tutuyor. Bu kadar yararlı bir araçtan maksimum performans olmak isteyenler için Jonathan Neal tarafından bir jQuery eklentisi geliştirilmiş. bu eklenti sayesinde jQuery fonksiyonlarını sIFR tekniği ile birlikte kullanarak maksimum verim elde edilebilmesi sağlanmış.

İstenilen yere sIFR uygulatma ve sIFR’li yazıyı silme, zoom yapma, yazı renginde kod değiştirmeksizin oynamalar yapma ve sayamayacağım birçok özellik bu eklenti ile birlikte jQuery kullanıcılarının hizmetine sunulmuş.

Demosunu incelemek ve denemek istiyorsanız jQuery Sifr Plugin sayfasına alalım sizi.

RSS Reader’ımda tasarım dünyasındaki son gelişmeleri takip ederken Enhance blogunda tanıtımı yapılan Pulse eklentisini gördüm. jQuery‘nin bir eklentisi olan pulse sayesinde, sadece “animated gif” dosyaları ile yapabileceğimiz ve statik olarak kullanabileceğimiz yanıp sönen yazıları, resimleri ve kutuları oluşturabilmemiz mümkün. Uyarı durumlarında çok yararlı olan bu yanar-sönerli eklenti James Padolsey tarafından geliştirilmiş. Eğer bu tarz bir eklentiye ihtiyacınız varsa ilgili makaleyi incelemenizi öneririm. Pulse eklentisi sadece 6KB yer kaplıyor ve jQuery’e ihtiyaç duyuyor.

Pulse’un renk değişimi yapabildiği css elemanları:

• color
• border-color
• background-color
• opacity

İngilizcesi Autocompletion olan “Otomatik Tamamlama” sistemi, iki ya da 3 harfi input‘a grdikten sonra en yakın sonuçları bize anında gösteren ve en uygununu seçmemizi sağlayan bir sistemdir. Javascript sayesinde yeni bir sayfa yüklemeden yapabileceğimiz bu fonksiyon facebook‘un arkadaş profilini arama kutusunda kullanılır.

Otomatik Tamamlama sistemi, site içi arama fonksiyonunun sıkça kullanıldığı sitelerde bulunmalıdır. Örneğin bir alışveriş siteniz var ya da kelephir.net gibi günlük ürünleri indeksleyen bir siteye sahipseniz daha önceki ürünlerin bulunabilmesi için otomatik tamamlama sistemini kullanabilirsiniz.

Devthought sitesinde hem otomatik tamamlama hem de facebook tarzı birçok ismin aynı anda eklenebildiği input , kullanılabildiği alanların fazlalığı ve işlevselliği bakımından Olmazsa Olmazlar Serimin 1 numarasında bulunuyor.

Kaynak Kod || Demo

Web Tasarımı hakkında bir çok ipucu ve rehberi yayınlayan CSS-Tricks son zamanlarda Screencast’leri ile bizi oyalamakta. Bu screencast’lerden bence en iyileri ise jQuery’nin uygulamalı ve detaylıca anlatıldığı Video1 ve Video2. jQuery öğrenmek isteyenler bu fırsatı kaçırmasınlar derim…

Çoğu zaman sitelerimizde form elemanları kullanarak misafirlerden bazı bilgiler alırız ve sitemizin içeriğine katkıda bulunuruz. Fakat istediğimiz formu en iyi şekilde yaratabilmek ve tarayıcıların hepsine uyumlu hale getirmek için oldukça çaba sarfeder, zamanımızı boşa harcarız. Bu zaman kaybını önlemek içinse ufak miktarda ücretler ödeyerek form yaratıcılara başvurabiliriz.

Çeşitli ödeme seçenekleri ve ücretsiz hizmeti de bulunan Wufoo, online form yaratırken işleri en basite indirgeyen bir site. Sürükle bırak tarzı form yaratımı olan, ajax fonksiyonları ile süslenmiş ve sonunda formu invisible yaparak yollandı mesajını ekrana yansıtabilen bir özelliği de bulunan bu form yaratıcı oldukça profesyonel bir web uygulaması. Sitedeki Tur özellğini kullanarak daha çok özelliği görebilirsiniz.

Sık sık karşılaştığımız bir yöntem olan, genellikle sayfanın sol kısmında yer alır bu reklamlar. Biz sayfayı aşağı kaydırdıkça reklam da sayfayla birlikte aşağı kayar. Bu kayan içerik reklamın daha çok görünmesini sağlar fakat tüm sayfayı kaplayan tasarımlarda bu reklamı kullanmak imkansızdır. Eğer sayfamızın sol tarafında içerik varsa bunun görünmesini engelleyen kayan reklamları bu yüzden çoğu tasarımcı kullanmaz. İşte tam bu noktada ajax yardımımıza koşuyor. Ajax ile bu reklamları sol tarafta içerik olmadığı zaman gösterilebilecek şekilde ayarlayabiliyoruz. Örnek 1 ve Örnek 2‘ye bakarak görünümlerine bakabilirsiniz. Webresourcesdepot’da yayınlanan kaynak kodlara ise buradan ulaşabilirsiniz.

Çoğu sitede iletişim formlarında gördüğüm bir özellik var. Formu doldurup yolla tuşuna bastığımız zaman bizi hiçbir sayfaya yönlendirmeden aynı sayfa içinde form yollanıyor ve kullanıcıya yollandı uyarısı veriliyor. Bu güzel ve kolay iletişim formunu yapmak için neti araştırırken karşıma buradaki rehber çıktı. Sitenize ajax ile yeni zöellikler katan bu formu yapmak için ilgili rehbere göz atabilirsiniz.

Demo’ya bakmak için tıklayın.

Popüler ajax kütüphanelerinden biri olan Mootools için rehber niteliği taşıyan 20 yabancı kaynak şu sitede listelenmiş. Mootools‘u kullanmak isteyip de nereden başlayacağını bilemeyenler için fevkalade bir kaynak. Sitelere buradan ulaşabilirsiniz.

Javascript kütüphanelerinin ilk popüler olduğu günlerde kendimiz çalışıp didinip bunlara uyan kodlar yazmaya çalışırdık. Ama aradan uzun bir süre geçti ve bir hayli gelişen kütüphaneleri kullanan birçok site ortaya çıktı. Hal böyle olunca herkes kütüphaneleri kullanarak siteleri için kullanışlı kodların peşine düştü. Şuradan ulaşabileceğiniz blog da en kullanışlı 10 tane jQuery eklentisini sıralamış.

1. jQuery UI
2. Markitup: istediğiniz textarea’yı html editöre çevirebilecek bir js eklentisi
3. jQuery cookie plugin : cookie’ler üzerinde işlem yapabileceğiniz bir eklenti
4. lightbox
5. jquery corner plugin: yuvarlak köşeler yaratmak için gerekli bir eklenti
6. jtip : basit bir tooltip eklentisi
7. lavalamp : kayma efekti veren bir eklenti
8. superfish : jQuery animasyonlarını kullanan bir menü eklentisi
9. easing : jQuery animasyonlarını basitçe kullanabileceğiniz bir eklenti
10. jcarousel :  dönen menüleri yapabileceğimiz bir eklenti.

Türkçeleştirdiğim yazıya buradan ulaşabilirsiniz.