bildirgec.org - siraykut - beğendikleri

seo teknikleri ve ipuçları

siraykut — Tue, 31 Aug 2010 07:15:00 GMT

İlk önce SEO kelimesinin nerden geldiğini söyleyelim. Search Engine Optimization İngilizce kelimelerin baş harflerinden gelir. Türkçeye çevirecek olursak Arama Motoru Optimizasyonu anlamına gelir.

seo

Şimdi biraz SEO kelimesinin anlamına gelelim. SEO tamamen pazarlama alanına giren bir konudur. Web sitenizi daha iyi pazarlamanıza yarayan kuralları içeren bir sektördür. Evet artık SEO bir sektör haline gelmiştir. Doğru yapıldığında hedeflenen kitleye kitlesel medya araçlarından ulaşılması daha avantajlıdır. Düz anlatmak gerekirse doğru yapıldığı takdirde müşterinize daha hızlı ulaşırsınız böylelikle daha fazla para kazanırsınız ve siteniz daha tanınmış olur. Şimdi SEO'da önemli olan uygulamalardan bahsedicem.
Anlatacaklarımın daha iyi anlaşılabilmesi için başlıklar halinde sıraladım.

web siteniz nasıl olmalı

1.)

aradığımı bulabilmek için buraya mı yoksa buraya mı tıklamalıyım

2.) Ziyaretçi aradığı bilgiyi kolay ve hızlı bir şekilde bulmak ister. Sitedeki her yazıyı okumaz öncelikle yazıların başlığını okur ve yazıyı hızlı bir şekilde tarar. Sayfanızdaki bilgilerin daha kolay ulaşılabilmesi için sayfanızı alanlara bölün. Menüler, yönlendirme, içerik, güncelleme gibi…

3.) Ziyaretçinin kafasını karıştırıcı bilgilerden uzak durun.

4.) Sitenizi bloglarda, soysal ortamlarda veya ücretli olan google adwords ile duyurun. Zamanla ziyaretçi sayınızda artış göreceksiniz.

web sitenizi dizinleme ve indeksleme(bu konu ile ilgili yazım)
Daha öncede detaylı bir şekilde başka bir yazıda bahsetmiştim. Sitenizi indekslemeden önce dizinlemeniz gerekir. Bunun için www.google.com/addurl/?continue=/addurl bağlantısı ile sitenizi dizinleyebilirsiniz. İndeksleme demek arama motorlarına sitenizi kaydetmek demektir. Bunları botlar yapar. Sitenizin her sayfasını gezerek sitenizi kategorize ederler. Google'ın 3 tane botu vardır. Bunlar;

1.) Adsense
2.) Freshbot
3.) Deepcrawl

Botlarıdır. Bu botlar hakkında daha fazla bilgi sahibi olmak için “web sitenizi indeksleme ve dizinleme” başlıklı yazıma bakmanızı öneririm.
serfitika alarak indeksleme

Burada başka bir yöntemden daha bahsetmek istiyorum. Sitenizi indekslemek için sertifikaları da kullanabilirsiniz. Bu tür sertifikaların bulunduğu siteler başarılı olarak kabul edilir google tarafından.W3C bunlardan en iyisidir. Güvenlik için de www.hackersafe.com'dan sertifika alabilirsiniz.

sitemap (siteharitası) ile çok sayfalı sitelerinizi kolaylıkla indeksleme

Siteniz eğer çok sayfalı ise google indekslemeyi yapmakta hayli zorlanır. Bunun için sitenize sitemap (site haritası) koymalısınız. Böylelikler siteniz daha hızlı bir şekilde indekslenebilir.
Sitenize sitemap eklemek için www.xml-sitemaps.com dan ekleyebilirsiniz. Ya da bu tür yazılımlar vardır. Bunu da www.sitemapbuilder.com'dan indirebilirsiniz.
Sitemap'i oluşturduktan sonra .xml veya .xml.gz uzantılı dosyanızı www.google.com/webmasters sitenizin size ait olduğunu belirtmek için istenilen ad ve html dosyasını sitenize yükledikten sonra site haritaları bölümünden site haritanızı google'a yükleyebilirsiniz. 1-12 hafta arası google sitemap içerisinde bulunan tüm bağlantıları veritabanına yerleştirecektir.

sitenizdeki içeriklerinizin (yazıların, makalelerinin) başlıklarını en fazla aranan kelimelerden oluşturun

