"Spaghetti-Code" / "Code-Brei"

"Spaghetti-Code" / "Codebrei"

Eine Abstraktion des Designs von der Struktur der Website bringt entscheidende Vorteile. Je höher diese ist, desto unabhängiger (getrennter) sind diese voneinander. Keine solche Trennung wird als so genannter Spaghetti-Code oder Tag-Suppe (Tag von Html-Tag) bezeichnet.

Es ist heute problemlos möglich Farben, Typografie, Bilder des Designs und weitgehend sogar das Layout einer Website in separaten CSS-Dateien (CSS = Cascading Style Sheet) zu speichern.

Dies reduziert den Aufwand für die Pflege der Website massiv. Mittels CSS lässt sich etwa das Corporate Design zentral steuern, ohne dass dazu Entwickler benötigt werden. Dies ist sogar ohne Einschränkungen über grössere oder gar mehrere Websites hinweg möglich.

Die zentrale Speicherung des Designs in CSS Dateien verringert zudem die Grösse der HTML-Seiten massiv, was schnellere Downloadzeiten sowie weniger benötigte Bandbreite und Transfervolumen bewirkt. Werden Seiten schneller geladen, freut dies den Benutzer und verringerter Ressourcenverbrauch reduziert die Kosten.

Weiterhin werden dadurch die Zugänglichkeit der Website und die Suchmaschinenfreundlichkeit erhöht.

Während die Struktur und der Inhalt bei professionellen Websites mit Management Systemen normalerweise aus Datenbanken ausgelesen werden, sofern diese nicht bereits im Server Cache vorhanden sind, können die wenigen benötigten CSS-Dateien ohne Nachteile im Dateisystem auf dem Web-Server gespeichert werden, wodurch die Anfragen sehr rasch beantwortet werden können. Hat der Browser die CSS-Dateien geladen, müssen diese bei weiteren Seitenanfragen nicht erneut herunterladen werden. Bei Spaghetti-Code entfällt dieser entscheidende Vorteil, da Struktur, Inhalt und Design vermischt sind.
Professionelle, aktuelle Content Management Systeme erlauben das Editieren dieser CSS-Dateien.

Die höchstmögliche Trennung des Designs bringt zudem für Designer und Entwickler mehr Unabhängigkeit.
So kann sich der Entwickler auf die Entwicklung einer benutzerfreundlichen, gut zugänglichen Website konzentrieren und braucht sich nicht mit dem Design herumzuschlagen.
Parallel dazu kann der Designer die Grafiken und die Definitionen für Farben und Typografie vorbereiten, falls diese noch nicht bestehen.

CSS-Dateien lassen sich wie (X)HTML-Dateien validieren, was bei der Fehleranalyse von grossem Nutzen ist. Wir empfehlen in jedem Fall CSS-Dateien zu überprüfen, bevor diese publiziert werden. http://jigsaw.w3.org/css-validator/.
Professionelle Content Management Systeme haben diese Überprüfungsfunktion z.T. integriert, was in jedem Fall sinnvoll ist.

Tools:
seven49.net - Qualidierungs- und Validierungstool (kostenlos)

Weiterführende Informationen:
http://www.style-sheets.de/guide/grundlagen/warum_css
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/

Kommentare von Benutzern

28.06.2008 18:08:20 Administrator
Kommentare erwünscht
Wir freuen uns über alle Arten von Fragen, Kommentaren und Kritik wie beispielsweise:
  • Lob & Tadel
  • Ergänzungen
  • Meldung von (Schreib-)Fehlern
  • Meldung von toten Links
Wenn Sie nicht möchten, dass Ihr Kommentar unter Umständen publiziert wird, senden Sie uns doch eine E-Mail-Nachricht.
08.10.2007 01:03:45 Erwin
Warum so ein schlechtes Abschneiden?
Tach, es geht um pisica.de, über 85% kommt man bei euch ohne Vorkasse wohl nicht! Was soll den an dieser webseite so schlecht sein?
Muß ich erst eure Programme kaufen um dann festzustellen das eigentlich nix ernstes gemeint ist? :-)

Antwort von Qualidator:
Ihre Bewertung, über 77%, ist bereits sehr hoch! Die Spaghetti-Warnungen können Sie mittels unserem kostenlosen Markup-Qualidator beheben. Für den Style-Wechsler unten links verwenden Sie beispielsweise folgenden Quelltext in Zeile 67: <input class="stb" style="background:#a7ceff;color:#a7cfff" type="submit" title="Seitenstyle &auml;ndern in: Blau" name="st" value="blue" /> Das Style Attribut sollten Sie entfernen, damit Sie beim Spaghetti-Test besser abschneiden und mehr Punkte erhalten. Verschieben Sie die Definitionen dazu in ein separates Stylesheet. Das kostenlose Tool finden Sie unter http://www.qualidator.com/wqm/validator/

