bildirgec.org - aziL - beğendikleri

Tarayıcı Sorunlarını Çözen jQuery Eklentileri

aziL — Mon, 13 Apr 2009 06:47:00 GMT

Mümkün olduğu kadar CSS kullanılması gerektiğini öneriyoruz ve genellikle bunda da başarılı oluyoruz. Modern tarayıcıların CSS için çok iyi desteği bulunuyor, en azından anahattınızı ve sunumunuzu düzenlemek için CSS kullanmanıza yetecek kadar destek içeriyorlar. Ancak bazen bazı sayfa elementleri farklı tarayıcılar üzerinde farklı görünmektedirler. İşte bu yüzden biz de bugünkü yazımızda farklı tarayıcılarda görünen sorunları giderecek 15 jQuery çözümünün yanısıra size bazı güzel tarayıcı efektleri verecek jQuery eklentilerini listeleyeceğiz.

1. Internet Explorer'da DD_Roundies İle Yuvarlatılmış Köşeler Kullanabilmek

Ne yazık ki CSS3 border-radius şimdilik sadece Safari ve Firefox tarafından desteklenmekte olup, Internet Explorer gibi tarayıcılar üzerinde kare köşeler kullanmak zorunda kalıyoruz. DD_Roundies kütüphanesi yuvarlatılmış köşeleri Internet Explorer üzerinde sorunsuzca kulanabilmemizi sağlyor. DD_roundies, tıpkı jQuery gibi, seçicilerle birlikte çalışıyor ki bu sayede jQuery UI'nin CSS Çatı sınıflarını hedefleyerek DD_roundies'i jQuery UI üzerinde sadece birkaç satırlık kısa kodla uygulayablmemimizi sağlıyor.

Demo Burada

2. jQuery İle Eşit Yükseklikler Kullanabilmek

Eşit yüksekliğe sahip sütunların ya da içerik kutularının görsel efektini kullanabilmek her zaman zor olmuştur. Kullanılabilirlik ve performans açısından kullanılabilecek etkin bir çözüm, basit bir JavaScript kodu kullanmaktır. eQualHeights() fonksiyonu, bir kapsayıcı içerisindeki tüm elementlerin yüksekliklerini hesaplıyor ve ardından diğer her elementin minimum-height değerini uzunluğu en fazla olan değere eşitliyor. JavaScript etkisizleştirildiğinde ise kutular farklı boyutlarda görünmesine rağmen içerik ve sayfa tümüyle erişilebilir ve kullanılabilir kalmaya devam ediyor.

Demo Burada

3. Çapraz Tarayıcı Uyumlu text-shadow (metin gölgesi)

text-shadow güzel bir CSS3 (aslında CSS2) özelliği olup metinlerin ardında gölge görüntülememizi sağlıyor. Ancak bu özelliğin kötü bir tarafı var ki o da Internet Explorer üzerinde çalışmaması. Internet Explorer ile ilgili kullanışlı bir özellik var ki o da anlamadığı CSS tanımlamalarına erişim imkanı vermesi ki bu sayede biz de istediğimiz elemente text-shadow değerini uygulayıp ardından onu işletebiliyoruz. Bu betiğin Internet Explorer 5.5'ten Internet Explorer 8'e kadar olan tüm tarayıcılarda çalışması gerek.

Demo Burada

4. Yuvarlatılmış Köşeler

Bu jQuery eklentisi güzel görünümlü yuvarlatılmış köşeleri sorunsuzca oluşturabilmektedir. Herhangi bir görsel ya da yoğun kod kullanmanıza da gerek yok. padding desteği sayesinde JavaScript'in etkin olmadığı tarayıcılarda ise herhangi bir sorun yaşanmıyor.

5. Footer (Altlık) Pozisyonlama

Bu küçük eklenti, sayfanızın footer (altlık) kısmını tarayıcının görünen kısmının en altına yerleştirmenizi sağlar. Altlığın üzerindeki içerik yeteri kadar uzun olmadığı durumlarda bile betik, altlık kısmını başarılı bir şekilde pozisyonlamaktadır.

Demo Burada

6. Bağlantı Kontrolü

Bu küçük eklenti sayesinde son kullanıcıya bağlantıları yeni pencerede açmak isteyip istemediklerini seçebilmelerini sağlayabilirsiniz.

Demo Burada

7. Sayfa Kıvrımı

Günümüzde pek çok web sitesinde kullanılan ve sayfanın herhangi bir köşesinde beliren kıvrım efektinin altından reklam ya da herhangi bir duyuru gösterebilmenizi sağlayabileceğiniz bir jQuery eklentisi.

Demo burada

8. (Uzun) Web Sayfalarında Görsellerin Yüklenmesini Geciktirmek

Lazy Loader bir jQuery eklentisi olup (uzun) web sayfalarında görsellerin yüklenmesini geciktirmek için kullanılabilir. Bir web sayfasının görünen kısmının dışında kalan görseller, kullanıcı tarayıcının kaydırma çubuklarını kullanarak o alanı görüntülemediği sürece o alandaki görseller yüklenmeyecektir. Bu eklenti özellikle çok fazla sayıda görsel içeren uzun sayfaların yüklenmesini önemli ölçüde hızlandıracaktır. Tarayıcı, görünen kısımdaki görseller yüklendikten sonra diğer görsellerin yüklenmesi için hazır durumda bekleyecektir. Bazı durumlarda bu betiğin kullanımı, sunucuya bindirilen yükün de hafiflemesine yol açacaktır.

Demo Burada

9. jQuery İle Görselleri Sırayla Önceden Yüklemek

Bu küçük kod parçacığı bağlantıların üzerine fare imleci getirildiğinde görsellerin yüklenmeye başlamasını sağlar. Tüm sayfa elementlerinin yüklenmesinin tamamlanmasını bekleyebilmek için $(window).bind('load',function(){...}) kullanmaktadır. Bu, tüm görselleri kapsar.

10. BGIframe

Internet Explorer'in z-index sorunları ile baş edebilmek için kullanabileceğiniz bir eklenti.

11. IE Overflow Problemini Gidermek

Internet Explorer, Firefox ve Safari ile karşılaştırıldığında overflow elementini farklı bir şekilde yorumlamaktadır. Özellikle Firefox, bir elementin sınırlarını zorladığınızda, o elementin dışına yatay bir kaydırma çubuğu yerleştirmektedir. Ancak içerik yatay olarak sınırı geçtiği için, IE üzerinde, bir yatay kaydırma çubuğu belirdiğinde, içerik dikey olarak görüntülenememektedir.

Dikey overflow daima elementin içerisinde yer aldığından aşağıdakileri sadece IE için uygulamanız gerekmektedir.

İçeriği yatay olarak sınırlar dışına taşan tüm elementleri bulun.
Elementimizin altına 20 piksellk padding ekleyin.
Dikey kaydırma çubuğunu atın.

