Templateerstellung: Unterschied zwischen den Versionen

Aktuelle Version vom 6. August 2013, 10:28 Uhr

Templateerstellung für Infosite 6

Für die Erstellung von Eingabetemplates empfielt Sitepark folgende HTML-Struktur, damit sich die Eingabemasken harmonisch in Infosite 6 einfügen:

Allgemeine Container

Überschriften sollten nur aus der ersten bis dritten Kategorie (<h1> bis <h3>) verwendet werden. Eingabeblöcke sind mit einem <div class="editorblock">…</div> zu klammern.
Ein Erläuterungstext kann allgemein in einen Info-Container gepackt werden (<div class="info">…</div>).

Hier ein Musterbeispiel:

<sp:io type="in">
  <h1>Überschrift</h1>
  <div class="info">
    Suspendisse neque nisi, aliquet sed fermentum in, molestie quis sem? Vivamus lobortis fermentum facilisis.
    Nam eget metus egestas, vestibulum risus vitae, sodales augue.
  </div>
  <div class="editorblock">
    <h2>H2 Überschrift</h2>
    <div class="info">
      Beschreiben Sie sie hier mit einer Überschrift und einer kurzen Zusammenfassung (bitte ohne HTML-Code) diese Seite.
      Beachten Sie bitte, dass die Zusammenfassung auch als Teaser beispielsweise in Newslisten verwendet wird.
    </div>
    <strong>Titel</strong><br>
    <spt:text name="sp_title" size="25"/><br>
    <br>
    <strong>Datum</strong><br>
    <spt:date name="sp_date" size="10"/><br>
    <br>
    <strong>Überschrift</strong><br>
    <spt:text name="sp_headline" size="60"/><br>
    <br>
    <strong>Einleitungstext</strong><br>
    <spt:textarea name="sp_intro" cols="58" rows="6"/><br>
  </div>
</sp:io>

Iteratoren

Zur Gestaltung von Iteratoren gibt es mehrere Möglichkeiten (siehe auch spt:iterator):

Möchte man die Standard-Nummerierung durch ein Label ersetzen, benutzt man den Parameter itemtext.
Bei verschachtelten Iteratoren ist es oftmals hilfreich die Iterator-Ebenen unterschiedlich zu kennzeichnen. Hier hilft der Parameter invert weiter. Ursprünglich wurde ein so gekennzeichneter Block dunkler und das Label invertiert (also helle Schrift auf dunklem Grund) dargestellt. Daher der Name des Parameters. Inzwischen steuert dieser Parameter bloß noch eine etwas andere farbliche Darstellung. Kombiniert man beide Parameter, kann man diverse Iterator-Ebenene abbilden, die zugleich übersichtlich bleiben.

Hier ein weiteres Musterbeispiel:

<sp:io type="in">
  <div class="editorblock">
    <h2>Musterbeispiel eines verschachtelten Iterators</h2>
    <spt:iterator name="sp_paragraph_iterate" itemtext="Abschnitt">
      <strong>Textabschnitt</strong><br>
      <spt:tinymce name="sp_text" cols="62" rows="5"/><br>
      <spt:iterator name="sp_chapter_iterate" itemtext="Kapitel" invert="true">
        <strong>Kapiteltext</strong><br>
        <spt:tinymce name="sp_text" cols="60" rows="5"/><br>
        <spt:iterator name="sp_verse_iterate" itemtext="Vers">
          <strong>Versnummer</strong><br>
          <spt:text name="sp_number" size="60"/><br>
          <strong>Verstext</strong><br>
          <spt:textarea name="sp_text" cols="58" rows="5"/><br>
          <strong>Linkliste</strong><br>
          <spt:iterator name="sp_linklist_iterate" invert="true">
            <spt:link name="sp_link" size="59"/>
          </spt:iterator>
        </spt:iterator>
      </spt:iterator>
    </spt:iterator>
  </div>
</sp:io>

Container mit Label

