Templategestaltung schwer gemacht!

[loscho]

Ich wollte nur mal schnell meinen Unmut über den doch sehr unübersichtlichen Aufbau des HTML und CSS Codes loswerden. Als Webdesigner wage ich zu behaupten mich mit dem erstellen validen Codes auszukennen.

An vielen Stellen hat es JTL leider nicht geschafft sauber zu arbeiten, durch die an vielen Stellen unnütz verschachtelten HTML Befehle ergibt sich natürlich auch ein wirrer CSS Code, der einem Außenstehenden das Arbeiten echt erschwert.

Das wollte ich nur mal loswerden und um nicht mit Kritik zu enden ist der
Shop3 vom Funktionsumfang in Kombi mit der Wawi echt eine Toplösung für Onlineshops und auch der Adminbereich ist von der Bedienung sehr gut gelungen.

 

[ag-websolutions.de]

AW: Templategestaltung schwer gemacht!

mich mit dem erstellen validen Codes .... er einem Außenstehenden das Arbeiten echt erschwert

was hat denn bitte Validität mit Lesbarkeit für einen Außenstehenden zu tun?

Ob ein Code valide ist, misst sich an seiner Fehlerfreiheit gegenüber Normen und Standards und nicht, ob jeder ihn lesen (und vor allem verstehen) kann

 

[loscho]

AW: Templategestaltung schwer gemacht!

In Zeiten wo Individualität groß geschrieben wird ist die Anpassparkeit eines Shoptemplates für mich ein Qualitätsmerkmal. Wenn ich beim Anpassen (und da bin ich nicht mal kleinlich) auf grobe Fehler was die Validität des Codes stoße und den gesamten Aufbau für etwas unübersichtlich empfinde sollte es erlaubt sein darüber meinen Unmut auszudrücken ohne dass du dich angegriffen fühlst, da ich annehme du bist am Template beteiligt gewesen.

 

[ag-websolutions.de]

AW: Templategestaltung schwer gemacht!

also weder war ich am template beteiligt, noch fühle ich mich angegriffen (warum auch).

Ich frage mich halt nur, wie einer, der von sich behauptet Ahnung zu haben, aus Unmut heraus derart sinnfrei mit Begriffen um sich gehen kann, die nichts mit einander zu tun haben

auf grobe Fehler was die Validität des Codes

dann solltest du diese Fehler auch hier man nennen/zeigen

 

[loscho]

AW: Templategestaltung schwer gemacht!

Warum die Schärfe in deinem Ton?

Und ich geb dir Recht Validität ist in dem Zusammenhang vielleicht das falsche Wort. Der semantische Aufbau des HMTL Codes ist einfach an vielen Stellen nicht sauber. Meist ergibt sich ein valider Code aus einem sauberen semantischen Aufbau, weshalb ich mich da evtl. missverständlich ausgedrückt habe.

Hier ein Beispiel:

<div class="category_wrapper clearall">
<ul class="category_item">
<li class="desc">
<h2>Seitenüberschrift bei Auswahl Produktkategorie</h2>
</li>
</ul>
</div>

Das ist der Code der für die Anzeige der Seitenüberschrift bei Produktkategorieauswahl verwendet wird und in diesem Stil habe ich einige Beispiele gefunden, wo Block- und Inlineelemente auf unnötige Weise verschachtelt werden.

Wenn du mir eine sinnvolle Begründung für den Code liefern kannst, lasse ich mich gern überzeugen, auf den ersten und zweiten Blick erscheint es mir jedenfalls nicht sinnvoll.

 

[Thomas Lisson]

AW: Templategestaltung schwer gemacht!

Hi,

was ist daran nicht sinnvoll? Klär uns auf

 

[Zillis-Web]

AW: Templategestaltung schwer gemacht!

Wenn wir schon da bei sind, habe ich da auch eine Frage zu:
Da steht in der header.tpl z.B. dieses

<meta http-equiv="content-type" content="text/html; charset={$JTL_CHARSET}" />

der schließende Slash /> ist also angegeben.

Im Validator wird aber genau das hier

  Line 4,         Column 73:     end tag for "meta" omitted, but OMITTAG NO was specified     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">                ✉     
                    You may have neglected to close an element, or perhaps you meant to        "self-close" an element, that is, ending it with "/>" instead of ">".

angemeckert. Völlig zu Recht weil der schließende Slash /> genau hier fehlt, was ist da passiert? Im Seitenquelltext fehlen sämtliche schließenden Slashes obwohl die im Quellcode vorhanden sind, seltsam. Keine Ahnung was ich da verhauen haben könnte. Kann mir mal jemand schreiben wo ich nachschauen könnte/muss?

 

