Erstes Projekt: "Validator" für CSS, HTML, etc.

[Fallen][Angel]

Moin,

hab mich nun lange Zeit hauptsächlich theoretisch mit Python beschäftigt und möchte gern mit meinem ersten Projekt einsteigen. Als Projekt habe ich mir folgendes vorgenommen:

Da ich in einer Agentur arbeite, welche hauptsätzlich mit PHP arbeitet (Nachfrage bestimmt leider das Angebot ) ist natürlich auch CSS und HTML nicht weit. Es existierten dazu auch interne Styleguides, welche aber von manchen Mitarbeitern leider nur schlampig eingehalten werden.

Daher meine Idee: Ein Script, welches rekursiv (wenn gewollt) über ein Verzeichnis geht und sämtliche HTML, PHP, CSS, etc. Dateien einliest und gegen einige Regeln validiert. Am Ende soll das Ergebnis präsentiert werden: Welche Datei hat in welcher Zeile welchen Fehler.

An sich ein sehr nützliches Projekt, jedoch bin ich mir bei der Umsetzung noch etwas unsicher. Im ersten Schritt sollen erstmal nur CSS Dateien abgefrühstückt werden. Die Validierung selbst habe ich mir über einen Haufen an regulären Ausdrücken gedacht, da ich sonst nicht wüsste, wie ich sinnvoll meine Bedürfnisse darstellen kann, so dass ich vorhandene Dateien dagegen prüfen kann.

Später soll dies dann noch für andere Dateien nachgetragen werden, jedoch reicht mir im ersten Schritt nur CSS.

Gedacht hab ich mir folgende Klassen, bzw. Module/Packages (wo wir nun ja bei Python sind ):

Hauptprogramm
Kümmert sich um das Auslesen der Verzeichnisse und stellt eine Liste der Dateien zusammen.

Validator
Der Validator kriegt dann diese Liste übergeben und entscheidet anhand der Dateien, ob nun Regeln für HTML, CSS, etc. nötig sind und prüft die Dateien gegen diese Regeln.

File
Ein Modul für die Datei(en). Dadurch kann für jede Datei gespeichert werden, welche Fehler sie enthalten usw.

Error
Ein Modul für den eigentlichen Fehler. Welche Regel, welche Zeile, usw.

Rule
Ein Modul, welches die Regel(n) abbilden kann.

Soweit meine ersten Gedanken. Nun bin ich mir nicht sicher, ob ich es mir ggf. nicht zu schwer mache und für jedes Teil ein extra Modul definieren sollte. Ist dies ggf. übertrieben?

Auch bin ich mir nicht sicher, wie ich die Regeln verwalten möchte. Da es sich eigentlich nur um reguläre Ausdrücke handelt, könnte ich diese in eine XML Datei packen und diese dann auslesen und in viele kleine Objekte verpacken, d.h. 5 Regeln aus der XML ergibt 5 Instanzen von Rule.

Oder mache ich pro Typ (CSS, HTML, PHP, usw) ein eigenes Modul, z.b. Rule-HTML, Rule-CSS, usw. Dort könnten dann die Regeln hart abgelegt werden.

Soweit meine ersten Gedanken. Nun weiß ich z.B. auch nicht, ob es irgendwas davon schon in Python gibt, da mein Wissen noch recht begrenzt ist. Daher wende ich mich aber an euch und hoffe auf hilfreiche Anmerkungen und Tipps

[Darii]

Das ist zwar ein nettes Projekt, allerdings willst du das glaube ich nicht wirklich selbst schreiben. Der w3c Validator ist z.B. auch Open Source http://validator.w3.org/source/

[Fallen][Angel]

Es geht mir nicht um einen w3c Validator. Es geht mir eher darum, dass interne Styleguides zu kontrollieren, z.B. setzen von Leerzeichen, Benamungen, usw

[Hyperion]

Das ist aber extrem aufwendig! Dazu brauchst Du ja einen Parser für die drei Sprachen und musst Dich dann durch den Syntaxbaum hangeln und auf die Suche nach den Dingen machen, die Du gerne überprüfen willst. Da für Dich anscheinend Leerzeichen usw. auch eine Rolle spielen, wird die Sache nicht unbedingt einfacher (ich vermute mal es gibt für CSS und PHP fertige Grammatiken für Python, aber es ist ja fraglich, ob die nicht white-spaces rauswerfen).

