• 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

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

„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:

direkt auf dem Desktop/Schreibtisch

chromium --display=:0 --kiosk /home/student/Schreibtisch/webfolder/index.html

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

Bei einer Mac-Tastatur könnt Ihr auf den Button cmd drücken, dann werden alle aktiven Fenster nebeneinander dargestellt und man kann diese durch Klicken auf das X rechts oben schließen

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

„Fullscreen“ bedeutet, dass vom Browser selbst nichts mehr zu sehen ist – keine Buttons, kein Adressfeld, gar nichts… Der Bildschirm wird komplett durch das Video gefüllt

Achtung: Beim Benamen des Videos auf Leerzeichen oder Sonderzeichen (äöüß…) verzichten!

Vorgehensweise

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

Das Video liegt direkt auf dem Schreibtisch:

vlc --loop --fullscreen /home/student/Schreibtisch/videoName.mp4

• „--loop“ bedeutet, dass das Video in einer Endlosschleife abläuft
• Der Pfad muss angepasst werden, wenn das Video an einer anderen Stelle liegt

Beenden des VLC-Players

dazu müsst Ihr folgende Tastenkombination eingeben:

ALT + F4

Bei einer Mac-Tastatur könnt Ihr auf den Button cmd drücken, dann werden alle aktiven Fenster nebeneinander dargestellt und man kann diese durch Klicken auf das X rechts oben schließen

Autostart beim Neustart des Rechners

Vorgehensweise wie bei Ubuntu: Autostart der lokalen Website (weiter vorne), nur das einzufügende Script muss angepasst werden:

vlc --loop --fullscreen /home/student/Schreibtisch/videoName.mp4

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…

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…

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;
}

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();
});

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));

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();

Demo

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

PHP auf Ubuntu-iMacs

PHP ist dort installiert – Ihr braucht Eure Dateien nur an die richtige Stelle kopieren. Zusätzlich müssen die Dateien die Endung .php haben.

# dorthin die Dateien kopieren
/var/www/html

# Dateiendung der Dateien, die PHP-Code enthalten
index.php
demo.php

Am Mac/PC testen

Um Eure PHP-Dateien auf Mac/PC zu testen, müsst Ihr via PHP einen Webserver starten. Dazu folgendes machen:

1. Öffnen ein Terminal-Fenster und zieht den kompletten Ordner darauf, der Eure PHP-Dateien enthält

2. Drückt die ENTER/RETURN-Taste

3. Gebt folgendes ein und drückt wieder die ENTER/RETURN-Taste

    php -S localhost:8080

4. Wechselt in Euren Lieblings-Browser und gebt dort folgende Adresse ein:

    http://localhost:8080

5. Zum Beenden des Servers müsst Ihr im Terminal CTRL+C eingeben

Sich wiederholende Elemente via PHP einbinden

Einbinden in den „normalen“ Seiten

z.B. bei index.php, fackellauf.php…

PHP

<!-- Klasse entsprechend anpassen -->
<body class="zieleinlauf">

    […]

    <footer>
        <!-- einfaches PHP-Include, dort alle "Footer-Links" einfügen -->
        <?php include("assets/php_includes/weitereSeiten.php"); ?>
    </footer>
</body>

PHP

Datei "assets/php_includes/weitereSeiten.php"

<h3>weitere Themen</h3>

<div class="grid">

    <article class="olympiaDorf">
        <a href="index.php">
            <h2>Olympia Dorf</h2>
            <div>
                <img src="https://picsum.photos/400?random=1" alt="" />
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit reiciendis omnis perferendis.
                </p>
            </div>
        </a>
    </article>

    <article class="fackellauf">
        <a href="fackellauf.php">
            <h2>Fackellauf</h2>
            <div>
                <img src="https://picsum.photos/400?random=2" alt="" />
                <p>Officia debitis praesentium corrupti non consequatur quibusdam vitae ad excepturi ut quidem.</p>
            </div>
        </a>
    </article>

    […]

</div>

CSS

Via CSS wird der Menüpunkt, der der gerade sichtbaren Seite entspricht, ausgeblendet

/* 
sorgt dafür, dass die gerade aktive Seite im Footer ausgeblendet wird 
dafür muss auch der jeweilige <body> die entsprechende Klasse haben!
*/
.olympiaDorf .olympiaDorf,
.fackellauf .fackellauf,
.frauenbild .frauenbild,
.zieleinlauf .zieleinlauf {
    display: none;
}