Home » GHIDURI ŞI TUTORIALE, INTERNET » BrowserShots.org şi IE NetRenderer. Testarea compatibilităţii

BrowserShots.org şi IE NetRenderer. Testarea compatibilităţii

browser-e web logo-uriEste pentru a doua oară când încerc să abordez subiectul compatibilităţii unui site cu principalele browser-e web şi sper ca de această dată, materialul să fie mai bine structurat şi mai pe placul vizitatorilor.

Dată fiind multitudinea de browser-e web existente, un site poate întâmpina probleme de afişare, dacă se utilizează un alt browser decât cel pentru care a fost testat. Până acum nu v-am spus nimic nou, fiindcă probabil că aţi observat singuri enunţuri precum „site optimizat pentru…..”, „rezoluţie recomandată….”, însă ceea ce nu cred că ştiţi, este că din păcate, în spatele acestor sintagme se ascunde de multe ori, o incompatibilitate cu orice alt browser web, în afară de cel specificat.

Nu mai departe de astăzi, am fost surprins să observ că mic site la care lucrez, şi pe care îl testasem conştiincios cu Internet Explorer 8 şi Mozilla Firefox 3.5.7, avea probleme la afişarea pe IE 7. Am apelat la cele două soluţii de testare a compatibilităţii: BrowserShots.org şi IE NetRenderer, problema a fost rezolvată, iar eu mi-am făcut timp să rescriu aceste rânduri.

De ce este importantă testarea compatibilităţii ?

După cum vă spunea şi în primul material, atunci când vine vorba despre propriul site, fie că ne aflăm în postura celor care îl realizează, îl administrează, sau care l-au comandat, suntem cu siguranţă interesaţi ca acesta să fie compatibil cu orice browser de internet existent şi folosit pe piaţă. Nimeni nu concepe un site, şi cu siguranţă nimeni nu plăteşte pentru un site, ca acesta să treacă neobservat şi, aş mai putea adăuga, să fie imposibil de accesat din motive tehnice.

Înainte de a vorbi despre optimizare pentru motoarele de căutare, despre „copywriting” sau „usuability”, trebuie să ne asigurăm că acel site poate fi accesat, iar conţinutul va fi interpretat corect de către browser-ele web. Problema compatibilităţii este una care priveşte deopotrivă realizatorul de site-uri / administratorul unui blog, dar şi consumatorul final / vizitatorul, prin prisma acţiunilor pe care acesta nu le poate duce la bun sfârşit din cauza unor probleme tehnice.

Vă închipuiţi ce-ar însemna pentru un magazin online să-şi limiteze posibilii clienţi, excluzându-i din start pe aceia care nu folosesc un anumit browser de internet ?!

BrowserShots.org

BrowserShots.org este un serviciu gratuit, disponibil online şi care oferă vizitatorilor şansa de vedea cum arată un site pe mai multe configuraţii. Proiectul, gândit de Johann C. Rochol, funcţionează pe bază de voluntariat, iar la această oră, aproximativ 150 de calculatoare realizează capturile de ecran pe care le prezintă apoi vizitatorilor.

Deşi BrowserShots.org oferă şi interfaţă în limba română, acesta se rezumă la câteva specifice, nimic spectaculos, fereastra principală păstrând înscrisurile „enter url here” sau „submit”.

Selectarea browser-elor pentru care doriţi să testaţi site-ul, se poate face atât în funcţie de sistemul de operare (Linux, Windows, BSD), dar şi ţinând cont de de motorul de randare folosit (Gecko, KHTML/WebKit). Paranteză. Nu ştiu de ce au omis Trident, cunoscut mai degrabă ca MSHTML, motorul folosit de browser-ele Microsoft, începând cu Internet Explorer 4.0, însă e bine că din listă nu lipsesc IE 5.5, IE 6, IE 7 şi IE 8.