İçeriğinizin başlığı oldukça önemlidir. Başlığınızı arama motorlarında en fazla aranan kelime yapmalısınız ve bunu içeriğin içinde en az 5 kere kullanmanız gerekmektedir.
İçeriğiniz başlığını kesinlikle kalın ve altı çizgiler ile vurgulayın ve bunları birkaç kez dile getirin.

sitenizin linki oldukça diğer sitelerde yayınlansın(link değişimi yapan sitelere en iyi örnek r10)
Back-link diğer sitelerin sizin sitenizi veya sitenizdeki bir içeriğe verdikleri bağlantılardır. Arama motorları için back-link sayısı önemlidir.Diğer sitelerle iletişime geçerek karşılıklı olarak anlaşabilirsiniz. Karşı taraftaki sitenin webmasterına ulaşıp anlaştıktan sonra bir an önce sitenize diğer sitelerin linkini verin ve diğer siteyi kontrol edin. Genellikle çoğu webmaster sözünü tutar.
Piyasadaki pek çok dizine kaydolun. Tek taraflı bağlantı vermenin en kolay yolu çok sayıda dizine kaydolmaktır.
Back-link için sitenizde rss desteği olması önemlidir. RSS sitenize yeni içerik eklendiğinde kullanıcının haberdar olmasını sağlar.
doğru anahtar kelimeleri (keywords) seçin

Keywords siteniz için oldukça önemlidir. Hedef kitlenin size daha kolay ulaşabilmesini sağlar.
Arama motorları belirttiğiniz anahtar kelimeleri sitenizde görmek ister. Örneğin; Anahtar kelimelerinizden bir tanesi “spor” ise arama motorları sitenizde spor yazısını görmek ister. Eğer bunu görmezse sitenizi banlayabilir ve yükselmesini engelleyebilir.
Sitenizde yoğunluklu olan kelimeleri bulan sitelerden keywords öğrenin ve ona göre bir anahtar kelime zinciri oluşturun.Unutmayın ki hedef kitlenize ulaşabilmenizdeki en önemli etkendir.
Anahtar kelimelerinizi bulurken şu sitelerin epey yardımcı olacaktır.
www.google.com/trends ve www.google.com/insights/search.

Bu hizmetler hangi kelimenin ne kadar arandığını bilen hizmetlerdir.

Web sitenizdeki kelime yoğunlunu araştırmak için şu siteyi kullanabilirsiniz.
www.iwebtool.com/keyword_density

anahtar kelimeleriniz domaininizin içindede geçsin

Arama motorları için domain önemlidir.Arama motorlarında üst sıralara çıkmak için anahtar kelimeniz domaininizin içinde de geçmesi gerekiyor. Örneğin; Domain eğitimi ile ilgili site yapacaksınız. Anahtar kelimelerinizin içinde domain ve eğitim mutlaka geçmesi gerekiyor zaten. İsminizde domaineğitimi.com olması gerekiyor.

Burada 2. El domain alırken önemli olan şey alacağınız 2.el domainin arama motorlarında banlanıp banlanmamasına dikkat etmektir.

programlama, tasarım ve css'nin önemi

Sitenizin tasarımını photoshop ile veya başka birisine yaptırdınız. 2 temel sorun var.

1.)tasarımı aynı şıklıkta bir web sitesine uygulamak

2.)sitenin içeriğinde kolayca düzeltmeler yapabilmek.

Bu 2 temel sorunu XHMTL programlama dili çözüyor. Her içerik etiketlerle ilişkilendiriliyor. Bu sayede arama motorlarının sitenizi daha kolay anlayabiliyor ve indeksleyebiliyor. Bunun üzerine CSS isimli sitil programlanıyor ve web uygulamasının üzerine kabuk gibi yerleştiriliyor. Google XHMTL ve CSS uygulamalarının sever.
Bir diğer konuda web sitenizi içerik yönetim sistemleri ile bile yapsanız mutlaka sayfa uzantılarınız .html veya .html uzantılı olmalıdır. Sayfayı oluşturan başlığın aynı şekilde sayfa uzantısında da aynen statik gibi olması gerekir.

w3c nedir

Çoğu zaman karşınıza çıkmıştır.Bazı siteler Internet Explorer farklı çalışırken Firefox da farklı çalışmakta veya görünmektedir. Bunun sebebi web sitesinin W3C standartlarına göre yapılmamasındandır.