Also für ein erstes Projekt ist das wahrlich nicht einfach

Also zu Beginn mit CSS anzufangen ist grundsätzlich ok, da die Sprache relativ einfach konstruiert ist. Allerdings würde ich auch da wohl eher zu einer Grammatik greifen und nicht stumpf mit RegExps arbeiten wollen (ok, kommt drauf an, was man da alles validieren will).

[Fallen][Angel]

Ich weiß nicht, was eine solche Grammatik alles umfasst, jedoch vermute ich mal, dass diese Dinge wie Groß- und Kleinschreibung, Benamung, Einrückung, usw. selbst schon besitzt, wodurch sowas eigentlich für mich unsinnig wäre.

Eigentlich möchte ich ja meine eigene Grammatik umsetzen, jedoch korregiere mich, wenn ich unter Grammatik nun etwas anderes verstehe, als es eigentlich ist

Nachtrag: Habe gerade spontan in Google folgendes gefunden: http://cthedot.de/cssutils/

Dies wäre zum Validieren von CSS nach Korrektheit sinnvoll, jedoch hat dies z.B. teils einen anderen Style als wir verwenden.

[Leonidas]

Eigentlich möchte ich ja meine eigene Grammatik umsetzen, jedoch korregiere mich, wenn ich unter Grammatik nun etwas anderes verstehe, als es eigentlich ist

Die Grammatik ist die Vorschrift gegen die du die Eingaben prüft um festzustellen ob die Eingabe gültige Syntax ist oder nicht.

[Fallen][Angel]

Eigentlich möchte ich ja meine eigene Grammatik umsetzen, jedoch korregiere mich, wenn ich unter Grammatik nun etwas anderes verstehe, als es eigentlich ist

Die Grammatik ist die Vorschrift gegen die du die Eingaben prüft um festzustellen ob die Eingabe gültige Syntax ist oder nicht.

So und ich müsste praktisch noch einen Schritt weiter gehen... nicht nur die Syntax prüfen sondern auch die Einrückung etc. Und das werde ich dann wohl nur per Regex sinnvoll lösen können - zumindest fällt mir sonst nix passendes ein.

[EyDu]

[quote="Fallen]So und ich müsste praktisch noch einen Schritt weiter gehen... nicht nur die Syntax prüfen sondern auch die Einrückung etc. Und das werde ich dann wohl nur per Regex sinnvoll lösen können - zumindest fällt mir sonst nix passendes ein.[/quote]

Ganz so einfach ist es dann doch nicht Ohne eine vernünftige Grundlage in der Entwicklung von Compilern wirst du dieses Projekt mit Sicherheit nicht schaffen. Als erstes Projekt definitiv zu schwer.

[Leonidas]

So und ich müsste praktisch noch einen Schritt weiter gehen... nicht nur die Syntax prüfen sondern auch die Einrückung etc.

Einrückung gehört auch zur Syntax, wenn es in der Grammatik berücksichtigt wird.

Und das werde ich dann wohl nur per Regex sinnvoll lösen können - zumindest fällt mir sonst nix passendes ein.

Ich würde gar nicht mal anfangen überhaupt mit Regulären Ausdrücken irgendwas zu machen, das geht schon mit verschachtelten Sachen nicht. Da würde man tatsächlich einen Parser nutzen/bauen, indem man eine Grammatik aufstellt und einen Parsergenerator nutzt. Du kannst auch versuchen einen Parser von Hand zu schreiben, da hält es jeder wie er will.

[Fallen][Angel]

Nennt mich nicht stur, jedoch verstehe ich nicht genau, was gegen reguläre Ausdrücke sprechen würde.

z.B. wäre eine Möglichkeit ein Ausdrück, welcher mir alles holt, was in folgendes Muster passt:

}

