Share
Bei der Überprüfung von Vorlagen in ThemeForest teste ich jeden Tag die Einsendungen auf Validierung und Browserkompatibilität - ganz zu schweigen von meiner eigenen Arbeit. Im Laufe der Zeit habe ich das Internet nach den besten Tools für Validierung und Browserkompatibilität durchsucht. Hier sind meine Favoriten.
Schauen wir uns zunächst einige Methoden an, um die HTML- und CSS-Validierung zu überprüfen. Ich sollte erwähnen, dass ich an einem Mac arbeite, so dass diese eher Mac-orientiert sind. Keine Sorge, es gibt viele plattformunabhängige Lösungen.
Neben der Überprüfung Ihrer Dateien sollten Sie auch Ihr Markup gut formatieren. "Beispiele und Tipps für eine gute HTML / CSS-Formatierung" ist ein Artikel, in dem Sie mehr zu diesem Thema lesen.
Am bekanntesten ist wahrscheinlich der Online-W3C-Validierungsdienst. Sie können die Überprüfung per URI, Datei-Upload oder direkter Eingabe des Markups durchführen. Es stehen verschiedene Validierungsoptionen zur Verfügung, obwohl Sie die meiste Zeit nicht wirklich mit ihnen zu tun haben müssen.
W3C verfügt auch über einen CSS-Validierungsdienst, mit dem Sie am wahrscheinlichsten vertraut sind. Genau wie beim HTML-Validierungsdienst verfügt die CSS-Version bei Bedarf über zusätzliche Optionen und ermöglicht die Validierung über URI, Datei-Upload und direkte Markup-Eingabe.
Die Symbolleistenerweiterung von Web Developer für Firefox ist sehr beliebt und verfügt über eine Vielzahl toller Funktionen sowie einige hervorragende Tools zum Überprüfen der HTML- und CSS-Validierung. Sie können die Validierung der gerade angezeigten Site oder einer lokalen Datei, die Sie anzeigen, schnell überprüfen. Es sendet den URI oder die zu prüfende Datei an W3C und zeigt die Ergebnisse auf einer neuen Registerkarte an.
Sie können auch "Validierung der Seiten anzeigen" aktivieren, um einige kurze Validierungsinformationen für HTML und CSS anzuzeigen, ohne dass eine neue Registerkarte geöffnet werden muss. Sehr nützlich, wenn Sie an einem Projekt arbeiten. Sie können auch viel mehr als nur HTML und CSS überprüfen.
Ich verwende Safari als meinen primären Webbrowser, aber Firefox hat mich verwöhnt, bevor ich mit der riesigen Auswahl an Erweiterungen wie der Web Developer-Symbolleiste und Firebug gewechselt habe. Safari hat den Web Inspector, ein ähnliches Tool wie Firebug, aber Sie können die Überprüfung der Datei nicht überprüfen.
Mit Hilfe von Favelets können Sie jedem gängigen Browser schnell und einfach HTML und CSS überprüfen. Favelets sind mit JavaScript markierte Snippets, um zusätzliche Funktionen hinzuzufügen. W3C bietet mehrere Validierungs-Favelets, die ich häufig mit Safari verwende.
Die meisten Entwicklungseditoren bieten eine Art Validierungswerkzeug an. Coda und CSSEdit sind derzeit meine bevorzugten Redakteure und bieten beide Validierungswerkzeuge.
Wenn Sie die Validierung einer großen Anzahl von Dokumenten schnell überprüfen müssen, kann es schwierig sein, sie alle in Ihrem bevorzugten Editor oder über den Browser zu öffnen. Diese App macht es schnell und einfach.
Validator S.A.C. ist eine eigenständige OS X-Anwendung, die HTML-Dokumente (mit W3C) mit einem Favelet, Drag & Drop, mit URLs oder nur mit der Anwendung Datei> Öffnen validieren kann. Die Drag & Drop-Methode verwende ich besonders häufig. ;-)
Während Validierung sehr wichtig ist, ist es das ist Nur ein Werkzeug, das sicherstellt, dass der Code den Standards und all dem guten Zeug entspricht. Wenn Sie einige neue Web-Technologien verwenden, wird dies möglicherweise nicht überprüft. Dies bedeutet jedoch nicht, dass Sie sie nicht verwenden sollten. Innovation entsteht oft durch das Brechen der Regeln.
Wenn Sie davon ausgehen, dass Sie bei Theme Forest eine Vorlage zum Verkauf einreichen, stellen Sie sicher, dass ALLE Ihre Dateien gültig sind Vor einreichen Wenn Validierungsfehler aufgrund von Dingen wie CSS3 auftreten, geben Sie dies unbedingt in den Anmerkungen für den Prüfer an. ;-)
Wenn jeder nur aktuelle Versionen, entweder Firefox oder Safari, verwendet, wäre das Testen von Browsern ein Kinderspiel. Seien wir ehrlich, das wird nicht passieren und wir werden uns jahrelang mit Internet Explorer-Problemen beschäftigen (nicht nur mit IE6)..
Hier sind einige der Tools, die ich verwende, und andere nicht, um die Kompatibilität mit Internet Explorer, Safari, Firefox und anderen Browsern zu testen.
Natürlich werden auf unseren Systemen die aktuellen Browser installiert sein, z. B. Firefox 3.5, Safari 4, Opera und Internet Explorer, wenn Sie mit Windows arbeiten.
Wenn Sie ältere Versionen von Firefox testen müssen, gibt es mehrere Möglichkeiten, die ich gefunden habe. Diese sind jedoch die einfachsten, die ich gefunden habe.
Bei Portableapps unter Windows wird Firefox als eigenständige Anwendung ausgeführt, so dass eine Installation nicht erforderlich ist und die aktuelle Firefox-Installation nicht beeinträchtigt wird.
Mit MultiFirefox 2.0 unter Mac können Sie mehrere Firefox-Versionen nebeneinander ausführen, indem Sie die Firefox-Profile verwalten.
Um andere Versionen von Firefox herunterzuladen, besuchen Sie http://releases.mozilla.org/pub/mozilla.org/firefox/releases/
Für Windows-basierte Webentwickler gibt es leider keine einfache Lösung, um mehrere Versionen von Safari zu testen. Für uns Mac-Benutzer gibt es eine schöne Sammlung eigenständiger Safari-Versionen von Michel Fortin.
Es ist nicht einfach, IE interaktiv auf einem Mac zu testen. Ich verwende Parallels, um eine virtuelle Maschine von Windows XP mit installiertem IETester auszuführen. Mit dieser Anwendung können Sie IE-Versionen bereits unter 5.5 unter Windows XP, Vista und 7 testen.
Hin und wieder stelle ich in IETester eine Merkwürdigkeit fest, dass ich nicht sicher bin, dass sie in einer nativen Version von IE6 oder 7 vorkommt. Daher habe ich auch eigenständige Versionen von IE6, 7 und 8 mit der Internet Explorer Collection installiert.
Wenn Sie in diesen Browsern nicht wirklich mit Ihrer Site interagieren müssen, können Sie auch mehrere Browser-Snapshot-Services verwenden, die lediglich ein Bild davon vermitteln, wie die Site für eine Vielzahl von Browsern aussieht.
Adobe hat kürzlich einen neuen Dienst namens BrowserLab herausgebracht, mit dem Sie eine Momentaufnahme einer Website über eine URL in verschiedenen Browsern anzeigen können. Es ist schnell, kostenlos und bietet Ihnen verschiedene Anzeigeoptionen zum Vergleichen verschiedener Browserversionen.
Browsershots.org ist die gleiche Idee mit Adobe BrowserLab, jedoch mit einigen Unterschieden. Sie können so mehr Browser auf mehr Plattformen mit mehr Optionen wie Bildschirmgröße, Farbtiefe, Javascript, Flash usw. testen. Der Nachteil ist, dass der Dienst etwas langsamer (manchmal zu langsam) ist und nicht annähernd so schön von einer Benutzeroberfläche ist.
Wenn Sie "25 Essential Web Services für Designer" nicht gelesen haben, sollten Sie dies tun. Es hat einige großartige Dienste, so habe ich von Browsercam erfahren.
Browsercam ist im Grunde dasselbe wie Browsershots, ist jedoch ein kostenpflichtiger Dienst, bietet jedoch einige ausführlichere Funktionen und ich gehe von schnelleren Ergebnissen aus, obwohl ich ihn noch nicht verwendet habe.
Also da hast du es. Mehrere Möglichkeiten zum Überprüfen und Testen Ihrer Arbeit unter Windows und Mac. Wenn Sie eine Vorlage an Theme Forest senden, haben Sie jetzt keine Entschuldigung für Validierungsfehler oder Inkompatibilitäten von Browsern. Die große Mehrheit der von mir überprüften Vorlagen wird aufgrund von Überprüfungsfehlern und Browserproblemen abgelehnt, die vor der Übergabe behoben sein sollten.
Wenn Sie ein oder mehrere Tools zur Validierung oder zum Testen von Browsern verwenden oder kennen, teilen Sie uns dies in den Kommentaren mit.
Accentsconagua