Das HTML-Konstrukt, das via Kivitendo an den Webbrowser ausgegeben wird, ist durchdacht und generell in Ordnung. Es hat aber doch ein paar leichte Umpässlichkeiten, die das Arbeiten des CSS-Designers und -Entwicklers leicht beeinträchtigen. Nachfolgend ein paar Vorschläge für leichte, kosmetische Anpassungen, die schnell ausdurchgeführt werden können.
Ziel sollte sein, dass so wenig wie möglich Warnhinweise und keine Fehlermeldungen in HTMLtidy auftreten.
Die Suche nach Ungereimtheiten des Kivitendo-HTMLs ist mit der HTML-Tidy-Implementation in JEdit vorgenommen worden.
Autor: Hans P. Schläpfer
Header 1 ist sozusagen der Dokumenten-Titel. Alle nachfolgenden Titel sind Untergruppen oder Kapitel des Dokuments. Es sollten auch keine Klassen wie H1.Sub verwendet werden. Verwenden Sie H2 bis H6 oder Caption.
Das ist eine berechtigte Frage. Am besten ist, man verwendet entweder ID oder Name, aber nicht beides zusammen, was in Kivitendo im übrigen vorkommt. Sollten doch beide Attribute im gleichen Objekt verwendet werden, bitte beide mit gleichem Namen oder gleicher ID versehen.
Das alleinstehende kaufmännische Und (&) (Ampersand) könnte in der deutschen Übersetzung nach HTML (&) konvertiert werden (z.B. «Kunden & Lieferanten»).
Die englische Version soll ja nicht angepasst bzw. angerührt werden.
Datei: local/de/all
Falls dieses leere Attribut «target=""» doch benötigt wird, Standard-Inhalt __«_self»__ setzen.
Dieser «Container» wird anscheinend für die Aufklapp-Schaltfläche benötigt. Bitte diese Tags auch schliessen:
</div><span></div>
ersetzen durch
</div><span></span></div>
Das ergibt in der Browserdarstellung keinen Fehler, aber HTML-Kontrolltools geben einen Warnhinweis aus. Zudem formatieren Code-Beautifier/-Formatter einen wesentlichen Teil des Restcodes nicht mehr wie gewünscht.
Hier herrscht erstaunlicherweise keine konsequente und durchgehende Anwendung von Klassen und IDs bei Steuer- und Daten-Bereichen vor. Doch um die Selektoren gezielt und effizient ansprechen und das Design umsetzen zu können, sollten einheitliche Container mit eindeutigen Bezeichnungen (Klassen) oder IDs versehen sein. Hier ein Vorschlag, von unten nach oben sortiert:
Die WIDTH- und HEIGHT-Werte der Grafik «image/cross.png» sind nicht ganz korrekt.
Anstelle von «10px» müsste «10» (Zahl ohne Masseinheit) eingesetzt werden.
Da diese Grafik selbst bereits über diese Abmessungen verfügt, kann auf die WIDTH- und HEIGHT-Attribute gänzlich verzichtet werden.
Tabellen sollten nicht in einen Absatz (P) eingeschlossen sein. Als Alternative DIV-Tag verwenden oder ganz weglassen, da die Tabelle direkt mit CSS über das Element #edit_longdescription_dialog formatiert werden kann. Zudem könnte die Tabelle mit einer oder mehreren Klassen versehen sein.
<div id="edit_longdescription_dialog" style="display: none">
<p><!-- ENTFERNEN -->
<table>
<tr>
<th align="right">Zeile:</th>
<td id="popup_edit_longdescription_runningnumber"></td>
</tr>
<tr>
<th align="right">Artikelnummer:</th>
<td id="popup_edit_longdescription_partnumber"></td>
</tr>
...
</table>
</p><!-- ENTFERNEN -->
...Table-Rows (TR) sollten TD- oder TH-Zellen enthalten und nicht leer sein.
...
<th>Lieferadresse</th>
</tr>
<tr height="5"></tr><!-- ENTFERNEN und Abstand/Titelzeilenhoehe via CSS festlegen -->
<tr>
<th align="right" nowrap>Kundennummer</th>
...Falls diese leere Zeile als Abstandhalter benutzt wird, besteht die Moeglichkeit, den Tabellenkopf <tr class="listheading"><th>Rechnungsadresse</th></th>Lieferadresse<th></tr>
via CSS zu vergrössern: .listheading { padding: 0.8em 0.2em ; }
Schön wäre, wenn bei leerem Array folgende Code-Zeilen nicht ausgegeben würden:
<table class='row2-cvars-table'>
<tr>
</tr>
</table>Scripte sollten ausserhalb von TABLE-Containern stehen oder nur innerhalb von TD- oder TH-Containern.
</tr>
<script type='text/javascript'>
$('#is_set_to_paid_missing').click(function(){ $('input[name^="paid_"]:last').val('616.00') });
</script>
</table>Font-Statements mit roter Schriftfarbe etc. durch SPAN-Tag mit Klasse ersetzen:
<b>Auf Lager</b> <font >0.00 Stck</font>
ersetzen durch:
<b>Auf Lager</b> <span class="attention">0.00 Stck</span>
Somit könnte auch der Zeilenhintergrund eingefärbt werden, was eine flexiblere Formatierung und Hervorhebung ermöglicht.
In der zweispaltigen Tabelle mit den Auftragsdaten (Kunde, Kredit, Konti etc.), die aus Bezeichnung (TH) und Feld-Inhalt (TD) besteht, sind teilweise in den Tabellen-Daten (TD) falsche COLSPAN-Anweisungen gesetzt (colspan="3"). Diese sind unnötig oder sollten anders gesetzt werden, falls diese andernorts notwendig sind.
Das FORM-Element weist unterschiedliche ID- und NAME-Attribute auf. Beide sollten identisch sein.
INPUT-Element Rechnungsdatum weist zweimal den ONCHANGE-Event aus. Liste Rechnungen mit falschen Attribut-Werten
In den Zellen ist das Attribut VALIGN mit dem falschen Wert «center» versehen. Korrekt wäre «middle».
Innerhalb der Seite, vor allem bei den Preisinformationen, werden flash_messages mit den gleichen IDs generiert. IDs innerhalb der Seite sollten eindeutig sein. Für die Flash_Messages muss ggf. eine andere Lösung in Betracht gezogen werden. Diese sollten einmalig am Schluss der Seite angelegt werden, von wo man sie dann in den entsprechenden Containern plazieren kann.
Siehe vorherige Position.
Diese sollten gesetzt sein, auch wenn die Tabelle ggf. nicht angezeigt wird.
Diese Unschönheit könnte entfernt werden.
H1-Überschriften kommen mehrmals in Preisinformationen und Preisregeln vor. H1 sollte nur einmal pro Seite vorkommen, und dieser ist schon reserviert. Verwenden Sie bitte H2 oder H3.
Diese Abschlüsse («.../>») sind nur in XHTML nötig, in HTML 4 und 5 nicht. Keine dringende Angelegenheit aber leicht unschön.
Die <option>-Elemente sind nicht abgeschlossen. Dies ist zwar kein schwerwiegender Fehler, erzeugt aber in den Kontroll-Tools Warnhinweise. Zudem formatieren Code-Beautifier/-Formatter u.U. einen wesentlichen Teil des Restcodes nicht mehr wie gewünscht.
Hier kann von keiner Klasse gesprochen werden: <fieldset class="DEPENDS ON charttype BEING A">
Es hat hier in LABEL-Tags eingekapselte Feldbeschriftungen ohne Funktion, die zudem noch in eigens dafür angelegten Tabellenzellen gesetzt sind. Diese Label sind unnoetig.