bildirgec.org - Kaashef - beğendikleri

Farklı jQuery uygulamaları

Kaashef — Tue, 02 Feb 2010 15:04:00 GMT

Artık jQuery'siz günümüz olmuyor. Web tasarımında hayatın o kadar içine girdi ki her sitede, her uygulamada jQuery uygulamaları bulunmakta. İşte birbirinden farklı yeni jQuery uygulamaları;

Slidedeck - Interactive Presentation Slider

Slidedeck, ücretsiz olarak sunulan jQuery slider uygulamasıdır. Projelerinizi, web sayfanızdaki önemli makale veya haberleri Slidedeck ile yayınlayabilirsiniz.

Visual Lightbox

Visual Lightbox, jQuery ile yapılan resimler için hazırlanmış bir tooltip uygulamasıdır. Sayfanızda bulunan resimleri ziyaretçi tıklandığında anında bir tooltip açılarak resmin orjinal halini görebilir.

DropCaptions

Resimlerinizin altına notlar eklemek isteyenler için hazırlanmış çok kullanışlı bir jQuery tooltip uygulaması. Resimlerin üzerine gelindiğinde aşağı sarkan kutuya resim hakkında açıklama yapabilirsiniz.

TextMorph

TextMorph, herhangi bir yazı metnini farklı şekiller ile ekranda görüntüleyebilir. Kare, daire, dikdörtgen vb. gibi birçok şekli elde etmek mümkün.

Timeago

Facebook'ta "x kişisi 3 saat 5 dk. önce şunu yaptı" şeklinde bulunan uygulamanın aynısı. Bu sayede web sitenizde kişilerin neyi ne kadar zaman önce yaptığını rahatlıkla hesaplayabilirsiniz.

AutoSuggest

AutoSuggest, gelişmir bir jQuery arama uygulamasıdır. Tamamlama özelliği ve farklı birkaç kelimeyi seçme özelliği bulunmakta.

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynak ; jquery.com

Bu yazı Kaashef 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 buton Uygulamaları

Kaashef — Tue, 23 Feb 2010 07:43:00 GMT

Realistic Hover Effect With jQuery | Demo

Bu uygulama ile web sitenizdeki butonları hareketli hale getirebilirsiniz. Reflection ve Shadow şeklinde 2 farklı demosu bulunmakta.

Create an Animated Call to Action Button | Demo

Artık sing up butonları faklı olacak. Bu jQuery uygulaması ile butonları kararıp sönen veya farklı renklere şeffaf geçiş yapabilen bir özellik kazandıramanız mümkün.

Jquery Animated Buttons using CSS | Demo

Bu uygulama ile web sitenizde bulunan butonları hareketli hale getirebilirsiniz.

Fancy Radio Buttons With jQuery | Demo

Fancy Radio Buttons, alışveriş siteleri için yapılmış bir jQuery buton uygulamasıdır. Ürünlerinizi paket halinde kullancıların seçmesini sağlar.

Glowbuttons Using jQuery | Demo

Klasik butonların aksine bu butonlar animasyonlu. jQuery ile yapılan bu butonlara farklı efektler vererek ziyaretçilerinizin ilgisini daha fazla çekebilirsiniz.

jQuery UI Buttons | Demo

jQuery UI Buttons, çok amaçlı bir jQuery button yöneticisidir. Web sitenizdeki butonların tümünü bu uygulama ile değiştirebilir ve birbirinden farklı özelliklerini kullanabilirsiniz.

iToggle for jQuery | Demo

iToggle ile web sitenizdeki radio butonları aç-kapa şekline dönüştürebilirsiniz.Radio Button'un görünür olup olmaması veya görsellik tamamen sizin elinizde. Ayrıca sadece on-off şeklinde değil farklı biçimlerde de uygulanabilir.

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynak ; jquery.wisdomplug

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

Harika Bir Görsel Sunum Eklentisi: YoxView!

Kaashef — Wed, 21 Apr 2010 06:42:00 GMT

Eğer web sitemizde resim veya fotoğraf gibi görsel içerikleri barındıyorsak, görsel içeriğimiz ne kadar etkileyici olursa olsun, içeriğimizi ziyaretçilerimizi etkiyececek bir sunumla yani; başarı hedeflerimize/kıstaslarımıza ulaşma yolunda bir katalizör görevi görecek janjanlı bir ambalaj ile sunmamız gerekir.

Web sitenizdeki görsellerinizi hem kullanımı kolay hem de oldukça etkileyici bir şekilde sunmanızı sağlayacak bir JQuery Görsel Sunum Eklentisi olan YoxView, ücretsiz ve kolay uygulanabilir olması ile beğeninizi kazanacak bir eklenti.

YoxView, animasyon destekli gösterim, otomatik veya manuel olarak görsellerin sunulabilmesi, klavye tuşları ile yönetilebilme, popüler tüm tarayıcıları desteklemesi ve Flickr ve Picasa'daki görselleri gösterebilme gibi daha birçok özelliği bizlere sunmakta.