Google W3C ye önem vermektedir. Çünkü farklı tarayıcılarda çalışan site kullanıcılara daha iyi hizmet verir. Bu da Google kuruluş felsefelerindendir. Bu yöntem pek bilinmeyen bir SEO yöntemidir. Validator.w3.org adresinden sitenizin performansını görebilirsiniz.
Bu anlattıklarımın hepsinden başka uygulamalar da vardır. bu uygulamalar web sitenizi arama motorlarında oldukça yüksek yerlere taşıyacaktır.

yazılarımdan bazıları:

en ucuz domain ve domain fiyatlarının listesi
apple (1976-2010) hayat öyküsü ve yaptıkları
soyu tükenmekte olan on teknoloji

gamescom'daki ilginç bilgisayar tasarımları

pes 2011 gameplay videosu çıktı

blog

Bu yazı siraykut tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli.com: Kolektif Bağımsız İçerik

Sosyomat.com: Arkadaşını Etiketle

Put.io: Online Cloud Storage

Muhteşem Minimalist ikon setleri

siraykut — Wed, 30 Jun 2010 06:28:00 GMT

Tasarımda ikon ögesi oldukça önemlidir. Tasarımın daha renklenmesi ve bazı bölgelere dikkat çekme gibi birçok farklı yapıda kullanılan ikonlar renkli tasarımlarda olduğu gibi minimalist tasarımlarda da oldukça önemlidir. Arşivlerinizde saklayabileceğiniz veya web sitelerinzde kullanabileceğiniz Muhteşem Minimalist ikon setleri;

Default Icon

eps, png, gif formatlarında siyah ve beyaz 110 tane ikon bulunmakta. Ikonların boyutları : 16x16, 24x24, 32x32, 48x48, 64x64, 128x128, 256x256. Ayrıca bu ikon arşivi creative commons sertifikasına sahip.

bwpx.icns

250 tane 18x18 boyutunda arka planı beyaz olan minimal ikon bulunmakta. Ayrıca bu ikon arşivi creative commons sertifikasına sahip.

Munich

1000 yüksek kaliteli 5 farklı temalı (gri tonlamalı, turuncu tonlamalı, renksiz, renkli, mavi ağırlıklı), png formatında 16x16 & 32x32 boyutlarında creative commons sertifikalı ikon.

Eclipse 2

png formatında 128x128, 48x48, 32x32 ve 16x16 boyutlarında siyah ve beyaz arka planlı toplam 265 ikon.

Wireframe Toolbar Icons

Siyah ve Beyaz arka planlı 16x16, 32x32 ve 48x48 boyutlarında png formatında 244 tane ikon. Ayrıca Creative Commons sertifikasına sahip.

Devine Icons

Siyah ve beyaz, 256x256 ebatlarında png ve icn formatında toplam 50 tane ikon.

Devine Icons 2

Siyah ve Beyaz, 512x512 boyutlarında png formatında 368 ikon.

Only2 Icons

96 tane siyah ve beyaz arka planlı gif formatındaki 10x10 boyutlarında ikonlar.

Symbol Signs

Eps ve Gif formatlarında 134 tane siyah ve beyaz arka planlı ikon.

UIDesign Icons

12x12, 16x16, 24x24, 32x32, 48x48, 64x64, 128x128 ebatlarında siyah, beyaz ve arkaplansız muhteşem ikonlar.

Ayrıca Bakınız ;

angelsdemos: Blog | Twitter | Email | RSS

Kaynak : wdl

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

jquery content sliders gösterim eklentileri

siraykut — Sun, 14 Mar 2010 12:26:00 GMT

content slider'lar bir önceki yazımda belirttiğim gibi çok çeşitli uygulama alanına sahip içerik gösterim eklentileridir. web sayfalarınıza kolayca entegre edebileceğiniz jquery ile geliştirilen content slider aşağıda listelendi.

1- jquery tools scrollable - tutorial - demo - download -

2- anythingslider jquery plugin - demo - download - tutorial -

3- sliding boxes and captions with jquery - demo - download - tutorial

4- making a content slider with jquery ui - demo - download - tutorial

5- creating a slick auto-playing featured content slider - demo - download - tutorial

6- create featured content slider using jquery ui - demo - download - tutorial

7- jquery.scrollto - demo - download - tutorial

8- moving boxes - demo - download - tutorial

9 - imageswitch - demo - download - tutorial

10 - jcarousel - demo - download - tutorial

11- using the wonderful jflow plugin - demo - download - tutorial

12- create beautiful jquery slider - demo - download - tutorial

13 - step by step to create content slider using jflow - demo - download - tutorial

kaynak

