bildirgec.org - hx - beğendikleri

Yapay Sinir Ağları

hx — Mon, 22 Feb 2010 10:07:00 GMT

PES 2010

eğer sıkı bir pes oyuncusuysanız pes 2010 çıkmadan yayınlanan şu video'yu görmüş olmalısınız. video'da

peki pes 2010'da üzerinde durduğumuz noktalar nelerdi, bir göz atalım. takım stratejisi; pes 2010'da yaptığımız en büyük gelişme yapay zeka oldu.

diyordu. devamında 8 kaydırma çubuğu ile takım stratejisini 0-100 arasında ayarlayabileceğimiz ve oyunu almamız gerektiği söyleniyordu. peki neydi bu yapay zeka? konami mühendisleri ne yapmıştı da 8 kaydırma çubuğu ile takımımızı daha "akıllı" oynatabiliyorduk?

Yapay ağlar

eminim yapay zekanın ne olduğu konusunda fikriniz vardır ama anlatımımın bütünlüğü açısından birkaç yetkin tanım vermem gerektiğini düşünüyorum.
yapay zeka ile ilgili tanım araştırmasına girdiğinizde iki seçenekle karşılaşırsınız. yapay zeka (artificial intelligence) ve yapay sinir ağları (neural networks). aslında ikisininde ilgilendiği şey aynıdır ancak "yapay zeka" daha yüzeysel bir kavram iken "yapay sinir ağları" ne olduğu hakkında biraz daha fikir verir. çünkü yapay zeka demek; yapay (doğadaki örneğine benzetilerek insan eliyle yapılmış) sinir (hayvansal organizmalarda duyuları taşıyan beyazımsı teller) ağları (yaygın şebeke) demektir.

oyunlarda henüz temel seviyede olan yapay zeka uygulamaları görülebilir

bir tanıma göre "yapay sinir ağları canlılarda bulunan sinir sisteminin çalışmasını elektronik ortama taşımayı hedefleyen bir programlama yaklaşımıdır. yapay sinir ağlarının da canlılarda olduğu gibi öğrenme, hatırlama ve öğrendiklerini güncelleme gibi yeteneklerinin olması hedeflenmektedir." derken wikipeda; "i̇nsan beyninin bilgi işleme teknolojisinden esinlenerek geliştirilmiş bir bilgiişlem teknolojisidir." ve "insanın düşünme yöntemlerini analiz ederek bunların benzeri yapay yönergeleri geliştirmeye çalışmaktır." buyurmuş.
evrenin en mükemmel bilgisayarını taşıyoruz. beynimiz!

evrenin en mükemmel bilgisayarı!

her gün yeni şeyler öğrenen, öğrendiklerini öncekilerle benzetme, çağrıştırma ya da birebir eşleme gibi yetenekler ile ilişkilendirebilen, bunları kategorize eden ve gelecekle ilgili tahmin yürütüp farklı senaryolar üretebilen mucizevi bilgisayar.

düşünen makinalar uzak değil!

bir gün yapay zeka mühendisleri beynin düşünme dediğimiz aktivitesini matematiksel olarak %100 modelleyebilirse, silikon çiplerin bizim gibi düşünmesi de sağlanmış olacak. bunun için önerilen bazı modeller halen mevcut ancak başarısı tartışma konusu: örneğin hebb modeli; bu model en eski ve ünlü olanıdır. şöyle der:

"a nöronunun bir aksonu b hücresini uyandırmaya yaklaşmışsa ve sürekli/kalıcı olarak ateşlenmesinde rol alıyorsa, hücrelerden birisinde veya her iki hücrede öyle bir gelişme veya metabolik bir değişim meydana gelirki, b'nin ateşlenmesinde rol alan a'nın verimliliğinde (efficiency) bir artış olur."

bbc'nin hazırladığı "i̇nsan beyni" belgeselinde hebb'in demeye çalıştığı şey çok güzel örneklenmiş:

"..bizler için yeni bir şey öğrenmek demek, beyinlerimizin işleyişini yeniden ayarlamak demektir. beyinlerimiz birbirine bağlı 100 milyar nörondan meydana gelmektedir. öğrenmek, bu nöronlar arasında yeni yollar yaratmak ve bunları kalıcı kılmaktır. "