Web projelerinizde kullanmak üzere arşivinizde mutlaka bulunması gereken YoxView eklentisi için hazırlanmış sayfaya buradan ulaşarak, demo gösterimini deneyebilir ve buradan da indirebilirsiniz.

[Bonus++++++]
*+250 Business Cards from PrintRunner: Winners Announced
+Web Sitelerini Aramadan Keşfedin!
+Ortaya Karışık Beslemeler
+Yerel Sosyal Ağların Yükselişi
+En Büyük Kim: Google'mu, Yahoo'mu, Bing'mi
+Bing API ile Kendi Arama Motorunu Kendin Yap
[Kaynak] YoxView
[Paylaş] Sosyal Medya paylaşım sayfası burada!
[algoz Takip Noktaları]
Blog FF Twitter Facebook Buzz E-posta RSS Mobil iPhone

10-30/04/2010

Algoz Desteğinizi Bekliyor...

2010 Blog Ödülleri için beni desteklemek isterseniz; buradan kayıt olduktan sonra, buradan teknoloji kategorisinde yarışmakta olan bloguma (algoz.bildirgec.org / profil) oy verebilirsiniz.

Şimdiden Teşekkürler...

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

Blogunuz İçin 15+ Kullanışlı Widget

Kaashef — Sat, 13 Jun 2009 12:31:00 GMT

Birçok blogda farklı ve güzel widget'leri görüyoruz. Aşağıda haber, sohbet, rss okuyucu gibi widget'ler yer almaktadır.

Aşağıdaki işinize yarayabilecek birbirinden güzel widget'leri kullanabilir, blogunuzu daha kullanışlı ve çekici hale getirebilirsiniz.

1. wowzio

Wowzio'nun galeri widget'i blogunuzdaki bütün resimleri otomatik bulur ve sizin için güzel resim galerileri oluşturur.

2. shoutmix

Başkalarıyla anında etkileşime olanak sağlayan mesajlaşma sistemidir.

3. clearspring

İçeriğinizi sosyal ağlara eklemek için kullanabileceğiniz faydalı bir widget.

4. wireclub social rooms

Oda oluşturun, arkadaşlarınızla paylaşın, websitenize veya blogunuza ekleyin.

5. eurekster swicki

Websiteniz veya blogunuz için kişiselleştirilmiş arama portalı oluşturun.

6. springwidgets

Myspace, facebook ve bebo gibi sosyal ağlarda bulunan profilleriniz için birden çok rss okuyucusu oluşturabilirsiniz.

7. monitter

twitter izleyicisidir. i̇nsanların sizin hakkınızda söylediklerini görebilirsiniz.

8. radar url

Siteniz için eş zamanlı radar istatistikler.

9. widgipedia

Özel web ve masaüstü widget'i.

10. blogupp!

Etkin blog widget'i ve blogunuzu pazarlamak için dizine otomatik ekler.

11. plugoo

Sohbete dayalı çeşitli iletişim araçları.

12. gwt-ext

gwt-ext, tablo sayfalama, filtreleme gibi zengin araçları sunan güçlü bir widget kütüphanesidir.

13. magtoo

Büyük dünyanız..

14. feedwind

Rss besleme widget'i

15. widgiland

Sosyal ağ widget'i

16. blipback

Video yorum widget'i

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

web geliştiricileri için en iyi 50 firefox eklentisi

gmail'de işinizi kolaylaştıracak 3 gadget

20 en iyi wordpress eklentisi (nisan 2009)

web geliştiricileri için 8 jquery ve ajax tabanlı etiket bulutu yapımı

100+ hayrete düşürücü ücretsiz wordpress teması (2009)

Sitenize eklemeniz için 5 jquery ve ajax sosyal imleme widget dersi

25 önemli web tasarım aracı

kaynak: colorburned.com | pelfusion.com
diğer yazılarım

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

Bilgisayarınıza İndirebileceğiniz 10 Ücretsiz GIF Animatör Programı

Kaashef — Fri, 05 Jun 2009 06:44:00 GMT

Birbirinden güzel gif animasyonlar hazırlayabileceğiniz ücretsiz programlara aşağıdan ulaşabilirsiniz.

1 - Advanced GIF Animator

Gif resimleri hazırlayabileceğiniz güçlü bir araçtır. Win 95/98/Me/NT/2000/XP/2003/Vista işletim sistemlerinde çalışmaktadır.

İndirin: Advanced GIF Animator

2 - Ulead GIF Animator

Sektörün en güçlü ve en uygun fiyatlı aracıdır. Web sitesiniz için veya sunumlarınız için animasyonlar hazırlayabilirsiniz. Çeşitli metin efektleri ile birbirinden güzel çalışmalar yapabilirsiniz.

İndirin: Ulead GIF Animator

3 - CoffeeCup GIF Animator

Web sayfaları için kolayca gif oluşturmanızı sağlar. Sadece bir kaç adımda geniş animasyonlar yapabilirsiniz.

İndirin: CoffeeCup GIF Animator

