Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>HTML-Code optimieren - Wie? - Händisch oder geht das auch automatisch?

HTML-Code optimieren - Wie? - Händisch oder geht das auch automatisch?

einar46
einar4602.02.2215:43
Seit knapp 4 Jahren betreibe ich einen Wander-Blog im Internet. Wen es interessiert, der kann sich den Blog über den Link



ansehen. Speziell geht es da um den Menüpunkt "Chronik". Bei den anderen Menüpunkten besteht aber ein ähnliches Problem.

Bei Blogger (von Google) kann ich den Blog pflegen. Mittlerweile steckt da viel Zeit und Arbeit drin.

Bei der Pflege der einzelnen Posts (Posts sind Wanderberichte) und Seiten (Seiten sind Menüpunkte im Blog) gibt es zwei Modi (Textmodus, HTML-Modus). Meine Texte erfasse ich in der Regel im Textmodus. Den HTML-Modus verwende ich nur, wenn ich Landkarten (zB in Berichten) oder Tabellen (siehe Menüpunkt "Touren" und dort die Tourenliste) in den Blog einfügen will. Landkarten und Tabellen erstelle ich in GoogleDrive. Wenn ich die Landkarten und Tabellen in den Blog "einbetten" will, stellt mir GoogleDrive HTML-Code-Schnipsel zur Verfügung. Die HTML-Code-Schnipsel kopiere ich in die Zwischenablage. Dann schalte ich vom Textmodus in den HTML-Modus um und füge die HTML-Code-Schnipsel aus der Zwischenablage an die gewünschte Stelle im HTML-Code ein. Das ist alles kein Problem und funktioniert wunderbar.

Immer, wenn ich in den HTML-Modus wechsle, fällt mir der "gewöhnungsbedürftige" HTML-Code (sieht nicht strukturiert und "schick" aus) auf. Das war schon von Anfang an so.

Jetzt ist aber ein Problem hinzugekommen, was mich immer öfters maßlos nervt.

Und zwar ist das die Geschwindigkeit der Texterfassung im Textmodus. Ich bin kein geübter Textschreiber auf der Tastatur. Mit dem "Einfinger-Adler-Suchsystem" habe ich aber mit den Jahren eine beachtliche Tipp-Geschwindigkeit entwickelt. Wenn ich jetzt im Blog meine Texte bearbeite, bin ich trotzdem mit dem Tippen wesentlich schneller, als die Darstellung der getippten Texte im Browser (Firefox) auf dem Bildschirm. In der Anfangszeit meines Blogs ist mir das nicht so aufgefallen. Aber je mehr Text mein Blog erhält, umso gravierender wird der Unterschied zwischen dem Eintippen der Buchstaben und der Darstellung auf dem Bildschirm.

Jetzt habe ich intensiv im Internet nach der Lösung des Problems gesucht. Eine Lösung fand ich nicht so richtig. Aber einen sehr interessanten Hinweis.

Meine Texte sind in HTML-Code eingebettet. Ich arbeite auch viel mit Fettschrift, Unterstreichungen und Farben. Je mehr Text ich erfasse und je größer die einzelnen Seiten werden, desto größer werden auch die dahinterstehenden HTML-Dateien (der Menüpunkt "Chronik" hat über 3000 HTML-Zeilen und ist der Menüpunkt mit den wenigsten Textinhalten). Das braucht bei der Texterfassung Zeit (wegen des HTML-Codes, der immer wieder interpretiert werden muss) und verlangsamt die Texterfassung immer mehr, je größer die Seiten werden. Ein Extrembeispiel ist der Menüpunkt "Fragen/Themen" in meinem Blog.



Das Bild zeigt einen Ausschnitt des HTML-Codes, der zum Menüpunkt "Chronik" gehört. Ich bin kein HTML-Code-Experte, aber für mein Verständnis können da einige

<span>...</span>

"Schachtelungsebenen" entfernt werden, oder?

Nun meine weitere Fragen:

Gibt es Apps, die HTML-Code strukturieren?
Was noch wichtiger ist: Gibt es Apps, die HTML-Code optimieren, also zB überflüssigen HTML-Code entfernen?
Zuletzt die Frage: Liege ich mit meiner Annahme richtig, dass der umfangreiche HTML-Code die Texterfassung so extrem verlangsamt?

Ich hoffe, dass ich mich verständlich ausgedrückt habe.

Die HTML-Datei für den Menüpunkt "Chronik" könnte ich zur Verfügung stellen, wenn mir jemand sagt, wie ich das hier im Forum machen kann.

Danke und Grüße von
Reinhard
0

Kommentare

rmayergfx
rmayergfx02.02.2219:51
Deine HTML hat nach dem herunterladen 4721 Zeilen, die vielen Span kommen daher, das du hier mit Tabellen arbeitest und du mit Span mehrere Zeilen oder Spalten zu einer verbinden kannst. Löscht du nun hier Span Befehle, verschiebt sich dein Layout und du bekommst unter Umständen Fehler im HTML, und da hast du schon genügen wenn man die Seite durch den Markup Validation Service jagt.

Ich würde an deiner Stelle meinen Workflow umstellen. Erstelle deine Texte lokal mit dem Programm deiner Wahl und kopiere diese dann einfach online in den HTML Editor.

Schau dir mal Espresso als WebEditor für die lokale Arbeit an, er hat auch eine WYSIWYG Vorschau und da kannst du ganz gemütlich deine Seiten mit umbauen, ergänzen etc. Das ganze offline und wenn du mit den Änderungen durch bist kopierst du es einfach in den Blog.
„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“
0
caMpi
caMpi02.02.2220:02
rmayergfx
…die vielen Span kommen daher, das du hier mit Tabellen arbeitest und du mit Span mehrere Zeilen oder Spalten zu einer verbinden kannst.
Das was du meinst ist colspan bzw. rowspan, beides Attribute von <td>.
Das hier ist <span>
Somit dürfte beim Löschen nichts außer Schriftart, -art und -farbe verloren gehen, sofern es nicht nachgetragen wird.
„Keep IT simple, keep IT safe.“
+6
rmayergfx
rmayergfx02.02.2220:02
Hier noch der Link zu Espresso
„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“
+1
einar46
einar4603.02.2209:45
rmayergfx
Schau dir mal Espresso als WebEditor für die lokale Arbeit an, er hat auch eine WYSIWYG Vorschau und da kannst du ganz gemütlich deine Seiten mit umbauen, ergänzen etc. Das ganze offline und wenn du mit den Änderungen durch bist kopierst du es einfach in den Blog.

Danke für die Info. Ich schaue mir das mal an.
0
einar46
einar4603.02.2212:23
rmayergfx
Hier noch der Link zu Espresso

Habe ich mir jetzt angeschaut. Macht einen gewaltigen Eindruck auf einen "gelegentlichen" Nutzer von HTML. Mmmh ?

Beim Stöbern im Internet bin ich auf den Editor Bracket gestoßen, der einen wesentlich einfacheren Eindruck macht. Auch den werde ich mir bei meinen "sporadischen" Besuchen in der HTML-Welt mal anschauen.

Bei meinen Posts, also den Wanderberichten im Blog, mache ich es schon so, wie es mayergfx empfohlen hat. Die Texte erfasse ich offline mit Pages und kopiere die fertigen Texte dann in den Blog. Dort nehme ich dann noch einige Anpassungen am Layout (Landkarten und Bilder über HTML einfügen usw) vor.

Bei meinen Menüpunkten im Blog wollte ich aber nicht so vorgehen. Am Anfang war das nur wenig Text, deshalb erfasste ich die Texte direkt in der Entwicklungsumgebung von Blogger.

Offensichtlich bin ich da jetzt wegen der Länge der Texte an (Editor-Geschwindigkeits-)Grenzen gestoßen, so dass ich alle Texte offline erfassen muss. Dann ist es halt so...

