Diese in jeder Hinsicht extrem smartphone-optimierte, von wirklich allen editierbare, d.h. interaktive Webseite folgt dem Prinzip "Seilschaft": das schwächste Glied bestimmt über Gedeih und Verderben. Sie geht davon aus, dass du, falls du dich auf dem ▸ Server anmeldest, einfach nur ein ▸ Problem löst und dabei genau deine Dateien wie auch immer gestaltest. Jedes andere Tun hat das unwiderrufliche Löschen der Seite zur Folge.
▸ Play ▸ Pause

um was es geht

Ums Lösen von Problemen unter digitalen Bedingungen, um die Sprachen, welche solches Tun erst möglich machen, ums orts-, zeit- und lernpartner-unabhängige Zusammenarbeiten und ums webbasierte und öffentliche Abbilden dieses Tuns. Aber eigentlich nur ums Problemlösen als schon-immer-Schlüsselkompetenz. Diese Probleme können, müssen aber nicht deiner Erwartungshaltung entsprechen. Beispiel: Du willst dich in einem fächerübergreifenden Projekt mit der ▸ temperierten Stimmung befassen / auseinandersetzen, aber weder Unterhaltungskünstler noch Meteorologin noch Heizungstechniker noch Musikerin werden. Dabei schreibst du resp. lässt schreiben, übersetzt, sprichst, nimmst auf, zeichnest (auch digital), rechnest resp. lässt rechnen, ... oder du arbeitest beim ZVV und bist sowohl für den Nachtfahrplan als auch für dessen webbasierte Publikation zuständig. Siehe ▸ DSS

---

Aber schön der Reihe nach:
Zuerst schaffst du dir eine webbasierte Umgebung

domain, subdomain, ftp

Das links ist kein Bild, sondern das Standbild eines Films! Eine Domain samt Hosting lässt man sich am einfachsten bei einem ▸ Host einrichten. Budget-Abo's gibts ab CHF 100/Jahr. Im absoluten Idealfall vergibt eine Schule für jede Klasse eine Subdomain samt Datenbank. 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. Hier hast du einen Kollektiv-Zugang zu der Subdomain kurs.imnusshof.ch.

html

the hypertext markup language is the standard markup language for hyper-linked web pages.

Eine kleine Spielerei: du kannst diesen Textabschnitt löschen respektive überschreiben (lassen = diktieren). Die Sache ist allerdings nicht nachhaltig: mit dem Schliessen und/oder Reload dieser Seite verschwinden deine Änderungen.

---

Dann stylest du deine Umgebung:

'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.

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.

---

▲

---

Siehe auch und vorallem: ▸ 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 361 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!

LLM wie ChatGPT liefern dir in Sekundenschnelle solche und weitere Scripts. Eigentlich sind sie dazu geradezu prädesteniert.

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)

ID

Video

Beschreibung

1

Mein Name ist Beat Rüedi. Clickst/touchst du in mein Bild, öffnet sich in einem neuen Tabulator ein Video. Dieses befindet sich darum bei streamable, weil solcherart genau der Film gespielt wird, der gespielt werden soll. Nicht mehr und nicht weniger - keine Vorschau, keine weiteren Hinweise, keine Werbung - einfach nur genau der Film.

2

Dieses tonlose, kleine, nur 1.3MB leichte Image Video befindet sich darum auf dem Server meines Host, weil Videos nur so, falls erwünscht, auch in mobiles automatisch gespielt werden - allerdings müssen sie, zumindest im iPhone, gemutet sein.

▸ DSS (Dynamic Style Sheet)

---

▲

---

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. Mit SVG lässt sich jede geometrische Figur beschreiben.

---

programming

Eigentlich sollte das Programmieren in der Volksschule so aussehen - nur kann das die Schule, angefangen mit den PHs, nicht. So werden vorgefertigte Blöcke nach try & error zueinandergeschoben, bis das Resultat stimmt. Das ist halt wie Rechnen versus: es sind 5 Personen im Bus, 7 steigen aus und 2 gehen rein: wieviele Personen sind im Bus?

oder: wenn sich die Mutter aller mit einer relativ neuen Sprache trifft:

▸ start

Beispiel:
(wird hier dank ▸ pyscript.js direkt in html ausgeführt)

import webbrowser
if 4 + 5 == 8:
    webbrowser.open("https://imnusshof.ch")
else:
    print("falsch")
    

bei 4+5=9 würde die imnusshof.ch geöffnet - so aber lautet das Resultat:
import webbrowser if 4 + 5 == 8: webbrowser.open("https://imnusshof.ch") else: print("falsch")

---

Siehe auch und vorallem: ▸ 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."

---

▲

---

▸ Key Codes

---

▸ Open ▸ Close the WebCam

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

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.

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.

---

▲

---

  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.

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.

Obwohl ich nicht wirklich podcaste, unterhalte ich sporadisch einen solchen - einzig, um die intuitivsten Möglichkeiten von Aufnahmen und Speichern im Auge zu behalten.

▸ Apple Podcast

---

▲

---

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.

---

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

---

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 (wo ich mich mobile komischerweise nicht anmelden kann)

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

---