Codeschnipsel 52: Weblica-Felder
Weblica-Felder sind ein raffiniertes Konstrukt, das einfach handzuhaben und sehr mächtig in der Anwendung ist.
Weblica Felder dienen der einmaligen Erfassung und Speicherung mehrfach verwendeter Texte oder mehrfach verwendeter HTML-Codeschnipsel. Der Text oder HTML-Code wird einmal in ein Weblica-Feld eingegeben. Das Feld kann dann an beliebigen Orten und beliebig oft verwendet werden. Ein Feld ist also ein Platzhalter für Text oder HTML-Code.
Notation beim Einbetten eines Feldes:
$(feldname)
, $ und die umschliessende Klammer kennzeichnen ein Weblica-Feld.
In der Online-Hilfe wird die
Anwendung von Weblica-Feldern ausführlich beschrieben.
Felder ersparen dem Anwender die wiederholte Eingabe mehrfach vorkommenden Textes oder Codes. Muss ein Text oder Code geändert werden, so braucht nur der Feldinhalt geändert zu werden - und das nur einmal.
Felder können auch verwendet werden, um HTML-Code in einen Textabsatz einzubetten. Dazu wird ein Feld definiert, z. B.
EmailAdresse
, und der HTML-Code, im Beispiel für die Emailadresse, wird als Feldwert eingefügt. Überall dort im Text, wo die Emailadresse erscheinen soll, wird das Feld in der Form
$(feldname)
, im Beispiel also
$(EmailAdresse)
eingefügt.
Vorstellung einiger Anwendungsbeispiele für Felder:
Weblica-Feld für das Einfügen von Seitenelementen in allen Seiten
In der BaBox wurde die Anforderung, auf
allen Seiten bestimmte Seitenelemente einzufügen, mit einem Weblica-Feld gelöst. Beispiele für solche Seitenelemente:
- das "author" Meta-Element
- Meta-Tags für die Site-Verifikation für verschiedene WMTs und Web-Tools
- das Einbinden des Standard-Javascripts der BaBox
- der Absatz (Paragraph) mit dem schwebenden nach-oben-Button mit Effekt
- die Infobox im Kopfbereich, die den Seitenbesucher auf abgeschaltetes Javascript hinweist.
Das Weblica-Feld enthält den für diese Elemente nötigen Code. Das Feld (genau gesagt: der Feldname) wird auf der Startseite in den Seiteneigenschaften in der Rubrik HTML/CSS, Eingabefenster HTML-Head eingegeben.
In allen untergeordneten Seiten ist in den Seiteneigenschaften in der Rubrik HTML/CSS die Checkbox "Inhalt von übergeordneter Seite übernehmen" aktiviert.
Will man auf einer untergeordneten Seite den Code von der übergeordneten Seite nicht übernehmen, so wählt man die Übernahme ab und fügt nur wieder das Weblicafeld ein. (Dieses Vorgehen wurde in dieser Website auf mehreren Unterseiten angewandt).
Vorteile dieses Weblica-Feldes:
- der Code für diese Seitenelemente steht an einem Ort
- Code-Erweiterungen und Änderungen nur an einem Ort
- das erneute Einfügen des Codes mittels des Feldes ist bei Abwahl der Code-Vererbung sehr einfach.
zurück | nach oben
Weblica-Feld für das Einbetten eines Bildes
Feldname: nach Wahl. Feldinhalt:
<img src="$(res.134.HinweisNeu_png.path)" width="30" height="14" border="0" alt="Hinweis: neuer Beitrag in BaBox" title="Hinweis: neuer Beitrag in BaBox" />
Pfad (Ressourcenfeld) des
Bilds und
Bild-Masse anpassen
Beispiel:
Das Feld kann im Fliessstext, in Überschriften oder auch in der Navigation verwendet werden.
zurück | nach oben
Weblica-Felder für die Formatierung einer Absatzüberschrift
Die Aufgabe war, die Überschrift eines bestimmten Textabsatzes anders zu formatieren. Diese Aufgabe lässt sich mit Feldern elegant lösen:
Man definiert zwei Weblica-Felder: eines mit den Formatierungsvorgaben, und ein zweites mit der Aufhebung der Formatierungsvorgaben.
Dann fügt man die Felder zu Beginn und am Ende der Absatzüberschrift ein.
zurück | nach oben
Weblica-Felder für die Inline-Text-Formatierung
Weblica-Felder für Inline-Elemente (phrase elements) zur Textauszeichnung
Weblicafelder sind das ideale Instrument, um Inline-Elemente zur Textauszeichnung (siehe
W3C phrase elements) zu nutzen. Dieses Vorgehen wird auch in der BaBox angewandt.
Beispiel für
<code>
für die Auszeichnung eines Stücks Codes:
Feldnamen:
$(code)
und
$(codeClose)
Inhalte:
<code style="color:black;">
</code>
Beispiel für
<em> (emphasise = Hervorhebung):
Feldnamen:
$(em)
und
$(emClose)
Inhalte:
<em>
</em>
Wem die Default-Hervorhebung von
<em>
nicht gefällt, der kann sie mit einer Stilvorgabe (wie oben bei
code
) anpassen; siehe dazu auch
Text im Fliesstext mit Rahmen und Hintergrundfarbe versehen.
zurück | nach oben
Weblica-Felder für farbigen Hintergrund von Listenelementen
Funktioniert gleich wie oben beschrieben.
Beispiel:
Feld
$(ZZHintergrundGrau)
Inhalt:
<div style="background-color: #E6E6E6;">
Feld
$(ZZHintergrundGrauEnde)
Inhalt:
</div>
Anwendungsbeispiel:
Dreistufige ungeordnete Liste in einem Textabsatz
zurück | nach oben
Weblica-Felder für Farbcodes
Um endlich Ordnung ins Chaos der verschiedenen Grautöne in dieser Website zu bringen, definieren wir Felder, die nur einen hexadezimalen Farbcode enthalten. Z. B. #AFAFAF.
Dann ersetzen wir die hexadezimalen Farbcodes in den HTML- und CSS-Codes durch die Feldnamen.
Wenn wir eine Farbe ändern wollen, müssen wir dies künftig nur noch an einem Ort tun.
Eine unvollständige Liste der hier angewandten Farben findet sich in der
Infrastrukturdokumentation.
Anwendungsbeispiel:
Überschrift h2 und h3 mit grauem Hintergrund, Innenabständen und Schatten (inzwischen sind vier Grautöne in Weblica-Feldern abgelegt und werden nur noch auf diese Art und Weise spezifiziert).
Beispiel:
....
background-color : $(grau1);
border-top: 1px solid $(grau2);
border-bottom: 1px solid $(grau4);
box-shadow: 2px 2px 2px $(grau4);
....
Work in progress ...
zurück | nach oben
Weblica-Felder im Fliesstext
Felder können im Fliesstext eines Absatzes ganz normal eingebettet werden:
Dieser Text enthält ein Feld (
$(HinweisNeu)
), welches ein Ressourcenfeld (Pfad auf Grafikdatei) enthält:
.
Auf diese Weise kann man sich HTML-Absätze sparen.
zurück | nach oben
Weblica-Felder in der WWW-Adresse eines Weblinks
Weblica-Felder lassen sich auch in der WWW-Adresse eines Web-Links einfügen.
Beispiel: Link auf einen Translator mit Übergabe der Seitenadresse. Siehe unten in
weitere Weblica-Standardfelder.
zurück | nach oben
Schachtelung von Feldern
Felder können beliebig geschachtelt werden:
z. B. kann in den HTML-Code eines Feldes wieder ein Feldname eingefügt werden.
Beispiel: das Feld
$(footer)
dieser Seite enthält das Feld
$(Seitenanfang)
:
<div align="center">
© 2011 Bauers Box - 8330 Pfäffikon ZH - Schweiz / Switzerland | Website entwickelt mit <a href="http://www.weblica.ch" target="_blank">weblica</a> | $(Seitenanfang)</div>
Das Feld
$(Seitenanfang)
enthält folgenden Code:
<a style="text-decoration:none;cursor: pointer;" onclick="self.scrollTo(0, 0);
return false;">nach oben
<img src="$(res.132.PfeilNachOben_png.path)"
width="10" height="10" border="0" title= "nach oben" alt="nach oben"/></a>
zurück | nach oben
Weblica-Standardfeld für die Anzeige des Erstellungsdatums einer Webseite
$(page.date)
Anwendungsbeispiel: 17.01.13
Quelle: Weblica-Onlinehilfe (Link siehe oben)
Anzeige letzter Update: siehe
Anzeige des Datums des letzten Webseiten-Updates
zurück | nach oben
weitere Weblica-Standardfelder
Feldnamen und ihre Inhalte:
siehe auch
Weblica Hilfe - Seiteneigenschaften als Felder
Anwendungs-Beispiel für
page.relativeURL
:
Das Feld
page.relativeURL
wird im Schnellzugriff im Aufruf des Bing Translators verwendet, um dem Translator die volle Adresse der aktuellen Seite zu übermitteln. Code:
<a href="http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http://www.babox.ch/$(page.relativeURL)" target="_blank"></a>
Sehr praktisch!
zurück | nach oben
Das Einbinden von jQuery mit jQuery.autoLoad unterbinden
Mit dem Weblica-Standardfeld
jQuery.autoLoad
kann man das Einbinden von jQuery auf jeder Seite deaktivieren.
Dazu muss dieses Feld manuell angelegt werden und mit dem Wert
False
versehen werden.
Siehe dazu in der Weblica Hilfe:
jQuery.
Bitte beachten: nun muss jQuery in jeder Webseite, die jQuery benötigt, manuell eingebunden werden.
Dazu legt man am besten ein weiteres Feld an:
Feld
$(jQueryEinbinden)
mit dem Inhalt
<script src="$(page.upPathPart)_js/jquery/jquery-1.7.1.min.js" type="text/javascript">
Dieses Feld fügt man im HTML-Head derjenigen Seiten ein, die jQuery benötigen.
Mit
$(page.upPathPart)
erhält man den Pfad von der aktuellen Seite auf das Wurzelverzeichnis, unter dem sich der Ordner
_js/jquery
befindet:
../../_js/jquery/jquery-1.7.1.min.js
zurück | nach oben
Verwendungsnachweis für ein Feld (ein Trick)
Für Felder gibt es aus technischen Gründen leider keine Verwendungsnachweise.
Mit einem einfachen Trick kann man sich dennoch für ein bestimmtes Feld einen "Verwendungsnachweis" erzeugen. Dazu ändert man den Feldnamen im Register "Felder" im Fussbereich des Hauptbildschirms. Nach der Namensänderung wird das Feld an seinen Verwendungsorten nicht mehr aufgelöst - es erscheint nun im Text mit seinem ursprünglichen Namen, z. B.
$(irgendeinfeldname). Nun kann man in der Browservorschau mit der Weblica-Suche nach dem ursprünglichen Feldnamen suchen - und findet so alle Seiten, in denen das Feld verwendet wird.
zurück | nach oben
Was tun, wenn im Browser-Titel $(browserTitle) angezeigt wird?
Gelegentlich sieht man mit Weblica erstellte Web-Seiten, die im Browsertitel die Zeichenkette
$(browserTitle) enthalten.
Ursache ist die Zerstörung des Weblica-Standardfeldes
browserTitle
, das in den Seiteneigenschaften, Rubrik "Allgemein", im Feld "Browser-Titel" standardmässig enthalten ist.
Existiert dieses Feld in den Weblica-Feldern (aus welchen Gründen auch immer) nicht mehr, so wird
browserTitle
in den Seiteneigenschaften nicht mehr als Feld erkannt und kann beim Generieren nicht durch den Feldinhalt ersetzt werden.
Lösung:
In den Weblica-Feldern das Feld
browserTitle
neu anlegen und mit dem Inhalt
$(page.title)
versehen.
$(page.title)
steht für die Seitenüberschrift (siehe oben).
Mehr dazu in der Weblica-Online-Hilfe:
das Feld browserTitle.
zurück | nach oben