Yeniden merhabalar. t’infection.com’da birkaç kez Xhtml/Css bileşimine sahip menüler yapmış ve sizlerle de nasıl yapılacağını paylaşmıştık. Bu makalemizde yine bir menü tasarımını birlikte oluşturacağız. Ancak bu sefer ki menümüz diğerlerinden biraz daha profesyonel olacak. Zira bu menümüzde Xhtml/Css’den daha iyi faydalanacak, menümüzü ikonlarla destekleyecek ve W3C standartlarına uygun bir kod yazımı elde edeceğiz.

Menümüzün yapısal tasarımını hazırlarken Html’de çokça kullandığımız Ul ve Li etiketlerinden faydalanacağız. Bu etiketlerin yazılımını düzgün bir şekilde yaptıktan sonra Stil dosyamızla bu etiketlerin değerlerini düzenleyeceğiz. Her zaman olduğu gibi Xhtml kodumuz gayet basit olacak, görünümümüzü de Css kodlarımızla şekillendireceğiz. Menümüzü oluşturmak için klasik olarak yine ihtiyacımız olan şey boş bir editör sayfası. Ben yine sizlere Notepad++ tavsiye edeceğim. Tabi klasik alışkanlarımızdan vazgeçemiyoruz, siz yine de kendi editörünüzü kullanmaya devam edin. :) Sözü fazla uzatmadan hemen menümüzü yapmaya başlayalım.

Gönderinin Devamını Okuyun…

Horizontal Menü Örneği

Tekrar merhabalar t’infection okurları. Uzun süre önce sitemizde sizlere Xhtml/Css bir menü yapımını anlatmıştık. Bu menümüz Dikey (vertical) diye niteleyebileceğimiz bir menü tipindeydi. Bu makalemizde de çok fazla kod yığını olmadan basitçe bir menü yapımını anlatacağız. Yalnız bu sefer farklı şekilde horizontal yani yatay diyebileceğimiz bir menü olacak ve menümüzü iki adet küçük gif resimle destekleyeceğiz.

Gönderimizin üst tarafında görünen menüyü oluşturmak için gerekli olan şey sadece boş bir not defteri sayfası. Dilerseniz şimdi menümüzün kodlarını yazmaya başlayalım.
Gönderinin Devamını Okuyun…

Web sayfalarımızın kodlama geçerliliğini (Markup Validation) her zaman W3C‘nin Validation servisleriyle test ederiz. Bildiğiniz üzere Xhtml geçerliliği için Xhtml Validator ve Css geçerliliği için de Css Validator sayfalarını kullanırız. Tabi başvuracağımız en büyük merci şu anda W3C ancak internette sitelerimizi geçerlilik yönünden test edebileceğimiz birçok servis bulunmakta. Bu yazımızda sizlere bu birkaç siteden söz edeceğiz.
Gönderinin Devamını Okuyun…

Web tasarımı söz konusu olduğunda mutlaka Form’lardan bahsedilir ve kullanılır. Çünkü web formları (her türlü formdan bahsediyorum) ziyaretçiden bilgi alma, bilgi aktarma, sonuç döndürme, bilgi girişini sağlama gibi görevler üstlenirler. En basit haliyle bir “İletişim Formu” bile sitenizdeki ziyaretçinin size ulaşmasını ve düşündüğü konuda yazmasını sağlar.

Bu yazımızda sizlere bir iki küçük Css taktiği ile Web Formlarımızı nasıl daha güzel hale getireceğimizi anlatacağız. Tabi önce işin mutfak kısmından başlıyoruz ve Xhtml ile formumuzu yazıyoruz…
Gönderinin Devamını Okuyun…

İnternet’te bazen öyle siteler görüyorum ki bunları tanıtmadan asla rahat edemiyorum. Bunlardan birisi de Xhtml Challenge. Anafikir olarak şunu söyleyebilirim ki; Xhtml kodlamaya sahip olan 2 site arasında kullanıcıların oyuna dayanarak bir yarışma yapılıyor ve galip site anasayfasından duyuruluyor. Benzeri sitelere göre sadece Xhtml kodlamaya sahip siteleri kabul etmesi ve farklı alanlarda birçok Xhtml kodlama siteyi göstermesi nedeniyle benim Yer İmleri’me girmiş durumda.

Sitenin güzel tasarımı ve kolay üye olunabilmesi de artı özelliklerinden. Sanıyorum bu modelde ve anlayışta bir Türk web sitesi yok. Şayet varsa ve beni yorumlarınızla bilgilendirirseniz çok sevinirim. Unutmadan sitenin adresini tekrarlayalım; Xhtml Challenge…

