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 3 İle Dışarıdan Font Dosyası Kullanma
31 Ağustos 2009
Mustafa AYDIN
CSS3 ile bir sürü yenilik girdi hayatımıza. Bunlardan biri de var olan yazı fontlarıyla yetinmeyenler için dışarıdan font dosyası tanıtma özelliğidir. Bu şekilde çok değişik fontları sitemizde dilediğimizce kullanabiliriz. Tabii bunun için öncelikle sunucumuza attığımız fontumuzu css dosyamıza tanıtmamız lazım. Bunun içinde css dosyamızın en başına şu şekilde bir kod eklemeliyiz:
1 2 3 4 | @font-face { font-family: SketchRockwell; src: url(‘SketchRockwell.ttf’); } |
Sonrasında bu fontu dilediğimizce istediğimiz yerde kullanabiliriz:
1 2 3 4 5 6 | .ornek-sinif { font-family: SketchRockwell; font-size: 3.2em; letter-spacing: 1px; text-align: center; } |
Şu anda bu özelliği destekleyen tarayıcılar: Firefox 3.5, Safari (3.2.1, Windows), Internet Explorer 7 ve 8 (Eğer. eot uzantılı yazı fontu kullanıyorsanız, pek fazla mümkün değil.)
Yatay Menüyü, Listeyi Ortalama
30 Ağustos 2009
Mustafa AYDIN
Yatay menü ya da liste yapıp, onu sayfada ortalayamıyor musunuz? Çünkü listenizi büyük ihtimalle float özelliği ile oluşturuyorsunuzdur. Float özelliği ile yapılmış listelerde liste elemanları sağa yada sola dayalı olduklarından dolayı ortalanmazlar. Bu yüzden yapmanız gereken listenize bir genişlik vermektir. Ancak bunun da şöyle bir eksik yönü var. Diyelim bir Wordpress teması yaptınız ve bu temayı dağıtacak ya da satacaksınız. Ama bu temayı alanların liste uzunluğunu nerden bileceksiniz ki. Bu temayı her kullanan kullanıcının liste uzunluğu hep farklı olacaktır. İşte bu durumlarda listeyi düzgün bir şekilde ortalamanız zor olur.
Eğer listenizi float değil de display özelliği ile yatay duruma getirirseniz, istediğiniz şekilde bu listeyi ortalayabilirsiniz. Bunun için de display:inline değerini kullanmanız gerekir ve asıl listeyi ortalayacak olan ise ul etiketinde yazıları text-align:center kodu ile ortalamanızdır. İşte örnek XHTML VE CSS kodları. Css’de display:inline ve text-align:center kodlarının hangi etiketlerde olduğuna dikkat edin:
RSS Besleme Dosyanızda CSS Kullanın
30 Ağustos 2009
Mustafa AYDIN
RSS Besleme dosyanızda Css kullanmak çok kolay. Böylece RSS Beslemenizde istediğiniz elementi görünür kılıp istediğiniz elementi de gizleyebilirsiniz. CSS sayesinde karmaşık haldeki metinleri daha anlaşılır hale sokabilirsiniz. Peki, Css dosyanızı nasıl RSS Besleme dosyanıza tanıtacaksınız. Çok basit, aşağıdaki örneğe bakarak ayarlayabilirsiniz.
1 2 3 | < ?xml version="1.0" ?> < ?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> ... |
Rss etiketinizde istediğiniz elementleri görünür kılıp istediğiniz elementleri de gizlemek için ise örnek kodumuz şu şekilde:
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.
CSS 3 Dahil Tüm CSS Kodları (PDF Dosya)
28 Ağustos 2009
Mustafa AYDIN
CSS 3 ile birlikte birçok özellik eklendi. Bu yüzden herkes tarayıcıların CSS 3’e uyumlu olmasını bekliyor. Gerçi Firefox son sürümüyle bazı özellikleri destekliyor ama bizim için yetmez. 
İşte CSS 3 ile eklenen yeni kodlar da dahil tüm kodlar aşağıda linki bulunan pdf dosyasında. Unutmadan dosya içeriği İngilizce ama çok basit İngilizce… Sözlükten birkaç kelimeye bakarak çok rahat anlarsınız. Zaten cümle de yok. Sadece komutlar verilmiş ve karşısında da aldığı değerler. Mutlaka yardımı olacaktır. Her tasarımcının elinin altında bulunması gerekir bence.
CSS İle Gradyan (Gradient) Yazı Efekti
28 Ağustos 2009
Mustafa AYDIN
Gradyan efektli başlıklar yazmak için hep Photoshop’u kullanırız ve bu yazıyı siteye eklemenin tek yolu ise resim olarak eklemektir. Ancak bu yöntemle yaptığınız gradientleri her türlü başlığa, yazıya uygulamak çok daha kolay. Süper olur dediğinizi duyar gibiyim. Hem de javascript, flash gibi ek hiçbir şeye ihtiyaç duymadan. Sadece gerekli olan IE6 için pngFix eklentisi. Yöntemimiz ise <span> etiketine css ile position:absolute; komutu vermek ve Photoshop gibi bir programla hazırladığımız arkaplanı bu etikete atamak. Kısacası <span> ile verdiğimiz arkaplan yazının üstüne gelecek.
Bu yöntemi her türlü font ile kullanabilirsiniz. İlk önce yapmamız gereken şöyle bir başlık oluşturmak:
1 | <h1><span></span>Başlık Burada</h1> |
CSS Nimetleri – Sayfayı Dikey Ortalama
28 Ağustos 2009
Mustafa AYDIN
Daha önceki yazımda sayfayı yatay olarak ortalamayı göstermiştim. İşte şimdi sıra geldi dikey ortalamaya. Bu yöntem intro hazırlamada, sadece iletişim bilgilerin olduğu bir sitede ya da sizin hayal gücünüze göre ortalanmış ve kaydırma çubuğu içinde olan sitelere uygulanabilir. Öncelikle şunu belirteyim bu yazıyı http://blog.themeforest.net/tutorials/vertical-centering-with-css/ adresinden İngilizce makaleden uyarladım. Burada birkaç yöntem anlatılmış. Ben de bunlardan en yararlı gördüklerimi aldım ve burada anlatıyorum.
Ücretsiz Web İconlar
27 Ağustos 2009
Mustafa AYDIN
Web 2.0 ile birlikte ziyaretçi odaklı siteler çoğaldıkça ikonların önemi daha da arttı. Çünkü bu ikonlar görsellik olarak katkı sağlarkan bağlı oldukları bağlantıları (linkleri) desteklediklerinden dolayı onları daha ön plana çıkartmaktadırlar. Böylece paylaşım arzusununa, paylaşım ihtiyacına destek vermekteler. Zaten Web 2.0 demek bilgi paylaşımı demek sayılır. Web 2.0 için ikonların büyük önemi olduğunu düşünerek bu ikonlara sitemde yer vermek istedim. Eee sadece bilgilendirmek yetmez, biraz da o bilgileri desteklemek gerek ne de olsa. İşte bağlantılarınızı destekleyebilecek bağlantılar:
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.
CSS Nimetleri – Margin ve Padding İle Konumlandırma
26 Ağustos 2009
Mustafa AYDIN
CSS kutu mantığına dayanır. Yani yapılacak her işlem kutular içerisinde yapılır diye düşünebilirsiniz. Yani bağlantılar (linkler) bile aslında kutular içerisinde yer alır. İşte bu kutuları bulundukları yere göre konumlandırma yöntemlerinden biri de margin ve padding kodlarıdır. İlk önce alttaki resmi inceleyelim.
Resimde görüyoruz ki bir kutumuz var ve bu kutular border ile çevrelenmiş. Resimde yer alan “Margin boşluklarını” görüyoruz. İşte kutunun bulunduğu yere kutunun dışından boşluk bırakmak için margin kodunu kullanırız. Kullanımı ise şöyledir:
