Suchen

Einleitung TYPO3 Version 11.x und Version 12.5.x

Die neue Typo3-Version 12.5.x, inkl. Update PHP V 8.1 – siehe dazu auch Roadmap – birgt viele Neuerungen.

  • «Grid-Elemente» entfallen, werden bei uns neu über Mask-Elemente ersetzt (möglich wäre auch ein Einsatz von «Container»), wobei «Container» und  «Grid-Elements» nicht parallel in einer Version (11.x oder 12.x) betrieben werden können.
  • die vielen unterschiedliche früher notwendige (alten) «Styles» wollen wir so sukzessive ablösen ...

Im Hinblick auf diesen kommenden Update wollen wir daher «konservativ» laufend, wo sinnvoll, alte Elemente durch Apps oder Mask-Elemente ersetzen.

Offene Stelle, Jobs: Benefits

Lignatur Template-Übersichten Status Quo: 2018 bis Frühling 2024

Checkliste für neue Inhalte (Webseiten & Bilder/Files)

Seiteneigenschaften bearbeiten – Testlink: «Sprung innerhalb Seite»

Alle Optimierungen sollen die Keywords stärken gemäss Liste!! -> Keywordliste ...

  • 1.) Reiter «Allgemein»: Falls Navigationspunkt umbenannt wird, soll «URL-Segment» und ev. «Alternativer Navigationstitel» geprüft / angepasst werden
  • 2.) Bei neuen Seiten Reiter «SEO» und «Soziale Medien» befüllen / kontrollieren, siehe dazu:
  • 3:) SEO Feld «Titel für Suchmaschinen» – Seitentitel
    Falls es für die Google-Optimierung zweckmässig ist, den vorher gewählten Seitentitel nochmals zu überschreiben, kann dies im Feld «Titel für Suchmaschinen» vorgenommen werden. Diese Anpassung ist nur im HTML-Quellcode wirksam und für den Leser nicht ersichtlich. Der «optimale Titel» besteht aus 10 - 70 Zeichen (mit Leerzeichen, ideal: 55 - 65). Der Titel hat das entsprechende Keyword, wenn möglich an erster Stelle und besteht aus ein oder zwei Sätzen.
  • SEO Feld: «Beschreibung» – Meta Description
    Der Inhalt der «Meta Description» sollte 70 bis nicht mehr als 155 Zeichen (inkl. Leerzeichen) beinhalten. Die Description wird sehr oft bei einem Googletreffer unterhalb des Links publiziert. Es ist eine Zusammenfassung des Seiteninhalts in 2 - 3 Sätzen. Achten Sie darauf, dass die wichtigsten Suchwörter ca. 2x erwähnt werden und eher am Anfang kommen.

Social Media Optimierung (Open Graph Facebook und Twitter)

  • Bildergrössen für OpenGraph: Es können mehrere Bilder ausgewählt werden, idealerweise 1'200 x 630 Pixel (B x H).
  • «Open Graph Titel» und «Twitter Titel» – 50 bis max. 90 Zeichen (ohne Leerzeichen)
    Ideal sind so rund 50 Zeichen: zB. «Tilsiter Natur pur – das Reinheitsgebot des Schweizer Käses.»
  • «Open Graph Beschreibung» und «Twitter Beschreibung» – 100 bis 297 Zeichen (inkl. Leerzeichen)
    zB. «Nebst Schokolade, Bergen, Banken und Uhren wird die Schweiz auch gerne mit Käse in Verbindung gebracht. Dass unser Schweizer Käse weit über die Grenzen hinaus bekannt und beliebt ist, macht uns natürlich stolz, verpflichtet aber auch in gewisser Weise.»
  • Das Resultat kann man im Facebook-Developer-Check prüfen:
    > https://developers.facebook.com/tools/debug/

 

