Adobe BrowserLab preview 4: testování vzhledu webových stránek - Grafika.cz - vše o počítačové grafice

8. března 2010, 00.00 | Dokončení online systému společnosti Adobe na testování vzhledu webových stránek v různých webových prohlížečích se (velmi) pomalu blíží. V pořadí již čtvrté veřejné preview systému BrowserLab nabízí jednoduchý systém testování stránek formou dynamických screenshotů, které lze vizuálně porovnávat a zjistit tak rozdíly v renderingu stránek pro konkrétní verze jednotlivých web browserů.

BrowserLab je online technologie společnosti Adobe, jejímž úkolem je nabídnout webdesignérům přesný náhled webových stránek a obecně i jiných webových projektů pro konkrétní webový prohlížeč. Vykreslování respektive rendering webové stránky dle zadaného URL přitom probíhá přímo na serveru Adobe, který si z jednotlivých webových prohlížečů převezme vykreslený obsah a graficky ho zobrazí v příslušně upraveném online náhledovém systému.

Je totiž smutným faktem, že každý web browser si zpracování a rendering obsahu webové stránky provádí po svém a může se jinak (mnohdy až příliš odlišně) chovat. Typickým příkladem je například implementace CSS stylů PADDING a MARGIN, centrování pozadí bez obalení prvku DIVem, způsob vykreslování stylů BORDER, FLOAT pro obtékáním pozice prvků v návaznosti na CSS prvek DISPLAY a řada jiných specifických CSS vlastností, lišících se často až dramaticky u jednotlivých prohlížečů. Opět v tomto ohledu připomenu největšího (a bohužel stále značně rozšířeného) hříšníka Microsoft Internet Explorer 6, který se dost zarputile protiví mnoha z obecných W3C standardů, nicméně i jiné verze IE, Firefox, Opera či Safari si občas hrají takříkajíc "na svém písečku".

Adobe BrowserLab preview 4 - dva vedle sebe zobrazené náhledy webové stránky, pokaždé pro jiný webový prohlížeč

Adobe BrowserLab zmíněné neduhy pochopitelně neodstraňuje ani nijak neřeší, může ale pomoci ke kontrole vzhledu dané webové stránky pro konkrétní prohlížeč. Celý Adobe BrowserLab je vlastně webová aplikace, která (zjednodušeně řečeno) umožňuje porovnávat layout webové stránky vykreslované různými verzemi webových prohlížečů. Princip funkčnosti BrowserLab je poměrně jednoduchý, nicméně jeho realizace je zajímavá. Zadanou URL adresu si webová aplikace na pozadí zpracuje pro každý ze zvolených prohlížečů a poté zobrazí náhled v podobě bitmapového obrázku "vykradeného" z konkrétního rendereru webového browseru.

Adobe BrowserLab preview 4 - rychlý výběr webových prohlížečů, ve kterých bude BrowserLab postupně renderovat zadanou URL

Typy zobrazení a podporované webové prohlížeče

Okna lze zobrazit jednotlivě, vedle sebe či přes sebe s volitelnou průhledností (šikovný nápad), což usnadňuje porovnání webové stránky pro dva různé prohlížeče. Testovat lze pouze webové stránky s platnou a v daném momentu funkční online URL, BrowserLabu totiž nemůžete nijak podstrčit lokální web. Existuje i doplněk pro Dreamveaver CS4, s jehož pomocí lze testovat podobu laděných editovaných stránek, i zde se však musíte smířit se zatím velmi pomalým přístupem na testovací server.

Adobe BrowserLab preview 4 - Onion Skin neboli simulace prosvětlovacího stolu pro dva (přes sebe zobrazené) screenshoty totožné webové stránky, renderované v odlišných webových browserech

Porovnávat a testovat vzhled webových stránek můžete prostřednictvím (z pohledu uživatele virtuálních) web browserů pro Windows a Mac OS X. Konkrétně se jedná o MS Internet Explorer 6 pro Windows, dále IE 7.0/8.0 pro Windows, Firefox 2.0/3.0/3.5 pro Windows i Mac OS X, Google Chrome 3.0 pro Windows a Safari 3.0/4.0 pro Mac OS X. Uvedené webové prohlížeče můžete libovolně kombinovat v Browser Set, což jsou sady prohlížečů použité následně v BrowserLab pro rendering obsahu zadané URL webové stránky. Novinkou BrowserLab preview 4 je mimo jiné i možnost uložení screenshotu webové stránky jako JPEG obrázek, bohužel s dost velkou kompresí, a tudíž i značnými obrazovými artefakty hlavně kolem textů.

Adobe BrowserLab preview 4 - Browser Set alias sada volitelných webových prohlížečů pro testování stránek

Adobe BrowserLab preview 4 - aktuálně podporované webové prohlížeče

Adobe BrowserLab preview 4 - v novém preview lze konečně screenshot webové stránky uložit na disk formátu JPEG, bohužel v dost tragické kvalitě

Běh na dlouhé trati...

Čtvrté veřejné preview Adobe BrowserLab nijak nemění svou hlavní funkčnost. Díky sporadickému testovacímu provozu je BrowserLab stále především pokusným a také poměrně líným (avšak zatím stále bezplatným) technologickým preview. Největším nedostatkem BrowserLab je nulová, nicméně logická nemožnost jakkoliv s vykresleným screenshotem online manipulovat a také nemožnost jakkoliv testovat funkčnost (tzn. nikoliv pouze zobrazení) webové stránky. Například na rozdíl od Microsoft Expression SuperPreview nelze v BrowserLab nechat zobrazit strukturu webové stránky s CSS styly a bohužel ani smysluplně testovat lokální stránky, naopak výhodou je podpora momentálně většího počtu webových prohlížečů pro Windows a Mac OS X a také nezávislost pouze na platformě Windows. Vývoj a rozšiřování schopností BrowserLab je i nadále velmi pomalé, stále se tedy víceméně jedná o demonstraci o technologií AIR/Flash, než o v praxi smysluplně použitelný vývojářský nástroj.

Adobe BrowserLab preview 4 - výběr varianty náhledu/náhledů pro testování vzhledu zadané webové stránky

Adobe BrowserLab preview 4 - ovládací klávesy webové aplikace