Kein valider html-Code?

[grashalm]

Ich habe meine Seite https://die-schreibmaus.de mal mit dem HTML-Validator auf https://validator.w3.org/nu/ überprüft.

Insgesamt findet er 810 Fehler, aber nur 3 verschiedene Fehlertypen:



1.

Error: Attribute width not allowed on element source at this point.

From line 555, column 1; to line 555, column 172

<picture>?<source srcset="assets/images/9/sm_schriftzug-4a82f319.webp 750w, assets/images/b/sm_schriftzug-cf377eb5.webp 375w" sizes="750px" type="image/webp" width="750" height="80">?<img

Attributes for element source:
Global attributes
type — Type of embedded resource
src (in video or audio) — Address of the resource
srcset (in picture) — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
sizes (in picture) — Image sizes for different page layouts
media (in picture) — Applicable media
width (in picture) — Horizontal dimension
height (in picture) — Vertical dimension

2.

Error: The itemprop attribute was specified, but the element is not a property of any item.

From line 36, column 26; to line 36, column 70

ve first"><strong class="active first" itemprop="name">starts

und 3.

Error: The itemprop attribute was specified, but the element is not a property of any item.

From line 37, column 21; to line 37, column 94

"sibling"><a href="aktuelles.html" title="aktuelles" class="sibling" itemprop="url"><span

Bei 2. und 3. moniert er jeweils die Verwendung von itemprop="name" und itemprop="url".
Kann ich den Code irgendwie optimieren oder so ändern, dass ich möglichst keine Fehlermeldungen mehr bekomme?
Kann ich das händisch machen, oder gibt es dafür Tools? Ich kenne mich mich HTML leider überhaupt nciht aus.

[Spooky]

zu 1: https://community.contao.org/de/show...ht-w3c-konform

[BennyBorn]

Zu 1. Das ist bekannt. Problem ist das der W3C-Validator noch nicht den aktuellsten Stand des HTML-Standards inne hat. Kann man getrost ignorieren.

Zu 2+3. Könnte es sein das Du vielleicht einen Mix aus neuen (Core)Templates und alten eigenen Templates drin hast?

[grashalm]

zu 1. Das heißt, ich muss mir da keine Sorgen machen? Sehr schön. Kennt Ihr ein Validator-Tool / -Seite, die aktuell ist und diesen Code als valide akzeptiert?

zu 2. + 3. Ja, ich benutze etliche angepasste Templates im templates-Ordner. Dieser itemprop-Fehler tritt ja überall bei angelegten Seiten auf. Muss ich da ein
bestimmtes Template aus dem Core neu in den Templates-Ordner hochladen und dann mit meinen gewünschten Änderungen neu anpassen? Hast Du da ein
bestimmtes Template in Verdacht?

[BennyBorn]

zu 1. Das heißt, ich muss mir da keine Sorgen machen? Sehr schön. Kennt Ihr ein Validator-Tool / -Seite, die aktuell ist und diesen Code als valide akzeptiert?

Nein, keine Sorgen notwendig. Ich nutze auch nur den vom W3C aber wenn man es weis kann man es ja ignorieren

zu 2. + 3. Ja, ich benutze etliche angepasste Templates im templates-Ordner. Dieser itemprop-Fehler tritt ja überall bei angelegten Seiten auf. Muss ich da ein
bestimmtes Template aus dem Core neu in den Templates-Ordner hochladen und dann mit meinen gewünschten Änderungen neu anpassen? Hast Du da ein
bestimmtes Template in Verdacht?

Das erfährst Du am einfachsten wenn Du den Debug-Modus aktivierst und in den Quellcode des Frontend schaust. Per HTML-Kommentar siehst Du an jedem Element welches Template genutzt wird. So kannst Du Dir raussuchen welche Templates aktualisiert werden müssten.

[grashalm]

Das erfährst Du am einfachsten wenn Du den Debug-Modus aktivierst und in den Quellcode des Frontend schaust.

Der Debug-Modus läuft bei mir unter 4.13 nicht (vermutlich ein Bug) und so habe ich mich daran gemacht, sämtliche angepassten Templates zu aktualisieren und dann wieder mit meinen Ergänzungen anzupassen. Hat etwas gedauert, war aber total erfolgreich, denn jetzt sind sämtliche "itemprop"-Fehler weg. Der W3C-HTML-Validator zeigt nur noch die 24 vermeintlichen Fehler mit den Width- und Height-Attributen in Sourceset an, die ich ja vernachlässigen kann.
Von daher war Deine Vermutung völlig richtig, BennyBorn. Nochmals vielen Dank!

[Spooky]

Der Debug-Modus läuft bei mir unter 4.13 nicht (vermutlich ein Bug)

Was genau ist das Problem?

[grashalm]

Habe leider keinen blassen Schimmer. Kenne mich mit dem Debug-Modus auch überhaupt nicht aus und kann nicht beurteilen, was da wo klemmt.
Wenn ich den Debug-Modus im Contao-Manager aktiviere, erscheint im Frontend folgendes Bild:

debug-modus.jpg

[Spooky]

Das ist ein Fehler in ma3xl3/contao-easy-favicon. Das musst dort behoben werden.

» https://github.com/Ma3xl3/Contao-EasyFavicon/pull/13

Sieht aber nicht so aus, als würde die Extension noch aktiv maintained werden.

[grashalm]

Das ist ein Fehler in ma3xl3/contao-easy-favicon. Das musst dort behoben werden.

» https://github.com/Ma3xl3/Contao-EasyFavicon/pull/13

Sieht aber nicht so aus, als würde die Extension noch aktiv maintained werden.

Vielleicht sollte ich die Erweiterung ad acta legen. Kennst Du eine taugliche Alternative dazu?

[Spooky]

Ich verwende https://realfavicongenerator.net/ und binde die entsprechenden Dinge dann per vererbten fe_page Template ein.

[mlweb]

Ich weiss jetzt nicht was die Erweiterung alles gemacht hat.
Die Favicons kannst Du ja einfach händisch einbinden. Wenn man die Favicons und den zugehörigen Code nicht selbst erstellen mag, dann gibt es diverse Dienste im Internet. z.B. https://realfavicongenerator.net/

[grashalm]

Die Favicons kannst Du ja einfach händisch einbinden.

Wo muss der Code denn eingebunden werden?

Habe im Contao-Manager noch eine Erweiterung von Trilobit entdeckt, die könnte was sein, das "Contao 4 Tiles Bundle". Gibt's da Erfahrungen von Euch?

[planepix]

Die verwende ich seit längerem.
Unter 4.4 und 4.9.

[kubjo]

Ich verwende https://realfavicongenerator.net/ und binde die entsprechenden Dinge dann per vererbten fe_page Template ein.

Den Generator kenne ich, und verwende ich auch. Nur binde ich dann die Zusätzliche <head>-Tags im Seitenlayout ein. Was bedeutet: "per vererbten fe_page Template einbinden"?

[Spooky]

Was bedeutet: "per vererbten fe_page Template einbinden"?

<!-- templates/fe_page.html5 -->
<?php $this->extend('fe_page'); ?>

<?php $this->block('head'); ?>
  <?php $this->parent(); ?>
  <!-- put favicon related things here -->
<?php $this->endblock(); ?>

[neelix]

Statt ins Template kann man das doch auch einfach in den zusätzlichen Header-Block schreiben.
Das kommt auch auf allen Seiten an.

[mdoll]

<!-- templates/fe_page.html5 -->
<?php $this->extend('fe_page'); ?>

<?php $this->block('head'); ?>
  <?php $this->parent(); ?>
  <!-- put favicon related things here -->
<?php $this->endblock(); ?>

Ist es dabei egal, wie die Datei heißt? Kann ich die z.B. einfach favicon.html5 nennen?

Danke und Gruß
Mathias

Edit: ok, den Kommentar in der ersten Zeile muss man auch lesen- Ich lege das als fe_page.html5 im templates Ordner an, richtig?

[Spooky]

Ist es dabei egal, wie die Datei heißt? Kann ich die z.B. einfach favicon.html5 nennen?

Nein, das ist eine fe_page Template anpassung. Du kannst deinen Favion Code auch in ein eigenes favicon.html5 Template auslagern und dann folgendes machen:

<!-- templates/fe_page.html5 -->
<?php $this->extend('fe_page'); ?>

<?php $this->block('head'); ?>
  <?php $this->parent(); ?>
  <?php $this->insert('favicon'); ?>
<?php $this->endblock(); ?>

[grashalm]

Ich verwende https://realfavicongenerator.net/...

Habe mir den Link angesehen und mich daran erinnert, dass ich den Realfavicon-Generator vor Jahren schon mal längere Zeit benutzt habe.
Dann habe ich ihn jetzt reaktiviert, die Konfiguration vorgenommen, die Dateien hochgeladen und die <head>-Tags im Seitenlayout eingebunden.
Das hat im Gegensatz zu meinen Versuchen vor Jahren diesmal auf Anhieb fehlerfrei geklappt. Auch der Test lief wunderbar durch.
Abschließend habe ich noch die Easy-Favicon-Erweiterung deinstalliert. Alles bestens!

Nur der Debug-Modus will noch immer nicht so recht...

debug-modus_2.jpg

Trotzdem schon mal ganz lieben Dank an alle, die mitgeholfen haben, dass ich mir die alte Erweiterung jetzt sparen konnte!!!

[kubjo]

<!-- templates/fe_page.html5 -->
<?php $this->extend('fe_page'); ?>