Bei neuen Uploads von Files (Bilder, PDF's, etc.)

«8-3er Konvention» bei Filenamen beachten! keine:

  • Umlaute, Sonderzeichen, Leerschläge und Grossschreibung!
  • erlaubt sind: Minus und Underline, für uns gilt: immer «-» Minus verwenden
  • Sinnvole Dateinamen gemäss Keywords wählen!
  • via «Dateiliste» danach Files via Klick auf Filename «Alternativer Text» ausfüllen (normale Schreibweise mit Leerschlägen und Gross-/Kleinschreibung mit Abständen).

 


Website Dokumentation der Inhalstelemente

  • Die Homepage startet mit einem Box und Text-Bildslider über die ganze Breite (1:3)
  • dann folgt ein Text- Video-Slider (3:1)
  • Grundsätzlich werden alle (neuen) Elemente immer als Text-Bildelement (nicht mehr mit: Text & Medien) aufzgebaut, wenn sinnvoll anpassen
  • 3 folgen 3 Text-Bild Boxen (je 1/3)
  • danach ein drei-spaltiger Abschlusstext, primär für Google
  • Das erste (Titel-) Inhaltselement einer Webseite weist jeweils einen dunkelgrauen Text-Hintergrund auf, die weiteren Elemente sind hellgrau
  • Danach folgen die Element im 40 : 60% oder 50 : 50% Verhältnis, je nach Bedarf, siehe Beispiele unten
  • Ausnahmen bilden folgende Webseiten:
    - Erklärungen «Worksite», ganz in grau gehalten, -> Worksite ...
    - Konfigurator, eigenes -> Spezial-App ...
    - Bim-Texturen, eigenes -> Spezial-App ...
    - die Teamseite mit Filterfunktion -> Team ...
    - die Referenzen mit vielen Sonderfunktion (linear abfüllbar) -> Referenzen ...
    - die Referenzbeschreibungen (nur Text)  -> Referenzbeschreibung ...
    - und Hamburgermenu (Symbol oben rechts))
    - Einblender (mit Holztextur Hintergrund) «Swissness»
  • ...

 

Textspalte links: 40% – Bildspalte rechts: 60%

Background Farben: dark grey, light grey, white, transparent
Responsive Padding für Randabstand Mobil
Spalten: 40, 50 und 60% (zu Gesmat 100 %) frei wählbar, inkl. Seitenwechsel
Image/Bildoptionen: fit Cover, center, Border, Slider-Image, Random-Image, Sounds-Image

Button Styles: Internal Link, Internal Link neue Seite, Download, Sound, Image-Overlay, Mail, Table

Seiteneigenschaften Optionen (weitere Konfigurationen): «Swissness», «Link Seitenanfang», «ohne Footer», «Als Filter darstellen»

Die hier gemachten Beschreibungen folgten der Sitemap-Reihenfolge.

Im Grundsatz wurde sehr streng auf gleich Abstände und Aufbauten geachtet.
«KISS» & «weniger ist viel mehr» wurde bis jetzt im Webdesign streng beachtet und möglichst eingehalten.

Version KMi, 12. November 2020

H1 Titel

H2 Titel

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.

PDF

E-Mail

Externe Link mit Pfeil

Interner Link mit Pfeil

Telefon

Folgeinhalt: Hellgrauer Hintergrund

  • Auf Homepage sind alle Inhaltselemente immer links: 40% – Bildspalte rechts: 60%
  • Buttonklasse: «internal Link»

Musterlink: Referenzen

Beispiel fluides Bildverhalten (aus Element: Flächenelement LFE)

Details sind zu besprechen, MUSTER-TEXT:LIGNATUR-Flächenelemente sind die ideale Lösung für den mehrgeschossigen Wohnungs-, Büro- oder Schulhausbau. Sie werden auch gerne in Sporthallen oder bei Aufstockungen eingesetzt. Ihre Deckbreite beträgt 1'000 mm, die maximale Länge 16 m, Überlängen sind nach Absprache möglich. Je nach Anforderung können die Elementhöhen zwischen 90 und 360 mm frei gewählt werden. LIGNATUR-Flächenelemente für Spannweiten bis 12 m modifizieren wir abhängig von Brand- und Schallschutz, Schallabsorptions- und Wärmeschutzanforderung spezifisch für Ihr Objekt.

Dunkel grauer Hintergrund / Spalte 40%

  • Die Portraitbilder funktionieren als ein Zufallsslider, Wechsel bei jedem neuen Zugriff auf die Seite, keine Auto-Slide aus Performance-Gründen und stetiger Wechseln verwirrt (wer ist jetzt mein Ansprechpartner?)verwirren
  • Textspalte links: 40% – Bildspalte rechts: 60%

Folgeseiten (dunkelgrau), Spalten jeweils je 50%

  • Styles werden dem Gridcontainer zugewiesen

Hellgrauer Hintergrund / Spalte 50%

  • Bild rechts: Image fit:cover
  • Spalte rechts 50%

LIGNATUR easy - Standardlängen ab Lager Händler

Im Gridelement 2 separate Inhaltselmenete (links) Text und Dateiverweise, rechts Bild (grau auf grau = Spezialfall freigestellt)

Mehr zu easy

Fachhändler

Einfaches Text-Bild-Element grau-grau (Statik Decke)

Text links, bild rechts angeschlagen

Lesen Sie aus der Tabelle, mit welcher Elementhöhe h welche Spannweite l überspannt werden kann. Für alle gezeigten Deckensysteme sind Tragfähigkeit, Gebrauchstauglichkeit und Schwingungsnachweis erfüllt.

Durchbiegung w (qd) = l / 350

  • qd = (1 + kdef) ∙ (gk + ѱ1 ∙ qk)
  • Kriechbeiwert kdef = 0.6
  • ständige Einwirkung gk = g + qA
  • Eigengewicht Element inkl. Befüllung g (Angaben in Tabelle für h = 200 mm)
  • Auflast Bodenaufbau qA
  • veränderliche Einwirkung qk = qN
  • Wohnungsbau qN = 2 kN/m2, ѱ1 = 0.5
  • Schulhausbau qN = 3 kN/m2, ѱ1 = 0.7


1. Eigenfrequenz f1 (gk + 0.3 ∙ qk) ≥ 8.0 Hz oder 8.0 Hz > f1 (gk + 0.3 ∙ qk) ≥ 5.1 Hz
Schwingbeschleunigung a (gk + 0.3 ∙ qk) ≤ 0.2 m/s2
Durchbiegung w (F = 1 kN) ≤ 1.15 mm

1 Parkett
2 Fermacell Estrichelement 25 mm
3 Zementestrich 50 mm
4 Holzfasertrittschalldämmung 20 mm
5 Mineralfasertrittschalldämmung 40 mm
6 Fermacell Wabenschüttung 30 mm
7 Splitt elastisch gebunden 60 mm
8 Splitt elastisch gebunden 80 mm

I LIGNATUR-Kastenelement (LKE)
II LIGNATUR-Flächenelement (LFE)
III LFE mit Schüttung 50 kg/m2
IV LFE mit Schüttung 100 kg/m2
V LFE silence12
VI LFE silence12 mit Akustik

Gridelement mit Slider-Image rechts (Kennwerte)

Am Auflager empfehlen wir als erstes eine statische Verstärkung über drei Querstege in den Hohlkammern. Ist das nicht ausreichend, wird die Kammer lokal massiv ausgeführt. Meist reichen zwei Kammern.

Spezialfall Bildschnitt (Ästhetik, Lasur)

Drei Bildschnitte in eines integriert.
Zwei Drittel der Elemente verlassen das Werk unbehandelt und bleiben naturbelassen. Auf Wunsch behandeln wir die fertigen Elemente bereits im Werk. Lasieren wir die Elemente weiss, hat die Asteinleimtechnik zur Folge, dass die feinen Schwindrisse im Ast unsichtbar sind.

1 Naturholz Fichte
2 Lichtschutz
3 Weisse Lasur

Text-Bild-Element -> Sound-Image-Slider (Hörbeispiel Luftschall)

Nachbar beim Musik hören

So klingt es bei Ihrem Nachbarn, wenn er Musik hört. Nur bei weit überhöhter Zimmerlautstärke können Sie im nachfolgenden Hörbeispiel, quasi in Ihrer Wohnung, unter der Lignatur silence12-Decke (Rw = 71 dB) noch etwas hören. Drehen Sie den Lautstärkeregler ruhig hoch.

Hörbeispiel vom Nachbarn in den eigenen vier Wänden

Und so hören Sie die Musik Ihres Nachbarn in Ihren eigenen vier Wänden. Drehen Sie die Lautstärke für die weitere Tonwiedergabe nun wieder etwas zurück.

Text & Medien Element (Hörbeispiele Nachhall)

Videos werden generell via Youtube verlink und abgespielt. Speziallink in Text: Internal-Link-mit-Icon
Nachhall, das Geräusch das in geschlossenen Räumen oder abgegrenzten Bereichen gehörte werden kann, nachdem es von Wänden, Boden oder Decke reflektiert worden ist.

Das Basketballwurfbeispiel in einer Dreifachturnhalle mit einer Betondecke zeigt das 12 Sekunden Nachhall störend sind. Gefordert sind 2 Sekunden.

Hören Sie anhand weiterer Beispiele, was Lignatur Akustik-Decken wirklich an Schall absorbieren. Verwenden Sie dafür hochwertige Lautsprecher oder einen Kopfhörer.

Hörbeispiele

Text & Medien Element (Hörbeispiel Sporthalle)

Spezialfall: Zwei Hörproben mit Bildwechsel (rechts)

Hören Sie den Unterschied anhand der Beispiele in einer Dreifachturnhalle ohne und mit Akustik.

Hörbeispiel Sporthalle ohne Akustik

Nachhallzeit 12 Sekunden

Hörbeispiel mit Akustik – Nachhallzeit 2 Sekunden

Nachhallzeit: 2 Sekunden

eMail-Chat Slider

  • 1) Die Inhalte werden in der Seite «Static Elements» erstellt (Template: «Sticky Menu»)
  • 2) Nach erstellen des Inhaltes muss die ID des neuen «Sticky Menu» vermerkt werden und dann in «Seiteneigenschaften» entsprechend vermerkt werden (Screenshot 2.)

Sprechende Pull-Down-Menu Extension (Spezialprogrammierung)

Die Pull-Down-Menus werden auf der Website via Plugin ausgegeben und erhalten dabei auch eine individuelle eigene Sprechende-URL. Dazu müssen zuerst im Systemordner «Dropdowns» alle notwendigen Datensätze erfasst werden. Diese können per Klick ein- oder ausgeklappt werden. Es sind dies:

  • «Seitenübersetzungen» (folgen am Schluss des erfassten deutschen Datensatzes)
  • «Seite»
  • «Kategorie»
  • «Dropdown-Item»

 

1. Schritt: Bereiche erfassen
Wenn nicht bereits vorhanden, soll der Haupt- oder Unterbereich (siehe später Filterauswahl) erfasst werden. Dieser soll immer gleich aufgebaut werden wie die Sitemap-Struktur! Durch das Anlegen der einzelnen Sub-Kategorien (Ordner) ist dann eine genaue Zuordnung möglich.

>> Siehe Printscreen 1


2. Schritt: Erfassen der «Drop-Down» Inhalten
Unter «Dopdownitem» können über die Funktion «+» die eigentlichen Inhalte definiert werden, welche durch die spätere Auswahl im Plugin über das Dropdown Menü dann auf der Webseite ausgeben werden.
Hierbei muss jeder Auswahloption (Drop-Down-Menu) einzeln befüllt werden. Die Fremdsprachen werden erst nach Fertigstellung erstellt!

>> Siehe Printscreen 2


3. Schritt: Inhalt des «Dropdownitem»

  • Der befüllte «Title» wird auf der Website dann als Auswahl-Wert im Pulldown angezeigt
  • Im Feld «Image» können gewünschte Bilder definiert werden
  • Falls nur «Box 1» Inhalt aufweist, wird der Inhalt einspaltig ausgegeben
  • wird auch «Box 2» befüllt, wechselt es automatisch auf eine 2-Spalten-Ausgabe
  • in den Inhalts-Boxen können Texte, Links oder PDFs erfasst werden.

Durch den im ersten Schritt angelegten Bereich (Schritt 1) erscheint danach im Template die «Kategorie» als auswählbarer Filter. Hier ist daher die genaue Zuordnung auszuwählen!

>> Siehe Printscreen 3


4. Schritt: Einfügen des Plugin in entsprechender Seite

  • Die Vorlage – der Plugin – wird unter der jeweiligen Seite (am besten per Kopieren) eingefügt und aktiviert.

Im geöffneten Plugin müssen folgende Einstellungen definiert werden:

  • «Header»: Eingabe des Titels (Typ Verborgen)
  • «Icon»: falls erwünscht kann ein entsprechendes Icon dem Pulldown zugeordnet werden
  • «Startingpoint»: Festlegen, welcher Inhalt zu Beginn bei Seitenaufrufs im «Dropdown» gezeigt werden soll.

Falls alle notwendigen Inhalte definiert und abgefüllt wurden – wird das Pull-Down, also diese Extension, auch weinwandfrei funktionieren ;-)

>> Siehe Printscreen 4

Kategorien für Dropdowns

Die Kategorien werden alle auf der Seite «Dropdowns» (Seitentyp Ordner) erfasst.

Der Kategorie wird jeweils die Elternkategorie zugeordnet.

Beispiel:

«Vorstatik neu» hat als Elternkategorie «Dropdowns»
«Vorstatik - Galeriedecke» hat als Elternkategorie «Vorstatik neu».

Lignatur Textformatierungs-Check (H1)

Ich starte mit H1 und Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

2. Absatztest: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

Dann folgt ein H2 mit Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Dann kommt ein Absatz mit Folgtext: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Und nochmals einer mit Folgtext: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

Und jetzt noch eine Aufzählung

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • At vero eos et accusam et justo duo dolores et ea rebum.
  • Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
  • ipsum dolor sit amet, consetetur sadipscing
  • elitr, sed diam nonumy eirmod tempor invidunt
  • ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.