Bu yazı siraykut 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, Çin'den Çekildi

siraykut — Wed, 24 Mar 2010 08:10:00 GMT

Google, 2 hafta önce Çin Hükümeti ile arasındaki anlaşmazlık sonucunda son karar olarak Çin'den çekileceğini duyurmuştu. Google, iki hafta önce aldığı bu kararı bugün gerçekleştirerek Çin'den tamamen çekildiğini resmi olarak duyurdu.

Google'ın Çin'deki adresi olan google.cn artık kullanılmaz durumda. Bu adrese girmek isteyen kullanıcılar Google'ın Hong Kong sayfasına yönlendiriliyorlar. Hong Kong sayfasına yönlendirilmenin gerçek sebebi ise Google'ın Hong Kong'ta sansürsüz olarak arama yapması.

Geçen aylarda Google ve Çin hükümeti arasında Çin'de uygulanan sansür politikası ve Çin'den Gmail'e yapılan siber saldırılardan dolayı gerginlik yaşanmıştı. Yapılan görüşmelerden sonuç alamayan Google yetkilileri son çare olarak Çin'den çekilme kararını aldılar.

Çin Hükümeti ise Google'ın Android yüklü telefonlarını ve ilk telefonu olan Nexus One'ın çıkış tarihlerini henüz görüşmeler yapılırken ertelemişti. Ayrıca Google'ın taşınabilen tüm uygulamaların kullanımını da yasaklamıştı.

Google'ın bu kadar süre beklemesinin sebebi ise Çin'deki çalışanlarını mağduriyetini korumak içindi. Google artık Çin'deki sansür baskısına karşı Çin'deki arama motoru uygulaması başta olmak üzere birçok uygulama erişimini Hong Kong'a yönlendirdi.

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynaklar ; Google Blog, Google Blog (2), washingtonpost, nytimes, bbc news, paidcontent

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

Autoit - Bilgisayarı Otomatikleştirin

siraykut — Sun, 22 Feb 2009 17:22:00 GMT

Auto it logo

auto it, adından da anlaşılabileceği gibi bir otomatikleştirme yazılımı. auto it fare ya da klavye girişlerini simüle edebiliyor. basic kod tabanına benzeyen betikler yazarak ekranın istediğimiz koordinatına tıklama, istediğim pencereyi açıp istediğimiz yazmak, pencereleri taşımak gibi birçok işlemi gerçekleştirebiliyoruz.

autoit yapabileceği işlere göre oldukça küçük boyutlu bir yazılım (8mb). autoit içinde yazdığınız betikleri sonradan kendi başına çalısan programlara (exe dosyaları) çevirebiliyorsunuz. bu durumda betiklerinizi autoit'in yüklü olmadığı herhangi bir bilgisayarda da çalıştırabilirsiniz.

programın genel özelliklerini şöyle sıralayabiliriz;

kolay öğrenilebilir basic kod yapısının bezeri betikler geliştirme.

tuşları ve fare hareketlerini simüle edebilir.

windows işletim sistemini ve programlarını rahatlıkla yönetebilir.

diğer yazılımlar ile etkileşimli çalışabilir.

betikler sonradan tek başına çalıştırılabilir yazılımlara çevirilebilir.

görsel arabilirim (gui) oluşturulabilir.

com (component object model) desteği.

düzgün, kararlı kod yapısı.

dışarıdan direkt exe, dll, api çağırabilme.

windows 95 / 98 / me / nt4 / 2000 / xp / 2003 / vista ile çalışabilir

unicode ve x64 ü destekler.

windows vista kullanıcı hesapları kontrolü (uac) ile beraber çalışabilir.

auto it yazılımını bilgisayarınıza kurduktan sonra programlar menüsünde oluşacak yardımcı programlarınız;

scite script editor : autoit betiklerini düzenlemenizi sağlar.

compile script to .exe : betiklerinizi exe ye çevirir.

decompile .exe to script : exe yaptığınız betiği tekrar autoit dosyası haline getirir.

run script : betiğinizi yürütür.

autoit window info : yazılım penceresi üzerinde bununan ok (finder tool) u başka bir yazılımın penceresine, ya da pencere üzerinde bulunan öğelere sürüklediğinizde onlar hakkında bilgi vererek işinizi kolaylaştırır.

programın tipik çalışma şeklini örneklemek gerekirse;

alttaki kodları auto it düzenleyicisine yapıştırdıktan sonra tools > go yu tıklayın (ya da doğrudan f5 i kullanın)