Danke nochmal an alle wegen der Hilfe...
0
Statler_RGBG
Statler_RGBG03.02.2212:47
Ich glaube hier ist ein Teil deines Problems im Workflos verankert. Wenn du Texte in einem "Schreib" Editor wie Word oder Pages verfasst und dann den Text in die Webseite kopierst, kopierst du unheimlich viel Steuerzeichen und Darstellungsstile mit. Ich schreibe meine Texte im Editor oder in SubEthaEdit (man muss darauf achten, auf reinen Text umzustellen) und dann kopiere ich den Text in das CMS - dann entfällt der Balast.
+1
momirv03.02.2212:54
Mein Tipp:
Lerne etwas HTML/CSS und optimiere den Code selbst.

+6
KarstenM
KarstenM03.02.2213:47
Also ich sehe hier auch einiges an Optimierungspotenzial. Gerade in "Chronik" fallen sehr viele redundante Formatierungen auf, die so in vielen Fällen nicht notwendig sind.

Vereinfacht kann man ja feststellen:

Absatz (Schriftformatierung A)
- Unterabsatz 1 (Schriftformatierung A)
- Unterabsatz 2 (Schriftformatierung A)
- - Wörter vor wichtigem Wort in Unterabsatz 2 (Schriftformatierung A)
- - wichtiges Wort in Unterabsatz 2 (Fett und Schriftformatierung A)
- - Wörter nach wichtigem Wort in Unterabsatz 2 (Schriftformatierung A)

Mir ist zumindest kein Tool bekannt, welches so etwas automatisch optimiert. Ich kann also auch nur momirv Rat wiederholen und sagen:
Arbeite dich in HTML und CSS etwas ein und optimiere selbst.
+2
ttwm03.02.2215:25
Ich hab gerade selber mal ein bisschen mit diesem Blogger rumprobiert - diese diversen unsinnigen <span> scheinen Reste von vorherigen Formatierungen zu sein (evtl. auch verschlimmert durch Kopieren von vorhandenen Absätzen, die schon verhunzt waren und dann noch weiter "überformatiert" wurden). Wenn man eine Formatierung abändert und z. B. ein Leerzeichen vergisst, dann wird für dieses z. B. noch die Farbe beibehalten. Und Blogger macht dann nicht nur um dieses Leerzeichen einen "Farb-<span>", sondern umschließt den kompletten Absatz mit einem "Farb-<span>" und überschreibt es mit einem weiteren…

Als mögliche Lösung (wenn Du weiterhin die Texte direkt im Blogger integrieren willst) – das solltest Du aber erst in einem Duplikat der Seite ausprobieren: mit dem Button "Formatierung entfernen" den gesamten Text in seinen Ursprungszustand bringen und dann alles neu und sauber formatieren. Damit konnte ich Deinen Content, den ich zum Test rüberkopiert habe, in eine saubere Ausgangslage bringen.

Ist Aufwand, aber eine automatische Lösung/ein Programm hierfür ist mir auch nicht bekannt.
+3
einar46
einar4603.02.2217:24
ttwm
Ich hab gerade selber mal ein bisschen mit diesem Blogger rumprobiert - diese diversen unsinnigen <span> scheinen Reste von vorherigen Formatierungen zu sein (evtl. auch verschlimmert durch Kopieren von vorhandenen Absätzen, die schon verhunzt waren und dann noch weiter "überformatiert" wurden). Wenn man eine Formatierung abändert und z. B. ein Leerzeichen vergisst, dann wird für dieses z. B. noch die Farbe beibehalten. Und Blogger macht dann nicht nur um dieses Leerzeichen einen "Farb-<span>", sondern umschließt den kompletten Absatz mit einem "Farb-<span>" und überschreibt es mit einem weiteren…

Ja, so scheint es zu sein. Ich erfasse die Texte im Textmodus. Im Hintergrund wird daraus HTML-Code generiert. Den HTML-Code kann man sich anzeigen lassen. Mich stören die tiefgeschachtelten <span>-Befehle. Viele scheinen überflüssig zu sein.

Bei einigen Menüpunkten (zB Chronik, Über...) könnte ich das "händisch" anpassen. Aber zB der Menüpunkt "Fragen/Themen" besteht aktuell aus 30000 HTML-Codezeilen. Da will ich nichts "händisch" machen. Deshalb meine Frage nach einem "Automatismus" für die HTML-Code-Optimierung.

