Gün geçmiyor ki Internet Explorer yeni bir arızayla beni çıldırtmasın. Bugüne kadar hep standartları takip etmediği için çıldırtmıştı, bugün ise yeni bir standardı direkt desteklemeye başladığı için çıldırttı. IFrame içinde yer alan sayfalar Internet Explorer’da tarayıcıya çerez (cookie) gönderemeyince problemi araştırmaya başladım ve buradaki yazıya ulaştım.

Problem Internet Explorer’ın W3C tarafından gizlilik tercihleri ile ilgili oluşturulmuş Platform for Privacy Preferences Project, kısaca P3P adlı standardı desteklemesinden kaynaklanıyormuş. Tabi bu durumda buna bir problem demek doğru olur mu bu da tartışılır. Aslında iFrame içinde gösterdiğiniz sayfa farklı bir alan adından çağrılıyorsa, asıl alan adındaki çerezlerin etkilenmemesi/kötüye kullanılamaması için geliştirilmiş bir önlem. Firefox’ta varsayılan olarak bu ayar kapalı geliyor. İsteğe bağlı olarak kendiniz açabiliyorsunuz. Internet Explorer ise varsayılan olarak bu ayarı açık olarak kullanıyor. Lafı fazla uzatmaya gerek yok aslında. P3P hakkında detaylı bilgiye buradan ulaşabilirsiniz. Ben size sorunu nasıl çözebileceğinizden bahsedeyim;

İsterseniz çeşitli online araçlarla kendi P3P kodunuzu üretebilirsiniz(IBM P3P Policy Editor). Uğraşmak istemeyenler iFrame içinde çalışacak olan ve çerez gönderecek olan her sayfanın başlık bilgilerinde P3P için özel bir bilgi göndermeniz gerekiyor. Çeşitli platformlar için örnekleri ekliyorum. Burada yer almayan fakat sizin kullandığınız bir platform varsa, örnek olarak ekleyebilirseniz sevinirim.

PHP:

header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');

