Wie man AJAX benutzt um eine App für HTML5 und CSS3 zu programmieren Programmierung - Dummies

Jeder möchte heutzutage mobile Apps erstellen. Hier ist das große Geheimnis. Viele Apps sind wirklich in HTML5, CSS und JavaScript geschrieben. Sie kennen bereits alles, was Sie für die Erstellung von Apps benötigen, die auf mobilen Geräten funktionieren. Besser noch: Sie müssen keine neue Sprache erlernen oder eine Genehmigung vom App Store erhalten oder eine Lizenz erwerben, wie Sie dies für native Apps tun.

Es gibt ein paar wunderbare Tricks, die du für iOS-Nutzer tun kannst. Sie können Ihr Programm so gestalten, dass der Benutzer ein Symbol direkt auf dem Desktop hinzufügen kann. Der Benutzer kann dann das Programm wie jede andere App starten. Sie können den Browser auch dazu bringen, die normalen Browser-Accoutrements zu verbergen, damit Ihr Programm nicht so aussieht, als würde es in einem Browser laufen!

Es stellt sich heraus, dass diese Effekte recht einfach sind.

Hinzufügen eines Symbols zu Ihrem Programm

Moderne iOS-Versionen (das iPhone / iPad-Betriebssystem) können bereits eine beliebige Webseite auf dem Desktop speichern. Betrachten Sie einfach die Webseite in Safari und klicken Sie auf die Schaltfläche Freigeben. Sie finden eine Option zum Speichern der Webseite auf dem Desktop. Sie können Ihre Benutzer anweisen, dies zu tun, und sie können Ihr Programm wie eine normale App starten.

Das Standardsymbol für eine gespeicherte App ist jedoch ziemlich hässlich. Wenn Sie ein hübsch aussehendes Symbol möchten, können Sie ein kleines Bild als ein speichern. Png-Datei und legen Sie es in das gleiche Verzeichnis wie Ihr Programm. Dann können Sie diese Zeile zu Ihrer Seite hinzufügen (in der Kopfzeile) und dieses Bild erscheint auf dem Desktop, wenn der Benutzer Ihr Programm speichert:

Als zusätzlichen Bonus passt das iPhone oder iPad das Bild automatisch an Apple-Symbol, das die der installierten Version von iOS entsprechenden Effekte enthält (abgerundet und glasklar in iOS6, flach in iOS7).

Dieser Icon-Trick ist natürlich ein Apple-only-Mechanismus. Bei den meisten Android-Versionen kann jedes Lesezeichen, das Sie mit Ihrem Hauptbrowser festgelegt haben, zum Desktop hinzugefügt werden. Es gibt jedoch keine benutzerdefinierte Symboloption. Die Apple-Touch-Icon-Direktive wird ignoriert, wenn Sie ein anderes Betriebssystem verwenden.

Entfernen der Safari-Symbolleiste

Obwohl Ihr Programm auf dem Hauptbildschirm gut aussieht, ist es dennoch offensichtlich, dass das Programm Teil des Webbrowsers ist, wenn der Benutzer das Programm aktiviert. Sie können die Browser-Symbolleiste einfach mit einer anderen Zeile in der Kopfzeile ausblenden:

Dieser Code ändert nichts, es sei denn, das Programm wird vom Desktop aus aufgerufen. In diesem Fall wird die Symbolleiste jedoch ausgeblendet, sodass das Programm wie eine ausgewachsene App aussieht und sich anfühlt. Als zusätzlichen Bonus wird das Programm im Vollbildmodus ausgeführt, sodass Sie etwas mehr Spielraum haben.

Auch dies ist eine Apple-spezifische Lösung. Es gibt keine einfache Möglichkeit, den gleichen Effekt auf Android-Geräten zu erzielen.

Programm offline speichern

Ihr Programm sieht jetzt aus wie eine App, nur dass es nur läuft, wenn Sie mit dem Internet verbunden sind. HTML5 hat eine wunderbare Funktion, mit der Sie eine ganze Webseite lokal speichern können, wenn sie zum ersten Mal ausgeführt wird.

Wenn der Benutzer versucht, auf das Programm zuzugreifen, und das System nicht online gehen kann, wird stattdessen die lokale Kopie des Spiels ausgeführt. Im Wesentlichen wird das Programm beim ersten Aktivieren heruntergeladen und bleibt auf dem lokalen Gerät.

Dies ist ein relativ einfacher Effekt:

• Machen Sie Ihr Programm stabil: Bevor Sie den Offline-Speichermechanismus verwenden können, sollten Sie sicherstellen, dass Ihr Programm kurz vor der Veröffentlichung steht. Sie müssen mindestens sicherstellen, dass Sie alle externen Dateien kennen, die für das Spiel benötigt werden.

• Verwenden Sie nur lokale Ressourcen: Bei dieser Art von Projekt können Sie sich nicht auf das externe Internet verlassen. Daher müssen alle Dateien lokal sein. Dies bedeutet, dass Sie PHP oder externe Dateien nicht wirklich verwenden können. Sie müssen eine lokale Kopie von allem auf dem Server haben.

• Baue einen Cahce. Manifestdatei: Sieh dir das Verzeichnis an, das dein Spiel enthält, und erstelle eine neue Textdatei namens.

• Schreiben Sie die erste Zeile: Die erste Zeile des Caches. Manifestdatei sollte nur den Text CACHE MANIFEST enthalten (alle in Großbuchstaben).

• Erstellen Sie eine Liste aller Dateien im Verzeichnis: Schreiben Sie den Namen jeder Datei in das Verzeichnis, eine Datei pro Zeile. Seien Sie vorsichtig mit Ihrer Großschreibung und Rechtschreibung.

• Fügen Sie das Manifestattribut hinzu: Das Tag hat ein neues Attribut namens manifest. Verwenden Sie dies, um dem Server zu beschreiben, auf dem sich das Cache-Manifest befindet:

• Laden Sie die Seite normal: Sie müssen die Webseite einmal normal laden. Wenn alles richtig eingerichtet ist, erstellt der Browser leise eine Kopie der Datei.

• Offline testen: Die beste Methode zum Testen des Offlinespeichers besteht darin, den drahtlosen Zugriff auf dem Computer vorübergehend auszuschalten und anschließend auf die Datei zuzugreifen. Wenn alles geklappt hat, sollten Sie Ihre Seite so sehen können, als wären Sie noch online.

• Server-Einstellungen prüfen: Wenn der Offline-Speicher nicht funktioniert, müssen Sie möglicherweise mit Ihrer Server-Administration nachfragen. Der Text / Manifest-MIME-Typ muss auf dem Server konfiguriert werden. Möglicherweise müssen Sie Ihren Serveradministrator bitten, diese Option in der Liste festzulegen. htaccess-Datei für Ihr Konto:

  addtype text / cache-manifest. manifest
  

Beachten Sie, dass der Cache-Manifest-Mechanismus mehrere Stunden benötigt, um Änderungen zu erkennen. Wenn Sie also Änderungen an Ihrer Seite vornehmen, werden diese Änderungen nicht automatisch auf den lokalen Browser aktualisiert. Deshalb ist es am besten, die Offline-Archivierung für das Ende Ihres Projektentwicklungszyklus zu speichern.