Gestalterisch lässt dich das Design eines Iterators mit seinen Labels nachbauen. Hierfür ist folgender HTML-Code notwendig:

<sp:io type="in">
  <div class="editorblock">
    <h2>Eingabeblock ohne Iterator</h2>
    Es beginnt mit einem div class="fieldset" ...
    <div class="fieldset">
      <div class="legend">Hallo Legende</div>
      <div class="fieldsetbody">
        Suspendisse neque nisi, aliquet sed fermentum in, molestie quis sem? Vivamus lobortis fermentum facilisis.
        Nam eget metus egestas, vestibulum risus vitae, sodales augue.
        <p>Suspendisse neque nisi, aliquet sed fermentum in, molestie quis sem?</p><p>Vivamus lobortis fermentum facilisis.</p>
        <p>Nam eget metus egestas, vestibulum risus vitae, sodales augue.</p>
      </div>
    </div>
  </div>
</sp:io>

Innerhalb des schon bekannten editorblock-Containers wird der Bereich mit <div class="fieldset">…</div> eingeleitet. Vergibt man hier noch zusätzlich die Klasse "fieldset-invert", wird der Bereich farblich anders gekennzeichnen (so wie beim Iterator der Parameter invert wirkt). In dem fieldset-Container kann mit dem legend-Container eine Legende als Überschrift positioniert werden. Der dann folgende Bereich wird mit einem Container <div class="fieldsetbody">…</div> geklammert, um Innenabstände zu erzeugen.

Hinweise und Fehler

Soweit der allgemeine Templateaufbau. Neben der Kennzeichnung von Infotexten mit <div class="info">…</div> gibt es noch die Möglichkeit Hinweistexte zu kennzeichnen, welche in der Regel blau erscheinen. Hierfür kann die Klasse notice-text verwendet werden. Entsprechend können auch rot erscheinende Fehlertexte mit der Klasse error-text erzeugt werden. Felder, die Fehleingaben mit einem roten Rahmen signalisieren, können in den Container error-field gepackt werden.

Auch hierzu ein weiteres Beispiel:

<sp:io type="in">
  <div class="editorblock">
    .....
    Auswahl für internen Link<br>
    <span class="notice-text">(bitte wählen Sie für eine ordnungsgemäße Ausgabe nur Seiten mit vollständigem Inhalt aus)</span><br>
    <spt:link name="sp_link" type="link" size="80" pools="${tmp_informationpools}" disabled="true"/><br>
    <sp:condition><sp:if condition="isNull(${sp_url.url.toString}) || ${sp_url.url.toString.matches('https?://.*')}">
      URL der zu verknüpfenden Seite (<em>mit "http://" beginnen</em>)<br>
      <spt:text name="sp_url" type="url" size="80"/><br>
    </sp:if><sp:else>
      URL der zu verknüpfenden Seite <span class="error-text">(mit "http://" beginnen)</span><br>
      <span class="error-field"><spt:text name="sp_url" type="url" size="80"/></span><br>
    </sp:else></sp:condition>
    .....
  </div>
</sp:io>

Radio-Buttons und Checkboxen

Für eine bessere Positionierung von Checkboxen und Radio-Buttons zum dann folgenden Text empfielt Sitepark den Formularfeldern Klassennamen mitzugeben: "radio" für Radio-Buttons und "checkbox" für Checkboxen.

<sp:io type="in">
  <div class="editorblock">
    .....
    <strong>Listentyp</strong><br>
    <sp:radio name="sp_type" value="1" class="radio"/><label for="<sp:print name="system.tag"/>">Manuelle Liste</label><br>
    <sp:radio name="sp_type" value="2" class="radio"/><label for="<sp:print name="system.tag"/>">Suchergebnis als Liste</label><br>
    .....
    <strong>Zielfenster</strong><br>
    <sp:checkbox name="sp_linkNewWindow" value="true" class="checkbox"/><label for="<sp:print name="system.tag"/>">Link öffnet in neuem Fenster</label><br>
  </div>
</sp:io>