[ag-websolutions.de]

AW: Templategestaltung schwer gemacht!

nutzt du pquery an hook140?

Wenn ja, dann liegt das Problem da "begraben"

 

[Zillis-Web]

AW: Templategestaltung schwer gemacht!

Ja genau, dahin war ich gerade unterwegs, was mache ich da genau falsch? Kannst Du mir das sagen/schreiben? Irgendwie werden mir im gesamten Quelltext die Slashes dadurch raus gehauen, wo ich diesen Hook eingesetzt habe.

 

[andy j]

AW: Templategestaltung schwer gemacht!

Das liegt an einer Funktion von phpQuery. Wir nutzen derzeit newDocumentHTML wobei newDocumentXHTML richtig wäre. Ist aber leider noch immer in der aktuellen Version mit Bugs versehen sodass wir noch nicht umstellen können.

 

[ag-websolutions.de]

AW: Templategestaltung schwer gemacht!

du kannst da nichts machen ... pquery (man beachte es stammt von Google) ist an dieser Stelle etwas "buggy"

... und dich trösten, dass es nicht seo-relevant ist

 

[Zillis-Web]

AW: Templategestaltung schwer gemacht!

Ok, wie könnte ich das Problem mit dem nachladen von JS-Dateien im Header dann anders klären wie hier beschrieben.

Im Moment lade ich einfach nur JS-Dateien und eine CSS-Datei in den Header, nach dem Code siehe Link.
Das heisst dann wohl, dass ich den Code in die header_custom.tpl einschreiben muss oder geht es noch anders?

 

[ag-websolutions.de]

AW: Templategestaltung schwer gemacht!

nein entweder mittels pquery....oder manuell bei in der header_custom.tpl mit zusätzlichem Aufwand bei shop-updates

 

[loscho]

AW: Templategestaltung schwer gemacht!

<div class="category_wrapper clearall">
<ul class="category_item">
<li class="desc">
<h2>Seitenüberschrift bei Auswahl Produktkategorie</h2>
</li>
</ul>
</div>

Hi,

was ist daran nicht sinnvoll? Klär uns auf

Hhmm entweder reden wir aneinander vorbei oder ich steh auf dem Schlauch. Mit dem Codeschnipsel werden nicht die vorhandenen Produktkategorien samt Bildchen angezeigt. Die folgen in dieser Liste

<ul class="category_subcategories hlist">...</ul>

Der Code zeigt die gewählte Hauptkategorie als Seitenüberschrift an. Wie ich im letzten Post geschrieben hab ist das weniger ein Problem was zu invaliden Code führt sondern vielmehr semantisch falsch. Eine Seitenüberschrift ist nunmal keine Liste. Ich denke an der Stelle ließe sich das gleiche optische Ergebnis mit einem einfachen H2 samt einer CSS Klasse wiedergeben.

Im weiteren Verlauf werden die Bezeichnungen der subcategories auch mit H2 ausgezeichnet, sachlich richtig wäre die Verwendung von H3, da es sich ja um Unterpunkte der gewählten Hauptkategorie (H2) handelt.

Wie auch immer, ich höre schon förmlich den empörten Aufschrei. Mir geht es nicht darum irgendwas schlecht zu machen. Kritik hat ja immer auch eine subjektive Komponente und was man drauß macht ist jeden selbst überlassen.

 

[ralph]

AW: Templategestaltung schwer gemacht!

In ein template muss man sich immer erst mal einlesen, das klappt aber auch mit JTL- Shop-templates sehr gut.

Dein Einsatz für semantisches HTML ist ehrenhaft und rührend. Ich habe als Webentwickler selbst fast zehn Jahre gegen Windmühlen gekämpft. Inzwischen bin ich gereifter und habe festgestellt, dass die Browser fast alles so darstellen, wie der Autor es wünscht, Semantik hin oder her. Die Browser sind gut, auch Hilfsprogramme wie screenreader sind gut, weit besser als die meisten webdesigner.

Den Besucher interessiert Semantik im code nicht. Die Browser interessiert Semantik im code nicht. Mich interessiert es auch nicht mehr, ich habe mich einem lukrativeren Geschäft zugewandt. Warum soll mich als Benutzer der Quellcode einer Seite interessieren, mich interessiert auch nicht der Quellcode eines Word-Dokumentes.