"...bizim için (nöronlarımız arasında yeni yollar yaratmak) derin bir vadiden geçmek gibidir. bir taraftan diğer tarafa geçmek bize öğrenme şeklimizle ilgili bir şeyler söyler. sinyal bir beyin hücresinden diğerine ilk kez geçerken büyük bir efor sarfedilir. vadiyi geçerken de aynı deneyimi yaşarız. karşıya yapılan ilk yolculuk en zorudur.

nöronlar
vadi bir kez geçildikten sonra karşıya her geçiş daha kolay olacaktır. ve bir şey öğrenirken de benzer şeyler olur. başlangıçta öğrenmek çok zordur. ama sinyal beyin hücreleri arasındaki aralıktan ne kadar çok geçerse daha sağlam bir yol elde ederiz. karşıya defalarca kez geçtikten sonra bu işin zahmeti azalıcaktır. sonunda bir şey öğrenmiş oluruz."

bu örnekler beynimizin öğrenme, değerlendirme ve sonunda kararını açıklaması hakkında birkaç fikir verebilir. konuyu saptırmadan biraz da yapay zeka temelleri hakkında bilgi vermek istiyorum.
sonuç olarak yapay sinir ağları, nöronları örnek alarak yazılmış öğrenme algoritmalarını kullanan birbiriyle ilişkili programcıklardır. görevi şudur:

öğrenme
i̇lişkilendirme
sınıflandırma
genelleme
tahmin
özellik belirleme
optimizasyon

yapay sinir ağları bunları başarmak için ne yapar? cevabı basit: gerçek bir sinir hücresi gibi çalışarak! yani; bu programcıklar aralarında bağ kurar, verileri alır, işler ve çıktı üretir.
geçen yıl insan beyninin alpha-camkii adı verilen bir proteinle verileri sevindirici, acı verici ya da komik olarak değerlendirdiği bulunmuştu. kararımızı verirken verileri değerlendirme işlemlerinden geçirmemizde alpha-camkii'nın yaptığı işi ysa'da yapay nöronun veriyi aldığı yolun ağırlığı yapar.
yapay nöronlarımız da değerlendiriken kendine gelen verilerin ağırlığına bakar.
örneğin bu yazımı beğenirsiniz ya da beğenmezsiniz ama önceki yazılarımı okumuş olarak bu yazıma bakarsanız fikriniz değişebilir.

Süper Bilgisayarlar

açıklayayım, ağırlık verinin geldiği bağlantıyla çarpılan bir sayıdır ve pozitif, negatif ya da sıfır olabilir. örneğin siz yazım hakkında düşünürken yediğiniz son yemek kararınız üzerinde 0 etkiye sahiptir ve beyniniz kararını toparlarken bu bilgiyi önemsemez. benzer şekilde eğer önceki bir yazımı çok beğendiyseniz veri ilgili nöronunuza gelirken 5'le çarpılır. yazılarım arasında beğenmediğiniz bir yazı görmüşseniz, bu yazımla ilgili karar aşamasında beyniniz veriyi -2 ile çarpabilir. sonuç pozitifse bu yazımı değerlendirirken hakkımda iyi şeyler düşüneceksiniz. hakkımda düşündüğünüz iyi şeyler belki çıktı (yazının altına yorum) olarak dış dünyaya verilir ya da başka bir işlemde kullanılmak üzere başka bir nöronunuza gider. bu sayede beni kategorize edebilirsiniz, hatta genellemelerinizde kullanılmak üzere bir ağırlık oluşturabilirim. örneğin yazıları iyi olanların ağırlığı yüksekse "bildirgec'te genelde iyi yazılar çıkar" diye genelleme yapabilirsiniz. bu bildirgec'e de bir ağırlık vermenize yol açar.
yani aslında yazının başında verdiğim kaydırma çubukları ile pes 2010 'un içindeki yapay sinir ağları programcıklarının verileri alan bölümündeki (akson) ağırlıkları ile oynamış olursunuz. bu da çıktınıza etki eder.
aslında henüz uygulamada yapay zeka temel seviyeden çok yukarıda değilse de akademik çevrelerin çalışmaları sonuçlandıkça günlük hayatta yapay zekayla daha sık karşılacağız. şimdilik bu alan diğer bilgisayar çalışma alanlarına göre (veri depolama kapasitelerinin artırılması, işlem hızının artırılması vb...) daha yavaş ilerliyor gibi gözükebilir. ancak devrimsel gelişmelere de açık bir alan olduğunu da unutmamak gerekir.

