Der Thaynger

ist vor allem eine webbasierte Spielwiese für die wesentlichen Sprachen, welche dieses Digitale erst möglich machen - und ab resp. seit dem 2. April 2024 eine gerade und aus naheliegenden Gründen für SchülerInnen unabdingbare, extrem smartphone-optimierte ▸ PWA, das heisst eine auch offline erreichbare Progressive Web App - und zugleich und wohl auch darum ein OnePager, das heisst, von oben bis ▸ unten eine (1) einzige Webseite.

Der Fokus des Thaynger liegt auf den technischen Möglichkeiten, Informationen aller Art im Web zu publizieren - und beginnt etwa mit der Darstellung der Informationen in unterschiedlich grossen Bildschirmen. Man vergleiche diese Seite in Handys und Desktops.

---

Name
Vorname
Strasse PLZ Ort
Telefon
eMail
Nachricht

---

PWA

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.

Öffne diese Seite mit dem Handy und installiere sie auf dem Home-Bildschirm. Dann öffnest du sie über das eben generierte Icon. Dann gehst du offline (z.B. in den Flugmodus) und öffnest die Seite wieder übers Icon. Denk' daran, dass du mit jeder Änderung in dieser Seite das Icon löschst und nach der Änderung neu installierst und den beschriebenen Ablauf wiederholst!

---

LLM, PHP und Video

In dieser Webseite finden die wesentlichen Sprachen (HTML, CSS, JavaScript, PHP, SQL und SVG) und die wesentlichen Elemente (Wort/Schrift, Bild und Ton) statt.

---

php & sql

php is a widely-used and free server scripting language for dynamic and interactive web pages. Beispiel; bis zum 25. April 2024, meinem nächsten Geburtstag, dauert es noch -0 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 müssen 'html'-Dateien .php-Dateien sein!

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.

turn your phone to landscape (de quere-weg)

ID

Nachname

Vorname

Funktion

---

1

Rüedi

Beat

Gründer

2

Meyer

Jonathan

Vice President

3

Tutorial

Video

▸ Video

---

svg

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.

---

calc

Exceltabelle in resp. aus live.com

---

python

Im Mai '22 schrieb ▸ Emil Müller "Seit einigen Wochen drängt sich nun Python auf. Mit ▸ pyScript wird es nun plötzlich 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}")

▲

---

audio

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.

▸ Play ▸ Pause

---

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

---

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.

▲