bildirgec.org - kadirgunay - beğendikleri

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

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

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

Modern CSS'de Altın Oran

kadirgunay — Mon, 12 Jan 2009 17:38:00 GMT

Bir websitesini stillemek onun sadece nasıl görüneceğini belirlemek demek değildir. Bundan çok daha fazlasıdır. Bu, ziyaretçiyi nasıl daha rahat hissetirebileceğinizi, nasıl web sitenizi daha çok seveceğini ve onu nasıl daha fazla kendi evinde hissetirebileceğini tasarlamaktır.

Mükemmel tasarım ziyaretçinin web sitesini kullanmasına yardım eder ve ince bir zekayı yansıtır. Ziyaretçinin onu beğenmesi yetmez

Bir haber sitesini ele alalım. Ziyaretçi, "lezzetli" gradyanlarınıza ve seksi görünümlü yuvarlatılmış köşelerinize bakıp saatler geçirmemeli. Ziyaretçi, değerli web zamanını değerli içeriğinizi okuyarak geçirmeli. Biz ona aradığı içeriğe en kısa sürede ulaşmasına yardımcı olmalı, onu mümkün olduğu kadar çok makale okumaya teşvik etmeli, sitede daha uzun süre kalmasını sağlamalı ve sitenizi ilk kez ziyaret eden bir ziyaretçiden kalıcı bir ziyaretçiye dönüştürmeliyiz.

Tüm bunlara ulaşabilmek için sayfamızdaki her element üzerinde bir harmoni ve benzerlik sunmalıyız, küçük ve önemsiz elementlerde bile. Bunların karışımı bize arzulanan sonucu verecektir.

Harmoni. Anlamı gibi kulağa hoş gelen bir kelime. Peki anahat (layout) tasarımında buna nasıl ulaşabiliriz? Cevabı "Altın Oran".

Peki "Altın Oran" tam olarak nedir? Gelin Wikipedia'nın bunu nasıl güzel özetlediğine bir bakalım: Bir doğru parçasının (AB) Altın Oran'a uygun biçimde iki parçaya bölünmesi gerektiğinde, bu doğru öyle bir noktadan (C) bölünmelidir ki; küçük parçanın (AC) büyük parçaya (CB) oranı, büyük parçanın (CB) bütün doğruya (AB)oranına eşit olsun. Altın oranın matematiksel değeri yaklaşık olarak 1.6180339887'dir.

Bu mukayesenin kullanımı, tam harmoniyi yakalayabilmemiz için evrensel olmalıdır.

Oranı Bizim İçin İşe Yarar Kılmak

Gelin bu oranı kendi anahattımız üzerinde nasıl kullanabileceğimize bir bakalım.

İlk olarak temel kapsayıcılarımız ile başlamamız gerek. Bu basit örnekte mukayesemizi içeriğimizde bölünmüş durumda olan iki element üzerinde (main ve sidebar) üzerinde uygulayabiliriz. Bu elementlerin yüksekliği ile oynayamayacağımızdan ötürü, sadece genişliğe odaklanmamız gerekir.

Diyelim sayfamızın genişliği 960 piksel olsun ve biz bu genişliği altın oran kullanarak bölümlemek isteyelim. Ana içerik kısmının genişliği 960 / 1.62 = 593 piksel, yan bar kısmının genişliği ise 960 - 596 = 367 piksel olacaktır.

Şimdi, ana sütunlarımızın mukayeselerini bulduğumuza göre, ana tipografiyi belirlemenin zamanı geldi. Benim bazı ilişkiler için önerim:

line-height = font-size x 1.62
paragraf marjı = paragraf satır yüksekliği x 1.62/2
başlık üst-marjı = başlık satır yüksekliği x 1.62

Bu mantığı aklımızda tuttuğumuz sürece karşımıza çıkabilecek tüm mukayese ve boyut problemlerini çözmemiz mümkün.

Form elementleri içerisinde bir diğer örnek ise, input genişliğinin başlık genişliğinin 1.62 katı olması gerektiği.

Aynı oran, mükemmel olmasını istediğimiz tüm alanlarda kullanılabilr. Genişliği yüksekliğinin 1.62 katına eşit olmalıdır.

Sonuç Olarak

Pek çok insan, bu tekniğin bir ütopya olduğunu ve özellikle zaman kısıtlı projeler üzerinde çalışırken yanımızda daima bir hesap makinesi ile kodlama yapamayacklarını belirterek bu tekniğe karşı çıkabilirler. Ancak makalemizin dikkat çekmeye çalıştığı nokta bu değil. Dikkat çekmeye çalıştığımız şey, bir şeyleri bölmeye çalışırken, mümkün olduğu kadar %62 %38 mukayesesini aklımızda tutmaya çalışmak.

Fazladan Bilgi

Bir parçayı üçe bölmeye çalıştığımızda öncelikle onu ikiye (%62 - %38) böleriz ve ardından büyük parçayı alıp onu tekrar aynı mukayese yöntemini kullanarak ikiye böleriz (%62 - %38).

Daha önce yayımladığım web tasarımında altın oran makalesine de bir göz atmak isteyebilirsiniz.

Kaynak: CSS Globe

Bu yazı kadirgunay 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 İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri

kadirgunay — Thu, 08 Jan 2009 07:45:00 GMT

jQuery'i ve onun geliştiricilerin hayatını kolaylaştırma yöntemlerini seviyorum. Her ne kadar jQuery'i kabullenmek benim biraz zamanımı alsa ve halen kendi ihtiyacım olan kodları kendim yazmayı tercih etsem de, jQuery'nin avantajlarını inkar edemem. Son zamanlarda fare imlecini bir bağlantı üzerine getirdiğimde imaj önizlemesini görüntülemem gereken bir proje aldım. Biliyorsunuz, hani şu link üzerine farenizi götürdüğünüzde çıkan kutucuklar içerisinde imaj görüntülenmesi. Halihazırda o proje üzerinde jQuery kullanılıyor olmasından ötürü bunu bir fırsat olarak gördüm ve bu gelişmiş kütüphane ile neler yapılabileceğini araştırmaya koyuldum. Bir süre sonra da çok basit bir betik hazırlarken buldum kendimi. Bugün, size bu çok ama çok basit betiği kullanarak oluşturulmuş 3 örneği göstereceğim.

3 ipucunu bir arada indirin

Özellikler ve Prensipler
Bu betiğin yaptığı şey bir öğe üzerine fare imlecinizi götürdüğünüzde gövdeye bir element yerleştirmek. Bu elementin nasıl görüntüleneceği CSS ile tanımlanıyor (mutlak (absolute) konumlandı ve üzerine stil uygulandı) ve bu sayede bizim tek yapmamız gereken o elementi bir içerik ile doldurmak, fare pozisyonunu hesaplamak ve ona uygun olarak elementi hareket ettirmek. Fare imleci nesne üzerine götürüldüğünde, içeriğindeki element de onunla birlikte hareket ediyor ve fare imleci elementin üzerinden kaldırıldığında, içeriğindeki element siliniyor.

Bu betiği uygulama üzerinde görebileceğiniz birkaç örnek:

Örnek 1: Bugüne kadarki en basit jQuery Tooltip (İpucu)

Bu betik A etiketinin başlığını (title etiketinin değerini) alıyor ve açılır elementin içerisine yerleştiriyor.

<a href="http://www.hafif.org" class="tooltip" title="meraklı ol!">ipucu için farenizi buraya sürükleyin</a>

Betiği uygulama üzerinde görün

Örnek 2: Resim Önizleme Galerisi

Burada bir dizi önizleme resmimiz bulunuyor. Her önizleme resminin üzerine fare imleci getirildiğinde betiğimiz, önizleme resminin bağlantıladığı resmi görüntüleyecek. Bu yöntem içeriği erişilebilir kılıyor aynı zamanda, zira JavaScript'in aktif olmadığı tarayıcılar ve sistemler üzerinde de bağlantıya tıkladığınızda resmin kendisine ulaşabilyorsunuz.

<a href="1.jpg" class="preview"><img src='http://www.bildirgec.org/1s.jpg' alt="gallery thumbnail" /></a>

Betiği uygulama üzerinde görün

Örnek 3: URL Önizlemesi İçeren Bağlantılar

Bu yöntem biraz daha uğraş gerektiriyor ancak sitenize fazladan bir özellik eklemek istiyorsanız buna değer. Burada ihtiyacınız olan şey hedef URL'nin bir ekran görüntüsü. İlgili sitenin ekran görüntüsünü A etiketinin REL değerine girdikten sonra betiğimiz işin geri kalanını halledecek.

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

Yine eğer önizleme resmine bir açıklama eklemek istiyorsanız o zaman TITLE değerini doldurabilirsiniz:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

Betiği uygulama üzerinde görün

3 ipucunu bir arada indirin

Kaynak: CSS Globe

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

Yaratıcı Kod: Yaratıcı Programcılardan Öğrenmenin 14 Yolu

kadirgunay — Tue, 29 Jul 2008 20:54:00 GMT

Programcılar için genellikle “inek”, “asosyal” ve “çok çok sıkıcı” denir. Yaratıcı bireyler olarak düşünülmezler. Fakat bunun gerçekle uzaktan yakından alakası yok. Kod yazmak, dünyanın en yaratıcı işlerinden bir tanesidir.

fotoğraf: morganglines

Programcılar çok farklı iki dünyayı dengelemek zorundalar: mimari ve hayal gücü. Onlar, çok yapısal programlama dillerini (PHP veya Java gibi) kullanarak soyut konseptler oluştururlar. Bu hiç kolay değil.
Bunları biliyorum çünkü son zamanlarda ilgi çekici web siteleri oluşturmak için php yeteneklerimi geliştiriyorum. Ve programcılığın aslında yaratıcılığı geliştirmek için müthiş bir alıştırma olduğunu farkettim. Şu sebeplerden:

Programcılık gerçek kontrol demektir. Sıfırdan bir şey yaratmak muhtemelen yaratcılığın en iyi örneğidir. Bir yazılım veya web sitesi, programcı nereye isterse oraya gider.

Bir şeyi yapmanın bir çok yolu vardır. Bir web sitesi için programcının bir framework yazması gerekir. Ve bu noktaya ulaşmak için elinde olan tek şey bir fikirdir.

Programcılar yaratıcı çözümler bulmak zorundalar, yoksa yaratamazlar.
Programcılar sıradışı düşünmenin harika örneklerini sergilerler, çünkü sırayı onlar yaratır. Bakın yaratcılığımızı doruğa çıkarmak için programcılardan neler öğrenebiliriz:

1. Yeni Bir Dil Öğrenin

Programcılar sürekli yeni diller öğrenirler, bazen gerektiği için, bazen eğlenmek için. Kendinizi bildiklerinizle ve rahat kullandıklarınızla sınırlamayın, gidin ve yeni bir yetenek edinin.

2. Sıfırdan Başlayın

Eğer yazılım üretiyorsanız, işe yarı yoldan başlayamazsınız. Önce ilk adımı atmak zorundasınız. Bazen bir probleme yaratıcı bir çözüm bulmanın yolu en başa gidip tekrar ileri bakmaktır.

3. Her Şeyi Sorgulayın

Her şeyi sorgulamak, her kabullenmeyi yeniden ele alıp doğruluğundan emin olmak demektir. Programcılık tamamen, en temel varsayımları ele alıp bunların üzerine inşa etmektir. Eğer temelde bir yanlış varsa, yazılım düzgün çalışmaz.
Yaratıcılık bazen kabullenmelerle sınırlıdır. Yeni çözümler varsayımları tekrar ele alıp yeni bakış açılarıyla yeniden başlayarak ortaya çıkar.

4. Keyif İçin Yapın

Eğer bir programcı tanıyorsanız bilirsiniz ki sürekli bir şeyler üretiyor. O günkü işini bitirse bile sırf zevk için daha saatlerce kod yazıyor. İşi aynı zamanda hobisi.
Sürekli yeni fikirler ve çözümlerle uğraşmak angarya olmamalı. Bunu bir refleks olarak sürekli yapmalısınız. Ve bu sizi heyecanlandırmalı.

5. Denemenin Yollarını Arayın, Hiç Durmadan

Programcılar, yazdıkları kodun mümkün olan en etkili kod olduğuna emin olmak için onu sürekli değerlendirirler. En ufak bir değişiklik bile bir yazılıma diz çöktürebilir. Sürekli test etmek ve geliştirmek, yazılımın her parçası için çok önemlidir.
Fikirler sürekli olarak titizlikle denenmeli ve ara ara gözden geçilirilmeli. Fikirleriniz zamanla değişir, az ya da çok. Onları sürekli denemek ve sadece üzerlerinde düşünmek, fikirlerinizi değerlendirmenin en iyi yoludur.

6. Tutkuyla Bağlanacağınız Bir Şey Bulun

Eğer bir programcıyla iki dakikadan fazla konuşma fırsatınız olmuşsa farketmişsinizdir ki programcılar işlerine tutkuyla bağlıdırlar. Programcılığı yerler, içerler ve solurlar.
Kendi fikirlerinize ve projelerinize tutkuyla bağlı mısınız?

7. Araçlarınızda Uzmanlaşın

Programcılar kullandıkları araçlar hakkında sürekli bir şeyler öğrenir ve sürekli onları kullanmak konusunda uzmanlaşırlar. İyi bir programcı sürekli olarak ihtiyacı olan yazılımları daha etkili kullanmanın yollarını arar. Araç kutusunu sürekl i geliştirmeyen bir programcıya zor rastlarsınız.
Yeteneğiniz ne olursa olsun, yaratıcılığınız kullandığınız araçlarla sınırlı. Onları kullanmak konusunda ne kadar uzmanlaşırsanız o kadar yaratıcı olursunuz.

8. Soyut İlişkiler Kurun

Bilgisayarı telefon olarak kullansaydınız ne olurdu?

Bir web sitesini kelime işlemci olarak kullansaydınız?

İnsanlar diğerlerinin tam şu anda ne yaptığıyla ilgilenirler miydi?

Skype, Google Docs ve Twitter gibi projeleri yaratan insanların ortak bir özelliği var: Görünüşte soyut olan kavramları ilişkilendirebiliyorlar. “Şöyle bir şey olsa?”’ları alıp denemek, farklı ve yaratıcı düşünmek için mükemmel bir yol.

9. Yapıyı Bir Araç Gibi Düşünün, Bir Kısıt Gibi Değil

İnsanlar yaratıcılığı büyük bir boşlukla ilişkilendirip fikirlerini sınırlardan bağımsız oluşturmaya çalışırlar. Ancak bu, yaratıcılık konusunda büyük bir aldatma.

Sınırlar her yerde. Onları görmezden gelemezsiniz, ancak onlarla çalışmayı umabilirsiniz. Programcı, kullanıdığı dilin ve araçların sınırlarını bilir ve onların etrafından dolaşır. Bu sınırlar onun, sınırlar etrafında dolaşan yapılar kurmasını sağlar. Bir şeyin etrafından nasıl dolanılacağını bulmak, bazen daha büyük bir fikir doğurur. Gereklilik, icadın yaratıcısıdır.

10. Hiç Bir Şeyi Denemeden Silip Atmayın

Anaokulu öğretmeniniz haklıydı: Aptalca soru diye bir şey yoktur. Eğer üçüncü kurala uyup tüm varsayımlarınızı sorguluyorsanız, bir şeyi denemeden çalışmayacağına emin olamazsınız. Çalışmasa bile, yeni bir fikir üretmenizi sağlayabilir.
Bazen bir prototiple başlayıp onu denemek en iyisidir. Eğer çalışmazsa çöpe atın. Çalışırsa tebrikler: bir sonraki harika fikrinizi buldunuz.

11. Her Zaman Daha Basit ve Zarif Çözümler Arayın

İyi bir programcı en basit çözümün her zaman en iyisi olduğunu bilir. Karmaşık çözümler tek bir şey ortaya çıkarır: karmaşa. Pratik çözümler her zaman uzun vadede daha iyi çalışırlar.
Fikirlerinizin yeniliğinin büyüsüne kapılıp pratikliğini unutmayın. Bir problemi çözmenin en iyi yolu, en basit olandır.

12. Başkalarının İşleri Üzerinde Çalışmaktan Çekinmeyin

İnternet’in güzelliği, her zaman aradığınız çözümü bir başkasının zaten bulmuş olmasıdır. Yeni bir yazılım üretirken her zaman mevcut kodları kullanmak iyidir. Tekrleği tekrar icad etmenin manası yok.
Yeni bir fikri uygularken her parçasını baştan yapmak zorunda değilsiniz. Zaten bulunmuş fikirleri kullanın ve onları daha iyi bir şeye dönüştürün. Mükemmel bir fikir bazen yalnızca başka bir fikri değiştirmekten ibarettir. Gmail harika bir örnek. Klasik e – postaya yeni özellikler ekleyerek e – postayı baştan yarattılar.

13. İşbirliğinden Çekinmeyin

En iyi projeler, tek bir programcı tarafından değil, aynı amaç etrafında toplanmış bir çok harika programcıların ellerinden çıkmıştır. Müthiş bir ekip kurun, en iyi fikirleri kimden gelirse gelsin kullanın, ve herkesin katılmasını sağlayın.

14. En Basitten En Güzeli Çıkarın

Programcılar en basit kodları tekrar tekrar kullanırlar ve bu kod parçaları tek başlarına basit de olsa bir araya geldiklerinde harika bir ürüne dönüşürler. Hangi yaratıcı projede çalışırsanız çalışın, detaylara önem verin ancak en önemlisi, o detayların tüm resim üzerindeki etkisine dikkat edin.

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

Html 5 duyuruldu

kadirgunay — Fri, 25 Jan 2008 08:01:00 GMT

Çoğu web tasarımcısının ilk öğrendiği dil olan HTML'nin son sürümü taslak halinde HTML 5 w3.org tarafından duyuruldu. HTML4'ü 1999 Kasım ayından beri kullanıyoruz. Yani üstünden epey bir vakit geçti.

HTML5 ile gelen yenilikler

CSS'li günlere aşina olduğumuz şu günlerde, w3.org'da bunu anlamış olmalı ki son sürüm ile artık font elementlerini (align, width, height, background, style)kullanmayacağız.

Yeni elementler eklenmiş : section, article, aside, header, footer ve nav. Bu yeni elementlerin sayfadaki kullanılış biçimleri de CSS'ye benzer şekilde < div id="nav" > şeklinde olacak.

10 tane yeni giriş (input) biçimi eklenmiş. Önceden sadece text'i kullanırken şimdi datetime, datetime-local, date, month, week, time, number, range, email ve url giriş biçimlerini de kullanabileceğiz.

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

Mortal Kombat da kabuk değiştirdi: Mortal Kombat vs. DC Universe

kadirgunay — Tue, 15 Jul 2008 09:03:00 GMT

Midway'in efsanevi oyunu Mortal Kombat, ilk çıktığı andan beri kendisine özel bir hayran kitlesi oluşturdu ve ilk versiyonları dâhil olmak üzere hâlen pek çok kişi tarafından oynanıyor. Her ne kadar Mortal Kombat 4 ile 3 boyutlu grafiklere geçince fanatikleri tarafından yavaş yavaş beğenilmemeye başlansa da, yeni karakterler, kombolar, "fatality"ler ile küskün oyuncuların gönlünü almayı başarabildi.

Geniş bir karakter yelpazasine sahip sürümlerinden biriyle Mortal Kombat

Ardı ardına çıkan Mortal kombat sürümleri, yeni yeni karakterler türetti. Bu karakterlere gizli karakterler de eklenince oyunun oynanabilitesi arttı ve oyuncular, meraklarına yenik düşerek çıkan her yeni sürümü almaya ve oynamaya başladılar. Özellikle LCD ekranlar ile PlayStation, Xbox gibi konsol sistemlerinin yaygınlaşması ve eski "arcade" (atari salonu) keyfine yakın bir tat vermesiyle iyiden iyiye artmaya başladı.

CAPCOM vs SNK ile değişik karakterler bir araya toplanmıştı

Son zamanlar moda olan iki ayrı karakter topluluğunu tek oyunda birleştirme olayına Mortal Kombat da katıldı. Daha öncesinde Capcom vs SNK, Marvel vs Capcom gibi yapımlar, farklı oyunlardaki farklı karakterleri bir araya getiriyordu. Mortal Kombat ise DC Comics'in karakterleriyle sentezlenmiş olarak karşımıza çıkıyor (açıkçası, Midway vs. DC Universe olsaymış daha anlamlı olurmuştu).

Mortal Kombat vs. DC Universe'den bir ekran görüntüsü

Yeni oyunun yayımlanan ilk videosunda Batman ve Subzero karşı karşıya getirilmiş. İlk başta "Nasıl olur?" denilecek kadar uzak karakterler harmanlanmış. Bu sadece bir örnek. Gerçekten de, bu iki karakterin karşı karşıya getireleceğini daha önceden hiç düşünemezdik. Batman gibi kahramanların nasıl "fatality" ya da "kombo" yapacağı ise en merak edilen sorulardan birisi. Ayrıca, Superman gibi çelikten öte neredeyse ölümsüz bir kahramanın oyuna dâhil edilmesi de enteresan olmuş.

Mortal Kombat'ın ilk sürümünlerinden bir "fatality" örneği

Oyun, 2008 sonbaharında Xbox 360 ve PlayStation 3 için çıkacak. Oyunun resmi sitesine buradan, görsellerine buradan, videolarına ise buradan erişebilirsiniz.

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

Blogçulara masaüstü blog editörü

kadirgunay — Sat, 10 May 2008 17:27:00 GMT

Wordpress kullanırken kendi görsel yazı editöründe (tinyMCE) yaşadığım problemden dolayı yazılarıma eklediğim resimleri ne istediğim gibi boyutlandırabiliyor, ne de istediğim gibi yerleştirebiliyordum. Bu yüzden masaüstünden bloguma yazı göndermek için program araştırmalarım sonucunda zoundryraven'ı buldum.

Masaüstünüzden her blogunuz için hesaplar oluşturarak, wysiwyg (ne görüyorsan o!) editörü ile yazdığınız metinleri blogunuza otomatik olarak gönderen, Wordpress, Bloogger ve Windows Live Spaces başta olmak üzere birçok blog servisiyle uyumlu. Türkçe karakter sorunu bulunmuyor ve arşivinizi aynı zamanda bilgisayarınıza yedeklemenizi sağlıyor.

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

Ücretsiz Profesyonel temalar {Xhtml/CCS}

kadirgunay — Fri, 02 May 2008 11:40:00 GMT

Nuvio Templates

Nuvio Templates içerisinde birbirinden şık ücretsiz temaların ve tema demolarının bulunduğu bir site. site kendini iki ana bölüm içerisinde inceliyor: Web Template ve Wordpress Template.

Web Template bölümünde kendinize göre düzenleyebileceğiniz rengarenk, sade, hoş temalar mevcut.

Wordpress template bölümünde ise hoş wordpress temaları mevcut. bir kaç örnek tema vermek gerekirse:

Web Template

Darkside-03

tema XHTML 1.0 Strict ve CCS'dir.
tema ayrıntıları için buraya ,demosu için buraya, indirmek için buraya tıklamanız yeterli.

Wordpress Template

Simply-09

tema aynı standart özelliklerdedir. tema ayrıntı sayfası için buraya, demosu için buraya, indirmek için buraya tıklamanız yeterli.

daha fazla tema için siteyi ziyaret ediniz.

ilgili bildirgeç yazıları;

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

"hulu" hizmete açıldı

kadirgunay — Thu, 13 Mar 2008 06:19:00 GMT

daha önce yalnızca davetli kullanıcılara açık olan Hulu video sitesi 12 marttan itibaren genel kullanıma açıldı. Daha önce burada bahsedilmiş olduğu gibi hulu, amerikadaki favori tv showlarını, dizileri, nba maçlarını ve hatta sinema filmlerini istediğiniz zaman ücretsiz olarak izleyebileceğiniz bir web hizmeti. Arkasında nbc ve fox var. Ücretsiz olmasının sebebi reklam destekli olması. Siz program, dizi veya film o anda her ne izliyorsanız arada 1-1.5 dakika süre ile zorunlu olarak reklam izliyorsunuz. Yalnız bu hizmet maalesef amerika ile sınırlı. siteye gidip herhangi bir videoya tıkladığınızda şu ibare ile karşılaşacaksınız. " bu video ülkenizde veya bölgenizde gösterime uygun değildir. özür dileriz." Ancak bu durumu aşmanın bir yolu var. Yine daha önce burada bahsedilmiş olan "hot spot shield" adlı yazılım bizim geçiş biletimiz. önce programı buradan indiriyoruz. Bilgisayarımıza kuruyoruz. programın masa üstündeki simgesine çift tıklayarak çalıştırıyoruz. Program tarayıcımızı kendi ana sayfasıyla birlikte açıyor. açılan sayfada "run hotspot shield" butonuna tıklıyoruz. programın biz e bir "ip" adresi atamasını bekliyoruz. "Connected" ikazını alana kadar bekliyoruz. son olarak adres çubuğuna sitemizin url'sini giriyoruz. hepsi bu kadar. İyi seyirler...

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