Murat Çorlu » Web Programlama

Internet Explorer’dan CSS Kullanımına Kota

Murat — Fri, 26 Feb 2010 00:45:54 +0000

Sahibinden.com için uğraştığımız bir web mimarisinde, sayfalarımızdaki stil tanımlamalarını geliştirme ortamımızda kullanım alanlarına göre küçük parçalara ayırıyoruz. Böylece sayfalarda bölgesel işler yapılırken geliştirme daha kolay ilerletilebiliyor ve modüler bir yapıya ulaşabiliyoruz. Bu stil dosyaları yayımlama ortamına alırken otomatik bir işlemle birleştiriliyor ve tek bir css dosyası haline getiriliyor.

Geçenlerde önyüz kodlayan arkadaşlardan ilginç bir şikayet geldi. Söylediklerine göre Internet Explorer’da bazı css dosyaları yüklenmiyordu. Önyüz ekibi olarak Internet Explorer’da karşılaştığımız herhangi bir problemde çok şaşırmıyoruz artık. Bilakis artık bizi şaşırtan, yazdığımız standartlara uygun doğru bir kodun herhangi bir işleme tabi tutulmadan Internet Explorer’da da çalışması oluyor. Şaşırıyoruz; çünkü bu nadiren oluyor.

Yalnız bu problem bizi çok uğraştırdı. Yüklenmediği ya da içinde yazılanların etkisini görmediğimiz stil dosyalarının link etiketleri HTML dokümanımızda görünüyordu, ancak o dosyanın içine ne yazarsak yazalım hiçbir şekilde etkilemiyordu. Sonra dosyanın adını değiştirerek daha ön sıralara aldığımızda dosyanın okunduğunu farkedince bu sefer şaşırdık. Neden olduğu hakkında manidar bir açıklama bulamayınca ben de yarı ciddi olarak “Internet Explorer aynı sayfada -farzı muhal- 20 taneden fazla css yüklemiyordur belki” dedim. Gülüştük ettik… Sonra biraz bakıştık ve yüklenen dosyaları saymaya başladık: 33 tane. Google’a sorduk ve sonucu görünce daha çok güldük: http://support.microsoft.com/kb/262161

Evet, Internet Explorer’lar (sadece 6 falan değil, bütün versiyonları) aynı sayfada 30′dan fazla stil etiketi kullanmaya müsade etmiyor. 30′dan sonrakileri de kale almıyor. 30 sayısı da biraz şüpheli. Bunun 31 yada 32 olduğunu iddia edenler de var(ki bizim duruma 32 daha uygun).

Microsoft ekibinin böyle bir karara nasıl vardığını, neden 20 ya da 50 falan değil de 30′da karar kılındığını ekip olarak çok merak ettik, üzerine bolca da geyik yaptık ama mantıklı bir gerekçe bulamadık.

Evet, bir Internet Explorer vakası daha ekibimize saatlere maloldu. Hep derim, Internet Explorer aradan çekilse Internet teknolojisi daha hızlı gelişir diye. Buna bir sağlam örnek daha gördük.

Nasıl çözdüğümüzü merak edenler de olabilir: Biz geliştirme ortamımızda stil dosyalarını anlık olarak birleştirip gönderen bir kod yazarak çözdük. Yayına alırken zaten tek dosya haline getirdiğimizden orada böyle bir sorun yoktu. Bu yöntemin yanında stil dosyalarını birkaç başka stil dosyasından @import yöntemiyle çağırmak gibi bir yöntem de kullanılıyormuş. Ancak bu konuda da bazı performans sıkıntıları var. Zira bir sayfada hem HTML’den hem de stil içinden css dosyaları çağrıldığında bunlar sıraya konuyor ve yüklenmeleri uzuyor. Falan filan…

Sahibinden.com Anasayfasına Önyüz Kodlaması Dopingi

Murat — Wed, 23 Sep 2009 09:29:35 +0000

2 ay kadar zamandır Sahibinden.com‘da önyüz yazılımcısı olarak çalışmaktayım. Önyüz kodlaması konusunda ülkemizdeki eksiklikler sahibinden.com gibi Türkiye’nin en çok ziyaret edilen sitelerinden birinde de kendisini gösteriyordu. Bu ölçüde büyük web projelerinin önyüz kodlamasını tümden değiştirmek de oldukça büyük bir işgücü ve süre gerektirebiliyor.

Bu yüzden önyüz kodlamasını aşama aşama yeniden yazmaya niyetlendik ve sunucu tarafında nisbeten daha az işlemin yapıldığı ana sayfayı ilk çalışma alanımız olarak seçtik. Hedeflerimiz şunlardı:

