XTC meets REDAXO meets YAML

[rkemmere]

Hallo Community,

nach langer Projektzeit möchten wir Euch ein weiteres Projekt vorstellen.
Leinekugel - ein Uhren und Schmuck Geschäft welches seinen Kunden einen Mehrwert im Internet bieten möchte.

[ externes Bild ]

Das Design und die komplette Umsetzung ist von uns.
Es kommen bei diesem Projekt drei Open Source-Lösungen zum Einsatz.

XT-Commerce für den Shopbereich, Redaxo als CMS für den kompletten Inhaltsbereich und YAML als CSS Framework.

Mit der XTC-REX Bridge ist es möglich seine Session über beide Systeme zu behalten und die Contentboxen aus dem Shop im Redaxo Bereich dynamisch anzuzeigen. Die Inhalte im Shop (Impressum, Kontakt, AGB, etc.) sind über Redaxo eingebunden.

CSS Framework
YAML - Yet Another Multicolumn Layout Version 1.6.0

Shop Version
XTC 3.0.4SP2.1

Shop Module
Sehr viele, wer eine genaue Auflistung haben möchte bitte PN.

CMS Version
REDAXO 4.1

CMS Module
Contentblock inkl. Bild
Galerie mit JQuery Lightbox
do Form!

Addons
URL Rewrite
JQuery Lightbox
Markitup

Besonderheiten:
XHTML Valider Code
Der Core von Shop und CMS ist für Suchmaschinen optimiert


Webseite: Leinekugel Uhren und Schmuck Gross Gerau

Ein besonderer Dank geht an Paul von pcwehle.de der uns eine Version der Bridge zur Verfügung stellte welche wir als Grundlage für die Weiterentwicklung nutzen konnten.

Viele Grüße
Ronny

[Xong]

Die Seite gefällt mir vom Design her sehr gut. Sie trifft wirklich genau meinen Geschmack.

Aber solch eine Div-Suppe habe ich schon lange nicht mehr gesehen. Ihr verwendet auf der Startseite wahnwitzige 66 Div-Elemente.

Ich greife einfach mal ein paar Negativbeispiele heraus:

• Code: Alles auswählen

  <div id="box_search">
    <div class="boxSearchBody">
      <form />
    </div>
  </div>

• Code: Alles auswählen

  <div id="nav">
    <a id="navigation" name="navigation"></a>
    <div id="nav_main">
      <ul />
      <div class="cart">
        <div class="boxInfoRS" id="box_cart">
          <p />
        </div>
      </div>
    </div>
  </div>

• Code: Alles auswählen

  <div class="boxInfoLS" id="box_content">
    <div class="boxInfoBodyLS">
      <ul />
    </div>
  </div>

Wozu das Alles?

Wenn ich die gesamte Div-Suppe ausblende, bleibt von Bildern mal abgesehen nur folgender Inhalt:

Code: Alles auswählen

Erweiterte Suche
Kundenlogin
Ihr Warenkorb

Shop
Informationen
Unser Ladengeschäft
Uhrmacherwerkstatt

Sie haben noch keinen Artikel im Warenkorb

Wegweiser: ›› Shop

Anhänger Charm Silber mit imit. handgearbeiteter Perle weiss
29,00 EUR

Kleeblatt Charm Silber poliert - 0050-001-12
19,00 EUR

Anhänger Schmetterling Silber mit Syn. Zirkonia
279,00 EUR

Anhänger Silber VW Bus syn. Zirkonia mehrfarbig-T0142-041-7
179,00 EUR

Unser Sortiment

Sabo Charm AnhängerSabo Charm ArmbänderSabo Charm KettenSabo Charm OhrringeSabo Charm TrägerThomas Sabo - SterlingFESTINA UhrenGutscheine

E-Mail Adresse:
Passwort:

Passwort vergessen?

Erweiterte SucheLiefer- und VersandkostenPrivatsphäre und DatenschutzUnsere AGBKontaktImpressum

 

Alle hier genannten Preise verstehen sich inkl. der gesetzlich festgelegten MwSt und zzgl. Versandkosten. Alle Markennamen, Warenzeichen sowie sämtliche Produktbilder sind Eigentum Ihrer rechtmäßigen Eigentümer und dienen hier nur der Beschreibung.

Copyright © 2009 Leinekugel Uhren & Schmuck GmbH | Design, CSS-Template & Programmierung by designworks | YAML | REDAXO

eCommerce Engine © xt:Commerce

