Spaghetti-Quelltext ('Spaghetti-Code')

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

6/20/2017 5:04:22 AM 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.
10/7/2007 7:03:45 PM 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.
10/9/2007 4:11:23 AM 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.
10/10/2007 9:11:35 PM 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

News und Tipps

PDF Funktion für Ihre Website
html2pdf generiert schnell und zuverlässig ein PDF aus der URL oder dem HTML, welche Sie diesem Dienst übermitteln. CSS wird optimal berücksichtigt - mit oder ohne Print Styles. http://www.html2pdf.solutions

Verbessern Sie die Verfügbarkeit Ihrer Website

  • Erhalten Sie Ausfallwarnungen per E-Mail, SMS und Push-Benachrichtigung.
  • Verfolgen Sie die Verfügbarkeit und Performance Ihrer Website.
  • Publlizieren Sie optional die Verfügbarkeits-Reports um die Verkaufszahlen zu steigern.

 

Wir überwachen Ihre Websites und Server rund um die Uhr über ein Netzwerk, welches aus über  Überwachungsstationen besteht. Mehr Infos/kostenlos testen unter http://monitoring.seven49.net/de/

Der Qualidator SiteAnalyzer hat die "Windows 8 App Certification" bestanden (Feb 2014)
Qualidator SiteAnalyzer auf Heft-DVD von Unternehmer WISSEN
In der aktuellen Ausgabe von "Unternehmer Wissen" finden Sie auf der beiliegenden DVD die aktuelle Version des Qualidator SiteAnalyzer. Das Magazin erscheint deutschlandweit im Bahnhofs- und Flughafenbuchhandel seit dem 18.02.2014. Mehr Informationen zum Magazin finden Sie unter: magazin.unternehmer.de
HTML5 Validator für SiteAnalyzer
Tipp: Beim Umstieg auf HTML 5 hilft Ihnen der SiteAnalyzer gerne weiter. Laden Sie dazu die aktuelle Version herunter um die ganze Website auf Fehler und Probleme zu prüfen.
Mehr Infos und Download
Brandneues SiteAnalyzer Video online
Lernen Sie den SiteAnalyzer (noch) besser kennen:
zum neuen Qualidator® SiteAnalyzer Video
Neues Forum auf XING
Neu gibt es zusätzlich zur Facebook Page auch ein Qualidator Forum auf XING. Wir freuen uns auf Ihr Feedback und spannende Kontakte.
https://www.xing.com/net/qualidator-projekt-forum
Entwickler gesucht
seven49.net/ Qualidator sucht laufend Software Engineer ASP.NET / Sharepoint wie auch Partnerfirmen, die solche Dienste anbieten.
Zum Stelleninserat
Facebook Page
Bist Du bereits ein Qualidator® -Fan?
Besuch uns auf Facebook!
HTTP Komprimierung testen
Die HTTP Komprimierung kann neu direkt im SiteAnalyzer getestet werden. Dies auch mit verschiedenen Browsern resp. User Agents. Mehr Infos und einen Screenshot finden Sie unter Know-how - HTTP Komprimierung Gzip/Deflate testen
Kantonsranking
Schweizer-Kantonsranking der Fachzeitschrift "Computerworld" mit Hilfe von Qualidator.
Zum Artikel
Zum Kantonsranking
Qualidator für SmartPhones
Die Website wurde in den letzten Monaten stetig weiter fürs iPhone und andere SmartPhones optimiert. Probieren Sie es aus. Feedback willkommen.
Generators
Weltweite Qualidator® Generator-Studie: Welche Generators (Content Management Systeme, Editoren und Wikis) führen zu erfolgreichen Webauftritten?
Zur Studie
Websites der öffentlichen Hand
2. Qualidator-Studie: Websites der öffentlichen Hand überzeugen mit Top-Qualität
Graubünden sticht im DACH-Vergleich Wien und Nordrhein-Westfalen aus
Zur Pressemeldung
Zweite Qualidator®-Studie: Die Webauftritte der eidgenössischen Departemente, der Kantone und der grössten Schweizerstädte im Vergleich zum deutschsprachigen Ausland
Download der Studie

Follow us on Twitter
Qualidator-Ranking der Firmenwebsites der registrierten "Swiss Made Software"- Mitglieder. Swiss Made Software ist ein Label für schweizerische Software-Unternehmen, initiiert von Luc Haldimann.
Exklusiv und kostenlos - Kennen Sie den neuen Qualidator HTML Optimizer bereits?
Ein weiteres hilfreiches Tool für Sie!
Schon gesehen? Neu gibt es auf Qualidator.com Branchen- und Gruppenratings. Diese werden nun laufend ausgebaut.

Empfehlung: Vertiefte Website-Qualitätsanalyse

Empfehlung: Uptime Monitoring

Partner

  • SwissMadeSoftware
  • ZTPrentner IT
Copyright © seven49.net GmbH
Quelle: http://www.qualidator.com/de/Know-how/SpaghettiCode_CodeBrei.htm
CMS Login schliessen

CMS Login

Melden Sie sich an, um die Inhalte der Website zu bearbeiten.
loading and processing data Verarbeite Anforderung ...