Kadir GÜNAY’ ın Css, Xhtml, jQuery ve Wordpress Günlüğü

CSS Framework - CSS Yapıları

Daha önce hatırlarsanız http://www.kadirgunay.com/web-standartlarinda-en-bilinen-5-yanlis-anlasilma.html bağlantılı yazımda standartlara uymak istiyorsanız muhakkak web sitelerinizi CSS ile kodlamalısınız demiştim ve bunun etkilerini anlatmıştım. İşte bu yazımda da sizlere CSS Yapıları yani Framework dediğimiz olayı anlatacağım. Framework kelimesinin karşılığına baktığımızda önümüze çokca seçenek sunuluyor; “yapı, çatı, iskelet, kadro ve kafes” bunlardan en bilinen kelimeler. Ben genel anlamda yapı dedim. Sonuç olarak yaptıkları iş de bu kelimeye uygun.

Framework - Yapı Nedir?

Framework işi gereği hazır sınıfların, betik kodlarının ve örneklerin bulunduğu yapıların genel adıdır. Hemen hemen her yazılım dilinin kendine özgü bir veya birden fazla çeşitli işlere yaran yapıları ve bu yapılara ait hazır kodları, örnekleri bulunur.

Framework Ne İşe Yarar?

Genel olarak düşündüğümüzde;

• Hızlı üretim
• Bakımı kolaylaştırmak (güncelleme, değişiklik v.b durumlar)
• Projeye modülerlik kazandırma
• Farklı projeleri birleştirme ve yeniden kullanma
• Açık kaynak kod (tüm frameworkler değil)

gibi işlevsellikler sağlar.

CSS Frameworkleri - Yapıları Nedir, Nasıl Kullanılır?

Google’ da “css framework” diye arama yaptığınızda karşınıza bilindik css yapıları çıkacaktır. Bunlar,

YAML

Blueprint CSS

LogiCSS

Elements

Eswat

YUI

Yukarıda verdiğim CSS Yapılarını açık kaynak kod oldukları için kolayca indirip kullanabilirsiniz. Örneklerin içinde çok güzel ve işinizi çok kolaylaştıracak kod örnekleri mevcut. Örnek verirsek, 2 kolonlu ve daha fazla kolonlu css kodlamaları, menu (navigasyon örnekleri), ie6 ve alt versiyonları için kutu modelleme ve hackler, css sıfırlama v.b daha bir çok kod örneğini göreceksiniz.

Bu css yapıları sayesinde kısa zamanda web sitelerinizin çatılarını oturtabilir ve daha hızlı bir şekilde css kodlaması yapabilirsiniz.

Kaynak Siteler;

• http://www.sinerjik.org/yazi/css-framework-tasarimlar-icin-iskeletler/
• http://www.wymstyle.org/en/
• http://elements.projectdesigns.org/
• http://www.alistapart.com/articles/frameworksfordesigners

sIFR

Merhaba arkadaşlar. Bu yazımda size jQuery’ nin sayısız nimetlerinden birisi olan sIFR tekniği hakkında bilgi vereceğim.

Öncelikle sIFR nedir ona bakalım?

sIFR jQuery eklentilerinden birisi ve özelliği web sitelerinizdeki metinleri flash tabanlı olarak istediğiniz yazı tipine çevirmenize yarıyor.

Peki jQuery nedir?

jQuery bir Javascript kütüphanesi. Bu kütüphane aracılı ile çok basit şekilde web sitelerinizde çok güzel uygulamalar yapabilirsiniz. Yazımı kolay ve kısadır.

sIFR’ i kullanabilmemiz için gerekli dosyalar nelerdir?

• jQuery kütüphanesi - jquery-1.2.1.pack.js
• jQuery Flash eklentisi - jquery.flash.js
• jQuery sIFR eklentisi - jquery.sifr.js
• Embed (sanırım Türkçesi içine gömmek oluyor) edeceğimiz yazı tipini hazırlayacağımız fla dosyamız - sifr.fla
• fonts dizini

Tüm bu dosyaları ve örnek dosyayı buradan indirebilirsiniz.

Adım 1 - Yazı Tipini Embed Etme (Flash içine gömme)

zipli dosyamız içinden çıkan sifr.fla isimli dosyamızı flash programı ile açın. İç içe gömülü movieclipler göreceksiniz. Metin kutusunu görünceye kadar moviecliplerin içine girin. Karşınıza örnek bir metin gelecek. Orada bulunan metni seçin ve değiştirmek istediğiniz yazı tipini seçerek metnin yazı tipini değiştirin. Değişikliği yaptıktan sonra metin ayarlarının bulunduğu yerde “Embed” isimli bir düğme göreceksiniz işte o düğmeye tıklayın. Karşınıza gelen pencerede “Basic Latin (95glyphs)” seçin ve aşağısında bulunan “Include these characters” isimli kutucuğa şunları ekleyin; “ŞşİiÖöÇçÜüIıĞğ” (tırnaklar olmadan ekleyin). Bu yaptığımız işlem şunun içindir; seçtiğimiz yazı tipi Türkçe karakterleri desteklemiyor ise buraua girdiğimiz karakterleri de almasını sağlayacağız.

Bu işlemleri yaptıysanız eğer son olarak ctrl+enter tuşları yardımı ile swf dosyanızı oluşturun. Bu dosyayı kendi belirleyeceğiniz bir dizin içine atın. Ben fonts olarak ayarladım ve fonts dizini içine attım.

Adım 2 - Javascript dosyalarını tanıtmak

zip dizini içinden çıkan

• jquery-1.2.1.pack.js
• jquery.flash.js
• jquery.sifr.js

dosyalarımızın yolunu <head></head> etiketleri arasında göstererek tanıtın.

Adım 3 - jQuery tetikleyicisini eklemek

Bildiğiniz gibi javascript kodları bir tetikleyici kod satırı ile çalışmaktadır işte jQuery’ de tetikliyici kod bloğu da şu şekilde olmaktadır;

 $(document).ready(function(){

// Your code here

});

Şimdi de sIFR için kullanacağımız kodu yazalım

$(function(){

$.sifr({path:'fonts'});

$('h3.KadirGunay, p.KadirGunay').sifr({font:'NeoSans'});

});

Burada dikkat etmemiz gereken şu; $(’.KadirGunay’).sifr({font:’NeoSans’}); bu kısımda .KadirGunay olarak geçen kısım CSS dosyamızda KadirGunay sınıfına atadığımız özellikleri alacaktır ve yine aynı şekilde KadirGunay sınıfındaki değişkenleri sIFR eklentisi ile belirlediğimiz yazı tipine değiştirecektir.

Hepsi bu kadar arkadaşlar

Wordpress 2.7 Stabil Sürüm Çıktı

Wordpress

Beklenen an geldi! Wordpress 2.7 kararlı sürüm çıktı. Yönetici panelinin kullanışlığı kesinlikle görülmeye değer. WP’ yi seviyorum

Son sürümü http://www.wordpress.org adresinden indirebilirsiniz.

Edirne Semaları…

Dün öğlen 15:00 gibi dostum Tahsin ile konuşmaya başladık msnden. Zaten evde canım sıkılmıştı, sabah annemi uğurlamıştım. Eve gelip uyumadım ve öylesine takılıyordum. Derken Tahsin “Kalk gel abi hem muhabbet ederiz hem biraz takılırız” dedi. Aslına bakarsanız benim de uzun zamandır aklımdaydı Edirne’ ye gitmek ama bir türlü zaman olmuyordu. Hazır bayram tatili dedim ve hemen atladım otobüse İstanbul otogarına oradan da Edirne semalarına doğru yola çıktım.

Dün akşam üzeri geldim. Ve sabah 03:00′ a kadar hem muhabbet hem php çalıştık. Derken bugün oldu. Meşhur Edirne Tava Ciğeri’ ni tattım sonunda

Not: Normalde burası kendime ait bir günlük olmasına rağmen günlük anlamında değil de daha çok sektörel yazılar yazma çalışıyordum. Bu yazı da arada kaynadı hafiften.

Nedenleri, Sonuçları ve Hataları ile IE6

Internet Explorer 6

7 senedir hayatımızda olan ve bu gidişle çıkmayı da pek düşünmeyen bir tarayıcı IE6. Bu yazımda kendimce IE6′ nın halen neden hayatımızda olduğu, hayatımızda olduğu için doğurduğu sonuçları ve diğer tarayıcılara göre web üzerindeki hatalarını anlatmaya çalışacağım.

Bu yazıyı yazmamda ki en büyük etkenlerden birisi bir kaç paragraf sonra göreceğiniz ve siteme ait olan bazı istatistiksel sonuçlar oldu. Elbette bunların yanında başka etkenler de yok değil ama inanın büyük bir şaşkınlık yaratan bu istatistiklerdi bende. Sözü fazla uzatmadan Internet Explorer 6 hakkındaki yazımıza başlayalım;

Nedenleri

Az önce de dediğim gibi bundan tam 7 sene önce Microsoft’ un Windows XP sürümü ile her zaman olduğu gibi sisteme entegre biçimde biz bilgisayar kullanıcılarının hizmetine sunuldu. O zamanın şartlarında elbette diğer tarayıcılardan farklı olarak (IE’ ler içinde) kendine has bazı özellikleri vardı. Hatta bu has özellikler MS Windows SP2 ile biraz daha arttı ve ek olarak Pop-Up engelleyici, Bilgilendirme çubuğu ve dosya indirme diyalog penceresi v.b özellikler ile gelişimini sürdürdü. Ama bu saydığım özelliklerden ileriye gidemedi ve o hali ile kaldı. O bu hali ile kaldı fakat teknoloji ve internet gelişimini sürdürdü. Yani artık IE6 karşısında duran teknolojiye ayak uyduramaz hale geldi. Bu da ister istemez bazı sonuçlar doğurdu. Birazdan o sonuçları hep beraber inceleyeceğiz ama ondan önce insanlar halen neden IE6′ yı kullanmakta bu kadar ısrarlılar onları biraz irdeleyelim ve bir kaç resim ile IE6′ nın popülerliğini görelim;

kadirgunay.com tarayıcı sonuçları

İşte siteme ait olan tarayıcı sonuçları (WP eklentisi olan StatPress ile elde edilmiş sonuçlar). En üstte yani birinci sırada hakkında yazdığımız IE6 krallığını sürdürmekte. 1785 ziyaret %59.1 oran ile. Hemen arkasından Firefox 3 581 ziyaret %19.2 oranla ikinci sırada. Detaylı görmek isterseniz resme tıklamanız yeterli olacaktır.

Ben sıradan bir günlük yazarıyım. Fakat yazdığım konular işim olan css, xhtml, web arayüzleri, jquery v.b konular. En çok üzen olay ise internet teknolojileri ile ilgili bir günlük yazarının sitesi halen (ki daha önce IE6 ve web standartları ile ilgili bir kaç yazı daha yazdım) IE6 ile görüntüleniyor. Hadi diyelim ki kadirgunay.com kısa bir süredir yayında buyrun diğer günlük yazarlarının istatistiklerine bakalım;

• Fatih Hayrioğlu - www.fatihhayrioglu.com
• Hasan Yalçın - www.hasanyalcin.com
• Hakan Demiray - www.dmry.net
• Fatih Turan - www.fatihturan.com
• Karbonizma - http://karbonizma.blogspot.com

İsmini saydığım günlük yazarlarının sitelerine ait tarayıcı istatistiklerini görmek için lütfen isimlere tıklayınız.

Gördüğünüz gibi bazı günlük yazarlarının sitelerinde de IE6 krallığını koruyor. Peki bu krallığı sürdürmesinin NEDENLERİ nelerdir?

• Bana göre en büyük en büyük neden bilinçsiz kullanıcılar : Teknolojiden bir haber, standartları takip etmeyen çok fazla interneti araştırmayan, sadece çalışıyor mu bu bana yeter mantığındaki kullanıcılar.
• Firmalar : Bir çoğunun lisansı olmasına rağmen halen eski sürümleri kullanmaya devam eden ve çalışanlarına yeni sürümler ile ilgili bililer vermeyen aksine yeni sürümlerin performansı etkileyeceğinden korkan firmalar.
• Lisans : Bildiğiniz gibi IE7 ve IE8 (şu anda beta aşamasında) doğrulama sonucu ile güncellenen sürümler. Öyle ki kullanılan çoğu sistem (ev kullanıcıları ve bunlara büyük oranda firmalar da dahil) korsan olduğundan dolayı yeni sürümler kullanılamıyor.
• Açık Kaynak bilgisizliği : Şu an piyasada lisanslı bir çok uygulamanın yaptığı iş ile aynı işi yapan bir çok açık kaynak yazılım var. Fakat bu açık kaynak yazılımlardan insanların bi’ haber olması. Bu da açık kaynak mantığını bilmediklerinden kaynaklanıyor.

Sonuçları

Her ne kadar IE6 çoğu uyum testi platformundan çıkarılsa bile kullanımı ve krallığı halen devam ediyor. Peki bu krallık sürdükçe ne gibi sonuçlar doğuruyor? Bu sonuçlar en çok da web kodlayan kişileri etkiliyor. Benim nacizane görüşlerimi ve sıkıntılarımı dile getireyim;

• Yaptığım veya yapılan her tasarımı iki ya da üç kez gözden geçirmek zorunda kalıyorum
• Kullandığım scriptleri özenle seçmek zorundayım
• Kullandığım imajları png harici seçmek zorundayım
• Hata ayıklama sürecinde harcadığım zamanı ikiye katlıyorum
• Css dosyasında kullandığım seçicilere dikkat etmek zorundayım
• Sürekli Css hackleri kullanmak zorundayım
• Fazladan bir Css dosyası hazırlamam gerekli

IE6′ nın renderi diğer tarayıcılara göre biraz daha farklı. Bunu şöyle açıklayabiliriz; IE6 yazdığını css kodlarını kafasına göre algılıyor ve kullanıcıya yansıtıyor. PNG uzantılı imajları desteklemiyor. Css 2.1′ de kullandığınız seçicilerin bir çoğu (yeni nesil: çocuk seçiciler, gruplamalar v.b) IE6da desteklenmiyor. Tasarladığınız her tasarımı kodlarken IE6 için ya farklı bir CSS dosyası ya da aynı CSS dosyası içinde belirli hacklere ihtiyaç duyuyorsunuz. Haliyle bu da dosyanızın şişmesine, optimize olmamasına ve CSS doğrulamasından geçmemesine sebep olabiliyor. Sitenizi kodlarken kullandığınız çoğu script IE6da çalışmıyor ya da IE6 desteklemiyor.

Hataları

Aslına bakarsanız nedenleri ve sonuçları kısmında IE6′ nın hatalarına dair de değindik inceden. IE6′ nın en büyük hatalarından birisi renderının farklı olması ve kullanıcı arayüzü istenildiği gibi yansıtmaması. Bunları hemen 1-2 örnek ile inceleyelim

IE6da hatalı site

Göründüğü gibi sitenin sağ kolonu IE6 harici diğer tarayıcılarda normal gözükürken IE6da ise sol kısımdaki alanın üstüne binmesi ile aşağıya kaymış. Peki bu alan onun üzerine biniyorsa bunun diğer tarayıcılarda da aynı olması gerekmez mi? Hayır! Çünkü IE6′ nın render farkı işin içine giriyor. Kısaca yeni nesil tarayıcıların hemen hepsi Acid testinden iyi bir yüzde ile geçtiler ve W3C standartlarına uymaya gayret ediyorlar ama IE6 bunların dışında kalıyor. Dışında kaldığı gibi kullanımdan da çekilmiyor. Css kodunuzda yazdığınız bir margin değeri yeni nesi tarayıcıların hepsinde düzgün gözükür fakat IE6da hayır.  Yine benzer bir örnek vereceğim;

IE6da hatalı site

Bu sitede de bilindik hatalar karşımıza çıkıyor yine render farkı ve yine kaymalar. Bu sorunların yanında bir de script hataları var. İşte örnekteki sitede kullanılan script ile ilgili bir hata var ve bu hata IE6′ da karşımıza çıkıyor. Oysaki diğer yeni nesil tarayıcılar da bu scripti kullanıyorlar.

Kısaca

İşim gereği hızlı ve anlaşılabilen xhtml ve css kodları yazmaya çalışıyorum. Olabildiğince hack kullanmadan standartlara uyan web siteleri hazırlamak istiyorum ama maalesef bunları bir yere kadar başarabiliyorum. O bir yerde de karşıma IE6 çıkıyor. Bu yazımda anlatmak istediğim günümüz teknolojisinde yer alan ve standartlara uyan uygulamalar kullanmak. Her ne kadar bilginiz olmasa da doğru ve yanlışı ayırt edebilecek kadar karar verebileceğinizi düşünüyorum. Bu yüzden standartlara uyan ve bu standartları detsekleyen tarayıcılar ile web sitelerinizi test edin. Büyük bir kısım bunu kullanıyor deyip ona göre hazırlamayın. Bu şekilde devam eden süreçler hem standartlara uymayan uygulamaların kullanımdan kalkma süresini uzatır hem de insanların bilinçlenmesine engel olur.

Lütfen standartları destekleyen tarayıcılar kullanmaya ve web sitelerinizi bunlara göre ayarlamaya gayret edin.

Teşekkürler

Bana bu yazıda istatistikleri ile yardımcı olan Fatih Hayrioğlu’ na, Hasan Yalçın’ a, Fatih Turan’ a, Hakan Demiray’ a ve Ahmet Burak Bal’ a teşekkür ederim.