bildirgec.org - programmer - beğendikleri

jQuery Scrollable ile Web Sayfalarını Hareketlendirin!

programmer — Mon, 10 Aug 2009 12:09:00 GMT

Portfolio'nuzun veya farklı bir içeriğinizin sunumunu yapabileceğiniz harika bir eklenti olan jQuery Scrollable, kendisini web sayfanıza, beğeninize uygun olarak kolayca eklemeniz için birçok özelleştirilebilir özellik de sunmakta.

Web sayfanızda bulunmasını istediğiniz içerikleri jQuery Scrollable aracılığı ile yatay veya dikey olarak kayabilen bir "bant"a yerleştirebilirsiniz. Bu şekilde hem sayfalarınıza sadelik kazandırabilir hem de kullanıcılarınıza kullanımı kolay bir ortam sunabilirsiniz.

Demosunu ve gerekli bilgileri buradan öğrenebileceğiniz jQuery Scrollable eklentinisini yine aynı sayfadan indirebilirsiniz.

Bonus+++++:
+Portfolio için 13 Adet Muhteşem Wordpress Teması
+15 Adet Dolu Dolu jQuery Kaynak Sitesi
+Layouts için 6 Adet jQuery eklentisi
+jquery ile hoş bir Hover Effect'i
+en iyi 10 jquery slider eklentisi

Kaynak: jQuery Scrollable
algoz: Blog FriendFeed Twitter Facebook Email RSS

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

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

+20 Harika Flash Resim ve Fotoğraf Galerisi

programmer — Mon, 16 Mar 2009 14:48:00 GMT

resim ve fotoğraf galerileri konusunda hem javascript hem css hem flash teknolojilerini sıklıkla kullananlarımız vardır. bu yüzden favori seçeneğim olan flash galerileri konusunda ek bir kaynak olarak bu bildiriyi yazmak istedim.

daha önce yazdığım javascript resim galerisi, flash resim galerisi ve hollanda kökenli şu sitede bulduğum html ve flash örneklerini hala çok beğenmekle beraber flash teknolojisini kullanan +20 flash galerisini daha uzun uzun inceleyeceğinizden eminim.

%100 ücretsiz olan flashgaleri örneği daha önce bildirgec'te incelenmiş ve büyük beğeni almıştı. 11kb'lık boyutu da dikkat çekici.

tonyyoo'nun sayfasında da güzel bir flash galeri örneği var, demosunu izleyebilir direkt olarak indirebilirsiniz.

dezinerfolio sitesindeki flash galeri çalışmasında Flickr , Picasa desteği bulunmak, galeriyi izleyenlere printscreen tuşunu kullanıp kullanmamasına karar vermek, arkaplan müziği (mp3) ekleyebilmek gibi önemli özelliklerin bulunması yanında ücretsiz olması da ayrı bir güzellik.

yine hollandadan bir site. paulvanroekel in sitesinde cidden güzel örnekler var. picasa desteği olan bu örnek benim çok hoşuma gitti ancak ana sayfasında önemli "framework"leri kullanarak yapılmış yüklemeye izin veren çalışmalar bulunmakta. bu örnek aslında kendi içinde birçok örnek barındırıyor. çok detaya girmek istemiyorum ancak incelemeye değer bir site.

kart biçimli flash galerisi için ilgili sayfasına gidebilir galeri dosyasını çekebilirsiniz.

harici bir xml dosyasını kullanarak dinamik resim yükleme gibi bir işlem yapacaksanız, klasikleşmiş polaroid flash galerisi işinize yarayacaktır. yanılmıyorsam daha önceki flash galeri örnekleri içerisinde en çok beğenilen tarz polaroid idi...

basit sade ve işlevsel bir galerim olsun istiyorsanız photo viewer tam size göre. 3 seçenekli arka plan rengi var. (sitede ek olarak ipod şeklinde mp3 player da bulunuyor.)

flcarousel sitesinde 2 tür örnek var, flip ve carousel. ancak sitenizi ilk ziyaret edenler ilk etapta kullanmakta zorluk çekebilirler. klavye ayarları bulunmakta.

flash-gallery sitesinde 4 çalışma var. mega pack haricinde diğerlerinin ücretsiz versiyonları bulunmakta. stack-photo versiyonu polaroid örneğine benziyor. incelenmeye değer bir site.