Aktuell teste ich den Editor SubEthaEdit von Statler_RGBG . Die erfassten Texte kopiere ich dann in den Blog. Das reicht mir vorerst als eine Übergangslösung.
0
ttwm03.02.2218:46
einar46
Aber zB der Menüpunkt "Fragen/Themen" besteht aktuell aus 30000 HTML-Codezeilen. Da will ich nichts "händisch" machen. Deshalb meine Frage nach einem "Automatismus" für die HTML-Code-Optimierung.
Aktuell teste ich den Editor SubEthaEdit von Statler_RGBG . Die erfassten Texte kopiere ich dann in den Blog. Das reicht mir vorerst als eine Übergangslösung.
Es ist doch eigentlich irrelevant vom Aufwand her, ob Du die Texte in SubEthaEdit neu erfasst/neu formatierst oder ob Du die Formatierung in Blogger zurücksetzt und dann in Blogger neu formatierst? Oder überseh ich etwas?
Aber bitte nicht falsch verstehen – jeder wie er mag: ich verwende auch externe Editoren, um Programmierung und/oder Content zu erstellen und dann in einen Editor in einem CMS einzufügen.
+2
AE-3511.02.2206:17
Ich weiss zwar was Blogger ist, aber habe keine genaueren Kenntnisse. Ich vermute aber, dass Du ein Template benutzt, das ein wenig in die Jahre gekommen ist und das auf Code basiert, der ein Bisschen aus der Steinzeit stammt. Ich sehe im dem Screenshot z.B. CSS Code der in das HTML geschrieben ist.

Du könntest versuchen ein neues Template für Deinen Blog zu wählen und vorher versuchen raus zu finden, ob es möglich ist, bei Blogger Deinen Inhalt in ein modernes Template zu überführen. Das ist jedoch ein Bisschen riskant, denn es könnte bedeuten, dass Du einiges an der Gestaltung in dem neuen Template nachbearbeiten musst. Vielleicht kannst Du es vorher irgendwie an einer Kopie probieren?

Du kannst übrigens als Text Editor auch ganz einfach TextEdit benutzen, das auf Deinem Mac für solche Zwecke bereits installiert ist. Wichtig wäre, dass Du Deinen Text vor dem Kopieren von Formatiertem Text in Reinen Text umwandelst (Format In reinen Text umwandeln). Dabei gehen alle Formatierungen verloren und das Textformat wird zum webtauglichen UTF-8. Das klingt zwar zerstörerisch, ist aber genau das was Du brauchst.

Mit Espresso wäre ich etwas vorsichtig, denn das ist eigentlich mehr Entwicklungsumgebung als Text Editor und ist etwas überdimensioniert für Deine Zwecke. Ausserdem scheint es, dass die Software nicht weiter entwickelt wird.

Brackets hat auch seine besten Tage schon lange hinter sich. Du könntest mal Atom versuchen (obwohl es auch vielleicht etwas zu viel des Guten für Deine Zwecke wäre).
+1
AE-3511.02.2206:21
Ach so: Eine automatisierte Lösung um unbenötigtes HTML zu entfernen gibt es m.E. nicht. Was Du willst, nennt sich Tree Shaking und gilt als äusserst heikel, weil man dabei zu leicht etwas kaputt machen kann.
+1
Wellenbrett11.02.2210:46
AE-35
Mit Espresso ...
Ausserdem scheint es, dass die Software nicht weiter entwickelt wird.
Wie kommst Du darauf? Laut dem Blog der Entwickler ist Espresso 5.8 fit für macOS Monterey und Espresso 6 gerade in der Beta-Phase. Mit so einer vermutlich unzutreffenden Aussage in einem öffentlichen Forum, das zudem genau die Zielgruppe der Software ansprichst, kannst Du einem kleinen Softwareunternehmen ziemlich schaden.
+1
einar46
einar4611.02.2211:43
Espresso ist wohl, nach einem kurzen Check, eine Nummer zu groß für mein Anliegen.

