Tasarım Şablonları (Design Patterns)

Çok uzun süredir(4 şubat 2011′den bu yana) bloguma bir şeyler yazamadım.  Üzerine yazı yazacak konu bulma sıkıntısı ve zaman darlığından dolayı 1 yılı yakın süredir yeni bir yazı giremedim. Bu nedenle Tasarım Şablonları adlı bir yazı dizisi yazmaya karar verdim. Bu yazıyı da, bu yazı dizisine girizgah olarak yazmaya karar verdim.

Herhangi bir kavramın ne ifade ettiğini anlamak için en çok kullandığım teknik, o kavrama verilen isimde geçen kelimelerin anlamlarına bakmak olur benim için. Bu yazımda anlatmaya çalışacağım Tasarım Şablonları(Design Patterns) konusunda da bu teknik ile giriş yapacağım.

TDK’ya göre “Tasarım”;

isim Zihinde canlandırılan biçim, tasavvur

Tasarım kavramına gerçek hayattan basit bir örnek vererek başlayalım. 2 adet bardağı uzay boşluğunda herhangi bir konuma yerleştirsek bu bir tasarım olur.(Sadece 2 adet bardak olmasına rağmen sonsuz sayıda kombinasyon olabilir. Bu yüzden ortaya bir tasarım koymak aslında oluşan tasarımlar arasında herhangi birini seçmekten de geçiyor.) Programlamada düşünürsek eğer, sınıfların iç yapısı, sınıfların konumu, sınıfların ve bileşenlerinin çalışma şekilleri, yine sınıfların ve bileşenlerin birbirleriyle olan ilişkilerinin nasıl olacağı gibi konular birer tasarım konularıdır. Yani “Nasıl?” sorusunun cevabı yapacağımız tasarımdır.

Yine TDK’ya göre “Şablon”;

isim Üzerindeki harf ve şekillerin çevre çizgileri kalem ucu girecek biçimde oyuk olan, bu çizgilerden kalemle istenilen biçim elde edilen, metal veya plastikten cetvel

mecaz Çok kez tekrarlandığından kanıksanmış basmakalıp örnek

 Hala kullanılıyor mu bilmiyorum ama benim ilkokulu okuduğum yıllarda solda bulunan cetvel öğrencilerin olmazsa olmazlarından biriydi.

Bu şablon cetveli doğuş amacını düşünelim. Daire çizme ihtiyacımız var. Düzgün daire çizmek de haliyle biraz zor. Ve sık sık daire çizmemiz gerekiyor. O zaman şu şekilde diyebiliriz; ihtiyacımız net bir şekilde ifade edebiliyorsak ve çok fazla değişikliğe açık bir ihtiyaç değilse, neden bir kalıp kullanarak ihtiyacımızı karşılamayalım. Bu noktada oluşturduğumuz şablonlar ile sık sık doğan bir ihtiyacımızı kolaylıkla gidermek mümkün.

O zaman tasarım ve şablon kavramlarını birleştirelim. Bir ihtiyacı karşılamak için bir tasarıma ihtiyacımız var. Bu ihtiyaç çok yeni ve bize özel bir ihtiyaç değil. Daha evvelde birileri bu ihtiyaca sahip olmuş ve bu ihtiyacı tasarım geliştirerek gidermişler. Hatta tasarımları o kadar iyi olmuş ki herkes tarafından bilinir ve kullanılır olmuş. Bu tasarımlara genel olarak Tasarım Şablonları adını veriyoruz.

Yukarıda genel olarak gerçek hayattan, yazılıma özel teknik kavramlar yerine, gündelik hayattan örnekler vererek tasarım şablonları konusuna eğilmeye çalıştım. İsterseniz işin biraz da yazılım boyutuna bakalım.

Yazılım geliştirici olarak programlama süreci boyunca geliştirdiğimiz uygulamanın ihtiyaçlarını gidermemiz en büyük görevimizdir. Bu ihtiyaçları giderirken genelde her adıma karşımıza çıkan Nasıl? sorusunu çözmek ile uğraşırız. Çoğunlukla birden fazla alternatif üreterek bu alternatifler arasından en uygununu bulmaya uğraşırız. Bu genelde sancılı ve sıkıntılı bir süreçtir. Çünkü oluşturduğumuz tasarım ilerde doğacak yeni ihtiyaçlara ne kadar karşılayacağını kestirmemiz oldukça zordur. Bu noktada diğer yazılım geliştiricilerin tecrübelerinden faydalanabiliriz. Yani bizim kendi tasarımlarımız yerine, başkalarının geliştirdiği tasarımlar ile sorunumuzu çözebiliriz.

Programcılar tarafından ihtiyaçları karşılamak üzere geliştirilmiş ve tekrar kullanılabilir yapıda olan program parçalarına Tasarım Şablonu denir.

Tasarım Şablonu Kategorileri ve Tasarım Şablonları