4 - Easy GIF Animator

Animasyonlu resim, afiş, düğme oluşturabileceğiniz güzel bir program. Özel yetenekleri sayesinde çarpıcı görsel efektler ekleyebilirsiniz.

İndirin: Easy GIF Animator

5 - EximiousSoft GIF Creator

Dakikalar içerisinde yüksek kalitede animasyonlar oluşturabilirsiniz. Çok güçlü bir animasyon aracıdır.

İndirin: EximiousSoft GIF Creator

6 - IconCool GIF Animator

Size tam bir paket sunan bu program ile web siteleriniz için etkileyici animasyonlar yapabilirsiniz.

İndirin: IconCool GIF Animator

7 - GIF Movie Gear

Gif dosyalarınızı düzenlemek için kullanabileceğiniz güzel bir uygulamadır. 24-bit renk destekler.

İndirin: GIF Movie Gear

8 - DigiCel FlipBook

Kolay kullanıcı arayüzü sunan ücretsiz bir programdır.

İndirin: DigiCel FlipBook

9 - Microsoft GIF Animator

Web siteniz için kolayca animasyonlar oluşturabileceğiniz faydalı bir yazılımdır. Ek özellikleri ile çalışmalarınıza renk katabilirsiniz.

İndirin: Microsoft GIF Animator

10 - Artful GIF Animator

Web siteleri için çok güzel animasyonlar yapabilirsiniz. Çoğu grafik biçimini destekler.

İndirin: Artful GIF Animator

ayrıca aşağıdaki yazıda ilginizi çekebilir.

Eğlence Amaçlı 28 Online Fotoğraf Düzenleme Web Sitesi

kaynak: devsnippets.com|tutorialfeed.blogspot.com
diğer yazılarım

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

3D Studio MAX Dersleri

Kaashef — Sat, 02 May 2009 14:38:00 GMT

3ds Max (daha önceki ismi ile 3D Studio Max), Autodesk tarafından geliştirilen bir 3D modelleme, Görselleştirme ve Animasyon programıdır. MSDOS ortamında çalışan 3D Studio yazılımının devamı olan 3ds Max'in son sürümü, 2009 yılının Mart ayında çıkan 3ds Max 2010'dur.
Gelişmiş eklenti desteği ve kolay kullanımı ile 3ds Max, 3D modelleme yazılımları arasında en yaygın kullanıma sahip uygulamalardan biridir. Gelişmiş karakter modelleme özellikleri ile oyun geliştiricilerinin gözdesi haline gelmiştir. Film özel efektleri, mimari sunumlar ve endüstriyel tasarım sunumları gibi alanlarda da yaygın olarak kullanılmaktadır.

Aşağıda, grafik ve animasyon çalışmalarınız için size yardımcı olabilecek, 115 3D Studio Max dersini bulabilirsiniz.

3D Studio Max Hakkında
Yeni başlayanlar için Temel Modelleme

Basic Modelling for beginners

3D Studio Max Ders 1.1

3D Studio Max Lesson 1.1

Karakterler ile ilgili Dersler
Al Pacino Heykeli

The Making of Al Pacino Sculpt

Avcı

Making of “The Hunter”

Karikatür Ördek Modelleme

Modeling a Cartoon Duck

Küçük Rodeo

Young Rodeo

lulu

The Making of Lulu

Savaşçı

The Making of Warrior

Dinazor

Dinosaur

Son şövalye

The last knight

nesneler ile ilgili dersler
Bugatti

Making of Bugatti

Çapa

Anchor Box Modelling tutorial

Uçak modeli

Create airplane model

Sandalye

Making a Chair in 3ds max

Ekmek kızartma makinesi

Making of a Toaster

Altın Pırlanta Yüzük

Golden Diamond Ring tutorial

Lastik Modelleme

Tyre Modelling

Puzzle

Making puzzles with a picture on top

Nissan 350Z

Making of Nissan 350Z

bilgisayar kasası

Computer case modelling

Küllük

Classic Ashtray

Ahşap Tabure

Wooden Stool

Diş Fırçası

Realistic Toothbrush

Logo, Sembol, Simge ile ilgili dersler
Windows Logosu

Create a Windows-Like Logo

3d ikon

How to create an icon in 3D

neon

Creating a cool neon sign

Mimarlık, binalar ve Çevre ile ilgili dersler
Sarı ev

The Yellow House

kulübe

MAKiNG OF THE OLD SHACK

Dış alanlar - 2 - 3 - 4

Exterior Scenes

Ahşap / Beton WC

Making of Wood/Concrete WC

115 3d studio max dersinin tamamının görmek için buraya tıklayabilirsiniz.

3D Studio Max dersleri için kaynaklar:
OkTutorials.com
3dm3.com
9jcg.com
Cg-india.com
3dtotal.com
3d-tutorials.com
Techtut.com
Free3dtutorials.com

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

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

25+ Web 2.0 Oluşturucusu

Kaashef — Thu, 09 Apr 2009 06:46:00 GMT

