Sitem Farklı Tarayıcılarda Nasıl Görünüyor

Yazılımla uğraşanlar iyi bilir ki saatlerce uğraşıp 1000 satır kod yazarsın sadece bir tane yeri unutursan veya hatalı yazarsan kodların çalışmaz.O hatayı bulmakta çıplak gözle oldukça zordur ve saatler alır. Bu sebeple yazılımcılar, yazdıkları kodların hatalarını tesbit eden yazılımlar ve uygulamalar geliştirmiştir.

Aynen yazılımın genelinde olduğu gibi web tasarımda da yapılan sitenin istenildiği gibi çalışıp çalışmadığını, cross-browser ve cross-platform için görünüm ve işlevinin aynı olup olmadığının test edilmesi gerekir.

Bu konu özellikle client-side çalışan front-end developerların sorumluluğundadır.Eğer istemci tarafında çalışan bir arayüz geliştiricisiyseniz mutlaka cross-browser kavramını duymuşsunuzdur ya da web site geliştirmeye yeni başladıysanız sitenizin neden Chrome tarayıcısında farklı, Internet Explorer da farklı göründüğünü anlamaya çalışıyorsunuzdur ki yakında cross-browser kavramını çok duyarsınız.

Test Etmenin Önemi

Şöyle diyelim bir websitesi yapıyorsunuz ve adım adım yazdığınız kodları Chrome’da test ediyorsunuz.Her test ettiğiniz de kodlarınızda ufak ufak düzenlemeler yapıyor ve en sonunda harika bir iş çıkarıyorsunuz.Hatta sitenizi mobil uyumlu kodlamışsınız ve artık Google sizi daha çok sevecek.Son bir iş kaldı o da sitenizi yayınlamak.

Neyse bir sunucu kiralayıp gerekli dosyaları attınız ve artık siteniz yayında, gururlanıyorsunuz, arkadaşlarınıza da söylediniz onlarda ziyaret edecek.Ama arkadaşınızın bilgisayarında Chrome yok, ne olacak Internet Explorer tarayıcısı ile sitenize giriyorsunuz.O da ne girdiğiniz site sizin değil.Çünkü sizin sitenizin tasarımı bu şekilde değildi, bu kolonlar yatay hizalıydı burada dikey gözüküyor.Bu alan niye dışarıya fırlamış.Burada güzel bir efekt olacaktı nerede şimdi.Hemen domaini kontrol ediyorsunuz ve gerçeklerle yüzleşme vakti gelip çatıyor.Evet bu sizin yaptığınız site ve durum hiç iç açıcı değil.

Yukarıda ki senaryo, bu sektörde başınıza sık gelebilecek bir olaydır tabi ki biraz abartılı bir senaryo yazdım.Çünkü test ve tarayıcı uyumluluğu konusuna dikkat çekmek istedim.

Her sektörde olduğu gibi web teknolojisinde de aynı işi yapan bir çok araç vardır.İnternette dolaşmak için gerekli olan web tarayıcıları gibi.Chrome, Firefox, IE vb… say say bitmez.Müşteri tarafından baktığınız da bir şeyin alternatifleri olması çok iyidir.Çünkü rekabet artar, fiyat düşer, kalite yükselir.Ama bu yazılımda biraz farklıdır.Daha doğrusu normal internet kullanıcıları için değil, yazılım geliştircileri için durum kötüdür.

Daha fazla platform daha fazla kod demektir.İşletim sistemlerinin sayısı artıkça, hepsine ayrı yazılım geliştirmek zorunda kalırsınız.Bunlara şimdi bir de akıllı telefonlar eklenince düşünün olayın vehametini.

Web tasarımda da çok fazla tarayıcı olması ve her tarayıcının kendi kurallarının olması neticesinde yukarıda bahsettiğim senaryo ile karşılaşırız.Özellikle web yazılım dillerinin – HTML5, CSS3 gibi – gelişmesiyle ve bunlara gelen özelliklerin artmasıyla bu farklılık daha fazla ortaya çıkmaya başladı.Eskiden de fazlaydı o ayrı.Özellikle Microsoft’a ait Internet Explorer tarayıcısı, web tasarımcılar için en belalı tarayıcıdır.HTML, CSS, javascript aklınıza gelen her web teknolojisi dilinde farklı bir yazım kuralları vardır.

Tarayıcıların bazı konularda farklı tutumlar sergilemeleri, sitenizin yada uygulamanızın görünümünde değişiklikler meydana getirir hatta bu daha çok hatalı görünüme sebebiyet verir.Böyle durumlarla karşılaşmamak için tarayıcı uyumlu kod yazmak zorundasınız.Tabi ki bunu yaparken hangi tarayıcılarda hangi özellikleri kullanabileceğinizi bilmeniz gerekir.Site görünümünün farklı tarayıcı uyumsuzluğu aslında tarayıcıların versiyonları arasında da kendini gösterir.CSS3 ile gelen bir çok işinizi kolaylaştıran özellik tarayıcıların yeni versiyonlarında çalışmasına rağmen eski versiyonunda çalışmayabilir.Bu yüzden sitenizi yayınlamadan önce site görünümünü test etmeniz şarttır.

Bu yazımda sitenizin farklı tarayıcılarda ve mobil de nasıl göründüğünü test etmeniz için yardımcı olacak uygulamaları listelemek istedim. Şunu belirteyim bu listede bulunan bir çok uygulama ücretlidir.Bedava uygulamalar da var ama güncelliklerini korumadıklarından pek işinize yaramaz.

1 – BrowserStack

browser-stack-site-gorunum-testi

BrowserStack, tarayıcı test işlemlerinde akla gelen ilk sitedir.Farklı platformlarda farklı tarayıcıların bir çok sürümü ile sitenizi test edebilirsiniz.Ayrıca mobil platformlarda çok güçlü bir test imkanı sunmakta.Ufak bir senkronla localhostda bulunan sitenizi de test edebilirsiniz.Sağladığı bu güçlü test seçeneklerine karşılık ücret talep etmekteler.Farklı üyelik seçenekleri aylık 39 dolardan başlamakta.Ücretsiz deneme sürümü sağlıyorlar.İsterseniz üye olup deneyebilirsiniz.Ben modern.ie sitesinin sağladığı bir imkanla 6 ay kadar ücretsiz kullanmıştım.
Ücretli

2 – BrowserShots

browser-shots-site-gorunum-testi

BrowserShots, bazı tarayıcıları bir iki sürüm geriden takip etse de 3 farklı platformda(linux,mac,windows) farklı tarayıcı ve sürüm çeşitliliği ile oldukça kullanışlı bir araç.Seçtiğiniz tarayıcılarda sitenizin görüntüsü size sunuyor.Buradan farklılıkları ortaya çıkarabilirsiniz.Bu araç ücretsiz hizmet vermek.Bunu yanında aylık 29 dolara bazı özel imkanlarda sunmaktalar.
Ücretsiz – Kısmi Ücretli

3 – CrossBrowserTesting

cross-browser-testing-site-gorunum-testi

CrossBrowserTesting, 3 platform ve mobil olmak üzerinde, en çok kullanılan tarayıcılar ve sürümleri ile test yapabileceğiniz bir başka araçtır.Ücretli bir uygulamadır.En düşük fiyat 29 dolardır.Ücretsiz deneme sürümü ile göz atabilirsiniz.
Ücretli

4 – Browserling

browserling-site-gorunum-testi

Browserling, IE,Chrome,Firefox,Opera ve Safari’nin farklı sürümlerinde sitenizi test edebileceğiniz güzel ve kullanımı bir site.Ücretsiz kullanımlarda herhangi bir tarayıcının sadece bir sürümü ile test yapabiliyorsunuz.Ücretli üyelik ise aylık 19 dolar.
Tek Sürüm Ücretsiz, Ücretli

5 – Spoon.net

spoon-site-gorunum-testi

Spoon.net, yine farklı platformlarda farklı tarayıcılar ve çoklu sürümleri ile test yapabileceğiniz bir site.Ücretsiz kullanımı bulunmakta fakat kısıtlıdır.En düşük ücretli üyelik 19 dolardan başlıyor.
Ücretsiz – Ücretli

6 – Modern.ie

modern-ie-site-gorunum-testi

Modern.ie, Microsoft’un sağladığı basit bir test sitesi.Fazla bir seçenek bulunmuyor.Windows platformunda bazı popüler tarayıcıların son sürümlerini test edebilirsiniz.Ücretsizdir.
Ücretsiz

7 – Ghostlab

ghost-lab-site-gorunum-testi

Ghostlab, listedekilerin aksine online bir test aracı değil bir masaüstü uygulamasıdır.Sadece mac ve windows platformlarını destekliyor.Gelişmiş özelliklerinin yanında ücretli bir uygulama.
Ücretli

8 – Sauce Labs

saurce-labs-site-gorunum-testi

Sauce Labs, bulut tabanlı birden çok platforma da yüzlerce tarayıcı da test imkanı sunan bir cross browser test aracıdır.Ücretli olarak sunulmakta ve fiyataı 12 dolardan başlamaktadır.
Ücretli

9 – Netrender

netrenderer-site-gorunum-testi

Netrender, sadece internet explorer tarayıcı üzerinde test yapan ücretsiz bir araç.Eğer sadece ie test etmek isterseniz kullanabilirsiniz.
Ücretsiz

İpucu:Fakat bunun yerine ie tarayıcınızı açıp f12 tuşuna basın, açılan geliştirici kutusunda sağ tarafta edge yazısına tıklayın.Orada mevcut ie sürümleri bulunmakta.Kendi tarayıcınızdan farklı ie sürümlerinde sitenizi test edebilirsiniz.

Kavramlar

Cross-browser testing, çok tarayıcılı veya farklı tarayıcı testi anlamına gelen genelde birden fazla farklı tarayıcılarda uyumluluk testini ifade eder.

Cross-platform, yazılımda bir uygulamanın çoklu işletim sistemi (windows,OS X,Linux) desteğini ifade eder.Web tasarım da özellikle responsive tasarım anlayışıyla birlikte bilgisayar,tablet ve akıllı telefonlar gibi farklı boyutlarda cihazları ifade etmek için kullanılır.

Front-end developer, Türkçe karşılığı önyüz geliştiricisi ya da daha geniş kullanımına göre arayüz geliştircileri bir web projesinde istemci tarafından sorumlu olan kişidir.Arayüz geliştircileri bir web sitesinin HTML,CSS ve Javscript kodlarını yazan kişiler olarak tanımlanabilir.

Client side, Türkçe karşığı istemci tarafı olan bu ifade bir web uygulamasının, ziyaretçilerin gördüğü alan olarak tanımlanır.

Server-side, yani sunucu tarafı daha çok bir web uygulamasının görünmeyen arka planında yapılan işleri temsil eder.Veri tabanı işlemleri gibi.

Yazı Hakkında

Bu yazımda çoklu tarayıcı sorunlarından,site test işlemine,sitenizin görünümünü nasıl test edeceğinizi,tarayıcı ve akıllı telefonlarda sitenizin nasıl göründüğünü, bazı kavramları anlatmaya çalıştım.Umarım faydalı olmuştur.Keyifle okumalar.

Bunları da beğenebilirsin