Ein reiner Texteditor reicht da vollkommen aus. Meine Wanderberichte (Posts) erfasse ich schon von Anfang an außerhalb des Blogs in einem einfachen Texteditor. Das mache ich jetzt auch für alle anderen Texte im Blog. Dafür kann ich das Mac-Werkzeug verwenden oder einen anderen Texteditor. Der Editor SubEthaEdit gefällt mir. Bei dem werde ich wohl bleiben.

Mittlerweile ist der Blog so umfangreich geworden, dass es nicht mehr so einfach ist ein anderes Template in Blogger.com zu verwenden. Das wäre zu viel Arbeit, die ich nicht mehr zusätzlich investieren will.

Danke AE-35 trotzdem für Deinen Tipp.

Ich glaube mich zu erinnern, dass es in anderen Programmiersprachen (zB ABAP) solche Werkzeuge zur Überprüfung von Code gibt, die fehlerhafte bzw. überflüssige Codestellen anzeigen und auch Vorschläge zur Optimierung aufzeigen. Wenn ich wüßte, welche Codestellen ich entfernen könnte, würde ich mir evtl. sogar die Arbeit machen und den Code "händisch" optimieren. Aber akt. scheint das nicht der Fall zu sein, so dass ich das erstmal zu den Akten legen werde.
0
rmayergfx
rmayergfx11.02.2212:19
Die Überprüfung des Codes habe ich dir bereits oben in meinem Startbeitrag verlinkt. Markup Validation Service. Damit kannst du bereits einiges deines Codes bereinigen. Für tiefer gehende Optimierungen sind Kenntnisse in HTML/CSS zwingend notwendig.
„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“
+1
einar46
einar4611.02.2212:41
rmayergfx
wenn man die Seite durch den Markup Validation Service jagt.

Sorry, das habe ich glatt übersehen

Das werde ich aus Interesse einmal bei Gelegenheit ausführen.

Im Moment habe ich aber dafür keine Zeit, weil ich gerade eine Wandertour über den Jakobsweg Ruta de la Lana (ca. 1300 km im März von Alicante bis Santiago de Compostela) in Spanien vorbereite.

Ich werde berichten, was dieser HTML-Code-Check ergeben hat...
0
einar46
einar4611.02.2212:57
rmayergfx
Die Überprüfung des Codes habe ich dir bereits oben in meinem Startbeitrag verlinkt. Markup Validation Service. Damit kannst du bereits einiges deines Codes bereinigen. Für tiefer gehende Optimierungen sind Kenntnisse in HTML/CSS zwingend notwendig.

Ich habe die Code-Überprüfung mit dem von Dir empfohlenen Markup Validation Service jetzt doch einmal schnell durchlaufen lassen.

Das ist eine gewaltige Liste von fast 500 Warnungen und Fehlern und das für einen der kleinsten Textbestandteile in meinem Blog (Menüpunkt Chronik mit ca. 4700 HTML-Code-Zeilen). Dass ich bei den vielen Fehlern trotzdem keine Unregelmäßigkeiten im Blogtext (Texte selbst, Formatierung) finden kann, verwundert mich. Es sieht alles so aus, wie es sein soll.

Mmmh
0
rmayergfx
rmayergfx11.02.2213:40
Die Optik kann stimmen, auch wenn der Quellcode nicht sauber ist!
„Der Computer soll die Arbeit des Menschen erleichtern, nicht umgekehrt !“
+2
BlackSeb
BlackSeb11.02.2213:56
Also Adobe Dreamweaver kann überflüssige Tags entfernen – es gibt auch eine Funktion um spezielles Word-HTML zu bereinigen. Ist natürlich für Hobby-Projekte unverhältnismäßig. Aber evtl. reicht ja zum bereinigen der bestehenden Seiten eine Test-Version!?
„MacBook Pro M3 Max (14C/36GB) / iPhone 13 Pro (256GB) / iPad 7. Generation (32GB) / Apple TV 4K (2. Generation)“
0
ttwm11.02.2214:54
AE-35
Ich weiss zwar was Blogger ist, aber habe keine genaueren Kenntnisse. Ich vermute aber, dass Du ein Template benutzt, das ein wenig in die Jahre gekommen ist und das auf Code basiert, der ein Bisschen aus der Steinzeit stammt. Ich sehe im dem Screenshot z.B. CSS Code der in das HTML geschrieben ist.
Das hat nichts mit dem Template zu tun, sondern mit dem integrierten Editor bzw. der (doofen) Engine dahinter. Wenn der Redakteur Änderungen an Farbe, Schriftart, Größe etc. vornimmt, wird das halt via CSS haarkleinst in einem span integriert (und bei Änderungen leider nicht besonders schlau gelöscht/überschrieben).
BlackSeb
Also Adobe Dreamweaver kann überflüssige Tags entfernen …
Um das zu 100% garantiert sauber zu machen, müsste Dreamweaver aber auch Zugriff auf das CSS (und gegebenenfalls auch JavaScript) haben und dieses analysieren. Woher soll das Programm sonst wissen, dass es z. B. eine CSS-Stilvorlage für die dritte (im Code als unsinnig aussehende) span-Verschachtelung gibt, so dass der Baum bis zur dritten Verschachtelung nicht gelöscht werden darf?
einar46
Wenn ich wüßte, welche Codestellen ich entfernen könnte, würde ich mir evtl. sogar die Arbeit machen und den Code "händisch" optimieren. Aber akt. scheint das nicht der Fall zu sein, so dass ich das erstmal zu den Akten legen werde.

Wenn ich vor besagtem Problem stehen würde (und wenn ich nicht auf einen externen Editor zurück greifen möchte), würde ich nicht den Code händisch optimieren, sondern mit nachfolgender Variante B im Texteditor arbeiten.

Du hast schlichtweg folgende Möglichkeiten:
a) Damit leben, wie es ist.
b) Die Texte in blogger direkt zurück setzen und "händisch" sauber neu durchformatieren (also nicht im HTML-Code, sondern im normalen Blogger-Text-Editor).
c) Die Texte "händisch" in einem anderen, dafür geeigneten Programm komplett neu erfassen, sauber neu durchformatieren und dann zu blogger rüberkopieren.

Bei B und C wirst Du hoffentlich ca. 450 Fehlermeldungen los (sofern nicht neue entstehen), die restlichen 50 bleiben aber bestehen, da du darauf keinen Zugriff hast - die sind vom verwendeten Template bereits enthalten.

vg
ttwm
+2
Smallersen11.02.2214:59
Das Ding hier kann vielleicht helfen bei schon vorhandenen Code wie in dem Beispiel.
https://html-cleaner.com/
Unter "Tools" kann man Source Code kopieren, der direkt entrümpelt wird.
0
einar46
einar4611.02.2215:10
ttwm
a) Damit leben, wie es ist.
b) Die Texte in blogger direkt zurück setzen und "händisch" sauber neu durchformatieren (also nicht im HTML-Code, sondern im normalen Blogger-Text-Editor).
c) Die Texte "händisch" in einem anderen, dafür geeigneten Programm komplett neu erfassen, sauber neu durchformatieren und dann zu blogger rüberkopieren.

Bei B und C wirst Du hoffentlich ca. 450 Fehlermeldungen los (sofern nicht neue entstehen), die restlichen 50 bleiben aber bestehen, da du darauf keinen Zugriff hast - die sind vom verwendeten Template bereits enthalten.

zu a) Das mache ich bereits so und das wird erstmal so bleiben.
zu b) Ich erfasse die Texte nur im Blogger-Text-Editor. In HTML-Code schreibe ich fast nichts. Der Blogger-Text-Editor generiert offenbar im Hintergrund HTML-Code, der nicht optimal zu sein scheint. In die HTML-Code-Ansicht gehe ich nur, wenn ich GoogleMaps-Übersichtskarten und Google-Tabellen in meine Texte einfügen will. Das geht nur über den generierten HTML-Code. GoogleMaps und GoogleTabellen stellt mir HTML-Code-Schnipsel zur Verfügung, die ich an die passenden Stellen im HTML-Code einfüge. Mehr mache ich nicht im HTML-Code.
zu c) Das ist mir im Moment zu viel Arbeit. Wenn es mal "automatisch" gehen sollte, werde ich mich vielleicht daran versuchen.

Danke nochmal für die vielen Tipps.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.