Bazen müşterilerinizin bir gün içerisinde sonucunu görmek istediği projeler ile karşılaşabilirsiniz. Eğer siz de çabucak çizgili arkaplan, bir CSS menüsü ya da web 2.0 damgasına ihtiyaç duyuyorsanız, o zaman bu tip elementleri otomatik olarak oluşturabilen web tabanlı araçlar bazen zamanınızın dar olduğu anlarda hayat kurtarıcı olabilirler. Özellikle son dönemlerde bu tip otomatik oluşturucular, üzerinde çalıştığım bir fotoğraf galerisinde çok yardımcı oldular. Belki de siz her şeyi sıfırdan oluşturmayı seven bir tasarımcı olabilirsiniz. Ancak bu araçlar, ihtiyacınız olduğu zamanlarda kullanabileceğiniz, her zaman el altında bulunması gereken araçlar olarak yer imleriniz arasındaki yerini almalı.

1. Web 2.0 Oluşturucusu

Artık web 2.0 çağındayız. Bu web 2.0 geliştiricisi sayesinde yuvarlatılmış köşelere sahip XHTML/CSS anahatları oluşturabillirsiniz. Daha ne istersiniz ki? Sitenin oluşturduğu XHTML kodu ayrıca doğrulanabilir. Dilediğiniz renkleri seçebileceğiniz bu uygulama aracılığı ile sadece birkaç dakika içerisinde anahattınızı oluşturabilirsiniz.

2. Şerit Oluşturucusu

CSS/XHTML anahattınız var ve şimdi tek istediğiniz şeritli bir arkaplan. Sorun değil. Tek ihtiyacınız olan şey bu şerit oluşturucusunu kullanmak. Çok sayıda seçeneğe sahip olan bu uygulama ile dilediğiniz modelde şeritleri oluşturabilmeniz mümkün. Bunun yanısıra diğer kullanıcılar tarafından kullanılan şeritleri de kullanabilirsiniz.

3. Sekme Oluşturucusu

Sekmelerden hoşlanıyor musunuz? O zaman bu sekme oluşturucusu sizin hoşunuza gidecektir. Bu oluşturucu sayesinde sayfanın nasıl görüneceğine önceden bakabilir ve son değişiklikleri yaptıktan sonra "Download" bağlantısına tıklayarak PNG dosyasını alabilirsiniz. Bu kadar kolay.

4. Web 2.0 Damgaları

Diğer web 2.0 oluşturucularından elde ettiğiniz damgayı beğenmediğinizi ya da kullandığınız damganın rengini değiştirmek istediğinizi varsayalım. Bu oluşturucuyu kullanarak dilediğiniz tür damgayı kullanırsınız.

5. Düğme Oluşturucusu

Anahattınız, damganız ve sekmeleriniz hazır. Başka neye ihtiyacınız var? Belki de ücretsiz içeriklerin indirilebilmesi için ziyaretçilerin tıklayabileceği bir düğme. Buttonator adındaki bu uygulama ile web 2.0 düğmelerini oluşturabilirsiniz. Yazının devamında diğer düğme oluşturucularını da bulacaksınız.

6. Favicon

"Web sitesi simgeleri, kısayol simgeleri, URL simgeleri ya da yer imi simgeleri olarak da bilinen faviconlar, 16x16 piksel boyutlarında bir görsel olup bir web sitesinin genelinde ya da bir web sayfası üzerinde kullanılırlar". Eğer profesyonel bir web sitesi oluşturmak istiyorsanız, o zaman favicon gerekli bir elementtir. Bugüne kadar iyi bir tasarıma sahip, ancak favicon içermeyen pek çok profesyonel web sitesi gördüm. Bu oluşturucu sayesinde favicon'un nasıl göründüğünü doğrudan tarayıcınız üzerinde görebilirsiniz. Eğer bir görseliniz var ise, onu favicon'a da dönüştürebilirsiniz.

7. Ajaxload Web 2.0

Ön yükleyiciler oluşturmak için zaman harcamaktansa bu oluşturucuyu kullanabilirsiniz. Bu siteyi gerçekten seviyorum. Pek çok farklı tip ön yükleyici görselleri içeren bu web sitesi sayesinde ön yükleyicilerin renklerini ve arkaplanını değiştirebilirsiniz. Site ayrıca güzel bir tasarıma da sahip.

8. 3B Kutu Oluşturucusu

Bazı web siteleri bazen ücretsiz vektörler, photoshop fırçaları ve daha fazlasını ziyaretçilerine sunuyor. Sitede sunulan görselleri ise gerçekçi 3B kutular üzerinde yayımlayabiliyorlar. Bittbox Örneğine bir göz atın. Bu tip kutular Photoshop ya da diğer görsel düzenleyicileri ile oluşturulabilir. Ancak bu tip uygulamaları kullanmayı öğrenmektense neden web tabanlı ve kullanımı kolay olan bir uygulama kullanmayasınız? Kutu için 3 adet görseli (ön, arka ve yanlar) siteye gönderin ve bir dakika içerisinde bilgisayarınıza indirebilirsiniz. Rasgele bir resim seçerek oluşturduğum kutunun bir örneğini yukarıda görebilirsiniz.