Görsel diğer sayfalarla farklılık yaratacak bir değişiklik yapmamak
Geçerli (valid) HTML üretmek
Bilinen bütün modern tarayıcılarda sayfanın problemsiz çalışmasını sağlamak
HTML kodlarında tasarım için kullanılan table etiketlerinden kurtulmak
HTML içindeki(inline) CSS ve Javascript tanımlamalarından kurtulmak
Arama motoru optimizasyonu(SEO) kriterlerine uygun HTML yazmak
Harici CSS ve Javascript dosyalarını birleştirip küçülterek HTTP talep sayılarını ve boyutlarını düşürmek
HTML’deki gereksiz yorum, tab, enter ve boşlukları temizleyerek HTML boyutunu düşürmek
Tasarım grafiklerinde CSS Sprite yöntemini kullanarak HTTP talep sayısını düşürmek
Javascript kodlarını “Event Driven” yazmak

Bu amaçlarımızı uygulayabilmek için doğal olarak önyüz kodlarını tamamen sistemden ayırmak gerekti. Bu amaçla ana sayfaya özgü Javascript ve CSS kodlarını sıfırdan yazdık, HTML üretme sistemimizi yeniledik, bazı yerlerde şablon motorumuza gönderilen verilerin yapısında değişiklikler yaptık. Dinamik olarak Javascript, CSS ve HTML kodlarımızı küçülten, birleştiren uygulamalar yazdık. HTML’i sıfırdan yazdık, tablolardan arındırdık, SEO’ya uygun şekilde etiketlendirdik. Javascript kodlarını “Olay Tetikli” çalışır hale getirdik.Tasarım grafiklerimizin sayılarını olabildiğince azalttık, kalıtsallığı maksimum derecede kullanacak şekilde stil tanımlamaları yaptık.

Tüm bu çalışmalardan sonra geçen cuma (18 Eylül 2009) yeni ana sayfamızı yayına aldık. İçerikte herhangi bir değişiklik yapmadan sadece teknikleri değiştirerek kazandıklarımız ise şunlar oldu:

Valid HTML’imiz oldu: http://validator.w3.org/check?uri=http://www.sahibinden.com
HTML boyutumuz yaklaşık 80KB’dan yaklaşık 40KB’a indi.
CSS ve Javascript dosyalarını birleştirme ve CSS Sprite yönetmiyle tasarım grafiklerinin birleştirilmesiyle sayfadaki HTTP talep sayısı 30′lardan, 8-10′a indi.
Sayfanın render süresi oldukça azaldı.
IE6 için transparan PNG ve :hover desteği sağlandı.

Web standartlarının uygulanması yaygınlaştıkça yapılan bu tür müdahalelerin değeri daha da günyüzüne çıkıyor. Sahibinden’deki bu geliştirme büyüyerek devam edecek. Darısı diğer büyük Türk sitelerinin başına…

Internet Explorer’dan kurtulmak için bir fırsat daha: Firefox 3!

Murat — Wed, 18 Jun 2008 10:55:40 +0000

Bugün Firefox’un heyecanla beklenen 3. versiyonu duyruldu: http://www.mozilla-europe.org/tr/

Biz web yazılımcıları için Internet Explorer’ın varlığı ve üstüne üstlük en çok kullanılan browser olması ne büyük talihsizliktir bilemezsiniz. Özelleştirilmesi güç, performansı iğrenç, kod yorumlaması komik Internet Explorer yüzünden 2 saatlik işimiz 4 saate, 8 saate çıkar. Bazen deveye hendek atlatmaktan zordur IE’ye birşey anlatmak. IE olmasa, internet teknolojileri daha hızlı ilerlerdi diyorum, artık gerisini siz anlayın.

Son zamanlarda Firefox kullanıcı sayısı büyük bir yükselişte. İnsanlar farkında olmadan kullandıkları IE’nin daha iyi bir alternatifinin olduğunu değişik vesilelerle farketmeye başladılar. Bu konuda özellikle Firefox’un eklentiler ile özelleştirilebilir olmasının büyük payı var. Örneğin; Facebook’u Türkçe olarak gezebilmek için bir çok kişi Firefox kurdu ve eklenti ile işini gördü. Bir aralar oynadığım Travian oyununu daha efektif oynayabilmek için de Firefox kullananların sayısı artmıştı. Zira Firefox ile kullanılabilecek bir eklenti sayesinde oyunda otomatik çözümler ayrıntılı hesaplamalar görülebiliyordu.

Bu ve bunun gibi sebeplerle adından söz ettiren Firefox, yeni sürümüyle daha da bir sağlamlıştaracak gibi yerini. Zira Firefox 2′de görünen bazı performans sorunları Firefox 3′de büyük oranda giderilmiş ve kullanım kolaylığına daha çok eğilinmiş.

“Neden rahatımı bozup IE’yi bırakayım ki” diyorsanız daha soruyu sorarken yanılıyorsunuz. Aslında rahat olduğunuzu sandığınız şey alışkanlığınızdan başka birşey değil. Firefox’u kısa süre kullandığınızda IE’yi bir daha açmak istemeyeceğinizi garanti ederim. IE gibi her işletim sisteminde kullanamayacağınız, hatta bir işletim sürümünün versiyonlarında bile köklü farklılıklar gösteren bir browser ile kendinize devamlı iş çıkarmaktansa, neredeyse tüm işletim sistemlerinde ve sürümlerinde kullanılabilen, istediğiniz zaman rahatça kaldırılabilen, hatta USB diske yerleştirip yanınızda bile taşıyabileceğiniz(bkz: Portable Applications) bir browser kullanıcısı olmak size uzun vadede büyük kafa rahatlığı sağlayacaktır.

Tüm bunların yanında Firefox(Hatta o olmadı, Opera, Safari, bunlar da güzeldir) kullanarak biz web yazılımcı kardeşleriniz için de büyük bir hayır işlemiş olacaksınız. IE kullanılmadığında(veya pazarı kaybetmenin acısıyla Microsoft gerçekten kaliteli bir browser yaptığında) daha güzel siteleri daha hızlı şekilde üretebiliriz, siz de internette daha rahat ve eğlenerek dolaşabilirsiniz.

Hadi artık, hem kendinize hem internet teknolojisine bir katkıda bulunun, IE’den vazgeçin…

Linux için Adobe AIR Alpha1 duyuruldu

Murat — Tue, 08 Apr 2008 04:03:43 +0000

Adobe, dikkatle takip ettiğim AIR ürününün, heyecanla beklediğim Linux versiyonunun alpha’sını bir hafta kadar önce duyurdu: http://labs.adobe.com/technologies/air/

HTML, CSS ve Javascript yazarak platform bağımsız(Win, Mac, Linux), masaüstü uygulamaları geliştirme imkanı vermesi AIR’e karşı çok sıcak bakmamı sağladı. Web’i masaüstüyle birleştirme çabalarının bir başka örneği olan AIR, ücretsiz olmasıyla da dikkat çekiyor. Yaptığımız sitelerle ilişkilendirilecek küçük masaüstü araçları yapmak için bile harika bir araç bence. Örneğin yaptığınız bir sitenin yeni içeriklerini takip edebilmesi için kullanıcılarınıza bir masaüstü aracı kullandırmak isteyebilirsiniz. Veya, bir intranet uygulamanızı, masaüstü uygulaması gibi kullandırmayı isteyebilirsiniz. Benzer mantıkla, sitenizin yönetici panelini siteye koymak yerine, bu şekilde bir masaüstü aracı gibi kullandırabilirsiniz.

Benim için Linux versiyonu olması oldukça önemli bir özellik olduğu için(nedeni başka bir yazıya inşaallah…), bu alpha sürümü çıkana kadar üzerine tam manasıyla eğilmeyi bekletiyordum ancak görünen o ki, Adobe sözünün eri ve Linux için ciddi manada çalışmaya devam ediyor.

Front-end web yazılımcılarının Adobe AIR’i mutlaka denemelerini ve incelemelerini tavsiye ediyorum. Kullanan, takip eden arkadaşlar varsa, onlarla da yazışmayı, tecrübelerimizi ve fikirlerimizi paylaşmayı isterim.

Dünya’nın İlk AJAX Sunucusu: Jaxer

Murat — Sun, 10 Feb 2008 02:35:23 +0000

Web uygulama geliştirme dünyası müthiş bir ivmeyle büyümeye devam ediyor. Neredeyse her gün yeni bir terimle, teknolojiyle veya uygulamayla karşılaşıyoruz. Geliştirenlerden değil de takipçilerden biri olarak kalanlar için, izlenmesi zorlaşan, insanı hayretler içerisinde bırakan bir ivme bu.

Bu ivmeye ulaşılmasında ve bu kadar çok uygulama geliştirme teknolojisinin ortaya çıkmasında Web 2.0 felsefesinin internette büyük kabul görmesini payının büyük olduğunu düşünüyorum. Bütün web sitelerinin birbirleriyle entegre çalışıp, milyonlarca ziyaretçinin el birliğiyle oluşturdukları sitelerin var olduğu internet ortamında, tüm bu entegrasyonun daha kolay, daha performanslı ve daha esnek bir şekilde sağlanabilmesi için bir çok fikir ortaya atılıyor. Tüm bu ihtiyaçlarda, tartışmasız yeri en sağlam olan dil olan Javascript’in, istemci-browser taraflı dil yapısından alınıp, her alanda kullanılmaya başlanması da bu sürecin bir parçası gibi. Ve işte bu sürecin önemli adımlarından biri daha meydana geldi ve Dünya’nın ilk AJAX sunucusu Jaxer, web uygulaması geliştiricilerinin ilgisine sunuldu.

Güçlü ve işlevsel AJAX IDE’si Aptana Studio‘nun üreticileri, muhtemelen bu başarılı IDE’yi yaparken JavaScript’i ve AJAX teknolojisini hatmettikleri için, adı çok söylenmesine rağmen bir türlü kimsenin üretmediği “sunucu taraflı Javascript” teknolojisini üretmek amacıyla kolları sıvadılar ve Jaxer’ı ürettiler.

Jaxer ücretsiz ve açık kaynak kodlu bir AJAX sunucusu. Bir Apache modülü olarak çalışıyor. Web geliştiricilerine client tarafında yazdığı dille sunucu taraflı işlemler de yapma imkanı vermeye çalışan Jaxer geliştiricileri, bu amaçla, sunucu taraflı, client taraflı ve “hem sunucu, hem client taraflı” Javascript kodları yazma imkanı vermişler. Bu demek oluyor ki, HTML ve Javascript biliyorsanız Jaxer uyumlu dinamik web uygulamaları geliştirebilirsiniz demektir.

Jaxer’ın sağlayacağı en önemli imkanlardan biri, AJAX uygulamaları yazarken sunucu taraflı kodlarımızla (örn. PHP, Java, Ruby), istemci taraflı kodlarımız(Javascript) arasında veri alışverişi yaparken gerçekleştirmek zorunda olduğumuz bir dizi işlemden (XMLHTTP nesnesi oluşturmak, veriyi göndermek, sonucu beklemek, sonucu işlemek vs.) bizi kurtarıyor olması. Jaxer uygulamalarında aradaki bu prosedürel işlemlerin hepsini Jaxer kendisi hallediyor. Bu işlemlerin tamamını Jaxer’ın sunucu ve istemci taraflı frameworkleri otomatik olarak yapıyor.

Jaxer’ın adım adım nasıl çalıştığını şu şekilde özetleyebiliriz:

Talep edilen HTML dokümanı sunucudan istemciye gönderilmek üzere web sunucusu tarafından (Apache) hazırlanır. Bu statik bir HTML dokümanı veya PHP, Java veya Ruby gibi bir dille üretilmiş bir HTML dokümanı olabilir.
Jaxer oluşturulan HTML dokümanını, istemciye gönderilmeden önce Apache’nin bir çıkış modülü olarak alır, bir browserın yaptığı gibi, onu çözümler ve içindeki sunucu tarafında çalışması istenen Javascript kodlarını çalıştırır.
Sonuç Jaxer Server Framework ve geliştirici kodlarıyla oluşturulmuş yeni bir HTML dokümanıdır. Fark şudur ki; Jaxer sunucu taraflı javascript kodlarını, istemci tarafından çağrılabilir metodlar haline çevirir, istemci tarafla sunucu tarafının oturum iletişimini sağlayacak bilgi ve metodları üretir.
Yeniden üretilmiş HTML istemci tarafında gönderilir.
İstemci dokümanı alır, HTML’den DOM üretilir ve bu sefer istemci taraflı javascrpt kodlarını çalıştırır.
Eğer sunucu taraflı bir metod çağrılırsa, parametreler otomatik olarak JSON formatına çevrilir ve server tarafındaki gerçek metod tetiklenmek için bir XMLHttpRequest talebi sunucuya gönderilir.
Sunucu bu özel talebi aldığında parametreler tekrar özgün haline çevrilir, çağrılan fonksion tekrar oluşturulup bu parametrelerle çalıştırılır ve dönen sonuç tekrar JSON verisine çevrilir.
İstemciye dönen veri yine otomatik olarak JSON türünden özgün veri türüne çevrilir ve işlem bu şekilde tamamlanır.

ASP.NET ile uğraşırken sadece VB.NET kodu yazmamıza rağmen .NET Framework’un bizim için bir sürü Javascript kodu üretmesiyle, bu yapıyı benzer görmek mümkün, ancak tek fark var, bu sefer üretilen dil yazdığınız dilden farklı değil. (Gerçi sizi bilmem ama ben, benim yerime kod üreten yapılara hiç ısınamadığımı itiraf etmeliyim.)

Jaxer’ın şu anda en büyük eksiği henüz Linux versiyonunun olmaması gibi görünüyor. Windows ve Mac versiyonları sitesinden indirilebilen Jaxer’ın Linux versiyonunun da kısa zamanda kullanıma sunulacağı belirtilmiş.