1. Oluşturucu tasarım şablonları (Creational patterns) bunlar; Abstract Factory, Builder, Factory, Prototype, Singleton tasarım şablonları.
2. Yapısal tasarım şablonları(Structual patterns) bunlar; Adapter, Bridge, Facede, Decorator, Composite, Flyweight, Proxy tasarım şablonları.
3. Davranışsal tasarım şablonları(Behavioral patterns) bunlar; Command, Memento, Strategy, Iterator, State, Chain of Responsibility, Mediator, Observer, Template Method, Visitor tasarım şablonları.

Yukarıda yazdıklarım dışında birçok tasarım şablonu daha var. Ancak ben genel olarak bilinenleri yazdım.

Tasarım şablonunu kullanmak bize ne sağlar?

• Tasarım şablonları edinilen tecrübeler doğrultusunda oluştuğu için genellikle bizim o an oluşturduğumuz tasarımlardan daha iyi olacaktır. Gelecekte doğabilecek yeni ihtiyaçlara daha iyi cevap verebilir.
• Tekerleği yeniden icat etmek yerine, vaktimizi daha belirli ve bize özel ihtiyaçlarda kullanabiliriz.
• Tekrar kullanılabilir yapıda oldukları için yine vaktimizi daha iyi değerlendirmemize sağlar.
• Tasarımlar bir programcıya ait olmadığı için diğer programcıların tasarım anlaması çok daha kolay olur.
• Tasarım şablonlarını bizim dışımızda başka birileri tarafından da kullanıldığı için sürekli birileri tarafından geliştirilir.

Sonuç

Tasarım şablonları ile doğan tasarım ihtiyaçlarımızı gidermemiz mümkün. O zaman genel kabul görmüş tasarım şablonlarını öğrenirsek ihtiyacımız olduğunda bize uygun olan tasarım şablonunu seçerek ihtiyacımızı giderebiliriz. Bu sayede hem vakitten kazanmış oluruz hem de birçok programcı tarafından kullanılan bir tasarımı uygulamış oluruz.

Tasarım şablonları yazı dizisinde kendimce önemli gördüğüm tasarım şablonlarını PHP kullanarak anlatmaya çalışacağım.

Okuduğunuz için teşekkürler. Diğer yazılarda görüşmek üzere…

Css ile Su Damlası Menüsü (Water Wave Menu)

Geçen gün cep telefonumda Need for Speed Hot Pursuit oynarken navigasyon menüsü dikkatimi çekti. Menüdeki herhangi bir butona tıkladığımızda bir su birikintisine, bir damla düşmüş gibi arkasında dalgalar bırakıyordu. Bu şekilde bir menüyü acaba sadece CSS kullanılarak yapılmış mıdır diye kısa bir araştırma yaptım ama herhangi bir sonuca ulaşamadım.

Yapılmış herhangi bir örnek bulamayınca kendim yapmaya karar verdim.

Menüyü şu adımları izleyerek oluşturdum;

• Öncelikle yüksek border-radius değerleri ile ile yuvarlak halkalar elde ettim.
• En üste menü elamanın kendisini z-index değerlerini ayarlayarak yerleştirdim. Bunu altına ise dalga efektini verecek elementleri ilave ettim.
• Son olarak mouse, menü elemanlarının üzerine geldiğinde CSS’in transition özelliğini kullanarak animasyon şeklinde alta kalan halkaları genişlettim. Tabi halkalar genişlerken bulundukları konumu kaybettikleri için aynı anda top ve left değerlerini de uygun bir şekilde yine CSS transition özelliği ile ayarladım.

Sadece Chrome ve Safari de çalışıyor. Buradan test edebilir buradan da indirebilirsiniz

HTML5 ile Gelen Yeni Bir Özellik Web Storage

Web Storage özelliği tarayıcı tarafında verir saklamamızı sağlıyor yani basit bir veritabanı diyebiliriz. Bir anahtar(key) birde bu anahtara bağlı olan değer(value) vasıtası ile verilerimizi depoluyoruz Web Storage ile.

Tarayıcı tarafında veri saklamak yeni bir özellik değil, yıllardır çerezler(cookies) ile bu işlemi yapıyorduk ve hala yapmaya devam ediyoruz aslında.

Peki Web Storage’ın bize getirdiği avantajlar neler?

1. Bildiğiniz üzere çerezler sadece tarayıcı tarafındaki uygulamaların bilgi bilgi saklaması için geliştirilmemiştir. Çerezler aynı zamanda sunucu üzerinden tarayıcıda bilgi saklamak içinde kullanılır. Bu  yüzden her çerez sunucuya gönderilmek zorundadır.Açmak gerekirse siz tarayıcıda javascript kullanarak bir çerez oluşturup bu çereze teorik olarak 1MB boyunda bir değer girdiğinizde her http isteği için tarayıcı bu 1MB boyuntundaki veriyi sunucuya gönderecektir ve bu şekildeki kullanım gereksiz bir hantallığa yol açacaktır. Bu noktada imdadımıza Web Storage yetişiyor. Web Storage ile sakladığımız veriler http isteklerinde sunucuya gönderilmeyecektir.
2. Web Storage ile çerezlerden daha kullanışlı ve kolay veri saklıyabiliyoruz.