9. Picmarkr

Eğer bir fotoğrafçı iseniz ya da sitesinde çok sayıda görsel bulunduran birisi iseniz ve insanların görsellerini çalmasını istemiyorsanız, o zaman görselleriniz üzerinde adınızın ya da sitenizin adresinizin yer almasını isteyebilirsiniz. Picmarkr'ın güzel yönlendiren birisi ise bilgisayarınızdaki görselin yanısıra facebook, flickr ve Facebook albümünüz üzerinden de görsellerinizi düzenleyebilirsiniz. Tıpkı yukarıdaki örnekte de olduğu gibi bu tip eklentiler de bilgisayarınıza kurulabilecek Photoshop türevi bir uygulama aracılığı ile yapılabilir ancak web tabanlı bu tip uygulamaları kullanmak daima çok daha kolaydır.

10. CSS Yuvarlatılmış Köşeler

HTML ve CSS ile kolayca yuvarlatılmış CSS köşeler oluşturun.

Ayrıca aşağıdaki oluşturucuları da deneyebilirsiniz

BGPatterns: Kullanışlı bir diğer motif oluşturucusu.
Fresh Generator: Web 2.0 düğmeleri, yuvarlatılmış köşeler, kutular ve çok daha fazlasını oluşturun.
Website Bandı Oluşturucusu
Ücretsiz Post-it Oluşturucusu: El yazısı ile yazılmış post-it notları oluşturun.
XHTML/CSS Sözdizimi Oluşturucusu: Eğer XHTML'de yeniyseniz ve XHTML'ye özgü sözdizimlerini sürekli unutuyorsanız, o zaman bu araç size yardımcı olacaktır.
Yansıma Oluşturucusu: Eğer bir görselinize modern web sitelerinde gördüğünüz o hoş yansıma efektlerini uygulamak istiyorsanız, o zaman bu oluşturucuyu kullanabilirsiniz.
Genfavicon: Diğer bir favicon oluşturucusu.
Web 2.0 Logo Oluşturucusu: Web 2.0 tarzında logoları kolayca oluşturun.
Şerit Tasarımcısı
Ekose Oluşturucusu: Şeritleri boşverin, sitelerinizde ekose kullanın. Bu oluşturucu sayesinde kolayca ekose desenleri oluşturabilirsiniz.
Ücretsiz Altlık Oluşturucusu: FreeFooter, web sitenizin ya da blog sayfanızın altlık (footer) kısmını özelleştirebilmenizi sağlıyor.
Fresh Badge: Diğer bir fırça oluşturucusu.
Cool Text: Ücretsiz grafik ve düğme oluşturucusu.
Renk Şeması Oluşturucusu: Bu renk sihirbazı sayesinde mükemmel renk uyumuna sahip web siteleri oluşturabilmek için kullanabileceğiniz renk şemaları oluşturabilirsiniz.
WebFX: Web tabanlı grafik efekti oluşturucusu sayesinde dilediğiniz herhangi bir görseli siteye yükleyebilir ve pek çok efektten dilediğiniz birisini seçebilirsiniz.
Dotetemplate: Bir web sitesinin tamamını bu oluşturucu ile oluşturabilirsiniz.
Avatar Generator: Avatar oluşturucusu.

Bu yazı Kaashef 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 Sitenizi Yayımlamadan Önce Yapmanız Gereken 15 Önemli Kontrol

Kaashef — Fri, 10 Apr 2009 06:45:00 GMT

Web sitenizin tasarımı hazır, içerik yönetim sistemi muhteşem çalışıyor, içerik siteye eklendi ve müşteriniz son derece memnun. Artık sitenizi yayımlamanın vakti geldi. Yoksa gelmedi mi? Bir web sitesini yayımlarken genellikle onu yayımlamak için duyduğunuz sabırsızlık nedeniyle birkaç önemli noktayı atlarsınız. Bu yüzden sitenizi dünyaya duyurmadan önce yapılması gerekenleri içeren bir kontrol listesi bulundurmanız ve onu her yeni web sitesini yayımlamadan önce kontrol etmeniz, sitenizin geleceği ve kalitesi açısından önemlidir.

Bu makalede, bir websitesi resmiyete kavuşmadan önce kontrol edilmesi gerekenlerin bir listesini bulacaksınız. Makale içerisinde genellikle unutulan küçük ayrıntılar yer alıyor ve bunlar zamanında yapıldığı taktirde hem sizin daha az zamanınızı alacaktır, hem de genel olarak kullanıcı deneyimine olumlu katkıları olacaktır.

1. Favicon

