bildirgec.org - yusufunalan - beğendikleri

Modern Tasarımlar İçin Ücretsiz Fontlar

yusufunalan — Sat, 01 Aug 2009 14:43:00 GMT

Sifr teknolojisini kullanarak istediğimiz yazıtipini (font) sitelerimizde kullanabiliyoruz. Grafik tasarımıyla ilgileniyorsanız ise aşağıda vereceğim ücretsiz yazıtipleri işinize yarayacaktır.

1. sansation typeface

2. fertigo pro typeface

3. megalopolis extra typeface

4. walkway typeface

5. nadia serif typeface

6. modeno font

7. m+ outline typeface

8. fontin sans typeface

9. diavlo typeface

10. museo typeface

11. gentium typeface

12. delicious typeface

13. junction typeface

14. cartogothic std typeface

15. anivers typeface

16. medio typeface

17. birra stout typeface

18. rezland typeface

19. often typeface

20. engel light typeface

21. contra typeface

22. nilland typeface

23. calluna typeface

24. quicksand typeface

25. mentone typeface

26. vegur typeface

27. swansea typeface

28. geosans light typeface

29. com4t nuvu regular typeface

30. steiner typeface

31. chunk typeface

32. aller sans typeface

33. juvelo typeface

34. goudy bookletter 1911 typeface

35. temporarium typeface

36. bellerose typeface

37. ambrosia demo typeface

38. surrounding typeface

39. circled typeface

40. nevis typeface

41. zephyr typeface

42. advent pro typeface

43. serifbeta typeface

44. evolution true type font

45. sliced ab typeface

46. technical forest v2 typeface

47. alte haas grotesk typeface

48. comfortaa typeface

49. mod™ font

50. whiteboard modern typeface

51. neighbourhood type

52. soraya font by justmytype

kaynak

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

15 Mükemmel Jquery Navigasyon Tekniği ve Çözümü

yusufunalan — Mon, 04 May 2009 06:04:00 GMT

İçeriği ile birlikte navigasyon bir web sitesi için çok önemlidir. Bu yüzden sitede gezinmeyi ilgi çekici yapmak sizin için önemliyse jquery çok iyi bir seçim olacaktır. Burada en iyi 15 jquery tekniği ve çözümüne ulaşabileceksiniz.

1 - jQuery Tabbed Interface (Jquery Sekmeli arayüz)

2 - Sliding Jquery Menu (jquery kayan menü)

3 - CSS Sprites2

4 - Kwicks for jQuery (jquery için kwicks)

5 - jQuery File Tree (Jquery Dosya Ağacı)

6 - Learning jQuery: Fading Menu - Replacing Content (Jquery öğrenin: açılır menü - içerik değiştirici)

7 - jQuery Context Menu Plugin (jquery içerik menü eklentisi)

8 - Coda-Slider (Sürgülü)

9 - Create Vimeo-like top navigation (Vimeo üste navigasyonu gibi oluşturmak)

10 - jQuery (mb)Menu 2.0

11 - jQuery idTabs (Sekmeli)

12 - Create a Slick Tabbed Content Area using CSS & jQuery (css ve jquery kullanarak sekmeli içerik oluşturmak)

13 - Create a Cool Animated Navigation with CSS and jQuery (css ve jquery kullanarak animasyonlu navigasyon oluşturmak)

14 - LavaLamp for jQuery lovers! (jquery sevenler için lavalamp)

15 - How to Make a Smooth Animated Menu with jQuery (jquery ile akıcı animasyon menüsü nasıl yapılır?)

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

İlham Kaynağı 50 Şık Navigasyon Menü Tasarımı

30 Olağanüstü Css Menü Tekniği

kaynak: webdesignledger.com
diğer yazılarım

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Tasarımcılar İçin Faydalı 28 Jquery Eklentisi

yusufunalan — Wed, 24 Jun 2009 13:12:00 GMT

Tasarımcılar için bir araya getirilmiş birbirinden faydalı jquery eklentilerine aşağıdan ulaşabilirsiniz.

1. crossselect plugin

Seçilen öğeleri karşı tarafa almak için kullanabileceğiniz bir eklentidir.

2. vtip

Jquery kullanıcıları için hızlı bir şekilde ipucu göstermenizi sağlar.

3. time entry field

Zamanı gösterebileceğiniz güzel bir uygulama.

4. path selector

Hiyerarşik yapıda bulunan nesneleri seçmek için kullanabileceğiniz açılır pencere eklentisi.

5. jplayer

Web sayfanız üzerinden mp3 dosyalarınızı çalma ve kontrol etme imkanı verir.

6. opensocial-jquery

Javascript kütüphanelerini kullanarak jquery gadget geliştirebileceğiniz faydalı bir eklenti.

7. glyph

Makale veya blog yazılarınızın sonuna dergi ve gazete tasarımcılarının yaptığı gibi profesyonellik hissi verir.

8. checktree(yctin edition)

Kolayca kontrol edebileceğiniz ağaç menü uygulaması.

9. jquery list dragsort

Sürükle bırak özelliğini sağlar.

10. hintbox

Kolay bir arama yardımcısıdır.

11. custom maxlentgh

Yazabileceğiniz karakter sayısını gösteren faydalı bir eklenti.

12. jquery bookmark

Sayfanızı çeşitli sosyal imleme sitelerine ekleyebileceğiniz eklenti.

13. form wizard plugin

Form sihirbazı ile kolayca istediğiniz şekilde formlar oluşturabilirsiniz.

14. jquery custom select box

Kişiselleştirilebilir birden fazla seçme kutusu.

15. jquery modal dialog

Facebook tarzı uyarı penceresidir.

16. epiclock

Kolayca dinamik saat oluşturmanızı sağlar.

17. mbmenu

Güzel bir ağaç menü uygulaması.

18. droplist filter

Kısa arama için javascript aracıdır.

19. jyouttube

Herhangi bir youtube videosunu almak için kullanabileceğiniz güzel bir eklenti.

20. drop curves

Kenarları yuvarlatılmış imajlar oluşturabileceğiniz eklentidir.

21. galleryview

Animasyonlu bir resim galerisidir.

22. flip!

Elemanlarınızı 4 yöne çevirmek için kullanabileceğiniz eklentidir.

23. jquery image cube

Küp şeklinde fotoğraflarınızı görüntüleme eklentisi.

24. jquery-validator

Etiketleri doğrulamak için kullanabileceğiniz bir eklenti.

25. loading animation plugin

Bekleme aşamasında yükleniyor animasyonu gösterebileceğiniz güzel bir uygulamadır.

26. canvasswap

Resimlerinize güzel efektler verebileceğiniz faydalı bir eklenti.

27. magicalhover

Web siteniz için güzel bir geçiş eklentisidir.

28. bounce

Web sayfası üzerindeki elemanları genişletmek için kullanabileceğiniz bir eklentidir.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

15 mükemmel jquery navigasyon tekniği ve çözümü

sitenize eklemeniz i̇çin 5 jquery ve ajax sosyal i̇mleme widget dersi

web geliştiricileri i̇çin 8 jquery ve ve ajax tabanlı etiket bulutu yapımı

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter
kaynak: quness.com | fresherswisdom.com

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web tasarımcıları için en iyi 22 başlangıç kiti

yusufunalan — Wed, 22 Jul 2009 11:30:00 GMT

Başlangıç kitleri web tasarımcıları için harika bir zaman kazandırıcıdır.

başlangıç kiti nedir?

GUI (görsel kullanıcı arayüzü) tasarımcıları için buton, sekme, onay kutusu, açılır kutu gibi elemanların ekran görüntüsü ve şablonu oluşturma sürecini hızlandırarak yardımcı olur.

Bu yazıda web tasarımına yeni başlayanlar için faydalı olabilecek başlanıç kit'lerine ulaşabilirsiniz.

gui, form elemanları ve web bileşenleri

Onay kutusu, giriş alanları, metin alanı gibi elemanlar ve web tasarım bileşenleri olan buton, ok işareti, simge, işaret ve daha fazlası.

1. yahoo’s design stencil kit

Muhtemelen bir tasarımcı için eksiksiz bir alet çantası. GUI elemanları takvimler, ızgaralar, menüler, mobil (genel ve iphone), navigasyon ve sayfalama, sekmeler, UI kontrolleri ve daha fazlası!

2. web form elements

Sekmeler, butonlar, açılır menü tek bir psd dosyası içinde başlangıç için çok faydalı.

3. browser form elements psd

Mac Firefox 3 ve vista ie7 için tarayıcı form elemanları psd'si.

4. flex dark skin