;notepad i calistiralim
run("notepad.exe")
; notepad in aktif olmasını bekleme kodu - türkçe windowsta "adsız - not defteri" başlığı beklenecek
winwaitactive("adsız - not defteri")
; send komutu ile istedigimiz tus u ekrana gonderiyoruz
send("bu bir auto it ornegidir ...")
send("{enter}")
send("bu bir auto it ornegidir ...")
send("{enter}")
send("{enter}")
; sleep parametresi ile komutu bekletiyoruz. 1000 = 1 saniye
sleep(1000)
send("{1}{enter}")
; sleep parametresi ile komutu bekletiyoruz. 1000 = 1 saniye
sleep(1000)
send("{2}{enter}")
sleep(1000)
send("{3}{enter}")
sleep(1000)
send("{4}{enter}")
sleep(1000)
send("{5}{enter}")
send("betik sonlandi ...")
; exit ile betigi bitiriyoruz
exit

yazilimin web sitesi ve diğer bağlantılar;

●ana sayfa ●forum ●wiki ●indir ●arka plan ve logolar

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

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

siraykut — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

CSS İle İlgili Yazdığım Diğer Yazılar

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

ExtJS ve ExtGWT JavaScript Kütüphaneleri

siraykut — Mon, 16 Feb 2009 17:08:00 GMT

JavaScript'ler web sitelerin vazgeçilmez kaynaklarıdır. JS ile kullanıcı dostu, interaktif arayüzler oluşturulurken bu arayüzlerin tarayıcıdan (browser) tarayıcıya farklılık göstermesi, hem web site geliştiricisi hem sitenin ziyaretçisi açısından en istenilmeyen durumlardan bir tanesidir.

JavaScript'in gücü ve etkileyici yanları çeşitli açık kaynak kodlu JavaScript kütüphanesinin yazılmasını sağladı. Bu kütüphanelerden siteler için hazırlanmış, açık kaynak kodlu, görselliği etkileyici ve çeşitli tarayıcılarda testleri yapılmış ExtJS ve ExtGWT'den bahsetmek istiyorum.

Bu JS kütüphaneleri, yüksek performans elde etmek, zengin internet uygulamaları üretmek amacıyla geliştirilmiş.

Demolarda da göreceğiniz üzerine Ajax'sal özellikler kütüphanelerin beğeni kazanmasını sağlıyor.

Şimdi ExtJS'den örneklere bakalım.

ExtJS Feed Viewer (demo)

ExtJS Feed Viewer

Simple Tasks (Kod ve Açıklama)

ExtJS Simple Tasks

Image Organizer (demo)

ExtJS Image Organizer

Web Desktop (demo)

ExtJS Web Desktop

Basic Grid (demo)

Editable Grid (demo)

ExtJS Editable Grid

XML Grid (demo)

Paging - Sayfalama (Demo)

Grouping - Gruplama (Demo)

Live Group Summary (demo)

Grid Plugins (demo)

Grid Filtering (demo)

Grid From Markup (demo)

Grid Data Binding (Basic Demo, advanced demo)

MessageBox (demo)

ExtJS MessageBox

HelloWorld! (demo)

Layout Window (demo)

Multiple Trees (demo)

ExtJS Multiple Trees

XML Tree Loader (demo)

ComboBox (demo)

Dynamic Forms (demo)

Advanced Validation (demo)

CheckBox ve Radio Button (demo)

File Upload Field (demo)

Basic Toolbar (demo)

StatusBar (demo)

Slider (demo)

Bu özellikler ve daha birçok demo şu adreslerde yer alıyor:

ExtGWT de benzer özellikler taşımakta olup uzaktan procedure desteğini GWT RPC, JSON ve XML ile sağlıyor.

Bu açık kaynak kodlu JavaScript kütüphanelerine olan ilginin arttığının örneklerine ülkemizde de rastlıyoruz. Turkcell'in teknoloji araştırma ve geliştirme şirketi Turkcell Teknoloji de, ExtJS kütüphanesi ile yine açık kaynak kodlu ISOLA'yı duyurdu. Ekran görüntülerine buradan bakabilirsiniz. Isola'nın son versiyonunu da buradan indirebilirsiniz.

Bu framework'lerin bileşenlerini kullanarak estetik ve güçlü görselliğe sahip siteler kolay ve hızlıca tasarlayabiliriz.