simpler viewer da gayet hoş ve tanıdık bir stile sahip. indirebilir, uygulama detaylarına ilgili sayfasından bakabilirsiniz. 17 kb gibi bir boyutu var.

tiltviewer da gerçekten beğendiğim özgün bir uygulama. basit bir mantığı var ve hızlı bir uygulama. nasıl çalıştığına bakabilir, bilgisayarınıza indirebilirsiniz.

autoviewer ücretsiz bir flash galerisi. sitenizi ziyaret edenler açısından bakıldığında kullanımı en kolay olan galerilerden birisi olduğunu düşünüyorum. uygulama sayfası gayet hızlı çalışıyor.

postcardviewer adından anlaşılacağı üzere posta kartları şeklinde saçılmış bir ekran görüntüsü vermekte. eğlenceli...

flashimagegallery de yine basit bir flash galeri ancak pop-up da açtırma özelliği bulunuyor. çoklu galeri ve tekli galeri versiyonları var. indirme sayfasında güncellemelerden haberdar olabilmeniz için e-posta adresinizi de istiyorlar ama vermeden de indirebilirsiniz.

ücretsiz, esnek bir diğer flash galerisi de flashgallerygenerator 2 tür çalışma versiyonu bulunuyor, birinde mp3 ekleme şansınız bulunmakta. ayrıca fotoğraflarınızı watermark denilen kendi damganızı basma olanağı da sunuyor.

agilegallery picasa ile entegre olarak çalışıyor ve xml kullanıyor. flash desteği yanında ajax desteği de mevcut.

ideaography ile çoklu flash galerileri oluşturmak için önce incelemek ve beğeninize göre indirmek gerekiyor bence.

flash-gallery sayfasında 3 değişik versiyonda galeri bulunuyor. indirme sayfasında eğer belli bir ücret öderseniz galeri üzerindeki linklerini kaldıracaklarını söylüyorlar, tercih sizin.

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

İyi Bir Web Sitesinin Sahibi Olması Gereken 15 Anahtar Element

programmer — Tue, 27 Jan 2009 18:55:00 GMT

Bir web sitesini tasarlarken ve geliştirirken göz önünde bulundurmak gereken pek çok ayrıntı vardır. Gerçekte bu ayrıntılar sonsuz bir listenin birer parçası gibi görünebilirler ancak listeye dikkatli bakıldığında bu elementlerden birkaçının diğerlerinden daha önemli olduğu ve bu elementlerin de en başarılı web siteleri tarafından kullanıldığı gözlenir.

Web sitenizin planlama aşamasını tamamladığınızda geriye kalan elementler Kullanıcı Arayüzü Tasarımı'ndan İçerik Oluşturmaya, oradan da geliştirme aşamasının kendisine kadar değişen geniş bir kategori yelpazesine yayılır. Elbette Arama Motoru Optimizasyonu (SEO) için de dikkat edilmesi gereken bazı ayrıntılar var ama şimdilik onu bir kenara bırakalım.

İşte en iyiyi hedefleyen her web sitesinin sahibi olması gereken 15 anahtar element.

1. İyi Görsel Tasarım
İlk olarak... Görsel tasarım. Sizi bilmem ama ben bir web sitesini ziyaret ettiğimde eğer site beni görsel olarak tatmin etmiyorsa o siteyi kısa sürede terk ederim.

Bunu derken her iyi web sitesinin görsel olarak güzel görünmesi gerektiğini söylemeye çalışmıyorum, ama eğer bir web sitesi 1994'ten beri güncellenmemiş gibi görünüyorsa, diğer mükemmel web sitelerinin yanında sönük kalacağı aşikardır.

Temiz ve sade bir tasarım genellikle ihtiyacınız olan tek şeydir. Sitenizdeki parıltılı nesneler de güzeldir ancak ben "az ama öz" teorisine inanlardanım. Tasarımınızın kalabalık olmasını istemezsiniz. Onun sadece güzel görünmesini, böylece rakiplerinizin önüne geçerek potansiyel müşterilerinizin dikkatini çekmesini istersiniz.

