13 moduri de testare a browserului și validarea lucrării

În fiecare zi, când revizuiesc șabloanele pe ThemeForest, testez depunerea pentru validare și compatibilitatea browser-ului - ca să nu mai vorbesc și de propria mea lucrare. De-a lungul timpului, am scroungat web-ul pentru cele mai bune instrucțiuni de validare și de testare a compatibilității browser-ului în jurul valorii de. Iată favoritele mele.

Validarea HTML și CSS

Mai întâi, să aruncăm o privire asupra unor metode pentru a verifica validarea HTML și CSS. Ar trebui să menționez că lucrez pe un Mac, astfel încât acestea vor fi mai mult părtinitoare Mac. Nu vă faceți griji, însă, există multe soluții independente de platformă.

Împreună cu validarea fișierelor, ar trebui să vă formatați bine și marcajul. "Exemple și sfaturi pentru formatul HTML / CSS excelent" este un articol pentru a citi mai multe despre acest subiect.

1. Validarea W3C - HTML

Probabil cel mai cunoscut este serviciul online de validare W3C. Puteți valida prin URI, încărcați fișierul sau introduceți direct marcajul. Există mai multe opțiuni de validare disponibile, deși, de cele mai multe ori, nu veți avea nevoie să le mâncați cu ele.

2. Validarea W3C - CSS

W3C are, de asemenea, un serviciu de validare CSS pe care cel mai probabil îl cunoașteți. La fel ca în cazul serviciului de validare HTML, versiunea CSS are opțiuni suplimentare, dacă este necesar, și permite validarea prin URI, încărcarea fișierelor și introducerea marcajului direct.

3. [Firefox] Bara de instrumente Web pentru dezvoltatori

Extensia barei de instrumente Web Developer pentru Firefox este foarte populară și are multe caracteristici extraordinare, împreună cu câteva instrumente excelente pentru verificarea validării HTML și CSS. Puteți verifica rapid validarea site-ului pe care îl vedeți în prezent sau a unui fișier local pe care îl vizualizați. Acesta va trimite URI sau fișierul care trebuie verificat la W3C și va afișa rezultatele într-o filă nouă.

De asemenea, puteți activa "Validarea paginii de afișare" pentru a afișa câteva informații de validare rapidă pentru HTML și CSS fără a fi nevoie să deschideți o filă nouă. Foarte util dacă lucrați la un proiect. De asemenea, puteți valida mult mai mult decât HTML și CSS.

4. [Independent de browser] Favelets W3C Validator

Folosesc Safari ca browser principal web, dar Firefox ma rasfatat inainte de a trece la o selectie imensa de extensii precum bara de instrumente Web Developer si Firebug. Safari are Inspectorul Web, un instrument similar cu Firebug, dar nu vă permite să verificați validarea fișierelor.

O modalitate rapidă și ușoară de a oferi fiecărui browser major o modalitate de a valida HTML și CSS este prin utilizarea favelet-urilor. Favelets sunt fragmente marcate de JavaScript pentru a adăuga funcționalități suplimentare. W3C oferă mai multe faveleturi de validare pe care le folosesc frecvent cu Safari.

5. Editorul dvs. de dezvoltare

Majoritatea editorilor de dezvoltare oferă un fel de instrument de validare. Coda și CSSEdit sunt în prezent editorii mei de ales și ambele furnizează instrumente de validare.

6. Validatorul S.A.C.

Dacă trebuie să verificați rapid validarea pe un număr mare de documente, poate fi o durere pentru a le deschide în editorul dvs. preferat sau prin browser. Această aplicație o face rapid și ușor.

Validator S.A.C. este o aplicație autonomă OS X care poate valida documente HTML (cu W3C) utilizând un favelet, drag and drop, cu URL-uri sau doar fișierul aplicației File> Open. Folosesc metoda drag and drop foarte des. ;-)

Gândurile finale privind validarea

În timp ce validarea este foarte importantă, ea este doar un instrument pentru a vă asigura că sunteți codul este de până la standarde și toate lucrurile bune. Dacă utilizați unele noi tehnologii web, este posibil să nu fie validate, dar asta nu înseamnă că nu trebuie să le utilizați. Inovația se naște adesea prin încălcarea regulilor.

Având în vedere acest lucru, dacă trimiteți un șablon de vânzare la Theme Forest, asigurați-vă că toate fișierele dvs. sunt validate inainte de depunerea. Dacă există erori de validare din cauza unor lucruri precum CSS3, trebuie doar să menționați acest lucru în notele pentru recenzent. ;-)