Bu yazı hx 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

İstanbul'dan Facebook Geçti!

hx — Wed, 14 Oct 2009 06:40:00 GMT

Buradan duyurusunu yaptığım Facebook Developer Garage İstanbul Etkinliği, pazar günü (11 Ekim 2009) İstanbul Bilgi Üniversitesinin Dolapdere Kampüsü'nde gerçekleşti.

Katılımcılar tarafından oldukça yararlı bulunan etkinlikte, katılımcılara konuşmacılar tarafından farklı konular ile ilgili çeşitli sunumlar gerçekleştirildi.Aşağıdaki listede bulunan linkler aracılığı ile sizler de bu sunumlara erişebilirsiniz.

Özkan Altuner: 1-Facebook Developer Garage Nedir? : burada 2-Facebook Toolkit, FBML ve .NET kullanarak nasıl bir Facebook uygulaması yapılır? :burada

Özgür Demir: GWT, FQL ve iFrame kullanarak nasıl bir Facebook uygulaması yapılır? : burada

Emre Sokullu: Facebook API kullanımını. :burada

Tolga Arıcan: Uygulamalardan nasıl gelir elde edilir. :burada

Özgür Alaz: Facebook Çağında Pazarlama teması. :burada

Justin Osofsky: Facebook Connect ile ilgili bilgiler. :burada

Facebook Developer Garage İstanbul ile ilgili çeşitli fotoğraflara ve videoya buradan ulaşabilirsiniz.

Bonus+++++++++:
+Facebook Merkezi'nden Fotoroman Tadında Görüntüler
+Facebook Connect'iniz 3 Adımda Hazır!
+Facebook Developer Garage İstanbul'da!
+facebook, fbfund ile yine para kazandırıyor
+Digg Facebook Connect'i ekledi
+Facebook, Lite ile Twitter Killer Olma Amacında!
+iPhone İçin Facebook 3.0 Yolda!
+Facebook Open Stream API'yi duyurdu
+Facebook Twitter'ı Bağladı!

Kaynak: Facebook Event
algoz: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı hx 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

Seo Analiz Araçları

hx — Fri, 25 Sep 2009 06:34:00 GMT

Seo Analiz Araçları

Arama motorlarında belirli yerlere gelmek, rakipleriniz arasından kolayca sıyrılmak için sitelerinizin W3C uyumu, XHTML yapısı, H1-H6 etiketlerinin kullanımının en iyi şekilde olması lazım.

Yukarıda iyi yerlere varmak için saydığımız faktörleri analiz eden ve çıkan hataları report ederek bizlere sunan siteleri kısaca tanıyalım.

raven

Bu araç sitenizin kaynağını inceliyor ve 100 üzerinden puan veriyor. Siteniz 100'ün altında puan alırsa kaynaktaki hataların neden kaynaklandığını belirtiyor ve nasıl çözeceğiniz hakkında yorumlar yapıyor.

http://bildirgec.org/ scored 65 out of 100

2.aracımız reactionengine gireceğiniz keyword ile içeriğinizi değerlendiriyor ve bu keyword'un kullanım sıklığını görüntülüyor. Ayrıca XHTML etiket kullanımı konusunda uyarılarda bulunuyor.

reactionengine

Pineberry

3.aracımız Pineberry SEO, çalışma mantığı aynı bir üstte bahsettiğim reactionengine ile aynı. Belirleyeceğiniz keyword çerçevesinde sitenizin kaynağını inceleyip değerlendiriyor.

Pineberry

4.aracımız SEO Workers kodlamada yapmış olduğunuz hataları ve anahtar kelimelerin kullanım yüzdelerini hesaplıyor.

Seo Workers

5.aracımız Website Grader, 6 farklı şekilde web sitenizin seo değerini hesaplıyor ve kaynakta oluşan problemleri düzeltmeniz için sizlere önerilerde bulunuyor.

Website Grader

Bu yazı hx 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

Tek klavye ve fare ile birden fazla bilgisayarı kullanmak

hx — Sun, 30 Aug 2009 10:33:00 GMT