İlk izlenim önemlidir. Her ne kadar tek başına iyi bir tasarım bir kişiyi sitede tutmaya yetmese de, göz alıcı tasarımlar ziyaretçinin sitenizde daha uzun süre kalmasını sağlayacak, en sonunda da aradıkları içeriğe ulaşabilmek için daha fazla çaba sarfetmiş olacaklardır.

2. Düşünceli Kullanıcı Arayüzü

İyi tasarımla birlikte iyi bir kullanıcı arayüzü de gelir. Kullanıcı arayüz, başarılı işlevselliği olan sitelerin temelini oluşturur. Bir siteyi tasarlarken daima averaj kullanıcıyı göz önünde bulundurmalısınız. Sitenizi kimler ziyaret edecek - ideal müşteriniz kimler? Teknolojiye yatkınlar mı? Bilgisayar bilgileri iyi mi?

İdeal ziyaretçinizin bir görselini kafanızda canlandırmak ve siteniz için yapacağınız tasarımı planlandırırken bunu göz önünde tutmak daima yardımcıdır. Sitenizi ziyaret eden ziyaretçilerin birşey satın almadan ya da sitenize abone olmadan önce onların ihtiyacı olabilecek her şeyi sunduğunuzdan emin olun.

Navigasyonunuzun kolayca farkedilebilebilir olmasını ve site genelinde tutarlı bir şekilde kalmasını sağlamalısınız. Hem ana navigasyon üzerinde hem de içerik alanınızdaki bağlantılarda kullanıcının nereye tıklaması gerektiğini kolayca anlamalarını sağlayın.

3. Öncelikli navigasyonunuz görünebilir olsun
Gezinmesi kolay bir web sitesi sahibi olmanın bir bölümü, önceliğin navigasyonda olmasını sağlamakta yatar. Sitenizin anahtar bölümlerine bağlantılar içeren kesim, sitenizin ilk bakışta görünebilir alanında olmalıdır. Günümüzün büyüyen monitör boyutları göz önüne alındığında görünen kesim site tasarımınızın üst kısmındaki 500-600 piksellik kısma işaret ettiğini unutmayın.

Bu alan içerisinde yer alabilecek elementler logonuz (ki bu logo sitenizin ana sayfasına bağlantı içermelidir) ve bunun yanısıra sitenizin ana alanlarına bağlantılar olabilir. Bu kısmda eğer alt sayfalara bağlantı verebilirseniz çok güzel olur ancak çoğu durumda bu, tasarımınızın kalabalık olmasına yol açacaktır.

Örneğin "Ana Sayfa | Hakkında | Servisler | SSS | İletişim" bağlantılarını sitenizin en üst kısmında kolay bulunabilecek bir yere yerleştirebilirsiniz. Biyografi ve Özgeçmiş gibi alt sayfaları, sitenizin yan çubuğuna ya da dahil oldukları sayfa başlığının altına bağlantı olarak yerleştirebilirsiniz.

Burada önemli olan şey tutarlılıktır. Hem ana bağlantılarınızın hem de alt bağlantılarınızın sitenizin geneli boyunca aynı yerde olmasına özen gösterin.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

jQuery'nin En Pratik ve Yaratıcı 20 Kullanımı

4. Altlık Kısmında Navigasyonu Tekrar Edin
Eğer sitenizdeki ana navigasyon için görseller (ya da flash) kullanırsanız, sitenizin altlık kısmında navigasyon içeriğini tekrar etmeniz önemlidir. Sitenizin üst kısmında metin bağlantılar kullanıyor olsanız bile altlık kısmında bu bağlantıları yinelemeniz yardımcı olacaktır. Ziyaretçilerinizin sitenize baktıklarında aradıkları içeriğe kolayca ulaşabilmelerini sağlamalısınız.

Çoğu zaman altlık kısmı "Kullanım Sözleşmesi" gibi diğer bilgileri de içerebilir. Bu alanda bulunması kolay olması gereken ancak üst kısımdaki ana navigasyon bölümünde yer alacak kadar önemli olmayan bağlantıları listeleyebilirsiniz.

5. Anlamlı İçerik
"İçerik her şeydir" sözünü daha önce duymuşsunuzdur. İlk bakışta göze hoş gelen bir web sitesi sahib olabilirsiniz ancak o sitenin içeriği doyurucu değilse, ziyaretçinizin sitenizde uzun süre kalmayacağından emin olabilirsiniz.