Nicht gerade viel, womit eine Suchmaschine etwas anfangen könnte. Zumal außer ein paar h1-Überschriften (Suchmaschinenoptimierung sieht anders aus...) und Listen nichts übrig bleibt. Die Semantik wurde nahezu vollständig außer Acht gelassen. Moderner HTML-Code ist das nicht.
Sollte dieser Code von YAML so vorgegeben sein, kann ich nur empfehlen YAML nicht mehr zu benutzen.

Wo sehe ich eigentlich, dass es sich bei der Webseite um den Auftritt eines Juweliergeschäfts handelt? Das habe ich erst erfahren, als ich auf der Seite von designworks davon gelesen habe.

Ich weiß, dass diese Kritik sehr hart erscheint und ich weiß auch, dass Div-Elemente manchmal nötig sein können. Allerdings nie in diesem Ausmaß.

LG,
Xong

PS: Mir ist natürlich klar, dass diese Kritik so gut wie keine Auswirkungen haben kann, weil es wohl zu spät für eine Umstellung auf korrektes Markup ist. Allerdings hilft sie anderen vielleicht bei späteren Projekten.

[psiramo]

Besonderheiten:
[...]XHTML Valider Code[...]

nope, der code ist nicht valide. was wenig erstaunt. von semantik weit und breit keine spur, da verliert man schon mal den überblick.

verzeihe meine klaren worte:
auch optisch bietet die seite nichts ausgewöhnliches. selbst das - schöne - bild auf der startseite wirkt deplaziert, die ganze seite - wie der code - eher zusammengewürfelt. bezug zum thema juwelier kann ich keinen erkennen. das design könnte man 1:1 für einen computerladen oder einen waschsalon verwenden.

technisch mag die umsetzung der seite sehr anspruchsvoll gewesen sein, jetzt ginge es ums code-seitige abschlanken und darum, sie optisch einzigartig zu machen, einen wiedererkennungswert zu schaffen.

@Xong

Wenn ich die gesamte Div-Suppe ausblende [...]
[...] Nicht gerade viel, womit eine Suchmaschine etwas anfangen könnte [...]

gut, semantik ist für gute platzierung bei google schon sehr wichtig, aber seit wann stören sich die bots an <div>s?

[Xong]

@Xong

Wenn ich die gesamte Div-Suppe ausblende [...]
[...] Nicht gerade viel, womit eine Suchmaschine etwas anfangen könnte [...]

gut, semantik ist für gute platzierung bei google schon sehr wichtig, aber seit wann stören sich die bots an <div>s?

Es stört sie nicht. Aber Div-Elemente haben für die Suchmaschinen auch keine Bedeutung, werden also auch nicht mit einer besonderen Gewichtung (wie es z. B. beim Titel der Seite oder Überschriften der Fall ist) versehen.

[psiramo]

ah, so war das gemeint.
da habe ich dich missverstanden.

[rkemmere]

Hallo zusammen,

um mal die einzelnen Kritikpunkte aufzugreifen:

"Div-Suppe"

Hier wurde das YAML XHTML Framework verwendet und nur im CSS Design und die Ausgabe der Kategorieliste angepasst. Der Shop selbst bringt schon eine Template engine mit DIV Gerüst mit. Nahezu jeder Shop mit XTC wird dir die Boxen etc. so anzeigen. Einzige Alternative wäre ein anderer Shop der weniger DIV-Suppe erzeugt oder eben den Shop selbst zu schreiben.
Ich kann auch nicht so ganz verstehen warum div's schädlich sein sollen.


*Juweliergeschäft*

Wer hat überhaupt davon gesprochen das es ein "Juweliergeschäft" ist? Klar es ist ein Geschäft was Uhren verkauft. Der Kunde will den neuen Namen Trendshop etablieren. Daher handelt sich hier um einen "Trendshop" für Uhren und Schmuck.


"XHTML Valider Code"

Gegen den W3C Validator wird sauber validiert. Wenn Valider HTML Code was anderes ist, klärt mich auf.


"auch optisch bietet die seite nichts ausgewöhnliches"

Da der Kunde das Design so gewünscht, die 20 Betatester das Design passend und Professionell fanden und Geschmäcker verschieden sind werde ich dazu keinen Kommentar geben.


Gruß
Ronny

[Cheffchen]

Hallo,

Optik, jeden des Seine und Schluss.

Bei dem Shop pro Artikel kommen aber noch Bilder?!

Im Shop ist mir negativ aufgefallen das wenn man eine Produktübersicht sieht und jetzt ein Artikel sich genauer anschauen möchte das zwar ein hover effekt kommt wenn man auf bzw neben Bild ist aber der Link nur dann funktioniert wenn man 100% auf dem Bild ist.

[ externes Bild ]

Cheffchen

