Nil Buşra Özer Kişisel Blog

Herkese merhabalar.

Bugünlerde JavaScript kütüphanelerine merak sardım. Öğrenmesi ve uygulaması benim için oldukça zevkli olan bilgilerimi sizlerle paylaşmak adına bu yazı dizisine başlayacağım. Yazılarımda sizleri olabildiğince sıkmadan, öğrenmiş olduğum dokuz farklı kütüphaneden bahsedeceğim. Anlatacağım kütüphanelerin neler olduğundan bahsetmeden önce, JavaScript kütüphanesinin tam olarak ne olduğundan ve kullanımının bize kazandıracağı noktalardan bahsetmek istiyorum.

JavaScript kütüphanesi, JavaScript tabanlı web uygulamalarının gelişimini hızlandırmak adına tasarlanmış olan JavaScript kontrolleridir. İleri JavaScript programlamada karşılaşılan zorlukların ve bu zorluklardan dolayı yaşanılan zaman kaybının önlenmesindeki çözüm, JavaScript kütüphaneleridir. İhtiyacımız olanı uğraşlı bir şekilde yazmak yerine, ihtiyacımızın belki de çok daha fazlasını karşılayacak olan kütüphaneleri kullanmak, zaman kaybını ve programcı hatasını önleyecektir. Her hafta detaylı bir şekilde açıklayacağım kütüphanelerden aşağıda kısaca bahsedeceğim. Örneklerimi olabildiğince ASP.NET ortamında uygulayarak sizlerle paylaşacağım.

1. Intro.js Kütüphanesi

Bu kütüphanenin temel kullanım amacı adım adım yol gösterim özelliğidir. Web sitelerinizin, tanıtımını yapmak istediğiniz herhangi bir projenizin, bu kütüphane sayesinde anlatım kılavuzunu rahatlıkla hazırlamanız mümkün. Bu durumu kafanızda canlandırmanız açısından bir örnek ile açıklamak istiyorum. Diyelim ki yemek siparişi vereceğim bir siteden yemek sipariş etmek istiyorum ; fakat sitede o kadar çok seçenek var ki hangi butona basmam gerektiğini bilmiyorum. Sitenin yardım kısmına gelerek Intro.js kütüphanemiz sayesinde adım adım oluşturulmuş kullanım kılavuzunu takip ederek, hangi butonlara basmam gerektiğini öğrenerek sistemi rahatlıkla kullanabilirim. Genel hatlarıyla bu kütüphanenin özelliklerini sıralayacak olursak:

Kullanımı oldukça kolay; JavaScript ve CSS dosyalarımızı ekledikten sonra, kodumuza data-step ve data-intro ekliyoruz.
Ücretsiz ve açık kaynaklıdır.
Hızlıdır.
Boyutu küçüktür şöyle ki; 4 KB JavaScript ve 2.5 KB CSS (gzip) içermektedir.
Klavye ve mouse navigasyonu vardır.
Tarayıcı uyumluluğu mevcuttur. En çok kullanılan; Firefox, Chrome ve IE8' in son sürümlerinde çalışmaktadır.

2. Hammer.js Kütüphanesi

Hammer kütüphanesi, küçük ve kompleks olmamakla birlikte oldukça işe yarar bir kütüphanedir. Dokunmatiklik özelliğini sağlar ve çoklu dokunmatiklik (multi-touch) özelliğiyle öne çıkmış bir kütüphanedir.

Sağladığı hareket özelliklerine gelecek olursak:

Kaydırma (geçişler)
Döndürme
Sürükleme
Baş parmağınız ve işaret parmağınızı birlikte kullanarak yakınlaştırmayı sağlamak (pinch)
Ekrana vuruş hareketi (tap), çift vuruş hareketi (double-tap)

Bu kütüphane her cihazda maalesef ki çalışmıyor. Kullanılabildiği dokunmatik cihazlara gelecek olursak:

Android
BlackBerry
iOS
Windows
Masaüstü tarayıcılarında ; eğer IE' ın eski sürümlerini kullanıyorsanız, jQuery eklentisinin olması gerektiğini unutmamamız gerekiyor. Masaüstü bilgisayarınızda size önerilen tarayıcı Safari' dir. Aksi takdirde çalışmama durumu ile karşılaşabilirsiniz.