Favicon bir web sitesini sekme ya da pencre üzerinde tanıtmaya yardımcı olur. Faviconlar genellikle bir web sitesinin yer imlerine eklenmesi durumunda da adres ile birlikte istemci üzerine kaydedilir. Ancak bundan emin olmak için aşağıdaki kodu sitenizin head etiketleri arasına yerleştirmeniz gerekir.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Eğer iPhone için bir favicon kaydetmek istiyorsanız, o zaman aşağıdaki kodu da eklemelisiniz.

<link rel="apple-touch-icon" type="image/x-icon" href="/favicon.ico" />

2. Başlıklar ve Meta Verisi

Sayfanızın başlığı SEO (Arama Motoru Optimizasyonu) için en önemli elementtir. Bunun yanısıra kullanıcılarınızın ziyaret ettikleri sayfada ne olduğunu anlamaları açısından da önem taşır. Sayfa başlığının her bir sayfada değişmesine ve sayfa içeriği ile alakalı olmasına özen gösterin.

<title>Web Sitenizi Yayımlamadan Önce Yapmanız Gereken 15 Önemli Kontrol | bildirgec</title>

Meta description (açıklama, tanımlama) ve keyword (anahtar kelime) etiketleri SEO için artık çok önemli olmasa da (en azından en çok kullanılan arama motorları için), siz yine de onları sayfanıza eklemeye özen gösterin. Her bir sayfada açıklamanın değiştiğine ve sayfanın içeriği ile alakalı bir açıklama olması gerektiğine dikkat edin zira genellikle bu açıklama, Google'nin arama sonuçları sayfasında göstereceği şey olacaktır.

3. Çapraz Tarayıcı Kontrolleri

Tasarımınızın mükemmel göründüğünü düşündüğünüz anda onu Internet Explorer üzerinde kontrol ettiğinizde öyle olmadığını anlayacaksınızdır. Web sitenizin farklı tarayıcılarda aynı şekilde görünmesi oldukça önemlidir. Her şey %100 aynı olmasa bile en azından ana işlevselliği korunmalıdır ve kullanıcı herhangi bir problemin varlığını sezmemelidir. Kontrol etmeniz popüler tarayıcılar Internet Explorer 6, 7 ve 8, Firefox 3, Safari 3, Chrome, Opera ve iPhone olmalıdır.

4. Yazım Denetimi

Her şeyi okuyun. Eğer daha önce okumuş olsanız bile tekrar okuyun. Bir başkasına da okutun. Genellikle bu kontroller sırasında hatalı olan şeyleri fark edecek ve onları değiştirmek isteyeceksinizdir. Sitenizdeki metni içerik konusuna hedefleyerek onu az tutmayı deneyin. Uzun metin bloklarını daha kısa paragraflara bölün. Yazı genelinde başlıklar kullanın ve listeler kullanarak okurlarınızın kolay bir şekilde içeriğinizi tarayabilmesini sağlayın. Uyarı kutuları gibi dinamik metinleri de unutmayın.

Onlarsız Yapamayacağınız 20 Tipografi Uygulaması

5. Bağlantılar

Tüm bağlantılarınızın çalışacağını sanmayın. Onlara tıklayın. Harici web sitelerine bağlantı verirken bağlantıların başına "http://" eklemeyi unutmuş olabilirsiniz. Bağlantılar sayfadaki metnin geri kalanından daha ön planda olmalıdır. Bağlantı olmayan bir metnin altını çizmeyin zira bu kullanıcının kafasını karıştıracaktır. Ziyaret edilmiş bağlantılarınız için de ayrı bir stil uygulamayı ihmal etmeyin.

Buraya Tıklamayın! Bağlantıları Doğru Kullanmak

6. İşlevsellik Kontrolü

Sitenizdeki her şeyi derinlemesine kontrol edin. Eğer bir iletişim formunuz var ise, kendinize bir mesaj göndermeyi deneyin ve kullanıcıların ne ile karşılaşacaklarını kendiniz görün. Sitenizi başkalarınızın test etmesini sağlayın. Sadece arkadaşlarınızın ya da diğer aile üyelerinizin değil, web sitenizin hedeflediği pazar alanındaki kişiler tarafından test edilmesini sağlayın. Arkanıza yaslanın ve bir kullanıcının sitenizi nasıl kullandığını izleyin. Bir başkasının sitenizi kullanma şeklini gördükten sonra sizin sandığınızdan ne kadar farklı olduğunu anladığınızda çok şaşıracaksınız. Kontrol edilmesi gereken şeyler arasında iletişim formları, arama özellikleri, alışveriş sepetleri ya da giriş alanları yer almalıdır.

7. Sorunsuz İndirgeme

Web siteniz JavaScript'in etkin olmadığı tarayıcılar üzerinde de çalışmalıdır. Kullanıcılar genellikle güvenlik için JavaScript'i kapatırlar, bu yüzden buna hazırlıklı olmalısınız. JavaScript'i Firefox üzerinde kolayca etkisizleştirebilirsiniz. Formlarınızı kontrol ederek JavaScript'in etkin olmadığı durumlarda bile sunucu tarafflı kontrollerden sorunsuzca geçtiğini ve güzel görünümlü AJAX parçalarını kontrol edin ve JavaScript etkin olmadığında bile bunun sitenizin genel kullanılırlığını engelleyip engellemediğini inceleyin.

