Zwickmühle - Verhältnis Content zu Quelltext (Seite 5)

Wenn wir die überarbeitete Version kommentieren sollen, müsste sie hochgeladen werden. Ich sehe noch keine der genannten Änderungen.

Zu 1.
Google Analytics muss drin bleiben, aber direkt darunter ist ein Script namens SlideJS. In Zeile 58 gleich das nächste. So aufmerksam hast Du wohl nicht gesucht.

Zu 2.
Es ist möglich, alle Kommentare zu entfernen. Die sind für einen Besucher nutzlos und nur unnötiger Ballast.

Zu 3.
Gut. Nur beachten, es immer im HTML und CSS gleichzeitig zu ändern und nicht irgendwo Konflikte zu erschaffen, indem man zwei unterschiedliche Klassen auf den gleichen Begriff kürzt.

Zu 4.
[html]abweicht und das Ziel kurz und treffend beschreibt, er erscheint, wenn
man mit der Maus über dem Link verweilt">Linktext[/html]
Ich meinte natürlich title-Attribut...

Zu 5.
Du meinst mit System den Zen Cart? Nichts ist auf irgendwas ausgelegt, das Template ist einfach nur ein Gerüst mit Platzhaltern, das vom System gefüllt wird. Dem System ist es egal, was letztlich ausgegeben wird. Du kannst das auch als Excel-Dokument erstellen lassen oder reinen Text ohne HTML auswerfen. Ist nur für Besucher irgendwie doof.
Um die onblur- und onfocus- und anderen onirgendwas-Handler loszuwerden, müsstest Du sie in JavaScript korrekt auslagern, kannst Du das wenigstens?
Die meisten Inline-Styles dürften kaum dynamisch sein. Das sind Attribute wie
[html]style="width: 100px"[/html]
Daran dürfte sich wenig ändern. Genau wie an
[html]style="width:33%;"[/html]
bei den neuen Artikeln im August. Es sind immer drei nebeneinander - also wird sich an den 33% wenig ändern, oder?

Zu SlideJS und der Back-to-Top-Geschichte:
Wo verwendest Du die Slides? Ich habe keine gefunden. Wenn das nicht benutzt wird, kann es raus.
Und dieses "nach oben" ist ganz nett, aber vollkommen unnötig. Finde ich jedenfalls. Könnte man meiner Meinung nach gut rauswerfen.

Dann wären da noch RSS-Feeds. Wie viele braucht es davon wirklich? Wir haben Sonderangebote, neue Artikel, kommende Artikel, Empfehlungen und Bestseller. Ich habe Zweifel, dass es auch nur einen einzigen Kunden gibt, der mehr als einen davon abonniert.

Und die Meta-Keywords dürfen auch gleich verschwinden, für die interessiert sich niemand mehr.

Der Umbau des Templates in eine optisch identische aber technisch optimierte Version wäre wirklich empfehlenswert. Aber da muss man schon ein wenig Ahnung haben, um die Optik so hinzubekommen. In der Regel kann man bei solchen Templates aber mindestens 20% weglassen, wenn man es richtig strukturiert.
Ist das ein kostenloses Template oder hast Du Dir das anfertigen lassen?

puh, ich bin dran aber echt am Limit!

Du bist aber schon auf www.roller-aus-blech.de oder?

*sefuz* Ich war natürlich auf der anderen Seite, der in Deiner Signatur. Ich war ein wenig zu abgelenkt beim Schreiben, bitte entschuldige.

In Zeile 233 finden sich beispielsweise ein onmouseover und onmouseout, die sollten durch entsprechende Eventhandler in externe Skripte ausgelagert werden.
Das Eingabefeld für die Suche verwendet onfocus und onblur, das gehört z.B. zu den Dingen, die man hervorragend durch HTML5 ersetzen könnte.


Mit Zen-Cart habe ich in letzter Zeit nicht gearbeitet, es sollte aber im Template-Ordner irgendwo eine Datei geben, die das HTML für diese Zeilen enthält.
Das einfachste wäre, den Template-Ordner nach der Zeichenfolge
style="
zu durchsuchen, z.B. mit dem Programm FileSeek (www.fileseek.ca).
Anschließend die Dateien öffnen, die Stellen analysieren und entscheiden, ob man die Style-Angabe zur bereits existierenden Klasse hinzufügen kann oder ob es eine neue CSS-Klasse benötigt.

Allerdings gilt auch für die Roller-Seite, dass die Meta-Keywords unnötig sind. Gleiches gilt für eine ID auf dem Body - der Body ist einmalig, der braucht keine ID. Falls Du das änderst, kurz die JavaScripts und CSS-Dateien durchschauen, ob die ID irgendwo verwendet wird und es anpassen.