Instance metotları (statik olmayan üye metot) "hammertime" instance (üye) değişkenimiz olmak üzere;

hammertime. on (gesture, handler)
hammertime. off (gesture, handler)
hammertime. enable (toggle)
hammertime. trigger (gesture, eventData)

bu metotların ne işe yaradığını, bu konuya özel olan yazımda detaylı bir şekilde sizlere anlatacağım.

Multi-touch (çoklu dokunmatiklik) özelliğinin hammer.js kütüphanesi sayesinde masaüstü bilgisayarımızda nasıl gerçekleştiğini, bu siteden görebilirsiniz.

3. Chronoline.js Kütüphanesi

Planladığınız işlerinizi tarihe göre yatay bir zaman çubuğu üzerinde sıralamak istediğinizde size gelecek olan en iyi çözüm chronoline.js JavaScript kütüphanesidir. Bu kütüphanenin kullanılabilmesi için raphael.js JavaScript kütüphanesine ihtiyacı vardır. Bu kütüphane de sizlere anlatacağım kütüphanelerden biri, bu konuya sonra değineceğim. İsterseniz ek olarak jQuery de kullanarak daha hoş tooltipler kullabilmek mümkün.

Tooltip: Tooltip, bizlere daha farklı ve göze hoş gelen bilgilendirme çubukları oluşturmamızı sağlar ve kullanıcıların gözüne daha hoş gelen açıklama kısımları oluşturmamıza yardımcı olur.

Zaman çubuğunuza istediğiniz zaman özelliğini katabilirsiniz; dilediğiniz kadar gün sayısı olarak , hafta olarak, ay olarak, yıl olarak...

Bu kütüphane modern tarayacılarda çalışmaktadır, bu tarayıcılar:

Internet Explorer 8 + (tooltip kullanılmamış ise)
Firefox 12 +
Chrome 18 +

Aşağıdaki örnek, çeyrek yıla göre düzenlenmiş bir zaman çubuğu çizelgesidir. Bu kütüphanemizden detaylı bir şekilde önümüzdeki haftalarda bahsedeceğim.

4. Raphael.js Kütüphanesi

Raphael.js, SVG ( Scalable Vector Graphics) / VML (Vector Markup Language)' in temelinde kullanılan kütüphanedir. Sayfamızda vektörel grafiklerin çizilmesini sağlamakla yetinmeyip, ortaya çıkan çizgi, çember, dikdörtgen, kare gibi şekillerin rengi değiştirilebilinip, bu şekillere animasyon eklenebiliyor. Öncelikle kütüphanenin birkaç özelliğinden bahsetmek istiyorum. Bu kütüphanemiz küçük boyutlu, kullanımı oldukça kolay ve MIT lisansı altındadır. Tüm web tarayıcılarında çalışmaktadır. Aşağıda genellikle kullanıldığı tarayıcıları örnek olarak gösterebilirim:

Chrome 5.0 +
Firefox 3.0 +
Safari 3.0 +
Opera 9.5 +
Internet Explorer 6.0 +

Raphael.js ile çizilmiş şekillere verilecek birkaç özellikten bahsedelim:.

İstenen dereceye göre elementin döndürülmesi sağlanır.
Koordinatlara göre canvasın içindeki herhangi istenen bir bölgeye elementin taşınması sağlanır.
Canvasın içerisine resim ekleyebilmemiz sağlanır.
Elips şekli oluşturmamız sağlanır.
İstediğimiz sayı kadar istediğimiz elementi ölçeklendirebiliriz.
Elemente sürükle bırak özelliği ekleyebiliriz. Örnek görmeniz açısından bu siteyi ziyaret edebilirsiniz. Bu konuyu anlatacağım hafta, detaylı bir şekilde örneklerle birlikte açıklayacağım.

Raphael.js' de kullanılan birkaç fonksiyon örneği verelim:

Element.animate() : İstenen elemente animasyon ekler.
Raphael(): Bu kütüphanede tüm şekiller kütüphanenin paperına yazılır. Paperı oluşturabilmemiz için bu fonksiyona ihtiyacımız vardır.

