Der Thaynger

ist, zusammen mit einem ▸ CMS, eine ▸ PLE, d.h. zuerst einmal eine webbasierte und offene Lehr- und Lernumgebung - und seit dem 2. April 2024 eine ▸ PWA, das heisst eine in Mobiles auch offline erreichbare Progressive Web App - und zugleich ein OnePager, d.h. von oben bis unten eine einzige, extrem smartphone-optimierte Webseite. Zudem ist der Thaynger eine webbasierte Umgebung, die von allen mit-gestaltet werden kann. Man installiere irgend ein FTP Programm und melde sich auf dem Server an. Und: eigentlich ist der Thaynger gar kein Thaynger - nur ein Zugezogener.

Content:

(die Navigation in einem OnePager geschieht mit Vorteil mittels Sprungmarken / Anker, siehe auch links der vertikalen Achse) - Beispiele:

▸ Python ▸ PWA ▸ Video

---

How 2 start

Eine Domain registriert man sich wohl am besten beim Host seiner Wahl, bestimmt den Umfang / die gewünschten Leistungen des Hostings, installiert in seinen Compis irgend ein FTP Programm und weist sich eine (die!) wohl beste Hilfe zu:

▸ w3schools.

---

Man schreibt, der grösste Teil aller Websites seien CMS, Content Management Systems, egal, ob Drupal, Joomla!, Plone, TYPO3 oder WordPress. Auch der Thaynger unterhält ein

▸ CMS

---

Interaktiv

Du kannst diesen Text editieren / löschen / überschreiben / erweitern / ergänzen / ... - die Sache ist allerdings nicht nachhaltig. Aber interaktiv. Möglich machts die Auszeichnung contenteditable="true"

Die vermutlich weitest-verbreitete Interaktion ist die Kontaktaufnahme:

Name
Vorname
Strasse PLZ Ort
Telefon
eMail
Nachricht

---

Volksschülerïnnen tun gut daran, ihr Handy aus verständlichen Gründen während des Präsenzunterrichts zumindest für eine Präsentation in den Flugmodus (✈) zu versetzen. Damit ihre PLE (Beispiel: ▸ Gerlinde) dennoch erreichbar ist, muss diese als PWA geschrieben sein (z.B. bei WordPress ganz einfach mit einem Plugin). Die thaynger.ch ist eine solche Progressive Web App, bestehend aus den Dateien index.php, manifest.json (muss gleich der index.php zuoberst in der Server-Struktur sein) und service-worker.js. Die Domain muss zwingend über https laufen, d.h. mit einem Sicherheits-Zertifikat (s) ausgerüstet sein. Die Scripts habe ich mit dem Prompt "minimal progressive web app" von claude 3 erhalten (= wohl die vornehmste Art, ein LLM einzusetzen). Die service-worker.js brauchts, damit diese PWA mobile auch offline erreichbar ist.

---

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 189 Tage. 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 muss die Datei eine .php-Datei sein! Den Script habe ich von einem LLM schreiben lassen.

SQL (bildet zusammen mit PHP quasi ein Begriffspaar) ist eine Standardsprache zum Speichern, Bearbeiten und Abrufen von Daten in Datenbanken. MySQL (vielleicht "Structured Query Language") ist das wohl populärste Datenbanksystem. MySQL ist schnell, zuverlässig, einfach zu handhaben, supported by Oracle Corporation und nach der Tochter (My) des Mit-Entwicklers Widenius benannt. Im nachfolgenden Beispiel werden Daten aus einer Tabelle ausgelesen (select) und nach ID sortiert (ORDER BY) in einer HTML-Tabelle dargestellt. Zuerst solltest du aber die ▸ Verbindung zur Datenbank überprüfen!

ID

Nachname

Vorname

Funktion

---

1

Rüedi

Beat

Gründer

2

Meyer

Jonathan

Vice President

3

Tutorial

Video

▸ Video

---

Zoom die Seite soweit es geht: Das Wappen bleibt immer scharf. Wesentlicher Vorteil des vektorbasierten SVG-Formates gegenüber anderen Grafikformaten wie JPG, PNG oder TIFF ist – insbesondere im responsiven Webdesign – die Skalierbarkeit ohne Qualitätsverlust, gegenüber der prinzipbedingt verlustbehafteten Skalierbarkeit von pixel-basierten Rastergrafiken. Das Schreiben einer Graphik hat weniger mit dem technischen Schreiben als viel, wirklich viel mehr mit dem Vorstellungsvermögen zu tun. So setzt sich das Wappen aus einem roten Rechteck, einem roten Kreis und zwei weissen Rechtecken zusammen - siehe im Quelltext dieser Seite.

SekundarschülerInnen würden geometrische Probleme schreiben und lösen, wenn Schule könnte!

SekundarschülerInnen würden einen Audio/Videowalk produzieren, wenn Schule könnte!

oben siehst du ein paar gemeinden im kanton schaffhausen. den umriss des kantons (so gegoogelt und ge-screenshot-et) habe ich im pixelmator 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. im quelltext dieser seite siehst du die vertikale anordnung der verschiedenen scripts. dabei gilt: oben ist unten!

Nachfolgend siehst du denselben Kanton Schaffhausen in SVG 'gezeichnet'

Das nachfolgende Bild der Gemeinden des Kantons Schaffhausen ist von Wikipedia. Ich habs im Pixelmator Pro präpariert.

---

Exceltabelle in resp. aus (Microschrott-) live.com. Du kannst darin machen, was du willst - die Sache ist einfach nicht nachhaltig!

---

Im Mai '22 schrieb ▸ Emil Müller "Seit einigen Wochen drängt sich nun Python auf. Mit ▸ pyScript wird es möglich, in Webseiten Python-Code auszuführen. ▸ Click/touch the Icon. ▸ Hilfe

Beispiel 1 (if else):
Beachte die eingezogenen print!

a=4 
b=5 
if a>=b:
	print('stimmt')
else:
	print('stimmt nicht')

Resultat:
a=4 b=5 if a>=b: print('stimmt') else: print('stimmt nicht')

---

Beispiel 2 (if and else):

a = 200
b = 330
c = 500
if a > b and c > a:
  print('both conditions are true')
else:
  print('falsch')

Resultat:
a = 200 b = 330 c = 500 if a > b and b < c: print('both conditions are true') else: print('falsch')

---

Beispiel 3: 4³

import math
x = pow(4, 3)
print(x)

Resultat: import math x = pow(4, 3) print(x)

Beispiel 3a: Quadratwurzel aus 16

import math
print(math.sqrt(16))

Resultat: import math print(math.sqrt(16))

Beispiel 3b: und die 4. Wurzel aus 256

import math
print(256 ** (1/4))

Resultat: import math print(256 ** (1/4))

---

Beispiel 4: if go to url else

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

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

▸ open URL
▸ open URL in 5 seconds (JS)
▸ open URL if username =

---

Beispiel 5: sum, result & f-strings
(f-strings provide a way to embed expressions inside string literals, using a minimal syntax. It should be noted that an f-string is really an expression evaluated at run time, not a constant value. In Python source code, an f-string is a literal string, prefixed with 'f', which contains expressions inside braces.)

a = (1, 3, 5, 7, 9)
x = sum(a)
y = x*5 (not 5x!)
print(f"Die Summe von a ist x = {x}")
print(f" und 5x ist 5*y = {y}")

Resultat: a = (1, 3, 5, 7, 9) x = sum(a) y = x*5 print(f"Die Summe von a ist x = {x}") print(f" und 5x ist 5*y = {y}")

---

Beispiel 6: Ist eine Stadt in einer Städteliste aufgeführt?

cities = ["Berlin", "Hamburg", "München", 
"Köln", "Frankfurt"]

city_to_find = "München"

if city_to_find in cities:
    print(f"Die Stadt {city_to_find} 
    ist in der Liste enthalten.")
else:
    print(f"Die Stadt {city_to_find} ist 
    nicht in der Liste enthalten.")

Ausgabe: # Liste mit Städten cities = ["Berlin", "Hamburg", "München", "Köln", "Frankfurt"] # Stadt, nach der gesucht werden soll city_to_find = "München" # Überprüfen, ob die Stadt in der Liste enthalten ist if city_to_find in cities: print(f"Die Stadt {city_to_find} ist in der Liste enthalten.") else: print(f"Die Stadt {city_to_find} ist nicht in der Liste enthalten.")

---

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.

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

---

Der nachfolgende, responsive audio player mit progress bar und playlist besteht aus den Dateien index.htm, script.js (darin befindet sich die playlist) und style.css - plus dem Link im head zu kit.fontawesome.com für die Pfeile.

---

Manchmal, eher selten, bin ich live.

Filme grösser Imagefilme >=5MB archiviere ich bei streamable.com

Filme müssen nicht nur rechteckig sein

Filme müssen ja nicht immer rechteckig sein. 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. 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 (lässt sich in streamable ganz einfach cropen) - damit der Text schön um den Film fliesst. Maximal 5MB kleine Imagefilme ohne Ton und in Endlosschleife parkiere ich darum auf dem Server meines Host, damit sie auch in mobile devices automatisch spielen.

---

Das Bild lässt sich horizontal und vertikal scrollen. Darin könntest du unsere kleine Velotour vom 4.4.24 einzeichnen - wenn ich dir so genau wie möglich beschreiben würde, wo wir durchgefahren sind. Wie “das” geht?
Den Canvas Script habe ich von ▸ CODE PROJECT. Dem div im body habe ich das entsprechende background-image eingeschrieben und den stroke (bzw. line) die Farbe rot und die Stärke 4 zugewiesen. Thats IT! ▸ Beispiel, aufgenommen und darin gezeichnet mit dem Movavi Screen Recorder (Desktop App).

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.

---

Sollte diese Seite einfach immer weitergehen, sollte sie oben mit einem Inhaltsverzeichnis (▸ Beispiel) erweitert werden. Dabei führen Sprungmarken (Anker - siehe nachfolgend den Pfeil nach oben) zu den einzelnen Abschnitten.

▲