Den Suchbutton würde ich ändern, die Data-URL ist ziemlich groß. Lieber mit in die Sprites-Datei aufnehmen, die auch Facebookbutton, DHL-Fahrzeug und Co. beherbergt. Dann kommt kein Request dazu, aber es entfällt viel Code.

Mit der Verwendung des base-Tags benötigst Du für Links und Formulare keine absoluten URL mehr. Statt "http://..../..../.../datei.irgendwas" wäre "/..../.../datei.irgendwas" deutlich kürzer. Ob das beim Code-Inhalt-Verhältnis mitgezählt wird, weiß ich gerade nicht, es ist aber definitiv nicht schädlich.

So Geschichten wie der div mit der id login_logout_section sind wrapper-Konstrukte, die ich meine. Die ungeordnete Liste muss nicht in einen div. Ebenfalls sollte es den Logo-Wrapper nicht unbedingt benötigen.

Benutzt Du span-Tags immer für Fettdruck? Dann ist es unnötig, sie mit einer Klasse auszustatten. Falls Du sie manchmal ohne Fettdruck verwendest - sind sie z.B. immer in einem p-Tag, wenn sie fett sind? Falls ja, ist die Klasse wieder unnötig, weil man einfacher "p span" in der CSS-Datei verwenden könnte.

Kombinationen wie die folgende sind auch sehr unnötig, die Wiederholung der Klasse text-align ist nicht notwendig.
[html]

[/html]

Es ist technisch nicht das beste Template. Der Ersteller war relativ faul und die Strukturierung durch eine Tabelle ist doch sehr veraltet. Man kann das aber definitiv "retten" und optimieren. Die Frage ist halt, wieviel Du selbst erledigen kannst und wann wir in Bereiche kommen, wo es Deine Möglichkeiten und auch die Möglichkeiten der Hilfe sprengt.

Guten Morgen!

Ich habe das jetzt etwas verinnerlicht was du geschrieben hast. Einerseits möchte ich gerne noch viel mehr Lernen, andererseits übersteigt das meine jetzigen Fähigkeiten in diesem Bereich. Ausserdem möchte ich die Hilfe hier im Forum nicht überstrapazieren. Deswegen lege ich den Umbau auf html5 vorerst auf Eis, um mich erst einmal gründlich über dieses Thema zu informieren.

Einige Punkte konnte ich schon erledigen, andere möchte ich noch umsetzen.
Deinen Hinweis zum baselink habe ich bereits überall dort angewendet wo es mir möglich war.

Das Data-Uri für den Hintergrund im search-header habe ich schon einmal versucht, in der entsprechenden Template-Datei einzubinden. Das hat damals leider nicht funktioniert. Ich meine mich zu erinnern, dass der Button mit der Lupe dann runtergerutscht ist und ich das über margin, padding und float nicht in den Griff bekommen habe. Das war wirklich sehr nervig. Stellt sich die Frage ob so ein Data-Uri in dem Bereich besser ist als ein weiterer http request.

Die Angabe der Klassen ist das Ergebnis meines Ansatzes, inline styles zu reduzieren und gleichzeitig die html/css Validierung zu bestehen. Ich habe es jetzt überarbeitet. Wäre schön wenn du es kontrollieren würdest, ob es so ist wie du meintest.

[...]sind sie z.B. immer in einem p-Tag, wenn sie fett sind? Falls ja, ist die Klasse wieder unnötig, weil man einfacher "p span" in der CSS-Datei verwenden könnte.

Ich benutze den span tag "bold" immer für Fettdruck um inline styles wie "strong" zu umgehen. Die fett geschriebenen Wörter befinden sich immer in einem der Absätze, die ich nach diesem Muster umhülle:

Absatz

Kannst du mir bitte beispielhaft die Syntax aufschreiben wie du das mit "p span" meinst?

Diese Wrapper sind manchmal schon nervenraubend. Wahrscheinlich trotzdem gut, dass es sie gibt.

Ich habe bis jetzt strings mit style=" gefunden, die relevant sein könnten. Sind es die richtigen Stellen?
Ist ein Umbau weg vom Spaghetti Code möglich?

html_output.php

$style = \' style="width: \' . $width . \'px;"\';

category_row.php