* {

Dann könnte ich die Werte auf Schreibweisen, usw. überprüfen. Der Inhalt wäre grob mit

{
*
}

gegriffen. Danach müssten natürlich noch diverse Regeln folgen, welche diverse Umstände prüfen müssten.

Ich möchte hier, vielleicht ging dies nicht klar hervor, das CSS nicht auf Gültigkeit oder Konformität zu CSS 2.1 prüfen. Ich möchte nur einen Styleguide durchprüfen. Der sagt z.B. das alle Ids mit einem Großbuchstaben anfangen, Klassen hingegen dürfen nur mit einem Kleinbuchstaben anfangen, usw.

Grundsätzlich könnte ein Parser dies natürlich auch, jedoch kann ich mir da gerade nicht soviel drunter vorstellen (was die Arbeitsweise angeht). Und bei Google "Python" und "Parser" eingeben ist etwas ineffizient, weswegen ich im Moment noch keine passenden Treffer gefunden hab, um mir selbst ein Bild zu machen.

[BlackJack]

Was bedeuten denn Deine Muster? Zum Beispiel hier:

Code: Alles auswählen

@media print {
    body {
        font-size: 12pt;
        background: url('spam{42}.png');
    }
}
ul li:after { content: "}" }
ul li:before { content: "{"; }
/* Kommentar */
p { color: red; }

Probier das doch einfach mal mit "einfachen" regulären Ausdrücken aus.

Edit: Noch einen Kommentar eingefügt.

[Fallen][Angel]

Was bedeuten denn Deine Muster? Zum Beispiel hier:

Code: Alles auswählen

@media print {
    body {
        font-size: 12pt;
        background: url('spam{42}.png');
    }
}
ul li:after { content: "}" }
ul li:before { content: "{"; }
/* Kommentar */
p { color: red; }

Probier das doch einfach mal mit "einfachen" regulären Ausdrücken aus.

Edit: Noch einen Kommentar eingefügt.

Davon abgesehen, dass dieses Beispiel nun einige Punkte enthält, welche bei uns definitiv nicht auftauchen, könnte es so aussehen:

Code: Alles auswählen

body {
    margin:0px;
    padding: 0px;
}

#foo {
    border: 1px solid red;
}

div.Blub_irgendwas {
    display: inline;
}

Der erste Schritt wäre dann ein regulärer Ausdruck, welcher nach einem Umbruch, beliebigen Zeichen und einer geschweiften Klammer sucht und das findet:

Code: Alles auswählen

body
#foobar
div.Blub_irgendwas

Das würde dann weiter validiert über weitere Regeln usw. Das gleiche für den Inhalt. Die beiden Beispiele obenen waren nur als grober Umriss gedacht, da ich nicht einen kompletten regulären Ausdruck bauen wollte.

[BlackJack]

Du kannst verschachtelte Blöcke, beliebige Zeichenketten und Kommentare ausschliessen!? Sicher? Auch für die Zukunft? Was ist mit auskommentierten Regeln?

Falls das Sachen sind, die von Style Guides bei euch untersagt werden, darf sich Dein Validator ja trotzdem nicht daran verschlucken, denn genau davor müsste er ja warnen.

[Fallen][Angel]

Nein, ausschließen kann ich sowas natürlich nicht. Ich habe jedoch nicht den Anspruch - zumindest noch nicht - das ich wirklich alles abdecken muss.

Ich will mich gegen einen richtigen Parser ja nun auch nicht wehren, jedoch hab ich davon so gar keine richtige Ahnung und bräuchte vllt. etwas mehr Hilfestellung.

[veers]

Das Grammar von CSS scheint mir auf den ersten Blick nicht sonderlich Komplex zu sein:
http://www.w3.org/TR/CSS21/grammar.html

Mit HTML und PHP wird das dann noch viel lustiger. Vorallem scheint PHP gar keine Dokumentierte Grammatik zu haben, und in ihrem cvs finde ich auch nichts. Kann aber auch daran liegen das es da so unübersichtlich ist.

Als Anfänger Projekt kann ich dir das jedoch auch nicht empfehlen

[Fallen][Angel]

Das Grammar von CSS scheint mir auf den ersten Blick nicht sonderlich Komplex zu sein:
http://www.w3.org/TR/CSS21/grammar.html

Mit HTML und PHP wird das dann noch viel lustiger. Vorallem scheint PHP gar keine Dokumentierte Grammatik zu haben, und in ihrem cvs finde ich auch nichts. Kann aber auch daran liegen das es da so unübersichtlich ist.

Als Anfänger Projekt kann ich dir das jedoch auch nicht empfehlen

Okay, ich hab mir nun einmal EBNF angesehen und muss gestehen, dass ich es noch nicht wirklich gekannt habe Jedenfalls keine leichte Kost!

Muss dann wohl vorerst wirklich Abstand von diesem Projekt nehmen, auch wenns schwer fällt. Die Frage wäre aber dann, was könnte ich machen, was mich wenigstens schon etwas in diese Richtung führt?

Spontan mag mir dafür nämlich nichts einfallen

[Leonidas]

Mit HTML und PHP wird das dann noch viel lustiger. Vorallem scheint PHP gar keine Dokumentierte Grammatik zu haben, und in ihrem cvs finde ich auch nichts. Kann aber auch daran liegen das es da so unübersichtlich ist.

PHP ist auch nicht so weit zu Perl, das wohl mit abstand die am schwierigsten zu parsende Syntax hat.

EBNF ist auch nicht so kompliziert, das kann man mit PLY recht passabel abbilden. Ist natürlich weniger gut, wenn man niemanden fragen kann (Prof) der das alltäglich macht denn mir ist keine Quelle untergekommen wo das brauchbar beschrieben wäre.

[sma]

Um CSS, HTML und PHP auf stilistische Probleme hin zu prüfen, kommt man um einen "echten" Parser IMHO nicht herum. Leider reicht auch nicht ein Parser, wie ihn typische Parser-Generatoren erzeugen, da dies AST-Parser (Abstrakter Syntax Baum/Tree) sind und in diesem Fall ein CST-Parser (C=Concrete) notwendig ist, der auch alle Kommentare und Leerzeichen (und bei HTML die Schreibweise der Tags) bewahrt, die in einem AST fehlen.

Ich würde dazu eine PEG (Parsing Expression Grammar, ein Mittelding aus regulären und kontextfreien Grammatiken) empfehlen, doch das ist definitiv kein Anfängerprojekt.

Hinzu kommt, dass man sich eine Grammatik für PHP erarbeiten muss. Diese könnte man aus dem Original-Quelltext von PHP ableiten (da könnte es ein von Hand geschriebener Parser sein oder etwas, das yacc/bison generiert haben) oder mal schauen, ob es bei ANTLR (einem LL(*)-Parsergenerator) etwas gibt oder schauen, wie es der PHP-Modus von Netbeans (die möglicherweise Schlieman benutzen, ein auf kontextfreien Grammatiken basierender semantischer Syntax-Highlighter) macht oder den Java-PHP-Port Quercus anschauen. Dazu sind aber C bzw. Java-Kentnisse unabdingbar.

Übrigens: Wenn man schon in Netbeans stöbert, könnte man eigentlich die Prüfungen auch gleich dort einbauen, sodass diese IDE einem die Warnungen ausgibt und vielleicht auch gleich mittels Quickfix eine Lösung anbietet. Für HTML und CSS gibt es solche Funktionen schon (und wenn nicht bei Netbeans, dann in jedem Fall bei Intellij IDEA, welches ich ja für den besten HTML/CSS-Editor halte).

Stefan

[veers]

Mit HTML und PHP wird das dann noch viel lustiger. Vorallem scheint PHP gar keine Dokumentierte Grammatik zu haben, und in ihrem cvs finde ich auch nichts. Kann aber auch daran liegen das es da so unübersichtlich ist.

PHP ist auch nicht so weit zu Perl, das wohl mit abstand die am schwierigsten zu parsende Syntax hat.

C++ soll da aber auch ganz toll sein...

[Fallen][Angel]

okay okay, bin nun endgültig überzeugt. Habs mir so in der Theorie irgendwie einfacher vorgestellt gehabt

Werd mich dann nach einem alternativen Projekt umsehen müssen.