Dass du aber Syntax (valider Code nach W3C) und Semantik durcheinander gebracht hast, zeigt mir, dass du bei deinem Kampf gegen die Windmühlen erst am Anfang stehst. Trotzdem viel Glück dabei.

 

[loscho]

AW: Templategestaltung schwer gemacht!

Also mit deinem Statement lässt sich jetzt wunderbar eine Grundsatzdiskussion starten. Denn Sachen als gegeben hinzunehmen ist natürlich ein bequemer Weg, es aber besseren Wissens wenigstens für sich selbst versuchen anders zu machen ist eine Frage der Einstellung.
Und wenn du von Windmühlen sprichst, werde ich in diesem Zusammenhang weiter den Don Quichotte machen.

Das gezeigte Beispiel ist jedenfalls unabhängig von meinem Lvl und auch unabhängig davon ob ich was durcheinander gebracht habe ein Sachproblem, was absolut seine Berechtigung in einem Forum für Verbesserungsvorschläge hat. Ich lasse mich gern überzeugen, wenn sich Argumente finden lassen, die den Code rechtfertigen. Bis dahin verbleibe ich mit freundlichen Grüßen.

 

[ralph]

AW: Templategestaltung schwer gemacht!

Also mit deinem Statement lässt sich jetzt wunderbar eine Grundsatzdiskussion starten.

Davon bin ich weit entfernt. Ich muss den Schüleraustausch bzw. das Studium meiner Kinder finanzieren und auch etwas für den Ruhestand zurücklegen. Fruchtlose Diskussionen über Ideale konnte ich früher führen, und ich tat es zur Genüge. Jetzt hat mich das Leben eingeholt und ich handele mit Waren.

 

[Zillis-Web]

AW: Templategestaltung schwer gemacht!

@loscho
Ich gehe davon aus, dass Du für die Hauptkategorie kein Bild und keine Beschreibung hinterlegt hast, Richtig?

Was wäre also wohl wenn da jemand so etwas eingibt, dann will derjenige auch, dass es genau so angezeigt wird, oder irre ich da?

Ich setze Dir mal den Quellcode dafür rein, vielleicht verstehst Du dann worum es geht:

<div class="category_wrapper clearall">
      <ul class="category_item">
         {if $oNavigationsinfo->cBildURL|count_characters > 0 && $oNavigationsinfo->cBildURL ne 'gfx/keinBild.gif'}
            <li class="img"><img src="{$oNavigationsinfo->cBildURL}" alt="{$oNavigationsinfo->oKategorie->cBeschreibung|strip_tags|escape:"quotes"|escape:"html"|truncate:40}" /></li>
         {/if}
         <li class="desc">
            <h2>{$Suchergebnisse->SuchausdruckWrite}</h2>
            {if $Einstellungen.navigationsfilter.kategorie_beschreibung_anzeigen == "Y" && $oNavigationsinfo->oKategorie->cBeschreibung|count_characters > 0}
               <div class="item_desc custom_content">{$oNavigationsinfo->oKategorie->cBeschreibung}</div>
            {/if}
            {if $Einstellungen.navigationsfilter.hersteller_beschreibung_anzeigen == "Y" && $oNavigationsinfo->oHersteller->cBeschreibung|count_characters > 0}
               <div class="item_desc custom_content">{$oNavigationsinfo->oHersteller->cBeschreibung}</div>
            {/if}
            {if $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen == "Y" && $oNavigationsinfo->oMerkmalWert->cBeschreibung|count_characters > 0}
               <div class="item_desc custom_content">{$oNavigationsinfo->oMerkmalWert->cBeschreibung}</div>
            {/if}
         </li>
      </ul>
   </div>

Wie würdest Du das denn handhaben wenn einer wie Du kein Bild, keine Beschreibung und keine Merkmale zur Kategorie hat ber ein anderer genau die Sachen eingibt und auch anzeigen will?

 

[alpha-dog]

AW: Templategestaltung schwer gemacht!

Davon bin ich weit entfernt. Ich muss den Schüleraustausch bzw. das Studium meiner Kinder finanzieren und auch etwas für den Ruhestand zurücklegen. Fruchtlose Diskussionen über Ideale konnte ich früher führen, und ich tat es zur Genüge. Jetzt hat mich das Leben eingeholt und ich handele mit Waren.

Gefällt mir

 

[loscho]

AW: Templategestaltung schwer gemacht!

