Ein PHP Script wechselt stündlich 12 verschiedene Imagefilme

Heute ist Montag, der
20.10.25 und es ist mit dem Öffnen dieser Seite 03:15 Uhr.

um was es geht

Es geht um das webbasierte, smartphone-optimierte und wann und wo immer stattfindende, eigenwillige Abbilden von Daten und damit um die wesentlichsten, dafür notwendigen Scriptsprachen. Ziel des Kurses ist die eigene Website unter der Berücksichtigung, dass sie wirklich selbst, quasi von der Picke auf, geschrieben ist/wird. Es geht in diesem Kurs also weniger um Inhalte, als vielmehr um die technischen Voraussetzungen, Inhalte webbasiert darzustellen.

how 2 start

In diesem Kurs hast du einen Kollektiv-Zugang zur Subdomain kurs.imnusshof.ch, falls du dir keine eigene Domain registrieren lassen willst. Der administrative Zugang zum ▸ Server, auf welchem sich diese Website befindet, folgt dem Prinzip "Seilschaft": das schwächste Glied bestimmt über Gedeih und Verderb - und bedeutet: wer Dateien anderer verändert/löscht/..., löscht den öffentlich zugänglichen Kurs - unwiderruflich. Es kann also durchaus sein, dass dieser Kurs, kaum angefangen, schon wieder endet.

domain, subdomain, ftp

Eine Domain samt Hosting lässt man sich am einfachsten bei einem ▸ Host einrichten. Budget-Abo's gibts ab CHF 50/Jahr. Mit einem FTP-Programm (oder ▸ online) können Dateien von einem Computer auf einen Server hoch-, und/oder umgekehrt heruntergeladen werden. Die Dateien lassen sich auf dem Server in (allenfalls passwort-geschützten) Ordnern und Unterordnern und ... ablegen.

html

Melde dich entweder ▸ online oder beim ▸ Online-Editor von Programiz oder von ▸ w3schools oder besser mit einer FTP App auf dem Server an (du erinnerst dich ab jetzt an die "Seilschaft") und öffne den Ordner html
Dupliziere die ▸ rueedi.php oder öffne sie, kopiere den gesamten Code, eröffne eine neue Datei, setze den Code ein, gib der Datei deinen eindeutigen Namen (Beispiel: regulahofstetter.php) und speichere sie
Öffne deine Datei und editiere sie

css | dss

'cascading style sheet' is the language to style an html document. css describes how html elements should be displayed. Always Design for Mobile First. Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This means that we must make some changes in our CSS. Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First.

CSS bezeichnet eigentlich nicht die Sprache, sondern das Dokument, in welchem die styles zentral zusammengefasst eingeschrieben werden.

Früher wurden Animationen in/mit Flash geschrieben. Flash hatte von Beginn weg einen schlechten Ruf. Mit CSS3 gibt es die keyframes. Diese lassen allerlei Animationen zu. Ich empfehle, sehr sparsam damit umzugehn. Der gefloatete div, in welchem sich das animierte Quadrat befindet, ist verlinkt. Die Auszeichnung (den style) findest du im Quelltext dieser Seite.

▸ DSS (Dynamic Style Sheet)

mask

With CSS masking you create a mask layer to place over an element to partially or fully hide portions of the element. Bedeutet: über dem Film liegt eine Ebene, welche den Film partiell abdeckt – hier quasi ausser einem Guckloch. Die entsprechende .svg-Datei muss sich auf demselben Server befinden wie die Webseite. Der Film kann irgendwo sein. Soll der Film in einem Kreis spielen, ist das Format des Films mit Vorteil quadratisch und in einem links-gefloateten div container eingeschrieben - damit der Text schön um den Film fliesst.

svg

Scalable Vector Graphics haben den Vorteil, beim zoomen nicht zu verpixeln - und eignen sich im Kontext von Bildung / Training des Vorstellungs-Vermögens, insbesondere geometrische Figuren im eigentlich Sinn zu beschreiben. Das Wappen besteht aus je einem roten Rechteck, einem roten Kreis und 2 weissen Rechtecken.

audio-videowalk

Oben siehst du 2 Gemeinden im Kanton Schaffhausen. Den Umriss des Kantons habe ich im Laptop resp. im PixelmatorPro ausgewählt, in eine neue, leere Ebene eingesetzt und das Bild resp. nur eben diese Ebene im .gif-Format gespeichert. Die Gemeinden sind verlinkte svg (siehe den Quelltext dieser Seite).

php

Siehe auch oben in dieser Seite und weitere Beispiele: ▸ PHP
php is a widely-used and free server scripting language for dynamic and interactive web pages. Beispiel; bis zum 25. April 2025, meinem nächsten Geburtstag, dauert es noch -178 Tage. Diese (oder ▸ diese) Aufgabe wird nicht lokal im Computer und nicht im Webbrowser, sondern über die server-seitige Scriptsprache PHP auf dem Server ausgeführt. Hier im Browser wird einzig das Resultat interpretiert. Dabei müssen 'html'-Dateien .php-Dateien sein!

sql

SQL ist die Abkürzung für Structured Query Language, die sich als Standardsprache für die Kommunikation mit zweidimensionalen, relationalen Datenbanken durchgesetzt hat. Mit Hilfe von SQL können Datentabellen erstellt, miteinander verknüpft und editiert werden. Neue Daten werden entweder über ein Formular (nicht sicher) eingeschrieben und gesendet oder im Format .csv importiert (sicher) oder direkt in die MySQL-Tabelle (in der ▸ phpMyAdmin) eingetragen (sicher).

(dein Handy hältst du mit Vorteil de-quere-weg. Die Datensätze sind bis auf den 1., der immer an erster Stelle erscheint, verkehrt-chronologisch geordnet.)

Am 25.5.25 habe ich den Popover-Embed-Script eines Films von Ende September 2016 aus meiner ▸ Wistia Library in diesen ersten, immer zuoberst erscheindenden Datensatz direkt in der SQL-Tabelle eingesetzt (meine Datenbank hat, nicht immer aber oft Mühe mit JavaScripts). Ich würde Wistia vor allen anderen mit grossem Abstand den Vorzug geben - allein, die $19/mo sind mir für meine Zwecke wirklich zuviel.

Zersch simmer bem Rebhüüsli (hooch über Hemishofe) vo de Susi verbii gfahre und hend üüsen z’Nacht deponiert. Denn simmer uf Stei am Rhy gfahre und hend im Städtli z’Mittag ggässe. Nochher simmer über Bornhuuse, em Stift Andante, Klingenzell und Hochwacht (de Uusblick uf Reichenau und Konstanz und de Säntis und d’Churfürschte isch überwältigend) wieder uf Mammere abe und mehr oder weniger am Wasser nooh uf Stei gfahre und rechtziitig uf die halbi füüfi wieder bem Rebhüüsli gsi. Döt hemmer d’Füürstell laufe looh und bröötlet. Churz noch de 8-e simmer noch 57 km wieder dihaam gsi.

▸ Play

Am 8.9.25 waren wir nicht nur im Orserental (schier endlos von der hinteren Birch, Mühletal, bis zum Chrüüzweg hoch) - am 8.9.25 habe ich auch zum ersten Mal in iMovie mobile ein Video kommentiert, das heisst mit einem Voice Over konfektioniert. Gleichentags, am Morgen, bin ich zufällig auf eine kleine Anleitung gestossen, wie sogenannte Fassscharniere eingesetzt werden können. So guet!

Am 9.8.25 waren wir am Wilchinger Handel vor schönster (Ritter) Kulisse. Dabei wäre es, zumindest temperatur-mässig, sehr wohl möglich gewesen, mit dem Velo, statt mit dem Auto zu fahren. Allein, wir nahmen dann trotzdem das Auto. Vor dem Schauspiel besuchten wir noch R & E und hielten einen Schwatz. Das Schauspiel hat uns sehr gut gefallen, insbesondere die einmalige Kulisse - obwohl die einzelnen Szenen oft zu autark daher kamen. Oder so.

Am 22.6.25 haben wir die UBS (United Brass Schaffhausen) und Gegenden ohne Strassen kennengelernt.

Am 15.6.25 sind wir nicht wie am Morgen noch beabsichtigt auf der Schweizerseite nach Konstanz, sondern über Schaffhausen, Rheinfall, Rheinau, Jestetten und durchs Wangental nach Wilchingen gefahren. Im Ritter waren alle Vögel ausgeflogen. Im Schwimmbad Neunkirch taten die Leute, wie wenn nichts wäre, dabei war es bedenklich schwarz am Himmel über Erzingen. In Neuhausen hats uns schier vom Velo geworfen und in Schaffhausens Lochstrasse mussten wir eine Viertelstunde unterstehen. Nach 70km kamen wir trocken zu Hause an.

▲

programmieren

Eigentlich sollte das Programmieren in der Volksschule so aussehen: Es werden Geschichten ge-, d.h. eindeutige und endliche Handlungen und Handlungs-Abläufe beschrieben.

python

Python is a popular programming language. There are also some Jokes about Programmers:

A programmer heads out to the store. His wife says "while you're out, get some milk." He never came home.
A wife asks her husband, a programmer, "Could you please go shopping for me and buy one carton of milk and if they have eggs get 6?" A short time later the husband comes back with 6 cartons of milk and his wife asks, "Why did you buy 6 cartons of milk?" He replies, "They had eggs."

Beispiel

Voraussetzungen für dieses Beispiel:

• Der Server muss Python installiert haben
• Die PHP-Funktion exec() oder shell_exec() muss aktiviert sein
• Der Python-Script muss auf demselben Server sein

1. Schreibe den folgenden Script in eine .py-Datei:

a=4.783
b=6.387
c=8.837
if a > b and b < c:
   print(round(a/b,3))
else:
   print(round(b/a,3))

2. Schreibe den folgenden Script in eine .php-Datei:

<?php
     echo shell_exec("python python/py/round.py");
?>

Das Resultat lautet: 1.335

3. Schreibe den obigen Script in diesen ▸ Editor ein.

▲

javascript

Bezüglich smartphone-optimierten Webseiten ist die Verwendung von JavaScripts mit Vorsicht zu geniessen. JavaScript wird 2025 30 Jahre alt: da gab's noch keine Smartphones.

Dieser Text ist editierbar - Änderungen bleiben auch nach dem Schliessen dieser Seite oder dem Beenden des Browsers bestehen, sofern sie (unbedingt!) gespeichert und die Browserdaten nicht gelöscht werden - gilt nur für den verwendeten Computer unter derselben IP und einzig im verwendeten Browser! Voraussetzungen sind 3 JavaScripts - siehe Quelltext. Bedeutet zum Beispiel für SchülerInnen, dass sie bestimmte Texte für eine selbst-bestimmte Zeit in einem bestimmten Computer und einem bestimmten Browser speichern können.

▸

Speichern!

▸ Open ▸ Close the WebCam

Je nach den Einstellungen in deinem Browser öffnet dieser JavaScript die WebCam deines Computers.

Zusammen mit der obigen WebCam kannst du dich in Tagesschau-SprecherIn üben. Die Textmenge, die Höhe der Textbox und die gewählte Browser-Fenster-Grösse bestimmen die Geschwindigkeit der vertikalen Animation.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

carousel

▲

framework

Es gibt unzählige frameworks. Manche sind intuitiver, manche weniger intuitiv in der Verwendung. frameworks sind Bibliotheken, die den eigenen Bedürfnissen angepasst werden können, am besten aber so übernommen werden, wie sie sind.

▸ Beispiel: Folien-Präsentation, welche zum Beispiel im grossen Computer gespielt und mit dem kleinen gesteuert werden kann.

canvas paint

Ein Canvas-Element (englisch für "Leinwand" oder "Gemälde") ist ein – in der Sprache HTML5 – mit Höhen- und Breiten-Angaben beschriebener Bereich, in den per JavaScript gezeichnet werden kann.

Mögliche Anwendung / Beispiel:

Du kannst unsre heutige, 75km lange Tour selbst einzeichnen (scrolle horizontal knapp unterhalb der Karte, d.h. zwischen Karte und Text). Folge wenn immer möglich den schwarzen Linien (= Feld- oder Waldwege) und Grünflächen (= Wald). Wir sind von Stein am Rhein über Eschenz hoch nach Windhausen, Bornhausen und durchs Bannholz nach Wilen und weiter über Herdern, Weinigen und Warth runter zur Thur und dann alles der Thur entlang bis auf die Höhe von Niederneunforn gefahren, haben da die Thur überquert und sind hoch über Fahr- und Burghof und immer mehr oder weniger nordwärts bis zur Strasse zwischen Gisenhard und Sonnenhof gefahren, haben diese überquert und sind weiter immer schön nördwärts bis nach (auf der Karte bis Belzhalden) Basadingen, Diessenhofen, Gailingen und nach Hause gefahren.

▲

audio

Die simple play-stop-play again-Funktion setzt einen Link zu einem stylesheet von 'cloudflare' und einen style zum 'ppbutton' im head (falls du die Grösse des Buttons ändern willst) und je einen Script zu einer Bibliothek von 'cloudflare' und zu einer .js-Datei (im Ordner 'js') aus der open library von CloudFlare voraus.

Das ist kein GIF, also kein animiertes Bild im Graphics Interchange Format, sondern eine SVG, also eine Scalable Vector Graphic. Falls du den Cursor über die Graphic hältst, hörst du Bandit's Symphony - sonst nicht. Funktioniert im Handy unzuverlässig.

Für die nachfolgende Playlist (samt Progress Bar) resp. den Script habe ich Claude gefragt. Herzlichen Dank.

Die nachfolgende Playlist (samt Progress Bar / graphical control) besteht aus den 3 Dateien index.html, style.css und der wohl wichtigsten script.js - in dieser werden die Aufnahmen, d.h. die .mp3-Datei, Titel und Dauer eingeschrieben. Ich weiss beim besten Willen nicht mehr, wo ich diesen Player gefunden habe resp. ob ich irgend ein LMM gefragt habe. Die Aufnahmen mache ich mit der Mobile App Mp3 Recorder und lade sie direkt aus der App mittels ftp auf den Server. Dann schreibe ich wie bereits geschrieben ...

audio record

2019 habe ich für einen sehbehinderten Freund in meiner SoundCloud einen Podcast mit täglichen (insgesamt 33) Episoden unterhalten. Die Aufnahmen habe ich wo und wann immer in der App Sprachmemos gemacht und mit dem grossen Computer in die SoundCloud hochgeladen. Heute, 2024, geht das eleganter.

Heute, 2024, mache ich Audioaufnahmen in der App Mp3 Recorder und lade die Dateien direkt aus der App via FTP auf den Server in den entsprechenden Ordner.

▲

video record

Videoaufnahmen (die ich im ReelDirector II konfektioniere) vor dem Bildschirm mache ich meist mit dem Handy - auf dem Bildschirm des grossen Computers mit dem Filmage Screen Pro oder dem Quicktime Player oder ... (es gibt so viele Möglichkeiten) und konfektioniere sie entweder in iMovie oder in ScreenFlow. Filme >3MB archiviere ich bei streamable (ca.CHF 100/Jahr).

video play

Der Script für diesen onmouseover effect ist von ▸ github.com und funktioniert nur mit .mp4-Dateien - also keinen Links von YT, Vimeo, Streamable, Wistia & Co. Damit der teil-transparente (.8), grayscale (80%)- und sepia (.2)- gefilterte Film im standby auch in Mobiles angezeigt wird, muss dem Video-Script ein gleich grosses Poster zugeschrieben werden. Geschieht wohl am besten mit einem Screenshot des Films.

live!

large language model

Bis heute gibt es keine bessere Einsatzmöglichkeit für Sprachmodelle (LLM) und trainierte Text-Generatoren (GPT) als im Bereich der Script- und Programmiersprachen. Einfach darum, weil Resultate aus Prompts direkt auf deren Richtigkeit überprüft werden. Fragst du ▸ Google Gemini, ChatGPT & Co nach dem Python Script irgend eines Programms, kannst du dieses laufen lassen und erfährst unmittelbar, obs taugt. Beispiel: ▸ thaynger.ch

calc

Dieses webbasierte ▸ Calc Sheet lässt sich auch ▸ sec, allerdings nicht smartphone-optimiert, darstellen. In D1 und E1 siehst du 3 typische Formel-Anwendungen.

Exceltabelle in live.com

Google Tabelle (den embed code gibts nur mit dem grossen Computer!)

▲