Web Storage kaça ayrılır.

Web Storage ikiye ayrılır;

1. Session Storage.
2. Local Storage.

Session Storage: “Storage” nesnesinden türetilmiştir. Session Storage ile sakladığımız verilerin ömrü tarayıcı kapana kadardır. Tarayıcı kapandıktan sonra bu veriler imha edilir.

Local Storage: Session Storage da olduğu gibi yine “Storage” nesnesinden türetilmiştir. Local Storage daki verilerin ömrü ise sonsuzdur. Yani Local Storage ile şuan yazdığımız bir veriyi bir yıl sonrada okuyabiliriz. Tabi ki tarayıcının başına kötü birşey gelmez ise

Session Storage ile Local Storage aynı method ve özelliklere sahiptir bunlar;

• “length” yazılmış verilerin adet olarak toplam sayısını verir.
• “getItem(anahtar)” girilen anahtar ismine ait veriyi döndürür.
• “setItem(anahtar, değer)” girilen anahtar ismi ve değere göre veriyi depoda saklar.
• “removeItem(anahtar)” girilen anahtar ismine göre veriyi depodan siler.
• “clear()” depoda saklanan tüm verileri siler.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl Kullanabiliriz?

Çok basit bir sayaç uygulaması ile kullanımına bakalım.

  var sayac = localStorage.getItem("sayac");
  sayac++;
  localStorage.setItem("sayac", sayac);
  $("#sayac").html("Sayac: " + sayac);

var sayac = localStorage.getItem(“sayac”) ile sayac anahtarına bağlı değeri çekiyoruz.

sayac++ ile bu değeri bir artırıyoruz.

localStorage.setItem(“sayac”,  sayac) kodu ile sayac anahtarına yeni sayac değerini ayarlıyoruz ve yeni sayac değerini #sayac elementine aktarıyoruz. Hepsi bu kadar!

Bundan sonra tarayıcımız kapansa dahi yine sayacın bulunduğu sayfa açıldığında sayaç değeri kaldığı yerden artmaya devam edecektir.

DEMO

Kaynaklar:

• http://dev.w3.org/html5/webstorage/
• http://www.quirksmode.org/blog/archives/2009/06/html5_storage_t.html
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/

HTML5 ile Gelen Yeni Bir Özellik Geolocation

İnternetin ilk dönemlerinde insanlar genellikle rumuzlar(nickname) ile internette var olmayı tercih ederken, günümüzde gerçek isimleri ve gerçek kişilikleri ile var olmayı tercih ediyorlar. Eğilim bu yönde olunca sadece ad ve soyad paylaşmak da yetmiyor haliyle. Kullanıcılar gittikleri mekanları, o an bulundukları yerleri de bir şekilde paylaşmak istiyorlar. W3C konsorsiyumu da bu ihtiyacı görmüş olacak ki HTML5′e  Geolocation özelliğini ekledi. Bende bu yazımda basit olarak Geolocation’dan bahsetmek istiyorum.

Peki Geolocation nedir?

Geolocation eğer kullandığımız cihazda bir GPS aygıtı var ise GPS’den gelen veriler ile konumumuz tespit ediyor. Eğer herhangi bir GPS aygıtımız yoksa cihazımızda, “IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs” bu bilgilerden yararlanarak konumuzu tespit etmeye çalışıyor. Çalışıyor diyorum çünkü bu yöntem ile pek doğru sonuçlar elde edemiyoruz .  Geolocation bu işleri bizim adımıza yapan API’dir.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl kullanabiliriz?

Aslında kullanmak oldukça kolay. “navigator” nesnesi ile kolayca konumu tespit edebiliriz. Aşağıda kullanımını görebilirsiniz.

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			var lat = position.coords.latitude;
			var lng = position.coords.longitude;
		});
	} else {
		alert('Tarayıcınız Geolocation desteklemiyor.');
	}

“navigator” nesnesi üzerinden “getCurrentPosition” methodu ile kullanıcının konumunu öğreniyoruz. Ancak bu işlemin gerçekleşmesi tarayıcıdan izin almamız gerekiyor, bu işlemi “getCurrentPosition” methodu bizim adımıza kendi gerçekleştiriyor.

“lat” değişkenimizin değeri enlemi “lng” değişkenimizin değeri ise boylam değerlerini veriyor.

Hepsi bu kadar. Aşağıdaki linkte google maps ile hazırladığım Geolocation demosuna bakabilirsiniz.

DEMO

Kaynaklar:

http://dev.w3.org/geo/api/spec-source.html

Çalışma Arkadaşları Arıyorum

RHXO Teknoloji Grubu’nun Ankara ofisinde çalışabilecek çalışma arkadaşları arıyorum.

Aranan Nitelikler:

• En az 3 yıllık web yazılım deneyimi olan.
• İleri seviye “PHP 5+” ve OOP deneyimi olan.

Bu niteliklere uyan çalışma arkadaşları arıyorum. Buraya tıklayarak iletişime geçebilirsiniz.