Diyelim ki ofisinizde birden fazla bilgisayar var ya da evinizde hem bir desktop hem de lcd televizyonunuza bağlı bir nettop var. Sahip olduğunuz tüm sistemler için birer klavye ve fare almak hem fazla para harcamanıza hem de daha fazla yer işgal etmenize yol açar. İşte açık kaynak yazılım Synergy tam bu noktada imdadımıza yetişiyor.

Synergy aynı ağdaki iki ya da daha fazla bilgisayarı tek klavye ve mouse ile kontrol etme olanağı sağlıyor, üstelik farklı işletim sistemleri arasında da çalışabiliyor. Sistem basitçe aynı bilgisayara bağlanmış birden çok monitör gibi çalışıyor. Yani fareyi ekranın sağına götürdüğünüz zaman sağdaki, soluna götürdüğünüz zaman ekranın solundaki monitöre geçiyor. Program kurulumu her ne kadar karmaşık görünse de aslında basit. Yapmanız gereken sadece iki bilgisayarı birbirine bağlamak ve bilgisayarların birbirlerine göre konumlandırılmasını belirtmek.

Şimdi bu muhteşem programı nasıl kullanabileceğinizi 2 bilgisayarı örnek vererek anlatacağım.

Programı biri sunucu, diğeri alıcı olmak üzere iki bilgisayara da kurun ve masaüstü ikonuna tıklayarak başlatın.

Karşınıza bu pencere çıkacak. Önce sunucuyu kuracağımız için "Share this computers keyboard & mouse" seçeneğini işaretleyin.

Configure butonuna basarak sunucu ve alıcı bilgisayarları ayarlayacağız.

+ butonuna basarak her iki bilgisayarı da ekleyin. Screen Name boşluğuna sunucu bilgisayarın ismini girin ve Ok butonuna basın. Daha sonra ana Configure penceresinde tekrar + butonuna basarak alıcı bilgisayarın ismini girin ve Ok butonuna basın. Bilgisayarların isimlerini her iki bilgisayarda da ana pencerede Advanced butonuna basarak öğrenebilirsiniz.

Şimdi önünüzde buna benzer bir görüntü olmalı. Sıra iki bilgisayarı birbirine bağlamaya ve konumlarını belirlemeye geldi. Biz örnek olarak bir Laptop ve önündeki Lcd ekrana bağlı bilgisayarı birbirine bağlayalım.

Burası biraz komplike görünebilir ama aslında yapmanız gereken tek şey hangi bilgisayarın diğerinin ne tarafında olduğunu belirtmek.

Lcd'nin laptop'ın üstünde olduğunu belirtmek için penceredeki seçenekleri sırasıyla "Top - Laptop - Lcd" yapın. + butonuna bastığınız zaman eğer doğru yaptıysanız bağlantının "Lcd is above Laptop" olduğunu göreceksiniz.

Laptop'ın, Lcd'nin altında olduğunu belirtmek için ise tam tersini yani sırasıyla "Bottom - Lcd - Laptop" yapın. + butonuna bastığınız zaman "Laptop is belove Lcd" olduğunu göreceksiniz.

Sunucu bilgisayarın kurulumu tamamlandı. Şimdi sıra alıcıyı kurmakta. Alıcı bilgisayarda da programı çalıştırın ve üstteki "Use another computers shared keyboard & mouse" seçeneğini işaretleyin.

Şimdi tekrar sunucu bilgisayara dönüp test butonuna basın. Eğer herşeyi doğru yaptıysanız bağlantının sorunsuz gerçekleştiğiyle ilgili bir mesaj alacaksınız. Bu artık iki bilgisayarı da kullanabilirsiniz manasına geliyor.

Son olarak her iki bilgisayarda da Start butonlarına basarak bağlantıyı kurun. Onay mesajını aldıktan sonra Laptopınızdan Lcd televizyonunuza bağlı bilgisayarınızı kullanabileceksiniz.

Programla indirmek için buraya, daha detaylı bilgi almak için buraya tıklayın. Sitede diğer işletim sistemleri için kurulum ve bağlantılar açıklanmıştır.

Umarım bu süper kullanışlı program işinize yaramıştır.

Bu yazı hx 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

Google, Haritaları Altın Tepside Sunuyor

hx — Sun, 24 May 2009 07:13:00 GMT

Google, geliştiricilerin uygulamalarından yeni haritalar (maps) oluşturmaları, mevcut haritaları görüntelemeleri/güncelleyebilmeleri ve ekli özellikleri (konum bilgileri, çizgiler, şekiller gibi) oluşturup silebilmeleri için Google Maps Data API (Geodata )'yi duyurdu.

