Der administrative Zugang zum ▸ Server, in/auf welchem sich diese Webseite befindet, folgt dem Prinzip "Seilschaft": das schwächste Glied bestimmt über Gedeih und Verderben.

um was es geht

Um's webbasierte, im absoluten Idealfall smartphone-optimierte Abbilden von Daten resp. um die wesentlichsten (HTML, JavaScript und PHP), dafür notwendigen Scriptsprachen.

Wir treffen uns physisch am 23. Oktober 2024 um 13 Uhr im Ratskeller Thayngen und nachher virtuell, online, wann und wo und mit wem immer.

Heute ist Donnerstag, der
21.11.24 und es ist mit dem Öffnen dieser Seite 8.18 Uhr. Bis zum 23. Oktober 2024 sind's demnach noch 29 Tage.

---

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

1. 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
2. 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
3. Öffne deine Datei und editiere sie

---

---

---

---

---

---

---

---

---

---

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

---

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

---

▲

---

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

---

programming

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

▸ start

---

▲

---

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.

▸

---

▸ 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!)

---