Native Application Nedir ?

Mayıs 28, 2011 at 18:28 · Kategori: Kısa Notlar

Mobil teknolojiler ilginizi çekiyor ya da çekmeye başladıysa muhtemelen native applicationı en azından bir yerlerden duymuşsunuzdur.

Native application kısaca internet bağlantısı gerektirmeyen, kullanmak için en azından bir yerden indirilmeyi gerektiren ya da kurulum  gerektiren uygulama tipi diyebiliriz. Bu tip uygulamalar internet üzerinden kullanılamayacağı gibi bilgisayarınızın işletim sistemi ve donanımsal özelliklerine göre birden çok kez programlamayı gerektirebilir.

Figure is taken from jquerymobile.com

Native Application ve Web Application arasındaki farkları sade bir dille açıklayan şu makale ayrıntılı bilgi arayanları memnun edebilir.

Yorumlar

Bigint Sayesinde Kentilyon’la Tanıştım

Mayıs 28, 2011 at 13:40 · Kategori: Kısa Notlar

Bugün blogumda ayrıca kısa notlar tutacağım bir kategori oluşturmak istedim. Bu notlar tamamen programlamayla ilgili olmamakla birlikte, yine programlama araştırmalarım sayesinde öğrendiğim bilgileri içermesine özen göstereceğim. Bir anlamda genel kültür kütüphanesi oluşturmaya çalışacağım.

Sql Server’ın veri tiplerini incelerken bigint‘in 10^18 sayısının uzunluğuna uzunluğuna eşit olduğunu öğrendim. Türkçe adıyla kentilyon. Katrilyon * 1000 şeklinde özetleyebiliriz.

Trilyon < Katrilyon < Kentilyon

Yorumlar

JQUERY’de .bind vs .live vs .delagate – Aralarındaki Farklar Nelerdir ?

Mayıs 25, 2011 at 11:38 · Kategori: Jquery

Açıklamada kullanacağım uygulamanın html yapısı

Yeni eleman yarat

Jquery’deki bu 3 farklı fonksiyon(bind, live, delegate) ile “li” elementine her tıklanışta, “#liste” idsine sahip ul elementinin içerisine yeni bir “li” elementi eklemeye çalışacağız.

.bind ile

Genel anlamda en çok bind fonksiyonunu kullanıyoruz. Bunu da çoğu zaman hiç bind yazmadan yapıyoruz. Zira aşağıdaki iki farklı kullanım aslında birbirinin aynısıdır. Kısaca hiç .bind yazmadan bir event handler yazıyorsak, jquery kütüphanesi bunu default olarak .bind ile ilişkilendiriyor.