Google Maps Data API'nin bazı özellikleri:
- Google, bu haritaların depolanmasını ve bandwidth'lerini kendisi üstlenmekte.
- Geodata'ya web'ten, mobil cihazlardan, 3D uygulamalardan ve komut satırından ulaşabilirsiniz.
- Coğrafik içeriklerin gerçek zamanlı indexlenmeleri/güncellenmeleri gerekir. Geodata bu güncellemeyi sağlamakta ve Google Maps'te aranabilir duruma getirmekte.

Kaynak: googlegeodevelopers
Takip Et: Bildirgeç FriendFeed Twitter Facebook RSS

Bu yazı hx 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

30 Adet Göz Dolduran Javascript Menü ve Kodu

hx — Mon, 18 May 2009 14:01:00 GMT

Web Sitelerinin en önemli parçalarından biri de sitelerin içeriklerine erişimi sağlayan menülerdir. Web sitelerinin bu önemli parçası için Javascript ile hazırlanmış, işlevsellikleri ve görsellikleri ile göz dolduran 30 adet menüyü kategorilere ayrılmış olarak hazırlanmış listeden deneyebilrisiniz.

Accordion Menu
Dynamic drive Accordion menu Demo

i-MarcojQuery Accordion Menu Demo

Horizonal Accordion Menu Demo

Bassistance jQuery Accordion Demo

Designreviver Horizontal Accordion Demo

Phatfusion Image Menu Demo

Dock Menu
iconDock

jQ Dock Demo

CSS Dock Menu jQuery + Fisheye Demo

euDock Demo

Web 2.0 Dock Menu Demo

Navigation/Drop Down Menu
Superfish Menu Demo

jQuery Feed Menu Demo

jQuery Context Menu Demo

Lavalamp Demo

jQuery Simple Drop Down Menu Demo

jQuery Menu Plugin Demo

Pupunzi MBmenu Demo

Slide Menu
Slide Menu Demo

Sliding Sidebar Menu Demo

jGlide Menu Demo

iPod Drilldown Menu Demo

Tree View
Demo

Tree Panel Demo

Sitemap Styler Demo

Dynamic Drive Tree View Demo

Kaynak: queness
Takip Et: Bildirgeç FriendFeed Twitter Facebook RSS

Bu yazı hx 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ımı i̇çin ücretsiz simgeler ve psd kaynakları bulabileceğiniz 45 site

hx — Fri, 27 Feb 2009 07:50:00 GMT

web tasarımı i̇çin ücretsiz simgeler ve psd kaynakları bulabileceğiniz 45 site

bu listede yüksek kalitede pek çok psd dosyası ve ücretsiz simge bulacaksınız. bunun yanısıra daha kolay simge oluşturmak için photoshop katman stilleri ve ücretsiz içeriğe odaklanmış sitelere de yine bu yazımda yer vermeye çalıştım. kimileri, simgeleri kendinizin oluşturmasının daha iyi olduğunu söyleyebilirler ancak bana göre, halihazırda ücretsiz olarak sunulan bir şeyi yeniden oluşturmanın; tabir-i caizse tekerleği yeniden icat etmenin alemi yok. ayrıca bu yazıda yer alan psd dosyaları da ilgili simgelerin nasıl oluşturulduğunu anlamanız için size bir ipucu olabilirler.

yazının devamına geçmeden önce bu simgeleri ya da diğer içeriği kullanmadan önce her bir kaynağın lisans koşullarına bir göz atmanızda yarar olduğunu hatırlatayım.

1. famfamfam

aslında bana kalırsa bu site, listedeki en iyi kaynak. bu yüzden ben de bu siteye listenin ilk sırasını verdim. site üzerinde sayısız simgeye ulaşmanız mümkün. üstelik simgeleri kendi web sitenizde de kullanabilirsiniz. i̇yi kalite, küçük dosya boyutu... daha ne ister insan?

2. 2 düğme psd'si ~ easydisplayname

3. psd kaynak paketi ~ deluxive

4. deluxive creative pack ~ deluxive

5. slash n flash düğmeleri psd ~ el3ment4l

6. çeşitli cam stil setleri ~ allhopeislost

ayrıca photoshop dosyalarını da ekledim, bu sayede ilgili cam efektlerini dilediğiniz element üzerine uygulayabilirsiniz. ayrıca simge oluşturmak ve elementlerine cam efekti eklemek isteyenler için ideal.

7. designer's delight style set ~ allhopeislost

8. çeşitli cam stil setleri 2 ~ allhopeislost

9. pin pictures psd ~ godspeed

fotoğraflarınızı sunabilmek için güzel bir yöntem.

10. gems psd ~ niccey

11. aero avatar and sig psd ~ fastnfurious

12. glass orb styles ~ kjherstin

13. template psd pack ~ tyr4nt

14. preview icon template ~ whyred

15. star sticker psd ~ matu666

16. radium neue icons 5 psd ~ gakuseisean

17. vista flare orb ~ frnak

18. psdfox ~ vathanx

19. radium icon psds ~ gakuseisean

20. office cork board version 1 ~ jakekimpton

21. refraction sphere by gusti-boucher

22. world orb icon psd ~ keitaru-san

23. psd avatar pack ~ eupholic

24. ivista icon psds ~ gakuseisan

25. globe resource psd ~ sneakytomato

26. iconice simge seti ~ dangeruss

27. glass video playback buttons ~ birofunk

28. login panel psd by sundox

29. free brush illustration by lorddarq

30. paperbag template psd by mangion

31. icons psd by igorka

32. free sponsor advertise buttons ~ grafon

33. windows button psd ~ vicing

34. free psd simgeleri (24 simge)

35. dezinerfolio: on-stage free vector psd icon set

36. dezinerfolio

37. computer icon + tutorial ~ gakuseisan

38. photoshop i̇çin psd biçiminde ücretsiz web şablonları / elementleri

bu site gerçekten yüksek kalitede simgeler, düğmeler, damgalar, arkaplanlar ve şablonlar sunuyor. kesinlikle kontrol etmeye değer.

39. sweetie

sevimli ve sade bir görünüme sahip olan bu simgeler özellikle web uygulamaları için ideal. 219 simgeyi içeren bu paketteki simgeleri hem bireysel hem de kurumsal projeleriniz için kullanabilirsiniz.

40. honeycomb patterns ~ c130

41. iconspedia

tamamen ücretsiz simgelere kendini adamış bir site. siz yine de simgeleri kullanmadan önce indirdiğiniz paketin kullanım koşullarına bir göz atın, özellikle kurumsal projelerinizde kullanmayı düşünüyorsanız.

42. developer icons by sekkyumu

43. 135 vector simge

44. web 2.0 damgaları

ve son olarak siz de web 2.0 damgalarınızı oluşturmak istiyorsanız bu siteyi kullanabilirsiniz.

kaynak: 1st web designer

Bu yazı hx 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

css'de uzman olmanızı sağlayacak 20 css dersi

hx — Sat, 14 Feb 2009 15:25:00 GMT

CSS'yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop'taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS'nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

1.3. CSS Tabanlı Navigasyon
Bu rehberin amacı fare imleci bir menü öğesi üzerine getirildiğinde ilgili öğenin ön plana çıkarılması ile sonuçlanan CSS tabanlı bir menü oluşturmak.

1.4. Şık CSS Menüsü
Bu makalede bazı sevimli Javascript efektleri kullanılarak oluşturulmuş özel bir navigasyon çubuğunun oluşturulma aşamalarını öğreneceksiniz. Mootools kütüphanesinin işlevselliği sayesinde bu efekt sadece 1.5 KB'a sığdırılmış durumda. Bununla da kalmıyor ve ilgili menü hem çapraz tarayıcı desteğini bünyesinde barındırıyor hem de erişilebilir olduğu için arama motoru optimizasyonunu dikkate alanların gönlünü fethediyor.

1.5. Kayan Kapılar
CSS ile kayan kapılar tekniğinin nasıl kullanılabileceğine yönelik güzel bir makale.

1.6. Tanıtım Metni İçeren CSS Dikey Navigasyon
Navigasyon elementlerine tanıtım metni eklemenin yanısıra bu teknik sayfanız üzerindeki herhangi bir elemente açıklama eklenecek şekilde modifiye edilebilir. Örneğin profil adlarına, soru-cevap tarzındaki SSS sayfalarına, navigasyon elementlerine ya da diğer uygulamalara açıklama mesajları ekleyebilirsiniz.