Website Ziyaretçilerinizin İlk İzlenimini Etkileyen 21 Faktör

8. Doğrulama

100% doğrulanmış bir web sitesini hedeflemelisiniz. Her ne kadar doğrulanmamış bir web sitesi dünyanın sonu olmasa da sitenizin doğrulanmamasına sebep olan hataları bilmek ve o can sıkıcı hataları giderebilmek, kodunuzun ve sitenizin kalitesi açısından da önemlidir. Sitenizin doğrulanmamasına sebep olacak hatalar arasında alt etiketi içermeyen görseller, kapanış etiketleri kullanılmaması ve & yerine & kullanılmamış olması.

9. RSS Bağlantıları

Eğer web siteniz bir bloga ya da haber akışına sahipse, kullanıcılarınızın abone olabilecekleri bir RSS bağlantısı olmasına özen gösterin. Kullanıcılarınız RSS beslemelerini kolayca bulabilmelidir. Aşağıdaki kodu sitenizin head etiketleri arasına eklerseniz, destekleyen tarayıcılarda adres satırının hemen yanında standart RSS simgesi görünecektir ve kullanıcılarınız o simgenin üzerine tıklayarak sitenize abone olabilirler.

<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

10. Analiz

Sitenizin ziyaretçi istatistiklerini takip edebileceğiniz bir tür site analiz aracı kullanmak, sitenizin ne kadar başarılı olduğunu ve hedeflerinizin ne kadarının gerçekleştiğini anlamanız açısından önemlidir. Günlük tekil ziyaretçişleri, aylık sayfa gösterim sayılarını ve tarayıcı istatistiklerini takip edin. Tüm bu veriler sitenizin yayında olduğu ilk günden itibaren takip edilmelidir. Google Analytics pek çok web sitesi sahibi arasında popülerdir. Kullanabileceğiniz diğerleri ise Clicky, Kissmetrics (halen kapalı beta formunda), Mint ve StatCounter gösterilebilir.

11. Sitemap

Sitenizi barındırdığınız sunucunun ana dizini üzerine (sitenizin ana sayfasının bulunduğu dizin) sitemap.xml dosyası eklemeniz durumunda arama motorları sitenizi daha kolay bir şekilde arşivleyebilecektir. Bu dosyanın içeriği, sitenizdeki tüm sayfaların adreslerinden oluşmaktadır. XML-Sitemaps web sitesi, sizin için kolayca sitemap.xml dosyasını oluşturacaktır. Bu dosyayı oluşturduktan sonra ilgili dosyayı sitenizin ana dizinine yüklemelisiniz, bu sayede dosyanın adresi http://www.sitenizinadresi.com/sitemap.xml olmalıdır.

Eğer WordPress kullanıyorsanız, Google XML Sitemap Eklentisi sayesinde siz ne zaman blogunuza yeni bir yazı yazarsanız, ilgili eklenti sitemap dosyanızı otomatik olarak güncelleyecektir. Ayrıca sitenizi ve sitemap adresinizi Google Webmaster Araçlarına eklemeyi unutmayın. Bu araç Google'ye bir sitemap sahibi olduğunuzu söyler ve ardından ilgili araç aracılığı ile sitenizin en son ne zaman Google tarafından arşivlendiği ve sitenizdeki hangi sayfaların Google tarafından erişilemediği gibi bilgilere ulaşabilirsiniz.

12. Koruyucu Tasarım

Genellikle pek üzerinde durulmayan koruyucu tasarım elementi 404 sayfasıdır. Eğer bir kullanıcı siteniz üzerinde bulunmayan bir sayfayı ziyaret ederse, 404 sayfası görüntülenir. Bu, pek çok farklı sebep yüzünden olabilir. Bu sebepler arasında bir başka web sitesinin sitenizde yer almayan bir sayfaya bağlantı vermesi sonucu olabilir. Kullanıcılarınızı ana sayfaya yönlendiren bir 404 sayfası oluşturarak kullanıcılarınızı sitenizde tutabilirsiniz. Ayrıca ziyaretçilerinizi alakalı sayfalara da yönlendirmeyi tercih edebilirsiniz.

Bir diğer koruyucu tasarım tekniği ise formunuzun doğrulanıp doğrulanmadığını kontrol etmektir. Form alanlarınıza alışılmışın dışında veriler girerek (örneğin çok fazla sayıda karakter, numara alanlarına harf girmek vs) formuzun çalışıp çalışmadığını ve bir hata vermesi durumunda ise kullanıcılarınızın bu sorunu giderebilmeleri için neler yapması gerektiği konusunda bilgilendiren bir mesajın belirip belirmediğini kontrol edin.

13. İyileştirin