(function ($) {
$.fn.fixOverflow = function () {
if ($.browser.msie) {
return this.each(function () {
if (this.scrollWidth > this.offsetWidth) {
$(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
}
});
} else {
return this;
}
};
})(jQuery);

// kullanım
$('pre').fixOverflow().doOtherPlugin();

Yukarıdaki kod uygulandığında IE üzerinde yatay kaydırma çubuğu elementin altında görünmektedir.

Demo Burada

12. JavaScript Kullanarak CSS Hilelerinden Kaçınmak

Eğer sırf kodunuzu istediğiniz ya da olması gerektiği gibi göstermeyen o çirkin CSS hilelerini uygulamak istemiyorsanız, o zaman bu ipucunu kullanabilirsiniz. "Tarayıcı seçicileri". Bu sayede stilinizin önüne .msie, .mozilla, .opera, .safari ya da hedeflemek istediğiniz .diğer tarayıcı sınıflarını kolayca dahil edebilirsiniz.

Demo Burada

13. Tıklanabilir Alanın Boyutunu Arttırmak

Tüm içerik bloğunu tıklanabilir hale getirerek artık o sıkıcı "Devamını Oku" bağlantılarına bir son verin.

Demo Burada

14. Elementi Dikey Olarak Ortalamak

Bu video kılavuzunda CSS ve jQuery'nin gücünü kullanarak tarayıcı penceresinin görünen alanı üzerinde bir elementi nasıl dikey olarak ortalayabileceğinizi öğreneceksiniz.

15. jSizes - CSS Özellikleri İçin jQuery Eklentisi

JSizes, jQuery'e min-width, min-height, max-width, max-height, border-*-width, margin ve padding özelliklerini ekleyen bir eklentidir. Bunun yanısıra bir elementin görünürlüğünü belirleyebileceğiniz bir metod daha içermektedir. Toplamda jQuery API'sine 6 yeni metod eklemektedir.

Bu metodların nasıl kullanılabileceğine birkaç örnek:

jQuery(function($) {
var myDiv = $('#myDiv');

// margin-top özelliğinin değerini 100px ve margin-bottom özelliğinin değerini 10em yap
myDiv.margin({top: 100, bottom: '10em'});

// üst sınırın boyutunu piksel değerinde gösterir
alert(myDiv.border().top);

// element görünür ise doğru, diğer durumlarda yanlış değerini verir
alert(myDiv.isVisible());

// zincirleme kullanarak padding-right özelliğinin değerini 10px ve margin-left değerinin özelliğini 15px yap
myDiv.padding({right: 10}).margin({left: 15});
});

Aşağıdaki Yazıyı da Okumak İsteyebilirsiniz

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

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

Websitenizi Hızlandıracak ve Kodunuzu İyileştirecek 15 İpucu

aziL — Wed, 08 Apr 2009 07:06:00 GMT

Bir süre kodlama yaptıktan sonra artık kendinizi tekrar etmeye başlar, aslında ne kadar zeki olduğunuzu unutursunuz. Kaç yüz tane klavye kısayolunu hafızamızda tutuyoruz? Kaç tane kodlama dili öğrendik? Kaç tane çatı? Kaç tane hile? Web geliştirme/tasarım dünyasının zor bir endüstri olduğunu söylemek, işin kolayına kaçmak olur. Ayrıca bugün bildiğimiz şeylerin pek çoğu, birkaç yıl sonra artık kullanılmayan teknolojiler listesindeki yerini alacaktır.

Bugünkü yazımızda özellikle giriş seviyesindeki geliştiricilerin geliştirmek için harcadığı süreyi kısaltacak ve daha verimli şekilde kodlama yapabilmelerini sağlayacak bir dizi ipucunu bulacaksınız. İpuçlarının arasında zaman kazandıran ipuçlarının yanısıra bazı özel programlama dillerine özgü ipuçları sayesinde web uygulamalarınızın verimliliğini de arttırabileceksiniz.

Görsellerinizi Daha Fazla Sıkıştrın

Photoshop üzerinde "Save for Web" (Web İçin Kaydet) aracını kulandığınız zaman, görsellerinizi sıkıştırarak dosya boyutunu indirgeyebilirsiniz. Ancak ilgili dosyaların kalitesinden ödün vermeden daha da fazla sıkıştırabileceğinizi biliyor muydunuz? Smush.It adındaki bu site sizler için bu işlemi hallediyor.

Peki Bu Nasıl Mümkün Olabiliyor?

Smush.It ekibi bunun için bir dizi araç kullanıyor:

Görselin biçimini algılamak ve onu GIF ya da PNG'ye dönüştürmek için ImageMagick,
PNGlerin gerekli olmayan bölümlerni kaldırmak için pngcrush. Site ayrıca daha da iyi png optimizasyonu için pngout, optipng, pngrewrite gibi diğer araçları da inceliyor,
JPEGlerdeki tüm meta verilerini kaldırmak ve progresif JPEGler oluşturmak için jpegtran (şimdilik etkin değil),
GIF animasyonlarını, farklı çerçevelerdeki tekrar eden pikselleri kaldırmak için gifsicle.

Bu yüzden yeni bir sitenin duyurusunu yapmadan önce, sitenizin URL'sini Smush.It'e girerek tüm görsellerinizin otomatik olarak optimize edilmesini sağlayablirsiniz. Eğer site, görsellerinizi optimize ederek kalitesinden ödün vermeden dosya boyutunu önemli ölçüde düşürebilirse (ki büyük ihtimalle sonuç bu olacaktır), o zaman sitenizde kullandığınız görselleri Smush.It'in verdikleri ile değiştirebili ve gerekirse HTML ve CSS dosyalarınızı da güncelleyebilirsiniz. Hazır görsel dosya biçimlerinden bahsediyorken, dosyalarınızı PNG biçiminde kaydetmek her zaman en doğrusu olacaktır. Artık demode olan animasyonlu GIF görselleri kullanmadığınız sürece PNG biçimini kullanmayı alışkanlık haline getirin.

Akıllı Olun. Kod Parçacıkları Kullanın.

Pek çok IDE, "code snippet" (kod parçacığı) panelini destekler ve bu paneller aracılığı ile özellikle sık sık kullandığınız kod parçacıklarını kategoriler altında depolayabilirsiniz. Sırf müşterinize tasarımın nasıl olacağını göstermek için her seferinde lipsum.com web sitesini ziyaret ederken mi buluyorsunuz? Bunun yerine neden birkaç paragraflık lorem ipsum metnini kod parçacığı olarak kaydetmeyesiniz ki? Örneğin Dreamweaver uygulamasında "Shift F9" klavye tuş kombinasyonunu kullanarak kod parçacığı sekmesini açabilirsiniz. Ardından sizin için uygulan olan kod parçacığını yine sizin için uygun olan yere sürükleyip bırakabilirsiniz. Bu özellik kod yazarken bana çok fazla zaman kazandırıyor.

Console.log() Hata Ayıklamasını Kullanın

jQuery kütüphanesini indirdiniz ve sözdizimini anlamak için çabalıyorsunuz. Bu sırada bir yerde takıldığınız ve $bilmemne değişkenin neye eşit olduğunu bilmiyorsunuz. Sorun değil, tek yapmanız gereken console.log($degiskenadi); kodunu eklemeniz.

Ardından Firefox'u çalıştırın (Firebug eklentisinin kurulu olduğundan emin olun) ve F12'ye basın. Doğru değişken değeri ile karşılaşacaksınız.

Şimdi ise bunu sonsuzlukla çarpın ve zamanın derinliklerine götürün. Bunun sonucunda bile Firebug ve console.log()'un ne kadar kullanışlı olduğunu fark edemeyeceksiniz :)

Web Geliştirici Araç Çubuğunu İndirin

Chris Pederick tarafından geliştirilen bu inanılmaz derecede yardımcı Firefox eklentisi size sayısız seçenek kuluyor. Bu eklenti sayesinde sitenizdeki CSS dosyalarını eşzamanlı olarak düzenleyebilmeniz mümkün. Eklentinin desteklediği diğer özellikler ise:

JavaScript'i kolayca etkisizleştirmek,
CSS'yi kolayca etkisizleştirmek,
Hızlı HTML / CSS doğrulama bağlantıları,
Cetveller,
Çerezleri etkisizleştirme,
Ve daha sayısız kullanışlı özellik.

Web Developer Toolbar eklentisi, her web geliştiricisinin Firebug ile birlikte kullanması gereken bir eklenti.

Betik Etiketlerini Alta Yerleştirmeyi Deneyin

Günümüzde kullandığımız pek çok tarayıcı, aynı sunucu adı üzerinden eş zamanlı olarak en fazla iki adet dosyayı indirebilir. Ancak bir betik indirirken diğer dosyaların indirilebilmesi için önce betiğin tamamen indirilmiş olması gerekir.

Bu yüzden mümkün olduğu kadar betiklerinizi çağıran bu kodları belgenizin sonuna eklerseniz, görseller ve css gibi diğer bileşenlerin önce indirilip sitenizin görüntülenebilmesini, ardından da son olarak bu betiklerin indirilebilmesini sağlayabilirsiniz.

Unutmayın, bu yöntem kullandığınız betiğin işlevine göre kullanılabilir ya da kullanılamayabilir. Bu sebeple betik kodlarınızı belgenizin alt kısmına taşıdıktan sonra sitenizi test etmeyi unutmayın.

Yayım Yaparken, CSS ve JavaScript Dosyalarınızı Sıkıştırın

Eğer performans, web siteniz için önemli ise, o zaman sitenizi yayımlamadan hemen önce CSS ve JavaScript kodlarınızı sıkıştırmanızı öneririm. Bunu geliştirme işinizin en başından itibaren yapmaya kalkışmayın zira bunun size yarardan çok zararı dokunur. Ancak kodlamayı bitirdikten sonra kodunuzu sıkıştırabilirsiniz.

JavaScript Sıkıştırma Servisleri

CSS Sıkıştırma Servisleri

JavaScript kodlarını paketlemek için kullanabileceğiniz diğer iki servis ise YUI Compressor ve JSMin.

Bnun yanısıra HTML kodlarınızı da sıkıştırmayı deneyebilirsiniz, ancak bunu önermem. HTML dosyalarınızı sıkıştırarak kazanacağınız dosya boyutu gerçekten çok az.

jQuery Kolay ve Hızlı İpuçları

Kısa bir süre önce tvdesign.co.uk'den Jon Hobbs-Smith, 25 jQuery ipucunu listelediği mükemmel bir makale yazmıştı. Bu sayfayı yer imlerinize eklemeyi ihmal etmeyin. İşte bu yazıdan benim en beğendiğim birkaç ipucu.

jQuery'de Bir Elementin Olup Olmadığını Kontrol Etmek

if ($('#myDiv).length) {
// bu kod sadece #myDiv ID'sinin bulunduğu zaman çalışacaktır.
}

Kontekst Kullanın

Pek çok insan, DOM elementlerine erişirken, jQuery'nin ikinci bir parametreyi kabul ettiğinin farkında değildir. Aşağıdaki koda bir bakın.

var myElement = $('#someElement');

Bu kod, jQuery'nin tüm DOM'u geçmesini gerektirir. Bunun yerine ikinci bir parametre ekleyerek hızı oldukça arttırabiliriz.

var myElement = $('#someElement', $('.someContainer'));

Yukarıdaki kodda jQuery'e, .someContainer elementi içerisinde arama yapmasını ve onun dışındakileri dikkate almamasını söylüyoruz.

Sınıflar Yerine IDler Kullanın

jQuery ile IDlere erişirken, kütüphane bilinen getElementById yöntemini kullanır. Ancak sınıflara erişirken jQuery, DOM'u geçebilmek için kendine özgü yöntemleri kullanmayı dener, zira getElementByClass diye bir yöntem yoktur. Sonuç olarak, ID yerine sınıf kullanmanız durumunda işlem biraz daha uzayacaktır.

25 İpucunun Tamamını İnceleyin

$_POST Yerine Mümkünse $_GET Kullanın

Eğer AJAX istekleri yaparken $_GET ve $_POST arasında bir seçim yapma şansınız varsa, $_GET kullanın.

Yahoo! Mail ekibi, XMLHttpRequest kullanırken, POST'un tarayıcılar üzerinde iki işleme neden olduğunu görmüştür. POST, ilk olarak başlıkları, ardından da verinin kendisini göndermektedir. Bunun yerine GET kullanmanız durumunda, eğer çok fazla çereziniz yoksa, sadece bir TCP paketi gönderilmektedir.

Unutmayın - $_GET verisini her zaman kullanamazsınız. ilk olarak ne yaptığınızdan emin olun ve querystring ile veritabanı erişimini hiçbir zaman karıştırmamanız gerektiğini unutmayın. Kısa bir süre önce Twitter arkadaşlarımdan bir tanesi, bana URL'sinde bir MySQL sözdizimi olan bir web sitesi gönderdi. Bunu asla yapmayın!

Pratik Olduğunda Kütüphaneleri ve Çatıları Kullanın

İster PHP kullanın ister ASP.NET, mooTools ya da jQuery, ya da tüm bunların bir birleşimi, uygun olduğu zamanlarda çatıları kullanmayı deneyin.

Örneğin:

Eğer basit bir statik web sitesi kullanıyorsam sadece fare imlecini bir elementin üzerine getirdiğimde bir efektin belirmesini istiyorsam, bunun için jQuery kütüphanesini kullanmam doğru olmaz.
Eğer statik web sitemin en karmaşık özelliği bir XML dosyası üzerinden veri almak ise bunun için bir çatı kullanmama gerek yok. Bu gibi durumlarda sitem hem daha yavaş çalışacak, hem de daha fazla bant genişliği kullanacağı için bana daha pahalıya malolacak.

Ancak eğer tam bir içerik yönetim sistemi ve karmaşık veri erişim yöntemlerini gerektiren bir web sitesi geliştiriyorsam, o zaman beğendiğim çatılara bir göz atmayı ihmal etmem.

Unutmayın - çatıların sizin için çalışmasını sağlayın, tam tersini değil. Bu kararları verirken zeki olun.

YSlow

YSlow, web sitenizi inceleyip onun mümkün olan en verimli şekilde çalışıp çalışmadığını kontrol eden ve size öneriler sunabilen mükemmel bir servis. Yahoo! geliştirme ekibi, kısa bir süre önce, web uygulamaları geliştirirken takip etmeniz gereken öğelerin yer aldığı bir kılavuz yayımlamıştı.

Ayrıca dilerseniz Yslow Screencastı'na bir göz atarak bu zaman kazandırıcı ipuçlarının neler olduğunu görebilirsiniz. Vaktiniz olduğunda kesinlikle izlemenizi öneririm.

Klavye Kısayolları. Öğrenin!

Pek çok deneyimli tasarımcılar ve geliştiriciler burada bana katılacaktır, eğer sitemde ya da tasarımımda ne zaman bir değişiklik yapmak istesem elimi fareye uzatıp araç çubuğuna gitmiş olsaydım, çok zaman kaybetmiş olurdum. Klavye kısayollarını o kadar uzun zamandan beri kullanıyorum ki artık bu kısayolların işlevlerin hangi araç çubuğu ya da hangi menü altında olduğunu unuttum diyebilirim. Tek bildiğim, "Shift X"in doğru paneli açtığıdır.

İşe yeni başladığınızda bu kısayolları öğrenmek size zaman kaybı gibi görünebilir. Ancak sizi temin ederim ki yanılıyorsunuz. Size Google üzerinde "X keyboard shortcuts" (X klavye araması) (burada X kullandığınız yazılımın adını temsil ediyor, örneğin Photoshop için "Photoshop Keyboard Shortcuts") araması yapmanız. Ardınan bulduğuğnuz tablonun yazıcıdan çıktısını alın ve bilgisayarınızın yanına koyun. Ondan sonraki birkaç haftalık süre içerisinde fareye mümkün olduğu kadar az dokunarak bu kısayollar üzerinde pratik yapmayı deneyin. Klaye kısayollarını bilmek, uzman kullanıcılar ile giriş seviyesindeki kullanıcıları birbirinden ayıran belki de en önemli etkenlerden biridir.

Yeni Web Sitesi Şablonu Oluşturun

İtiraf edin, her web sitesi gelişmiş ve karmaşık uygulamalar gerektirmez. Bazen, hatta belki de kimileri için çoğu zaman, sadece bugüne kadar yaptığımız işlerin yer aldığı bir web sitesini göstermek isteyebiliriz. O zaman bu gibi durumlarda kullanabilmek için her yeni bir web sitesi oluşturacağımızda kullanacağımız bir web sitesi "şablonu" oluşturmayalım?

"Template" klasörümün içerisine "JS" ve "CSS" klasörlerini yerleştirdim.

"JS" klasörüm, DD_belatedPNG.js dosyasını içeriyor (bu dosya, IE6'de PNGlere 24 bit saydamlık desteği getiriyor).
"CSS" klasörümde ise içi boş "default.css" dosyamın yanısıra benim hazırladığım sıfırlama dosyası yer alıyor.

Bunun yanısıra index.html(php) dosyamın içerisinde de projelerimin pek çoğunda kullanacağım birkaç kod parçası yer alıyor. Bu kod öyle aman aman özel bir kod değil ancak bunu önceden hazırlamak size zaman kazandıracaktır.

Kullandığım index.html dosyasının bir örneği

Yukarıdaki kodda da göreceğinz üzere önce CSS ve JavaScript dosyalarıma bağlantı verdim ve ardından Google jQuery dosyasına da bağlantıyı ekledim. son olarak document.ready() jQuery fonksiyonunu oluşturdum ve standart "container" divimi açtım.

Bu kod her ne kadar basit görünse de inanın size zaman kazandıracaktır. Bu sayede ne zaman yeni bir web sitesi oluşturmanız gerekirse, o zaman tek yapmanız gereken "template" klasörünün içerisindeki bu dosyaları kopyalamaktır.

Satıriçi ve Harici Karşı Karşıya

Genelde tüm CSS ve JavaScript dosyalarınız sayfadan çıkarılmalı ve kendi harici dosyalarında korunmalıdırlar.

Bunu neden yapmalıyız?

Daha temiz kod,
Sunumun ve içeriğin birbirinden ayrılması önemlidir,
Harici dosyalar kullanarak onları istemcinin sisteminde depolamış oluyoruz. Bu, HTML dosya boyutunu düşürmenin yanısıra harica HTTP isteğine de yol açmıyor, zira ziyaretçi ya da istemci ilgili dosyayı ilk kez istediğinde depoluyor ve sonraki seferlerde aynı dosyayı indirmiyor.

Eğer sadece birkaç satırlık stiliniz var ise o zaman onun için harici dosya oluşturmayabilirsiniz. Bu gibi durumlarda, ama sadece bu gibi durumlarda, ilgili kodu HTML içerisine gömebilirsiniz.

PHP Betiğinin JavaScript İle Çağırılıp Çağırılmadığını Kontrol Edin

AJAX aldı başını gidiyor, özellikle en sonunda, JavaScript kütüphaneleri sağolsun, kullanıcı dostu hale geliyor. Bazı durumlarda betiğin JavaScript ile mi çağırılıp çağırılmadığını belirlemeniz gerekebilir. Bu görevi yerine getirmek için kullanabileceğiniz birkaç yöntem bulunmaktador.

Bunlardan birisi POST'u gönderirken JavaScript'iniz ile özgün bir anahtar değerini JavaScript'inize iliştirmektir. Ardından PHP kullanarak bu anahtarın varolup olmadığını kontrol edebilirsiniz. Eğer var ise, o zaman JavaScript etkin olduğunu anlarız.

Daha iyi bir yöntem olarak PHP'nin HTTP_X_REQUESTED_WITH özelliğini kullanmaktır. Şöyle ki...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// kodunuzu buraya yazın ve JavaScript'in etkin olduğundan emin olun
} else {
// JavaScript'in etkin olmadığı kullanıcılar için birleyler yapın.
}

Google CDN'ye Bağlantı Verin

Kısa bir süre önce Google jQuery gibi popüler betikleri kendi sunucularında depolamaya başladı. Eğer bu tip kütüphanelerden birisini kullanıyorsanız, o zaman ilgili betiği kendi sunucunuzda depolamaktansa bu betikleri Google CDN üzerinden çağırmanız şiddetle önerilir.

AJAX Kütüphaneleri API'si

Peki Ama Neden?

Caching (Depolama): Bu tip betikleri Google CDN üzerinden çağıran web sitelerinin sayısı gün geçtikçe artmaktadır. Bu sebeple eğer siz de ilgili dosyayı Google sunucusu üzerinden çağırırsanız, ziyaretçiniz muhtemelen o dosyayı sizin siteniz üzerinden indirmeyecektir, zira bir başka site üzerinden aynı dosyayı daha önce indirmiş olabilir. İlgili dosyayı daha önce indirmiş bir ziyaretçi sizin sitenizi ziyaret ettiğinde istemci, Google sunucularından 304 (değiştirilmemiş) mesajı alacak, bu sebeple de o dosyayı doğrudan istemcinin yerel bilgisayarı üzerinden kullanacaktır. Bunun sonucunda da sizin web uygulamanız kullanıcıya daha çabuk açılacaktır.
Eş Zamanlılığı Arttırın: Daha önceki bir ipucunda bundan bahsettim. Bu fazladan dosya isteğini kaldırarak istemcinin daha fazla içeriği eş zamanlı olarak indirebilmesini sağlamış olursunuz.

Firefox Eklentilerini Kullanın

Ben Google Chrome'nin büyük bir fanatiğiyim. Çok hızlı açılıyor ve JavaScript'i diğer tüm tarayıcılardan daha hızlı çalıştırıyor (Firefox'un henüz yayımlanmamış 3.1/3.5 sürümü sanırım Chrome'nin hızını yakalayacak).

Buna rağmen bu, Firefox'u kısa bir süre içerisinde bırakacağım anlamına gelmiyor. Bu tarayıcın için sunulan bazı kullanışlı eklentiler gerçekten büyüleyici. İşte benim beğendiklerim:

Yardımcı Olduğunda IDE Kullanın

Tıpkı günümüzde Microsoft'tan nefret etmek ne kadar moda ise, geliştirme yaparken IDE kullananlara saldırmak ta o kadar moda. Bu gerçekten çok saçma.

Pek çok durumda, gelişmiş bir IDE kullanımı çok önemlidir, özellikle nesne yönelimli programlama (OOP) dilleri üzerinde çalışırken. Şimdi, eğer sadece sade bir HTML şablonu oluşturuyorsanız, o zaman Notepad++ ya da Coda/ sizin için mükemmel bir araç olacaktır. Aslında, bu araçların kullanımını bu gibi durumlarda öneririm. İhtiyacınız olmadığında bu tip programları kullanarak işinizi daha da zorlaştırmayın. Ancak, gelişmiş uygulamalar geliştirirken, IDE'nin avantajlarından da faydalanın.

Hepsi Bu Kadar!

Sanırım şimdilik bu kadar yeterli. Umarım bunlardan bazıları (belki de hepsi) sizi daha iyi birer tasarımcı ya da geliştirici kılmaya yardımcı olacaktır. Sizin beğendiğiniz kısayollar hangileri? Yorumlarınızla paylaşın.

İpuçları Hakkında Yazdığım Diğer Yazılar

Bu yazı aziL 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 Renk Planlama (Color Scheming)

aziL — Wed, 07 Jan 2009 07:50:00 GMT

Bir web sitesinde çalışmaya başlamadan önce daima üzerinde çalışacağım bir renk şemasına sahip olmak isterim. Bu sadece estetik sebepler yüzünden değil, ayrıca tutarlılık ve websitesine alışılabilirlik gibi sebepler yüzünden önemlidir. Bazen müşterileriniz iki yta da üç renk şeması ile size geleceklerdir (diyelim iki ya da üç renk), ya da en azından web sitesinin üzerine inşa edileceği bir rengi size bildireceklerdir. Eğer emin değillerse o zaman bana sundukları grafik içeriğe (logo, resimler, simgeler vs.) bakar ve onlar ışığında kendi renk şemamı oluşturmaya çalışırım.

Internet üzerinde, tasarımlarınızın piksel mükemmeliğinde olmasına yardımcı olacak renk kaynakları bulunuyor.

İster aklınızda bir renk şeması olsun, ya da size ilham verecek ve rehber olacak kaynaklar arıyor olun, bu yazımda sizlerle bir dizi renk şeması oluşturmanıza yardımcı olacak kaynakları listelemeye çalıştım.

Color Blender
Renk kaydırma çubuğunu kullanarak ya da doğrudan renginizin RGB değerini girerek site size renk şemasını sunacaktır. Bu sitenin sunduğu bir güzel özellik, oluşturduğunuz renk şemasını photoshop ya da illustrator için indirebilmeniz, ya da kendinize elektronik posta olarak gönderebilmeniz.

Color Schemer Online V2
Şema doğrudan girilen RGB veyea HEX değerine göre oluşturuluyor. Sitenin ayrıca Windows ve Mac üzerinde çalışan yazılım sürümü de bulunuyor.

Color Scheme Genarator V2
Önerilen renk şeması görüntülendikten sonra tek bir değr girn. Şemalar Pastel, Karanlık/Aydınlık, Kontrast ve Solgun olabilir. Sitenin sunduğu bir diğer güzellik de (her ne kadar kaç kişinin işine yarayacağını tam olarak kestiremesem de) görüntülene renk şemasının çeşitli bakış açılarında nasıl görüntüleneceğini de size sunabilmesi (örneğin renk körleri için).

Internet üzerinde ayrıca kullanıcılar tarafından daha önce oluşturulmuş renk şemalarının listelendiği web siteleri de bulunuyor, tıpkı galeri web siteleri gibi.

COLOUR LOVERS
Bu site gerçekten muhteşem!!! Her ne kadar size bu makalede belirttiğim tüm siteleri ziyaret etmenizi önersem de, eğer bunlardan sadece birini seçmek istiyorsanız tercihiniz bu siteden yana olmalı. Site üzerinde, içinizdeki sosyal ateşi söndürebileceğiniz forumlar ve grupların yanısıra paletler, motifler, bireysel renk sayfaları da bulunuyor ve tüm bunların hepsi üzerinde arama yapabilir, içeriği filtreleyebilirsiniz. Paylaşılan içerikler pek çok biçimde indirilebilir (ASE, PS, AI, GIMP, HTML ve ZIP biçimlerinde). Sitede ayrıca pek çok yararlı bilgiye ulaşabileceğiniz bir blogun yanısıra TRENDLER bölümünde hem magazin hem de web dünyasının son renk trendlerine ulaşmanız mümkün. Kesinlikle takip etmeye değer.

Kuler
Adobe Air tabanlı bir websitesi olan Kuler'in yaklaşımı ve konsepti biraz ilginç. Color Lovers'a oranla biraz sönük kaldığını söylemek zorundayım. Burada kendi tercihlerimi ön plana çıkarmak istemiyorum, ama gerçekten, Colour Lovers muhteşem bir site.

Verlee's Daily Color Scheme
Bir süredir beta formunda yayın yapan ve 2006'dan beri güncellemeyen güzel görünümlü bir site. Sitenin ana alan adı halin "Yakında..." ibaresini içeriyor. Site bir renk şeması galeri sitesi ve bir süredir aktif olmamasına rağmen site bünyesinde güzel ve size ilham kaynağı olabilecek içerik bulunuyor.

Color Combos
Renk şeması / palet galeri web sitesi. Bir imaj üzerindeki renkleri çıkarabilmek için birkaç yolunuz var. Ya Photoshop ya da GIMP gibi masaüstü yazılımlarını kullanır, ya da referans imajınıza bağlantı kurabilecek çevrimiçi kaynakları kullanırsınız.

Color Palette Generator
Bir imajın tam URL'sini girin ve site, o imajı temel alarak sizin için renk paleti oluştursun.

Eğer üzerinde çalışacağınız bir imaj yoksa ama müşteriniz beğendiği siteleri sizlerle paylaştıysa, ya da size ilham kaynağı olabilecek bir websitesini biliyorsanız, o kaynaklarda kullanılan renklere ulaşmak için birkaç yöntem bulunuyor.

Eğer Firefox kullanıyorsanız Web Developer eklentisini kullanabilirsiniz. Eklentini seçtiğiniz websitesinin renk bilgisini gösterebilme özelliği bulunuyor.

Internet üzerinde bir dizi website galerisi de bulunuyor. Bu siteler websitelerini renklerine göre kategorilendiriliyor.

Renk Bilgisi Sunabilen Web Site Galerileri

Seçili Websiteleri İçin Özel Renk Bilgileri Sunan Website Galerileri

Birkaç Tane Daha İşe Yarar Kaynak:

CSS Color Chart
Her rengin HEX değerleri ile birlikte doğal ve genel kullanım için uygun renkleri gösteriyor.

Colors on the Web
Bu websitesi, geniş renk bilgisi, renk teorilerine yönelik araçları ve Color Contrast Analyzer for Accessibility (Erişilebilirlik İçin Renk Kontrast Analizatörü) ile çok değişik bir site. İlgili araç web sitesinin arkaplan rengi ile metin rengine bakıyor. Bunun yanısıra sitenin üç renk şema oluşturucusu da bulunuyor. Sitenin ayrıca iki sütunlu arabirimi üzerinde seçilen renk şeması ve metnin o şemada nasıl görüntüleneceği de gösteriliyor.

Renk Sihirbazı - renk uyumu uygulaması üzerinden kendi tekil renk değerinizi girebilir, ya da bunu sizin için yapacak uygulamayı kullanabilirsiniz. Veri girildiğinde ona ait olan renk varyasyonları, doyum varyasyonları, ton ve gölge varyasyonlarının yanısıra önerilen renk şemaları, bileşik renkler hakkında bilgiler, renk kontrastı ve kullanılan renklere ait bilgiler veriyor.

Renk Şemacısı - CSS website galerilerine benzer bir site, ancak CSS yerine kullanıcılar tarafından gönderilen renk paletlerini içeriyor.

Bana göre renk, güzel bir web sitesinin en önemli yönüdür. Beni yanlış anlamayın, şablon, navigasyon ve tipografi de önemlidir, ancak bir web sitesinin renk seçimi kötü ve insan gözüne rahatsızlık verici ise, o zaman ziyaretçiniz GERİ düğmesine mümkün olan en kısa sürede basacaklardır.

Umarım yukarıdaki kaynakların size bir faydası dokunur.

Hepinize 2009 için iyi dileklerimle.

Kaynak: styl.eti.me

Bu yazı aziL 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ı İçin 10 Kullanılırlık İpucu

aziL — Mon, 05 Jan 2009 12:13:00 GMT

Basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

Kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. Evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. Fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

Web tasarımcılarının günümüzde işi daha da kolay. Sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. Etiket Satırı (Tagline) Kullanın

Etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. Web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

İstatistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. Belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur.

2. Site İçi Arama Motoru Kullanın
Tıpkı etiket satırlarında olduğu gibi site içi arama da bir web sitesinde yer alan çok önemli bir elementtir. Kullanıclar bir şey aradıklarında, gözleri aradıkları terimi girebilecekleri bir alan arar.

Jacob Nielsen'in web kullanılırlık ipuçlarına göre arama kutusu, metnin kolayca görünebilmesi ve kullanılabilmesi için 27 karakter genişliğinde olmalı. Arama kutusunu sayfanın üst kısmına yerleştirin çünkü ziyaretçilerinizin gözleri F yapısına göre, yani sol üstten sağ alta doğru sitenizi takip eder.

3. Çok Fazla Grafik Kullanmayın
Tasarım elementlerinin ve grafiklerin gereğinden fazla kullanımı bir web sitesi için daima kötüdür, tek yaptıkları şey ziyaretçilerinizi yanıltmaktır. Web sitenizi geliştirmek için de tasarlayın, sadece dekore etmek için değil. Kullanılırlık açısından daha az her zaman daha verimlidir.

4. Site Haritaları (Sitemap) Kullanın
Site haritaları görece yeni bir özellik olup web sayfa navigasyonunu ve arama motoru optimizasyonunu (SEO) iyileştirir. Site haritaları esas itibariyle websitenizin sayfalarının ve mimarisinin yapısal sunumudur. Herhangi bir biçimde bir belge, ya da web sitenizdeki sayfaları listeyen bir sayfa olabilir ve genellikle içeriği hiyerarşik olarak listeler.

Son zamanlarda Google, Yahoo! ve MSN gibi arama motorları Sitemap protokolleri sunmaya başladılar. Bu protokoller web sitenizin site haritası sayfası ile aşağı yukarı aynı olsa da veriler XML biçiminde depolanır. Internet üzerinde bu belgeleri sizin vereceğiniz adres için XML biçiminde oluşturabilecek bazı araçlar bulunuyor.

5. İş Akışını Kesmeyin
İş akışı derken kullanıcının sitenizde attığı her adımdan bahsediyoruz.Örneğin form doldurmak, web sitesine kayıt olmak, kategorilere, arşivlere gözatmak vs. Bu iş akışlarını kesmeyin ve kullanıcının istemesi durumunda herhangi bir işlemi iptal etmesine izin verin. Kullanıcının bir iş akışını kesmesine izin vermememiz durumunda, kullanıcı istemese bile onu bir şeyi yapmaya zorlamış oluruz.

Bir web sayfasındaki her işlem kullanıcılar için anlaşılır olmayabilir, bu sebeple onlara açıklayıcı ipuçları ile rehberlik edin (örneğin form doldururlarken). Javascript bağlantıları genellikle iş akışlarını keserler, bu sebeple onları websitenizde kullanmanız önerilmez.

Bir diğer sık yapılan hata da ziyaret edilen bağlantıların renklerini değiştirmemektir.

6. Kolayca Taranabilir Sayfalar Oluşturun
Kolayca okunabilir web sayfaları oluşturmak, ziyaretçilerinizin sitenize olan bağlılığı, onları sitenizde tutabilmeniz ve içeriğinizi okutabilmeniz açısından önemli rol oynarlar. Kullanılırlık testleri gösteriyor ki kullanıcılar web sayfalarını okumazlar, sadece göz gezdirirler, başlıklara, koyu renkle yazılmış yazılara, öne çıkarılmış metinlere ya da listelere bakarlar.

Jakob Nielsen tarafından yapılan göz izleme deneyleri, kullanıcıların içeriği F yapı modeline göre okuduklarını gösteriyor, bunun anlamı kullanıcılar web sayfasının sol üst köşesinden okumaya başlıyorlar ve ardından gözlerini biraz aşağı kaydırarak tekrar okumaya devam ediyorlar.

Nielsen ayrıca bu okuma modelinin detaylarını şöyle listelemiş:

Kullanıcılar web sayfasının içeriğini kelime kelime okumazlar. Sadece önemli paragrafları, koyu renkli metinleri vs algılarlar.
İlk iki paragraf web sayfasında önemli yer tutar. Bu iki paragraf web sitenizi ziyaret eden kullanıcıların aradıkları bilgiyi içermek zorundadırlar.
Alt başıklar ve listeler, diğer paragraflara oranla daha dikkat çekicidirler. Bu elementleri önemli bilgileri vurgulamak için kullanın.

Gazetelerden öğrenebileceğimiz bir diğer önemli yöntem de yazarların genellikle insanların dikkatini çeken bir manşet ve ilk paragrafta yine dikkat çeken cümleler kullanıyor olmalıdır. Bu sayede okuyucuların makalenin tümünü okuma ihtimallerini güçlendirirler. İçeriği ters dönmüş piramit şeklinde organize ederler. Ters dönmüş bir piramiti hayal edin. Üstteki geniş kısım tüm makalenin en önemli bilgisini içerirken alttaki incelen kısım daha az önemli kısımları içerir.

En önemli parçaları sayfanın en üzerine, daha az önemli olanları da sayfanın alt kısmlarına yerleştirerek sitemizi organize ederken bu yöntemi kullanabiliriz, ancak hangi bilginin önemli olup olmadığını nasıl bileceğiz? Haber değerlerinin yardımı ile.

7. Yanlış Yönlendiren Kullanıcı Arabirimi Kontrolleri Tasarlamayın
Kullanıcı arabirimi (UI) kontrolleri ile web sayfa elementleri, öğeleri, widgetleri gibi kullanıcıların iletişim kurabileceği öğeleri kastediyoruz (düğmeler, açılır listeler vb.)

Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayınGenellikle tıpkı birer bağlantı gibi görünen, ancak bağlantı olmayan altı çizili metinlerle karşılaşıyoruz.

Kullanıcıların umduğu eylemi kullanmayarak, onların sitenizin çalışmadığı hissine kapılmasının ve bunun ardından da bir süre sonra sitenizi terk etmesinin önünü açmış olursunuz. UI kontrollerine yönelik bir diğer önemli kullanılırlık ipucu da tutarlılık üzerine: UI kontrollerinin tutarlı olduğuna emin olun.

Yukarıdaki resimden de görebileceğiniz üzere Yahoo!, tutarlı UI kontrol tasarımına güzel bir örnektir. Sayfadaki her sekme aynı şekilde görünür ve işler, her bir bağlantını altı fare ile üzerine gelindiğinde çizlir, her düğme aynı şekilde görünür vs.

8. Anlamlı Geribildirimler Verin
Anlamlı geribildirim bir web sitesi için önem arz eder. Bu siteniz ve kullanıcıları arasında bir iletişim kanalıdır ve geribildirimler yardımı ile kullanıcıların sitenizde neler olup bittiğini anlamasının önünü açarsınız. Diyelim web sitenizde bir hata var. Doğrudan Hata oluştu yazmak yerine neyin yanlış gitmiş olabileceğini ve kullanıcının bu hatayı gidermek için neler yapabileceğini listeleyin.

Geribildirimler her iki yönde işler. Bir kullanıcı sitenizdeki formu doldurduklarında aslında bir yandan size geribildirim yapmış oluyorlar. Kullanıcılardan aynı bilgiyi iki kez girmesini istemeyin. Örneğin bir kullanıc web sitenizin halihazırda kayıtlı bir kullanıcısı ise ve bir form doldurması gerekiyorsa, onlara adını ya da üye olurken size verdikleri herhangi bir bilgiyi yeniden sormayın, çünkü bu bilgiler zaten veritabanında ya da bir dosyada bulunuyor. Bu verileri doğrudan veritabanından alarak tüm işlemi basitleştirebilirsiniz.

9. Çok fazla Javascript Kullanmayın

Javascript ve AJAX tekniğinin gelmesi ile web tasarımcıları ve geliştiriciler karşılık verebilen ve esnek web siteleri oluşturabiliyorlar, ancak tüm bu yeni teknolojilerin de bir fiyatı var. Bizim durumumuzda bu tarayıcı tutarsızlığı. Her kullanıcının tarayıcısı en son sürüm olmayabilir ya da öntanımlı olarak Javascript aktif edilmemiş olabilir.

Bir websitesinde çok fazla JavaScript kullanarak bu kullanıcıları engellemiş oluruz. Bunun yerine daha mütevazı ve yalın Javascript kullanın.

CAPTCHAlardan Kaçının

Türkçe'si "İnsanlarla Bilgisayarları ayırt edebilmek için Tümüyle Otomatikleştirilmiş Yerel Turing Testi" (Completely Automated Public Turing Test to tell Computers and Humans Apart) olan CAPTCHA'nın adı bile karmaşık. CAPTCHA'nın en yaygın kullanım şekli bir metnin imaja edilmesi ve bu metnin ilgili alana doğru yazılıp yazılmadığının test edilerek kullanıcının gerçek bir insan mı yoksa bir spam robotu mu olduğunu anlamaya çalışmak şeklindedir.

CAPTCHAların sorunu her insan doğrulama metodu, kullanıcının beyninde karmaşık işlemleri yürütür (yamutulmuş metni anlamak, iki rakam eklemek vs).

CAPTCHAlarla ilgili bir diğer problem de farklı kültürler arasındaki tutarsızlıktır. Örneğin Çince semboller, numaralar pek çok batı dilinden ve Arapça'dan farklıdır. Çinliler CAPTCHA kullanılan web sitelerinde latin alfabesini kullanan ülkelerin insanlarına oranla çok daha zor zamanlar geçiriyorlar.

Özet

Daima web sayfanızdaki en dikkat çeken element olarak konumlandırılmış bir etiket satırı kullanın.
27 karakter genişliğinde bir arama kutucuğu oluşturun ve onu web sitenizin üst kısmına yerleştirin.
Çok fazla grafik ve tasarım elementleri kullanmayın.
Site haritası sayfası hazırlayın ve site haritası XML verisini arama motorlarına kaydedin.
Kullanıcının iş akışının önünü tıkamayın. Gerektiğinde her işlemin iptal edilebilmesini sağlayın.
Kolayca taranabilir web içeriği oluşturun ve en önemli içeriği sayfanın üst kısmına yerleştirin.
Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayın.
Anlamlı geribildirimler sunun ve geribildirimlerin iki taraflı işlediğini unutmayın.
Daha mütevazı Javascript kullanın ve verim düşüşünün kabullenilir miktarda olmasına dikkat edin.
CAPTCHAlardan kaçının ve daha kullanışlı yöntemler kullanın.

Siz de bu yöntemlerden bir veya daha fazlasını kullanıyor musunuz? Kendi ipuçlarınızı ve görüşlerinizi yorumunuzda belirtmeyi unutmayın

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

20 mükemmel bedava online zengin metin editörü (Bölüm-1)

aziL — Tue, 30 Dec 2008 13:47:00 GMT

Online zengin metin editörleri olarak bildiğimiz metin editörlerinin, bir web tarayıcısının içerisinde kullanmayı düşünenlere 20 mükemmel bedava online zengin metin editörü.

1. TinyMCE
Tinymce GNU Lisans'ı altında zengin metin düzenleyicisidir. Dağıtımı Moxiecode tarafından sürdürülmektedir ve kullanım olarak son derece özelleştirebilirdir. (Önizleme)

TinyMCE

2. FCK Editör
Fckeditor en popüler açık kaynak online zengin metin editörlerinden biridir. En iyi HTML düzenleyiciye sahiptir ve kullanıcılar için kolay düzenleme imkânları sunmaktadır. (Önizleme)

FCK Editör

3. NicEdit
Nicedit, kullanıcılarına basitliği vurgulayan bir platform sunan zengin metin editörüdür. (Önizleme)

NicEdit

4. BXE
BXE, tam bir web sayfasını değiştirmek için müsait, XML tabanlı WYSIWYG açık kaynak metin düzenleyicisidir. (Önizleme)

BXE

5. MarkItUp!
MarkItUp bir JavaScript tabanlı metin düzenleyicisidir ve jQuery kütüphanesi üstüne kuruludur. Kullanımı kolaydır ve klavye kısayollarını desteklemektedir. (Önizleme)

MarkItUp!

6. WidgEditor
WidgEditor, GNU Genel Ortak Lisans'ı altında Cameron Adems'ın bir Açık Kaynak Projesidir. (Önizleme)

WidgEditor

7. EditArea
Editarea, bir ücretsiz JavaScript kaynak kod düzenleyicisidir. Kendi kodlarıyla katkıda bulunmak isteyen geliştiricilere ve kod biçimi eklemek isteyenlere müsaade eder. (Önizleme)

EditArea

8. Cross Browser Rich Text Editor (RTE)
Cross Browser zengin metin editörü, Creative Commons Attribution 2,5 lisansına sahiptir. Tasarım olarak Internet Explorer 5 ve Mozilla Zengin Metin kurgusundadır. (Önizleme)

Cross Browser Rich Text Editor (RTE)

9. YUI Library Rich Text Editor
YUI kütüphaneli Zengin Metin Düzenleyicisi, yahoo sunucuları altında olan ve mükemmel mobil aygıt desteğine sahip olabileceğiniz bir editördür. (Önizleme)

YUI Library Rich Text Editor

10. FreeTextBox
Web profesyonellerine NET Framework'u kullanan ASP.NET destekleyen, son derecede popüler zengin metin düzenleyicisi. Özelleştirme için birçok yararlı JavaScript API'sinin yanında, yerleşik bir resim galerisine de sahiptir. (Önizleme)

FreeTextBox

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

BluePrint CSS Framework'ünü Kullanmak

aziL — Tue, 30 Dec 2008 06:46:00 GMT

Türkçe'ye CSS İskeleti olarak çevirebileceğimiz CSS frameworkleri, CSS tabanlı web siteleri hazırlarken bize zaman kazandıran en büyük yardımcımız. Blueprint CSS de en popüler CSS iskeletleri arasında yer alıyor ve geliştiricilere büyük kolaylıklar sunuyor. Ben de bu yazımda daha önce CSS iskeletleri ile çalışmamış kullanıcılara Blueprint CSS ile nasıl kolayca web sitesi oluşturulabileceğini anlatmaya çalışacağım.

Blueprint CSS iskeleti, HTML ve CSS içeren tüm projeler üzerinde çalışırken size zaman kazandıran bir proje. İster statik bir sayfa üzerinde çalışıyor olun, isterseniz Rails ya da PHP gibi sunucu tabanlı betikleri kullanın, BluePrint CSS iskeleti işinize oldukça yarayacaktır.

BluePrint CSS nedir?
Eğer siz de benim gibi bir tasarımcıdan ziyade geliştirici iseniz, o zaman yeni bir projeye başlarken CSS ile ne yapacağınıza karar verme sürecinin zorluklarından ve bu sürecin her yeni bir proje için tekrar ediyor oluşunun zorluğu ve sıkıntısından haberdarsınızdır. Proje ilerledikçe tasarımınız muhakkak değişecektir, ancak siz daha başlangıçtan iyi görünümlü bir tasarım istiyorsunuz. Siteniz için CSS yazmaya başladınız ve Firefox ile Safari üzerinde sorunsuz çalıştığını gördünüz, ama bir dakika, IE'yi unutmayalım. Ardından biraz HTML yazdınız ve tüm boşlukları doğru hesapladığınızdan emin olmak için kodunuzu tekrar tekrar kontrol ettiniz. Süper! Bitti! Üç gün sonra, projenin gereksinimleri değişti ve kendinizi site şablonunu yeniden kodlarken buldunuz. Hmm...

Şimdi, tüm CSS öğelerini yalamış yutmuş muhteşem bir tasarımcı olsanız, ya da bir PSD şablonu üzerinden çalıştığınız için tasarımın değişmeyeceğinden emin olsanız bile, bu öğrenebileceğiniz yeni şeylerin olmayacağı anlamına gelmiyor. İşte BluePrint tam bu noktada devreye giriyor ve size işinize yarayabilecek bir dizi aracı sunuyor.

Zamanınızı yenilikler için harcayın, tekrar etmek için değil

Bu slogan blueprintcss.org websitesinde yer alıyor ve Blueprint CSS iskeletini net bir şekilde özetliyor aslında. Blueprint, projelerinizi üzerine inşa edebileceğiniz muhteşem bir temel sunuyor ve bunu herkesin beğeneceği bazı standart stil şablonlarını, tipografi elementlerini, ızgara iskeletini, güzel görünümlü formları ve yazdırma stil şablonunu tüm popüler tarayıcılara uyguluyor. Gelin hep birlikte BluePrint'in bunu nasıl başardığına bakalım.

BluePrint Kaynak Dosyaları

reset.css Bu dosya tüm tarayıcıların varsayılan HTML element tanımlamalarını sıfırlar. Eminim hepiniz bir projeye başlamadan önce <body> elementine 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;' ya da bunun gibi stil elementlerini dahil ediyorsunuzdur. İşte reset.css'nin da yaptığı iş bu ve çok daha fazlası: Boşluklar, tablolar, yazıtipleri vb elementlerin css değerlerini sıfırlıyor ve size projenize başlamanız için temiz bir ortam sunuyor.
typography.css Bu dosya bazı varsayılan tipografi değerlerini tanımlıyor. Tüm stilleri burada açıklamayacağım ancak bu dosyanın BluePrint CSS iskeletinin en sevdiğim parçası olduğunu belirtmek isterim. Tahmin edersiniz ki projenizi bitirdikten sonra sayfanın bir köşesinden fırlayan 'Times New Roman' stilinde bir yazıya rastlamak hiç hoş olmayacaktır. BluePrint'in typography.css dosyası işte bunun önüne geçiyor ve yazıtipi boyutları, tablolar, satır aralıkları gibi elementler için stil kurallarını belirliyor.
grid.css bu dosya blueprint'in ızgara (grid) şablon kurallarından sorumlu. Bunu kullanan sınıflara (class) birazdan değineceğim. Izgara ile ilgill değinmem gereken önemli bir nokta blueprint'in varsayılan olarak 950px genişliğe sahip, her biri 30px genişliğinde ve aralarında 10px boşluk bulunan 24 sütun kullanıyor oluşu. Bu size biraz fazla katı gelebilir ancak BluePrint Izgara CSS Oluşturucusu'nu kullanarak her zaman kendi ızgara modellerinizi oluşturabilirsiniz. Eğer bu paragraf kafanızı karıştırdıysa panik yapmayın, yazımın devamında ızgara şablonu kullanarak site taslağımızı oluşturacağız. Ancak eğer CSS ızgara modellerine aşina değilseniz, Raj'ın Web Tasarımı İçin Hangi CSS Izgara İskeleti'ni Kullanmalıyım? makalesi sizin için iyi bir başlangıç olabilir.
ie.css BluePrint IE'yi destekliyor, işte bu sebeple IE'yi özel kılan o küçük detayları adresleyen kendi özel CSS dosyasına sahip :) İşin güzel yanı, BluePrint bunu sizler için hallediyor ve bu sebeple, iskeletin tüm ana elementleri tüm ana tarayıcılarda (IE 5 bile dahil) kullanılabiliyor.
print.css Bu dosya bazı varsayılan yazdırma stillerini tanımlıyor. Bu sayede ziyaretçileriniz web sitenizin yazıcıdan çıktısını aldığında normalden daha iyi görünmesini sağlıyor. print.css dosyasının bir diğer güzel özelliği de web sitenizin alan adını girebileceğiniz özel bir bölümü içeriyor olması. Bu sayede site içeriğinizde eğer herhangi bir bağlantı bulunuyorsa, yazıcı çıktısı alındığında o adres, bağlantı metninin hemen yanında parantez içerisinde görüntülenecektir. Bu alanı doldurmazsanız sadece harici sitelere olan bağlantılarınız doğru şekilde görüntülenecektir. daha detaylı bilgi için print.css dosyasının son kısmını inceleyin.
forms.css Bu dosya ise güzel görünümlü formlar ile uyarı mesajlarının kullanılabilmesini sağlıyor. Eğer Rails kullanıyorsanız flash uyarılarını bile görüntüleyebilirsiniz. Bu dosya, yazımın devamında değinmeyeceğim tek dosya olduğundan, aşağıdaki resim size bazı varsayılan form stilleri kullanılarak oluşturulmuş bir form örneğini gösteriyor.

BluePrint CSS form

bu altı farklı stilşablonunu eklemek zorunda mıyım?
Hayır. BluePrint CSS, HTML sayfalarınız için sıkıştırılmış üç adet CSS stilşablonunu içeriyor. screen.css yukarıdaki 1., 2., 3. ve 6. stil şablonlarını içeriyor. Bunun yanısıra print.css ve ie.css bulunuyor. İşin güzel yanı, blueprint css iskeletinin modüler yapısı sayesinde her bir css dosyasının birbirinden bağımsız işleyebiliyor oluşu. Bu sayede BluePrint'in sunduğu şablonlardan sadece istediğiniz şablonu kullanabilirsiniz. Örneğin BluePrint CSS Izgara modelini kullanmak istemiyor olabilir, ancak typography.css ve reset.css'nin nimetlerinden faydalanmak istiyor olabilirsiniz. Diğer bir deyişle diğer CSS elementlerinin işlemesi için BluePrint ızgara modelini kullanmak zorunda değilsiniz.

BluePrint kullanarak şablon oluşturalım

BluePrint CSS Şablonu

Yazımızın devamında, hobi amaçlı hikaye yazan kullanıcıların hikayelerini paylaşabileceği ve diğer kullanıcıların da hikayelere yorumlarını ekleyebileceği bir site oluşturcağız.

Aranızda eminim sıkı tasarımcılar bulunuyordur ve yukarıdaki resme baktığınızda bu ne biçim tasarım diyenleriniz olacaktır. Ancak burada ilginç olan şey, benim yukarıdaki tasarımı oluşturmak için tek satır CSS kodu yazmamış oluşum. Yukarıdaki tasarım varsayılan BluPrint CSS stil tanımlamalarını kullanıyor ve tasarım açısından türünün en iyi örneği değil elbette. Ancak yukarıda da bahsettiğim gibi yukarıdaki görünüme ulaşmak için tek bir satır kod yazmadım ve ayrıca hazırladığım bu şablon benim projem için güzel görünümlü ve kolayca değiştirilebilir olması açısından önemli. Tasarımım muhtemelen ilerleyen dönemlerde değişeceğinden, BluePrint benim bu değişiklikleri kolayca uygulayabilmemi sağlıyor.

Parçalara Ayıralım
Belgenin başlık (<head>) kısmı
Bildirgec kod örneklerini görüntülemede verimli bir ortam sunmadığından makalede yer alan kodları harici bir txt dosyası olarak yayımlamayı uygun gördüm. Yukarıdaki bağlantıya tıklayarak koda ulaşabilirsiniz.

İlgili kod örneği, tipik bir <head> etiketinin Blueprint kullanıldığında nasıl görüneceğine iyi bir örnek teşkil ediyor. İskeletin CSS dosyalarını dahil ederek işe başlamanız gerekiyor (bu dosyalar screen.css, print.css ve ie.css'den oluşuyor).

BluePrint ile ilgili en iyi şeylerden biri de salt CSS'den oluşması, bu sayede de tıpkı diğer tüm CSSlerde olduğu gibi modifiye edilebilir. İşte BluePrint eklentileri de bu şekilde çalışıyor. Örneğimde BluePrint fancy-type eklentisini kullandım. İlgill eklenti bazı güzel görünümlü tipografi öğelerini barındırıyor. Kod örneğinde de göreceğiniz üzere ilgili eklenti dosyasını blueprint css iskelet dosyalarını dahil ettikten sonra sayfama dahil ettim, bu sayede ilgili eklenti, blueprint css değerlerinin üzerine yazarak kendi değerlerini aktif hale getirebiliyor. Buraya kadar bazı BP eklentileri mevcut. İlgili eklentiler basitçe bazı öntanımlı BluePrint elementlerinin üzerine yazarak kendi değerlerini CSS iskeletine entegre ediyor.

Sayfa Başlığı

BluePrint Sayfa Başlığı

Kod Örneği İçin Buraya Tıklayınız
Bu kod ile ilgili en önemli nokta, ızgaranın 'container' sınıfına (class) dahil bir <div> ile çevrelenmesi gerekiyor oluşu. Eğer bunu uygulamazsanız içeriğiniz ızgaraya dahilinde görüntülenmez. <hr /> etiketleri BluePrint tarafından sayfanın bölümlerini dikey olarak ayırmak için kullanılıyor. 'alt' sınıfı ise fancy-type eklentisi tarafından kullanılıyor ve herhangi bir metin elementinin daha farklı görüntülenmesi için kullanılıyor.

Ana İçerik

BluePrint Ana İçerik

Kod örneği için buraya tıklayınız.

Bu kod örneğinde pek çok önemli detay bulunuyor. Gelin en üstteki <div class="span-17 colborder"> ile başlayalım. Bu etiket sayfa üzerindeki en geniş <div>'i simgeliyor. Bu bölüm, kod örneğinde göreceğiniz 'Featured Book' bölümünün yanısıra hemen altındaki daha küçük iki kutucuğu çevreliyor. 'span-17' sınıfı Blueprint ızgara şablonuna ait ve ilgili sınıfın kullanıldığı <div> etiketinin, sayfanın tamamındaki 24 sütunun 17'sinin genişliğinde olduğunu belirtiyor (17/24). Diğer bir sınıf 'colborder' ise column border (sütun sınırı) teriminin kısaltılmışı ve BluePrint'e, ilgili sınıfın kullanıldığı <div>'in sağına bir sınır eklemesi gerektiğini belirtiyor.

Önemli: 'colberder' sınıfı bir sütunun tamamını kullanıyor. Ana içerik kısmında 17 sütun (span-17) kullandığımızı hatırlıyorsunuzdur. Bu durumda yan çubuğun (sidebar) 7 sütun genişliğinde olduğunu düşünüyorsunuzdur (17+7=24). Ancak 'colborder' elementi bir sütunu işgal ettiğinden yan çubuk kısmının genişliği için elimizde 6 adet sütun kalmış durumda (17+1+6=24).

Yan çubuğa geçmeden önce 17 sütunluk kısım dahilinde bulunan iki kutucuğa dikkatinizi çekmek istiyorum ('Upload a book' ve 'Write a review' yazan kutucuklar). Aslında bu alan bir diğer BluePrint ızgarası içerisinde konumlandırılmış durumda. Bu dahil <div> 17 sütunluk bir <div> içerisine dahil edildiğinden, bu <>div>'in genişliği de tahmin edeceğiniz üzere 24 değil 17 sütundan oluşuyor.

Bu durumda ilk <div> 'span-8' ve 'colborder' sınıflarına dahil edilmiş. Bunun anlamı, ilk kutucuğun genişliği 8 sütundan oluşuyor ve sağ kısmında bir sınır bulunuyor. İkinci <div> ise yine 'span-8' sınıfının yanısıra 'last' sınıfına dahil edilmiş. Burası Blueprint ızgara iskeletinin önemli bir noktasına işaret ediyor. En sağdaki sütun mutlaka 'last' sınıfına dahil edilmeli. Bu sınıf, BluePrint'e, o sütunun sayfanın en sağındaki son sütun olduğunu belirtiyor ve bu sebeple onun sağına herhangi bir boşluk dahil etmemesi gerektiğini söylüyor. Son olarak iki adet kutucuğu içeren <div> için en fazla genişliğin 17 sütun olduğunu belirtmiştim. Kutucukların her birinin genişliğini 8 sütun (span-8) olarak tanımladık ve soldaki kutucuğu 'colborder' sınıfına dahil ettik. Bu durumda 17 sütunun tamamını kullanmış olduk (8+1+8=17).

Tamamdır, şimdi yan çubuğa geri dönelim. Bu yan çubuğun 'span-6' ve 'last' sınıflarına dahil edildiğini göreceksiniz. Bu yan çubuk, soldaki 17+1 sütunluk ana içerik kısmını tamamlıyor. Eğer fark etmediyseniz, 'span-#' sınıflarında # yerine 1 ila 24 arasında herhangi bir sayıyı yerleştirebilirsiniz. Daha fazla sütuna sahip bir ızgarayi tercih etmediğiniz sürece 'span-#' sınıfı herhangi bir numarayı içerebilir, yeter ki onu kapsayan (container) <div> etiketinin toplam ızgara sütun sayısından küçük olsun.

Aşağıdaki kod örneği ızgarayı örneklendirebilmek için oldukça basit bir şablonu kullanıyor. Kodu incelerseniz ızgara sisteminin nasıl çalıştığına dair bir fikriniz olacaktır.

Kod örneğine ulaşmak için tıklayınız.

Gelin bu CSS şablonunda kullandığımız diğer CSS sınıflarını inceleyelim.

'caps': Bu sınıf yan çubuk başlıkları için kullanılıyor. fancy-type eklentisi tarafından sunulan bu sınıf, tamamı büyük harflerden oluşan başlıklar oluşturabilmenizi sağlıyor.
'box': Bu sınıf özellikle listelerin görüntülenmesi için oldukça kullanışlı. Bu sınıfa dahil olan <div> etiketleri dahilindeki listelerin çevresinde bir boşluk bulunuyor ve yine ilgili kısım çevresinde bir sınır (border) bulunuyor.
'quiet': Bu CSS sınıfı, dahilindeki metnin rengini açık griye dönüştürüyor.
'prepend-top': Bu sınıf, yan çubuk dahilindeki 'Recent Reviews' bölümünde kullanılıyor. Bu sınıfa dahil olan elementin üst kısmına 1.5em'lik bir marj (margin) uyguluyor. Benzer bir sınıf olan 'append-bottom' ise aynı işlemi alt kısmına uyguluyor.
'prepend-5': Ben bu sınıfı küçük kutucuklardaki başlıkları sağa doğru itelemek için kullandım. Blueprint üzerinde aralıklar bırakmak için bir dizi sınıf bulunuyor: 'prepend', 'append', 'pull', ve 'push'. Prepend ve Append sınfları sırasıyla sola ve sağa dolgu (padding) eklemek için kullanılıyor. Pull ve Push sınıfları ise sırasıyla sola ve sağa marj (margin) eklemek için kullanılıyor. Tüm bu etiketler de ızgara modelini kullanıyor, bu sebeple ilgili sınıfın kullanıldığı <div> üzerinde kullanılabilecek en fazla sütun sayısından daha fazla bir sütun kullanmamanız gerekiyor (24 sütunluk bir ızgara modelinde 'prepend-25' sınıfını kullanmamanız gerektiği gibi).

BluePrint Footer Breakdown

Eğer CSS kutu modeli ile haşır neşir değilseniz ve padding ile margin arasındaki farkı bilmiyorsanız, hemen o konuda kısa bir ders verelim. CSS'de padding uygulanması durumunda, padding'in uygulandığı elementin sınırları dahilinde boşluk eklenir ve bu durum, ilgili elementin boyutunu arttırır. Örneğin, sınırları (border) olan bir tablo üzerinde çalışıyorsunuz ve bu tabloya padding eklemek istediniz. Bunun sonucunda tablonun sınırları tablonun kendisinden uzaklaşacaktır, zira padding elementi, tablonun sınırları dahilindeki içeriği etkiler. Öte yandan margin ise bunun tam tersidir ve boşluğu sınırların dışına etkiler ve uygulandığı elementin boyutlarını etkilemez. Bunun sonucunda margin uygulanan elementler, çevresindeki elementleri ya da elementin kendisini iteler. Aşağıdaki resim CSS kutu modelini çok net bir şekilde özetliyor.

CSS Box Model

BluePrint CSS ile hazırladığımız site

Özet
Bu rehber Blueprint CSS iskeleti sayesinde bir sonraki projenizinin ana şablonunu kolayca oluşturabilmenize nasıl katkı sağlayabileceğini ve CSS sıfırlamaları ve tipografi tanımlamaları ile sizin sırtınızdaki yükü nasıl hafifletebileceğini özetlemeye yönelik olarak hazırlandı. Ayrıca Blueprint'i Rails ile birlikte kullanıyorsanız Github üzerindeki şu kaynağı incelemenizi öneririm. İlgili kaynakta Blueprint'in Rails ile nasıl uyumlu çalışabileceğine dair pek çok örnek bulunuyor.

Blueprint'in en sevdiğim yanı sadece CSS'den oluşması. Tümüyle CSS. Eğer bu makalenin ardından Blueprint ile ilgileniyorsanız, gidin ve kaynak kodlarını inceleyin. Eğer biraz CSS bilginiz var ise sistemin nasıl çalıştığını kolayca kavrayacaksınızdır. Blueprint'in çok büyük bir kod tabanı yok, hatta pek çoğumuzun ortalama bir projede kullanacağından çok daha az CSS içeriyor. Eğer kaynak kodu okumak istiyorsanız Github üzerindeki Blueprint kaynağını inceleyebilirsinz.

Blueprint ile ilgili bilmeniz gereken birkaç kaynak:

BluePrint'in web sitesi blueprintcss.org. İskeleti indirmek için en iyi kaynak.
Varsayılan olarak Blueprint sabit şablonu kullanır. Eğer likit şablonlar ile ilgileniyorsanız, bu eklenti işinizi görecektir.
Burada da bir dizi işe yarar Blueprint eklentisi bulunuyor.

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

En iyi sanal masaüstü uygulamaları

aziL — Mon, 22 Dec 2008 12:16:00 GMT

ikonlar masaüstüne sığmamaya başlayınca sanal masaüstü programlarını araştırmaya giriştim. Bu noktada geçtiğim dikenli masaüstü yollarından, bazıları aklımda yer etti ve ihtiyaç olur diye bunların bir listesini yapayım dedim.

Her halükârda, özellikleri, kullanım kolaylıkları, işlevsellikleri bakımından en akılda kalıcı, en cevval sanal masaüstü uygulamaları şöyle çıktı. Üstelik herbirinin üretkenliği artırma iddiası var.

Dexpot
Dexpot, birçok kullanışlı özelliğe sahip, basit, kolay ve hızlı bir çoklu masaüstü uygulaması. En önemli özelliği masaüstleriniz (hayır), masaüstüleriniz (ı.ıh.), masaüstünüzler (anlamsız), desktop'larınız (eh) arasında kolayca geçiş yapmaya izin vermesi. ALT ve 1/2/3/4 tuşlarını kullanarak veya taskbar'daki simgesi vasıtasıyla hızlı bir geçiş yapmak mümkün. Ayrıca her masaüstünü ayrı bir çözünürlük, şifre, giriş/çıkış sesi, geçişte çalıştırılacak program(lar) gibi ayarlarla kişiselleştirilebiliyor, pencereleri hızlı bir şekilde, herhangi bir masaüstüne taşıyabiliyorsunuz.

bi sürü ayarı var

VirtuaWin
Açık kaynak kodlu olması dolayısıyla tercih edilen ve kullanıcılarının katkılarıyla geliştirilen VirtuaWin, pratiklik ve görsel lik açısından biraz geride kalsa da, bu dezavantajlarını eklenti desteği sayesinde çözüyor. Belki alışmak lâzım. Ama masaüstü isimlendirme, otomatik arkaplan değiştirici, desktop browser (masaüstü tarayıcı?) gibi birçok eklentisi bulunuyor. İşin şov tarafında zayıf.

tam yapamamışlar

Deskspace
Eski adı, Yet Another Desktop Manager 3d (Yodm 3d) olan Deskspace benim en beğendiğim sanal masaüstü uygulaması. Dört adet masaüstü yaratıyor ve bunlar bir kübün etrafına sarılıyor. Geçiş sırasında çeşitli Linux versiyonlarında olduğu gibi şekil efektler görebiliyoruz, dönüyor, sallanıyor, ekran kartının 3D özelliklerini kullanıyor. Hızlı geçiş, her masaüstü için duvar kağıdı (bu da neyse), pencere sürükleme, çoklu monitör desteği gibi özelliklere sahip olmasının yanında birçok uygulamayla uyumlu ve sürekli geliştiriliyor. Şip şak bi aparat, gayet şık.

şekline hayran olayım

Vista and XP Virtual Desktop Manager
Adından da anlaşılacağı gibi adı hiçbir şeye benzemiyor ve mis gibi dandiklik kokuyor. Lakin o kadar da kötü değil. Özellikle Vista kullanıyorsanız, Vista'nın yeni Aero arayüzünü özümsemiş bu uygulama hem hızı, hem de sınırsız sayıda masaüstü desteklemesi dolayısıyla tercih edilebilecek bir uygulama. Masaüstlerini thumbnail olarak görüntüleme özelliği hoş fakat XP'de kullanılamıyor. Klavye kısayoluyla pencereleri masaüstlerine gönderme, çoklu monitör, duvarkağıdı, Windows menüsü desteği gibi özelliklere sahip. Ama böyle bir efekt vereyim, coşturayım, "o ne lan" dedirteyim durumu yok. Görev adamı. Açık kaynak kodlu ve gideri var.

vista'cıları memnun eder

360 Desktop

Bu masaüstü yöneticisi olaya çok daha farklı bir açıdan yaklaşıyor. 360 dereceden... Ekstra bir sanal masaüstü yaratmıyor da varolan masaüstünü bir hayli uzatıyor ve panaromik bir masaüstü sunuyor. Ek olarak bir widget platformu. Bu sayede bir sürü ek aparatla süslenebiliyor, genişletilebiliyor, güçlendirilebiliyor. Soldan sağa, sağdan sola masaüstünüzde gezine biliyor youtube, myspace, hi5 gibi birçok Web sitesi ile entegre çalışabiliyor. Denenebilir, sitesinde bir sürü ilginç 360 Desktop panaroması var. Detaylı incelemesi burada.

döndür çevir

Cube Desktop
Cubedesktop görselliği baştacı yapmış bir uygulama. Her yerinden efektler fışkırıyor, üretkenlik katma hedefinizi, "dur şu masaüstlerini bi döndüreyim, bir kaydırayım, alt alta göreyim" derken unutturabilecek şekillere sahip. Yani kafası iyi. Şifreli koruma, altı adet sanal masaüstü, isim verme, duvar kağıdı, kısayol belirleme, Vista desteği gibi özellikleriyle de göz doldurma çabasında. Lakin bir Basic bir de Pro sürümü var. Pro sürümünde efektler çok daha fazla, ucuz ama yine de ücretli. Denediğimde performansını ve uyumluluğunu beğenmedim. Efekt yapayım derken görüntüleri birbirine karıştırabiliyor. Yine de bir görmek lâzım. Mütemadiyen geliştiriliyor.

seni efekt manyağı yapar

3DNA Desktop
Sanal masaüstünün artık çağ atlamışı diyebiliriz 3DNA Desktop için. İşlevselliği tartışılır ama mevzuya yaklaşımı, görselliği apayrı. Masaüstünüzün 3D World tabir edilen, koca bir dünya olduğunu düşünün. Burada geziniyorsunuz. Mesela dev bir ev, çeşitli odalarda, duvarlarda kısayollar, oturma odasındaki televizyon aslında Youtube... Bu size özel dünyayı istediğiniz gibi kişiselleştirebilir, duvarlara fotoğraflarınızı döşeyebilirsiniz mesela. Program önce sabit diskinizi tarayarak, haritasını çıkarıyor ve buna göre bir dünya yaratıyor, sonra istediğiniz gibi değiştirebiliyor, skin'ler, ek dünyalar desteği ile geliştirebiliyorsunuz. Ücretsiz sürümünde reklam var ve özelleştirme seçeneklerinden bazıları kullanılamıyor.

sanal nuri alço'lar için sanal villalar

Diğerleri:

Cool Desk - Ufak boyutlu, ücretsiz ve fonksiyon açısından zengin. Efekt istemez, işlevsellik ararım diyenlere.

Perfect Screens - Standart özelliklere sahip, sınırsız sayıda masaüstü oluşturulabiliyor, ağ desteği ve araç çubuğu desteği var. Ücretli.

AltDesk - Ashton masaüstü yöneticisi/Windows skin aparatını hazırlayan firma tarafından sunuluyor. Firmanın tüm ürünlerinde olduğu gibi skin desteği, görsellik ve efektler ön planda. Windows başka bir şeye çeviriyor.

Flash Desktops - Her nasılsa ilk gerçek zamanlı sanal masaüstü uygulaması buymuş. Kişiselleştirme menüsü seçeneklerinin kullanımı biraz karmaşık olsa da çıldırasıya, çıldırtasıya bir sürü özelliği, ayarı vesaire var.

Active Virtual Desktop - Yeni ama çok yol kat etmesi lazım. "Eh..." diyorum.

DeskHedron - Bu da oldukça yeni, Japon bir programcı tarafından hazırlanmış, ücretsiz, geliştirilmeye açık, DeskSpace'in taban alıp, eksiklerini de ekleyerek ortaya güzel bir şey çıkarmaya çalışan yetenekli bir arkadaşın yürek dağlayan dramı. Animasyonlu falan.

Yeni bir sanal masaüstü programında buluşmak üzere tüm masaüstüseverlere, efektif çalışmalar diliyorum. Sizin için geliyor: "Artık bu sanal masaüstünde 8 bit ikonlara yer yok..."

Bu yazı aziL 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'dan Ayakta Alkışlanacak Bir Hizmet Daha: In Quotes

aziL — Wed, 19 Nov 2008 18:25:00 GMT

Google Labs'ı bilmeyenimiz kalmamıştır. Google'ın yapım aşamasında olan, yayına tam olarak almadığı servisleri kullanıcı görüşlerine açtığı bölümü. Benim gibi " bakalım sırada ne var? " diyenler için ideal bir ortam Google Laboratuarları.

Orada karşılaştığım yeni bir servisten bahsetmek istedim sizlere: Google In Quotes. Gerçekten yine ayakta alkışlanacak bir çalışma olduğunu düşünüyorum. Adından da anlaşılacağı gibi burada "kim ne demiş? " sorusunun yanıtına ulaşabileceğiz.

Ekran görüntüsünü paylaştığım ve şu an In Quotes anasayfasında olan örnekte Obama ve McCain'in çeşitli konular hakkında neler söylediğini karşılaştırmalı olarak görebiliyoruz. Şu anda deneme aşamasında olduğu için bu iki liderin Iraq, Oil, Iran, Economy, Taxes vs. gibi ana başlıkları alınmış.

In Quotes'dan biraz daha derinlemesine bahsetmek gerekirse kaynağı tabii ki Google News . Herhangi bir kişiyi seçtiğimiz de resminin altında yer alan All Quotes By Barack Obama linki bizi Google News'e yönlendiriyor ve ne zaman ne söylemişse karşımıza çıkıyor. Ayrıca anasayfada söylemleri sadece belli yılları seçerek de ayırabiliyorsunuz.

Obama ve McCain'in dışında George W.Bush, Bill Clinton, Condeleza Rice, Harry Reid gibi isimlere de yer verilmiş. Google in In Quotes hizmetini tam sürüm yayına sokmasını sabırsızlıkla bekliyorum. Ülkemiz siyasetine katkısı olacağına kuşku yok : )

Anasayfası In Quotes'un U.S sürümü. Bunu sağ üst köşeden değiştirebiliyorsunuz. Şu anda mevcut diğer ülkeler ise Kanada, Hindistan ve İngiltere.

Bu yazı aziL 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 Chrome ve about:internets 'in sırrı

aziL — Wed, 19 Nov 2008 06:12:00 GMT

Google chrome henüz istenen düzeyde kullanım oranına yetişemese de en azından tarayıcı dünyasına yeni bir soluk getirdi. Hızlı Javascript motoru ve diğer yenilikleri ile takdire değer işler yaptı.

Ama mesele sadece bunlardan ibaret değil: "Google Chrome amerikan siyasetçileriyle dalga geçiyor"

Nasıl mı?

Google Chrome kullananlar eğer denedilerse adres çubuğuna about:internets yazdıklarında ne çıktığını hatırlayacaklardır. denemeyenler için bilgilendirmek gerekirse, adres satırına about:internets yazarsanız windows'un 3D Pipes isimli, boruların ekrana döşendiği meşhur ekran koruyucusu çıkıyor.

Peki, ama neden?

"Hem bu 'internets' de neyin nesi? Internet'in tekili / çoğulu mu olurmuş?" diye sorabilirsiniz.

Aslında burada bir internet mimi söz konusu. O da şu: George W. Bush, 2004 yılında, başkanlık için televizyonda demokrat partili rakibi ile tartışırken internet'i çoğul bir şeymiş gibi kullanıp "I hear there's rumors on the, uh, Internets" dedikten sonra bu artık bir mim haline geldi. Çeşitli internet sitelerinde bu sözle alay etmek ve kendilerini internet hakkında espirili bir şekilde bilgisiz gibi göstermek için insanlar "internets" sözcüğünü kullanarak "bu internetlerden de hiç anlamıyorum" gibi cümleler kurmaya başladılar. Halen de, digg gibi sitelerdeki yorumlarda "internets" sözcüğünü bol bol görebilirsiniz.

Şimdi sıra puzzle'ın ikinci kısmında. "Neden 3 boyutlu borular?"

Alaska senatörü Ted Stevens "İnternet bir dizi borudur. Bu boruar doldurulabilir." gibi muhteşem bir cümle kurmuştu. Bu da hemen bir mime dönüştü ve "İnternet bir dizi borudur" cümlesi her yerde alay konusu olmaya başladı.

Google da bu iki mimi alarak aynı mecrada kullanmış. yani chrome'un adres çubuğuna about:internets yazınca karşınıza bu yüzden bir dizi boru çıkıyor.

Bu yazı aziL 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 ile sayfa zeminine hükmedin!

aziL — Thu, 16 Oct 2008 09:14:00 GMT

XHTML'in cazibesinden gözlerinizi kamaştırabilmek için size, CSS kullanarak ne gibi zemin işlemleri (css background) yapabileceğinizi anlatmak istiyorum. Artık HTML etiketlerinde klasik olarak kullandığımız "background" etiket özelliği (property) yerini CSS'in güçlü background tanımlarına bıraktı.

Sayfa zeminine tam ekran resim yerleştirme:
Mesela sayfanız zemininde tam ekran olarak görüntülenecek bir görsel kullanmak istiyorsunuz. Ayrıca bu görselin tüm çözünürlüklere göre kendini sayfaya tam olarak yerleştirmesini de bekliyorsunuz. Hiçbir javascript kodu yazmadan sadece buradaki örneği şablon olarak değerlendirerek bunu yapabilirsiniz. Nasıl birşey elde edeceğini tam olarak burdan ve şurdan görebilirsiniz.
CSS ile filigran (watermark) kullanımı
CSS tanımları sayesinde artık filigranlı (watermark) görseller oluşturmakta çok kolay. Burada, bu konuda çok detaylı ve PHP destekli olarak hazırlanmış bir örnek bulabilirsiniz. Burdaki eğitsel notta ise (tutorial'da ise) PNG resim kullanarak CSS ile nasıl filigran görseller yapabileceğinizi görebilirsiniz.Bu yazıda ise direk filigranlı zemin hazırlamanın yöntemi mevcut.
CSS'de zemin konumlandırma (background position)
CSS tanımlarının bize sağladığı en büyük kolaylıklardan biri ise zemin üzerinde tam hakimiyet kurmanızdır. Tanımladığınız zeminin bulunduğu bölge (division) içersindeki X ve Y konumlarını belirtebilirsiniz.

Bu özellikten faydalanarak yine hiç javascript kullanmadan yanıp-sönen (roll over) butonlar hazırlayabilirsiniz. Son olarak konu hakkında özet bilgi niteliğindeki bu yazıya da göz atın.

Bu yazının BONUS BİLGİSİ:
CSS etiketlerinin neler olduğunu hatırlamakta güçlük çekiyor ve neyi nasıl yapacağını tam olarak hatırlayamıyorsanız, imdadınıza Cheat sheet'ler koşuyor. Bunları yazıcıdan yazdırıp her an göz hizasında bir yere asın. İşte size kapsamlı bir kaç cheat cheet;

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