O altă opţiune interesantă pe care o oferă serviciul propus de browsershots.org este posibilitatea de a stabili anumiţi parametri tehnici (dimensiunea ecranului, adâncime de culoare, javascript, java, flash) pentru pagina pe care-o doriţi testată.

Se poate opta pentru o lăţime a ecranului între 640 şi 1680 de pixeli, un lucru util dacă ne uităm „Browser size”, o aplicaţie recentă furnizată de Google şi despre care s-a vorbit pe unul din site-urile partenere, WorldIT.

Setarea adâncimii de culoare (8, 16, 24 sau 32 de biţi) poate fi indicată doar atunci când găzduiţi galerii foto şi sunteţi foarte scrupuloşi în ce priveşte calitatea imaginilor. Dar, în principiu, nimeni nu mai foloseşte adâncimi de culoare sub 16 biţi.

Puteţi alege dacă funcţia JavaScript să fie sau nu activă, iar în cazul în care optaţi pentru JavaScript activ aveţi de ales între versiunile1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9 şi 2.0. Şi aici îmi permit să fac o paranteză pentru a lămuri, măcar pentru vizitatorii acestui site, o confuzie foarte des întâlnită între JavaScript şi Java.

Java. Dezactivat / Activat. Chiar dacă numele ar sugera o asociere, susţinută şi de către câteva similarităţi în sintaxă, între JavaScript şi Java (limbajul Java) nu există o legătură. Dezvoltat iniţial de către Brendan Eich de la „Netscape Communications Corporation”, JavaScript este un limbaj de programare orientat pe obiect, bazat pe conceptul prototipurilor. JavaScript se foloseşte în special pentru a implementa anumite funcţionalităţi (precum meniuri sau formulare) în paginile web, avantajul fiind că aceste pagini sunt rulate direct de către browser-ul dumneavoastră de internet.

Java este un limbaj de programare, tot orientat pe obiect, dar conceput de Sun Microsystems la începutul anilor 90. Un program Java rulează pe orice calculator pe care este instalată o maşină virtuală Java şi aici poate vă amintiţi un actualizare numită „Java Virtual Machine” pe care sunt sigur că aţi instalat-o cel puţin o dată.

Flash. Dezactivat sau activat în următoarele versiuni: 6, 7, 8, 9, 10.

Ca obiect de studiu am ales propriul site, am bifat browser-ele pentru care doresc testarea compatibilităţii şi dat fiind faptul că n-au fost setări suplimentare, următorul pas a fost butonul de trimitere (eng. submit).

Iar rezultatele începe să curgă…. sau mai corect spus, să picure. În scurt timp apar şi primele capturi de ecran, reprezentate prin fişiere *.png, pe care le puteţi descărca pe tot parcursul testului, imediat ce ele devin disponibile, sau o singură dată, la final.

În funcţie disponibilitatea sistemelor ce fac testele şi de numărul de browser-e ales, este posibil ca unele rezultate să le primiţi şi după câte ore. Nu-i nimic veţi spune. Trimit URL-ul şi verific mai târziu…. doar că din păcate, nu se poate. La fiecare 30 de minute dată o comandă de extindere a termenului de verificare, altfel cererea nostră expiră şi primim doar rezultatele disponibile până în acel moment.

Referindu-mă strict la testul ales, din cele 6 browser-e selectate, pentru 5 dintre acestea, am primit confirmarea vizuală. Se poate întâmpla, şi nu este nimic neobişnuit, ca pentru un anumit browser, testul să fie neconcludent. Vom repeta testul într-o altă zi.

browsershots.org. Casetă tehnică

  • URL: http://browsershots.org/
  • Categorie: Afişarea unui site cu mai multe browser-e de internet
  • Autor: Johann C. Rocholl

IE NetRenderer

Al doilea site pe care vreau să vi-l prezint este specializat în testarea compatibilităţii cu diferite versiuni de Internet Explorer (IE 5,5, IE 6, IE 7 şi IE 8), iar principalul avantaj îl reprezintă faptul că rezultatele sunt afişate imediat.