Son olarak eklemek istediğim noktada J2EE program geliştiricileri için ExtJS'yi kolay bir şekilde kullanabilmeleri için ExtTLD isimli TLD etiketlerin oluşturulmuş olması. Bununla ilgili şu siteye bakabilir ve şuradan yükleme yapabilirsiniz.

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

Size Sıfırdan AJAX Öğretecek 20 Mükemmel Kaynak

siraykut — Mon, 16 Feb 2009 07:45:00 GMT

Ajax (Asenkronize JavaScript ve XML) yüksek seviyede interaktif ve karşılık veren tarayıcı tabanlı uygulamalar geliştirebilmenize olanak sağlayan bir teknolojidir. XMLHttpRequest nesnesine yüklenerek suncu ile sorunsuz bir bağlantı sağlanabilir ve bu sayede yumuşak ve dinamik bir kullanıcı deneyimine kavuşulur.

Eğer daha önce AJAX öğrenmek istediyseniz, AJAX'ı ve onu çevreleyen teknolojileri "yalayıp yutmanızı" sağayacak pek çok kaynak bulunmaktadır. Yazımızın devamında AJAX konusunu kapsayan en iyi 20 web sitesini incelemeye çalıştık.

1. Ajax resource center (developerWorks)

IBM'in geliştiricilere ve BT profesyonellerine yönelik olarak hazırladığı bir kaynak merkezi olan developerWorks üzerinde bu konuya adanmış bir AJAX kaynak merkezi bulunmaktadır. İlgili sayfada AJAX'a yönelik pek çok rehber yer alıyor. developerWorks'ün rehberleri derinlemesine ve oldukça uzundur ve bunlar üzerinden jQuery ve AJAX ile RIA uygulamaları oluşturmak, AJAX güvenlik araçlarını öğrenmek ve AJAX tabanlı sohbet sistemi geliştirmek gibi farklı alanlarda pek çok çeşitli bilgiye ulaşabilirsiniz.

2. Mozilla Developer Center (AJAX)

Mozilla Developer Center üzerinde bulunan AJAX bölümü özellikle giriş seviyesindeki geliştiriciler içn mükemmel bir başlangıç noktası olarak gösterilebilir. MDN üzerindeki başlangıç rehberi özellikle AJAX'ın temel konseptlerini öğrenmek için mükemmel bir başlangıç noktasıdır. İlginizi çekebilecek bir diğer yazı ise XMLHttpRequest üzerinde yer alan yazıdır. Bu yöntem tipik AJAX örneklerinde sunucu tabanlı betiklerle iletişime dair kullanılması gereken ana elementtir.

3. AJAX Today

Üyelerinin AJAX hakkında web site bağlantılarını paylaşarak oluşturdukları bir içeriğe sahip olan AJAX Today web sitesi gönderilen bağlantıları AJAX Dersleri ve AJAX Podcastları gibi kullanışlı kategoriler altına yerleştiriyor. Dilediğiniz kategorilerin RSS beslemelerine abone olarak üyeler tarafından yeni bir bağlantı gönderildiğinde siteyi ziytaret etmenize gerek kalmadan doğrudan RSS beslemesi üzerinden takip edebilirsiniz.

4. ajax.solutoire.com

ajax.solutoire.com, Yazılım Mühendisi Bas Wenneker tarafından oluşturulan ve çevrimiçi AJAX kaynaklarını tek bir sayfa üzerinde listeleyen bir dizin sitesidir. ajax.solutoire.com üzerindeki kategoriler, AJAX Haberleri ve AJAX/JavaScript Güvenliği gibi çeşitli kategorilere ayrılmıştır. Bas Wenneker ayrıca JavaScript ve mooTools gibi web geliştirme konularında bildirimler yayımladığı Solutoire.com blogunu da yönetmektedir.

5. SitePoint: JavaScript & AJAX Tutorials

Web profesyonellerine kullanışlı ve işe yarar bilgileri sunan bir web yayımı olan SitePoint üzerinde bulunan JavaScript & AJAX Rehberleri bölümü özellikle halihazırda çalışan örnekler üzerinden AJAX öğrenmek isteyen geliştiriciler için mükemmel bir kaynaktır. "Elektronik Posta Listenizi Geliştirmek İçin AJAX ve PHP Kullanın" ve "AJAX İle Kontrolü Ele Geçirn" gibi rehberleri takip edebilir ve AJAX bilginizi ilerletebilirsiniz.

6. Encosia