$('#liste li').click(function(){
$(this).parent().append('
Yeni eleman yarat

')
});

$('#liste li').bind('click', function() {
 $(this).parent().append('
Yeni eleman yarat

')
});

Bind methodu ile yaşayacağımız sorun yeni yaratılan li elementlerin her hangi bir click olayına dahil edilmemesidir. Kısaca yeni yaratılan elementler .bind foksiyonu ile mevcut methodla ilişkilendirilmez.

.live ve .delegate ile

Bu iki fonksiyonda ise durum biraz daha farklıdır. Bu fonksiyonlar şu anki mevcut DOM yapısındaki elementler kadar, daha sonra dinamik olarak yaratılan elementlere de methodları bağlamayı sağlar. Örneğimizle açıklamayı ilişkilendirmemiz gerekirse, yeni yaratılmış olan li elementlerine tıklayarak da yeni element yaratabiliriz. Kısaca ajax kullanarak sayfaya postback olmadan yeni elementler ekliyor ve bu yeni elementlerin de mevcut methodlardan faydalanmasını istiyorsak .bind yerine .live ya da .delegate kullanmalısınız.

$('#liste li').live('click', function() {
 $(this).parent().append('
Yeni eleman yarat

')
});

$('#liste').delegate('li',click', function() {
 $(this).parent().append('
Yeni eleman yarat

')
});

Performans açısından delegate, live fonksiyonuna göre ‘context’ belirtildiği için daha hızlı çalışmaktadır. Zira live fonksiyonu body/document elementini hedef almaktadır. Delegate ile başlangıç noktasını biraz daha belirli (spesifik) hala getirebilirsiniz. Ancak Jquery 1.4 ve üstü sürümlerinde .live fonksiyonuna da ‘context’ özelliğinin eklendiğini belirtmeliyim.

$("li",$("#liste")[0]).live("click",function(){
         $(this).parent().append('
Yeni eleman yarat

')
});

Sonuç olarak eğer dinamik olarak elementler yaratıyor ve bunlarında mevcut event handlerdan faydalanmasını istiyorsanız .live ya da .delegate kullanmanız gerekiyor. Performans gibi durumlarını göz önüne aldığımızda ve kullanım kolaylığı söz konusu olduğu için .live yerine .delegate kullanmak ise çoğu zaman daha akıllıca olacaktır.

Uygulamayı önizlemek için buraya tıklayınız.

Yorumlar

Sayfanın En Altında Sabit Duran Bir Footer Oluşturmak

Mayıs 14, 2011 at 01:49 · Kategori: CSS

Özellikle son projelerimde, tasarımlarda sıkça sabit footer kullanmaya başladım. Peki sayfa yüksekliği ne olursa olsun footer’ı sayfanın en altına nasıl sabitleyebiliriz, birazdan mantığıyla birlikte bunu anlatmaya çalışacağım.

Aşağıdaki yapıda bir sayfa yapımız olduğu varsayalım.

UST KISIM


İÇERİK






FOOTER

Sayfa boyunu %100 olarak ayarlayarak,öncelikle kullanıcının o an kullandığı tarayıcının pencere yüksekliğine göre dinamik bir yapı sağlayacağız. Daha sonra #container elementini, kullanacağınız footer yüksekliği kadar yukarı çekeceğiz (margin-bottom:-140px). Örnekte footer yüksekliğini 140px olarak belirledim.

* { margin:0; padding:0;}

html, body {
height: 100%;
}

#container {
height: auto !important; /* IE Düzeltmesi */
height: 100%;
min-height: 100%;
margin: 0 auto -140px; /* footer'un yüksekliği kadar (-)margin-bottom uyguladık */
background:blue;
}

.ek{
height: 140px;
}

#footer {
height: 140px;
background:red;
color:#999999;
}

//ekstra

#header
{
height:150px;
background:powderblue;
}

#content
{
height:400px;
background:blue;
}

Bu yapı tasarımınıza sabit bir footer özelliği kazandıracak. Peki “ek” class ismine ait div’i neden kullanıyoruz ? Bunun nedeni #container idli blok elementinin stilinde margin-bottom:-140px özelliğini kullanmamız. Zira böyle bir durumda hemen altındaki #footer elementi bu boşluğu doldurmaya çalışacaktı. Bu sebeple #container elementinin içerisine ek bir blok yaparak, bu boşluğu footer’ın yerine doldurmasını sağladık.

Önizleme için buraya tıklayınız.

İyi çalışmalar,

Yorumlar

Jquery’de Her n. Elementi Seçmek

Mayıs 13, 2011 at 00:27 · Kategori: Jquery

JQuery’de her n. elementi seçerek bir ürün listeleme sayfasında en sağdaki “li” elementine ait “border-right” özelliğini “none” yapacağız. Ürün listelemek için aşağıdaki gibi basitleştirilmiş bir yapıya sahip olduğumuzu varsayalım.

Örnekteki elementlerin CSS Yapısı

ul#listeleme3
{
    width:752px;
}

.product
{
   float:left;
   width:250px;
   height:300px;
   border-right:1px solid #e5e5e5;
   border-bottom:1px solid #e5e5e5;
}

Örneğin HTML yapısı

 Ürün 1 
 Ürün 2 
 Ürün 3 
 Ürün 4 

Bu yapı bize aşağıdaki çıktıyı verecek. ( Görselde asıl projemdeki örneği kullandım )

Eğer biz bu yapıda her 3. “li” elementinin border-right özelliğinin none olmasını istiyorsak, aşağıdaki yöntemini kullanarak bunu başarabiliriz. Bu yöntemin jquery kütüphanesiyle birlikte geldiğini unutmayınız.

Yazının Devamı

Yorumlar