INTRO

Am 3. August '26 habe ich Claude gebeten, eine (was das vertikale und horizontale scroll snap betrifft) TikTok nachempfundene .html-Seite mit sowohl nebeneinander- als auch übereinander-liegenden Bildern und/oder Videos und/oder Text zu schreiben. Nun bin ich daran, den Script und damit diese Webseite meinen Vorstellungen entsprechend anzupassen und zu erweitern. So soll diese Webseite gleichzeitig eine offline erreichbare PWA sein.

▸ scroll to the right.

Vorläufig wird das Layout dieses One Pagers durch ein Bild/Video auf der linken und den dazugehörenden Text auf der rechten Seite bestimmt. Die entsprechende Navigation versteht wohl nur, wer bis hierhin gelesen und verstanden hat.

Zuerst einmal darf die Progressive Web App nicht mit einer native App verwechselt werden. Jede Website kann einfach als PWA eingerichtet, auf dem mobile Homescreen installiert und mit dem Icon auch offline erreicht werden.

▸ scroll down

Das Bild im Verhältnis 9:16 ist von A aus Z. Es befindet sich localhost auf dem Server. Es ist mit width und min-height=100% und leicht entfärbt und leicht aufgehellt ausgezeichnet (CSS).

Den Film (eigentlich eine Slideshow) habe ich mit der mobile App ReelDirectorII produziert (weil iMovie mobile Portrait nicht kann [sic!]) und in 4K gespeichert, in meine Streamable Mediathek exportiert und den embed code hier eingesetzt.

Das Video ist ein Screen Record (mit Screenflow den Bildschirm meines Desktop Computer aufgenommen) von Facebook Reels, das ich erst in meiner Streamable Mediathek ungefähr im Verhältnis 1:2 zugeschnitten habe. Der embed script bestimmt, dass das Video automatisch gespielt wird - das heisst, dass es darum, zumindest im iPhone, gemutet sein muss.

Das Poster (Bild von pexels) "überdeckt" ein Video resp. einen Screensrecord des Bildschirms meines Laptops.

Ich habe während der Fahrt* mein Handy aus dem Hosensack genommen, die Kamera aktiviert, die Aufnahme gemacht, die Kamera deaktiviert und das Handy schnell wieder im Hosensack verschwinden lassen. *Ich weiss, sollte man nicht tun.

Die Aufnahme habe ich ohne weiteres Dazutun in meine Streamable-Mediathek exportiert.

Ich speichere meine Bilder hochauflösend im HEIC-Format (High Efficiency Image Codec). Für Webseiten öffne ich sie im Pixelmator und sende sie von dort direkt auf den Server, nun im .jpg-Format.

Das Poster (Bild von pexels) "überdeckt" ein Video Tutorial resp. einen Screensrecord des Bildschirms meines Handys. Die Aufnahme habe ich im Laptop mit Screenflow aufgenommen und konfektioniert (= Hinweispfeile und Musik). Das Video wiegt <4MB und befindet sich auf dem Server meines Hostings. Touch it 4 stop & go.

Die beiden Filme habe ich mit der mobile App ReelDirectorII produziert/konfektioniert (weil iMovie mobile Portrait nicht kann [sic!]) und in 4K gespeichert, in meine Streamable Mediathek exportiert und den embed code hier eingesetzt.

Newsletter

Anmelden

Die offline, indexedDB-gespeicherten Daten werden mit der nächsten Internet-Verbindung automatisch in eine mySQL-Datenbank übertragen.

---

UP!