Tarayıcı Uyumluğu
28 Temmuz 2015
CEO-CIO-CTO-CISO-CFO-CLO-CGO-COO-CMO-CAO Nedir?
23 Kasım 2015

Cross-Browser

Web tasarımın vazgeçilmez ortamı herkesin bildiği gibi internet gezginleri yani orjinal tabiriyle browser’lardır. Browser’lar artık taş devri dönemlerini tamamlayıp daha gelişkin ve daha hünerli hale geldi. Hatta bu kulvardaki teknolojik gelişmeler browser’ların yerinde saymasına da engel oldu ve onları da beraberinde gelişmeye zorladı.

Bundan bir yıl öncesine baksak, çok daha kritik bir konudan bahsediyor olacaktım ama şu an için kritik önemini azda olsa azaltan bir ortam var. HTML5′in vazgeçilmez olması, CSS3′ün hünerleri artık browser’ların daha stabil ve daha kullanıcı dostu olmasını sağladı.

Ama yine de front-end developer’ların yani web tasarımcıların atlamamaları gereken önemli bir test adımı var; browser uyumluluk testleri. (testing browser compability)

Bu test işlemleri, arayüzün web’e adapte edilmesi için yapılacaklar tamamlandıktan sonra hangi browser’da ne ölçüde başarılı görüntülendiği ve kullanılabilirliği ne ölçüde etkilediğini ölçmek adına önemli bir adımı barındırır. Testlerin sonucuna göre hangi platformlar üzerinde hangi browser’lar ile ne gibi sorunlar çıkabileceği tespit edilir. Yayın öncesi, daha iyi bir kullanıcı deneyimi yaratabilmek için browser kaynaklı teknik sıkıntılar tespit edilir ve giderilir.

Yazının devamında browser uyumluluk testleri için kullanabileceğiniz bazı araçlardan bahsediyor olacağım.

1. Tüm platformlarda tüm browser’ların ekran görüntüsünü görebilmek için: browsershots.org

Browser testi deyince akla her zaman ilk gelen bir site olurlar kendileri. Tıpkı mendile isim veren selpak gibi literatüre geçmişlerdir. Zaman zaman aşırı yavaş olsa bile sitelerin browser ve platformlar üzerindeki durumlarını kontrol edebilmek için başarılı bir test ortamı sağlar. Seçtiğiniz kriterlere uygun ortamlardaki görüntüleri sizin için screenshot olarak derleyip sunabilir. Ayrıca, açık kaynak bir proje olması ile de kalplerimizin en nadide yerine sahiptir.

 

2. iyi bir internet explorer test ortamı için: ietester

Browser uyumluluk testleri dendiği zaman terazinin bir tarafına internet explorer ve ailesini, diğer tarafına da var olan bilindik tüm tarayıcıları koyabilirsiniz. Emin olun Microsoft’un vazgeçilmez browser’ı tek başına tüm browser’lardan kat be kat daha çok başınızı ağrıtabiliyor. Bunun için de vakti zamanında (özellikle internet explorer 6′nın hükümdar olduğu dönemlerde) sıklıkla kullandığım ietester’lara yine bir göz atmanızda fayda var. IE-6′nın krallığı sona ermesiyle, ietester çok kan kaybetmiş olsa bile,, IE ailesi için hızlı ve dinamik testler yapabileceğiniz bir araç. Ne zaman lazım olabileceği inanın bilemezsiniz.

 

3. adobe’un browser compatibility ortamı: browserlab

Adobe’un CS4 ile beraber hayatımıza kattığı web tabanlı servislerden biri olan Adobe browserlab, Dreamweaver ile çok iyi çalışıyor. Özellikle CS5′den sonra gelişmiş entegrasyon özellikleri ile Dreamweaver’ını harika bir test ortamına çeviriyor. Böylece, farklı platform ve farklı browser’ların görüntülerini editör üzerinden edinebiliyorsunuz. Sadece test etmenize değil karşılaştırmalar yapmanıza da olanak veriyor. Uygulamanın arayüzü flex tabanlı olması ile kullanıcı dostu ve klasik Adobe yaklaşımını buram buram sezebilirsiniz. CSS kaynaklı kaymaları, bozulmaları tespit edip size analiz yapabilmeniz için çeşitli ölçüm araçları barındırması da sistemin artı değerlerinden biri. Örneğin bu işlem için browerlab’a eklenen cetvel aracı, ilginç ve pratik.

 

4. web tabanlı internet explorer testleri için alternatif bir çözüm: netrenderer.com

Alman kökenli netrenderer projesi de browsershots gibi web tabanlı çalışan ve seçtiğiniz kriterlere göre size preview screenshot’lar hazırlayan bir başka proje. İncelememe dahil etmemin en büyük sebebi çok hızlı olması. Seçtiğiniz kriterlere göre size hızlı bir preview hazırlıyor. Benzer uygulamalardan en büyük eksik yanı işletim sistemini bir parametre olarak seçemiyorsunuz.  Her ne kadar bünyesinde IE-10 Consumer Preview’i de barındırıyor olsa bile browser çeşitliliği de şu an için az.

 

5.İdeal test ortamı: Sanal Bilgisayarlar üzerinde gerçek testler yapın!

İdeal test ortamını tanımlamak istersek tek çıkar yol sanal pc kurulumları olduğunu açık ve net olarak görebilirsiniz. Çünkü üzerinde çalıştığınız projelerin büyüklüğü, tasarladığınız arayüzün sahip olduğu oyunlara göre yapacağız testlerinde ciddiyeti ve kapsamı artacaktır. Anlık alacağınız preview’ler genel olarak projeyi test etmeye yeterli olmayacaktır.  Bir de tabii bu işten ekmek yiyor ve bu işi profesyonel olarak yapıyorsanız muhakkak ama muhakkak en uygun ve elverişli bir test ortamı yaratmanız gerekecektir. O nedenle uygun bir sanallaştırma yazılım paketi ile projenin hedeflediği platformları seçerek kurulumları yapabilir. Daha sonra browser’ların kurulumlarını bu sanal işletim sistemleri üzerine gerçekleştirebilirsiniz. Bu test ortamını hazırlamak elbette biraz vaktinizi alacaktır ama var olabilecek hataları kullanıcıdan önce test edebilmenize olanak sağlayacaktır. Bu test ortamını yaratabilmeniz için bilmeniz gerekenler ise;

  • sanal pc yazılımı ve kurulumu (wmvare workstation, Microsoft’un virtual pc’si veya Oracle’ın virtual box’ı işini görecektir.)
  • işletim sistemlerinin kurulum cd-rom’ları
  • test yapmak istediğiniz browser’ların kurulum dosyaları (güncel ve yaygın olarak kullanılanbrowser’ları takip edebilmeniz için güzel bir kaynak)
  • tek bir işletim sisteminde farklı sürümlerde birden fazla internet explorer çalıştırma (bu işlem için bu yazıya göz atabilirsiniz)
Peki kolları sıvadınız benim önerim olan ideal test ortamını hazırlamaya karar verdiniz? Peki hangi işletim sistemleri ve hangi browser’ları kuracaksınız? Bunun için de aşağıdaki listeyi bir göz atmanız yeterli olacaktır.