buton | bildirgec.org

jQuery ile artık birçok uygulama örneği bulmak mevcut. Klasik uygulamaların dışında animasyonlar ve oyunlar da css3 ve html5 ile artmış durumda. Aşağıdaki uygulamaları doğrudan web sitenize ekleyebilir ve ziyaretçileriniz arasında rekabet ortamı yaratabilirsiniz. İşte muhteşem jQuery Oyun uygulamaları;

Twitch

Twich, pop-up penceleri üzerindeki 9 aşamalı minimal bir oyun serisidir. Her yeni seviyeye geçtiğinizde yeni bir pencere açılarak farklı bir oyun karşınıza gelir. Oyun sadece fare ile oynanır.

Browser Ball

Resimdeki plaj topu ile açılacak yeni pencerede oynayabilirsiniz. Benzer masaüstü uygulamalardan esinlenerek hazırlanmış bu oyun ile ziyaretçileriniz boş vakitlerini sizin sitenizde geçirecekler.

Birçok jQuery sitesinde sürekli aynı tarz uygulamalar bulunmakta. Galeriler, menüler gibi klasik jQuery uygulamarının dışında tasarımcılar tüm bunları kullanarak sıradışı uygulamalarda yapıyorlar. işte birbirinden farklı yaratıcı 5 jQuery uygulaması;

Webalon - Demo

jQuery ile hazırlanmış sıradışı bir slider uygulaması. Allta bulunan iki buton ile neredeyse tüm sayfayı kaydırarak diğer sayfanın gelmesini sağlıyorsunuz. Kimlerle çalıştığınızı, mekanınıza kimlerin geldiği gibi birçok şekilde kullanılabilen hoş bir uygulama.

Bonadies Architect - Demo

Bu uygulamayı herhangi bir sitede görseniz kesinlikle flash olduğunu düşünebilirsiniz. Farklı tasarımı ile hazırlanmış bu jQuery uygulaması tam küçük sitelere göre. Kişisel bir site veya küçük bir şirket sitesi için ideal bir uygulama.

HTML5 ve CSS3 yeni olmasına rağmen web tasarımcıları oldukça başarılı uygulamalar yapıyorlar. Klasik tasarımların aksine daha renkli ve interaktif tasarımlar kullanıcılar tarafından daha dikkat çekici ve taha tatmin edici gözüküyor. Ayrıca masaüstü uygulamalarından yapabildiğiniz birçok özelliği artık interaktif olarak tarayıcılar üzerinden de kullanabiliyoruz. Muhteşem HTML5 ve CSS3 Uygulamaları;

Carbon Fiber Signup Form - Demo

Html5, css3 ve jQuery ile yapılan bu uygulama gelişmiş bir form sistemidir. Formlarda yer alan sıradışı parlak efekti ziyaretçiler tarafından oldukça dikkat çekici. jQuery ile yapılan tooltip özelliği sayesinde kullanıcılarınız istenilen dışında formu doldururlarsa hata mesajı veriyor.

Create a Cool Messy List with CSS3 and nth-child - Demo

Bu css3 ve Html5 ile yapılan uygulama ile web sitenizdeki blogları istediğiniz şekilde yana yatırarak eğim oluşturabilirsiniz. Ayrıca bunu yaparken içeriğinede aynı şekilde eğimi uygulayabilirsiniz.

CSS3'ün en büyük sorunlarından biri birden fazla tarayıcıda çalışmasını sağlayabilmektir. bu şu anlama geliyor: en basitinden bir gölge efekti verebilmek için çapraz tarayıcı uyumlu bir şekilde kod yazmanız gerekiyor.

bu yazıda ise basit kullanıcı arabirimleri ile tamamen özelleştirilebilir kodlar üretebileceğiniz CSS3 araçları yer almaktadır.

CSS3 Generator
Efektlerin hepsini tamamen özelleştirebileceğiniz ve popüler CSS3 özellikleriden istediğinizi seçebileceğiniz bir araçtır.

CSS3 Please
bir kod düzenleyicisinde kod yazıyormuşsunuz gibi görünümü olan araç sağ üst köşede size önizleme olanağı sunmaktadır.

CSS3 Click Chart by Impressive Webs
çok fazla özelleştirilebilir değil fakat kodunu görmek istediğiniz efekte tıklamanız yeterlidir. ama şu da bir gerçek fazlasıyla efekt örneği var.

Web3.0, css3 ve Html5'in gelişmesi ile birlikte web sayfaları artık interaktif uygulamalar ile dolmaya başladı. Masaüstü uygulamalarında kullanılan efekler ve uygulamaların birçoğu artık flash kullanmadan web sayfalarında da uygulanabiliyor. Tüm bu yeniliklerle beraber jQuery kütüphaneside sürekli büyüyor ve ön plana çıkıyor. Aşağıdaki benzersiz uygulamaları web sitenizin içeriğine göre veya farklı tarzlarda kullanabileceğiniz gibi jQuery geliştiricisiyseniz benzer uygulamalar yaratabilirsiniz. işte inanılmaz 5 jQuery uygulaması;