Encosia, özellikle ASP.Net ve AJAX konuları başta olmak üzere web geliştirme konusunda bildiriler yayımlayan Dace Ward'a ait bir blog. Site bünyesinde veri güncellemelerini gerçek zamanlı olarak görüntülemek ve interaktif veri araması için jQuery nasıl kullanılır gibi konuları irdeleyen pek çok rehberi içeren Encosia özellikle ASP.Net üzerinde çalışan web geliştiricileri için mükemmel bir kaynaktır zira site üzerinde "Sık yapılan bu 3 ASP.Net AJAX hatasını yapıyor musunuz?" gibi makaleler de okuyabilirsiniz.

7. AJAX Technology Center

Adobe Developer Connection'un bir parçası olan AJAX Technology Center web tasarımcılarına ve geliştiricilerine yönelik bir kaynak. AJAX Technology Center AJAX geliştiricileri için Adobe Air ve Dreamweaver projelerine AJAX bileşenleri eklemek gibi konularda makaleler ve rehberler içermektedir.

8. AJAX Blog

AJAX Blog, AJAX hakkında bir blogdur. AJAX Blog üzerinde aradığınız bilgiye ulaşmanıza yardımcı olacak pek çok kategori bulunmaktadır. Eğer AJAX rehberleri ve örnekleri arıyorsanız, hiç beklemeden AJAX Rehberleri ve AJAX Örnekleri kategorilerini ziyaret edebilirsiniz.

9. AJAX Matters

AJAX teknolojisi hakkında bildiriler sunan bir blog olan AJAX Matters 2004 yılında yayım hayatına başlamış olup bu konuya adanmış ilk bloglardan biridir. Site bünyesinde AJAX ve PHP'ye başlangıç ya da Google Web Toolkit'i öğrenebileceğiniz pek çok yardımcı rehber bulunmaktadır.

10. Ajaxonomy

Amacı AJAX hakkındaki bilgileri paylaşmak olan bir grup web geliştiricisinin hazırladığı bir blog olan Ajaxonomy özellikle AJAX Rehberleri hakkında bilgi sahibi olmak isteyenlerin işine yarayacak pek çok makaleyi içeriyor. Bunun yanısıra PHP'de sunucu tabanlı caching gibi diğer AJAX teknolojilerine ait bilgiler ve web üzerindeki diğer AJAX rehberlerinin incelemeleri de yer alıyor.

11. Ajaxian

AJAX üzerindeki yeniliklere yönelik lider bir blog olan Ajaxian, AJAX ile ilgili ipuçlarını ve dersleri barındıran Rehber başlığı gibi düzenli olarak güncellenen AJAX konularını ele alıyor. Web geliştirme alanında ün yapmış web profesyonellerini içeren bir ekibe sahip olan Ajaxian, özellikle AJAX'a yönelik kaynaklar ve haberler için ilk uğranılması gereken sitelerden.

12. Ajaxlines

Ajaxlines, ziyaretçilerine AJAX haberlerini, kaynaklarını ve derslerini sunmayı hedefliyor. Pek çok farklı kaynaktan derlediği haberleri ve bilgileri bir araya getiren site sayesinde kullanıcılar tüm bu makalelere tek bir site üzerinden ulaşabiliyor.

13. AJAX Magazine

PHP Magazine Network'un bir ağı olan AJAX Magazine AJAX konusunda bir web dergisi. Site bünyesinde işe yarar AJAX derslerine yönelik AJAX dersleri ve AJAX ve .NET kategorisi gibi daha özel alanlara yönelik ilginizi çekebilecek bilgileri içeren pek çok farklı kategoriye ulaşabilmenizi sağlıyor.

14. InsideRIA