Web sitenizin en yüksek performansta çalışmasını istersiniz. Bunu siteniz yayımlandıktan sonra düzenli olarak kontrol ederek gerçekleştirebilirsiniz ancak siteniz yayımlanmadan önce de kontrol etmeniz gereken bazı şeyler vardır. HTTP isteklerini azaltmak, CSS sprites (hareketleri) kullanmak, görsellerinizi web için optimize etmek, JavaScript ve CSS dosyalarınızı sıkıştırmak gibi önceden alabileceğiniz tedbirler, sitenizin daha hızlı açılması ile sonuçlanacak ve ayrıca sunucunuza daha az yük getirecektir.

Ayrıca, kullandığınız yayımlama motoru ile değişmekle birlikte, daha ciddi tedbirler almayı da deneyebilirsiniz. Örneğin, eğer WordPress kullanıyorsanız, caching adı verilen ve dinamik sayfaları önceden işleyerek onları HTML biçimine dönüştüren ve bu sayede sunucunun işlemcisini çok daha az yoran eklentileri kullanmayı deneyebilirsiniz. WP-Cache eklentisi bu alanda işinizi görecektir.

14. Yedekleyin

Eğer web siteniz bir veritabanı üzerinden çalışıyorsa, o zaman bir yedekleme stratejisine ihtiyacınız olacaktır. Yoksa verilerinizi kaybettiğiniz gün geldiğinde, neden verilerimi yedeklemedim diye kendi kendinizi yer bitirirsiniz. Olmaz demeyin, oluyor. Eğer WordPress kullanıyorsanız, WordPress Veritabanı Yedekleme Eklentisini kullanın. Eklenti sayesinde sitenizin düzenli olarak yedeğinin alınmasını sağlayabilir, ve bu yedeklerin elektronik posta adresine gönderilecek şekilde ayarlayabilirsiniz.

15. Yazdırma Stil Şablonu

Eğer bir kullanıcı web siteniz üzerindeki bir sayfayı yazdırmak istiyorsa, o kullanıcının sitenizdeki gezinti elementleri ya da harici tasarım elementlerinin kağıt üzerinde görünmesini istememe, sadece içeriğin görünmesini isteme ihtimali oldukça yüksektir. İşte bu yüzden yazıcılar için bir stil şablonu oluşturmak önemlidir. Ayrıca yüzen elementler gibi bazı CSS elementleri, yazıcı çıktısı üzerinde güzel görünmezler.

Bilgisayarların yazıcı çıktısı alınması sırasında otomatik olarak algılayacakları bir stil şablonu oluşturmak için aşağıdaki kodu sitenizin head etiketleri arasına yerleştirmeniz yeterlidir.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Koddan da anlayacağınız üzere yazdırma stil şablonunuzu print.css üzerinde oluşturmalısınız.

Kontrol Listesini İndirin

Kısa bir süre önce Dan Zambonini, bir web sitesi hem yayımlanmadan önce hem de yayımlandıktan sonra yapılması gereken kontrolleri içeren oldukça detaylı bir kontrol listesi hazırladı. Diğer şeylerin yanısıra Ultimate Website Launch Checklist, içerik ve stil ile alakalı kontrolleri, standartlar ve doğrulamayı, arama motoru görünürlüğünü, işlevsellik testini, güvenlik ve risk oluşumlarını, performansı ve pazarlamayı da içeriyor.

İlgili kontrol listesinin pdf sürümü de bulunuyor. Bu kontrol listesi özellikle gündelik projeleriniz üzerinde oldukça faydalı olmasının yanısıra siteniz yayımlandıktan sonra hatalarla karşılaşma olasılığınızı da en az seviyeye indirecektir.

Ayrıca David Leggett'in hazırladığı Hızlı Kullanılabilirlik Kontrol Listesi'ne de bir göz atmak isteyebilirsiniz. Bu liste, özellikle tasarımcıların projelerini tasarlarken, kullanılabilirlik ve erişilebilirlik kontrolleri için yapmaları gerekenleri içeriyor. Her ne kadar bu listedekilerin hepsi her web sitesi için geçerli olmasa da, sitenizi tasarlama aşamasında bir göz atmanızda fayda var.

Sizin Listeye Eklemek İstediğiniz Diğer Kontroller Neler?

Kendinize bir yapılacaklar listesi oluşturun ve herhangi bir web sitesini hazırlamadan önce ona bir göz atın. Yukarıdaki listede yer almayan ve sizin de listeye eklemek istediğiniz herhangi bir kontrol öğesi var mı? Yorumlarınızla paylaşın.

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

ipucu balon uygulamaları

Kaashef — Fri, 10 Apr 2009 13:17:00 GMT

yaptığınız site tasarımlarında bir sözcük, bağlantı veya görsel öğe ile ilgili ek bir bilgi vermek isteyebilirsiniz. bunu doğrudan metin ile sağlamak yerine daha dekoratif, daha profesyonel teknikler mevcut. bu tekniklerden biri de ipucu balonları. her ne kadar pek balon gibi gözükmeseler de bu uygulamalardan 11'i şurada listelenmiş.

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

konuyla ilgili inceleyebileceğiniz diğer yazılar:

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