container = document.getElementById('canvas_container');
paper = new Raphael(container, config.canvas.width, config.canvas.height);

Paper.rect(): Oluşturulmuş sayfaya (yukarıdaki örnekteki page) istediğimiz yükseklik ve genişlikte dikdörtgen çizilmesini sağlar.
Paper.circle(): Oluşturulmuş sayfaya (yukarıdaki örnekteki page) çember çizilmesini sağlar.

Bunun gibi bir sürü fonksiyon vardır raphael.js' de ; fakat diğerlerini detaylı bir şekilde bu konuyu anlatacağım hafta inceleyeceğiz.

5. Sylvester Kütüphanesi

Sylvester kütüphanesi; vektör, matris ve geometri kütüphanesidir. İstediğimiz boyutta matris ve vektör modelleyebilmemizi sağlayan sınıflar içeriyor. MIT lisansı altındadır. Örneğin; iki vektörü çarpacaksınız ve bunun için bir sürü döngü yazmanız gerekecek, sizi bu zahmetten kurtaracak olan çözüm sylvester olacaktır.

Sylvester 0.1.0 versiyonundan itibaren;

Vektör için:

Sınıf metotları: create, i, j, k, Random, Zero.

Instance (üye) metotları:

add
angleFrom
cross
dimensions
distanceFrom
dot, dup, e
indexOf
toDiagonalMatrix

bunlar gibi başka metotlar da var ; fakat detaylı bir şekilde anlatacağım zaman açıklayacağım.

Matris için:

Sınıf metotları: create, Random, Diagonal, Rotation, RotationX, RotationY, RotationZ, Zero.

Instance (üye) metotları:

add
augment
canMultiplyFromLeft
col, cols, det
determinant
diagonal
round, row, rows, rank, rk
isSquare, isSingular
inv, inverse
tr, trace, tranpose

bunlar gibi başka metotlar da var ; fakat detaylı bir şekilde anlatacağım zaman açıklayacağım.

Line (çizgi) için:

Sınıf metotları: create, X, Y, Z.

Instance (üye) metotları:

contains
distanceFrom
dup, eql
rotate, translate
reflectionIn
setVectors
pointClosestTo
isParalellTo
liesIn
intersectionWith

Düzlem için:

Sınıf metotları: create, XY, XZ, YX, YZ, ZX, ZY.

Instance (üye) metotları:

contains
distanceFrom
dup, eql
intersects, intersectionWith
isParalellTo
isPerpendicularTo
pointClosestTo
setVectors
rotate, reflectionIn
setVectors
translate

detaylı bir şekilde örneklerle birlikte bu metotları, sonraki haftalarda konuyu anlatacağım zaman tekrar konuşacağız.

6. Reflection.js Kütüphanesi

Bu kütüphane sayesinde web sayfanızda seçtiğiniz resimlerinize yansıma ekleyebilirsiniz. Yansımaların boyutunu ve saydamlığını değiştirebilmeniz mümkün. Diyelim ki; yansımanızın tüm resmin yarısı kadar olmasını ve yarı saydam bir şekilde olmasını istiyorsunuz, elbette ki reflection.js sayesinde bu mümkün. Yansıma ekleyebilmeniz için seçtiğiniz resmin " image " elementi olması gerekir. Default olarak, yansıma arka plan rengindedir. İsterseniz rengini de değiştirebilirsiniz. Başlıca bütün web tarayıcılarında çalışmaktadır. Örnek verecek olursak:

Internet Explorer 5.5 +
Mozilla Firefox 1.5 +
Opera 9 +
Safari 2 +
Google Chrome (tüm versiyonlar)
Eski tarayıcılara da indirgenebilme özelliği mevcut

Bu kütüphaneye ait birkaç fonksiyondan bahsetmek istiyorum ; fakat detaylı bir şekilde sizlere, sadece bu konuya özel olan yazımda örneklerle anlatacağım.

Reflection.remove(image): Resimden yansımayı kaldıran fonksiyondur.
Reflection.add(image, options): Resime yansıma ekler.