[psiramo]

Der Kunde will den neuen Namen Trendshop etablieren.

dafür wird mit dem begriff aber sehr sparsam umgegangen ;^)

Gegen den W3C Validator wird sauber validiert.

leider nein.

Da der Kunde das Design so gewünscht, die 20 Betatester das Design passend und Professionell fanden und Geschmäcker verschieden sind werde ich dazu keinen Kommentar geben.

die kundenwünsche...
professionell sieht sie wirklich aus. der rest ist, wie du selbst sagst, geschmackssache.

[Xong]

Der Shop selbst bringt schon eine Template engine mit DIV Gerüst mit. Nahezu jeder Shop mit XTC wird dir die Boxen etc. so anzeigen.

Man kann XTC nicht anpassen? Ich kann dir dazu keine Tipps geben, weil ich es selbst nie verwenden musste. Aber irgendwie müssen das Design und die Struktur anpassbar sein.
Gerade auf der Webseite gefunden: Komplettes Layout über HTML Templates zb mit Dreamwaever etc editierbar

Ich kann auch nicht so ganz verstehen warum div's schädlich sein sollen.

Sie machen den Code bei falscher Verwendung unübersichtlich und schwer wartbar. Außerdem sind es bedeutungsleere Elemente. Eine exzessive Nutzung läuft dem Prinzip der HyperText Markup Language vollkommen zuwider.

Wer hat überhaupt davon gesprochen das es ein "Juweliergeschäft" ist? Klar es ist ein Geschäft was Uhren verkauft. Der Kunde will den neuen Namen Trendshop etablieren. Daher handelt sich hier um einen "Trendshop" für Uhren und Schmuck.

Trendshop ist kein Begriff, der für mich persönlich eine Bedeutung hätte. Aber wenn der Kunde der Meinung ist, dass er ausschließlich unter diesem Begriff gefunden werden will...

Gegen den W3C Validator wird sauber validiert.

Das würde mich wundern. Javascripte sollten in XHTML-Dokumenten als CDATA gekennzeichnet werden und nicht mit (übrigens völlig überflüssigen) HTML-Kommentaren.
Desweiteren solltest du den PHP-Parameter arg_separator.output überprüfen. Er ist u. a. für den invaliden Code verantwortlich.

Wenn Valider HTML Code was anderes ist, klärt mich auf.

Validität ist eine Grundvoraussetzung für guten Code. Aber valider Code ist nicht zwangsläufig richtiger Code.
Ich kann im Deutschen auch sagen: Der Hund fliegt tief über das Substantiv.
Du wirst mir zustimmen, dass dieser Satz grammatikalisch völlig valide ist, aber absolut keinen Sinn enthält.

[rkemmere]

Der Kunde will den neuen Namen Trendshop etablieren.

dafür wird mit dem begriff aber sehr sparsam umgegangen ;^)

Gegen den W3C Validator wird sauber validiert.

leider nein.

Da der Kunde das Design so gewünscht, die 20 Betatester das Design passend und Professionell fanden und Geschmäcker verschieden sind werde ich dazu keinen Kommentar geben.

die kundenwünsche...
professionell sieht sie wirklich aus. der rest ist, wie du selbst sagst, geschmackssache.

Trendshop will er ja auch nicht verkaufen sonder Sabo Sachen und ich glaube die sind für den ersten Wurf um erstmal ein Gefüll für die Google Position zu bekommen gut verwendet.

Bzgl. W3C Validator: Das liegt daran das der Validator irgendwie die XTCsid bekommt. Was normal nicht der Fall sein sollte, da die Session in der DB gehalten wird. Wenn man den Sourcecode per Hand in der Validator kopiert dann klappt es. Dennoch kann ich mal schauen warum vor dem XTCsid das &amp fehlt.

[Xong]

Bzgl. W3C Validator: Das liegt daran das der Validator irgendwie die XTCsid bekommt. Was normal nicht der Fall sein sollte, da die Session in der DB gehalten wird. Wenn man den Sourcecode per Hand in der Validator kopiert dann klappt es. Dennoch kann ich mal schauen warum vor dem XTCsid das &amp fehlt.

Wie gesagt:

Desweiteren solltest du den PHP-Parameter arg_separator.output überprüfen. Er ist u. a. für den invaliden Code verantwortlich.

[rkemmere]

Der Shop selbst bringt schon eine Template engine mit DIV Gerüst mit. Nahezu jeder Shop mit XTC wird dir die Boxen etc. so anzeigen.

Man kann XTC nicht anpassen? Ich kann dir dazu keine Tipps geben, weil ich es selbst nie verwenden musste. Aber irgendwie müssen das Design und die Struktur anpassbar sein.
Gerade auf der Webseite gefunden: Komplettes Layout über HTML Templates zb mit Dreamwaever etc editierbar

Ich kann auch nicht so ganz verstehen warum div's schädlich sein sollen.

Sie machen den Code bei falscher Verwendung unübersichtlich und schwer wartbar. Außerdem sind es bedeutungsleere Elemente. Eine exzessive Nutzung läuft dem Prinzip der HyperText Markup Language vollkommen zuwider.

Wer hat überhaupt davon gesprochen das es ein "Juweliergeschäft" ist? Klar es ist ein Geschäft was Uhren verkauft. Der Kunde will den neuen Namen Trendshop etablieren. Daher handelt sich hier um einen "Trendshop" für Uhren und Schmuck.

Trendshop ist kein Begriff, der für mich persönlich eine Bedeutung hätte. Aber wenn der Kunde der Meinung ist, dass er ausschließlich unter diesem Begriff gefunden werden will...

Gegen den W3C Validator wird sauber validiert.

Das würde mich wundern. Javascripte sollten in XHTML-Dokumenten als CDATA gekennzeichnet werden und nicht mit (übrigens völlig überflüssigen) HTML-Kommentaren.
Desweiteren solltest du den PHP-Parameter arg_separator.output überprüfen. Er ist u. a. für den invaliden Code verantwortlich.

Wenn Valider HTML Code was anderes ist, klärt mich auf.

Validität ist eine Grundvoraussetzung für guten Code. Aber valider Code ist nicht zwangsläufig richtiger Code.
Ich kann im Deutschen auch sagen: Der Hund fliegt tief über das Substantiv.
Du wirst mir zustimmen, dass dieser Satz grammatikalisch völlig valide ist, aber absolut keinen Sinn enthält.

LG,
Xong

"Man kann XTC nicht anpassen?" Doch doch das geht schon, nur in den Templates hat man geringe Möglichkeiten das zu tun. Diese haben wir genutz. Schade ist eben das der Core einen Haufen nicht validen Code generiert und das alles anzupassen ist bei einem Budget von 5.000 nicht drin. Man müsste den kompletten Core anpassen, was bei einem Update dann direkt hinfällig wird. Leider bietet der Shop keine wirklich saubere Trennung zwischen Funktion und Output und bei 4.000 Dateien ist das in dem Budget auch nicht drin gewesen.

"Wartbar" ist das eh nicht so einfach.

Geht eben nicht in einem File zu warten das ganze. Ein Template schon gar nicht. üner 250 Includes die das Template zusammen bauen. Dazu nochmal php Dateien wo ebenfalls Code erzeugt wird.


[ externes Bild ]
[ externes Bild ]

W3C Kommentar siehe oben:

[ externes Bild ]

Ich hab mir mal den Artikel rausgesucht über Semantischer Code der hier gepostet wurde ...

Gruß
Ronny

[Koala]

Bzgl. W3C Validator: Das liegt daran das der Validator irgendwie die XTCsid bekommt. Was normal nicht der Fall sein sollte, da die Session in der DB gehalten wird.

Das ist doch völlig egal ob die Session in der DB oder in einer Datei steht. Das hat nichts mit der Ausgabe der SID zu tun! Schalte bei dir die Annahme der Cookies mal aus. Dann sollte auch in deiner Quellcodeausgabe die SID mit drin sein.

Wenn man den Sourcecode per Hand in der Validator kopiert dann klappt es. Dennoch kann ich mal schauen warum vor dem XTCsid das &amp fehlt.

Da ist etwas anderes faul.

Code: Alles auswählen

BUYproducts_id=10861&&XTCsid

Entweder ist nach nach der BUYproducts_id das & zu viel oder vor dem XTCsid das &.

[raybeam]

Hallo zusammen,

Sollte dieser Code von YAML so vorgegeben sein, kann ich nur empfehlen YAML nicht mehr zu benutzen.

Sollte jemanden das YAML-Markup interessieren:

http://www.yaml.de/fileadmin/yaml/markup_draft.html

Die Sicht auf den Quelltext zeigt es. Man kann YAML durchaus benutzen

Gruß

Peter

[Mediastuttgart]

Die Sicht auf den Quelltext zeigt es. Man kann YAML durchaus benutzen

aber sowas kann man besser strukturieren

Code: Alles auswählen

<div class="page_margins">
  <div class="page">
    <div id="header">
      <div id="topnav">
        ...

finde das ganze irgendwie zu verschachtelt.

lg
michael

[raybeam]

Hallo Michael,
das dürfte der Idee geschuldet sein, YAML möglichst universell einsetzbar zu machen und auf vielen Webbrowsern (darunter auch der problematische IE) ein nahezu identisches Layout zu ermöglichen.

Benötigst Du, um bei deinem Besipiel zu bleiben, keinen Header-Bereich, lässt Du ihn halt weg.

Ein Blick in die umfangreiche YAML-Beschreibung erklärt da so einiges.

Zugegeben ist YAML nicht unbedingt ein Framework mit dem man sich überhaupt nicht beschäftigen muss, um es einzusetzen.

Und unterm Strich bleibt letztlich: Man muss es ja nicht nutzen

Gruß

Peter

[TInKim]

Hier wird ja richtig auf einer erstklassigen Referenz rumgestampft. Ich finde die Website super.

Und auch die <div>-Suppe stört mich nicht. Bißchen wenig SEO-Informationen sind es allerdings wirklich. Auch die Artikelseiten geben sehr wenig her. Da wird m.E. etwas verschenkt. Allerdings ist es ohnehin eine Frage, ob man nennenswerten Google-Traffic bekäme bei der Konkurrenz (alleine schon Amazon...).

Zur Validität: Für mich ist der W3C-Validator das Maß der Dinge. Die ganzen möglichen FF-AddOns liefern ja teilweise unterschiedliche Ergebnisse, so dass ich mich da lieber an den W3C-Validator halte, um zu sagen: Ja, das ist valide.

[Peter.Bickel]

Ich hab ja schon mal meine Klingen mit Xong gekreuzt, da will ich das nochmal tun ...

1.
Ich persönlich bin kein großer Feund von XTCommerce, aber die Entscheidung für ein Shopsystem fällt ja oft aus ganz bestimten Gründen: Weil es ein bestimmtes Warenwirtschaftssystem gibt, das nur mit XTC zusammen arbeitet, dass es begrenztes Budget gibt und der Aufbau mit XTC viel schneller geht als etwa mit Magento; dass der Kunde XTC kennt, was auch immer ...

2.
Ein Template für XTC schreibt man mal nicht eben schnell, das ist oft nicht finazierbar. Das ist eine ganz andere Dimension als ein Template in Redaxo. Man benutzt also gern gute und universelle Basis-Templates, und da ist YAML eines der besten und universellsten. Du kannst im Prinzip jedes Layout damit machen.

3.
Es gibt einige wenige Dinge in YAML, die man nicht mitmachen muss. Zum Beispiel sind die Subtemplates in der Tat tief verschachtelt, die verwende ich auch nicht. Und einen der beiden doppelten Rahmen (page und page_margins) kann man weglassen, wenn man nicht doppelten Rahmen und padding ums Gesamtlayout bracht.
Abgesehen davon ist YAML aber wirklich sehr flexibel und schnell.

Ist das nicht Haarspalterei, ob um eine ul-Liste noch ein div rum ist? Manchmal gibt's Gründe, weil man sowas wirklich braucht. Und wenn man ohne auskommen würde: Was soll's, lässig bleiben ...

Schöne Grüße,
Peter.

[darwin]

Ist das nicht Haarspalterei, ob um eine ul-Liste noch ein div rum ist?

.. absolut zustimm. Macht die Seite auch nicht langsamer ...

grz. Chris

[Thomas.Blum]

Hej,

: aus meiner Anwendersicht
- Design gefällt mir sehr gut
- Schrift in der oberen Navi zu klein und keinen aktiven Status
- Lightbox: Mindestbreite wäre gut, da sonst der Text komisch umbricht
- Klick auf FestinaUhren
--- Unterhalb des Textes würde ich die Subnavi anbieten
--- dachte zuerst da kommt gar nix weiter
--- "Flyer Werbung 2009" kommt gar kein PDF-Download, was ich vermutete
- Das Seitenblättern am Ende der Seite, sollte ein Sprung nach oben machen
- Wo finde ich Uhren von Leinekugel?
- Kontrast des Fliesstextes ist mir zu gering

: wegen DIV Suppe
Ich kann es sehr gut nachvollziehen, warum man hier und da ein Zusatz-DIV benötigt. Gerade wegen unterschiedlicher Interpretation der Browser des Markups ist es manchmal unabdingbar.

Ich schreibe auch meist

Code: Alles auswählen

<div id="cssid">
<div id="cssid2">

</div>
</div>

Damit ist man flexibler. Das Zusatz Div stört mich nicht wirklich.

Was mich ein wenig verwirrt, ist der Einsatz des <h1> Elementes. Das ist nun wirklich nicht gut gelöst.

vg Thomas