$list_box_contents[$row][$col] = array(\'params\' => \'class="categoryListBoxContents"\' . \' \' . \'style="width:\' . $col_width . \'%;"\',

featured_products.php

$list_box_contents[$row][$col] = array(\'params\' =>\'class="centerBoxContentsFeatured centeredContent back"\' . \' \' . \'style="width:\' . $col_width . \'%;"\',

new_products.php

$list_box_contents[$row][$col] = array(\'params\' => \'class="centerBoxContentsNew centeredContent back"\' . \' \' . \'style="width:\' . $col_width . \'%;"\',

tpl_main_page.php

Line #48 : <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">

Line #55 :

<?php require(DIR_WS_MODULES . zen_get_module_directory(\'column_left.php\')); ?>

Line #91 : <td id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">

Line #98 :

<?php require(DIR_WS_MODULES . zen_get_module_directory(\'column_right.php\')); ?>

 

tpl_box_default_left.php

 

specials_index.php

Hier wird es jetzt langsam unübersichtlich...

Krisis schrieb:
Das Data-Uri für den Hintergrund im search-header habe ich schon einmal versucht, in der entsprechenden Template-Datei einzubinden. Das hat damals leider nicht funktioniert. Ich meine mich zu erinnern, dass der Button mit der Lupe dann runtergerutscht ist und ich das über margin, padding und float nicht in den Griff bekommen habe. Das war wirklich sehr nervig. Stellt sich die Frage ob so ein Data-Uri in dem Bereich besser ist als ein weiterer http request.

Dann hast Du es, tut mir Leid, falsch gemacht.
Meine Methode würde keinen weiteren Request bedeuten. Das Bild der Lupe wird zu den Sprites hinzugefügt, die ohnehin geladen werden. Die Positionierung wird kein Problem, weil wir daran gar nichts weiter machen.
[html]<input type="submit" style="width:30px;height:30px; <br />background-image:url(lupe.gif);border:none;
cursor:pointer" value="" />[/html]
So würde die Schaltfläche exakt gleich aussehen. Wenn man dann lupe.gif zu den Sprites hinzufügt und das Hintergrundbild in der CSS-Datei entsprechend notiert und positioniert, gibt es keinen zusätzlichen Request und die Sprite-Datei wächst zwar an, bleibt aber kleiner als unsere Einsparung im HTML-Code. Wie weit die CSS-Datei könnte man noch berücksichtigen, insgesamt ist es aber die schönere und sauberere Variante.


Bzgl. der Inline-Styles ist vieles anscheinend wirklich schwer zu bearbeiten... Da müsste man im Template ein paar größere Umstellungen vornehmen. Erst einmal ermitteln, woher die Größenangaben kommen und dann vielleicht für jede mögliche Angabe eine Klasse erstellen... Ich weiß nicht, ob das hier den Rahmen sprengt, langsam wird es wirklich schwierig, zwischen Seite, Quelltext, CSS-Datei und Beitrag hin- und herzuspringen.

Absatz

Wozu dient an dieser Stelle der span? Warum kann der p nicht gleich die line-height-Klasse bekommen?

Ich habe bis jetzt strings mit style=" gefunden, die relevant sein könnten. Sind es die richtigen Stellen?
Ist ein Umbau weg vom Spaghetti Code möglich?

Ja, das sind Stellen, die ich meinte.

Ich will das beispielhaft mal an einem Code erklären.

category_row.php
$list_box_contents[$row][$col] =
array(\'params\' => \'class="categoryListBoxContents"\'
. \' \' . \'style="width:\' . $col_width . \'%;"\',

$col_width ist die Variable, die die Spaltenbreite enthält. Die wird anscheinend irgendwo vorher in der Datei berechnet.
Wenn man jetzt schaut, welche Werte $col_width haben kann, könnte man das Skript umbauen. Mal angenommen, du würdest auf der gesamten Seite nur zwei Spalten verwenden, dann wäre $col_width wahrscheinlich stets 50.
Verwendest Du mal zwei, mal drei und mal vier Spalten, wird $col_width 50, 33 und 25 sein.
Statt also die style-Angabe anzuhängen, könnte man es wie folgt machen:
[css]/* Ergänzung der CSS-Datei */
.col50{width:50%}
.col33{width:33%}
.col25{width:25%}[/css]
/* Anpassung der PHP-Datei */
$list_box_contents[$row][$col] =
array(\'params\' => \'class="categoryListBoxContents col\'.$col_width.\'"\',
Das führt dazu, dass die style-Angabe wegfällt und die class-Angabe eine weitere Klasse erhält, die die Spaltenbreite vorgibt.

Ich hoffe, das ist verständlich.

Hallo!

Ich versuche es so übersichtlich zu machen wie ich nur kann.

Klassen in span und p tags ERLEDIGT :thumbup:
Die Klasse im p-Tag funktioniert gut. Habe weder Validierungsfehler noch steigenden inline-style verzeichnet. Ich hatte es damals als guten Kompromiss so gelassen, weil viele andere Lösungen entweder html Fehler oder steigenden inline-style zu Folge hatten.

PS: das html/text ratio ist mittlerweile bei 19%

CSS-Sprite in der Kopfzeile IN ARBEIT

[html4strict]<input type="submit" style="width:30px;height:30px; <br />background-image:url(lupe.gif);border:none;
cursor:pointer" value="" />[/html4strict]

Wenn man dann lupe.gif zu den Sprites hinzufügt und das Hintergrundbild in der CSS-Datei entsprechend notiert und positioniert [...]

Ich werde das heute Abend noch einmal versuchen.
Zur Ergänzung hier noch der Eintrag in der tpl_search_header.php

$content .= \'

<input class="button-search-header" type="image" src="data:image/gif;base64,"[...]" value="Serch" />\' /*. zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON)*/;

und css

[css].search-header-input{
background-color: #fff;
margin:0 0 0 68px;
height:30px;
padding:3px 3px 0 5px;
float:left;
}[/css]

Vermeidung von inline-style bei Spalten IN ARBEIT
/* Anpassung der PHP-Datei */
$list_box_contents[$row][$col] =
array(\'params\' => \'class="categoryListBoxContents col\'.$col_width.\'"\',

PS: fehlt hinter "categoryListBoxContents nicht noch ein " :question:

Krisis schrieb:
Klassen in span und p tags ERLEDIGT :thumbup:

Soweit ich das sehe, treten die Klassen "text-align" und "line-height" immer zusammen auf. Dann kann man sie auch vereinen. Bitte vorher kurz durchschauen, ob du sie nicht doch irgendwo einzeln verwendest.

Krisis schrieb:
PS: das html/text ratio ist mittlerweile bei 19%

Da geht noch mehr.

Krisis schrieb:
CSS-Sprite in der Kopfzeile IN ARBEIT

Weißt Du, wie das geht und gemeint ist, was ein Sprite ist?

[html4strict]<input type="submit" style="width:30px;height:30px; <br />background-image:url(lupe.gif);border:none;
cursor:pointer" value="" />[/html4strict]

Wenn man dann lupe.gif zu den Sprites hinzufügt und das Hintergrundbild in der CSS-Datei entsprechend notiert und positioniert [...]

Das ist der interessante Teil. Den type zu "submit" ändern, "src" kommt ganz raus und die CSS-Datei beinhaltet dann die Anweisungen, die ich vorhin geschrieben habe. "lupe.gif" muss dann nur noch durch das Sprite ersetzt und entsprechend ausgerichtet werden.
Wenn man das einmal verinnerlicht hat, ist es simpel.

Die von Dir zitierten CSS-Anweisungen gehören aber nicht zu diesem Input. Der hat gar keine, die Klasse button-search-header wird nicht verwendet und das von Dir geschrieben CSS bezieht sich auf den DIV drumherum.

Krisis schrieb:
/* Anpassung der PHP-Datei */
$list_box_contents[$row][$col] =
array(\'params\' => \'class="categoryListBoxContents col\'.$col_width.\'"\',

PS: fehlt hinter "categoryListBoxContents nicht noch ein " :question:

Nein, fehlt nicht, das steht hinter $col_width.\'
Kennst Du Dich mit PHP aus?

Die Ausgabe wird dann beispielsweise: class="categoryListBoxContents col50"

Noch eine Anmerkung: statt kannst Du im Text gelegentlich verwenden. Das ist aus SEO-Sicht besser, z.B. um Suchbegriffe wie "Vespa Ersatzteile".

Ich habe wieder ein eingebaut.

Die neuen CSS-Sprites sind alle hochgeladen und werden korrekt dargestellt.
Der neue Sprite ist in der stylesheet.css als .lupe definiert.

Wenn ich dich richtig verstanden habe, dann müsste es wie folgt aussehen:
<input class="button-search-header" type="submit" <span class=".lupe"> value="Serch" />

Ich kenne mich mit PHP nicht aus. Ich muss mich zwar immer wieder damit auseinandersetzen und habe auch schon einmal angefangen ein Buch dazu zu lesen. Das hat mich aber nicht weiter gebracht, deswegen habe ich es nicht zu Ende gelesen.

Krisis schrieb:
Wenn ich dich richtig verstanden habe, dann müsste es wie folgt aussehen:
<input class="button-search-header" type="submit" <br /> value="Serch" />

Nein, Du kannst innerhalb eines HTML-Tags keinen zweiten notieren.

[html]<input class="lupe" type="submit" value="" />[/html]
Value bleibt leer, weil sonst ein Text vor dem Bild stünde. Den könnte man mit CSS auch noch unsichtbar machen, aber wenn man ihn nicht braucht...
Probiere bitte nach Abschluss der Arbeiten die Suchfunktion aus, wenn sie nicht mehr funktioniert, braucht das Skript "value" doch.

[css].lupe{background-position:-84px -95px;width:30px;
height:30px;border:none;cursor:pointer}[/css]
(Umbrüche zur besseren Lesbarkeit hinzugefügt)