in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Weblica-Felder sind eine einzigartige Arbeits­erleichterung, die ihresgleichen suchen.
Ein weiterer Grund, mit Weblica zu arbeiten.

Bitte die Notationskon­ventionen in der linken Spalte beachten.

Notationskonventionen

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

Seite erstellt / geändert

e 17.01.13  /  update

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: Hinweis: neuer Beitrag in BaBox

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 Infrastruktur­dokumentation.

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: Hinweis: neuer Beitrag in BaBox .
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:

Feldname Feldinhalt
page.title
Codeschnipsel 52: Weblica-Felder
page.description
Weblica-Felder sind ein raffiniertes Konstrukt, das einfach handzuhaben und sehr mächtig in der Anwendung ist.
page.relativeURL
weblica/codeschnipsel/Codeschnipsel-52.html
page.upPathPart ../../
jQuery.autoLoad siehe unten
 
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