1.7. CSS'de Sekmeli İçeriğin Üzerine Bindirme
Bu makalede Javascript kullanmadan ve çapraz-tarayıcı desteği bulunan, CSS ile hazırlanmış, bindirme desteği bulunan bir CSS sekmeli navigasyonun nasıl oluşturulabileceği anlatılmış.

2. CSS İle Yuvarlatılmış Köşeler

2.1. Box - Hepsi İçin Yuvarlatılmış Köşeler
Bu egzersizin amacı görsel olarak göze hoş gelen ve semantik olarak yazılmış en az miktarda kod kullanarak yuvarlatılmış köşeler oluşturmak. Ayrıca bu kutuların boyutu gerektiğinde değiştirilebilmeli de. İlk kutu için gerekli olan XHTML ve CSS kutunun hemen alt kısmında yer alıyor.

2.2. CSS'de Yuvarlatılmış Köşeler
CSS'de yuvarlatılmış köşeler oluşturmaktan bahsediyorduk ve arkadaşıma kendi yöntemimi gösterdim. Bunu gerçekleştirebilmek için diğer yöntemlerin de olduğunu biliyorum ancak bu yöntemlerin pek çoğı karmaşık HTML ve CSS kullanımını gerektiriyor. İç içe girmiş DIV'lerin tablo kullanmaktan çok daha iyi olmadığının farkına vardım. Bu sebeple benim yöntemim HTML ve CSS açısından fazla bir kod gerektirmiyor.

pinkfloyd'un notu: Her ne kadar burada arkadaşımız tablo kullanma yoluna gitmiş ancak siz sakın zorunda olmadıkça bu yöntemi denemeyin. Tabloları sitenizin anahat elementlerini oluşturmak için kullanmak yanlıştır.

3. CSS Fotoğraf Galerisi

3.1. Hoverbox Görsel Galerisi
Efekt için anchor bağlantısı kullanılmış zira IE'de :hover ast sınfının tek desteklendiği element bu. Her ne kadar kullandığım bu örnekteki tüm bağlantılarda # bağlantısını kullanmış olsam da siz görsellerin tam boyutlu sürümlerine bağlantı verebilirsiniz.

3.2. Çapraz Tarayıcı ve Çoklu Sayfa Destekli Fotoğraf Galerisi
Suckerfish HoverLightbox'dan esinlenmesine rağmen bu örnekte benim geliştirdiğim, metin yerine görsel kullanan çoklu sayfa anahat sistemini kullandım.

Suckerfish HoverLightbox'un aksine bu sürüm JavaScript'e ihtiyaç duymuyor ve sadece CSS kullanılmasına rağmen IE üzerinde sorunsuz çalışıyor.

3.3. Kayan Fotoğraf Galerileri
Bu galeri benim bugüne kadar geliştirdiğim en sade galeri. Dikey olarak 8:1 oranında sıkıştırılmış görselleri sırasız liste üzerinde kullanıyorum. Bu görsellerden birinin üzerine fare imlecinizi getirdiğinizde sıkıştırılan bu görseller tam boyutuna genişliyor. Kayan menü sistemimi temel aldığım bu örnekte metin yerine görsel kullandım. Herhangi bir küçük resim kullanmaya gerek yok ve tüm görsel önceden yükleniyor. Bu yöntem hem dikey hem de gösterildiği gibi yataay olarak kullanılabilir.

4. CSS Gölgeler

4.1. CSS Gölge Efekleri: Fuzzy Shadows
Bu makalede:

IE harici tarayıcılarda bir stil şablonunu nasıl gizleyebileceğimizi ve bu sayede ilgili belgenin doğrulanmasını engellememeyi,
IE5.5 ve IE6'da PNG saydamlığının nasıl doğru olarak görüntülenebileceğini,
Yukarıdakileri kullanarak nasıl gölge efekti oluşturabileceğimizi öğreneceğiz.

4.2. CSS Gölgeler
Bu makalede bir başka tekniği inceleyeceğiz. Diğer tekniklerin pek çoğu negatif marj kullanırken bu örnekte bağıl pozisyonlama kullanılarak nasıl gölge efekti oluşturabileceğimizi göreceğiz.

5. Diğer CSS İpuçları ve Hileleri

5.1. IE Çift Yüzen Marj Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan css "hilelerinden" birisi de budur. eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: ie6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. ne şans ki ie6'nın bu hatasını gidermek çok basit.

