Beşiktaş Haber Portalı
SinerjiSoft için hazırladığım Beşiktaş Haber Sitesi tasarımının script giydirilmesi tamamlandı ve site yayın hayatına beta olarak basladı.
Siteye Katkım:
Tasarım, Xhtml ve Css Kodlama
CSS İle Yıldızlı Oylama Bölümü Yapalım
28 Ağustos 2009
Mustafa AYDIN
Genellikle video paylaşım sitelerinde gördüğümüz ama her türlü içerikte uygulanabilecek hoş bir uygulamadır yıldızlı grafiklerle oylama bölümleri. İşte şimdi de bu sistem css ile nasıl yapılabiliyor bir bakalım.
İlk adım olarak XHTML dokümanımızı hazırlayalım.
1 2 3 4 5 6 7 8 9 | <div class="yildiz">
<ul>
<li><a href="#" class="bir-yildiz">1</a></li>
<li><a href="#" class="iki-yildiz">2</a></li>
<li><a href="#" class="uc-yildiz">3</a></li>
<li><a href="#" class="dort-yildiz">4</a></li>
<li><a href="#" class="bes-yildiz">5</a></li>
</ul>
</div> |
Css kodlarımıza başlamadan önce yıldız grafiğimizi buradan sağ tıklayıp farklı kaydedelim.
Şimdi de css dosyamızı hazırlamaya başlayalım.
XHTML Kodlamanın Püf Noktaları
27 Ağustos 2009
Mustafa AYDIN
Seo ve Arama Motoru Optimizasyonu için sitemizin kodlaması da önemlidir. Çünkü arama motorlarının botları hatasız kodlamayı daha rahat okurlar ve indexler. Ben de önemli gördüğüm ince ayrıntılara burada dikkat çekmeye çalışacağım. Maddelere dikkat ederek daha iyi sonuç alabilirsiniz:
1. DOCTYPE
Doctype sitemizin türünü belirler. Yani site xhtml mi, html mi, sürümü nedir gibi sorulara cevap verir. Doğru kullanımı için Xhtml sitenizdeki doctype kodunuzu aşağıdaki kodla kontrol edin:
1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. |
2. CSS Kodlarınız İçin Ayrı Bir Dosya Oluşturun
Style kodları html belgeniz içinde de olabilir ancak kod sadeliği, aradığınızı daha kolay bulabilmeniz ve vara olan hataları daha çabuk görebilmeniz için ayrı bir dosya oluşturmanız önemlidir. Hatta gerekirse kolaylık açısından birden fazla css dosyası oluşturun.
XHtml Kodlamada br ve p Etiketlerinin Farkı
26 Ağustos 2009
Mustafa AYDIN
Doğru kodlama her zaman önemlidir. Ayrıca Seo açısından da büyük yararı vardır. Bu yüzden her zaman doğru kodlama için özen göstermeliyiz.
İster kağıt üzerine yazalım, istersek de bilgisayar üzerinde ofice uygulamaları üzerine yazalım her paragraftan sonra mutlaka yeni bir satıra başlarız. Bu yeni satır ve satır başı bize “Artık yeni bir paragraf okuyorsun.” der. İşte html kodlamada da tarayıcıya yeni bir paragrafın başladığını gösteren <p> kodudur. Tarayıcıya diyorum çünkü o kodları biz okumuyoruz, tarayıcı okuyor. 
Ancak bu konuda çok yaygın olan yanlış bir kullanım mevcut. Pek çok kişi <p> kodu ile başladığı metin içerisinde yeni bir paragraf oluşturmak için <br /> işaretini kullanıyor ve tüm metin bittikten sonra p etiketini kapatıyor. Bu kodlama tarayıcıya şunu söyler: “Metin en baştan en sona paragraftır.” Halbuki öyle mi, biz öyle mi istiyoruz, ya da öyle mi görüyoruz. Hayır. Böyle bir kodlamada bizim gördüğümüz ve istediğimiz her <br /> etiketinden sonra yeni bir paragrafın başladığıdır. Ama doğrusunu tarayıcı görüyor. Size yanlış bir kullanım örneği sunayım:
CSS (Cascading Style Sheet) Nedir?
25 Ağustos 2009
Mustafa AYDIN
CSS yani açılımı Cascading Style Sheet dilimizde Katmanlı, Basamaklı Biçim Dosyası olarak çevrilebilir. Adından da anlaşılacağı üzere CSS ile sitemizin biçimi, sitili üzerinde hâkimiyet kurarız. Aslına bakarsanız HTML’den farklı bir değil onun bir parçasıdır. En önemli özelliği de siteniz üzerinde yer alan elementlerin görünümünü birkaç kod yardımıyla değiştirmenize olanak sağlamasıdır. Bir düşünün; tablolarla bir site yaptınız ve sitenizde görünüm olarak birbirinin aynı bölümler var. Birinin görünümünü değiştirdiğiniz zaman uyumluluk için hepsini değiştirmeniz gerek. Bu da ek uğraş demektir, çünkü bütün tabloları tek tek ele almanız gerekir. Oysaki css kullanmış olsaydınız hepsini birkaç satır kodla çok kolay bir şekilde değiştirebilirdiniz.
Aynı zamanda HTML site görünümü üzerinde size istediğiniz sonucu verecek esneklikte değildir. CSS oluşturulduktan sonra işte bu problem ortadan kalkmıştır. Çünkü CSS tamamıyla görünüm üzerinde etkinlik gösterdiğinden oldukça esnektir.
Eski HTML siteler tablolarla yapılırdı. Peki, bunun dezavantajları nelerdir? Öncelikle tablolar site trafiğini olumsuz etkiler çünkü yeni nesil XHTML sitelere göre yüklenmesi oldukça yavaştır. Aynı zamanda site görünümü üzerinde tam istediğiniz sonucu alabilmeniz için çok uğraşmanı gerektirir ve yukarıda bahsettiğim gibi esnek değildir. Oysa CSS ve XHTML ile birlikte tasarımcıların hayatını kolaylaştıran ve tabloların yerini alan div’ler tasarım konusunda çok esnektirler ve daha hızlı yüklenebilirler. Aynı zamanda div’ler sayesinde tabloların çok karmaşık olan yapısı daha kolay halde halledilebilir olmuştur. CSS sayesinde de div’ler üzerinde tam hâkimiyet kurarak istediğiniz sonucu alabilirsiniz.
Style Kodlarının Yazılışı
Style kodlarının yazımının birkaç yöntemi vardır ve bunları maddelerle ve örnekleyerek açıklamak gerekirse:
Css ile tasarımda id ve class farkı
23 Ağustos 2009
Mustafa AYDIN
Css ile yaptığımız web tasarımlarda sürekli olarak “id” ve “class” etiketlerini kullanırız. Önemli olan, bu etiketleri kuralına göre mi kullanıyoruz yoksa kuralı mı bozuyoruz?
Id etiketi sayfa içerisinde her zaman tek kullanımlıktır. Eğer bir id etiketini birden fazla yerde kullanmışsanız w3 doğrulamada mutlaka size hata olduğunu söyleyecektir. Eğer css bilmeyen biriyseniz nasıl kullanıldığını göstereyim:
<div id=”id_adi”>
Görüldüğü gibi id adında türkçe karakter yada boşluk kullanılamaz ve eğer id=”id_adi” değerini birden fazla kullanırsanız hata yapmış olursunuz.
Class etiketiyse birden fazla kullanılabilir. Zaten class kelimesi İngilizcede sınıf anlamına gelmektedir. Burdan da anlaşılacağı gibi class etiketi bir sınıfı temsil eder ve o sınıfın tüm elemanlarında kullanılabilir. Kullanımında ise id yerine class yazarız. Tabii farklılıkları bu kadar değil, css yazılımınlarında da farklılık var. id etiketini “#” ile başlatırken class etiketini “.” ile başlatırız.