Web siteniz için içerik yazarken şirketiniz, ürünleriniz, hizmetleriniz gibi öğeler hakkında yardımcı ve öğretici bilgiler sunabilmeniz önemlidir. Eğer bir blogunuz varsa, uzmanlık alanınıza yönelik bilgilendirici makaleler inanılmaz derecede yardımcı olacaktır.

Kendinizi ya da şirketinizi satmanız her ne kadar önemli olsa da, bunu ziyaretçilerinizin gözüne sokmamalısınız. Özellikle bloglarda blogunuzu ziyaret eden kullanıcıların daima sizin kişisel yaşamınız hakkında birşeyler okumak istediğini sanmayın - ziyaretçileriniz onlara nasıl yardımcı olabileceğinizi bilmek için oradalar.

6. Düzgün Hakkında Sayfası
Bu makalenin yazarının sitesindeki 10 popüler sayfası arasında (ana sayfadan, blogdan, 3 özel blog girdisinden ve portfolyo sayfasından sonra) Hakkında sayfası gelmektedir. İster inanın ister inanmayın, sitenin Hakkında bölümü, hizmetler ve portfolyo sayfalarından daha çok dikkat çekmektedir.

Bunun tek açıklaması vardır ki o da insanların meraklı olduğudur. İnsanlar bir şirketin ya da blogun ardında kimlerin olduğunu bilmek isterler. Ben biyografi sayfama kendi fotoğrafımı eklemek konusunda biraz utangaçtım, ancak birkaç ay önce en sonunda kendi fotoğrafımı ilgili sayfaya ekledim. Meraklılık hissinin neler yaptırabileceğine inanamazsınız. Şöyle bir baktığımda ben de kendimi sık sık bir tasarımcının ya da yazarın Hakkında sayfasını okurken buluyorum.

Kendi geçmişiniz ve bunun işinize ya da uzmanlık alanınıza olan etkileri hakkında bilgilerden bahsedin. Hakkında sayfası potansiyel müşterilerinize kendiniz hakkında biraz daha fazla bilgi verir ve sitenizin daha "kişisel" bir görünüme bürünmesini sağlar. Eğer yazınızı okuyorlarsa ve sizin hakkınızda biraz daha fazla şey bilmek istiyorlarsa, Hakkında sayfası sayesinde sizinle daha iyi bir bağ kuracaklar ve başka bir seviyede sizinle daha iyi iletişim kurabileceklerdir.

Potansiyel müşteriler genellikle, azıcık bile kişisel olmayı reddeden karaktersiz kurumların aksine arkasında "gerçek" kişilerin olduğu şirketleri seçerler.

7. İletişim Bilgisi

Sizinle nasıl iletişim kurabileceğini bulamamaktan başka hiçbir şey potansiyel müşteriyi bu kadar geri çekmez. Eğer hizmetlerinizle ilgileniyorlarsa ve sizinle iletişim kurup sizi kiralayabilecek basit bir sayfa dahi bulamıyorlarsa, kendinizi yarışmayı kaybetmiş olarak görebilirsiniz.

İdeal olarak tek bir iletişim yönteminden daha fazlasını vermek isteyeceksinizdir. En azından bir elektronik posta adresi ve iletişim formu. Sizi daha "gerçek" kılmak için ise bir telefon numarası ve eğer mümkünse bir posta adresi eklemeniz önerilir. Pek çok bireysel çalışanın (freelancer) evlerinden çalıştığını biliyorum, zira ben de öyleyim. Bu durumda ev telefonunuzu sitenizde yayımlamak istemeyebilirsiniz. Bu sebeple sadece iş görüşmeleri için kullanacağınız bir hat alarak ve bir posta kutusu kiralayarak bu sorunun önüne geçebilirsiniz.

Bu yöntemlerin vergiden düşülebildiğini ve sizi sitesinde sadece elektronik posta adresi sunanlardan çok daha profesyonel göstereceğini unutmayın. Aynı gemideki diğer evden çalışanlar için bu bir değişiklik arz etmeyecektir. Ancak eğer büyük boyutlu ya da kurumsal müşterilerle çalışırsanız, ulaşılabilir bir telefon numarası ve posta adresi, kararlılığın bir göstergesi olacak ve onların bir başkası yerine sizi tercih etmelerinde küçük bir rol oynayacaktır.

8. Arama
Eğer büyük bir web siteniz ya da blogunuz varsa, arama özelliği kullanmanız çok yardımcı olacaktır. Arama özelliği olmadan sitenizdeki yüzlerce sayfa arasında ziyaretçinizin aradığını bulmasını beklemek doğru olmaz. Eğer potansiyel müşteriniz aradıklarını bulamazsa, ancak bir başka sitede bulursa, sizin hizmetiniz daha iyi olsa bile "bulunamadığı" için potansiyel müşteriniz diğerini seçecektir.

Siteniz üzerinde Google Arama özelliğini kullanabilir ya da eğer WordPress (ya da diğer bloglama platformu veya içerik yönetim sistemi) kullanıyorsanı, bu platformlar genellikle bütünleşik arama motoru içerirler. Statik HTML sitesi üzerinde arama motoru inşa etmek her ne kadar kolay olmasa bile sizin için bunu yapabilecek servisler yok değil.

9. Kayıt / Abonelik

Eğer web siteniz düzenli olarak içerik sunuyorsa (örneğin bir blog), kullanıcılarınızın bu içeriğe kolayca abone olabilmelerini isteyeceksinizdir.

Eğer WordPress blogunuz var ise bu eklemesi gerçekten kolay olan bir başka özelliktir. Öntanımlı olarak WordPress üzerinde besleme (feed) adresi bulunur. Ancak eğer bu durumu kontrol altına almak istiyorsanız FeedBurner üzerinde ücretsiz bir hesap açabilirsiniz. Daha da iyisi FeedBurner FeedSmith eklentisini kullanarak blogunuzdaki tüm içeriğin otomatik olarak FeedBurner hesabınıza aktarılmasını sağlayabilirsiniz. Bu sayede içeriğinize abone olan kullanıcılar üzerindeki kontrolünüz artacaktır.

Eğer bir blogunuz yoksa ancak buna rağmen elektronik posta bildirileri için abonelik sunmak istiyorsanız örneğin, bunu sizin için sağlayacak pek çok şirket bulunuyor. Bu şirketler sitenize ekleyebileceğiniz ve bu sayede elektronik posta listeleri oluşturup onları yönetebileceğiniz bir kod sunarlar (bu arada FeedBurner da elektronik posta adreslerini toplamayı destekliyor). Bazı durmlarda elektronik posta adresleri RSS aboneliklerinden daha iyidir, zira potansiyel alıcılarınızın elektronik posta adreslerini depolayabilirsiniz. Abonelik sayılarının ve diğer genel istatistiklerin izini sürebilirken, RSS aboneliği olanlar güncellemelerinizi besleme okuyucuları aracılığı ile alabilir ve herhangi bir elektronik posta adresi vermek zorunda kalmazlar.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

10. Sitemap (Site Haritası)
İki tür site haritası bulunur - biri insanlar, diğeri arama motorları içindir. Bir HTML (ya da PHP vs.) site haritasın sitenizi ziyaret eden ziyaretçiler için paha biçilmez bir araç olabilir ziya bu sayede sitenizin içeriğinin genel bir görünümüne ulaşarak aradıklarını kolayca bulabilirler.

Bir web sitesindeki tüm sayfaların bir listesini oluşturan bir site haritası özellikle sitenize arama özelliği ekleyemediğiniz durumlarda çok kullanışlı olacaktır. Sitenizin altlık kısmına ekleyebileceğiniz bir diğer bağlantı da site haritası olabilir. İyi bir site haritası sitenizdeki her bir sayfaı hiyerarşik olarak listeleyerek sayfalar arasındaki ilişkileri ve onların alt ve alt-alt sayfalarını gösterir.

11. Tasarımı İçerikten Ayırın
Anahat ve tasarım için HTML tablosu kullandığımız günler geride kaldı. Günümüzde en iyi şekilde geliştirilmiş siteler XHTML ve CSS kullanarak tasarım elementleri ile içerik elementlerini birbirlerinden ayırıyorlar.

<div> etiketlerini kullanarak sayfanızdaki çeşitli metin ve görsel alanları için kapsayıcılar oluşturabilirsiniz. CSS dosyası kullanılmadığında tek göreceğiniz şey metindir, ki bu tam da arama motorlarının görmek istediği şeydir.

Harici bir CSS dosyasına bağlantı vererek içeriğinizi tasarımdan ayırabilirsiniz. Bu sayede HTML sayfanızın kaynak kodunda metinden başka neredeyse başka hiçbir şey yer almaz. Ayrı bir CSS dosyası yazıtiplerini, renkleri ve arkaplan görselleri gibi site tasarımınızı ilgilendiren elementleri içerirler.

İşin bir diğer güzel yanı ise sadece bir CSS dosyası üzerinde güncelleme yaparak sitenizin tamamında görsel değişkliğe gidebilecek olmanız. Bu sayede örneğin ana bağlantı renginizi maviden yeşile dönüştürmek için sitenizdeki her bir sayfayı değiştirmeniz gerekmez.

İçeriğin tasarımdan bu şekilde ayrılması ile arama motorları karmaşık kodlar arasından içeriğinizi çekip çıkarmak zorunda da kalmazlar. Harici dosya kullanımı ile sayfanızın açılma süresi de kısalacaktır ki ziyaretçilerinizin istediği şey de budur.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

Web Tasarımcılarının Kodlama Yapmalarının 6 Gereği

12. Geçerli XHTML / CSS
Sitenizi XHTML ve CSS kullanarak kodlamak yetmez. Kodun doğru olması gerekir. Internet üzerinde kaynak kodunuzun doğruluğunu test edebilecek paha biçilmez iki adet araç bulunmaktadır.

Geçerli kod yazmak için pek çok sebep bulunmaktadır. Doğrulanabilir bir kod yazarak sitenizin farklı tarayıcılarda aynı biçimde görünmesine bir adım daha yaklaşmış olursunuz (detayları için 13. adımı okuyun) ve bu arama motorlarına da yardımcı olacaktır. Eğer siteniz geçerli web standartları kullanılarak geliştirilmişse, arama motorları içeriğinize kolay bir şekilde ulaşacaktır.

Doğrulanabilir kod kullanarak işinizin ehli olduğunuzu göstermiş olduğunuzdan bahsetmeme bile gerek yok. Evet, müşterilerinizin pek çoğu aradaki farklı bilmeyecektir, ancak bazıları bu farkı bilir, özellikle de sizden standartlarla uyumlu kod yazmanızı isteyen müşteriler bu farkı önemserler.

Bunun dışında diğer web geliştiricileri de muhtemelen görünen dağın ardında neler olup bittiğini görmek için sitenizin kaynak kodunu kontrol edeceklerdir... Hem meraktan, hem de sırf bunu yapabildikleri için!

13. Çapraz Tarayıcı Uyumluluğu
Firefoxla yatıp kalkıyor olabilirsiniz ancak bu müşterinizin de sizinle aynı şeyi yaptığı anlamına gelmez. Müşterinizin Internet Explorer kullanıyor olma ihtimali gerçekten yüksektir. Hatta ne yazık ki Internet Explorer 6 bile kullanıyor olabilirler (beni bu konuda konuşturmayın lütfen. Internet Explorer'ın defolup gitmesini isteyen tek geliştirici olmadığımı söyleyeyim gitsin).

Hem kendi sitenizin hem de müşterileriniz için geliştirdiğiniz sitelerin farklı tarayıcılar üzerinde aynı şekilde görüntülenebilmesi önemlidir. Eğer sitenizi farklı platformlar üzerinde de aynı şekilde görüntüleyebilirseniz bu size artı puan kazandırır. Her ne kadar pek çok son kullanıcı PC kullanıyor olsa da, Mac kullanan kullanıcı sayısında özellikle son iki yıldır büyük artış gözlenmiştir. Eskiden sadece tasarımcıların ve profesyonellerin kullandığı bir platform olan Mac, günümüzde her kesim taradından kullanılmaktadır. Bu sebeple sitenizin Mac üzerinde de PC'de göründüğü gibi görünmesini sağlamak önemlidir.

Ne yazık ki pek çok kişi hem PC hem de Mac sahibi olacak kadar şanslı değildir (Linux ve türevlerinden bahsetmiyorum bile) ancak Browser Shots adı verilen bir sitenin yardımı ile sitenizin adresini girip farklı platformlar altında farklı tarayıcıları seçerek sitenizin ilgili tarayıcılar üzerindeki ekran görüntüsüne ulaşabilirsiniz. Eğer PC'de Windows Vista kullanıyorsanız ve Internet Explorer 6'ya erişiminiz yoksa bu durum çok kullanışlı olabilir.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

14. Web İçin Optimize Edilmiş Görseller
Web için tasarım yaptığınızda tüm görsellerinizi sıkıştırılmış bir biçimde kaydetmeniz önemlidir. Ancak sıkıştırmada aşırıya kaçmamalısınız zira o zaman görselin kalitesi düşecektir. Kaliteyi kabul edilebilir düzeyde tutarak sıkıştırma yapmanız yapılabilecek en doğru şeylerden biridir.

Eğer baskı işi ile haşır neşirseniz, 300dpi'nin standart olduğunu bilirsiniz. Ancak bu oran web siteleri için geçerli değildir. Ekran için tasarım yaptığınızda görsellerinizi 72dpi çözünürlükte kaydetmeniz gerekir. Bu çözünürlüğü kullanırsanız hem dosya boyutu azalacak, hem de ilgili görselin yüklenme süresinde önemli bir düşüş gözlenecektir.

Adobe Photoshop gibi programların "Web İçin Kaydet" özelliği bulunmaktadır. Bu özellik sayesinde görsellerinizi otomatik olarak 72dpi çözünürlükte kaydedebilirsiniz. Yine bu ve bunun gibi programlar, ilgili görselin kaydedilmesi sırasında size sıkıştırma ile ilgili bazı ince ayarlar yapabilmenizi sağlayacak ayar pencerelerini de sunarlar. Web için seçmeniz gereken biçimin, sitenizin içeriğine ve hedef kitlenize göre değişmekle birlikte png, jpg ya da gif olması gerektiğini hatırlatmak isterim.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

15. İstatistikler, İzleme ve Analiz
Her ne kadar bu element sahne arkası için geçerli olsa ve bir ziyaretçi olarak bilmeniz gerekmeyen bir element olsa da, bir web sitesi sahibi olarak bağımlılık derecesinde olmasa (olmaması gerekse) bile hayati önem taşımaktadır.

Internet üzerinde aşağıdaki bilgileri size sunabilecek pek çok analiz ve istatistik servisi bulunmaktadır.

Sitem kaç kez ziyaret ediliyor?
Kaç adet tekil ziyaretçi sitemi takip ediyor?
İnsanlar sitemi nereden buluyorlar?
Beni hangi arama terimleri sayesinde buluyorlar?
Hangi web siteleri bana bağlantı vermiş?
Sitemdeki en popüler sayfalar hangileri?
Ortalama ziyaretçim kim (platform / tarayıcı / ekran çözünürlüğü)?

İyi bir analiz programı ile neleri takip edebileceğinizi gördüğünüzde şaşırabilirsiniz. Belki de bu iş için kullanabileceğiniz en etkili (ve ücretsiz) çözüm Google Analytics olacaktır.

Eğer sitenizin performansını izlemek ve sitenizi nasıl daha da geliştirebileceğinizi görmek istiyorsanız, iyi bir istatistik servisi kullanmak çok önemlidir.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

Şimdi sizin sıranız... Sizce Hangisi En Önemli?
Tasarım, geliştirme ve içerik açısından bir web sitesinin sahibi olması gereken en önemli özellik sizce nedir? Sizi bir şirketin web sitesini zitarettiğinizde o şirket ile birlikte çalışmaktan vazgeçirecek site özelliği hangisidir?

Aslında iyi bir web sitesinin sahibi olması gereken özellikler 15'ten çok daha fazladır ancak ben bu makalemde kendimce en önemli özellikleri ve değerleri listelemeye çalıştım. Sizin de bu listeye eklemek istedikleriniz var mı? Lütfen yorumlarınızla görüşlerinizi paylaşın.

Kaynak: Freelance Folder

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

öğrenilmesi gereken 15 css hilesi

programmer — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

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

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

programmer — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak