zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Kritik der Qualität des HTML-Codes von spiegel.de

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.10.2018, 15:26
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.273
AndreasB wird schon bald berühmt werden
Standard Kritik der Qualität des HTML-Codes von spiegel.de

In einem anderen Thread, in welchem ich die Qualität des HTML-Codes von spiegel.de kritisiert hatte, widersprach mir @cloned.


Ich hatte u.a. behauptet, es handele sich um eine DIV-Suppe.
Damit ist gemeint:
Es werden vermeidbare DIVs eingesetzt. Und es werden DIVs eingesetzt, die durch "semantische" Elemente ersetzt werden können.
Dito für SPANs.


Weiterhin hatte ich die Länglichkeit des originalen Codes kritisiert. Ich behaupte, dass sehr viel Code vermeidbar ist, wenn modernes CSS, insbesondere moderne Selektoren eingesetzt werden.

Beispielhaft zeige ich hier den originalen Code (1864 Zeichen) und den von mir veränderten (460 Zeichen).


Selbstverständlich kann ich nicht sicher sein, welche weiteren Attribute zwingend notwendig sind, zum Beispiel für statistische Zwecke. Das Ganze ist bitte als Skizze zu verstehen, die vor allem die Richtung meiner Kritik zeigen soll: ein Plädoyer für prägnanten und aufgeräumten Code.

Über eine kritische Diskussion freue ich mich.



HTML-Code:
<div class="teaser" data-sponlytics-id="true" id="sponlytics-teaser-hp-12" data-sponlytics-area="slot">    <div class="clearfix">        <h2 class="article-title"> <a href="/wissenschaft/natur/fischerei-trotz-eu-verbots-landet-beifang-offenbar-weiter-im-meer-a-1234393.html" title="Warnung von Fischereibiologen: Beifang landet offenbar weiter im Meer - trotz EU-Verbots"><span class="headline-intro">Warnung von Fischereibiologen</span> <span class="headline">Beifang landet offenbar weiter im Meer - trotz EU-Verbots</span></a></h2>        <div class="article-image-box box-position 230_poster_16x9 asset-align-left"> <a href="/wissenschaft/natur/fischerei-trotz-eu-verbots-landet-beifang-offenbar-weiter-im-meer-a-1234393.html" title="Warnung von Fischereibiologen: Beifang landet offenbar weiter im Meer - trotz EU-Verbots"><img src="http://cdn4.spiegel.de/images/image-973377-230_poster_16x9-kmqc-973377.jpg" title="Warnung von Fischereibiologen: Beifang landet offenbar weiter im Meer - trotz EU-Verbots" alt="Warnung von Fischereibiologen: Beifang landet offenbar weiter im Meer - trotz EU-Verbots" width="230" height="129"></a></div>        <p class="article-intro"> Die EU hat der Fischerei verboten, Beifang einfach über Bord zu werfen, doch die Fischer halten sich offenbar nicht daran. Forscher fordern deshalb bessere Kontrollen - wie Überwachungskameras an Bord. <a href="/wissenschaft/natur/fischerei-trotz-eu-verbots-landet-beifang-offenbar-weiter-im-meer-a-1234393.html" title="Warnung von Fischereibiologen: Beifang landet offenbar weiter im Meer - trotz EU-Verbots" class="more-link">mehr...</a> <span class="spInteractionMarks video-forum-bracket">[&nbsp;<a href="http://www.spiegel.de/forum/wissenschaft/warnung-von-fischereibiologen-beifang-landet-offenbar-weiter-im-meer-trotz-eines-eu-verbots-thread-817643-1.html">Forum</a>&nbsp;]</span></p>    </div></div>
HTML-Code:
<section>    <a href="/2018-1234393">        <h2><span>Warnung von Fischereibiologen</span> Beifang landet offenbar weiter im Meer - trotz EU-Verbots</h2>        <img src="http://img.spiegel.de/2018-1234393.jpg" alt="">        <p>Die EU hat der Fischerei verboten, Beifang einfach über Bord zu werfen, doch die Fischer halten sich offenbar nicht daran. Forscher fordern deshalb bessere Kontrollen - wie Überwachungskameras an Bord. </p>    </a>    <a href="/forum/2018-1234393">Forum</a></section>
Anmerkung 1: Den langen URL habe ich auf eine ID gekürzt. Jedoch bin ich nicht sicher, ob sprechende URLs signifikante Vorteile haben. Ich bin auch nicht sicher, ob ein Rewrite des kurzen URLs auf dem Server zu einem sprechenden URL signifikante Serverlast erzeugen. Aber diese Sache soll hier nicht diskutiert werden. Sie ist nebensächlich.