Kullanımı oldukça kolay ve boyutu küçük bir kütüphanedir. Kullanımında yapmanız gereken tek şey image elementine class= "reflect" sınıfını ekleyin.

Yukarıdaki; boyutu, yüksekliği ve saydamlığı benim isteğime göre ayarlanmış bir resimdir.

7. Bootbox.js Kütüphanesi

Bootbox.js, Twitter Bootstrap modelini kullanarak ileti kutuları oluşturabilmeyi sağlar. Ücretsiz ve açık kaynaklıdır. Alarm, teyit ettirme gibi durumlarda ileti kutularımızdaki butonlar ve yazılar ile bize seçenekler sunar. Kullanımı oldukça kolaydır. En basitinden bir örnek verecek olursak;

bootbox.alert(" NE YAZMAK İSTERSENİZ ");

şeklinde bir uyarı kutucuğu oluşturmak için tek satır olan bu kodu yazmamız yeterlidir. Biraz da bootbox metotlarına değinmek istiyorum. Bu metotların kullanım amaçlarını ayrı ayrı detaylı bir şekilde örneklerle bu konuya özel olan yazımda sizlerle paylaşacağım.

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
bootbox.setDefaults(object options)
bootbox.hideAll()
bootbox.dialog(options)

bootbox.alert metodunun illaki callback parametresini almasına gerek yoktur, gerekli olan tek parametre iletide çıkacak olan mesaj kısmıdır.

Yukarıdaki örnek alert (ikaz iletisi) örneğidir.

8. Knockout.js Kütüphanesi

Özellikle büyük ve kompleks olan projelerde JavaScript ve HTML kodlarının iç içe geçmesi programcıya zorluklar çıkarıp zaman kaybına neden olur. Modelleme mantığıyla tasarım iç içe kullanılmış olduğu için programcının her ikisine de iyi derecede hakim olması zor olabilir. Böyle karışıklıkların yaşanacağı durumlarda knockout.js yardımımıza koşacak. Nasıl olacak dediğinizi duyar gibiyim. Şöyle ki; knockout.js kütüphanesi zengin ve etkileşimli kullanıcı arayüzleri oluşturma imkanı sağlar. Dinamik olarak değişen arayüz elemanları var ise kullanım ve geliştirme kolaylığı ile öne çıkmaktadır. MVVM (Model View ViewModel) dizayn modelini kullanarak geliştirme yapılır. Modeldeki değerler, kullanıcı hareketlerine göre güncellenir. Bind mekanizması sayesinde otomatik güncelleme yapılır. Boyutu küçük bir kütüphanedir (42 kb), ücretsizdir, başka bir kütüphaneye bağımlı değildir. Modern tarayıcılarda çalışmaktadır:

Internet Explorer 6 +
Firefox 2 +
Google Chrome
Opera
Safari

Bu kütüphane 3 temel özellik üzerine kurulmuştur;

Şablon kullanımı
Veri bağlama
Observable ve bağımlılık izlemesi

Önümüzdeki haftalarda bu konuya özel olan yazımda örneklerle detaylı bir şekilde öğreneceğiz.

9. Typeface.js Kütüphanesi

Web sitenizde grafik yazınıza istediğiniz fontu eklemek için artık flash kullanmanıza, resimler oluşturmanıza gerek kalmadı. Bu kütüphane sayesinde sitenize dilediğiniz fontu ve rengi kolay bir şekilde ekleyeceksiniz. Cümlenin harfleri arasındaki boşluk, harflerin üst ve alttaki boşlukları da ayarlanabilmektedir. Detaylı bilgi için bu siteyi ziyaret edebilirsiniz. Ücretsiz bir kütüphanedir. Desteklenen tarayıcıları aşağıda belirttim.

Safari 2 +
Firefox 1.5 +
Internet Explorer 6 +
Google Chrome

Bu konuyu anlatacağım yazımda örneklerle konumuzu tekrar detaylı bir şekilde inceleyeceğiz.

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Intro.js kütüphanesinden detaylı bir şekilde bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın..

Kaynaklar

Nil Buşra Özer Kişisel Blog

13 Ekim 2013 Pazar

1 yorum: