Web Standartları için arşiv

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II

Ocak 6th, 2010 • 36 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , , , , ,

Ana Sayfa Kodlaması

Bir önceki makalemde sizlere kodlamaya başlamadan önceki süreci anlattım. Şimdi sizlerle sitenin Ana Sayfasını nasıl kodladığımı anlatmaya çalışacağım. Bu makaleye yazacağımı düşünerek kodlama yaparken notlar tutmuştum, bu makale biraz da o notların derlemiş hali şeklinde olacaktır.

Okumaya devam edin »

Arayüz Geliştiricilerin Görev Tanımı

Kasım 2nd, 2009 • 30 yorum CSS, Web Standartları, XHTML
Etiketler: , , , ,

Şu anki bulunduğum durum ve FirendFeed’deki Arayüz Geliştiricileri grubunun etkisi ile bu yazıyı yazmayı düşündüm. Bir çok şirket eleman ararken bazı şartları ileri sürüyor, peki bunlar ne kadar gerçekçi. Bir listede ben çıkardım, sizlerde katkıda bulunursanız Arayüz Geliştiricilerini Görev Tanımı’nı çıkarmış oluruz.

Aslında bundan önce bir web ajansının yapısını ve iş akışını çıkarmak gerekir ve buna göre görev tanımları yapılmalıdır, ama o biraz daha kapsamlı bir iş.

Bizim memlekette genelde bir iş yapılır daha sonra standartları yerleşir. Aynı durum web mecrasında da var. Bir çok kişi bu mecrada çalışmasına ve bir sektör oluşmasına rağmen iş akışı ve görev tanımları tam olarak oturmamıştır. Ben yaklaşık 10 senelik bir çalışma hayatımdaki yaşadıklarım ve okuduklarım ile Arayüz Geliştiricileri için şöyle bir liste çıkardım;

Bu liste tasarımcı, programcı, flashçı ve Arayüz geliştirici ayrımını yapabilmiş şirketler için geçerlidir. Memlekette hala bu ayrımı yapmamış şirketlerin olması üzücü. Ayrıca yukarıda tanımladığımız Arayüz Geliştiricilerinin Görev Tanımı zamanla gelişebilir. Örneğin Arama motoruna uygunluk ve erişebilirlik ve javascript  için gelecekte ayrı birimler kurulabilir. Daha da ileri gidip jquery geliştirici bile aranabilir. Malum sektör hızlı gelişiyor.

CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek

Haziran 15th, 2009 • 10 yorum CSS, Web Standartları
Etiketler: , , , , , ,

Sözde sınıf ve elementler makalesinde değindiğim bir konu idi bu. Ancak genelde bu özelliği tasarımcılar ve kod yazarları atlıyor. Şimdiye kadar ki hiç bir projemde kullanma gereği duymadım açıkçası. Ama bence kullanılabilirlik açısından önemli bir özellik. Bundan sonraki projelerimde kullanmayı düşünüyorum.

http://www.evalotta.net/ sitedeki uygulamayı görünce çok hoş bir şey olduğu aklıma geldi. Bende bu konuda bir şeyler yazmalıyım diye not ettim. Nasip bu güneymiş.

İnternet tarayıcıları daha önce ziyaret ettiğimiz sayfa bağlantılarını ön belleğinde tutar. Biz ön belleği silmediğimiz müddetçe hafızasında kalır. CSS bize daha önce ziyaret ettiğimiz sayfa bağlantılarının stilini değiştirme imkanı sunar, böylece kullanıcıya sen burayı daha önce ziyaret etmiştin bilgisini verebiliriz. İnternet tarayıcıları ziyaret edilmiş bağlantılara kendileri standart bir stil atarlar. Mesela Firefox altını çizili ve mor renkli yapıyor.

stadart_ff

Tarayıcılar bize bu ayrımı gösterir, tabi biz bağlantı tanımları değiştirmediğimiz müddetçe. Biz bağlantıya genel tanım yaptığımızda bu özellik bir bakıma göz ardı edilecektir. Bir çok projede bu tanımlamayı yazpıyoruz.

a{color:#f00;}

genel_bag_renk

Yukarıdaki tanımlama tüm bağlantı tipleri için genel bir tanımdır ve ziyaret edilmiş sayfa stilinide belirler.

Bizim amacımız ziyaret edilmiş bağlantıları farklı stil ile belirterek ayrımı göstermek. Bir çok yerde  yazı üstünü çizerek belirlenir.

a:visited { text-decoration: line-through; }

ziy_sayfa_uzeri_ciz

Örneği görmek için tıklayınız.

Diğer bir yöntemde ardalan resmi koymak. Bu yöntem ile hoş bir görüntüde sağlamış oluyoruz. http://www.evalotta.net/ sitesi buna çok güzel bir örnek.

a:visited {
    padding-right:20px;
    background:url(images/ziyaret_edilmis_baglanti.gif) right top no-repeat;
    color:#666;
    text-decoration:none;
}

ziy_sayfa_oki

Örneği görmek için tıklayınız.

Benzer yöntemlerle birçok alternatif oluşturulabilir. Ayrıca :before ve :after ile oluşturulan örnekler var ama hala ie6 hayatta olduğu için ve :before ve :after özelliklerini desteklemediği için pek kullanma taraftarı değilim.

Kaynak

Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer)

Haziran 12th, 2009 • 20 yorum CSS, Web Standartları, XHTML
Etiketler: , , ,

yapisik_altalanBir çok sitede karşılaştığımız sayfanın dibine yapışık alt kısımları bu makalede anlatmaya çalışacağım. Bunu hiç javascript kullanmadan sadece css yardımı ile yapacağız.

Site içeriğinin az olduğu durumlarda sayfanın alt kısımları normal akış içerisinde ise yukarı doğru kayacaktır ve hoş olmayan görüntülere neden olacaktır. Bu gibi durumları engellemek için sayfamızın alt kısımlarını sayfa dibine yapıştırmalıyız, böylece sayfa içeriğinin az olması ve çok olması durumunda  alt kısmın yerini aynı olacaktır.

Bu işi yapmak için bir kaç türlü yöntem geliştirilmiştir, mantık olarak aynı olan bu yöntemlerde farklı tarayıcılardaki sorunlara çözüm bulmak için farklılıklar içerir. Ben bunlarda bazıları çeşitli projelerimde uyguladım, ancak makaleyi yazarken en iyisi hangisi ise onu yazmaya karar verdim. cssstickyfooter.com‘um anlattığı yöntem benim gördüğüm en iyi yöntem.

Kodumuzu yazmaya başlarsak.

XHTML kodu:

<div id="kapsul">
    <div id="ustAlan">
		<h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div id="icerikAlani">
        <div id="icerik">
        </div>

        <div id="icerikSagAlani">
        </div>
    </div>
</div>
<div id="altAlan">
</div>

XHTML kodunda dikkate değer olan kısım içerik alanı ve alt alanı iki farklı bölüm olarak kodlamamız. altAlan ve diğer alanları kapsayan bir kapsayıcı katmandan(#kapsul) oluşuyor kodumuz. Bizim yaptığımız örnekte üst alanı ve iki kolonlu içerik kısmını kapsayıcı katman içine alıyoruz.

CSS Kodu

html, body, #kapsul {height: 100%;}
body > #kapsul {height: auto; min-height: 100%;}
#icerik {padding-bottom: 133px;} /* altAlan yukseligi ile ayni olmali */
#altAlan {
	position: relative;
    margin-top: -133px; /* altAlan yuksekliginin eksi degeri */
    height: 133px;
    clear:both;
}

Buradaki 133px tanımına dikkat etmemiz gerekiyor. 133px altAlan yüksekliğidir ve 3 yerde birden aynı değeri kullandığımıza dikkat edeniz.

Kodu incelersek birinci ve ikinci satırda yüksekliklerin tüm alanı kapsaması için farklı tarayıcılar için %100 tanımını yapıyoruz.

3. satırda alta yapışık alan kadar padding değeri vererek içerik kısmının alt kısmın altında kalmasını engelliyoruz.

4-8 satır arasında alt alan tanımlarımızı yapıyoruz. Göreceli konumlandırdığımız alanı içerik alanında padding-bottom değeri ile açtığımız boşluğa yerleştirmek için negatif üst kenar boşluğu değeri veriyoruz.

Bu yöntemde float uygulanmış içerik kısmında tam alanı kapsayamama sorunu ile karşılaşıyoruz. Float uygulanmış alanların kapsayamama sorunu çözmek için http://www.fatihhayrioglu.com/float-uygulanmis-elementleri-tam-kapsayamama-sorunu/ makalemiz anlattığımız yöntemi kullanıyoruz.

.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

Bu sınıfı tanımlıyoruz ve içeriği kapsayan(#icerikAlani) katmana atıyoruz.

<div id="kapsul">
    <div id="ustAlan" class="kapsayamamaSorunu">
		<h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div id="icerikAlani" class="kapsayamamaSorunu">
        <div id="icerik">
        </div>

        <div id="icerikSagAlani">
        </div>
    </div>
</div>
<div id="altAlan">
</div>

Bu yöntemin ryanfait.com’un yöntemine göre en büyük avantajı bence ryanfait.com’un yöntemindeki anlamsız tampon katmanı gibi bir fazla kodlamadan kaçınış oluyoruz.

Örneği görüntülemek için tıklayınız.

Sorunlar ve Çözümleri

- Benim kullandığım projede body ve üstAlan’daki margin-top değeri sorun çıkardı. Bunun yerine padding kullanarak sorunu çözdüm. Üst kısım body’deki margin-top ve margin-bottom tanımları sorun çıkarıyor, bunun yerine padding kullanın.

- Ayrıca yazı tipi boyutunu büyük kullanmak isteyen kullanıcılarda sorun çıkabileceği söyleniyor. Eğer yazı tipi boyutunu piksel(px) vb. kesin değerler ile belirlerseniz bu tip sorunları engelleyebilirsiniz.

- Son olarakta asp.net ile oluşturulan sayfalarda <form> elemanı ile kapsanan sayfanızda sorun çıkabilir. Bunu engellemek için kodunuzu

	html, body, form, #kapsul {height: 100%;}

şeklinde değiştirmelisiniz.

Kaynaklar

CSS ile sayfalama görselliğini ayarlama

Mayıs 29th, 2009 • 10 yorum CSS, Web Standartları, XHTML
Etiketler: , , , ,

sayfalama_Web sitelerin kodlarken genelde hafızamdaki hazır metotları kullanıyorum. Ancak sonra farklı bir yöntem görünce aklıma “acaba bu daha mı iyi” sorusu geliyor ve araştırma yapmaya başlıyorum.  Sayfalamada da aynı durum söz konusu benim için. Burada yaptığım araştırmayı sizlerle paylaşmayı düşünüyorum. Genel olarak sayfalama hakkında bir giriş yapalım sonra kodlamaya geçeriz.

Sayfalama

Web sitelerinde sayfalama genel olarak içeriğin uzun olduğu durumlarda kullanıcıya daha kullanabilir sayfalar üretmek için içeriğin belli mantıksal kısımlara ayrılmasıdır. Genelde arama sonuç sayfalarında, günlük(blog) sitelerinde, uzun içeriğe sahip makalelerde uygulamalarına rastlarız.

Sayfalama alanları genel olarak sitede gezinme alanlarının(navigation) bir parçasıdır. Sitedeki kullanılabilirliği ve düzeni sağlayan normal menü yapılarının dışındaki yapılardır. Aslında bir bakıma gezinme elemanı sınıfına da sokabiliriz. Sayfalama yaparken aşırıya kaçıp görünüşü çok hoş olsun diye kullanıcıyı zora sokan tasarımlardan kaçınmak gerekir. Sayfalamada önemli olan kullanıcı dostu ve işlevsel bir yapı oluşturmaktır, ondan sonra görsellik gelir. İşlevselliği kaybetmeden görsellikde geliştirilebilir. Okumaya devam edin »

Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu

Nisan 13th, 2009 • 4 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , ,

Tablo satırına ardalan resmi tanımladığımızda Firefox ve Opera’da sorun yok iken Internet Explorer ve Webkit tabanlı tarayıcılarda(Safari ve Google Chrome) sorun çıkarıyor. Biz burada Internet Explorer için nasıl bir çözüm üretebiliriz onu göstereceğiz. Webkit tabanlı tarayıcılar için çözüm bulamadım üzgünüm.

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
}

İE de hatalı resmi

Örneği görmek için tıklayınız.

tanımlaması Firefox ve Opera da sorunsuz çalışırken IE ve Webkit tabanlı tarayıcılarda sorun çıkaracaktır.

Çözüm için

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
    position:relative;
}

table tr td{
    color:#fff;
    font:12px Arial, Helvetica, sans-serif;
    background:none;
}

İE düzeltişmiş görüntüsü

tanımlamaları yeterlidir. Örneği görmek için tıklayınız.

Kaynak

http://test.pixelbebop.com/test33/

« Önceki Yazılar

Sonraki yazılar »

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.