Testarea compatibilității browserului

Dacă toată lumea tocmai a folosit versiuni actualizate fie Firefox, fie Safari, testarea browserului ar fi o briză. Să ne confruntăm însă cu asta, asta nu se va întâmpla și vom avea de-a face cu problemele din Internet Explorer pentru anii următori (nu doar IE6).

Iată câteva dintre instrumentele pe care le folosesc și altele pe care nu le folosesc, pentru a testa compatibilitatea în Internet Explorer, Safari, Firefox și alte browsere.

IE actuală, Firefox și Safari

Vom avea în mod evident browserele actuale instalate pe sistemele noastre, cum ar fi Firefox 3.5, Safari 4, Opera și Internet Explorer dacă sunteți pe Windows.

7. Versiuni mai vechi ale Firefox

Dacă trebuie să testați versiuni mai vechi ale Firefox există mai multe moduri de a face acest lucru pe care l-am găsit dar acestea sunt cele mai simple pe care le-am găsit.

  • Windows: Standalone Firefox (versiuni mai vechi) prin intermediul Portableapps.com
  • Mac: MultiFirefox 2.0

Portableapps pe Windows rulează Firefox ca aplicație independentă, astfel încât instalarea nu este necesară și nu se va întâmpla cu actuala dvs. instalare Firefox.

MultiFirefox 2.0 pe Mac vă permite să rulați mai multe versiuni de Firefox unul lângă celălalt, gestionând profilurile Firefox.

Pentru a descărca alte versiuni de Firefox, accesați http://releases.mozilla.org/pub/mozilla.org/firefox/releases/

8. Versiunile mai vechi ale Safari

Din nefericire, pentru dvs., dezvoltatorii web pe bază de Windows de acolo, nu am o soluție simplă pentru a testa mai multe versiuni de Safari. Pentru utilizatorii de Mac există o colecție frumoasă de versiuni independente de Safari oferite de Michel Fortin.

9 & 10. Versiuni vechi ale Internet Explorer

Nu există nici o modalitate ușoară de a testa interactiv IE pe Mac, așa că folosesc Parallels pentru a rula o mașină virtuală de Windows XP cu IETester instalat. Această aplicație vă permite să testați versiunile IE încă din 5.5 în Windows XP, Vista și 7.

Oricând o dată o să observ o ciudățenie în IETester că nu sunt sigur că apare într-o versiune nativă a IE6 sau 7, așa că am instalat și versiuni standalone ale IE6, 7 și 8 utilizând Internet Explorer Collection.

Servicii Snapshot

Dacă nu aveți nevoie să interacționați de fapt cu site-ul dvs. în aceste browsere, puteți utiliza, de asemenea, mai multe servicii de instantanee ale browserului, care vor afișa doar o imagine a modului în care site-ul va căuta o gamă largă de browsere.

11. Adobe BrowserLab

Adobe a ieșit recent cu un nou serviciu numit BrowserLab, care vă permite să vizualizați o fotografie instantanee a unui site web prin URL în diferite browsere. Este rapid, gratuit și vă oferă câteva opțiuni diferite de vizualizare pentru a compara diferite versiuni de browser.

12. Browsershots.org

Browsershots.org este aceeași idee cu Adobe BrowserLab, dar cu mai multe diferențe. Puteți testa mai multe browsere pe mai multe platforme cu mai multe opțiuni cum ar fi ecranul, adâncimea de culoare, javascript, flash, etc. Dezavantajul este că serviciul este puțin mai lent (uneori prea lent) și nu este la fel de frumos cu un interfață utilizator.

13. Browsercam

Dacă nu ați citit "25 Servicii Web esențiale pentru designeri", ar trebui. Are niște servicii excelente, așa cum am aflat despre Browsercam.

Browsercam este în esență același lucru ca Browsershots, dar este un serviciu plătit, dar oferă câteva caracteristici mai profunde și presupun rezultate mai rapide, deși nu l-am folosit încă.

Gândurile finale

Deci, tu o ai. Mai multe moduri de a valida și de a testa munca dvs. atât pe Windows cât și pe Mac. Dacă trimiteți un șablon pentru Theme Forest, acum nu aveți nici o scuză pentru erorile de validare sau incompatibilitățile browserului. Marea majoritate a șabloanelor pe care le examinez sunt respinse din cauza erorilor de validare și a problemelor browserului care ar fi trebuit să fie reparate înainte de a fi trimise.

Dacă utilizați sau cunoașteți un instrument (sau unelte) pentru validare sau testare în browser, anunțați-ne în comentarii.

  • Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.


Cod