ASP.NET (C#);

HttpContext.Current.Response.AddHeader("p3p","CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"");

Django:

response = render_to_response('mytemplate.html')
response["P3P"] = 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

JSP:

response.addHeader("P3P","CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"")

Rails:

response.headers['P3P'] = 'CP="NON DSP COR CURa IVAa IVDa CONa OUR NOR STA"'

Bugün Fatih Hayrioğlu’nun not defterinde okuduğum “CSS Kod Yazma Düzeni” adlı yazı üzerine ben de kendi görüşlerimi paylaşayım ve uzun süren sessizliğimi bozayım dedim. Yazıya devam etmeden önce, Fatih’in yazısını okumanızı tavsiye ederim.

Fatih, kendi geliştirme sürecinden yola çıkarak, CSS kodu yazarken nelere dikkat edilmesi gerektiği, nasıl bir düzen/standart oluşturmanız gerektiği hakkında, maddeler halinde çok güzel bir yazı hazırlamış. Çoğu maddeye katılsam da kısmen katılmadığım maddeler ve eklemek istediğim noktalar söz konusu. Katılmadığım, farklı görüş bildireceğim noktalar ve eklemek istediklerime gelirsek;

“5. CSS dokümanlarınızı anlamlı bölümlere ayırın.”
Bu maddeye tam olarak katılmıyorum denemez aslında. Geliştirme aşamasında düzeni korumak ve aradığınız şeyi daha kolay bulmak açısından işinizi oldukça kolaylaştıracaktır fakat yayın aşamasında her bir CSS dosyası tarayıcının ayrı bir istek yapmasına yol açacağından performans açısından iyi olmayacaktır.

Yayına çıkmadan önce css dosyalarınızı birleştirip, kodlarınızı online optimizasyon yapan uygulamalar ile optimize edin. Bu optimizasyon uygulamaları, ortak kullanılan tanımlamaları bir çatı altında toplayıp, kısaltmalar uygulayıp, boşluk, sekme vb. tarayıcının CSS kodunu okurken pas geçtiği karakterleri eleyip, yayın için en uygun hale getireceklerdir.

“6. Her satıra bir tanım yöntemini kullanın”
Bir önceki maddede bahsettiğimiz parçalı kodlama düzenine sahipseniz, kod aralarına yorumlar ekliyorsanız bu yöntemi kullanmak kod okunabilirliğini düşürecektir. Geliştirme ortamında en rahat okunabilir şekilde kodunuzu geliştirin ve yayına çıkmadan önce bir önceki maddede belirttiğim gibi, bir optimizasyon uygulaması ile kodunuzu optimize edin. Kodlarınıza daha sonra dönüp bakmanız gerektiğinde, geliştirme ortamındaki kodu en rahat şekilde okuyabilirsiniz.

“8. CSS özellik tanımlarını sıralayın.”
Sıralama yapmak kodlarınıza tekrar göz attığınızda ya da takım çalışması yapıyorsanız bir başkasının kodlarına baktığınızda oldukça zaman kazandıracaktır fakat bence sıralamayı alfabetik olarak yapmak kodlara tekrar göz atma işini daha fazla pratikleştiriyor. Özellikle çok fazla özelliğe sahip tanımlamalarda aradığınız özelliği bulmak açısından alfabetik sıralamanın çok faydasını görebiliyorsunuz.

Tabi kod yazarken alfabetik sıralamada yazmaya çalışmak da kod geliştirme sürecini uzatır ve zorlaştırır. Ben geliştirme ortamı olarak Notepad++ kullanıyorum. Notepad++ ile bu işlemi yapmak oldukça kolay. Alfabetik sıralanacak metni seçtikten sonra, TextFX menüsündeki TextFX Tools altında yer alan Sort lines case komutunu uygulayarak seçiminizi kolayca alfabetik sıralatabilirsiniz. Bir de buna Ayarlar menüsünden CTRL-1 vb kolay ulaşabileceğiniz bir kısayol atayarak, alışkanlık haline getirirseniz, hız konusunda da endişeniz kalmaz.

Son olarak konuyla ilgili, online olarak CSS optimizasyonu yapabileceğiniz siteler:
cssoptimiser.com
flumpcakes.co.uk/css/optimiser/

Bugün Google Translate ile ilgili Twit’imi gönderdikten sonra farkettim ki, microblogging benim normal blog alışkanlıklarımı kötü yönde etkilemiş. Eskiden böyle bir olayla karşılaştığımda hemen araştırma yapar, bir blog yazısı yazardım. Şimdi ya Twitter ya da FriendFeed‘e yazıp geçiyorum. Bu alışkanlığımı kırmaya çalışacağım. Bu yazı da bunun ilk adımı olsun.

Başlıkta da yazdığı gibi Google Translate artık Türkçe çeviri yapabiliyor. Dün konuyla ilgili önce Erman‘dan görüp, daha sonra da Google Operating System‘deki yazıyı okuduktan sonra, yine de Türkçe eklemeleri için çok çalışmaları lazım diye düşünmüştüm. Bugün FriendFeed‘de Ahmet Yükseltürk‘ün bu girdisini görünce hemen yeni bir tarayıcı sekmesi açıp Google Translate’e girdim.

Tüm özellikleri ile beraber (metin çevirisi, web sayfası çevirisi, tercüme ile arama, sözlük) hiç bilmediğimiz dillerden Türkçe’ye çeviri (ya da tam tersi) yapabilecek olsak da, denemelerimde gördüm ki Türkçe’nin yapısı itibarı ile köprünün altından daha çok su akması gerekiyor. Yine de bu adım çok sevindirici bir haber. Özellikle Türkiye’de hala kelime çevirisi ile çeviri yaptığını iddia eden onlarca program göz önüne alındığında.

Buna benzer bir projem vardı, arada o da güme gitti ama varsın gitsin.

Bu yazı orijinali Max Design‘da yayınlanmış olan “CSS Centering – fun for all!” isimli yazının Türkçe çevirisidir.

CSS kullanarak bir içerik bloğunu nasıl ortalarsınız? Bunun için hali hazırda iki metot var ve seçiminizi sayfanızın likit (tarayıcı penceresinin boyutlarına göre boyutları değişen tasarım) ya da sabit genişlikli bir tasarım olmasına göre yapmalısınız.

Likit tasarımlarda ortalama

Likit tasarımlarda içerik bloğunu her iki tarafına da marjin koyarak kolayca ortalayabilirsiniz. Marjinler em, piksel ya da yüzde birimi olarak ayarlanabilir.

div#container
{
margin-left: 10%;
margin-right: 10%;
}

Sabit genişlikli tasarımlarda ortalama

Teorik olarak içerik bloğunun sağına ve soluna otomatik marjinler verdiğinizde bloğun ortalanması lazım.

W3C görsel biçimlendirme modeli‘ne göre: “Eğer ‘margin-left’ ve ‘margin-right’ değerleri ‘auto’ ise, her ikisi de eşit değer kullanır. Bu da elemanı içerik bloğunun kenarlarına göre ortalar.”

Yani bir içerik bloğu şu kurallar uygulanarak ortalanabilir:

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

Ne varki bazı tarayıcılar otomatik marjinleri gözardı ettiklerinden bu şekilde içerik bloklarını ortalamazlar. Bahsettimiz tarayıcılar arasında şunlar vardır:

• NN4 (Mac ve Win)
• Win/IE4
• Win/IE5
• Win/IE5.5
• Win/IE6 (quirks modda)

Basit iki kural ekleyerek yukarıda saymış olduğumuz tarayıcılardan NN4 haricinde diğerlerinde bu problemi giderebiliriz.

1. body’yi ortala

Her ne kadar bu tarayıcılar otomatik marjinleri göz ardı etseler de “text-align: center” şeklinde bir kuralı hepsi tanır. Bu kuralı body elemanına uygularsak içerik bloğu doğru bir şekilde ortalanır. Yani yeni bir kural eklendi:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

2. text-align’ı sıfırla

Yeni kural ile ilgili tek problem, artık sayfadaki tüm elemanlar ortalandı. Bu tümünü ortalama probleminin üstesinden gelmek için yeni bir içerik bloğu ekleyerek “text-align: left” kuralını uygulayalım. Sonuç CSS kodu şu şekilde:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

Sonuçlar

İlk örnek sayfa bir içerik bloğunun otomatik marjinler kullanılarak, body ortalanmadan nasıl ortalanacağını gösteriyor.

“text-align: center” olmadan ortalama, örnek sayfası

İkinci örnek sayfa, bir içerik bloğunun otomatik marjinlerle nasıl sayfa içinde ortalanacağını ve aynı zamanda body elemanının ortalanmasını ve içerik bloğunda “text-align: left” kullanımını gösteriyor.

“text-align: center” ve “text-align: left” ile ortalama, örnek sayfası

Çeviriler

Bu makale Rodrigue tarafından Fransızca‘ya çevrilmiştir.

Espirili bir dille günümüzde bir web sitesinin üretim aşamasında nelere zaman harcandığını gösteren pasta grafik. Şu adreste buldum, Türkçeye çevirip paylaşayım dedim.

Bir süredir karalamalar.net ile ilgilenemiyordum. Bugün biraz vakit ayırmaya karar verdim ve bir kaç geliştirme/güncelleme yaptım. Artık UTF-8 üzerinden yayın yapıyoruz. Tüm yazıları ve yorumları UTF-8 e geçirmek çok zamanımı alacak diye korkuyordum ama ufak bir kopyala yapıştır işlemi ile çok kolay halloldu. Gerekli tüm dosyaları da UTF-8 formatına çevirdikten sonra etiketleme aşamasında ufak bir problem yaşadım ama bu problem sadece UTF-8 ile alakalı değildi.

İkinci bir değişiklik olarak artık yazılara başlıkları ile ulaşma şansımız var. Eskiden adres çubuğunda http://www.karalamalar.net/?p=69 vb şekillerde gözüken adresler artık http://www.karalamalar.net/kamil-koc-web-sitesini-yenilemis/ şeklinde gözükecek. Arama motorlarının daha iyi indekslemesi ve ziyaretçilerin bir yazıya dönüş yapmak istediklerinde tarayıcıların otomatik tamamlama özelliği sayesinde daha rahat erişebilmeleri için güzel bir değişiklik oldu.

Etiketleme sisteminde ufak bir güncelleme, veritabanında bir kaç iyileştirme çalışması da yaptım ve bir sonraki aşama için hazırım. Muhtemelen bir sonraki aşamaya bir altı ay sonra geçeceğim. :)

İki ay kadar önce sizlere, tatil planları yaparken Kamil Koç web sitesinde yaşadığım olumsuz deneyimlerden bahsetmiştim. Farkettim ki Google da Kamil Koç‘u sorguladığınızda yazmış olduğum yazı birinci sayfada, 5 ya da 6 sırada çıkıyor. Bunun da etkisiyle olsa gerek ilgili yazıya bir çok yorum eklendi. Kamil Koç’un seyahat kalitesi ile ilgili bir yorum yapamam. Çünkü daha önce Kamil Koç ile seyahat yaptıysam bile şu an hatırlamıyorum ama son yazdığım yazıdan bu yana Kamil Koç web sitesinde köklü değişikliker olmuş. İşte bu konuda yazabilirim.

Geçen sefer ilk golü YolKart uygulamasından yediklerini yazmıştım. Rövanş maçı olarak nitelendirebileceğim bu yazıda bu golün karşılığını vermiş sayılırlar. Şu an online sefer sorgulaması için YolKart zorunluluğu bulunmuyor. Rezervasyon ve Satış işlemleri için gerekiyor. Bu da gayet mantıklı. Yeni sitede YolKart Başvuru Formu henüz yapım aşamasında olsa da, 1,5 ay içerisinde tüm sitenin değiştirildiğini göz önünde tutarak geçen seferki kadar acımasız olmamaya karar verdim. :)

Firefox uyumluluğu ve Sefer Arama sayfasındaki(yeni adıyla Online Sefer Sorgulama) Tarih problemiyle ilgili de gerekli çözümler web sitesinde uygulanmış. Kamil Koç’un yeni web sitesi Firefox ile rahatça gezilebiliyor. Online Sefer Sorgulama Sayfasında, tarih girişi için güzel bir uygulama kullanılmış*. Kalkış yerini seçtiğinizde AJAX kullanılarak Kalkış yerine göre seçebileceğiniz varış yerlerinin listelenmesi, sorguyu gönderdiğinizde yine AJAX kullanılarak sonuçların aynı ekranda dönmesi sefer sorgulama işlemini oldukça kolaylaştırmış. Ekrana dökülen sonuçlardan sefer numarasına tıklayarak da ilgili sefer ile ilgili gerekli detay bilgiye ulaşabiliyoruz.

Farkettiğim bazı ufak ayrıntıları da yazmadan geçemeyeceğim;
İletişim bölümündeki Öneri ve Şikayetleriniz sayfasındaki TC Kimlik No sorgulamalı Form uygulaması yabancı uyruklu vatandaşların öneri ya da şikayette bulunamamasına yol açabilir. TC Kimlik Numarası sorgulaması, formu gönderenlerin gerçek insan olmasını kontrol amaçlı konulan bir uygulama ise daha farklı metotlarla bu doğrulama sağlanabilir*. Sitede bir doküman tipi (Document Type) belirtilmemiş olmasına rağmen kaynak kodlarında bakarak HTML 4.01 ile bir geçerlilik testi yaptığımda 40 uyarı ile karşılaştım. Çok fazla olmasa da umarım yakın zamanda daha geçerli bir kodlamaya geçiş yapılır.

Web sitesinin yenilenmesinde yazmış olduğum yazının ve altına eklenen yorumların ne kadar etkisi olduğunu çok merak ediyorum. Geçen sefer yaptığım gibi bu sefer de Kamil Koç yetkililerine bu yazıyı göndereceğim. Umarım konuyla ilgili bir cevap alabilirim. (Malesef geçen sefer herhangi bir cevap alamamıştım)

Tatil planımızın ulaşım aşamasında, otobüs ile seyahat için çeşitli firmaların web sitelerinden bilgi topluyordum. Ulusoy‘un web sitesinden ihtiyacım olan bilgileri aldıktan sonra diğer alternatiflere yöneldim. İkinci tercihim Kamil Koç oldu ve sitelerine girdiğimde sol taraftaki menünün istediğim bölümlere hızlıca yönelmemi sağladığı için ilk başta takdirimi topladı. Fakat ilk dakikalarda attığı bu gol maçı almasına malesef yetmedi.

Yedikleri ilk gol YolKart uygulamasından. Otobüs bilgilerini sorgulayabilmem için YolKart adını verdikleri bir sisteme üye olmam gerekiyormuş. YolKart üyesi olabilmek için de Kişisel bilgilerimden tutun da Meslek bilgilerime kadar bir çok bilgiyi doldurmam gerekiyormuş. Sürekli müşterilerine YolKart üyelik sistemiyle özel avantajlar sağlıyor olsalar sistem gayet makul bir sistem olacak fakat ilk kez kendilerini seçecek bir müşteriye böyle bir dayatma sunmaları beni rahatsız etti. Ayrıca bir günlük otobüs seferlerini sorgulamak için uzun uzadıya form doldurmak hamallıktan başka bir şey değil. Tüm bunların ötesinde kişisel bilgilerimin ne amaçla kullanılacağına dair hiç bir bilgi yok. YolKart nedir? Ne işe yarar? Bu bilgileri neden alıyorsunuz? İşte tüm bunlar Kamil Koç’un yediği ilk golü hazırlayan etkenler oldu.

İkinci gole gelelim. Web sitesi Firefox ile uyumlu değil. YolKart üye başvuru sayfasında istesem de başvuru formunu dolduramayacağımı gördüm. Evet sitenin altında bir ibare var: “Bu site en iyi IE 5.0 ve üzeri versionlarda çalışır.” ama ben bu ibareden sitenin diğer tarayıcılarda da çalışabildiğini, IE 5.0 ve üzeri ile daha güzel çalışacağını anlıyorum açıkçası. İçimde ufacık bir istek kaldıysa da karşılaştığım görüntü (birbirine girmiş form elementleri) yüzünden o da yok oldu. Kamil Koç ikinci golü de böyle yedi. (Sonradan farkettim ki sitenin menüsü Firefox’da düzgün görüntülenemiyor. Tıklamama rağmen hiç bir şey olmayan menü seçenekleri meğer sağa doğru başka bir menünün açılması içinmiş. Sayfayı Internet Explorer ile gezdiğim zaman anladım. Internet Explorer ile de menü düzgün görüntülenemiyor. Örneğin Sefer ara/Rezervasyon sayfasında açılır menü sağa doğru açıldığında form elementlerinin altında kalıyor. Web sitesinde düzeltilmesi gereken çok şey var.)

Üçüncü golü ise çok daha küçük bir ayrıntıdan yediler. Sefer ara/Rezervasyon sayfasında Sefer Tarihi geleceğe yönelik olacağına geçmişe yönelin. Gerçekten 2004′deki bir seferi sorgulayan var mı acaba? Benzeri bir çok sitede bu tip bir rezervasyon sayfasında karşınıza çıkacak formda tarih bilgisi otomatik olarak o günün tarihi ile doldurulur. Kamil Koç ise biraz geride kalmış. Siz bir karayolu taşımacılık şirketi olsanız sefer arayacak bir kişinin geçmiş tarihte sefer arayacağını düşünür müsünüz? Muhtemelen hayır. O zaman tarih bölümünde en azından bugünün bilgisinin seçili olmasını beklerim. Muhtemelen planladığım seyahat de yakın gelecekte olacağından içinde bulunduğum yıldan daha eski yılların formda olması bana bir şey ifade etmez.

Geçtiğimiz günlerde bir gazetenin pazar ekinde Kamil Koç hakkında okuduğum yazılar firma hakkındaki görüşlerimi olumlu yönde oldukça etkilemişti. Bugün de tatil planı için araştırma yaparken, araştırmamda ikinci sıradaydı. 3-1′lik skordan sonra artık Kamil Koç’un yeri oldukça aşağılara indi.

Bu yazının bir kopyasını kendilerine de göndereceğim. Bakalım nasıl bir cevap alacağım.

Evet evet, çalın. Bir önceki yazıda yalan söylemeye teşvik ediyordum şimdi de çalın diyorum. Pusulam şaştı sanırım. Bir gecede üç yazı yazmam da alışılageldik değil. Gerçekten ters giden bir şeyler olabilir…

Karalamalar’da da bulunan 80×15′lik sevimli buttonlar ile ilgili bir proje Steal There Buttons. Orijinal fikir 2002 tarihinde Jeremy Hedley‘den çıkmış. Daha sonra George Taylor McKnight 80×15 buttonları biriktirmeye başlamış. Bir süre sonra işler çığırından çıkmış ve imdada Jason Bergeman yetişmiş. Buttonların yönetilebileceği bir kontrol paneli hazırlayarak GTMcKnight’ın işini kolaylaştırmış. Bu yazıyı yazdığım sırada projede 3555 adet button kayıtlıydı. Buttonlar kategorilere ayrılmış olarak kullanıma sunulmuş. Alın ve kullanın deniliyor, tabi bu sırada tek bir rica var. Kullanacağınız buttonu kendi sunucunuz üzerinden yayınlamanız isteniyor. Haklı bir gerekçesi de var bu isteğin. Boyutları ufak da olsa tüm bu buttonların bir sunucuda bulundurulması ve sürekli bağlantı verilmesi üzerinde çalıştığı web sunucusunun bant genişliğini tüketeceğinden projenin sürekliliğini de engelleyebilir.

İsterseniz siz de kendi web siteniz/blogunuz için bu tip buttonlar yaratabilirsiniz. Google’da 80×15 Button Maker şeklinde ufak bir arama yaparak web üzerinde bu tip buttonlar yaratabilmenize olanak sağlayan aparatlara ulaşabilirsiniz. Karalamalar buttonunun ilk versiyonunu burada oluşturup daha sonra Photoshop ile son haline getirmiştim. Bir kaç örnek aparat adresi de verereyim, eksik kalmasın.

Bir süredir Karalamalar’a Firefox ya da gecko tabanlı tarayıcılar ile baktığınızda tasarımı kaymış bir site ile karşılaşıyorsunuz. Zaman bulup buna neyin yol açtığını araştırdım ve bir yazıya eklemiş olduğum flash nesnesinin tasarımı kaydırdığını keşfettim. Geçici çözüm olarak flash nesnesini ilgili yazıdan çıkarttım. Artık Gecko tabanlı tarayıcılar ile de rahatça gezinebilirsiniz.

Not: Yazının orijinal şeklini korumak için işi sonraya bırakmaktan vazgeçtim ve hemen imaj banner’ı flash nesnesinin olduğu yere yerleştirdim.