12 Şubat 2014
adaptive app designer development program responsive test tool
Responsive Web Siteleri için Ghostlab
Sizlere bahsetmek istediğim mükemmel bir program var. Web tasarımı ile ilgilenen ya da bu işi ‘meslek’ olarak benimsemiş kişilerin çok da hoşuna gideceğini düşündüğüm bir program bu.
Ghostlab sayesinde aynı anda bir çok cihazda çalışabiliyorsunuz.
Geçtiğimiz hafta üzerinde çalıştığım – daha çok pratik yaptığım- bir projenin testleri için bir takım araçlara ihtiyaç duydum. Web sitesinin mobil cihazlar (tablet, telefon vb) üzerinde nasıl göründüğünü gerçeğe en yakın şekilde test etmem gerekiyordu. Bunun için bolca tarayıcı eklentisi (chrome) vardı ama aldığım sonuçların gerçek cihazlar ile eşleşip eşleşmeyeceğinden emin olamadım. Üstelik çözünürlükler eşleşse bile meşhur tarayıcı sorunları baş gösterebilirdi. Neyse, bir şekilde derinlemesine araştırma yaptım ve ‘Ghostlab’ isminde Windows için çiçeği burnunda bir programa rastladım.
Program ile ilgili neredeyse hiç Türkçe kaynak bulamadığım için de bir kaç satır karalayım, ihtiyacı olan okusun istedim.
Ghostlab nedir ?
Ghostlab, vanamco tarafından geliştirilen ve ilk başta Mac için yazılmış bir web sitesi test aracı. Öyleki program üzerinden aynı anda sayısız tablet ve sayısız cep telefonunu bilgisayarınız ile bağlayıp senkronize çalışabiliyorsunuz. Örneğin bir iPhone bir adet de Android modelli cep telefonu var. Ayrıca 10′ lik bir tablete de sahipsiniz. Yaptığınız web sitesi tüm bu cihazlarda sorunsuz görünsün istiyorsunuz (Responsive). Bunun için tek yapmanız gereken şey Ghostlab’i çalıştırmak ve web sitesi dosyalarınızın yerini göstermek. Evet, Ghostlab ile yerel web sitesi dosyalarınızı mobil cihazlarla paylaşabilir, nasıl göründüklerini birebir kontrol edebilirsiniz.
Program, aynı wifi ağına bağlanan cihazların tüm teknik bilgillerini bir bir listeliyor.
Şöyleki, PC’den programı çalıştırıp dosyalarınızın yerini gösteriyorsunuz. Sunucuyu çalıştırdığınızda Ghostlab size web sitenizi standart tarayıcınız üzerinden açıyor. (Diğer tarayıcılar için de bir takım işlemler yapabilir.) Ardından verdiği ip adresine aynı ağ üzerinden mobil cihazlar ile giriş yapıyorsunuz. Ta- daa ! Aynı web sitesi eş zamanlı olarak tüm aygıtlarla (ekranlarla) paylaşıldı. Çalışmaya başladıktan sonra herhangi bir cihazda (PC dahil) scroll-down yaptığınız zaman diğer tüm cihazlarda da aynı oranda scroll-down oluyor. Bu sayede eş zamanlı olarak görsel testlerinizi yapıp, düzeltmelerinizi uyguluyorsunuz.
Düzeltme demişken, örneğin sitenize yeni bir takım CSS kodları girdiniz ve tarayıcınızı yenilediniz. Normal şartlarda diğer tüm cihazlara (tarayıcılara, tabi varsa) yenileme işlemi yapılması gerekecektir. Program bunu da sizin yapıyor ve bir tarayıcıyı yenilediğiniz zaman diğer cihazların tarayıcısını da eş zamanlı olarak yeniliyor. Bir iki cihaz için önemsiz görünebilir ama beş ve üzeri cihazlar için vazgeçilmez bir özellik.
Neden Ghostlab ?
Ghostlab’da oluşturulan sanal bağlantıya QR Kod ile anında ulaşılabiliyor.
Ghostlab’ı bu kadar çok beğenmemin sebebi, yerel sunucular ile çok rahat iletişim kurup, size anlık bilgiler verebilmesi. Örneğin mobil cihaz için web sitesi tasarımı yapıyorken mobil cihazınızdan tarayıcı özelliklerine girip söz konusunu sitenin öğesini denetleyemezsiniz (inspect element). Ghostlab buna da izin veriyor. PC üzerinden bağlı mobil cihazı seçip ‘inspect element’ yapabiliyorsunuz. Hangi parça neye sebep olmuş bu şekilde kontrol ettikten sonra düzeltmeleri yapıyorsunuz. Sadece bu özelliği bile onu benzersiz yapıyor.
Adobe Edge Inspect CC programı da Ghostlab ile aynı mantıkta çalışıyor ama onunla yerel sunucular ile çalışabilmeniz için bir takım zahmetlere katlanmanız gerekmekte. Çünkü Adobe Edge Inspect siteyi sanal sunucuda açıp link vermeden gösteriyor. Dolayısıyla diğer cihazlardan link olmadan -aynı wifi ağına bağlı olsa bile- siteye bağlanabilmek çok zorlaşıyor.
Değer mi ?
Bir çok özelliği ile piyasadaki rakiplerini geride bırakan Ghostlab’ın lisans ücreti 50$ olarak belirlenmiş. Sürekli bu işi yapıyorsanız ve testlerinize hız katmak istiyorsanız mutlaka almalısınız ancak web ile hobi olarak, arada bir keyif için uğraşıyorsanız diğer ücretsiz responsive araç kutuları işinizi görür.
Sağlıcakla kalın 🙂
[box type=”info”] Bu arada destek vermek istiyorsanız yapmanız gereken tek şey sağ bölümdeki google reklamına bir kez tıklamak ;)[/box]