Amerkung 2: Es ist mir leider auf die Schnelle nicht gelungen, herauszufinden, warum die Zeilenumbrüche im Code hier im Forum nicht dargestellt werden. Bitte kopiert also den Code und schaut ihn in einem Editor an.
__________________


Geändert von AndreasB (22.10.2018 um 16:36 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.10.2018, 09:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.906
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Deine Kritik bezüglich section/articles ist durchaus berechtigt aber Spiegel verwendet noch HTML4, da gibt es all diese Elemente nicht. Also ist es in diesem Hinblick nicht möglich section/article/header etc. zu verwenden.

Warum noch nicht auf HTML5 umgestellt wurde weiß ich nicht, das ist aber durchaus an der Zeit.
Aber das ist auch das schöne am Internet: Auch die "alten" Sachen funktionieren noch (weitestgehends) ohne Probleme, so lange sie bei HTML4 bleiben wollen können sie es auch tun. Und so lange sie es tun ist es auch nicht angebracht Elemente von außerhalb HTML4 zu verwenden.

Ich kenne dein Plädoyer für "aufgeräumten und prägnanten" Code, aber du hast in den 2 Jahren(?) wo du das predigst noch nie wirklich klar gemacht was du genau darunter verstehst.
Solche Seiten wie Spiegel.de werden nicht von einer Person alleine programmiert, da ist es wichtig, dass der Code von allen verstanden wird und von jedem beliebig erweitert werden kann, ohne dass die Seite danach kaputt ist.
Wenn man alleine an einer Seite herumbastelt, womöglich ohne Zeitdruck, ist das natürlich etwas anderes.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.10.2018, 10:39
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.273
AndreasB wird schon bald berühmt werden
Standard

Ich fasse Deine Aussage zusammen:


Du rechtfertigst, dass spiegel.de noch veraltetes HTML verwendet.
Wir reden also wieder einmal völlig aneinander vorbei.


Ich spreche über besseren Code als den aktuellen. Und somit natürlich von HTML5 und CSS3.


Du behauptest allen Ernstes, dass aufgrund der vielen beteiligten Programmierern der aktuelle Code zu rechtfertigen ist. Weil ja Richtlinien für prägnanten und aufgeräumten Code unmöglich umzusetzen sind in einem Projekt mit mehr als einem Programmierer.
Get real.


Du fragst nach konkreten Beispielen für aufgeräumten Code. Ich habe ihn Dir geliefert. Auch in den vergangenen 2 Jahren in anderen Threads.

Und in meinem Beispiel hier stecken unzählige Details, was ich warum gegenüber dem originalen Code geändert habe.
Bist Du an einer inhaltlichen Diskussion interessiert. Nö, wie man merkt.


Beenden wir also auch das hier. Es hat einfach Sinn, dass wir beide diskutieren. Wir kommen nie auf einen grünen Zweig.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 23.10.2018, 10:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.906
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Stimmt, ich gebe dir einmal Recht und du bist beleidigt?

Irgendwie habe ich das Gefühl dass du mir nachträgst, dass ich im letzten Thread gesagt habe, dass es keine div Suppe ist. Ich habe aber auch gesagt, er kann verbessert werden. Da war ich auch schon mit dir einer Meinung.
Lediglich die komplett untergriffige Meldung (Beleidigung), dass der Code grottenschlecht ist, habe ich kritisiert.

Behaupten tue ich das übrigens nicht, es ist alles eine Frage des Geldes und der Zeit.

Also fasse ich zusammen: Ich stimme dir zu, dass der Code verbessert werden kann, er kann auch gerne mal aktualisiert werden. Wann/Warum das passiert ist aber nicht bei mir zu entschieden.

Dein "aufgeräumter" Code wurde aber auch von anderen Leuten als nicht zielführend angesehen, einfach weil er schlecht wartbar war.

Bin dir aber auch nicht böse für deine Ansichten, ich habe früher (vor 15 Jahren), wo ich noch nicht in Teams gearbeitet habe sondern für mich selber Websites geschrieben habe, so gedacht wie du.
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
  #5 (permalink)  
Alt 23.10.2018, 11:22
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.273
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Dein "aufgeräumter" Code wurde aber auch von anderen Leuten als nicht zielführend angesehen, einfach weil er schlecht wartbar war.

Werde konkret und sage etwas zur Sache.
Was genau ist an meinem Code-Entwurf für spiegel.de schlecht wartbar?
Welche Gestaltaufgabe läßt sich so nicht lösen bzw. auch dann nicht, wenn ein klares Class- oder ID-Attribut ergänzt würde.



Ich bin gespannt.
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 23.10.2018, 20:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 103
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Für mich ist sowas div Suppe.

https://codepen.io/basti1012/pen/Pyyzem?editors=1000
Weil es viele unnötige divs enthält die keiner brauch

Zum Thema Spiegel knn ich noch nix sagen.
Wollte ja noch wegen den Userscript für @AndreasB kucken. Da die letzten Tage alles Mist wahren werde ich es gleich machen und gleichzeitig mal kucken ob ich da auch Suppe finden.

PS: Macht immer Spaß euch beiden mit zu lesen. @Andreas wie lange programierst du schon ? Wenn man fragen darf?
Mit Zitat antworten
  #7 (permalink)  
Alt 24.10.2018, 12:36
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.273
AndreasB wird schon bald berühmt werden
Standard

@basti


Danke, dass Du zum Userscript nochmal gucken willst.
Ich konnte es bisher unter Greasemonkey nicht zum Laufen bekommen.



Wie bewertest Du den originalen Spiegel-Code und meinen "Gegenentwurf"?


Hälst Du meinen Entwurf ebensow wie @cloned für schlecht wartbar?


Wie lange ich programmiere?
Habe ich noch nie


HTML und CSS schreibe ich als Amateur seit ca. 13 Jahren.


Zu dem hier diskutierten Thema würde ich zu gerne weitere Stimmen lesen, am liebsten von Personen, die Erfahrungen mit der Programmierung/Konguration mächtiger CMS haben.

Aus ihrer Sicht würde ich gerne erfahren, warum mein Entwurf für einen CMS-Output "schlecht wartbar" ist. Anhand von konkreten Beispielen.

Aber leider ist das Forum fast tot. Es scheinen sich nur noch wir drei zu beteiligen. Pech.
Ob es andere deutschsprachige Foren zu HTML/CSS gibt, wo mehr los ist, weiß ich nicht.
__________________

Mit Zitat antworten
  #8 (permalink)  
Alt 24.10.2018, 17:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 103
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

allso über das Thema spiegel.de kotze ichmich mal später aus. Soeine überladene Seite habe ich schon lange nicht mehr gesehen. wollte mit DOMContentLoaded warten bis es soweit ist und dann die dinge mit der Schleife ausblenden. Nur das load feuert gar nicht. Spiegel.de läd durchgehend weiter. bei 400 Requesten höhrt er mal auf ( 7mb ) über1 min und er feuert immer noch nicht. .. Ohne ContentLoadet scheißt das Script nur Fehler raus weil der zu blockene Inhalt wohl noch nicht da ist.

Also sowas habe ich auch noch nicht gehabt.

EDIT: Kein plan was da los wahr. wenn ich dich richtig verstanden habe block er so das weg.

Code:
// ==UserScript==
// @name         Spiegel+ ausblenden
// @author       Andreas
// @include      *spiegel.de*
// @noframes
// @grant  GM_getValue
// @grant  GM_setValue
// @grant  GM_addStyle
// @grant  GM_xmlhttpRequest
// @version       2.0
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// ==/UserScript==
 console.log('Script is running')

$(document).ready(function(){
  console.log('ready have fired');

//ele=document.getElementsByClassName('spplus')[1];
 element=document.querySelectorAll('.spplus');
element.forEach((i) => {
i=i.parentNode;
i=i.parentNode;
i=i.parentNode;
inp=i.outerHTML;
inp=inp.indexOf('class="teaser');
if(inp!=-1){
 console.log('kill');
  i.style.display='none';
}else{
  console.log('no kill');
}
});
});
melde mich später nochmal wegen den anderen Script.

Spiegel.de wird nie eines meiner Lieblings Seiten.Zumindest nicht von deren Code und des ewig langen gewarte bis alles geladen ist. Und den User sagen das er adblock aus machen muss um überhaupt richtig surfen zu können ist auch Mist. Habe den blocker nicht ohne Grund an
Mit Zitat antworten
  #9 (permalink)  
Alt 25.10.2018, 15:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.906
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen

Zu dem hier diskutierten Thema würde ich zu gerne weitere Stimmen lesen, am liebsten von Personen, die Erfahrungen mit der Programmierung/Konguration mächtiger CMS haben.
Ich habe Erfahrung mit Programmierung in mächtigen CMS. Ist zwar mehr für b2b,b2c systeme und weniger für Nachrichtenseiten, ist aber trotzdem hier relevant. Behaupte ich einfach mal.

Also um das mal klarzustellen: Ein Update auf HTML5 mit sections/article/nav/ etc. empfehle ich jeder Seite, aber wenn sie es nicht haben und sie trotzdem zufriedenstellend gefunden werden, dann sollen sie es meinetwegen nicht aktualisieren. Irgendwann werden sie es wohl tun und wenn die Seitenbetreiber meinen dass es dann einfacher ist, bitteschön.

Abgesehen davon:

Code in einem CMS schaut dann eventuell so aus:
Code:
<div class="wrapper">
   <cms:component code="${teaser}">
</div>
Wird der Teaser dann auch mit einem wrapper erstellt dann hat man plötzlich zwei wrapper. Könnte vermieden werden, aber was ist, wenn der Teaser plötzlich an einer anderen Stelle verwendet wird?

Code:
<div class="some-other-class">
  <cms:component code="${teaser}">
  <cms:component code="${promotion}">
</div>
Kannst du garantieren, dass der Teaser auch so funktioniert? Ohne zusätzliches CSS? Weil oft wollen "die Redakteure" einfach nur schnell wo etwas hinzufügen, das muss also "on the fly" gehen. Ohne CSS Selektoren anpassen zu müssen.

Da nimmt man logischerweise mehrere divs in Kauf, schließlich tun die wirklich niemandem etwas. Sie sind ja genau dazu da.


Zweitens:

Sehe ich mir den Teaser-Code von Spiegel an weiß ich sofort das ist ein Teaser (dank der teaser-Klasse), welcher eine headline, einen title, intro, etc. hat. Das weiß ich auch, ohne den Zusammenhang der restlichen Seite zu sehen. So etwas nennt sich Komponentenbasierte Entwicklung ist Standardvorgehen im Frontendbereich.
Bzw. mittlerweile sind https://www.styled-components.com noch angesagter, bzw Standard.
Auch sollte eine Konvention für Klassennamen wie OOCSS, ACSS, BEM, SMACSS verwendet werden. OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? – clubmate.fi
Ganz wird das bei Spiegel nicht gemacht, aber im Ansatz ist es da. Das vermisse ich bei deinem Beispiel komplett, kann aber hinzugefügt werden.

Bezüglich besser Wartbar: Bei Spiegel gibt es bestimmt irgendwo ein "teaser.file" indem der Teaser (und wirklich NUR dieser) vorhanden ist, das kann man dann bestimmt einfach bearbeitet werden, da sofort klar ist, was welcher Teil des Codes macht. Bei deinem Code ist das nur bedingt klar, da müsste man erst nachsehen, wieso etwas wo ist (nichts unmögliches und wirklich schwieriges, lediglich nicht so zugänglich wie ein Code der sich selbst dank Klassennamen dokumentiert)
__________________
Zitat: "offenbar" bedeutet, dass ich nicht sicher bin, wie Du etwas meinst - Ein User hier auf diesem Forum 😂
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.10.2018, 11:17
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.273
AndreasB wird schon bald berühmt werden
Standard

Guten Morgen.


Danke für Deine ausführliche Antwort.


Bist Du so nett und postest einmal einen aus Deiner Sicht als CMS-Entwickler hochwertigen HTML5-Output für das hier diskutierte Beispiel?


Dann können wir Deinen und meinen HTML-Quellcode sinnvoll vergleichen und diskutieren.


Schon vorab: Wartbarkeit und Wiederverwendbarkeit sind ohne Frage hochrangige Ziele, die ich voll teile.
Spannend ist bestimmt das Konfliktfeld "Wartung des CMS-Codes" versus "Wartung des CSS-Codes".
__________________

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
CSE HTML Validator Standard Anschaffung wert? DieterWelzel Offtopic 10 17.08.2007 18:02
Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite Dwarf CSS 10 12.06.2007 18:19
Bitte um überprüfen des Codes und Tipps Edelstahl Site- und Layoutcheck 7 05.03.2006 18:08
Zeilenüberlappung bei margin-top mit negativem Wert c.weber.os CSS 15 15.10.2005 16:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:35 Uhr.