﻿ Dergi December 2009 Sayısı - Adobe BrowserLab | Photoshop Magazin
Adobe Labs, geçtiğimiz aylarda web tasarımcılarını oldukça sevindirecek yeni bir servisi hizmete soktu. Adobe BrowserLab, tasarlanan web sayfalarının, oldukça hızlı ve pratik bir şekilde işletim sistemleri / tarayıcı kombinasyonları üzerinde karşılaştırmalı görünüm testlerinin yapılmasına olanak tanıyor.
Adobe BrowserLab servisini kullanmak için http://browserlab.adobe.com adresini ziyaret edebilirsiniz. Servis anasayfasındaki kullanıcı girişi ekranından kullanıcı adı ve parolanız ile sisteme giriş yapmanız gerekiyor.
Daha önce, herhangi bir Adobe servisini kullanmak için edindiğiniz Adobe ID’niz bulunuyorsa, mevcut bilgileriniz ile sisteme giriş yapabilirsiniz. Eğer bir Adobe ID’niz yoksa, ekranın sağ sütununda yer alan New Users başlığı altındaki yeşil bağlantıya tıklayarak kendinize ücretsiz bir Adobe ID edinebilirsiniz.
Tarayıcı Setleri Servise giriş yaptıktan sonra, test aşamasında, karşılaştırma listesinde kullanılmak üze-
re istediğiniz işletim sistemleri ve tarayıcılar için tarayıcı listelerini özelleştirebilirsiniz. Pencerenin sol üst bölümünde yer alan Browser Sets menüsüne tıklayarak ayar sayfasını görüntüleyebilirsiniz. Yine sol üst köşede yer alan Add New Browser Set düğmesi ile de, farklı ihtiyaçlar için istediğiniz kadar farklı platform/tarayıcı kombinasyonu listesi oluşturmanız mümkün olacaktır. Adobe Browser Lab servisi ile işletim sistemlerine göre test edebileceğiniz tarayıcılar:
Ayrıca, özelleştirilmiş listeler oluşturulurken, sağ sütunda yer alan Browser Order başlı altındaki tüm tarayıcıların sıralamaları, mouse ile ilgili satırı yukarıya/aşağıya taşımak suretiyle değiştirilebilir.
Web Sayfalarını Görüntüleme
Bir web sayfasının farklı işletim sistemi ve tarayıcılarda nasıl göründüğünü test etmek için yapmanız gereken tek şey, pencere üzerinde yer alan adres çubuğuna ilgili sayfanın adresini yazmak. İlgili site yerine “ilgili sayfa” tabirini kullanmamın nedeni ise, servisin görüntülediği sayfalardaki bağlantıların aktif bir yapıda olmaması. Adobe BrowserLab, görüntüleyeceği web sayfalarının, seçilen tarayıcılara göre görüntülenme seçeneğini bir ekran resmi çekerek sağlıyor. Sonuç olarak ekranda karşılaştırmalı olarak gördüğünüz sayfa önizlemeleri birer ekran resminden ibaret olacaktır. Bu nedenle karşılaştırma site tabanlı değil sayfa tabanlı olarak gerçekleştirilmektedir.
Serviste kullanabileceğiniz 3 farklı ekran modu bulunuyor:
Test edilen sayfaların seçilen işletim sistemi/tarayıcı üzerinde nasıl görüntüleneceğini gösterir. Sol üst köşede, 1-up View düğmesinin altında yer alan yukarı açılır menü ile işletim sistemi/tarayıcı seçeneği değiştirilebilir.
Test edilen sayfaların seçilen 2 farklı işletim sistemi/tarayıcı kombinasyonu üzerinde nasıl görüntüleneceğini gösterir. Adres çubuğunun altındaki satırda, her iki web sayfası önizlemesinin üstünde yer alan yukarı açılır menü ile işletim sistemi/tarayıcı seçeneği değiştirilebilir. Onion
Skin View:Çeşitli web servislerinin, benzer bir tarayıcı uyumluluk testini daha geniş bir tarayıcı yelpazesi altında sunmalarına karşın, Onion Skin View seçeneği diğer servislere fark atmak için yeterli bir özellik olarak karşımıza
çıkıyor. Bu görüntüleme modunda, seçilen 2 farklı işletim sistemi/web tarayıcı kombinasyonu sonucu oluşturulan ekran görüntüleri üst üste bindirilerek %50 şeffaf olarak görüntüleniyor. Ekran görüntülerinin hemen üstünde bulunan yüzdelik sürgüsü ile görüntülerin üst üste binme saydamlık seviyeleri ayarlanabiliyor. Böylelikle hangi tarayıcıda, sayfa öğelerinin hangilerinde muhtemel bir sapma olabileceği daha net ve milimetrik olarak karşılaştırılabiliyor.
Cetvel ve Klavuzlar:
1-up View, 2-up View, Onion Skin View görüntüleme modlarının bulunduğu yukarı açılır menünün en altında bulunan Show Rulers seçeneği ile görüntüleme penceresinde cetvelleri aktif hale getirebilirsiniz.
Cetvelleri kullanmak isterseniz, üst veya sol cetvelin üzerine mouse ile basılı tutarak sayfaya doğru sürüklemeniz ve istediğiniz noktaya cetvel çizgisini bırakmanız yeterli olacaktır. Özellikle karşılaştırma esnasında olası sapmaları piksel olarak ölçmek istenildiğinde oldukça pratik bir seçenek olacaktır.
Ekran Görüntüleme Ölçeği
Pencerenin sağ üst köşesinde yer alan büyüteç düğmesine tıklayarak, ekran görüntülerinin ölçeğini yüzde cinsinden ayarlayabilirsiniz. Özellikle 2-up View seçeneğinde, iki sayfayı yan yana tek pencerede görüntüleyebilmek için bu özelliğe ihtiyaç duyabilirsiniz.
Eğer test edeceğiniz sayfalarda Flash dosyaları veya Ajax öğeleri bulunuyorsa servisin, ekran resmi çekmeden önce bu öğelerin yüklenmesi için bir süre beklemesi daha sağlıklı olacaktır.
Ana pencerenin sağ üst köşesinde yer alan Delay bölümünü kullanarak, resim çekme işleminin gecikme süresi ayarlanabilir. Gecikme süresinde maksimum limit 10 saniyedir.
BrowserLab servisinin daha hızlı ve etkin kullanılması için klavye kestirmeleri de ihmal edilmemiş. Aşağıdaki klavye kestirmelerini kullanarak görüntüleme seçeneklerini mouse kullanmadan da gerçekleştirebilirsiniz.
Dreamweaver CS4 Eklentisi
İsterseniz Adobe BrowserLab servisini, sayfa yapım aşamasında Dreamweaver CS4 içerisinden de kullanabilirsiniz. Bunun için öncelikle http://labs.adobe.com/downloads/ browserlab.html adresinde yer alan eklentiyi indirmeniz gerekiyor. Eklentiyi çift tıklayarak Adobe Extension Manager CS4 ile açarak yükleyebilirsiniz.Eklenti, Dreamweaver ile bilgisayarınızdaki dosyaları bir web sunucusuna yüklemeden bilgisayarınız üzerinden (Local) test edebileceği gibi, başka bir sunucuya dosyaları kopyalayarak (Server) test etme seçeneği de sunuyor.
Bunun için Dreamweaver’da, Window > Extensions > Adobe BrowserLab panelini açarak Local veya Server seçenekleri arasından seçiminizi yapabilirsiniz.
Son olarak, bir web sayfasını test etmek için İsterseniz panel üzerinde yer alan Preview düğmesini, isterseniz File > Preview in Browser > Adobe Browser Lab menüsünü kullanabilirsiniz. Ayarlamış olduğunuz görüntüleme tercihine göre sayfasın Adobe BrowserLab tarafından test edilecektir.