<?php $this->block('head'); ?>
  <?php $this->parent(); ?>
  <!-- put favicon related things here -->
<?php $this->endblock(); ?>

Wo wird der Code eingefügt, und was ist der Vorteil, gegenüber dem Einfügen im Seitenlayout?

[Spooky]

Wo wird der Code eingefügt

Ort der Datei steht in der ersten Zeile.

und was ist der Vorteil, gegenüber dem Einfügen im Seitenlayout?

Dass du's eben nicht im Backend in jedem Seitenlayout einfügen musst, sondern es über ein Template machen und daher bequem in deiner IDE editieren kannst.

[kubjo]

...bequem in deiner IDE editieren kannst.

Wie editiere ich etwas in der IDE?

[Spooky]

Wie editiere ich etwas in der IDE?

Ich verstehe die Frage nicht - das Editieren von Dateien ist ja die Hauptaufgabe einer IDE (integrated development environment), also PhpStorm, VSCode und dergleichen.

[kubjo]

Sorry,
aber ich bin da etwas hinterher, ich editiere die Dateien lokal, wie kann ich eine IDE installieren, und welche empfielst Du?

[mlweb]

Welch IDE sehr gut nutzbar ist, hat @spooky schon genannt - phpstorm, vs-code

[grashalm]

Habe ja mittlerweile den Favicongenerator benutzt und die Erweiterung "easyfavicon" deinstalliert. Trotzdem zeigt mein Debug-Modus im Frontend immer noch Fehler:

Nur der Debug-Modus will noch immer nicht so recht...

debug-modus_2.jpg

Weiß jemand, was das bedeutet und wie ich diesen Fehler beheben kann?

[Spooky]

Trotzdem zeigt mein Debug-Modus im Frontend immer noch Fehler:



Weiß jemand, was das bedeutet und wie ich diesen Fehler beheben kann?

Du hast eine alte Erweiterung installiert, die noch eine alte database.sql verwendet.

[grashalm]

Du hast eine alte Erweiterung installiert, die noch eine alte database.sql verwendet.

Der Fehler in meinem Anhang im letzten Post lautet ja „undefined Array key ‚tl-news‘“. Hat das nicht was mit dem News-Modul im Core zu tun?
Meintest du mit der alten Erweiterung noch die easy-favicon? Da hatte ich ja geschrieben, dass ich die vollständig deinstalliert habe. Danach habe ich die Datenbank aktualisiert und dann den Debug-Modus neu aktiviert. Das heißt, diese Fehlermeldung in dem angehängten Bild meines vorigen Posts muss woanders herkommen.
Die tl-news sind doch Bestandteil des Cores, oder nicht?
Oder meintest du, dass dieses Core-Modul noch veraltet ist?
Falls nicht, wie erfahre ich, welche Erweiterung veraltet ist, wie du meintest?

[kubjo]

Welch IDE sehr gut nutzbar ist, hat @spooky schon genannt - phpstorm, vs-code

Jetzt habe ich es auch kapiert, ich dachte, dass eine IDE ein Onlinetool wäre, um Dateien direkt zu editieren und man es paralell zu contao installieren könnte. Da ich php eh nicht kann, arbeite ich weiter wie bisher, mit Filezilla und Notepad++. Da weiß ich, was ich tue! ;-)

Danke für eure Geduld mit mir ;-)

Grüße Jochen

[Spooky]

Der Fehler in meinem Anhang im letzten Post lautet ja „undefined Array key ‚tl-news‘“. Hat das nicht was mit dem News-Modul im Core zu tun?

Nein, der Fehler tritt auf, weil du eine alte Erweiterung installiert hast, die noch eine database.sql verwendet, statt DCA Definitionen - und da vermutlich generell noch irgendein Fehler in der Erweiterung ist.

Meintest du mit der alten Erweiterung noch die easy-favicon?

Welche Erweiterung das ist kann ich dir nicht sagen. Durchsuche deine Contao Installation nach der Datei "database.sql".

Falls nicht, wie erfahre ich, welche Erweiterung veraltet ist, wie du meintest?

Durchsuche deine Contao Installation nach der Datei "database.sql". z.B. unter Linux (wenn du dich auf der Konsole im Ordner der Contao Installation befindest):

find ./ -name "database.sql"

[grashalm]

Ich habe die besagte Datei "database.sql" tatsächlich in einer sehr verwaisten Erweiterung gefunden, und zwar in "piwik_visitors_opt-out", die noch in dem pfad /system/modules/ vor sich hinschimmelte. Nachdem ich die Erweiterung gelöscht habe und den Cache mit dem Contao-Manager gelöscht habe, funktionierte der Debug-Modus wieder einwandfrei!

Danke spooky! Und danke auch für den Code für die Console, den hätte ich alleine nicht gewusst...