İnternet üzerinde görmüş olduğumuz birçok web sitesi ve kaynak üzerinde onlarca bağlantı görürüz ve bunları kullanırız. Bu bağlantıların gelişen web akımlarına ve özellikle de Web 2.0 tasarım özelliklerine göre şekillendirildiğini biliyoruz. Zira özelleştirilmiş bağlantılar sayesinde tıklayacağımız bağlantı sonucunda bir harici sayfaya mı gideceğimizi yoksa bir dosyayı mı indireceğimizi bilir hale geliyoruz. Bunu bizlere bildiren elbette bağlantımız başında kullandığımız küçük ikon ve resimler oluyor.

Şüphesiz uygulamanın yapılmasında en büyük pay Css’nin. Xhtml ile de bu özelleştirilen bağlantıları kullanarak site ziyaretçilerimize değişik bağlantı profilleri sunmuş oluyoruz. Bu makalemizde en basit yöntemiyle gönderilerimizde ve hazırlamış olduğumuz websitelerinde kullanılan bağlantılara nasıl resim ekleyeceğimizi anlatacağız.
Gönderinin Devamını Okuyun…

Efendim geçte olsa yayınlama ve duyurma fırsatı bulduğumuz güzel bir olayı sizlere aktarmak istiyorum. Yılların Html’si, 1999 yılından bu yana 4. versiyonunu kullandığımız HTML (Hyper Text Markup Language) dili 22 Ocak’ta yapılan duyuruyla 5.0 sürüme yükseltildi. Html 4 ile 5 versiyon arasındaki farkları bu sayfada detaylı biçimde görmek mümkün.

Uzun süredir Html’nin revize edilme haberlerini duyuyor hatta Xhtml 2.0 ile olacak olan ilişkisini ve yeni eklenecek olan elementleri merak ediyorduk. W3C’nin bizlere duyurduğu
kadarıyla gelişmeleri takip etme ve okuma fırsatımız da oldu. 22 Ocak itibariyle W3C’nin duyurusunu aldık ve Html 5.0′ın çıkışını kutluyoruz.

Birçoğumuzun tasarıma başlarken öğrenmek için kendini parçaladığı bu dilin bu denli gelişimini gördükçe çok seviniyorum. Html 5.0 hakkında ileride detaylı bir yazı yazmayı düşünüyorum. Özellikle yeni eklenen etiketler ve parametreler hakkında “yeniden” konuşacak olmak beni oldukça heyecanlandırıyor.

Umuyoruz ki yakın zamana kadar tarayıcılarımız Html 5.0′ın yeni etiketlerini ve özelliklerini destekler de bizlerde seviniriz. Tarayıcı desteği konusunda Mozilla’dan yana şüphemiz yok ancak Internet Explorer’ın bu yeni duruma nasıl uyum göstereceğini zamanla göreceğiz. Tasarım ve kodlama ile uğraşan herkes için hayırlı olması dileğiyle.

(Öncelikle belirtmeliyim ki aşağıda okuyacağınız bilgi eski bir yazıdan alıntı. Yeni bir proje için rastgele arkaplan gösterecek ve bunu siteyi fazla yormadan sadece Css ve Php yardımıyla yapacak bir bileşen arıyordum. Eski dostumuz A List Apart imdadıma yetişti ve orada bulunan uygulamayı yaparak sonuca ulaştım. Umarım bu eski bilgi sizler için yararlı olur.)

Öncelikle Neler Gerekli?
Her girişte veya her sayfa açılışında farklı bir arkaplan resmi göstermek için Php (4.2 ve üzeri) Css ve Xhtml çalıştıran bir sunucunuz olması yeterli. Bundan sonrası çok küçük bir iki işleme kalıyor. Dilerseniz uygulamanızı yerel sunucu üzerinde (localhost) dilerseniz de kendi hostunuzda yapabilirsiniz. Bununla birlikte farklı gösterimler için “aynı boy ve genişlikle” formatı (gif, jpeg, png) önemli olmayan resimleriniz olmalı. Bu resimlerinizi hazırladıktan sonra hemen uygulamamıza geçebiliriz.

Rastgele Arkaplan Resmi Atama
Kısaca aşağıda yapacağımız küçük işlemi anlatmak istiyorum sizlere. Bu işlemde bir .php dosyasında yazılmış olan fonksiyon ile resimlerimizi bir dizin içindeyken (veya başka bir dizindeyken) kendi .css (style) dosyamız içine tanımlamış olduğumuz alan ile gösterime alıyoruz. Şimdi size gerekli olan şey Alistapart.com üzerindeki orjinal .php dosyası. Burada gördüğünüz kodları bir metin editör içine alıp “dongu.php” olarak kaydedin. Kayıt işlemini yaptıktan sonra resimlerinizin bulunduğu dizin içine atın.