5.2. CSS Çapraz Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz.

5.3. Kapanır Tablolar: Bir Örnek
Aşağıdaki tabloların her bili "footcollapse" adı verilen bir sında dahiller. Bu sayede kullanılan betik ok görselini altlığa yerleştiriyor ve üzerine tıkladığında tablonun kapanıp açılabilmesini sağlıyor.

5.4. CSS İle İçerik Üzerine İçerik
Kapsayıcı üzerine fare imlecini getirdiğinizde halihazırda var olan içeriğin üzerinde yeni bir kapsayıcı belirecektir. Bu teknik position:relative tekniğini kullanarak statik içeriğin mutlak olarak pozisyonlanmış içeriğin üzerinde görüntülenebilmesini sağlıyor.

5.5. CSS Yakınlaştırma
Son zamanlarda metni yeniden boyutlandırabilme özelliğini barındıran bir web sitesinin yeniden tasarlanmasında çalışıyorum. Sitenin hitab ettiği kesimin yaş ortalaması biraz yüksek, bu sebeple büyük boyutlu metin kullanmak onlar için önem taşıyor. Ve siz insanların tarayıcılarında halihazırda bulunan bu özelliği kullanmaları gerektiğini söyleyip üzerime yürümeye başlamadan önce pek çok ziyaretçinin bu tip özelliklerin farkında olmadığını ve benzer özelliğin sitenin içine gömülmesinden memnun olduğnu hatırlatmak isterim.

5.6. CSS İle Oluşturulan ve Sonradan Beliren Görsel Açıklamaları
Bu örnekte ise görsel açıklaması ve tanıtım tekniğini bir arada kullandım. Görselin açıklamasını bir bağlantı içerisine dahil ettim. Yapmak istediğim şey ise ilgili açıklamayı kullanıcı görsel üzerine fare imlecini getirene kadar gizlemek.

Kaynak: DWS mg

CSS Üzerine Yazdığım Diğer Yazılar

Bu yazı hx 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

25 Ajax Dersi

hx — Mon, 16 Jun 2008 08:29:00 GMT

Artık herkes onu kullanıyor! AJAX! Eğer güzel bir websitesi yapmak istiyen ve ajaxtan hoşlananlar ve öğrenmek isteyenler için güzel bir kaynak olacak umarım.

1.Ajax RSS Reader

Ajax,PHP ve MySQL ile yapılmış bir Rss okuyucusu.
2.Ajax Desktop Tutorial

Bu ders size adım adım nasıl masaüstüne benzeyen bir sayfa yapacağınızı anlatıyor.Demosu burada.
3.Ajax For Chat
JavaScript, XML, ve PHP ile birlikte basit bir chat uygulaması yaratabilirsiniz.
4.Ajax ve del.icio.us ile kendi bilgi alanınız
Bu teknik ana hatlarıyla Ajax ve API yi birlikte kullanmayı öğretiyor.
5.Ajax İçin Harita
Ajax ve flash kullanarak "windows gezgini" benzeri uygulama üretebilirsiniz. Biraz daha ayrıntı burada.
6.Ajax ve PHP ile Takvim
7.Google Takvimi' ni Sitenize Ajax İle Entegre
8. Edit In Place with AJAX Using jQuery
9.Ajax İle Oylama
10.Ajax İle Dosya Upload
11.Ajax ve PHP ile mail list oluşturmak
12.CAPTCHA ile iletişim formu
13.Ajax' ı captcha ile kullanın
14.Ajax Login Form
15.Yazılar için Ajax efekti | Demosu burada.
16.Form Tamamlayıcı | Demo burada
17.Auto-populating Select Boxes using jQuery & AJAX | Demo burada.

18.Ajax Açılır Menü
19.Ajax/PHP shoutbox
20.Ajax Tab Menü
21.How to Load In and Animate Content with jQuery
22.The Hows and Whys of Degradable Ajax
23.Ajaxın yarattığı gereksiz trafikden kurtulun
24.Geri butonu
25.Ekran okuyucuları

Bu dersler ingilizce olduğu için anlayamayanlar olacaktır. Ancak örneklere ve kodlara bakmanız halinde de fikir sahibi olacağınızı düşünüyorum.

Bu yazı hx 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

hx — 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ı hx 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