Webentwicklung mit dem iPad?

22.01.2023

Anzahl Worte: 647

WorldWideWeb für iOS

Die Leute von IconFactory (das sind die, die mit Twitterific den ersten Client für Twitter gebaut hatten und von denen die Idee mit dem blauen Vogel als Logo stammt. Wusstet Ihr alle nicht, gelle? 😉) haben letzten Sommer eine App veröffentlicht, die ich hier gerne wieder einmal loben möchte, denn sie ermöglicht es, es iPad (z.B. im Informatikunterricht) tatsächlich als Werkzeug zur Webentwicklung bzw. zum Lernen von Webentwicklung einzusetzen.

Hier ist der Link zum originalen Blogpost: https://blog.iconfactory.com/2022/06/worldwideweb-part-2/

Das Beste: die App läuft nicht nur auf dem Mac und auf iOS, sondern ist auch noch kostenfrei nutzbar. Alles, was Ihr sonst noch braucht, ist ein guter Editor (da´von gibt es jede Menge und ich werde mich hüten, einen speziellen zu empfehlen 🤣) und eventuell einen Client für git (hier empfehle ich schon und zwar “Working Copy”). Schon ist das iPad ein Arbeitsplatz zum Lernen und Entwickeln unterwegs!

Mini-Tutorial

Starten des Servers

Nach dem Herunterladen der App und dem Öffnen sieht das so aus wie auf dem folgenden Screenshot

Startbildschirm von WorldWideWeb

Es gibt nicht viele Optionen: einen Ordner, aus dem die Dateien an den Browser geliefert werden und Schaltflächen zum Starten und Stoppen des Servers und für die EInstellungen.

Dann gibt es unten noch drei Tabs: Web Server, Browser und About. Die werden wir uns gleich ansehen. Aber der Reihe nach…

Ordner auswählen

Ganz vereinfacht ist ein HTTP-Server ein Programm, das per HTTP-Protokoll auf irgendeinem Rechner eine Anfrage annimmt und dann die entsprechenden Dateien an den Web-Browser zurück schickt. Diese Dateien müssen nun irgendwo her kommen. Bei fast allen Webservern kommen die aus einer Ordner, der als Basisverzeichnis für alle Dateien festgelegt wurde (das sog. web root). Das ist der Ordner, der oben in der Einstellung festgelegt werden muss.

Da wir in unserem kleinen Tutorial alles lokal auf dem iPad machen wollen, brauchen wir dafür einen Ordner auf dem iPad. Also öffne ich die Dateien-App von iOS und wähle aus der Seitenleiste links den Punkt Auf meinem iPad (1) und dann im Detailbereich rechts oben das Symbol für das Erstellen eines neuen Ordners (2) und lege einen neuen Ordner an, den ich für das Tutorial hier html-local nenne.

Neuen Ordner mit Dateien-App erstellen

Genau diesen* Ordner wähle ich nun in der App “WorldWideWeb” als Basisordner für meine Dateien aus:

Auswahl des web root in der Server-App

Ja, da wird angezeigt, dass der Ordner noch leer ist, weil ich den gerade erzeugt habe. Gleich kommt das was rein, keine Angst. 😉

Die erste HTML-Datei erstellen

Jetzt benötigen ich einen Texteditor zum Schreiben der HTML-Dateien. Wie bereits oben geschrieben, ist es völlig egal, welche App, solange sie in der Lage ist, reinen TExt zu produzieren. Zwei Beispiele sind die Editor-Apps “Textastic” oder “Runestone”. WIchtig sind beim Erstellen der Datei nur zwei Sachen:

Die Datei muss in dem Ordner liegen, der bei WorldWideWeb als Ordner ausgewählt wurde (hier also html-local)
Die Datei muss die Dateierweiterung .html besitzen, damit die App auch erkennt, dass es sich um eine HTML-Datei handelt

Für das Tutorial hier nenne ich die Datei demo.html

Neue Datei in Runestone erstellen (jeder anderen Texteditor funktioniert auch)

Als Inhalte der Datei verwende ich eine ziemlich minimalistische HTML-Seite:

<!doctype html>
<html>
    <head>
        <title>Eine HTML-Seite</title>
    </head>
    <body>
        <h1>Der Titel</h1>
        <p>Das ist eine HTML-Datei</p>
    </body>
</html>

Dann die Datei speichern und zurück zur Webserver-App WorldWideWeb wechseln…

Die HTML-Seite anzeigen

Dazu klicken ich unten den Tab “Browser” an in der App WorldWideWeb

Aktivieren des Tabs “Browser”

Oben werden mir zwei Auswahloptionen angeboten: ein “Secure Context” und eine mit dem Namen meines iPads. Mehr dazu später, für den ersten Test ist egal, welche Option ich wähle. ALso tippe ich auf “Secure Context”.

Jetzt erhalte ich eine Auflistung des Ordners mit allen darin enthaltenen Dateien (ist ja erst eine 😉) und kann diese antippen, um diese Datei im integrierten Browser anzuzeigen.

Anzeige der Dateien im web root

Als Ergebnis bekomme ich eine Ansicht im Browser in der Darstellung, wie ich es im Web erwarten würde.

Die dargestellte HTML-Seite im Browser-Tab

Kommentare?!

Kommentare dazu gerne im Fediverse auf Mastodon an @Linkshaender@bildung.social. Wer sich fragt, warum die Kommentare deaktiviert sind, findet hier die Antwort: https://www.arminhanisch.de/2020/06/kommentare-im-blog/

Lizenz für diesen Post CC-BY-SA 4.0