HTML Sourcecode verbessern [Gelöst]

  • Sares Sares
    Padawan
    0 x
    52 Beiträge
    0 Hilfreiche Beiträge
    29. 06. 2006, 10:20

    Hi,

    leider ist der von TYPO3 erzeugte HTML SourceCode nicht immer der Beste und mitunter relativ aufgebläht. Beispielsweise lassen sich gewisse Javascripts einfach nicht in externe Files auslagern, obwohl entsprechende Einstellungen gemacht wurden (z.B. die SpamProtection oder der JS-Source Code von GMENU) oder es werden verschiedenste Stylesheet Klassen, zusätzliche Paragraphs, etc. eingefügt.

    Ich möchte hier kurz einmal meine derzeit eingesetzten Maßnahmen zur Verbesserung des Source-Codes von TYPO3 V4 präsentieren, mit dem Ziel, daß vielleicht noch weitere mir unbekannte Optimierungsmaßnahmen im Zuge der Diskussion gefunden werden.

    [TS]#Einstellen des DocType auf XHTML Transitional
    config.doctype = xhtml_trans
    #XHTML Cleaning aktivieren
    config.xhtml_cleaning = all
    #Default Javascripts in externes File auslagern
    config.removeDefaultJS = 1
    config.removeDefaultJS = external
    #<?xml... ?> Prolog deaktivieren
    config.xmlprologue = none
    #CSS Datei in externes File auslagern
    config.inlineStyle2TempFile = 1
    config.disablePrefixComment = 1

    #RTE Tuning
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >
    #Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6

    #Entfernt die zusätzlichen CSS-Klassen
    lib.stdheader.3 = LOAD_REGISTER
    lib.stdheader.3.headerClass =
    lib.stdheader.3.headerClass.noTrimWrap = |
    lib.stdheader.stdWrap.dataWrap = |

    #Standard-Headings aufräumen
    lib.stdheader.stdWrap.dataWrap =
    lib.stdheader.10.1.fontTag = <h1>|</h1>
    lib.stdheader.10.2.fontTag = <h2>|</h2>
    lib.stdheader.10.3.fontTag = <h3>|</h3>
    lib.stdheader.10.4.fontTag = <h4>|</h4>
    lib.stdheader.10.5.fontTag = <h5>|</h5>

    #Content Elemente aufräumen und Kommentare entfernen
    tt_content.stdWrap.dataWrap >
    tt_content.stdWrap.prefixComment >
    tt_content.header.20.dataWrap >
    tt_content.header.20.prefixComment >
    tt_content.default.prefixComment >
    tt_content.text.stdWrap.prefixComment >
    tt_content.text.20.prefixComment >
    tt_content.textpic.20.stdWrap.prefixComment >
    tt_content.table.20.stdWrap.prefixComment >
    tt_content.mailform.20.stdWrap.wrap >
    tt_content.menu.20.stdWrap.prefixComment >
    tt_content.image.20.stdWrap.prefixComment >
    tt_content.list.20.stdWrap.prefixComment >
    [/TS]

    Vielleicht kennt ja der eine oder andere von euch noch weitere Maßnahmen (z.B. Tuning-Maßnahmen für den RTE), die er in diesem Thread der Allgemeinheit zur Verfügung stellen möchte.

    Über eine rege Diskussion würde ich mich sehr freuen!
    Sares


  • kriwi kriwi
    R2-D2
    0 x
    82 Beiträge
    0 Hilfreiche Beiträge
    10. 02. 2007, 12:18

    #angry# O.k., jetzt ging's. Der Code ist nun auch um einiges bereinigt. Allerdings bleiben das Laden des (unerwünschten) zweiten Stylesheets:
    [HTML]<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e99aac0be0.css" />[/HTML]
    und ein paar Spacer um/nach Überschriften:
    [HTML]<h1>Überschrift</h1><br /><img src="clear.gif" width="1" height="5" border="0" class="spacer-gif" alt="" title="" /><br />[/HTML]

    Wie bekomme ich die noch raus?
    [HTML]plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >[/HTML]
    habe ich schon probiert - bringt nichts. Oder muss dies an anderer Stelle stehen? (Ich hab's einfach zu den anderen Tuning-Befehlen gepackt.)

    kriwi

  • kriwi kriwi
    R2-D2
    0 x
    82 Beiträge
    0 Hilfreiche Beiträge
    10. 02. 2007, 13:25

    O.k. Fragen nun auch gelöst.

    kriwi

  • Andrea_Herzog Andrea_He...
    Jedi-Meister
    0 x
    432 Beiträge
    0 Hilfreiche Beiträge
    12. 03. 2007, 13:53

    Hallo Kriwi,
    lässt du uns auch an deinen Erkenntnissen teilhaben?

    Gruß
    Andrea

  • kriwi kriwi
    R2-D2
    0 x
    82 Beiträge
    0 Hilfreiche Beiträge
    13. 03. 2007, 09:34

    O.k., also im TS des Haupttemplates steht
    [TS]<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/template/main/cleancode.t3d">

    # DIV um jedes Inhaltselement
    tt_content.stdWrap.wrap = <div class="ce">|</div>

    # Default-Sprache Deutsch
    page.config.sys_language_uid = 1
    page.config.language = de
    page.config.locale_all = de_DE

    # Ziele für Links setzen
    page.config.intTarget = _top
    page.config.extTarget = _blank

    # Default PAGE object
    page = PAGE
    [... Deklarationen für Inhalt der Seiten ...]

    # unerwünschtes zweites Stylesheet elimenieren
    plugin.tx_cssstyledcontent >
    plugin.tx_veguestbook_pi1._CSS_DEFAULT_STYLE >[/TS]
    und cleancode.t3d sieht wie folgt aus:
    [TS]#Einstellen des DocType auf XHTML Transitional
    config.doctype = xhtml_trans

    #XHTML Cleaning aktivieren
    config.xhtml_cleaning = all

    #Default Javascripts in externes File auslagern
    config.removeDefaultJS = 1
    config.removeDefaultJS = external

    #<?xml... ?> Prolog deaktivieren
    config.xmlprologue = none

    #CSS Datei in externes File auslagern
    config.inlineStyle2TempFile = 1
    config.disablePrefixComment = 1

    #RTE Tuning
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >

    #Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
    lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6

    #Entfernt die zusätzlichen CSS-Klassen
    lib.stdheader.3 = LOAD_REGISTER
    lib.stdheader.3.headerClass =
    lib.stdheader.3.headerClass.noTrimWrap = |
    lib.stdheader.stdWrap.dataWrap = |

    #Standard-Headings aufräumen
    lib.stdheader.stdWrap.dataWrap = |
    lib.stdheader.10.1.fontTag = <h1>|</h1>
    lib.stdheader.10.2.fontTag = <h2>|</h2>
    lib.stdheader.10.3.fontTag = <h3>|</h3>
    lib.stdheader.10.4.fontTag = <h4>|</h4>
    lib.stdheader.10.5.fontTag = <h5>|</h5>

    # Unterdrückt den Umbruch mit <BR>
    lib.stdheader.10.stdWrap.wrap = |

    # Wirft das CLEAR.GIF raus
    tt_content.textpic.20.spaceBelowAbove = 0
    tt_content.image.20.spaceBelowAbove = 0
    tt_content.header.stdWrap.space = 0|0
    tt_content.stdWrap.space = 0|0
    tt_content.stdWrap.spaceBefore = 0
    tt_content.stdWrap.spaceAfter = 0
    lib.stdheader.stdWrap.space = 0|0

    #Content Elemente aufräumen und Kommentare entfernen
    tt_content.stdWrap.dataWrap >
    tt_content.stdWrap.prefixComment >
    tt_content.header.20.dataWrap >
    tt_content.header.20.prefixComment >
    tt_content.default.prefixComment >
    tt_content.text.stdWrap.prefixComment >
    tt_content.text.20.prefixComment >
    tt_content.textpic.20.stdWrap.prefixComment >
    tt_content.table.20.stdWrap.prefixComment >
    tt_content.mailform.20.stdWrap.wrap >
    tt_content.menu.20.stdWrap.prefixComment >
    tt_content.image.20.stdWrap.prefixComment >
    tt_content.list.20.stdWrap.prefixComment >

    # entfernt 1-pixel CLEAR.GIF über jedem Bild mit Text
    tt_content.textpic.20.noStretchAndMarginCells = 1

    # entfernt 1-pixel CLEAR.GIF über jedem Bild
    tt_content.image.20.noStretchAndMarginCells = 1

    # Entfernen des clear.gif bzw. der Abstände nach Seitenelementen
    content.headerSpace = 0|0
    content.space = 0|0

    # entfernt automatische Abstände
    styles.content.imgtext.colSpace = 0
    styles.content.imgtext.rowSpace = 0
    styles.content.imgtext.textMargin = 10

    # Noch ein paar <br> entfernen
    styles.content.imgtext.caption.1.wrap = |
    styles.content.imgtext.caption.1.spaceBefore = 0
    styles.content.imgtext.caption.1.br = 0

    # Rahmen bei Checkbox "Rahmen setzen" veraendern
    styles.content.imgtext.borderThick = 1
    styles.content.imgtext.borderColor = #000000
    styles.content.imgtext.borderSelector = DIV.imgtext[/TS]
    Wie geschrieben, alles nicht von mir, sondern hier im Forum zusammengesucht.

    kriwi

  • cordman cordman
    Jedi-Ritter
    0 x
    144 Beiträge
    0 Hilfreiche Beiträge
    13. 03. 2007, 12:54

    Ich benutze zusätzlich HTML-Tidy und steuere es per Typoscript mit der Extension "tstidy".

    TS Tidy:
    [url]http://typo3.org/extensions/repository/view/tstidy/1.0.0/[/url]

    HTML Tidy:
    [url]http://tidy.sourceforge.net/[/url]

    HTML Tidy Dokumentation:
    [url]http://tidy.sourceforge.net/docs/quickref.html[/url]

    Das dient aber quasi nur der Verschönerung des Codes (Zeilenumbrüche, etc.), denn die Ausgaben habe ich bereits vorher bearbeitet ;)

  • Fix Fix
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    18. 12. 2008, 11:07

    @kriwi:
    bei mir funktioniert das leider überhaupt nicht. habe den 2. teil vom typoscript in mein template setup kopiert, aber es steht immer noch tonnenweise müll im code.
    wär mir ja eigentlich egal, aber ich will dass zwischen header und inhalt eines content elements keine leerzeile ist, sondern einfach nur ein umbruch.
    und das schaut im moment immer noch so aus:

    [HTML]<div style="margin-left:301px;"><div class="csc-textpic-text"><div class="csc-textpicHeader csc-textpicHeader-26"><h1><a href="http://www.google.ch" target="_top">WIRTSCHAFT</a></h1></div><p>Im Bereich Wirtschaft...
    ...[/HTML]

  • neotron neotron
    Padawan
    0 x
    37 Beiträge
    0 Hilfreiche Beiträge
    07. 04. 2009, 12:49

    Hallo Sares,

    danke für diesen Beitrag!

    Viele Grüße!
    Patrick

  • alforno alforno
    TYPO3-Anwärter
    0 x
    4 Beiträge
    0 Hilfreiche Beiträge
    15. 10. 2009, 14:26

    Hallo, könnte mir einer die folgenden Codezeilen näher erläutern und mir sagen was da im einzelnen passiert und warum die zeilen nötig sind?

    #Entfernt die zusätzlichen CSS-Klassen
    lib.stdheader.3 = LOAD_REGISTER
    lib.stdheader.3.headerClass =
    lib.stdheader.3.headerClass.noTrimWrap = |
    lib.stdheader.stdWrap.dataWrap =

    Vielen Dank im Voraus,
    Alfons