Webrelevantes: Ubuntu Settings, Position: sticky, Intersection Observer / 2022-04-12 / Matthias Edler-Golla, CC BY-SA 4.0



Themen heute

  • Ubuntu: Lokale Web-Dateien
  • Ubuntu: Websites fullscreen testen
  • Ubuntu: Start ohne Passwort-Eingabe
  • Ubuntu: Autostart der lokalen Website
  • Ubuntu: Rechner automatisch ausschalten
  • „position: sticky“ mit und ohne Javascript
  • Intersection Observer für Videos
  • Inaktivität (TimeOut) entdecken

Ubuntu: Locale Webdateien

Ich habe auf den Desktop der iMacs Shortcuts zum HTML-Ordner eingefügt…

Dateien, die local verwendet werden sollen, müssen an der hier oben gezeigten Stelle gespeichert werden!

Ihr könnt im Terminal testen, ob sich die Dateien an der richtigen Stelle befinden. Dazu bitte folgendes eingeben:

cd /var/www/html

Dann noch anzeigen lassen, was sich dort befindet:

ls -l

oder um alles hierarchisch zu sehen:

tree

Browser-Ansicht

wechselt in den Browser und gebt dort im Adressfeld folgendes ein:

localhost

oder explizit:

localhost/index.html

dann seht Ihr folgendes im Browser

Bildschirmauflösung des iMacs 27"

2560px × 1440px


Ubuntu: Lokale Websites fullscreen testen

Ihr könnt auf Ubuntu einfach testen, wie Eure (lokale) Website fullscreen aussieht:

„Fullscreen“ bedeutet, dass vom Browser selbst nichts mehr zu sehen ist – keine Buttons, kein Adressfeld, gar nichts… Der Bildschirm wird komplett mit dem Inhalt der gewünschten Website gefüllt

Vorgehensweise

Dazu müsst Ihr nur das Terminal öffnen und folgendes eingeben:

oberste Ebene – direkt bei /var/www/html/

chromium --display=:0 --kiosk http://localhost/

untere Ebene – hier im Ordner "video_js_experimente": /var/www/html/video_js_experimente/

chromium --display=:0 --kiosk http://localhost/video_js_experimente/

auch das geht, wenn der Rechner Internet-Zugang hat…

chromium --display=:0 --kiosk https://www.sueddeutsche.de/

Beenden des Browsers

dazu müsst Ihr folgende Tastenkombination eingeben:
ALT + F4


Ubuntu: Start ohne Passwort-Eingabe

Damit beim Starten des Ubuntu-PCs automatisch die gewünschte Website angezeigt werden kann, muss Ubuntu ohne Eingabe eines Passwortes starten.

Achtung: Im normalen Betrieb ist das nicht wünschenwert und ein Sicherheitsrisiko – Ihr solltet es nur bei PCs machen, die automatisch hochfahren sollen…

Schritt 1: Settings öffnen

ganz oben rechts auf das Symbol klicken und dann Settings auswählen

Schritt 2:

Automatic Login aktivieren

Beim nächsten Neustart startet der PC jetzt automatisch in den Arbeitsbereich des ausgewählten Users…


Ubuntu: Autostart der lokalen Website

Mit folgenden Einstellungen sorgt Ihr dafür, dass Ubuntu beim Starten automatisch Chromium full-screen startet und die gewünschte URL anzeigt:

Schritt 1:

Icon „Show Applications“ anklicken

Schritt 2:

Im Suchfeld den Begriff „Startup“ eingeben

Schritt 3:

via „Add“ ein neues Startup-Programm hinzufügen

Schritt 4:

folgende Sachen dort eingeben:

bei Command folgendes eingeben – auf den richtigen Pfad achten!

oberste Ebene – direkt bei /var/www/html/

chromium --display=:0 --kiosk http://localhost/

untere Ebene – hier im Ordner "video_js_experimente": /var/www/html/video_js_experimente/

chromium --display=:0 --kiosk http://localhost/video_js_experimente/

auch das geht, wenn der Rechner Internet-Zugang hat…

chromium --display=:0 --kiosk https://www.sueddeutsche.de/

Neustart

Wenn Ihr jetzt den Ubuntu-Rechner neustartet, sollte dieser automatisch mit der angegeben Website in Chromium starten, wobei vom Browser selbst nichts zu sehen ist.

Beenden

Wenn Ihr am PC eine Tastatur angeschlossen habt, könnt Ihr Chrome mit folgender Tastenkombination beenden:

ALT + F4

Ubuntu: Rechner automatisch ausschalten

Abends soll sich der Ubuntu-PC automatisch ausschalten – dann brauchen die Leute im Museum nur morgens auf den Startknopf drücken…

Achtung:

Um folgende Schritte ausführen zu können, braucht Ihr Admin-Rechte auf dem Ubuntu-Rechner!

Da Ihr diese nicht habt, werde ich folgende Schritte auf den Ausstellungs-Rechnern durchführen…

Crontab starten

Terminal öffnen und folgendes eingeben:

sudo crontab -e

dort folgendes eintragen

Rechner täglich um 21:10 ausschalten

10 21 * * * /sbin/shutdown now

Rechner werktags (Montag bis Freitag) um 20:15 ausschalten

15 20 * * 1,2,3,4,5 /sbin/shutdown now

oder

15 20 * * 1-5 /sbin/shutdown now

Rechner am Wochenende (Samstag, Sonntag) um 22:00 ausschalten

00 22 * * 6,7 /sbin/shutdown now

Rechner am Sonntag um 19:45 ausschalten

45 19 * * SUN /sbin/shutdown now

Crontab.guru

Auf der Website crontab.guru könnt Ihr testen, ob Eure Zeit-/Datums-Angaben richtig sind…


position: sticky

position: sticky ist eine relativ neue CSS-Anweisung, die dafür sorgt, dass ein HTML-Element so lange mitscrollt, bis es eine vorher bestimmte Position erreicht. Dann verhält es sich, als ob die Anweisung positon: fixed aktiv wäre.

Demo

Schaut Euch die Demo an – oder ladet Euch diese herunter!

Beachtet, dass für diese Demo kein Javascript nötig ist!

HTML

<main>
    <div class="content">
        […]
    </div>

    <!-- dieses Element soll "sticky" werden -->
    <figure>
        <img src="./p/fluss.jpg" alt="" />
    </figure>

    <h2>Unbegradigter Bach</h2>

    <div class="content">
        […]
    </div>

    […]
<main>

CSS

figure {
    /* etwas mehr als komplette Browserhöhe */
    height: 105vh;

    /* das entscheidende! */
    position: sticky;

    /* oberste Position beim Scrollen */
    top: -1.5rem;

    /* schwarzer Trenner zwischen den Bildern */
    border-top: 40px solid rgb(0, 0, 0);
}

figure img {
    /* volle Höhe des Bilder */
    height: 100%;

    /* Img passt damit immer komplett in das <figure>-Element
    der Ausschnitt ändert sich aber! */
    object-fit: cover;
}

position: sticky mit Javascript

Mit Javascipt kann z.B. der Wert „top“ so verändert werden, dass der Eindruck entsteht, das jeweilige Großbild „rutscht“ beim Scrollen aus dem Browserfenster…

Demo

Schaut Euch die Demo an – oder ladet Euch diese herunter!

Achtung: Für diese Demo ist Javascript nötig!

HTML

<!-- wie beim vorherigem Beispiel! -->

CSS

/* wie beim vorherigem Beispiel! 
zusätzlich aber folgendes:
*/

figure {
    height: 105vh;
    position: sticky;
    top: -1.5rem;
    border-top: 40px solid rgb(0, 0, 0);

    opacity: 1;
    transition: all 2.6s;
}

/* wird via JS ein-/ausgeschaltet! */
.nonSticky {
    opacity: 0.3;

    /* schöner Effekt, Bild verschiebt sich nach oben! */
    top: -150vh;
    transition: all 2.6s;
}

Javascript

// Sammlung aller h2-Überschriften
const h2s = document.querySelectorAll("h2");
// console.log(h2s);

function h2sBeobachten() {
h2s.forEach(function (ereignis) {
    // nächste zwei Zeilen fragen die Position der oberen Kante
    // der jeweiligen H2-Überschrift ab
    let h2Rect = ereignis.getBoundingClientRect();
    let h2Top = h2Rect.top;
    // console.log(h2Top);

    // wenn die jeweilige Überschrift 100px unterhalb der oberen Browserkante ist
    // bekommt das figureElement, das im HTML-Code DIREKT darüber liegt ("previousElementSibling"),
    // die Klasse "nonSticky"
    if (h2Top < 100) {
    ereignis.previousElementSibling.classList.add("nonSticky");
    } else {
    ereignis.previousElementSibling.classList.remove("nonSticky");
    }
});
}

// Funktion "h2sBeobachten" wird beim Scrollen ausgeführt
window.addEventListener("scroll", function (element) {
h2sBeobachten();
});

Intersection Observer für Videos

Die Videos laufen automatisch an, wenn sie in den sichtbaren Bereich kommen – und stoppen, wenn sie nicht mehr sichtbar sind…

Demo

Schaut Euch die Demo an – oder ladet Euch diese herunter!

HTML

  <figure class="volleBreite">
    <video muted loop preload="auto" width="1920" height="1080">
      <source
        src="https://s3.matthias-edler-golla.de/zz_demos/beispiele/olympia72/vortrag_02/videos/torri.mp4"
        type="video/mp4"
      />
      <source
        src="https://s3.matthias-edler-golla.de/zz_demos/beispiele/olympia72/vortrag_02/videos/torri.ogg"
        type="video/ogv"
      />
    </video>
  </figure>

CSS

.volleBreite {
  height: 100vh;
  width: 100%;
  position: relative;
}

.volleBreite video {
  object-fit: cover;
  height: 100%;
  /* nicht laufendes Video ist transparent */
  opacity: 0.4;
  transition: opacity 0.4s;
}

/* "sichtbar" wird via Javascript ein/ausgeschaltet! */
.volleBreite video.sichtbar {
  opacity: 1;
}

Javascript

/*
https://blog.webdevsimplified.com/2022-01/intersection-observer/

und zusätzlich
https://youtu.be/9W7rKLahq2Q
*/

// =================== Bilder beim Rein-/Rausscrollen ===================

const videoOptions = {
  // rootMargin: '-10%',
  // video muss 70% sichbar sein, bevor es startet
  threshold: 0.7,
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("sichtbar");
      entry.target.play();
    } else {
      entry.target.classList.remove("sichtbar");
      entry.target.pause();
    }
  });
}, videoOptions);

// alle Videos in einer Liste
const meineVideos = document.querySelectorAll("video");

// Aufruf für alle Videos
meineVideos.forEach((ele) => observer.observe(ele));

Inaktivität entdecken

In der Ausstellung soll der Browser automatisch nach einem festgelegtem Zeitintervall (z.B. 5min) auf eine Auswahlseite zurückkehren, wenn keine Interaction mehr festgestellt wird. Dann ist die Besucher:in vermutlich nicht mehr vor dem Bildschirm…

Der verwendete Code basiert auf dem Artikel vom Brian Cline

Demo

Schaut Euch die Demo an – oder ladet Euch diese herunter!

Javascript

// https://www.brcline.com/blog/detecting-inactivity-in-javascript

// 1 Minuten
const timeoutInMiliseconds = 60000;

// 5 Minuten
// const timeoutInMiliseconds = 300000;

let timeoutId;

// Ausgabe der Timeout-Zeit im Header, umgerechnet in Minuten
const timeOut = document.querySelector("#timeOut");
timeOut.textContent = timeoutInMiliseconds / (1000 * 60);

const startTimer = () => {
  // window.setTimeout returns an Id that can be used to start and stop a timer
  timeoutId = window.setTimeout(doInactive, timeoutInMiliseconds);
};

const doInactive = () => {
  // Angabe, wie lange das TimeOut ist
  const zeitraum = document.querySelector("#zeitraum");
  zeitraum.textContent = timeoutInMiliseconds / (1000 * 60);

  // der rote Hinweis wird sichtbar geschaltet
  const keineAktivitaet = document.querySelector("#keineAktivitaet");
  keineAktivitaet.classList.add("sichtbar");

  // nach festgelegter Zeit geht die Website automatisch zu folgender Adresse
  // window.location.assign('https://sz.de');
};

const resetTimer = () => {
  window.clearTimeout(timeoutId);

  // praktisch um zu beobachten, ob Aktivitäten erkannt werden
  console.log("Aktivität entdeckt!");

  startTimer();
};

const setupTimers = () => {
  document.addEventListener("mousemove", resetTimer, false);
  document.addEventListener("mousedown", resetTimer, false);
  document.addEventListener("keypress", resetTimer, false);
  document.addEventListener("touchmove", resetTimer, false);

  startTimer();

  console.log("setupTimers gestartet!");
};

setupTimers();

Danke!

Alle Scripte durchsuchen

Weitere Vorträge: