Moin!

Contao-Konferenz 2019, 11. Oktober 2019

Sperrige Inhalte in Contao.

About

Carolina Koehn

Kiel, Germany, Europe, Earth ...

Soz.-Wiss, Dipl-Soz-Päd, Mediengestalterin

Contao seit 2006

kikmedia.de | @carolinakoehn

Der Inhalt.

Problemstellungen,

Lösungsansätze und

Implementationen von externen Daten

Im Detail so:

  • Was ist 'sperrig'?
  • Layout
  • iframes
  • Tabellen
  • Und was Contao dazu sagt.

    Was ist denn eigentlich 'sperrig'?

    Sowas?

    Sowas?

    Hej, im Layout sieht das super aus.

    Donaudampfschifffahrtsgesellschaftskapitänswitwentröster*in.

    #WTF

    Designer*innen verhauen?

    Nein.

    Vorsprung durch Technik.©

    Layouts flexibel bauen.

    Warum sieht das so aus?

  • Der Inhalt kann sich nicht auf die Containergrösse verkleinern
  • Der Inhalt kann sich nicht auf die Containergrösse vergrössern
  • Der Container implementiert 'overflow' nicht korrekt
  • CSS nutzen.

    Zum Beispiel: Fontsize relativ zum Viewport.


    <h1>Ich will rein.</h1>

    h1 {
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 15.5vw;
    }

    https://codepen.io/kikmedia/pen/WNNNjQo

    JavaScript nutzen.

    Zum Beispiel: fittext.js.

    <script src="/files/themes/js/jquery.fittext.js" /><script>

    Und dann ...

    jQuery("h1").fitText(0.38);

    http://fittextjs.com/

    Ohne JS nix gut.

    Es soll auch Leute geben, die damit komplette Webseiten responsiv machen.

    #WTF

    Oder doch SVG?

    Zumindest selten.

    <svg viewBox="0 0 130 25">
    <text x="0" y="15">Ich will rein!</text>
    </svg>
    text {
      font-family: Arial, Verdana, sans-serif;
    }
    
    svg {
      width: 100%;
    } 
    

    https://codepen.io/kikmedia/pen/bGGGWRg

    Auch Höhen machen Freude.

    <div class="row">
    <div class="col s12 m6">
    <div class="card blue-grey darken-1">
    <div class="card-content white-text">
    <span class="card-title">Ich bin ein Titel</span>
    <p>Ich bin nur ein einfacher Layouttext.</p>
    </div>
    <div class="card-action">
    <a href="#">Link</a>
    </div>
    </div>
    </div>
    </div>

    Sieht eigentlich ganz unschuldig aus.

    Aber was ist ...

    • wenn wir viele davon haben?
    • wenn die Textmengen heterogen sind?

    Javascript raufgiessen.

    Beispielsweise MatchHeight

    • Sucht Elemente, die mit data-mh="myClass" gekennzeichnet sind
    • findet gleichartige Elemente
    • hängt Inline-CSS an
    • <style="height: 657,93px">

    Ressource: http://brm.io/jquery-match-height/

    • (+) vergleichsweise robust
    • (-) ohne JS keine Höhenanpassung
    • (-) noch mehr Javascript

    CSS nutzen.

    <div class="row">
    <div class="card-wrapper col s12 m6">
    <div class="card blue-grey darken-1">
    <div class="card-content white-text">
    <span class="card-title">Ich bin ein Titel</span>
    <p>Ich bin nur ein einfacher Layouttext.</p>
    </div>
    <div class="card-action">
    <a href="#">Link</a>
    </div>
    </div>
    </div>
    </div>

    CSS-Grid.

    CSS dazu:

    .card-wrapper {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-gap: 20px;
    } .card {
    grid-column: 3;
    }

    "Mein Video ist entweder zu klein oder zu gross!!!!"

    Hmmm, ein <iframe> ...

    Wie bekommt man die denn responsiv ...?

    • <iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
    • Via CSS Höhe und Breite auf 100%
    • den Iframe absolut positionieren
    • Padding setzen

    Hä???

    • Drumherum einen responsiven Wrapper
    • darin der iFrame auf 100% ...

    Achso.

    Ressource: https://codepen.io/kikmedia/pen/VwwwXOM

    And now for something completely different.

    Viel Content.

    Das kann sein:

    • lange Inhalte
    • unstrukturierte Daten
    • tabellarische Daten
    • ...

    Lange Inhalte

    Paginierung, FTW!

    Unstrukturierte Daten

    Strukturierung, FTW!

    Tabellarische Daten

    Erschliessung, FTW!

    Unstrukturierte Daten

    Strukturierung, FTW!

    Tabellarische Daten

  • möglicherweise umfangreich
  • möglicherweise lange Datensätze
  • möglicherweise mehrdimensional
  • Aber der Reihe nach

    Wir fangen erstmal klein an.

     

    Kinder-Kampfsport Training Montag, 17.15 - 18.00 Uhr
    Freitag, 17.15 - 18.00 Uhr
    Beginner Training Mittwoch, 19.00 - 20.15 Uhr
    Freitag, 19.00 - 20.00 Uhr
    Advanced/Fighter Training Montag, 20.15 - 21.30 Uhr
    Mittwoch, 19.00 - 20.15 Uhr
    Freitag, 20.15 - 21.30 Uhr
    Krav Maga Tactical Montag, 19.00 - 20.00 Uhr
    Mittwoch, 20.30 - 21.30 Uhr
    Power-Workout Montag, 18.00 - 18.45 Uhr
    Mittwoch, 18.00 - 18.45 Uhr
    Freitag, 18.00 - 18.45 Uhr
    Morning Fit* Montag, Mittwoch, Freitag 09.15 - 10.00 Uhr**
    Sonntag, 11.00 - 11.45 Uhr
    Mittagsdrill* Montag, 12.15 - 12.45 Uhr
    Freitag, 12.15 - 12.45 Uhr
    Open Training Samstag, nach Absprache

    Aber der Reihe nach

    Dasselbe auf dem Smartphone:

    Kinder-Kampfsport Training Montag, 17.15 - 18.00 Uhr
    Freitag, 17.15 - 18.00 Uhr
    Beginner Training Mittwoch, 19.00 - 20.15 Uhr
    Freitag, 19.00 - 20.00 Uhr
    Advanced/Fighter Training Montag, 20.15 - 21.30 Uhr
    Mittwoch, 19.00 - 20.15 Uhr
    Freitag, 20.15 - 21.30 Uhr
    Krav Maga Tactical Montag, 19.00 - 20.00 Uhr
    Mittwoch, 20.30 - 21.30 Uhr
    Power-Workout Montag, 18.00 - 18.45 Uhr
    Mittwoch, 18.00 - 18.45 Uhr
    Freitag, 18.00 - 18.45 Uhr
    Morning Fit* Montag, Mittwoch, Freitag 09.15 - 10.00 Uhr**
    Sonntag, 11.00 - 11.45 Uhr
    Mittagsdrill* Montag, 12.15 - 12.45 Uhr
    Freitag, 12.15 - 12.45 Uhr
    Open Training Samstag, nach Absprache

    Und nun in der Praxis

    Website

    The Full Monty

    • responsiv
    • Filter
    • Layoutanpassungen
    • Beispiele

    CSS

    Beispiele

    JavaScript

    Beispiele

    https://datatables.net/

    https://www.dynatable.com/

    http://www.jquery-bootgrid.com/

    https://johnpolacek.github.io/stacktable.js/

    Und Contao so?

    Teasern

  • Artikel
  • Seiten
  • News & mehr
  • Subinhalte auf anderen Seiten

     

     

    Artikel

  • mehr Weissraum
  • mehr Aufteilung
  • mehr Gliederung
  • mehr auslagern
  • CSS-Lösungen

  • /files für Einzellösungen
  • SCSS
  • Combiner
  • wenn Bundle vorhanden: /assets
  • Javascript-Lösungen

  • VanillaJS
  • /files für Einzellösungen
  • diverse Bibliotheken
  • Wo einbinden?

  • Seiten-Layout
  • Nur sinnvoll, wenn auf allen Seiten des Layouts benötigt
  • Arbeitsweise ist wichtig
  • "eigenes Javascript"
  • Bibliothek laden
  • Konfiguration über <script>
  • Andere Variante

  • ODER j_template
  • alle benötigten JS zusammenfassen
  • Konfiguration wie oben
  • Konfiguration auch über Extension möglich
  • Hilfreiche Extension

    https://github.com/trilobit-gmbh/contao-headerfootercode-bundle

    Ermöglicht

    • individuelles JS auf Einzelseiten
    • individuelles CSS auf Einzelseiten
    • maximal flexibel
    • verschiedene Layouts unnötig
    • lädt nur wenn es gebraucht wird

    Aber: man muss sich selbst um minifizierte Scripte kümmern

    In der Summe

    Contao ist da maximal flexibel.

    Ressourcen

    CSS

  • Gridsysteme
  • wie beispielsweise

    Aber auch

    More to come

    Ganz klar:

    Reine responsive Grids werden weniger

    CSS Gridmodul kann vieles ersetzen

    Trotzdem einsetzbar

    CSS Gridmodul

    Zweifelsohne die Zukunft

    Wem das immer noch nix sagt:

    Javascript

  • Verschiedene Ansätze
  • Einzelscripte für Einzelaufgaben
  • Frameworks
  • Mir ist schon klar das man inzwischen JS können sollte

    ... vor allem in Zeiten von Vanilla JS

    Allgemein

    JQuery hat gewonnen.

    Speziell

    Grundsätzlich beipielsweise

    Spezieller, JS Frameworks

     

    Playground

  • Beispiele auf Codepen
  • https://codepen.io/kikmedia
  • Danke für die Aufmerksamkeit.

    @carolinakoehn

    kikmedia.de