bildirgec.org - BONNER - beğendikleri

e-ticaret için en iyi 5 içerik yönetim sistemi

BONNER — Thu, 24 Dec 2009 10:26:00 GMT

günümüzde e-ticaret artık yeni bir ekmek kapısı haline geldi ve sektörde çok büyük paralar dönüyor. eğer siz de internetten ticaret yapmayı planlıyorsanız önünüzde birçok seçenek var. i̇şte bu yazımda bunların en ucuz yöntemi olan e-ticaret cmslerinden bahsedeceğim.

magento

magento ise ücretsiz ve ücretli olarak iki çözüm sunuyor. ücretsiz diye hemen dandik bir şey olduğunu düşünmeyin gerçekten de çok kaliteli bir sistem. küçük veya orta halli bir e-ticaret için pekala uygun bir sistem. magentonun diğer bir avantajı çok fazla tema desteğinin bulunması. ücretli ve ücretsiz temalara çok kolay şekilde ulaşabilirsiniz. türkçe dil desteği de ayrı hoş bir özellik.
örnek site (ücretsiz sürüm-mağaza sayfası)
örnek site (ücretsiz sürüm-yönetim paneli)

prestashop

prestashop da diğer bir ücretsiz e-ticaret sistemi. zaten sitelerine girdiğinizde bu işe ne kadar özen gösterdiklerini anlıyorsunuz. yine de kısaca bahsetmek gerekirse; paypal desteği, türkçe dil desteği, google analytics entegresi gibi özelliklere sahip.
örnek site (mağaza sayfası)
örnek site (yönetim paneli)
yönetim paneli için:
username: demo@prestashop.com
password: prestashop_demo

business catalyst

business catalyst küçük ve orta ölçekli bir e-ticaret düşünüyorsanız sizin için oldukça yeterli bir sistemdir. sistemin kullanımı oldukça basit ve etkilidir. sistemle birlikte sitenizde blog ve forum da oluşturabiliyorsunuz. ayrıca sistemin kolay ve anlaşılır bir istatistik sistemi de mevcut. telefon, e-posta, chat üzerinden destek sistemiyle de müşterilenizle her an irtibatta olabiliyorsunuz. sistemin fiyat ve diğer ayrıntıları için business catalysti ziyaret edebilirsiniz.
örnek site için linke girip kendi sitemizi özelleştirerek bir demo alabiliyoruz.

opencart

opencart adından da anladığımız gibi ücretsiz bir sistem. opencart benim ilgimi en çok ödeme seçeneklerindeki çeşitlilikle çekti. paypal, moneybookers... gibi birçok ödeme sistemini destekliyor. türkçe dil desteği bu sistem için de mevcut. biraz önce tanıttığımız prestashop ve ücretsiz e-ticaret sistemi deyince ilk akla gelen oscommerceden üstün özellikleri bile var.
örnek site (mağaza sayfası)
örnek site (yönetim paneli)
yönetim paneli için:
username: demo
password: demo

oscss

oscss yine ücretsiz bir sistem.
örnek site(mağaza sayfası)

kaynak

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

Japon Web Tasarım Galerileri

BONNER — Tue, 23 Jun 2009 13:28:00 GMT

japan web design galleries

Japon sitelerin listelendiği, yeni ve kaliteli web tasarım örneklerini görebileceğiniz, 9 web tasarım galerisi site aşağıda listelenmiştir.

the css gallery list , urbantrash.net css gallery list ve instantshift 123 web galeri adreslerini ziyaret ederek tüm dünyadan web tasarım örneklerinin listelendiği, web tasarım galerilerine ulaşabilirsiniz.

S5-Style

japan web design galleries

Web Selection

japan web design galleries

ubusuna

japan web design galleries

Web Mihon

japan web design galleries

Refsign

japan web design galleries

Straightline

japan web design galleries

Anjou Dekiteharu

japan web design galleries

Design Link Database

japan web design galleries

Ikesai

japan web design galleries

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

ilham almak için straightline

BONNER — Thu, 17 Jan 2008 08:11:00 GMT

straightline

İnternette güzel web sitelerinin gezilip ilham alınabileceği galeriler gün geçtikçe artıyor. Geçen hafta benim sitemi de eklemeleri ile birlikte keşfettiğim straightline oldukça güzel bir site. Hem CSS hem Flash siteler mevcut. Arşivleri şimdilik pek büyük olmasa da yine de bir göz gezdirmenizi tavsiye ederim. Buyrun

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

Başarılı bir Flash kullanıcısının örneklerle dolu sitesi

BONNER — Tue, 02 Sep 2008 15:29:00 GMT

LeoGeo kişisel flash çalışmalarını kendi sayfasında görücüye çıkarmış bir sanatçı.
Yaptığı flash çalışmaları amaçsız görünse de aslında flash üzerine çalışmalar yapanlar için çok güzel ilham kaynakları.

Flash ile ilgilenen kimselerin siteyi incelemesini şiddetle öneririm.

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

Konigi ile ilham alınası

BONNER — Tue, 18 Mar 2008 12:53:00 GMT

konigi, özellikle tasarımcıların işine yarayabilecek bir nevi devasa ilham alınası kaynak site özelliğinde. sitede 5 bölüm var ve siteler hakkında sağ tarafta tanıtıcı yazılar yazılıyor, bilgiler, haberler veriliyor. burası da fena sayılmaz.

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

ilham alınacak 20 e-ticaret sitesi tasarımı

BONNER — Thu, 29 May 2008 08:28:00 GMT

ilham alınacak 10 tasarım sitesi gibi bir yazının ardından 20 tane de yeni projenizde size fikir verebilecek e-ticaret sitesi tasarımı inceleyelim derim.e-ticaret sitesi diğer web işlerinden biraz daha karmaşıktır. tasarımı ve kodlaması ayrı bir dert olan e-ticaret sitelerine şurada da açık kaynak kodlu bir yardım elçisi yetişmiş ama ben işin yazılım tarafına değil tasarım tarafına eğilen bir bildiri yayınlıyorum.buradaki tasarımları yeni projenizde esin kaynağı olarak kullanabilirsiniz.

daha fazlası, tamamı, hepsi, 20si birden sadece burada!

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

Doğrulanmış (X)HTML - Önemli mi?

BONNER — Tue, 10 Feb 2009 19:11:00 GMT

Bir web geliştiricisi olarak doğru kod yazmanız gerekir, ancak bu gerçekten önemli mi?

Doğrulamanın ardındaki gerekçelere bir baktım ve web'in en popüler 25 websitesini inceleyerek kodlarının doğru olup olmadığını sorguladım. İşte başlıyoruz...

Doğrulama nedir?
Doğrulama belgelerinizin WWW Konsorsiyumu (W3C) gibi kurumlar tarafından HTML ve XML ile oluşturulan web belge tiplerinin resmi standartları ile uyumlu olup olmadığını test eden bir işlemdir. Aynı işlem WML siteler için WapForum'un yayımladığı standartlara göre yapılır. Normal belgelerimizdeki yazım denetimi ile benzer amacı güderler. (W3C)

Peki neden doğrulamalıyız, getirileri nelerdir?

1. Birbiçimli Olmayan Tarayıcı Doğrulaması
Doğrulanmamış sayfalar tarayıcınızın kodunuzu otomatik olarak doğrulamasına sırtını dayar ve her tarayıcı bunu farklı şekilde yapar. Bu yüzden bir etiketi kapatmayı unutursanız, Firefox bunu gözardı edebilir ancak Safari etmeyebilir bu sebeple farklı tarayıcılarda farklı ve genellikle doğru görünmeyen bir sayfa ortaya çıkar.

2. İşleme Süresi
Eğer kodunuz doğru ise tarayıcınız kodunuzu düzeltmekle uğraşmaz, bu da sayfanızın daha hızlı açılması ile sonuçlanır.

3. Geleceğe Yönelik
Teknolojinin yarın neler getireceğini kestirmek mümkün değildir ancak eğer doğrulanmış bir (X)HTML dosyanız var ise kodunuz gelecekteki web teknolojileri ile sorunsuz çalışacaktır.

4. Google doğrulanmış kodu tercih eder
Shaun Anderson ilginç bir doğrulama testi gerçekleştirmiş; Google doğrulanmış kodu sever mi?

Deneyde aynı içeriğe sahip 4 farklı sayfa doğrulanmış ve doğrulanmamış HTML ve CSS kodları ile kodlanmış. Sonuç ise Google doğrulanmış HTML'ye ve CSS'ye sahip kodu seçmiş ve ilgili sayfayı diğerlerinin üzerinde arşivlemiş.

5. Erişilebilirlik
Doğrulanmış bir koda sahip web sitesinin tüm tarayıcılar tarafından erişilebillir olma ihtimali yüksektir. Buna farklı platformlar ve ekran okuyucuları da dahildir.

6. Bireysel tatmin
Kodunuza doğrulama kontrolü uyguladığınızda ve ekranın üst kısmında yeşil renkli çubuğu gördüğünüzde kendinizi iyi hissedersiniz :)

En sık görülen doğrulama hataları ve düzeltme yöntemleri

a. & işareti (Ampersan)
En sık görülen sorunlardan birisi budur. Ampersanlar '&' şeklinde yazılmalıdır, '&' şeklinde değil. Bu işlem URL yazarken de geçerlidir.
<a href="http://images.google.com/imghp?hl=en&tab=wi">

b. İki yana bloklar (Quotation)
Element özellikleri daima tırnak işaretleri arasında belirtilmelidir.
<body bgcolor="#ffffff">

c. Kapanış etiketleri
Tüm elementler mutlaka kapanmalıdır ve eğer XHTML DTD kullanmışsanız bu durum görsel etiketleri için bile geçerlidir.
<img src='http://www.bildirgec.org/image.jpg' alt="Image" />

d. Belge türleri (Doctype)
Sayfanız mutlaka doğru Belge Türü Tanımlamasına (DTD) sahip olmalıdır ve bu sayfanın en üst kısmına yerleştirilmelidir. Unutmayın ki belge türleri büyük/küçük harfe duyarlıdır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e. Elementleri yanlış şekilde iç içe yerleştirmek
Elementler aynı sırada açılıp tersi sırada kapanmalıdır.
Paragraf

Dünya'nın En Önemli Sitelerinin Kodu Doğru mu?
Peki tüm bu bilgilerden sonra popüler web sitelerinin kodları doğru mu? Aşağıda dünyanı en çok ziyaret edilen sitelerinin kodlarının doğru olup olmadığını inceledim ve onları iyiden kötüye doğru sıraladım.

Peki Tasarım Komünitesinde İşler Nasıl
Tasarım ve teknoloji komünitesinin büyük isimlerine bir bakalım.

Sonuç
Web sitelerinizin kodunuzun doğru olmasının önemli olduğunu ve bunu alışkanlık haline getirmeniz gerektiğini düşünüyorum. Buna rağmen yukarıdaki sitelere baktığımda (ki bu sitelerin tamamı mükemmel içeriklere ve tasarımlara sahiplerdir) kodu doğru olmayan bir sitesi sahibi olmanın da dünyanı sonu olmadığı aşikar.

Eğer siz de benim gibi düşünüyorsanız, kodunuz doğru olduğunda geceleri daha rahat uyuyacaksınızdır

Sizin sitenizin kodu doğrulanabiliyor mu?
Bu yazı için web sitelerinin kodlarının doğru olup olmadığını takip etmek zor bir işti, bu yüzden başka sitelerin de kodlarının doğru olup olmadığını görmek güzel olacaktır. W3C Doğrulama Kontrolünü siteniz üzerinde uygulayın ve ardından sonuçları yorumlarınızla paylaşın. Türkiye'nin bazı önemli sitelerin kodlarının doğru olup olmadığını da merak etmiyor değilim.

Kaynak: Lee Munroe

Kullanılabilirlik ve Web Standartları Üzerine Yazdığım Diğer Yazılar

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

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

Google'dan Beklenen Türkçe'ye Çeviri Hizmeti

BONNER — Sun, 01 Feb 2009 17:29:00 GMT

bildirgeç japonca

Google'dan beklenen adım nihayet geldi. Artık yabancı dildeki siteleri türkçe takip etmek mümkün .
Çoğumuzun daha önceden, çince ve arapça gibi latin harfler kullanmayan ya da bilmediğimiz dillerde yayınlanan çeşitli siteleri (belki ingilizceye çevrilmiş olarak) takip edebilmek için kullandığımız google'in çeviri sayfası artık türkçe çeviriyi de mümkün kılıyor. Halen bir çok eksiği olsa da, devrim niteliğinde sayılan bu özellik, hiç şüphesiz google'ın internet dünyasında en büyük katkılarından biri.

Türkçe çeviri hakkında bilgi vermek gerekirse, yukarıda bahsettiğimiz eksiklere Türkçe'nin çevrilebilirlik düzeyi de eklenince, istediğmiz düzgün sonuçları almak şimdilik pek mümkün olmuyor.

Ama hakkını vermek gerekirse, aşağıda bildirgeçin çeşitli dillere çevrilmiş halinden de anlaşılacağı üzere google çevirisinin siteyi takip edecek düzeyde yeterli olduğu hemen gözleniyor. (Aşağıda Arapça ya da çince çevirlere bakarak ne demek istediğimi anlayabilirsiniz.)

son olarak google çeviri sayfasının pek çok özelliğini saymak şimdilik mümkün görünmesede, yorum kısmında türkçe nerde google diye sordurtan şu bildirgeç yazısına bir link vermeyi uygun görüyoruz.

iki önemli hususu belirtmekte fayda var.

bunlardan birincisi çevirdiğiniz sayfanın herhangi bir yerine fareyi götürdüğünüzde o kısmın orjinal metnini görebiliyor hatta kendi çevirinizi önerebiliyorsunuz. (şu sayfanın en altına bakınız.)
ikincisi ise 40 dilde hizmet veren bu servis şimdilik sadece sayfaları türkçeye çevirmekle yetiniyor. Geliştirilmesine devam eden servis için beklenen diğer özellikler ise de şu anda 21 farklı dilde sunulan geniş sözlük ve çapraz arama servislerinin Türkçe olarak da sunulması. (bknz)"

aşağıya bildirgeç'in çeşitli dillere çevrilmiş hallerini ekledik. incelemekte fayda görüyoruz

bildirgec.org çevirisi için;
ingilizceye
ispanyolcaya
almancaya

fransızcaya
arapçaya
çinceye
japoncaya

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

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

eBay Afterbuy'ı satın aldı

BONNER — Fri, 05 Oct 2007 04:55:00 GMT

İnternet aleminde çeşitli servislerin satın alınması son sürat devam ediyor. Bunlardan sonuncusu ise eBay'in Almanya'da faaliyet gösteren açık artırma düzenleme yazılımı şirketi olan Afterbuy'ı satın alması. Afterbuy, ebay'in ebay.de deki müşterilerine daha iyi hizmet etmesi için alınmış. Kaynağa şuradan ulaşabilirsiniz.

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