Napomena: Ovaj članak izvorno je objavljen na portalu Sistemac dana 19. kolovoza 2010.
Ako web-dizajnera definiramo kao osobu koja se bavi dizajnom i izradom web stranica, dva su osnovna alata koja mu trebaju za taj zadatak – program za grafički dizajn i tekstualni editor. I dok će se kod programa za grafiku prije ili kasnije spomenuti Adobe Photoshop kao najbolji komercijalni program i GIMP kao njegova open source alternativa, kod editora je priča puno kompliciranija.
Dva WYSIWYG editora izdvajaju se po svojim mogućnostima od ostalih – to su Adobe Dreamweaver i Microsoft Expression Web.
U ovoj seriji članaka nećemo se baviti svim mogućnostima gore navedenih alata već ćemo se osvrnuti na samo neke njihove mogućnosti te na male, specijalizirane programe i on-line usluge koji mogu olakšati život web dizajnerima.
Problem kompatibilnosti preglednika
Jedan od najvećih izazova za web dizajnere zasigurno je izrada web stranica koje jednako izgledaju u svim preglednicima. Zbog toga dizajneri redovito na svojim računalima imaju instaliran veliki broj preglednika u različitim verzijama. Problem može nastati ako pojedini preglednici ne mogu koegzistirati u različitim verzijama na istom računalu – takav je slučaj s Internet Explorerom 6 i novijim verzijama Internet Explorera.
Rješenje je instalacija virtualnih računala koja sadrže određenu verziju preglednika. Microsoft nudi već pripremljena virtualna računala s različitim verzijama Internet Explorera. Pripazite samo na datume prestanka valjanosti pojedinog virtualnog računala.
On-line usluge za testiranje u preglednicima
Danas postoji velik broj on-line usluga i programa pomoću kojih se može vidjeti kako pojedina stranica izgleda u nekom od preglednika. Neke nude prikaz slika ekrana (screenshot) stranice, dok druge nude mogućnost udaljenog rada (najčešće putem VNC-a). Jako dobar pregled tih usluga nalazi se na stranici Rendering Services.
Od on-line usluga koje stvaraju slike ekrana izdvajamo Browsershots zbog izuzetno velikog broja podržanih preglednika.
Nedostatak Browsershotsa je vremenski interval koji je potreban da se generira slika za pojedini preglednik, zbog čega nije pogodan ako trebate nakon svake promjene vidjeti izgled stranica u više preglednika.
Adobe BrowserLab
Adobe je, u sklopu svoje on-line usluge CS Live, pokrenuo BrowserLab. Za korisnike koji nemaju Adobeov CS paket postojala je mogućnost besplatne registracije. BrowserLab je dostupan direktno unutar programa Adobe Dreamweaver CS4 (ili novijeg) pomoću naredbe File → Preview in Browser → Adobe BrowserLab ili pomoću prečice CTRL+SHIFT+F12.
Nakon prijave u BrowserLab možemo odabrati preglednike (Browser Sets) u kojima želimo generirati prikaz. U trenutku pisanja nudile su se kombinacije preglednika za Windows (Chrome, Firefox, Internet Explorer) i OS X (Firefox, Safari).
Načini prikaza
Na ekranu je moguće prikazati izgled stranice na nekoliko načina:
- samo u jednom pregledniku (1-up View)
- paralelno u dva preglednika (2-up View)
- jedna slika preko druge (Onion Skin) – pomoću strelica na tipkovnici moguće je povećati i smanjiti vidljivost jednog od dva odabrana preglednika
Moguće je uključiti i prikaz ravnala (Show Rulers) koja omogućavaju točan uvid u koordinate pojedinih elemenata stranice.
Ukoliko je potrebno, može se namjestiti i odgođena izrada slike ekrana (Delay). Ta opcija je korisna ako stranica sadrži elemente koji se duže učitavaju, primjerice Flash animacije ili AJAX.
Detaljne upute za BrowserLab dostupne su u službenoj dokumentaciji.
U idućem članku iz ove serije bavit ćemo se funkcionalnostima koje donosi Microsoft Expression Web SuperPreview.