HTML Inhalte, welche in einem Browser auf einem mobilen Gerät  (Smartphone oder Tablet) laufen, sind grundsätzlich auch mit Purple DS auf diesen Geräten nutzbar. Um HTML Inhalte auf Kompatibilität für die Verwendung in Purple DS Apps zu prüfen, bietet sich die Nutzung eines lokalen Webservers an. 

  1. Erstellen Sie zunächst HTML Inhalte auf Ihrem Rechner.
  2. Installieren und aktivieren Sie den lokalen Webserver.
  3. Sichern Sie die Inhalte im entsprechenden Ordner. Damit können Sie die Inhalte testen, ohne diese auf eine öffentliche Webseite zu laden. Diese lokale Webseite ist nur innerhalb Ihres W-Lan erreichbar.
  4. Testen Sie die Inhalte im Browser auf Ihrem MAC bzw. Ihren mobilen Geräten.


Hinweis: Beachten Sie bitte, dass unterschiedliche Android- und iOS- Versionen auch unterschiedliches Verhalten / Features bzgl. HTML aufweisen. Im Zweifel müssten Sie das HTML mit verschiedenen mobilen Geräten testen.


Falls Sie noch keinen Webserver installiert haben, können Sie dies wie folgt schnell und einfach tun:


Installation des Webservers

  • Laden sie z.B. XAMPP hier herunter (enthält den Apache Webserver)
  • Nachdem sie das DMG Paket heruntergeladen haben, öffnen Sie dieses bitte und folgen den Installationsanweisungen (englisch).


Nach diesen zwei Schritten ist XAMPP unter /Anwendungen/XAMPP installiert. 


Start des Webservers

  • Um XAMPP zu starten, klicken Sie bitte einfach auf das XAMPP Programm Icon. Das Programm startet dann mit folgendem Fenster:



  • Mit Klick auf "Start" vergibt der XAMPP Dienst nun eine interne IP-Adresse und bei erfolgreicher Vergabe sollte das Programmfenster wie folgt aussehen:




  • Erstellen Sie im Punkt "Network" bitte noch einen neuen Eintrag für die Port-Weiterleitung für den "localhost" indem Sie auf "Add" klicken, als LocalPort den Wert 8080 und als RemotePort den Wert 80 setzen.



  • Es sollte folgender Eintrag erscheinen:

  • Aktivieren Sie den Eintrag mit "Enable" (grünes Licht vor dem Eintrag).


  • Um nun Ihre Webinhalte lokal testen zu können, klicken Sie bitte auf den Button "Volumes" im XAMPP Menü. Klicken Sie auf "Mount" und binden damit das vorhandene Laufwerk ein. Anschliessend wählen Sie "Explore".



  • In der sich nun geöffneten Finder Oberfläche gehen Sie bitte in den Ordner "htdocs" und erstellen dort einen neuen Ordner (z.B. "mobile"). Alle HTML Daten, die Sie in diesen Ordner ablegen, können Sie anschliessend im Browser unter folgendem Pfad aufrufen:


<IP-Adresse von XAMMP>/<Ordnername>/<Name der HTML Datei>


Haben Sie zum Beispiel die IP-Adresse 192.168.64.2, den Ordner "mobile" angelegt und in diesen dann eine test.html inklusive aller Anlagen bereitgestellt, so können Sie diese Inhalte im Browser über folgende URL aufrufen:


192.168.64.2/mobile/test.html




Test auf mobilen Devices


  • Stellen Sie sicher, dass sich sowohl Ihr mobiles Gerät als auch der Ihr Rechner im selben W-Lan Netzwerk befinden.
  • Für den Test benötigen Sie die W-Lan IP-Adresse des Rechners auf dem Xampp läuft. 
    Diese finden Sie in den Netzwerkeinstellungen:


<IP-Adresse des Rechners>:<Port>/<Ordnername>/<Name der HTML Datei>


Haben Sie zum Beispiel die IP-Adresse 10.42.18.57 und oben den Port auf :8080 festgelegt, dann müssen diese beiden Teile in der URL zusammengefügt werden. Fügen Sie dann den angelegten Ordner "mobile" und die darin befindliche test.html an. inklusive aller Anlagen bereitgestellt, so können Sie diese Inhalte im mobilen Browser über folgende URL aufrufen:


10.42.18.57:8080/mobile/test.html


Tragen Sie diese URL in die Adresszeile des Browsers auf Ihrem Tablet oder Smartphone ein und prüfen Sie, ob die gewünschte Seite angezeigt wird. 


Werden die Inhalte im mobilen Browser nun korrekt angezeigt, sollten Sie auch in Purple DS Apps funktionieren. 


Soll das HTML auch offline funktionieren, stellen Sie bitte sicher, dass keine externen Daten geladen werden müssen, z.B. Bilder, Videos, CSS, Javascript etc. Dies können Sie testen, indem Sie alle Netzwerkverbindungen Ihres Macs deaktivieren und mit einem lokalen Browser Ihr HTML Projekt aufrufen, also z.B. 192.168.64.2/mobile/test.html