Bu aşamadan sonra resimlerimizi göstereceğimiz alanın CSS tanımlamasını yapmamız gerekiyor. Bu tanımlama için şöyle bir kod yeterli olacaktır.

#dongualani
{
background:#fff url(dongu.php) no-repeat center top;
width: 800px;
height: 170px;
}

Gördüğünüz gibi stil dosyamızda “dongualani” diye bir id oluşturduk ve bu id üzerinde beyaz arkaplan rengi ve arkaplan resmi olarakta daha önce oluşturduğumuz “dongu.php” dosyasına ithafta bulunduk. Burada dikkat ettiyseniz arkaplan tanımlamasında bir resim dosyası kullanacağımıza bir .php dosyası kullandık ve .php dosyasının işlem yapmasını sağladık. Bu alanda bulunan resim genişlik ve yüksekliğinde siz değişiklikler yapabilirsiniz. Bu kodu kopyalayıp stil dosyanıza kaydediniz.

Stil dosyasını da kaydettikten sonra artık yapacağımız tek şey stil olarak tanımladığımız id sınıfına Xhtml üzerinde atıfta bulunmak. Bunu da aşağıdaki kod yardımıyla gerçekleştirebiliriz.

<div id=”dongualani”> </div>

Yukarıda yer alan kodu da rastgele arkaplan resmimizin görünmesini istediğimiz yere kopyalıyoruz. Bundan sonra dosyamızı kaydederek sonucu görebiliriz. Ben şurada bir örnek çalışma yaptım ve hem Firefox hem de Internet Explorer üzerinde test ettim. Sonuç gayet güzel…

Sorular ve Problemler
Şayet yukarıdaki işlemleri yaptınız ve sonuca ulaşamadıysanız adımları yeniden takip edin. Yukarıda bahsettiğimiz gibi dongu.php ve resim dosyalarınızın aynı dizinde olduğundan emin olun. Şayet resimleriniz ve dongu.php dosyanız farklı bir alandaysa dongu.php içinde $folder = ‘.’; alanına dizin yolunuzu yazın. Bununla birlikte #dongualani kodu içindeki dongu.php dosyasının tam yolunu yazmanız da uygulamanın çalışası için yeterli olacaktır. Ancak aynı dizin içinde dosyalarınız barınıyorsa bunu yapmanıza gerek yoktur.

Kaynaklar: A List Apart | Sonspring.com

Digg‘de günlük rutin gezintilerimi yaparken bir başlığa rastladım. “53 CSS-Techniques You Couldn’t Live Without”. Smashing Magazine sitesi tarafından yazılmış hoş bir bildiri. Tamı tamına 53 güzel Css uygulamasını gösteriyor ve ilgili alanlara linkler vererek yazının daha da tatlı olmasını sağlıyor. Aklınıza gelebilecek tüm Css teknikleri işlenmiş, Css Navigasyonlar, Css Diagramlar, İleri düzey tablolar, tab menüler, image map’ler, formlar ve daha nicesi. Kesinlikle bakmanızda ve bookmarklamanızda fayda olabileceğini düşündüğüm bir site. Css ve Xhtml bileşimiyle neler yapılabildiğini görmek isteyenler içinse bu deryada küçük ama dikkate alınası bir örnek. (2 gündür ölesiye hastaydım, siteye gönderi yapamadım, sanırım böylelikle biraz olsun affettiririm kendimi)

Vitaly Friedman’ın Alvid.de isimli sitesinin bir alt bölümü vardır. Bilenler bilecektir, Web Developer’s Handbook’tan bahsediyorum. Bu “el kitabında” web designer ve geliştiriciler için birçok web kaynağına ulaşmak mümkün. Başlıca kategorilerini ise Xhtml, Css, Css Galeriler, Navigasyon ve Menüler oluşturuyor.

Bugün tekrar uğradım ve tasarımının yenilendiğini gördüm. Daha güzel bir tasarım yapılmış ve eski siyah ağırlıklı halinden sıyrılmış tamamen. Web tasarımı ve özellikle Xhtml-Css ile uğraşanlar için öncelikli bir kaynak diye düşünüyorum.

Hızlı Linkler: Vitaly Friedman | Web Developer’s Handbook | alvit.de