Interactive Map | Demo

Artık kendi bilgi haritanızı jQuery ile oluşturmanız mümkün. Genellikle bilgi haritaları, .jpg formatında yapılıyordu veya interaktif uygulamalar için ise flash tercih ediliyordu. Fakat web3.0, css3, html5 ile birlikte jQuery'de ön plana çıkarak bu kalıpları yıkıyor. Kendi bilgi haritanızı yaratabileceğiniz bu uygulamada tooltip özelliği ile bölgeler hakkında bilgi verebilir ayrıca belirli bölgelere yakınlaşarak daha ayrıntılı haritalar yayınlayabilirsiniz.

Daha önce başladığımız “yeni siteler keşfedelim” yazı serisinin dördüncü kısmında bu defa 5 değil, 1 site inceleyeceğiz. Ancak bu incelememiz biraz detaylı olacak. Lakin internete bakış açımızı değiştirecek nitelikte bir siteyi inceleyeceğiz.

Önceki yazılarımızdaki sitelerin çoğunluğunda kullanabilmek için yeterli derecede yabancı dil bilgisine sahip olmak gerekiyordu. Tanıtacağım sitenin büyük çoğunluğu (%80) Türkçe destekli. O bakımdan yabancı dili olmayanlar da kolaylıkla bu siteden yararlanabilecekler.

Siteyi tanıtmadan önce RSS teknolojisi hakkında kısa bir bilgi vermek gerekiyor. RSS teknolojisi, internet kullanıcılarının zaman ve güçlerini optimize etmek için ideal bir teknoloji. Artık hemen her site, özellikle sık güncellenen siteler, rss teknolojisinden yararlanıyorlar. Rss hakkında internette şu ve şu yazılar var. Oradan daha detaylı bilgi alabilirsiniz. Ancak özet geçmek gerekirse rss, çok ziyaret ettiğiniz sitelerin güncellenmesini takip eden sistemdir. Örneğin bir haber sitesini ele alalım. Sözgelimi, Haber sitenizde bulunan teknoloji bölümündeki haberleri kaçırmak istemiyorsunuz. Ama bazen internete giremiyor, bazen yorgun olduğunuzdan takip edemiyor ve güncelliği kaçırıyor. Geçmiş sayfalarda kayboluyor olabilirsiniz. İşte RSS sistemi sizi bu zahmetten kurtararak teknoloji alanındaki yazılmış haberleri kaçırmamanızı sağlıyor. O sizin belirlediğiniz feedleri (besleme-güncelleme-haber), örnekteki teknoloji haberlerini, okumanız için depoluyor.

Peki bu rss sistemini nasıl çalıştıracaksınız? Sisteme bu rss feedlerini nasıl ekleyeceksiniz? İşte inceleyeceğimiz sitenin işlevlerinden biri de Rss güncellemelerini takip etmek.

Buraya kadar verdiğimiz bilgileri bilenler olabilir, onları da bildiriye dahil etmek için şöyle bir şey söyleyebiliriz. Bu site igoogle ve Google reader’ın yaptığı işlemleri daha görsel ve bütünleşik olarak yerine getiriyor.

jQuery ile yapılan form uygulamaları ile formlarınızı daha anlaşılır ve daha güvenli biçime getirebileceğiniz gibi oluşabilecek hataları da önleyebilirsiniz. Bu uygulamalar ile ziyaretçileriniz formları doldururken zorlanmazlar. İşte jQuery ile yapılan form uygulamaları;

Otomatik Tamamlayıcılar
Otamatik tamamlayıcı jQuery form elemanları, aradığınız bölüm ile ilgili veri tabanını eş zamanlı olarak tarar ve yazdığınız harf veya kelimeye göre siz henüz arama butonuna basmadan aramaya başlayarak alltaki küçük bir blokta size benzer sonuçları gösterir.

Autocomplete | demo

Autocomplete ile eş zamanlı olarak arama yapabileceğiniz gibi aramalarda filtreleme işlemini de uygulayabilirsiniz.

Daha önce haziran 2009'un en iyi jquery derslerini görmüştük. Bu yazımızda ise Mart 2010'un en iyi jquery derslerini göreceğiz.

1. How to Create an Infinite Scrolling Web Gallery (Sınırsız kaydırma web galerisi nasıl oluşturulur?)

2. Advanced jQuery background image slideshow (Gelişmiş jquery arkaplan imaj slayt gösterisi)