Kein valider html-Code?

Druckbare Version

01.03.2022, 21:28
grashalm

Kein valider html-Code?

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.

Zitat:

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.

Zitat:

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.

Zitat:

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.
01.03.2022, 21:32
Spooky

zu 1: https://community.contao.org/de/show...ht-w3c-konform
01.03.2022, 21:32
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?
01.03.2022, 21:46
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?
02.03.2022, 17:52
BennyBorn

Zitat:

Zitat von 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?

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

Zitat:

Zitat von grashalm

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.
04.03.2022, 10:03
grashalm

gelöst

Zitat:

Zitat von BennyBorn

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!
04.03.2022, 10:06
Spooky

Zitat:

Zitat von grashalm

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

Was genau ist das Problem?
07.03.2022, 12:34
grashalm

Liste der Anhänge anzeigen (Anzahl: 1)

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:

Anhang 25318
07.03.2022, 12:43
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.
07.03.2022, 13:11
grashalm

Zitat:

Zitat von 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.

Vielleicht sollte ich die Erweiterung ad acta legen. Kennst Du eine taugliche Alternative dazu?
07.03.2022, 13:14
Spooky

Ich verwende https://realfavicongenerator.net/ und binde die entsprechenden Dinge dann per vererbten fe_page Template ein.
07.03.2022, 13:18
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/
07.03.2022, 13:29
grashalm

Zitat:

Zitat von mlweb

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?
07.03.2022, 13:48
planepix

Die verwende ich seit längerem.
Unter 4.4 und 4.9.
07.03.2022, 13:57
kubjo

Zitat:

Zitat von Spooky

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"?
07.03.2022, 14:28
Spooky

Zitat:

Zitat von kubjo

Was bedeutet: "per vererbten fe_page Template einbinden"?

PHP-Code:

 <?php $this->extend('fe_page'); ?> <?php $this->block('head'); ?> <?php $this->parent(); ?>  <?php $this->endblock(); ?>
07.03.2022, 14:38
neelix

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

Zitat:

Zitat von Spooky

PHP-Code:

 <?php $this->extend('fe_page'); ?> <?php $this->block('head'); ?> <?php $this->parent(); ?>  <?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?
07.03.2022, 15:01
Spooky

Zitat:

Zitat von mdoll

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:

PHP-Code:

 <?php $this->extend('fe_page'); ?> <?php $this->block('head'); ?> <?php $this->parent(); ?> <?php $this->insert('favicon'); ?> <?php $this->endblock(); ?>
07.03.2022, 15:11
grashalm

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von Spooky

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...

Anhang 25321

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

Zitat:

Zitat von Spooky

PHP-Code:

 <?php $this->extend('fe_page'); ?> <?php $this->block('head'); ?> <?php $this->parent(); ?>  <?php $this->endblock(); ?>

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

Zitat:

Zitat von kubjo

Wo wird der Code eingefügt

Ort der Datei steht in der ersten Zeile.

Zitat:

Zitat von kubjo

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.
08.03.2022, 20:29
kubjo

Zitat:

Zitat von Spooky

...bequem in deiner IDE editieren kannst.

Wie editiere ich etwas in der IDE?
08.03.2022, 20:56
Spooky

Zitat:

Zitat von kubjo

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.
08.03.2022, 21:54
kubjo

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

Welch IDE sehr gut nutzbar ist, hat @spooky schon genannt - phpstorm, vs-code
09.03.2022, 09:16
grashalm

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

Zitat:

Zitat von grashalm

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

Anhang 25321

Weiß jemand, was das bedeutet und wie ich diesen Fehler beheben kann?
09.03.2022, 09:23
Spooky

Zitat:

Zitat von grashalm

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.
09.03.2022, 17:24
grashalm

Zitat:

Zitat von Spooky

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?
09.03.2022, 17:52
kubjo

Zitat:

Zitat von mlweb

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
09.03.2022, 17:53
Spooky

Zitat:

Zitat von grashalm

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.

Zitat:

Zitat von grashalm

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".

Zitat:

Zitat von grashalm

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):

Code:

find ./ -name "database.sql"
09.03.2022, 23:41
grashalm

gelöst

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! :D

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