InsideRIA, kısa adı RIA olan Rich Internet Applications (Zengin İnternet Uygulamaları) hakkında bir komünite websitesi. Site bünyesinde ilk YUI uygulamanızı yazmak (YUI, Yahoo!'nun JavaScript kütüphanesidir) ve yüksek trafiğe sahip web siteleri için AJAX çatıları gibi makalelerle yüksek seviyede interaktif web uygulamaları yazabilmenize yardımcı olan kaynaklar yer alıyor. AJAX etiketine sahip makaleleri ziyaret ederek sadece AJAX hakkındaki içeriğe ulaşabilirsiniz.

15. AJAX Impact

AJAX Impact, AJAX hakkında bilgileri ziyaretçileri ile paylaşmaya kendini adamış bir web sitesi. AJAX'a yönelik derslerin bir listesine ulaşmak için AJAX Dersleri bölümünü ziyaret edin. Eğer örnek web sitelerini merak ediyorsanız AJAX Kullanan Siteler bölümünü ziyaret etmeyi unutmayın.

16. AJAXwith.com

AJAXwith.com, "AJAX with (ile) [buraya istediğinizi girin]" (örneğin "AJAX ile PHP") hakkında kaynakları paylaşabileceğiniz komünite tarafından geliştirilen bir web sitesidir. 4.000 üyeye yakın AJAX forumu özel bir konuda yardıma ihtiyacınız olduğunda kullanışlı olabilir.

17. David Walsh Blog

Web geliştiricisi David Walsh, kendi kişisel blogu David Walsh Blog üzerinden her seviyedeki web tasarımcısı ve geliştiricisi ile işe yarar ipuçlarını paylaşıyor. Web geliştirimine yönelik pek çok konuda yazı yazan yazarın AJAX başlığı, AJAX hakkındaki makalelere çabucak ulaşabilmenizi sağlıyor. Kendisine ait olan AJAX dersleri arasında "mooTools 1.2 kullanarak AJAX kullanıcı adı uygunluğu kontrolü" ve "mooTools 1.2 kullanarak periyodik AJAX istekleri" yer alıyor.

18. AJAX Projeleri

AJAX Projects, AJAX web projelerine yönelik dizin tarzında bir liste sitesi. Site bünyesinde yer alan AJAX Dersleri bölümünde yer alan "jQuery kullanarak PHP AJAX giriş formu", "Google Analytics: AJAX ve Flash'ı İzlemek" ve "JavaScript Kodunuzu Nasıl Tasarlamalısınız?" gibi çeşitli kaynaklardan alınmış AJAX ile ilgili pek çok rehber ile mükemmel bir kaynak.

19. Agile AJAX

Pathfinder Development (bir yazılım geliştirme ve UX tasarım şirketi) üzerinde bir bölüm olan Agile AJAX, AJAX hakkında bilgileri paylaşıyor. Agile AJAX üzerinde göreceğiniz yazılardan bazıları "Uygulama Güvenliği: Kuruluş Çizelgesini Atın" ve "Scriptaculous: Seçimden Sonra Hover'ı Düzeltmek" yer alıyor.

20. AJAX Patterns

AJAX hakkında bilgileri içeren Wiki tarzında ve bir komünite tarafından geliştirilen bir site olan AJAX Patterns sitesi üzerinde yer alan örnekler kısmı özellikle sık kullanılan AJAX tasarım örneklerini görmek istiyorsanız ziyaret edilmesi gereken bir bölüm.

Kaynak: Six Revisions

İlgilenebileceğiniz Diğer Yazılarım

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

gog.is: kolay ve kısa aramalar

siraykut — Thu, 29 Jan 2009 17:59:00 GMT

google

bir çok link kısaltma servisi var ama bu çok farklı gog.is google aramalarınızı kısaltıyor. bunun için sitesine girmenize gerek yok mesela googlede bildirgeç kelimesini aramak istiyoruz bunun için http://gog.is/ ' in sonuna "bildirgeç" yazıp tıklamamız yetiyor yani siteye falan girmeden http://gog.is/bildirgeç yazarak arama linkimizi oluşturmuş oluyoruz.

bu basit ve kullanışlı özelliğinin yanında alternatif arama linkleride oluşturabiliyoruz. birden fazla kelime aratıcaksak örnek olarak şöyle yazabiliyoruz;
http://gog.is/remove,windows,spyware.
http://gog.is/install ubuntu.
http://gog.is/what/is/love.
ayrıca googlede dükkan, kitap, haberler, finans, wikipedia ve filmler için linkler oluşturabiliyoruz onlar ise şöyle;
google shopta ipod aramak için
http://gog.is/shop:ipod.
kitap aramak için
http://gog.is/book:poetry.
Google hakkında haberleri aramak için
http://gog.is/news:google.
google finansta arama yapmak için
http://gog.is/stock:apple.
direkt wikipedia'da arama yapmak için
http://gog.is/wiki:leo laporte
direkt imdb'de film araması yapmak için
http://gog.is/movie:slumdog.
Yani kısaca googlede, wikipedia'da, imdb'de yapacağımız aramaların linkini kısaltabileceğimiz bunun için her hangi bir siteye girmeye gerek duymayan bir servis linkin sonuna direkt olarak elimizle istediğimiz kelimeyi yazarak arama yapmış oluyoruz hemde linkleri kısaltmış oluyoruz, yazan mentira

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

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