Utilizarea este foarte simplă. Alegem site-ul pe care-l dorim testat, versiunea de Internet Explorer corespunzătoare, sau de ce nu, una dintre opţiunile „IE7-IE6 Mixed”, respectiv „IE7-IE6 Difference” şi trecem la treabă.

Am fost surprins să observ că blogul Stefa Media este afişat corect INCLUSIV de către Internet Explorer 6, în condiţiile în care compatibilitatea cu acest browser arhaic a soft una dintre ultimele mele griji. Cât despre cele două moduri IE7-IE6 Mixed / Difference, ele oferă o experienţă vizuală interesantă cu acele„straturi”, însă doar atât.Mai interesantă mi s-a părut a fi extensia pentru Firefox, IE NetRenderer 0.9.5.

IE NetRenderer. Casetă tehnică

  • URL: http://ipinfo.info/netrenderer/
  • Categorie: Afişarea unui site cu mai multe versiuni de Internet Explorer
  • Autor: GEOTEK IT Outsourcing Services Berlin

În loc de încheiere….

Soluţiile prezentate mai sus nu constituie un secret pentru cei care lucrează în domeniu, şi nu m-ar mira să existe alternative, poate chiar mai bune decât ce v-am prezentat.

Ar mai fi de spus două cuvinte şi despre World Wide Web Consortium (W3C), unde vă puteţi testa gratuit site-ul, iar dacă acesta îndeplineşte rigorile HTML/XHTML, respectiv CSS (standard 2.1) aveţi dreptul să folosiţi în paginile dumneavoastră certificarea W3C, însă mai important de atât, priviţi-o ca o măsură în plus de precauţie.

Repet. Nu designer-ilor le sunt adresate aceste materiale, ci utilizatorilor obişnuiţi, iar cum foarte mulţi dintre cei care mă urmăresc, au la rândul lor un blog gestionat în „regie” proprie, n-ar fi exclus ca schimbarea temei, instalarea unui plugin care implică o componentă CSS sau JavaScript să influenţeze într-un mod negativ afişarea pe anumite browser-e. Scăderea numărului de vizitatori (şi dau un un exemplu verificat) poate fi un semnal că ceva s-a dereglat în angrenajul site-ului.

Încercaţi BrowserShots.org şi IE NetRenderer, măcar pentru a fi siguri că aţi acoperit toate bazele.

Materiale bibliografice:
  • http://ro.wikipedia.org/wiki/JavaScript
  • http://ro.wikipedia.org/wiki/Java_%28limbaj_de_programare%29
  • http://ro.wikipedia.org/wiki/Browser
  • http://www.w3.org/
  • http://googleblog.blogspot.com/2009/12/browser-size-tool-to-see-how-others.htm

Despre autor şi articol

a scris 281 articole pe blogul Stefa Media.


Student la Comunicare şi Relaţii Publice, cunoscător al jocurilor din perioada anilor '80 sau '90, interesat de IT şi WordPress, scriu despre ce-mi place şi, de cele mai multe ori, îmi place ceea ce scriu. Şi nu doar mie. De aceea continui.



  1. Ianuarie 14th, 2010 la 16:58 | #1

    Salut Andrei,

    Ma bucur sa vad ca ai reinceput sa scrii articole in stilul tau neconfundat! :)

    Browser Shots il folosesc de multa vreme si tot timpul am fost multumit de facilitatile aduse de acest sistem. :)

  2. Ianuarie 17th, 2010 la 05:16 | #2

    acum i-ai invatat pe copii cum sa-si faca trafic pe blog…

  3. Ianuarie 17th, 2010 la 13:50 | #3

    @Makavelis
    Salut şi bine ai venit. E şi asta o modalitate de a aduce trafic, însă nu m-aş lăuda cu astfel de „unici”. La ce ajută ?!