Pürüzsüz koyu cilt arayüz elemanları

5. famfamfam icons

Yeni başlayan kullanıcılar için en uygun simge seti.

6. peter’s deivantart id

Bu PSD şablonu ile kolayca kimlik kartı tasarlayabilirsiniz.

7. deluxive creative pack

Bu yaratıcı paket işaretler, ızgara çerçeveleri, butonlar, etiket ve daha fazlasını içerir.

8. aero avatar and sig

Vista avatar ve imza şablonu psd'si.

9. turquoise psd

Vista elemanları

Tarayıcı ekran şablonları

Bir web tasarımı yaparken bütün tarayıcıları göz önünde bulundurmak çok önemlidir.

10. browser web safe area

İndirilebilir psd dosyası ile farklı işletim sistemlerinde Safari, IE ve Firefox için web güvenli bölgesi.

11. 960px photoshop grid template

960px için psd ızgara şablonu

12. (more) browser templates

Daha fazla tarayıcı için kullanabileceğiniz güzel bir uygulama.

13. web browser elements

Ücretsiz html standard form elemanları ya da Windows ve Mac osx için tarayıcı ekranı.

14. browser screens and website elements

Faydalı olabilecek tarayıcı ekranları ve website elemanları

15. quommunication starter kit

Eğer başlangıç iletişim seti arıyorsanız bu size çok faydalı olacaktır.

imleç

İmleç site üzerinde etkin bir şekilde kullanıldığı zaman çok fayda sağlamaktadır.

16. polished graphite

2 farklı fare imleç seti

17. photoshop cursor pack

Kullanışlı photoshop dersleri

Ürün Tasarımı

18. iphone gui psd 3.0

İphone benzeri tasarım için çok uygundur.

19. iphone psd

Yüksek çözünürlüklü arayüz

20. magazine psd

Dergi tarzı birşey hazırlamak istiyorsanız buradan başlayabilirsiniz.

21. paperbag

22. t-shirt

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

101 yüksek kaliteli css ve xhtml web şablonu

101 daha kaliteli css ve xhtml web şablonu

en iyi 5 web tasarım aracı

web ve grafik tasarımcıları için harika kaynaklar

web tasarımcılar i̇çin 20 mükemmel eğitim sitesi

10 ücretsiz css ve xhtml web şablonu

25 önemli web tasarım aracı

web tasarımcılar i̇çin ücretsiz ve açık kaynak 40 windows program

web tasarımı oluşturmak i̇çin 16 en hoş photoshop dersi (i̇ngilizce)

web tasarımcılar i̇çin 25+ grafikli bilgi

tasarımcılar i̇çin faydalı 28 jquery eklentisi

web tasarımcıları i̇çin 12 mükemmel sosyal haber sitesi

web tasarımı ve geliştiricileri i̇çin 15 faydalı css forum

12 tasarımcı ders sitesi

kaynak: queness.com | fresherswisdom.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Kendi API'nizi Hazırlamanız için Yararlı Kaynaklar

yusufunalan — Wed, 15 Jul 2009 18:20:00 GMT

Günümüz en popüler web uygulamalarını incelediğimizde, hepsinin ortak notasının kolayca kullanılabilen ve zengin içerikli API'lerinin olduğunu görürüz.

Bu API'ler sayesinde uygulamalar kendi ekosistemlerini oluşturarak web kullanıcılarına farklı yaklaşımlar ile hazırlanmış 3. parti uygulamalar ile hizmet verme imkanına sahip olurlar.

Bunun en güzel örneği olarak, Twitter API'leri ile hazırlanmış yüzlerce uygulamayı gösterebiliriz. Hatta Twitter'ın bu kadar popüler olmasının en önemli nedenlerinden birinin bu 3.parti uygulamalar olduğu da rahatlıkla söylenebilir.

Ayrıca Google'ın nerdeyse tüm servisleri için hazırladığı API'lerin de web geliştiricileri tarafından sıklıkla kullanıldığını farklı web sitelerini ziyaret ettiğimizde görmekteyiz.

API hazırlamak için; PHP, Rails ve ASP.NET için hazırlanmış özel dersler, bazı çatılar ve kitaplar için kaynaklar:

PHP
Create a REST API with PHP

How to Add an API to your Web Service (PHP)

Implement a Rest API with the Zend Framework

Creating a Simple REST API With VB, PHP and MySQL

Create Your Own Custom API (PHP)

Towards RESTful PHP - 5 Basic Tips

Rails
Creating Open Web APIs: Exploring REST and WOA in Rails 2.0

How to Make an API for a Rails App?

Putting REST on Rails

ASP.NET
Create REST API using ASP.NET MVC (JSON & XML)

API hazırlamak için bazı çatılar:
WSO2 WSF
Recess PHP framework
Tonic

API hazırlama ile ilgili kitaplar(Amazon):
RESTful Web Services
Building Scalable Web Sites: Building, scaling, and optimizing the next generation of web applications
RESTful PHP Web Services
Pro PHP XML and Web Services
Web Development Solutions: Ajax, APIs, Libraries, and Hosted Services Made Easy
Practical API Design: Confessions of a Java Framework Architect
Java Web Services: Up and Running
Developing Web Services with Apache Axis2

Kaynak: webresourcesdepot
Takip: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Tasarımınızı Daha Popüler Yapın

yusufunalan — Tue, 07 Jul 2009 13:17:00 GMT

buildinternet.com okurlarına web tasarımlarını geliştirebilmeleri için 8 tavsiyede bulunuyor

1.Renkleri Parlatın

Eğer tasarımınız size özel olduğunu hissettirmiyorsa tasarımınızdaki renkler üzerinde biraz oynamanız bu eksikliği giderebilir. Renkler hakkında fazla bilginiz yoksa Color Scheme Designer'dan yardım alabilirsiniz.

Sağda renkler biraz canlandırıldı.

2.Tek renkli temaları az kullanın

Siyah beyaz tasarımlar oldukça hoş görünebilir veya bu tür tasarımları oluşturmak daha kolay olabilir ancak daha fazla renk bize istediğimiz nesneyi vurgulama imkanı verir.

Farklı renk paletleri kullanmak vurguyu artırır.

3.Rehber Çizgiler üzerinde Tasarlayın

Yazılarınızı ve diğer nesnelerinizi rehber çizgiler (grid) kullanarak düzgün bir hizada yerleştirmeniz tasarımınızı daha hoş gösterecektir. Tasarımınızda bu çizgilerden yardım alın.

Rehber çizgilerle hizalanan nesneler.

4.Parlatmaya zaman ayırın

Gölgelemekten korkmayın, gölgeler düz ve sıkıcı görünümü engeller.
Tasarımlardaki farklı bantların sınırlarına 1 pixel kalınlığında çizgiler çekin. bu bantları daha canlı gösterir.
Yazı ve arkaplan üzerinde yapılacak hafif bir eğim efekti nesneler üzerinde 3 boyutlu hissi uyandırabilir.

Sınırlar daha belirgin arka alan cilalanmış gibi

5.İmajları sınırlandırmayın

İmajlar sınırların üzerine taşsın. Böylece tasarımınız daha hoş görünebilir. Birkaç css ayarlamasıyla bunu yapmak mümkün ve bu Lee Munroe'nun makalesinden öğrenilebilir.

Sınırlardan taşan imajlar

6.Boşluk Bırakın

Örneğin başlık tasarımlarında (header) logoyu İsmi ve sloganı dar bir alana hapsetmek yerine biraz daha geniş bir bant ayırın.

Daha geniş bantlar

7.Dokular
Ardalana biraz doku ekleyebilirsiniz böylece ardalanı tasarımınızla bütünleştirebilirsiniz.

Dokular

8.Vurgular

Vurguları kullanın. Vurgular imajlarınıza üzerinde bulunduğu yüzeyden daha üstte duruyormuş hissi verir.

Vurgular

Tavsiyeleri bu kadar. Tüm bu tavsiyelerin başarıyla uygulandığı örnek bir tasarım da Marketcircle.comda sergileniyor. tasarımına bakmak için ve tavsiyelerin başarılı olup olmadıklarını gözlemlemek için ziyaret etmekte fayda var.

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

75 (gerçekten) kullanışlı javascript tekniği

yusufunalan — Sun, 08 Feb 2009 10:28:00 GMT

Geliştiriciler ve tasarımcılar gün geçtikçe modern tasarımlarında daha çok JavaScript kullanır oldular. Bazen JavaScript kullanımı kullanıcının işini zorlaştırıp tasarımın sadeliğini alırken kimi zaman da kullanıcı deneyimine çok önemli katkıları olur. Burada önemli olan a) doğru miktarda JavaScript kullanmak ve b) doğru JavaScript tekniklerini kullanmaktır. Bugüne kadar pek çok javascript tekniğini sizlerle paylaştım. Bu makale ile listeye bir yenisini ve kendimce en verimlisini eklemeyi planlıyorum.

Web'in JavaScript'e hızlı geçişi sağolsun JavaScript kütüphaneleri tasarımcıların ve geliştiricilerin işlerini kolaylaştırmak için çığ gibi büyümeye devam ediyorlar. Geliştiricilerin kullandığı JavaScript kütüphaneleri arasında jQuery, Prototype, Scriptaculous, mooTools, Dojo en çok kullanılan kütüphaneler olarak gösterilebilir. Bu çatıları kullanan komünite üyelerinin oluşturduğu sayısız eklentiler de JavaScript kütüphanelerine dahil edilebilmektedir.

Ancak bazen bazı özel ihtiyaçlara yönelik olarak geliştirilmiş JavaScript çözümlerine ihtiyacımız olabilir. İki bölüm halinde yayımlayacağım bu yazımda web sitelerini çok daha ilginç ve çekici kılan 75 gerçekten kullanışlı JavaScript Tekniğinden bahsetmek istiyorum.

Web'de Heceleme
Bu proje (X)HTML sayfaları için otomatik hecelemeye yönelik çalışan çözümleri bir araya getirmeyi hedefliyor. Hem farklı insan ve betik dilleri için, hem de sunucu ve istemci taraflı platformlar için. Hyphenator.js adı verilen bir JavaScript çözümü de mevcut. Hyphenator.js, HTML belgelerinin sunucu taraflı hecelemesini, bazı ortak heceleme kuralları ve Franklin M. Liang'ın LaTex ve OpenOffice'te de sıkça kullanılan heceleme algoritmasını tüm tarayıcılara getiriyor.

SocialHistory.js
SocialHistory.js, ziyaretçilerinizin hangi sosyal ağları kullandığını tesbit edebilmenizi sağlıyor. Kullanıcının tüm geçmişini görmenizi sağlamıyor. Kullanıcının daha önce herhangi bir adresi ziyaret edip etmediğini 20 soruluk bir yöntemle test ediyor. SocialHistory.js'nin kontrol ettiği çok geniş bir sosyal ağ listesi mevcut. Alternatif arayanlar şu çözüme de bir göz atabilirler.

Textboxlist Otomatik Tamamlama
JavaScript'in en çekici özelliklerinden birisi de oldukça kullanışlı olan otomatik tamamlama özelliğidir. Otomatik tamamlamayı Facebook'tan daha güzel kullanan hiçbir site yoktur. Facebook, otomatik tamamlama özelliğini çok etkin bir şekilde kullanarak diğer Facebook kullanıcılarının aranabilmesini sağlamış durmda. Kullanıcı bir kez bulunduğunda adı bir çerçeve içerisinde listeye ekleniyor ve kullanıcı adının yanına adı listeden çıkarmak için bir "X" bağlantısı ekleniyor. İşte TextboxList betiği de bu özelliği taklit ederek kullanıcıların hizmetine sunmuş durumda.

addSizes.js
Bu küçük JavaScript otomatik dosya boyutu oluşturma işini hallediyor. Örneğin eğer büyük boyutlu .mp3 ya da .pdf dosyalarını siteniz üzerinden sunuyorsanız bu betik ilgili dosyaları otomatik olarak kontrol ederek dosya boyutunu bağlantının hemen yanına parantez içerisinde ekliyor.

syntaxhighlighter
SyntaxHighlighter özellikle sitesi üzerinden sıklıkla kod parçacıkları yayımlayan geliştiriciler ve kodcular için hazırlanmış bir betik. %100 JavaScript tabanlı olan bu betik, sunucunuzda neyin kurulu olup olmadığına bakmıyor.

samaxesjs
samaxesJS JavaScript ile yazılmış, zengin web uygulamalarına entegre etmek için geliştirilmiş bir dizi aracı ve kontrolü içeriyor. Örneğin TOC (Table of Contents - İçindekiler) kontrolü sayfanızdaki içeriğin başlıklarından otomatik olarak bir içindekiler tablosu oluşturuyor, tüm başlıkların önüne numara ekliyor ve HTML tablosunu otomatik olarak oluşturuyor. JavaScript'in etkin olmadığı tarayıcılarda da sayfanın yapısını bozmadan özelliği etkisizleştiriyor.

Adım Adım
Bu betik ziyaretçilerinize sitenizin onlar için ne sunduğunu gösterebilmenizi ve açıklayabilmenizi sağlıyor. Daha önce ekran görüntüleri ve videolarla oluşturulmuş ve bir ürünün ya da hizmetin tanıtımını yapan ve size ilgili içeriği adım adım açıklayan bazı tanıtım uygulamaları ile karşılaşmışsınızdır. İşte bu betik tam da bu işi web siteleri için yapmayı hedefliyor.

MoreCSS
MoreCSS küçük, çapraz-tarayıcı uyumlu bir JavaScript kütüphanesi olup tıpkı CSS kullanıyormuşçasına sekmeli menüler, tablolar ve "zebra" tarzında listeler oluşturabilmenizi sağlıyor. Kütüphaneyi HTML'ye eklemek ve genel geçer tasarım elementleri için CSS kullanmanız yeterli.

Facelift Görsel Değiştiricisi
Facelift Image Replacement (ya da FLIR, fliir diye okunur) bir imaj değiştirme betiği olup bir siteniz üzerinde herhangi bir yazıtipini kullanabilmenizi sağlıyor. Normalde ziyaretçinin tarayıcısında bulunmayan bir yazıtipini sitenizde kullanmaya kalktığınızda o ziyaretçinin sisteminde öntanımlı olan yazıtipi görüntülenirken bu betik kullanıldığında ilgili yazıtipi için görseller görüntüleniyor. Tüm modern tarayıcılarda çalışan bu betik başlıklardan (h1, h2 vs) span elementlerine ve arasındaki her metin içerikli element üzerinde kusursuz çalışıyor.

CSS Sprites2
Çapraz tarayıcı uyumluluğu artık çocuk oyuncağı haline geldi, zira jQuery pek çok modern tarayıcı üzerinde çalışıyor. Burada gördüğünüz her şey IE6+, Firefox, Safari, Opera vs'de çalışıyor. Betiğe ayrıca JavaScript'in etkin olmadığı durumlarda bile sitenin görünümünü bozmayacak korumalar eklenmiş durumda.

jParallax
jParallax bir jQuery kütüphanesi olup seçili elementi bir 'pencereye' ya da bir görüntü kapısına ve bunların tüm astlarını da mutlak pozisyonlanmış katmanlara dönüştürerek görüntü kapısı üzerinden görüntülenebilir hale sokuyor. Bu katmanlar fare hareketlerine göre hareket ediyor ve boyutlarına (katman başlangıç noktaları için belirlenen seçeneklere) göre farklı miktarda ilerliyorlar ve sonuçta bir tür paralaks görüntü beliriyor. Bir kameradan baktığınızı ve size farklı uzaklıktaki objelerin siz kamerayı hareket ettirdikçe hareket ettiğini düşünün. İşte bu kütüphane bu efekte her bir katman için bir adet hareketsiz görsel kullanarak erişiyor.

ddMenu - Ortam Menü Betiği
ddMenu mooTools tabanlı basit bir betik olup kendi ortam menülerinizi oluşturabilmenizi sağlıyor. Kontrol düğmesine ve sağ fare tuşuna basarak tarayıcının öntanımlı menüsü ile betik menüsü arasında geçiş yapabilirsiniz. Shift düğmesi ile sağ fare düğmesine basarak ddMenu'yu tarayıcının öntanımlı menüsnün arkasında açabilirsiniz.

js-hotkeys
jQuery.HotKeys eklentisi sayesinde web sitenize klavye kısayolları eklemeniz mümkün hale geliyor. Kısayolu tanımlamak için tek yapmanız gereken sayfanıza bir satır kod eklemek. Alternatif arayanlar bu makaleye göz atabilirler.

BarackSlideShow
Verimli ve hafif bir slayt gösterisi betiği. mooTools 1.2 ile çalışıyor ve her tür şekil geçişlerini (üst ve sol koordinasyonlar ve yükseklik ile genişlik değerleri) destekliyor ki bunun anlamı da hem dikey, hem yatay hem de sırasız listelerle kullanılabiliyor olması.

Galleria
Galleria jQuery ile yazılmış bir JavaScript resim galerisi. Sırasız listelerden aldığı görselleri birer birer yüklüyor ve her bir görsel yüklendiğinde görselin küçük resmini görüntülüyor. Eğer isterseniz betik sizin için görsellerin küçük resimlerini de ister orantılı ister orantısız, ister ortalanmış, isterseniz de CSS ile tanımlanmış bir küçük resim kutusu içerisinde kırpılmış olarak görüntüleyebiliyor.

Geçmiş Tutucusu
unFocus History Keeper JavaScript tabanlı bir kütüphane olup tarayıcının geçmişte ziyaret edilen siteler listesini (geri düğmesi) yönetebiliyor ve Flash ile Ajax uygulamaları için derin-bağlantılamayı destekliyor. Sunucu tabanlı uygulamalar için 'Geri' düğmesini desteğini etkinleştiriyor ve sağlama tabanlı derin bağlantılamaya sahip (anchor tarzında - index.html#foo=bar) ve eylemlere göre değişkenlik gösterebiliyor. Betiğin geçerli sürümü tüm modern tarayıcılarda sorunsuz çalışıyor.

date.js
Datejs gelişmiş ve açık kaynaklı bir betik olup tarih ve zamanı ayrıştırma, biçimlendirme ve işleme için kullanılıyor.

Lightview
Lightview web sitenizde modal pencereler oluşturabileceğiniz bir başka betik. Betiğin akıllı görsel önyükleme, ayarlanabilir yuvarlatılmış köşeler ve PNGler kullanmadan içeriğin daima ekranınıza sığabilmesi için içerik yeniden boyutlandırabilme gibi özellikleri mevcut. İlgili betik sunumlar, tekil görseller, Quicktime dosyaları, formlar, iframeler, satıriçi içerikler ve Flash dosyaları için kullanılabilir.

Coda popup baloncukları
Yazılım geliştiricisi Panic'in web geliştiricileri için hazırladığı, Coda adında sevilen bir Mac uygulaması mevcut. Coda'nın inanılmaz derecede işlevsel bir tasarımı var ve sitede kullanılan güzel JavaScript efeklerinden birisi de stilize edilmiş pop-up baloncukları. Tasarımcılar için jQuery blogu jQuery ve özel geliştirilmiş bir kodu birleştirerek Coda websitesinde kullanılan bu özelliği taklit etmeyi hedeflemiş. Ortaya çıkan efekt güzel, verimli ve kullanıcı deneyimine olumlu etkileri olan oldukça kullanışlı bir eklenti.

ajax.im
meebox gibi web tabalı anında mesajlaşma istemcilerinin populerliği arttıkça web geliştiricileri de kendi JavaScript anında mesajlaşma çözümlerini sitelerine entegre etmek istemeye başladılar. Ajax IM, Ajax ile hazırlanmış anında mesajlaşma uygulamaları oluşturmak isteyenler için bir JavaScript kütüphanesi. Betiğin dosya boyutu görece büyük ancak kullanıcıları ile daha fazla ilişki kurmak isteyen web siteleri için güzel bir efekt olabilir.

LiveValidation
Bu betik özellikle web sitesinde form kullanan her web geliştiricisi için kullaşnışlı bir çözüm. Farklı veri doğrulama özelliklerini içeren yenilikçi bir kayıt formu oluşturmak bazen sorun olabilir. Ayrıca JavaScript kullanarak daha hızlı ve yenilikçi formlar oluşturmak da zordur. Ne şans ki LiveValidation bizler için bu sorunu çözüyor ve form doğrulama sorununu kökünden hallediyor. Eğer Ruby on Rails geliştiricisi iseniz, LiveValidation betiğinin iki sürümü bulunuyor. Ruby on Rails için ideal olan ve Prototype ile çalışan sürümü ya da doğrudan kendi kendine çalışabilir sürümü mevcut.

Ajax AutoSuggest
TextboxList'in otomatik tamamlama betiği gibi olan Ajax AutoSuggest betiği de güzel görünümlü ve iyileştirilmiş bir otomatik tamamlama betiğidir. Bu betiğin dosya boyuto oldukça küçük, 9k'nin altında ve tüm arama formlarına fazladan güzel bir özellik ekliyor.

FancyUpload
Gönderdiğiniz dosyalar için bir ilerleme çubuğu görüntüleyen bir gönderme betiği. Her tür gönderme formu için mükemmel bir çözüm olan bu betik, aynı anda birden fazla dosya gönderimini de destekliyor. Gönderilecek olan dosyaların boyutunu da betik üzerinden sınırlayabileceğiniz gibi, dosya türüne de sınırlama getirebiliyorsunuz. Betiği kullanabilmek için tek gereksinim, kullanıcının sisteminde Flash eklentisinin kurulu olması gerekliliği ki Web kullanıcılarının %95'inde bu betik halihazırda kurulu durumda.

Taggify
Taggify betiğinin sitelere dahil etme işlemi listelenen diğer JavaScriptlerden biraz farklı. Taggify fotoğraflar üzerine açılır pencereler dahil etmenize yarayan sunucu tabanlı bir çözüm. Betiği indirip sunucunuzda barındırmaktansa kodunuza küçük bir <include> eklemeniz, Taggify betiğinin sitenize kurulumu için yeterli. Taggify'nin kullanımı da ilginç, betik fotoğraflara notlar ve kullanıcı bilgiler ekliyor.

Bu betiği Flickr görsellerine notlar eklemenize yarayan özelliğin geliştirilmiş bir sürümü olarak düşünebilirsiniz. Taggify notu içerisine dilediğiniz HTML kodunu ekleyerek görsellere bilgi verici notlar dahil edebilirsiniz.

AmberJack
AmberJack ilginç ve zorlu JavaScript tekniklerinden birisi. Web site turları özellikle kullanıcların sitenize alışması, ürünlerinizin ve özelliklerinizin tanıtımı ve diğer pek çok özellik açısından işe yarar bir özelliktir. AmberJack'in en iyi yanlarından birisi de web site turları oluşturmak için herhangi bir şey kurmanızın ya da öğrenmenizin gerekmiyor oluşu olsa gerek. AmberJack, website ve ürün sahiplerinin JavaScript kullanarak web site turları oluşturma işlemini büyük ölçüde kolaylaştırırken, dosya boyutu da inanılmaz bir şekilde sadece 4 KB.

Sliding Tabs
Coda'dan esinlenilen bir başka betik daha. Yumuşak kaydırma efektine sahip sekme sistemi, paneller üzerinde geçişi kolay ve kullanışlı bir hale getiriyor. Sliding Tabs'ın çalışır örneğini buradan görebilirsiniz. Sliding Tabs, mooTools JavaScript kütüphanesi üzerine kurulmuş bir betik. Alternatif arayanlar ise şuna bir göz atabilir.

JavaScript Image Loader
Eğer kullanıcılarınızın web sitenize görsel gönderebilmesi ve sitenizdekileri inceleyebilmesi için daha yaratıcı bir yöntem arıyorsanız o zaman JavaScript Image Loader () ihtiyaçlarınıza cevap verecek türden bir betik. JavaScript Image Loader kullanıcılarınıza görsel gönderilmeden önce gösterebilmek ve gerektiği durumlarda ilgili görsel hakkında daha fazla bilgi verebilmeniz için ideal bir seçenek.

swfIR
swfIR, görsel işleme özelliği için JavaScript ve Flash'ın bir arada kullanıldığı ilginç bir konsept. swfIR kurulduğunda görsel çevresine <span> etiketi ile birlikte "swflr" sınıfını ekliyor. swfIR görsele neredeyse her türlü işlemi uygulayabiliyor. Betiğin özellikle kullanışlı olan bir özelliği var ki o da görseli sayfanın boyutuna göre yeniden boyutlandırabilmesi. Sayfa üzerindeki metni yeniden boyutlandırdığınızda görselin de boyutu aynı oranda değiştiriliyor. Görselin metin ile birlikte yeniden boyutlandırılması çok daha uyumlu bir his uyandırıyor.

MooFlow
Apple'nin Leopard işletim sistemi üzerindeki Cover Flow özelliğini sevenler için biçilmiş kaftan olan bu betik, aynı özelliği Apple'nin kendisinden alarak web sitelerine entegre edebilmenizi sağlıyor. MooFlow, adından da anlayabileceğiniz üzere MooTools üzerine inşa edilmiş bir betik ve güzel görünümlü görsel galerileri oluşturmak için kaydırma çubuğu ile birlikte muhteşem bir sonuç ortaya çıkarıyor.

Tıpkı Cover Flow'da olduğu gibi MooFlow'un da galeri anahattını ve özelliklerini özelleştirebilmeniz mümkün. Tam ekran moduna geçebilir, görsel yansıma ve otomatik yürütme özelliğini etkinleştirebilirsiniz. MooFlow bunun dışında pek çok özelleştirme seçeneği sunmasını yanısıra kurulumu da kolay, zira tüm görselleri dahilindeki element içerisinden otomatik olarak alabiliyor.

amCharts
Flash ve JavaScript'in bir arada kullanıldığı bir grafik üreteci olan bu betik ile neredeyse her tür grafiği oluşturmanız mümkün. Bu da yetmezmiş gibi veriyi .csv ve .xml dosyaları üzerinden de alabiliyorsunuz. amCharts ile sütun ve çubuk, pasta ve kurabiye, çizgi ve alan gibi pek çok grafik türünü oluşturabilirsiniz.

GreyBox
GreyBox'un web sitesinde, "Doğru düzgün pop-up penceresi" cümlesi ile betiğin yaptığı iş özetlenmiş ki sanırım bundan daha iyi bir tanımlama da yapılamazdı. GreyBox, açılır bir pencerenin yapabilmesi gereken her şeyi yapabiliyor. Resimler, web siteleri ve hayal edebileceğiniz diğer her şeyi gösterebiliyor.

GreyBox'u kullanmak inanılmaz derecede kolay, zira JavaScript'i ekledikten sonra yapılması gereken tek şey, pencere içerisinde görüntülemek istediğiniz içeriği <rel> etiketi arasına dahil etmek </rel>.

Maillist

Millist her ne kadar tam özellikli bir AJAX iletişim formu olmasa da bu küçük betik, pek çok web geliştiricisinin beta kayıtları ve diğer sebepler için elektronik posta adresi toplama işini kolaylıkla üstlenebiliyor. Betiğin elektronik posta yedeklerini ve formun görünümünü yönetebileceğiniz bir yönetici paneli bile bulunuyor.

SWFObject
SWFObject, küçük bir Flash oynatıcısı olup sadece kod ile çözülmesi mümkün olmayan pek çok Flash probleminin üstesinden geliyor. Oynatıcının dosya boyutu sadece 9.5 KB (ya da GZIP sürümü 3.8 KB). SWFObject, modern tarayıcılarla olan uyumu sebebiyle övünürken, hangi Flash oynatıcı sürümünün kullanılıp kullanılmayacağını tespit etmek için JavaScript'i kullanıyor. Bu sebeple süresi dolmuş Flash eklentilerinin içeriği görüntüleyememesi sorununun da önüne geçilmiş oluyor.

PlotKit
PlotKit JavaScript ile grafik çizimi için geliştirilen ve küçük boyutlu bir JavaScript çatırı olan Moochikit'e dayanan kullanışlı bir betik. Her tür grafiğin çizimi için kullanılabilir.

JavaScript tabifier
JavaScript tabifier kolayce ve hızlıca sekmeli içerik oluşturmak için kullanabileceğiniz kullanışlı bir betik. Tabifier'i kullanabilmek için tek yapmanız gereken JavaScript'i sitenize ekledikten sonra "tabber" sınıfına dahil bir <div>'i içeriği çevreleyen sekme için yerleştirmek ve ardından "tabbertab" sınıfına dahil bir <div> içerisinde de sekmenin başlığını belirtmek. Sekmeler için çerez desteği, sekmelerin dinamik olarak değiştirilmesi ve öntanımlı sekmeyi belirlemek gibi gelişmiş özellikleri de kullanmanız mümkün.

FancyZoom 1.1
Satıriçinde tam boyutlu görselleri görüntülemenize yarayan FancyZoom; yumuşak, temiz ve gerçek Mac-benzeri efekti web siteniz üzerinde kullanabilmenizi sağlıyor.

Özelliklte görsel kaliteye ve kullanım kolaylığına önem verilen betik, herhangi bir HTML kod değişikliğine gerek kalmadan görselin tam boyutlu bir şekilde görüntülenebilmesini sağlıyor. Betik ayrıca tam boyutlu görselleri arkaplanda yükleyebilirken, herhangi bir JavaScript kütüphanesine de ihtiyaç duymuyor. FancyZoom, HTML dosyalarınızda sadece iki satır kod işgal ediyor.

A Mac OS X-style Dock In JavaScript
Apple'ın Mac OS X işletim sisteminin son sürümü özellikle göz alıcı görsel kalitesi ve efektleri ile de kullanıcılarını memnun etmeyi başarmıştı. İşletim sisteminin bir güzel özelliği de balık gözü efektine sahip ve uygulama simgelerinin bulunduğu bir yüzeyin var oluşu idi. Fare imlecinizi uygulama simgesinin üzerine getirdiğinizde, ilgili simgenin civarındaki simgelerin boyutları da ana simgeye orantılı bir şekilde büyütülüyordu. JavaScript ile bu özelliği oluşturmak pek kolay bir iş değil ancak MacStyleDock betiğinin geliştiricileri bu işi web sitelerinizde kullanabilmeniz için çocuk oyuncağı haline getirmeyi başarmışlar.

fValidator
fValidator, açık kaynaklı, ücretsiz ve kullanımı kolay bir JavaScript olup özellikle form doğrulama ile ilgilenen kullanıcıların ihtiyacını tam olarak karşılamak üzere geliştirilmiş. Özellikle kullanıcılarınızın formlara veri girişi sırasında istediğiniz biçimi kullanmalarını zorlamak istemeniz durumunda kullanışlı olan bu betiğin jQuery alternatifi de mevcut.

jQuery Interactive Date Range Picker with Shortcuts
jQuery ile belirli bir tarih aralığını seçmek için kullanabileceğiniz bir betik. Gelişmiş seçenekler görüntülenmek istediğinde kullanılan yumuşak geçiş efekti göz dolduruyor.

Raphael
Raphael küçük bir JavaScript kütüphanesi olup özellikle Web üzerinde vektör grafikler kullanmak istediğinizde kullanışlı hale geliyor. Örneğin kendinize özgü grafiğinizi ya da görseli kırp-ve-döndür widget'inizi oluşturmak istediğinizde bu kütüphane ile bunu kolayca yapabilirsiniz. Raphael, grafik oluşturma işlemi için SVG ve VML kullanıyor.

NoGray Time Picker
Bu zaman seçicisi kolay kullanımlı sürükle-bırak arayüzünü kullanıyor. Zamanı seçmek için kullanıcıların tek yapması gereken saat üzerindeki akrep ve yelkovanı sürükleyip bırakmaları.

Yetii - Yet (E)Another JavaScript Tab Interface
Yetii basit olduğu kodar bol özelliği olan bir sekmeli arayüz oluşturucusu. Hafif ve nesne yönelimli bir koda sahip olan Yedii, JavaScript desteği olan tarayıcılarda da görünümü bozmuyor. Bir web sayfası üzerinde istediğiniz kadar sekmeli içerik arayüzü oluşturabilir, otomatik sekme geçişini değiştirebilir önceki ve sonraki sekmelere geçiş için düğmeler ekleyebilir, bir sekmeli içerik arayüzünü bir diğerinin içine yerleştirebilir ve belirli bir sekmeye tıklandığında yürütülmesini istediğiniz eylemi belirtebilirsiniz.

Bir sayfa üzerindeki sekmelerden herhangi birine bir başka sayfa üzerinden bağlantı verebileceğiniz gibi son tıklanan sekmenin sayfa yeniden kullanıldığında ilk açılan sekme olmasını çerez kullanarak belirleyebilirsiniz.

Calendar

Bir MooTools JavaScript sınıfı olan Calendar erişilebilir ve kolay kullanımlı tarih seçicilerini form elementlerine entegre edebilmenizi sağlıyor. Yüksek seviyede özelleştirilebilir girdi ve seçim kutucukları, birden fazla takvim desteği, çeşitli gezinme seçenekleri, çoklu dil desteği ve güzel görünümlü tarih biçimlendirmesini sunan bu kolay kullanımlı takvim, ilgili özelliği web sitelerinde kullanmak isteyen geliştiriciler için ideal.

Starbox
Starbox sayesinde her tür oylama kutucuğunu sadece bir PNG görseli kullanarak oluşturabilirsiniz. Kütüphane Prototype JavaScript çatısı üzerine inşa edilmiş. Eğer daha fazla efekt istiyorsanız Scriptaculous'u da dahil edebilirsiniz.

Magic Zoom
Magic Zoom bir JavaScript yakınlaştırma aracıdır. Görselleri detayları ile görüntüleyebilmenin en iyi yoludur. Kullanıcıların herhangi bir şeye tıklamalarına gerek yok, tek yapmaları gereken detayını görüntülemek istedikleri görselin üzerinde fare imleçlerini gezindirmek.

Magic Magnify
Magic Magnify bir Flash yakınlaştırma aracıdır. Görselin üzerine fare imlecinizi getirdiğinizde detaylarını görüntüleyebiliyorsunuz. Ücretli olan bu eklentinin fiyatı 28 Amerikan Doları.

Carousel.us
Carousel.us JavaScript ile oluşturulmuş 3B Karusel efektini ister prototype.js, ister scriptaculous isterseniz de mootools.js çatıları altında kullanabilmenizi sağlıyor. Betik ayrıca yansıma efekti için Richard Davey'in hazırladığı PHP Easy Reflections'u da kullanıyor.

Slideshow
Slideshow, Mootools 1.2 için bir JavaScript sınıfı olup görsel sunumlarınızı web siteniz üzerinde hareketlendirmeye yarıyor. Slideshow çok uzun bir geliştirilme sürecine sahip. Sonuç ise gerçekten hafif, kurulumu ve kullanımı kolay, yüksek seviyede özelleştirilebilir ve geliştirilebilir bir betik olmuyş. En iyi efektlere ulaşmak için JavaScript çatılarını kullanan bu betik ilk olarak Aeron Glemann tarafından bir yan proje olarak geliştirilirken şimdilerde MIT lisansı altında açık kaynaklı olarak dağıtılıyor.

jgrousedoc
jGrousedoc sayesinde geliştiriciler, sundukları JavaScript kodlarına javadoc benzeri yorumları dahil edebiliyorlar. Betik, sınıfların dökümantasyonuna OOP'yi kullanmak için hangi kütüphanenin ya da teknolojinin kullanıldığına bakılmaksızın izin veriyor. Çıktı ise CSS ve Velocity şablonları ya da XSLT ile özelleştirilebiliyor.

Lightbox 2
Lightbox basit ve kullanımlı kolay bir betik olup görselleri geçerli sayfanın üzerinde görüntülemeye yarıyor. Kurulumu oldukça kolay olan bu betik tüm modern tarayıcılar üzerinde çalışıyor.

Control.Window
Control.Window tümüyle programlanabilir, çok amaçlı bir pencereleme aracıdır. Yüksek seviyede özelleştirilebilir olan bu betik için pek çok kullanım alanı mevcut. Hedefleri pencere içerisinde açabilmek için bağlantılara eklenebildiği gibi pencere içerisinde dinamik içerik görüntülemek mümkün. Dizilebilir, sürüklenebilir ve yeniden boyutlandırılabilir pencereleri destekliyor. Modal pencereleri, LightBoxları ve İpuçlarını kullanabilmek için gerekli alt sınıflar da betik içerisinde yer alıyor.

SimpleModal
SimpleModal küçük boyutlu bir jQuery eklentisi olup modal diyalog pencereleri oluşturabilmek için kolay bir yöntem sunuyor. SimpleModal'ın amacı geliştiricilere çapraz tarayıcı desteği olan ve SimpleModal'e sunulan verinin içerisinde görüntülenebileciği yüzen pencereler sunabilmek.

MooTools ile Karusel Oluşturmak
Bunu muhtemelen diğer sitelerde de görmüşsünüzdür, hani şu bir dizi görseli (ya da isterseniz içeriği) satıriçinde güzel bir şekilde gösteren slayt gösterileri. Pek çok kişi bunu sitelerinde kullanabilmek için doğrudan kodu kopyalıyordur ancak bana kalırsa rehberi okuyarak bunu kendiniz oluşturduğunuzda yeni teknikler de öğrenmeniz mümkün. Bu sebeple bu makalenin yazarı MooTools ve CSS kullanılarak nasıl karusel özelliği geliştirilebileceğini anlatmaya çalışmış. MooTools üzerine en çok bağlantılanan makalelerden biri.

Kolay Açılır Kapanır Navigasyon

Sadece sıralı listeler ve mümkün olan en az sayıda sınıf ve kimlik adları kullanılarak oluşturulan açılır-kapanır dikey menü oluşturmak istiyorsanız bu yazıyı okuyun.

Image Cross Fade Transition
90'ların başında JavaScript ile sıralı görselleri birbiri ardına göstermek modaudı ve tanıdığım pek çok JavaScript geliştiricisi bu dili bu tip özellikleri geliştirerek öğrenmeye başladılar. Günümüzde ise bunu JavaScript ya da CSS ile oluşturmak çocuk oyuncağı. Zor olan ise görseller arasına geçiş efektlerini dahil etmek.

Slider Gallery
Bu 'ürün kaydırıcısı'nın bir benzeri yine Apple'nin web sitesinde kullanılıyor.

FancyZoom meets jQuery

Build An AJAX Powered Shopping Cart
Bu dersin amacı size AJAX ile nasıl bir sipariş sepeti oluşturabileceğinizi göstermek. Buna rağmen dersi tamamladığınızda ortaya çıkan sonuç kullanıma hazır olmayacak. Uygulamayı sırtlanacak arkaplan işlemleri için gerekli bilgiye sahip olduğunuz varsayılıyor. Bunun yerine rehberde sadece işin AJAX kısmına odaklanılmış.

jQuery iPod-benzeri Açılır Menü
Betiğin geliştiricileri iPodlar üzerinde görülen ve yüksek miktarda hiyerarşik olarak dizilen veriyi kontrollü bir şekilde görüntüleyebilmeye yarayan bir betik geliştirmişler. Özellikle yüksek miktarda veriyi düzenli bir şekilde görüntülemek ancak bunu için sıradan CSS menüleri ile boğuşmak istemeyen kullanıcılar için tercih edilmiş.

jQuery ile İçeriği Sürüklerken Yüklemek
Bu betik sayesinde dikey olarak yerleştirilen ve uzun miktarda içeriği sayfa sürüklendikçe yüklemek jQuery kullanılarak mümkün hale getirilmiş.

JavaScript İpuçları
Michael Leigeber tarafından hazırlanan bu rehber, nasıl hafif ve güzel görünümlü bir JavaScript ipucu çözümü oluşturabileceğinizi gösteriyor.

Newsticker
Antonio Lupetti Newsvine üzerinde kullanılan haber görüntüleme sisteminin bir benzerinin nasıl MooTools kullanılarak oluşturulabileceğini örneklendirmeye çalışmış.

jQuery Virtual Tour
jQuery kullanılarak oluşturulan bu betik sayesinde panaromik görüntüler kullanılarak nasıl sanal gezinti turları oluşturabileceğiniz anlatılıyor.

Flexigrid
Hafif ancak özellik açısından zengin olan bu uygulama ile yeniden boyutlandırılabilir veri ızgaraları ve başlıklarla eşleşebilen sürüklenebilir verileri görüntüleyebilirsiniz. Bunun yanısıra veri kaynağı olarak xml kullanmak ve verinin yüklenmesi için de AJAX'tan faydalanmak diğer kullanışlı özellikler arasında yer alıyor. Exit Grid ile aynı konsepte sahip olan bu uygulama'nın farkı tümüyle jQuery kullanıyor olması. Bu sayede verinin yüklenmesi hızlandırılmış ve dosya boyutu da azaltılmış.

tableFilter
Bu betik sayesinde tablolardaki içerikleri interaktif bir şekilde dizmeniz mümkün hale getirilmiş.

Row Locking with Checkboxes

jQuery File Tree
jQuery File Tree özelleştirilebilir ve AJAX ile desteklenmiş, jQuery için geliştirilmiş bir dosya gezgini eklentisi. Sadece bir satır JavaScript kodu ile kendinize özgü ve tümüyle etkileşimli bir dosya ağacı oluşturabilirsiniz. Simgeleri dosya uzantılarına göre otomatik olarak görüntüleyebilme özelliğine sahip olan bu betik, içeriğini sayfanın yeniden yüklenmesine gerek kalmadan oluşturabimek için AJAX kullanıyor. Açılır kapanır dosya ağaçları ve tekil ve çoklu klasör görünümleri için ayarları da bulunuyor.

Proto.Menu

Pricing Matrix

Toggling Announcement Slider

Rehberler

Kaynak: Smashing Magazine

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Size Sıfırdan jQuery Öğretecek 15 Kaynak

yusufunalan — Sun, 11 Jan 2009 11:14:00 GMT

Belki tam bir jQuery uzmanısınız. Ya ne olacak canım, John Resig'in tam kendisisiniz belki de... Ya da Bildirgeç üzerinde "Prototip", "jQuery", ve "Mootools" gibi kelimeleri görüp "Bunlar da ne ola ki?" diye hayıflanıp duruyorsunuz... Şimdi tüm bunları öğrenmenin zamanı geldi.

Bu endüstride, -özellikle günümüzde daha önce hiç olmadığı kadar-, tasarımcılar kodculara, kodcular da tasarımcılara dönüşüyor... Bir geliştiricinin görevi SADECE ön ya da arkaplan işlerini yürüten kod yazmak olmaktan çıkıyor. jQuery işte bu aradaki mesafeyi kapatmaya yardımcı olan bir JavaScript kütüphanesi. JavaScript erişilemez bir yetenek değil. Daha önce yayımladığım size sıfırdan PHP öğretecek 25 kaynak yazısının site kullanıcıları tarafından çok tutulan bir yazı olduğunu gördükten sonra nettuts üzerindeki benzer bir yazıyı da jQuery dersleri için yayımlamayı uygun gördüm. Bu makalede daha önce hiç jQuery üzerinde çalışmamış geliştiricilere jQery kütüphanesini öğrenmelerine olanak sağlayacak 15 kaynağı listeleyecek ve ilgili kaynaklar hakkında bilgi vereceğim. Eğer bugüne kadar bu kütüphaneye herhangi bir nedenden ötürü korkup yaklaşmamışsanız, şimdi ona yaklaşmanın tam zamanı. Ne kadar kolay olduğuna inanamayacaksınız.

jQuery de ne ola ki?
jQuery.com'a göre jQuery hızlı ve öz bir JavaScript kütüphanesi olup HTML belgelerinizi olayları işleyebilecek, animasyonlar yürütebilecek ve web sayfalarınıza Ajax etkileşimleri dahil edebilmenizi kolaylaştırır. jQuery, bugüne kadar JavaScript yazma şeklinizi geliştirmek için tasarlanmıştır.

Daha basit anlamı ile jQuery, daha önce 10 satır yazdığınız JavaScript kodunu iki satırda yazmanıza olanak sağlayan bir kütüphane! Geriye kalan sekiz satırın en verimli şekilde başkaları tarafından halihazırda yazıldığını ve bu kodun da JavaScript çalıştırabilen tüm modern tarayıcılarda yürütülebildiğini düşünün. Daha jQuery'i derinlemesine öğrenmeden bile zengin formlardan Flash gibi menüler oluşturabileceksiniz. Bir başka iskeleti daha öğrenmek istemiyorum demeyin. Aşağıdaki kaynaklar size bu yolda adım adım rehberlik edeceklerdir.

Neden diğerlerini değil de bu kütüphaneyi kullanmalıyım?
Sonuç olarak bu sizin seçimiz. Her bir iskeletin (framework) kendine özgü avantajları vardır. Ancak jQuery'nin günümüzün en popüler JavaScript iskeleti olmasının ardında bazı nedenler yatıyor.

Birden fazla tarayıcı ile uyum. Her bir JavaScript ikmali sırasında web geliştiricilerinin önemli bir zamanını, geliştirdikleri betiğin farklı tarayıcılar üzerinde beklendiği gibi çalışıp çalışmadığını test etmesi beklenir. Ne şans ki jQuery kütüphanesi bu tarayıcı uyumsuzluklarını gideriyor ve geliştiricilere kendi kodları üzerinde daha fazla zaman harcayabilmelerine olanak sağlıyor.

CSS Seçicileri. CSS sözdizimlerini kullanarak, geliştiriciler halihazırda kullandıkları bilgilerini belgelerine kolayca dahil edebilirler. CSS 3 ve XPATH seçicilerinin de desteği ile, jQuery sayfanızdaki elementleri kullanmak için mükkemel bir mekanizma sunuyor.

Zincirleme. jQuery kendi metodları için "zincirleme" (chaining) adı verilen bir yöntem kullanır. Bir jQuery nesnesi üzerinde bu yöntemi çalıştırdığınız her zaman, ilgili yöntem aynı jQuery elementini çalıştırır. Bu nedenle de her bir yöntem için seçicilerinizi yeniden yazmanız gerekmez. Tıpkı ".NET" tarzındaki bir özelliği kullanarak daha küçük dosya boyutlarına sahip ve kolay okunabilen kodlar yazabilmenizi sağlar.

Eğer merakınız iyice arttıysa, çok güzel! Hemen başlayalım.

Adım 1: Kütüphaneyi İndirin
Bu yolculuktaki ilk durağınız kütüphaneyi bilgisayarınıza indirmek olacaktır. jQuery.com'u ziyaret edin ve "Download jQuery" bölümüne gidin. Listedeki bağlantılardan birine tıklayarak kütüphaneyi bilgisayarınıza indirin. Daha sonra indirdiğiniz .js dosyasını HTML belgenize dahil etmeniz gerekecek.

CSS-Tricks.com: jQuery'e Giriş: Bu jQuery eğitim videosunda, CSS-Tricks websitesinden Chris Coyier, jQuery'i web sayfanıza nasıl dahil edebileceğinizi ve birkaç özelliği nasıl yazabileceğinizi gösterecek.
Digital-Web.com: jQuery: Başlangıç Kursu: Kod yazmayı bilen web tasarımcıları için jQuery'e giriş kursu.
Slideshare.net: "30 Dakikada jQuery Öğrenmek": Eğer slayt gösterilerinden hoşlanıyorsanız, bu ders size jQuery kullanarak nasıl slayt gösterileri oluşturabileceğinizi ve aynı zamanda size jQuery öğretmeyi hedefliyor.

Adım 2: İlk Fonksiyonunuzu Oluşturun
jQuery'i öğrenme aşamanızın daha ilk birkaç dakikasında kendi fonksiyonlarınızı oluşturmaya başlayacaksınız. İlk durağınız John Resig'in giriş maklesi "jQuery Nasıl Çalışır?" olmalı. Resig, web uygulamalarınız üzerinde kullanacağız pek çok kolay anlaşılır yöntemi anlatacak. Anlatacakları arasında sınıf ekleme ve kaldırma, zincirleme ve "document.ready" yöntemini çağırmak yer alıyor.

jQuery.com: "jQuery Nasıl Çalışır?": Bu giriş makalesinde John Resig (jQuery'nin yaratıcısı) sizi animasyon oluşturmanın temellerine götürecek. Eğer jQuery'e yeniyseniz bu makaleyi kesinlikle okumanız önerilir.
15DaysOfJquery.com: 1. Gün: jQuery'nin tüm özelliklerini iki haftada kavramak gibi cesur bir girişimde bulunan "15 Days of jQuery" (jQuery ile 15 Gün) web sitesi her gün bir konuyu işliyor. Bu makalede "document.ready" yöntemini nasıl kullanmanız gerektiğini öğreneceksiniz.
VisualJquery.com: "jQuery Sözlüğünüz": VisualjQuery.com web sitenizi dijital sözlüğünüz olarak düşünün. Site, kullanılabilen her bir jQuery yönteminin sözdizimini ve açıklamasını içeriyor. Bu siteyi yer imlerinize eklemeyi unutmayın.

Adım 3: Elementlerinizi Canlandırın

Bu pek çok geliştirici için tartışmalı bir konudur. Birinci grupta "sıfır animasyon"da ısrar eden insanlar bulunur. Bunlar kullanıcının istediklerine mümkün olan en hızlı şekilde cevap verilmesine ve aradan çekilmesini tercih ederler. Onlara, bir sonraki uğraşı için bekleyen bir zombi gibi davranmayın. İkinci grupta da bazı insanlar vardır. Onlar, göze hoş görünen animasyonlar içeren bir siteye, kendi kullanıcıları için uygun bir site gibi bakarlar. Bu animasyonlar uygun kullanıldığında animasyonların kullanılırlığı önemli ölçüde arttırdığına inanırlar. Siz, hangi grupta olduğunuza karar vermelisiniz. Hangi grupta olursanız olun jQuery'nin sayfanızdaki elementleri hareket ettirebilme görevini mümkün olan en kolay şekilde yerine getirebildiğini unutmayın.

jQuery.com: "Animasyonlar jQuery'nin animasyon yeteneklerini öğrenirken burası uğramanız gereken ilk yer olmalı. Makale, bu yöntemi kullanırken ihtiyacınız olacak parametreleri detaylandırıyor.
Detached Designs: jQuery'nin Animasyon Yeteneklerini Öğrenmek: Konu animasyona geldiğinde hiç deneyiminiz yok mu? Bu makale özellikle animasyon konusunda hiç deneyimi olmayan kullanıcıları hedef alıyor. Makalenin içerdeği başlıklar arasında metin boyutunu değiştirmek, elementleri hareket ettirmek, animasyonları zincirlemek gibi her jQuery kullanan geliştiricilerin işine yarayacak konuları içeriyor.
Web Designer Wall: Tasarımcılar İçin jQuery Dersleri: Halen jQuery'nin gücü kafanızı mı karıştıryor? Bu site menülerden imaj değiştirmeye kadar 10 adet örneği detaylandırarak bu muhteşem kütüphanenin yetenekleri hakkında sizi bilgilendirmeyi hedefliyor.

Adım 4: Eklentiler
jQuery ile ilgili güzel olan bir şey var ki o da kütüphane geliştirilirken, John Resig ve ekibi kütüphanenin özelliklerini eklentiler kullanarak geliştirmenin sadece birkaç satır kod ekleyerek mümkün kılmak üzerine çalışmış olmaları. Kendinize özgü yöntemleri çok kısa süre içerisinde yazabileceksiniz! Bu eklentileri ana kütüphaneden ayrı tutarak (bu arada jQuery kütüphanesinin sadece 16KB olduğunu da hatırlatalım), bu özel eklentileri sadece gerektiği zaman sayfalarımıza dahil edebileceğiz. Bunun sonucunda JavaScript dosyalarınızın boyutu mümkün olan en küçük seviyede kalacaktır.

jQuery Corner Gallery
Elementlerinize yuvarlatılmış köşeler eklemek için CSS3'ün tüm tarayıcılar tarafından desteklenmesini beklemek istemiyor musunuz? O zaman jQuery kullanarak elementlerinize kolayca yuvarlatılmış köşeler ekleyebilirsiniz. Sadece yuvarlatılmış köşeler ile de sınırlı kalmayın, zira eklenti çeşit çeşit köşe tiplerini de bünyesinde barındırıyor. Bu eklenti araç kutunuzda kalıcı bir yer bulabilir.
Kullanıcı Deneyimini Geliştirin: 10 Kullanışlı jQuery Eklentisi Bu makalede James Padolsey, kendince en iyi jQuery eklentilerini listelemiş.
jQuery.com: "Eklentiler": Her zaman olduğu gibi jQuery.com değerli bir kaynak olmaya devam ediyor. Bu makale ilk eklentinizi oluşturmak için size adım adım rehberlik ediyor.

Adım 5: AJAX Özelliğini Dahil Etmek
Şu ana kadar öğrendiğiniz jQuery yetenekleri ile kendinizi güvende mi hissediyorsunuz? Yeteneklerinizi bir sonraki seviyeye yükseltmeye hazır mısınız? Neden betiklerinize biraz Ajax özelliği dahil ederek başlamıyorsunuz? Her ne kadar "load()" ve ".get()" yöntemlerinin kullanımı ile jQuery veri yüklemeyi inanılmaz derecede kolaylaştırıyor. Aşağıdaki kaynaklar eğitiminiz için hayati önem taşıyor.

Sitepoint.com: jQyery ile Kolay AJAX: Akash Mehta'nın Sitepoint için hazırladığı bu makalede web uygulamalarınıza AJAX eklemenin jQuery kullanılarak ne kadar da basit bir işlem olduğu anlatılıyor.
Tasarımcılar için jQuery: AJAX Kullanarak Form Doğrulama: Bu makalenin yazarı Remy, bizlere jQuery kütüphanesinin yanında AJAX kullanarak bizlere, web tabanlı formlara nasıl sunucu taraflı doğrulama özelliğini ekleyebileceğimizi gösteriyor.
Nettuts.com: jQuery Kullanarak İçerik Nasıl Yüklenilir ve Hareket Ettirilir?: jQuery dersleri ararken NETTUT'un "Javascript" kategorisine bir gözatmayı unutmayın. Bu derste NETTUTS ekibi jQuery kullanılarak bir verinin nasıl yüklenebileceğini ve ardından onu taşıyan elementin nasıl hareket ettirilebileceğini göstermiş.

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

geniş kapsamlı javascript kaynakları

yusufunalan — Tue, 16 Sep 2008 10:24:00 GMT

javascript web teknolojileri dünyasının vazgeçilmez bir öğesidir diyebiliriz. normalde kullanıcı taraflı çalışan javascript kodları özel bazı durumlarda sunucu tarafında da çalıştırılabiliyor.

internette javascript için hazırlanmış bir çok kaynak bulunmakta.

javascript referansları her zaman kolayca ulaşabileceğimiz yerde olmalı;

gotapi javascript, css ve javascriptDom kodları için hazırlanmış bir referans sitesi. bir kod içindeki her türlü parametre hakkında her türlü bilgiye detaylı ulaşabilirsiniz. nasıl kullanıldığına dair bilgi de alabilirisiniz. kısacası olması gereken şekilde kapsamlı bir referans.

addedbytes.com sitesinde javascript kopya kağıtları bulunmakta. html, xml çağrıları, normal kod ifadeleri hakkında png dosyalar halinde kopya kağıtlarını aynı sayfadan indirebilirsiniz.

codepunk sayfasında da javascript ve css kodlarının karşılaştırmalı referansı bulunuyor.

javascript kodlarının birer koleksiyonu olarak dikkati çeken siteler şöyle;

hotscripts in javascript sayfasında tasniflenmiş bir çok konuda betik (script) örneği bulabilirsiniz. sitede diğer dillerle ilgili örnekler de mevcut. (java, c ++, asp vs..)

javascriptkit sitesinde bir çok ders, forum, ücretsiz kod örnekleri, demo kullanım örnekleri karşılaştırmalı olarak anlatılıyor.

scripts sitesinde de yine bir çok dil hakkında kod örnekleri bulabilirsiniz. javascriptle ilgili olan sayfasında gruplanmış bir çok örnek bulunuyor.

mattkruse sitesinde örneklere daha çok ağırlık verilmiş. çeşitli konularda örnekler var.

yahoo'nun kullanıcı arayüzü kütüphanes ni de eklemek gerekir diye düşündüm. yui kütüphanesi ile css kodları da dahil olmak üzere zengin interaktif tarayıcı uygulamaları geliştirebilirsiniz.

javascript araçları açısından incelenebilir bir kaç örnek ise şöyle;

açık kaynak bir firefox eklentisi olan firebug ile javascirpt kodlarını online olarak inceleyebilirsiniz. ayrıca detaylı css kod incelemeleri, html kod incelemeleri, dom inceleme, kodlardaki hataların tespiti yapabilirsiniz.

jslint ise online bir araç olarak javascript kodlarındaki hataları bulmamıza yardımcı oluyor.

regexpal de benzer bir çevrimiçi araç. javascript kodlarındaki yazım kurallarını kontrol ediyor.

javascript dersleri konusunda da bir kaç örnek vermek gerekirse;
jennifermadden
sitesinde menüye yüklenmiş örnekler var. açıklamaları ve işleyişi de gösterilmiş.

programcı olmayanlar için javascript eğitim dökümanı olarak hazırlanmış kaynak webteacher sitesinde.

kapsamlı bir javascript ders kaynağı olabilecek w3schools, kodların yapısını detaylı bir şekilde açıklıyor. çok daha farklı konularda da ders içeriği sağladığını site haritasından görebilirsiniz.

en son dhtml ve javascript dökümanlarını bulabileceğiniz bir kaynak olan totaltutorial tasarım bağlantılı diğer konulara da değinmiş.

javascript öğrenen kişilerin bilmesi gereken 1o önemli kod örneğini hunlock un ilgili sayfasında bulabilirsiniz.

javascript framework'leri ve kütüphaneleri konusunda detaylı bilgi vermek istemiyorum zira, çok fazla kaynak var. isteyenler bildirinin ana referansı olan jasonbartholme sayfasından diğer framework ve kütüphanelere göz atabilirler. ayrıca javascript teknikleri hakkında da detaylı başlıklar var.

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

comestat ile online ziyaretçi

yusufunalan — Tue, 04 Dec 2007 19:29:00 GMT

comestat aktif ziyaretçilerinize ait istatistik sağlayan bir servis. son 5 dakikaya ve son 24 saate ait ziyaretçi sayılarını ve hangi sayfada kaç ziyaretçi olduğunu gösteriyor. gerekli kod birkaç saniye içinde oluşturuluyor. buton rengini seçip "get my button" üzerine tıklamanız yeterli. site üyelik gerekmiyor.

Bu yazı yusufunalan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage