Es ist Donnerstag, der 7.11.2024 00:34 Uhr
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.
CMS
▸ 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:
PWA
Datenbank, PHP, SQL
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 |
SVG
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.
Kalkulation
Exceltabelle in resp. aus (Microschrott-) live.com. Du kannst darin machen, was du willst - die Sache ist einfach nicht nachhaltig!
Python
Beispiel 1 (if else):
Beachte die eingezogenen print!
a=4 b=5 if a>=b: print('stimmt') else: print('stimmt nicht')
Resultat:
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:
Beispiel 3: 43
import math x = pow(4, 3) print(x)Resultat:
Beispiel 3a: Quadratwurzel aus 16
import math print(math.sqrt(16))Resultat:
Beispiel 3b: und die 4. Wurzel aus 256
import math print(256 ** (1/4))Resultat:
Beispiel 4: if go to url else
import webbrowser if 4 + 5 == 8: webbrowser.open("https://imnusshof.ch") else: print('falsch')Resultat:
▸ 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:
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:
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.
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.
Video
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.
Canvas
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.