<div class="category_wrapper clearall">
      <ul class="category_item">
         {if $oNavigationsinfo->cBildURL|count_characters > 0 && $oNavigationsinfo->cBildURL ne 'gfx/keinBild.gif'}
            <li class="img"><img src="{$oNavigationsinfo->cBildURL}" alt="{$oNavigationsinfo->oKategorie->cBeschreibung|strip_tags|escape:"quotes"|escape:"html"|truncate:40}" /></li>
         {/if}
         <li class="desc">
            <h2>{$Suchergebnisse->SuchausdruckWrite}</h2>
            {if $Einstellungen.navigationsfilter.kategorie_beschreibung_anzeigen == "Y" && $oNavigationsinfo->oKategorie->cBeschreibung|count_characters > 0}
               <div class="item_desc custom_content">{$oNavigationsinfo->oKategorie->cBeschreibung}</div>
            {/if}
            {if $Einstellungen.navigationsfilter.hersteller_beschreibung_anzeigen == "Y" && $oNavigationsinfo->oHersteller->cBeschreibung|count_characters > 0}
               <div class="item_desc custom_content">{$oNavigationsinfo->oHersteller->cBeschreibung}</div>
            {/if}
            {if $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen == "Y" && $oNavigationsinfo->oMerkmalWert->cBeschreibung|count_characters > 0}
               <div class="item_desc custom_content">{$oNavigationsinfo->oMerkmalWert->cBeschreibung}</div>
            {/if}
         </li>
      </ul>
   </div>

Wie würdest Du das denn handhaben wenn einer wie Du kein Bild, keine Beschreibung und keine Merkmale zur Kategorie hat ber ein anderer genau die Sachen eingibt und auch anzeigen will?

Der Aufruf über die Liste bleibt unnötig, denn selbst wenn ich zusätzlich zur Kategorie eine Beschreibung eingebe handelt es sich um eine Liste mit nur einem Anstrich. Für den Fall eine Bildes liese sich zum Beispiel folgender Code realisieren. Soll ja nicht heißen ich trage nichts konstruktives bei.

<div id="page-header">
         {if $oNavigationsinfo->cBildURL|count_characters > 0  && $oNavigationsinfo->cBildURL ne 'gfx/keinBild.gif'}
            <img  src="{$oNavigationsinfo->cBildURL}"  alt="{$oNavigationsinfo->oKategorie->cBeschreibung|strip_tags|escape:"quotes"|escape:"html"|truncate:40}"  />
         {/if}
            <h2>{$Suchergebnisse->SuchausdruckWrite}</h2>
            {if  $Einstellungen.navigationsfilter.kategorie_beschreibung_anzeigen == "Y"  &&  $oNavigationsinfo->oKategorie->cBeschreibung|count_characters >  0}
               <p>{$oNavigationsinfo->oKategorie->cBeschreibung}</p>
            {/if}
            {if  $Einstellungen.navigationsfilter.hersteller_beschreibung_anzeigen == "Y"  &&  $oNavigationsinfo->oHersteller->cBeschreibung|count_characters  > 0}
               <p>{$oNavigationsinfo->oHersteller->cBeschreibung}</p>
            {/if}
            {if  $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen ==  "Y" &&  $oNavigationsinfo->oMerkmalWert->cBeschreibung|count_characters  > 0}
               <p>{$oNavigationsinfo->oMerkmalWert->cBeschreibung}</p>
            {/if}

   </div>

Den Rest kann man über CSS regeln.

#page-header img {
float: left;
margin: 0 10px 0 0;
}
#page-header h2 {
...
}
#page-header p {
...
}

Sicher gibt es jetzt noch viele anderen Möglichkeiten der Umsetzung und wahrscheinlich kommt auch zu diesem Codeschnipsel ein Veto. Für den Fall vorbeugend noch ein Beispiel was sich mir nicht erschließt.

So wird die Navigation oben dargestellt (Theme Dark)

<div id="headlinks">
<ul>
<li class="first"><a href="#"><span>Startseite</span></a></li>
<li><a href="#"><span>Mein Konto</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li class="basket last"><a href="warenkorb.php?"><span>Warenkorb (0,00 EUR)</span></a>
</li>
</ul>
</div>

Warum wird der Linktext hier noch zusätzlich in einem span verschachtelt.

Und um das abzuschließen, ich will weder Weltverbesserer noch Buhmann sein, ich habe lediglich beim arbeiten mit dem Template aus Sicht einige dieser Codebeispiele gefunden. Das sich bei zu tiefer Verschachtelung auch der CSS Code nicht zum positiven entwickelt ist nachvollziehbar. Deshalb mein Statement im Ausgangsbeitrag...nicht mehr und nicht weniger.