Ihre Website ist gemäss w3c Validator valide, unser XHTML-Validator störte sich an dem nicht vorhandenen legend Element das eine Überschrift für eine Gruppe von Formularelementen definiert. Diese Warnung haben wir nun entfernt. Sie haben also bereits mehr Punkte.

Als registrierter User (kostenlos) können Sie zudem weitere Warnungen, Tipps und Hinweise erhalten, welche Ihnen helfen, die Website weiter zu verbessern. Wenn Sie eine Frage haben, können Sie beim jeweiligen Test wiederum eine Nachricht hinterlassen.
09.10.2007 10:11:23 Wolfgang Decker
Seltsame "Fehler"
Ich dachte schon, ich hätte endlich ein Tool gefunden, mit dem gewisse Eigenschaften leicht zu testen wären, doch ist das Auffinden von "Fehlern" leider derart mangelhaft bzw. sogar falsch, dass ich wohl weitersuchen muss. Der Seite www.kardiologie-hirschl.at "Spagetthi-Code" "anzulasten" bzw. zu vermerken, dass die Seite "Layout-Tabellen" verwende, ist mir nicht erklärbar und wird leider auch nicht näher erläutert. Gerne erfahre ich hier mehr von einem "Spezialisten", der mir die Layouttabelle auf der Seite zeigt. Dass es einen Unterschied zwischen dem Aufbau einer Seite mit Frames und einem eingebetteten "iframe" gibt, scheint sich auch noch nicht wirklich herumgesprochen zu haben. Warum eine komplett aus Listen aufgebaute Navigation den Test auch nur "zum Teil" erfüllt, erschließt sich mir auch nicht wirklich. Dass es auf der Seite Schriftgrößen gäbe, die fixiert sind, kann ich ebenfalls nicht nachvollziehen, weil alles im CSS ausgelagert ist. Auch der Hinweis "Der Alternativtext wird angezeigt, wenn ein Bild nicht ladbar ist oder wenn der Mauszeiger über das Bild bewegt wird." zeugt nicht gerade von Professionalität, das ist nämlich in keiner Spezifikation gefordert und wird derzeit nur beim Internet Explorer so (eigentlich falsch) praktiziert. Der "alt"-Text sollte eigentlich eben *nicht* angezeigt werden, wenn man mit der Maus über das Bild fährt. Alles in allem leider noch zu fehlerhaft, um wirklich aussagekräftig zu sein.

Antwort von Qualidator:
Ihre Website enthält in der Tat Spaghetti-Quelltext und zwar bereits auf der Startseite, die ebenfalls mehrere XHTML-Fehler enthält. Diese können Sie mit unserem Validator oder dem vom w3c überprüfen. Iframe und Frame werden sehr wohl unterschieden. Iframes geben nur einen kleinen Hinweis, während Frames eine Warnung geben. Layout-Tabellen auf den Folgeseiten werden ebenso mitgezählt, selbst wenn Ihre Startseite keine hat. Ebenso verhält es sich bei anderen Tests. Schauen Sie sich mal den von Ihnen offenbar ohne Kontrolle eingefügten Quelltext rund um die Google Map an (Qualidator-Hinweise sind direkt eingefügt):

61<div class="bilder">
62<img src="images/kardiologie-hirschl-praxis-2.jpg" width="250" height="188" alt="">
63<br><br>
64Iframes/Framesiframe width="250" height="300" frameSpaghetti-Code / Codebreiborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&amp;hl=de&amp;geocode=& amp;q=eggenburg+rathausstra%C3%9Fe+23&amp;sll=48.641686,15.817502& amp;sspn=0.006083,0.014591&amp;ie=UTF8&amp;om=1&amp;s=AAR TsJpUyhFISGHOIsY4vM0RGje1xBFxBA&amp;ll=48.643969,15.82057&amp ;spn=0.017013,0.021458&amp;z=14&amp;output=embed"></ifra me><br /><small>Neues Browserfenster<a href="http://maps.google.de/maps?f=q&amp;hl=de&amp;geocode=&am p;amp;q=eggenburg+rathausstra%C3%9Fe+23&amp;sll=48.641686,15.817502&am p;amp;sspn=0.006083,0.014591&amp;ie=UTF8&amp;om=1&amp;ll=48. 643969,15.82057&amp;spn=0.017013,0.021458&amp;z=14&amp;source =embed"Spaghetti-Code / Codebrei style="color:#0000FF;text- align:left" target="_blank">Gr��ere Kartenansicht</a></small>
65</div>

Das Border = 0 gehört in ein Stylesheet, das unter Style-Attribut definierte ebenso. Die von Ihnen verwendeten Attribute des Iframes sind so nicht gültig, siehe w3c Validator. Unter Xhtml-Strict können Sie zudem das target nicht verwenden.

Sie können folgende Tools verwenden, um die Fehler zu finden und zu korrigieren: http://validator.w3.org http://www.qualidator.com/wqm/validator/

Dinge, welche man via iframe einbindet werden bei den Website Check ebenso in die Wertung einbezogen inkl. Inhalt. In diesen Inhalten wurden total 16 Tabellen gefunden, was zur Warnung bezüglich der Layouttabellen führte. Wir werden hier in Zukunft noch eine Abstufung einbauen, wenn jemand wie Sie ansonsten viele DIVs fürs Layout verwendet. Der Validator für Einzelseiten eignet sich deshalb wohl derzeit besser für Sie:
http://www.qualidator.com/wqm/validator/

Bezüglich Alternativtext haben wir nie etwas anderes behauptet. Wir weisen unter anderem nur auf die Wichtigkeit für Menschen, die über eine Sehbehinderung verfügen und für Suchmaschinen hin. Dass der derzeit wichtigste Browser, Internet Explorer, diesen fälschlicherweise als Tooltip darstellt ist eine Tatsache.
11.10.2007 03:11:35 Erwin
Was jetzt: Perfekt oder Spagetticode ?
Ich bins mal wieder, nu versteh ich etwas nicht auf einer seite erhalte ich bei euch: Herzliche Gratulation, die getestete URL erhält bezüglich Quelltext-Qualität das Prädikat perfekt! ...dazu ein code der ohne zeilenumbruch geliefert wird und somit unlesbar ist. Bei einem anderen test, auch bei euch, steht was von spagetti-code...ja was nu, Perfekt uder Müll ?

Antwort von Qualidator:
Der XHTML Single Page Qualidator überprüft nur eine URL, der Website Qualidator mehrere auf einmal. Schauen Sie beispielsweise auf Ihrer Website den Bereich der Galerie und der Downloads einmal genauer an, dort fand Qualidator noch zahlreiche Hinweise, Tipps und Warnungen. Unter http://www.qualidator.com/Web/de/AngebotBestellen/Produktevergleich_TestTools.htm finden Sie zudem einen Vergleich der Tools. Die wenigen überlangen Zeilen im Quelltext ohne Zeilenumbruch stammen von Ihrer Website. Derartiges werden wir allenfalls in einer künftigen Version zu kompensieren versuchen. Der XHTML Single Page Qualidator ist derzeit noch brandneu.

Kommentar schreiben/Frage stellen

CAPTCHA Code Image Speak the code

Login Status

Sie sind nicht angemeldet.

News-Ticker

Juni 2008
Brandneu: Qualidator Website Analyzer
Neu steht der Qualidator auch als Windowsapplikation für die Intensivprüfung Ihrer Website zur Verfügung! 
Infos & Download

März 2008
Informieren Sie sich über das vielfältige Qualidator-Angebot. Wir freuen uns auf Sie!

Download Qualidator Broschüre (347 KB, PDF File, neues Fenster) Text-Version
August/September 2007
100'000 Webauftritte weltweit untersucht: Die einzigartige, weltweite Studie zur Erforschung des Qualitätsstandards von Webauftritten brachte es ans Licht: Die Schweizer Webseiten schlagen sich gut im internationalen Vergleich.

Pressemeldung Schweiz
Pressemeldung Deutschland
Pressemeldung Österreich

Auszug aus den Pressereaktionen.

2. Juli 2007: Weltweite Studie zur Qualität von Webauftritten

Download der Studie (141 KB, PDF File, neues Fenster) Text-Version

Mai 2007: Vorstellung des Qualidators in der Software Ergonomics Fachgruppe an der ETH Zürich.

Download der Präsentation (2,59 MB, PPS File, neues Fenster)

Empfehlung: Vertiefte Website-Qualitätsanalyse

Empfehlung: Uptime Monitoring

Survey

Copyright © 2008 seven49.net GmbH
Quelle: http://www.qualidator.com/Web/de/Know-how/SpaghettiCode_CodeBrei.htm