Share
Elke dag, bij het beoordelen van sjablonen op ThemeForest, test ik de inzendingen op validatie en browsercompatibiliteit - om nog maar te zwijgen van mijn eigen werk. Na verloop van tijd heb ik het web doorzocht voor de beste testtools voor validatie en browsercompatibiliteit. Dit zijn mijn favorieten.
Laten we eerst eens kijken naar enkele methoden om HTML- en CSS-validatie te controleren. Ik moet vermelden dat ik op een Mac werk, dus deze worden meer door de Mac beïnvloed. Maar maak je geen zorgen, er zijn veel platformonafhankelijke oplossingen.
Naast het valideren van uw bestanden, moet u uw opmaak ook netjes opmaken. "Voorbeelden en tips voor Great HTML / CSS Formatting" is een artikel om meer over dat onderwerp te lezen.
Waarschijnlijk het meest bekend is de online W3C-valideringsservice. U kunt valideren door middel van URI, bestandsuploads of het direct invoeren van de markup. Er zijn verschillende validatie-opties beschikbaar, hoewel je meestal niet echt met ze hoeft te rommelen.
W3C heeft ook een CSS-validatieservice die u waarschijnlijk kent. Net als bij de HTML-validatieservice heeft de CSS-versie indien nodig aanvullende opties en maakt validatie via URI, bestandsupload en directe markup-invoer mogelijk.
De werkbalk-extensie van de webdeveloper voor Firefox is erg populair en heeft tonnen geweldige functies samen met een aantal geweldige hulpmiddelen om HTML- en CSS-validatie te controleren. U kunt snel de validatie controleren van de site die u momenteel bekijkt of een lokaal bestand dat u bekijkt. Het stuurt de URI of het bestand dat moet worden gecontroleerd naar W3C en geeft de resultaten weer op een nieuw tabblad.
U kunt ook 'Toon paginavalidatie' inschakelen om een aantal snelle validatiegegevens weer te geven voor HTML en CSS zonder een nieuw tabblad te hoeven openen. Heel handig als je aan een project werkt. U kunt ook veel meer valideren dan alleen HTML en CSS.
Ik gebruik Safari als mijn primaire webbrowser maar Firefox heeft me verwend voordat ik ben overgeschakeld met de enorme selectie van extensies zoals de Web Developer-werkbalk en Firebug. Safari heeft de Web Inspector, een soortgelijk hulpmiddel als Firebug, maar het laat u de bestandsvalidatie niet controleren.
Een snelle en gemakkelijke manier om vrijwel elke grote browser een manier te geven om HTML en CSS te valideren, is door favelets te gebruiken. Favelets zijn fragmenten met JavaScript-bladwijzers om extra functionaliteit toe te voegen. W3C biedt verschillende validatie favelets die ik vaak gebruik met Safari.
De meeste ontwikkelaars bieden een soort validatietool. Coda en CSSEdit zijn momenteel mijn favoriete editors en beide bieden validatietools.
Als u snel moet controleren op validatie van een groot aantal documenten, kan het lastig zijn om ze allemaal in uw favoriete editor of via de browser te openen. Deze app maakt het snel en gemakkelijk.
Validator S.A.C. is een stand-alone toepassing voor OS X die HTML-documenten (met W3C) kan valideren met behulp van een favelet, slepen en neerzetten, met URL's of alleen met Bestand> Openen van de toepassing. Ik gebruik de drag-and-drop-methode met name vaak. ;-)
Hoewel validatie erg belangrijk is, is het is slechts een hulpmiddel om ervoor te zorgen dat uw code aan de normen voldoet en al het goede. Als u nieuwe webtechnologieën gebruikt, wordt deze mogelijk niet gevalideerd, maar dat betekent niet dat u deze niet moet gebruiken. Innovatie wordt vaak geboren door het overtreden van de regels.
Met dat gezegd zijnde, als je een template indient bij Theme Forest, zorg er dan voor dat ALLE bestanden valideren voor indienen. Als er validatiefouten zijn door zaken als CSS3, vermeld dat dan in de opmerkingen bij de recensent. ;-)
Als iedereen gewoon Firefox of Safari up-to-date had, zou het testen van browsers een fluitje van een cent zijn. Laten we eerlijk zijn, dat zal niet gebeuren en we zullen de komende jaren te maken krijgen met problemen met Internet Explorer (niet alleen met IE6).
Hier zijn enkele van de hulpprogramma's die ik gebruik en andere niet, om te testen op compatibiliteit in Internet Explorer, Safari, Firefox en andere browsers.
Uiteraard zullen de huidige browsers op onze systemen zijn geïnstalleerd, zoals Firefox 3.5, Safari 4, Opera en Internet Explorer als u Windows gebruikt.
Als je oudere versies van Firefox moet testen, zijn er verschillende manieren om dit te doen die ik heb gevonden, maar deze zijn de gemakkelijkste die ik heb gevonden.
Portableapps op Windows voert Firefox uit als een zelfstandige applicatie, dus installatie is niet nodig en het zal niet rotzooien met je huidige Firefox-installatie.
Met MultiFirefox 2.0 op Mac kunt u meerdere versies van Firefox naast elkaar uitvoeren door de Firefox-profielen te beheren.
Als u andere versies van Firefox wilt downloaden, gaat u naar http://releases.mozilla.org/pub/mozilla.org/firefox/releases/
Helaas voor jullie Windows gebaseerde webontwikkelaars die er zijn, heb ik geen gemakkelijke oplossing om meerdere versies van Safari te testen. Voor Mac-gebruikers is er een mooie verzameling stand-alone versies van Safari die wordt geleverd door Michel Fortin.
Er is geen eenvoudige manier om IE op Mac interactief te testen, dus gebruik ik Parallels om een virtuele machine van Windows XP te laten draaien met IETester geïnstalleerd. Met deze applicatie kun je versies van IE testen tot 5.5 op Windows XP, Vista en 7.
Af en toe zie ik een rariteit in IETester waarvan ik niet zeker ben dat deze voorkomt in een native-versie van IE6 of 7, dus ik heb ook stand-alone versies van IE6, 7 en 8 geïnstalleerd met behulp van Internet Explorer Collection.
Als u in deze browsers geen interactie met uw site nodig heeft, kunt u ook gebruikmaken van verschillende browseropnameservices die een afbeelding laten zien van hoe de site op zoek zal zijn naar een breed scala aan browsers..
Adobe heeft onlangs een nieuwe service uitgebracht, BrowserLab genaamd, waarmee u een snapshot van een website via URL in verschillende browsers kunt bekijken. Het is snel, gratis en geeft u een aantal verschillende weergaveopties om verschillende browserversies met elkaar te vergelijken.
Browsershots.org is hetzelfde idee heeft Adobe BrowserLab maar met verschillende verschillen. Je kunt veel meer browsers op meer platforms testen met meer opties zoals schermgrootte, kleurdiepte, javascript, flash, etc. Het nadeel is dat de service iets trager is (soms te traag) en lang niet zo mooi is als een gebruikersinterface.
Als u "25 essentiële webservices voor ontwerpers" nog niet hebt gelezen, zou u dat moeten doen. Het heeft een aantal geweldige diensten, en dat is hoe ik achter Browsercam ben gekomen.
Browsercam is eigenlijk hetzelfde als Browsershots, maar is een betaalde service maar biedt meer diepgaande functies en ik neem aan dat dit snellere resultaten oplevert, hoewel ik het nog niet heb gebruikt.
Dus daar heb je het. Verschillende manieren om uw werk op zowel Windows als Mac te valideren en te testen. Als u een sjabloon indient bij Theme Forest, heeft u nu geen excuus meer voor validatiefouten of browser-compatibiliteit. De overgrote meerderheid van de sjablonen die ik bekijk, wordt afgewezen vanwege validatiefouten en browserproblemen die hadden moeten worden opgelost voordat ze werden ingediend.
Als u een tool (of tools) gebruikt of weet voor validatie of browsertests, laat het ons dan weten in de comments.
Accentsconagua