Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

SmashingMagazine’den güzel bir makale daha. Farklı alanlarda kullanılabilecek 50 yeni Css tekniği derlenmiş.

Merhabalar. Başlıktan da anlayacağınız üzere bu yazımda sizlerle Google’ın sevdiği Url yapısını konuşmak istiyorum. Aslında Google’ın site sahiplerinden istediği şey çok basit. Url’lerin nasıl olması gerektiğini kısa maddelerle anlatacak olursak;

Url Yapısını Mümkün Olduğunca Basit ve Anlaşılır Tutun!
Google www.siteadi.com/index.php?id=a5ebc gibi bir url yerine bundan daha basit bir url’yi tercih eder. Google’ın da söylediği gibi örnekte verilen tipte bir url’yi kullanıcı anlamaz ve aklında tutamayabilir. Bu nedenle örneğimizde verilen url’nin bir Hakkımızda sayfasına açıldığını düşünürsek www.siteadi.com/index.php/hakkinda şeklinde bir kullanım daha iyi olacaktır.

Url’de Noktalama İşaretleri Kullanın!
Can alıcı noktalardan birisi de bu sanırım. Google alt çizgi (_) yerine tire (-) kullanılan url’leri daha fazla önemsiyor. Sözgelimi www.siteadi.com/genelicerik.html gibi bir kullanım yerine www.siteadi.com/genel-icerik.html Google için daha sevimli :)

Sözün özü şudur ki; Google kısa, basit, anlaşılır, gerektiğinde tire işareti ile ayrılan url’leri oldukça sevmekte. Yukarıda kısaca anlatmaya çalıştığımız konunun detayları için Google Webmaster’da Türkçe bir doküman mevcut. Daha fazlası ve Google Web Yöneticisi Araçlarını kullanmak için sizi böyle alalım.

Bu seferde bizden bir kısa kısa haber. t-infection.com’u Wordpress 2.8.2′ye yükselttik. Şu haliyle oldukça başarılı bir yükseltme oldu. Bir iki noktada aksama olsa da eski yöntem manuel dosya eklemesiyle onları da hallettik. Şimdi kaldığımız yerden devam edelim :)

Efendim bu gönderiyi yazarken öyle mutluyum ki anlatamam. Alisko.org‘dan tanıdığımız Ali Bahşişoğlu güzel bir eklenti geliştirdi. Bu eklenti adından da anlaşılacağı üzere eski yazılarınızda size bir uyarı mesajı gösteriyor. Sizin belirlediğiniz bir zamandan önce yazılan yazıları okumak istediğinizde eklenti sayesinde bir uyarı mesajı görünüyor. “Bu yazı xx gün önce yayınlanmış olduğundan güncelliğini yitirmiş veya içeriğindeki bilgilerin geçerliliği kaybolmuş olabilir. Herhangi bir yanlış anlaşılmadan bu site sorumlu değildir” şeklinde bir uyarı yazısı çıkıyor.

Eklentinin kurulumu da oldukça basit. Eklentiyi Wordpress.org eklenti dizininden indirip wp-content/plugins bölümüne klasör olarak atın. Daha sonra yönetim panelinizden eklentiyi aktifleştirin. Panel ayarlar bölümünde eklentinin kaç gün önceki yazılara bu uyarıyı ekleyeceğini belirten ayarları (ve tabi uyarılar için geçerli olan renk ayarlarını) yaptıktan sonra kullanmaya başlayın. Dilerseniz görünmesini istediğiniz uyarı mesajının metnini de değiştirebilirsiniz. Herhangi bir kod eklemenize veya fazla işleme gerek olmadan eklentiyi kullanabilirsiniz.

Ali’nin eklentiyle ilgili yazmış olduğu gönderiye da buradan ulaşabilirsiniz. Bu eklentiyi bizlere kazandırdığı için Ali’ye teşekkürlerimi sunuyorum.

Tasarım yaparken renkler ve renk seçimi oldukça önemlidir. Ben de tasarımlarımı yaparken mutlaka birbirine uyumlu renkler seçmeye özen gösteriyorum. Hem göz yormayacak hem de birbiriyle uyumlu olabilecek renkleri yan yana getirmeye çalışıyorum. Yukarıdaki resimde kullanmış olduğum renklerden bazılarını görüyorsunuz. Bu renklerin birçoğunu t-infection.com üzerinde de görebilirsiniz. Renklerin metin olarak sıralı halini yazının sonunda görebilirsiniz.

Renk seçimi konusunda Adobe Kuler ve benzeri servisler size oldukça yardımcı olabilir. Ayrıca Ertuğrul sağolsun ColourLovers‘tan haberdar olmamı sağladı. Renk seçimi konusunda size yardımcı olabilecek bir başka kaynakta burası bana kalırsa.

#2E83FF #E6E6E6 #F91364 #6A8C0F #95CB01
#F0F6F8 #83AA19 #93CA01 #EB157A #C0C0C0
#121212 #28E3FF #74CFF9 #B8DDFF #FF9000

Merhabalar. Ext Core tıpkı bilindik diğer Javascript kütüphaneleri gibi bir kütüphane. Bu kütüphane ile oluşturulan uygulamaları çok seviyorum. Hızlı ve kolay uygulanabilir yapısı nedeniyle son projemde bu kütüphaneyi kullanmaya karar verdim. Özellikle uygulamalara giydirilen tasarımlar çok hoş ve uygulamanın göz alıcı olmasını sağlıyor.

Bu yazımızda sizlere Ext Core Menu bileşeni kullanarak Wordpress sitelerimizde kategorilerimizi bu menü ile nasıl göstereceğimizi anlatacağım. Bir nevi Ext Core Menu’yü Wordpress tabanlı sitemize entegre edeceğiz ve böylelikle kategorilerimizin açılır bir menü ile görünmesini sağlayacağız.

Merhabalar. Günümüz web tasarım anlayışı içinde bir web sitesinde bulunması gereken olmazsa olmaz ögelerden birisi de ikonlardır. İkonlar küçük olmasına karşı oldukça etkili birer tasarım elemanıdır. Sitemizi ziyaret eden kullanıcılara sitedeki yerleşime bağlı olarak birçok şeyi bu küçük şirin ikonlar anlatabilir. Ben de yapmış olduğum tasarımlarda ikonları oldukça sık kullanırım.

Bu yazımızda sizlere ikonlarla ilgili bir web servisini tanıtacağım. İconza isimli bu servis ile kendi ikonlarınızı özelleştirip siteden indirebiliyorsunuz. Site size anasayfada verilen ikonların renk, arkaplan rengi, boyutu gibi özellikleriyle dilediğiniz değişikliği yapıp bu ikonları indirme fırsatı sunuyor. Bu değişiklikler sonucunda birbirinden güzel 70 ikona sahip olabiliyorsunuz. Dilerseniz özelleştirdiğiniz bir ikonun üzerine tıklayıp sadece onu indirme şansınız da bulunuyor. İkonların hem tek tek hem de topluca indirilebilmesi güzel bir seçenek olmuş. Açıkçası Iconza’dan neden bu kadar geç haberim oldu kendime kızıyorum. Servisi görüp denediğimde oldukça hızlı olduğunu ve basit yapısı sayesinde tüm kullanıcılara hitap edebileceğini gördüm. İkon arayışı içindeyseniz ve ikonlarınızda kendi renklerinizi istiyorsanız Iconza tam size göre.

Wordpress tabanlı olan ve birbirinden güzel sitelerin derlendiği galeri/gösterim (showcase) sitelerin derlendiği bir yazı. Wordpress tabanlı sitesi olup ilham almak isteyenler için birebir.