Inhaltsverzeichnis
Die Entwicklung in HTML5 ist heute ein Standard, da es in einem Browser oder auf mobilen Geräten über hybride Anwendungen funktioniert. Wenn die Anwendung oder Website in Chrome, Firefox oder einem anderen Browser funktioniert und an Bildschirmauflösungen von mobilen Geräten angepasst ist, haben wir daher ohne viele Änderungen auch eine mobile Anwendung für Android oder IOS.
Eines der wichtigsten kostenlosen Tools für die Programmierung ist Netbeans, da Sie damit traditionelle Websites oder native oder hybride mobile Anwendungen entwickeln können.
[color = # 006400] Download-Plugin [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
VERGRÖSSERN
Als nächstes müssen wir das Plugin installieren, dafür werden wir:
- Werkzeuge
- Plugin
- Heruntergeladener Tab
- Wir klicken auf die Schaltfläche Plugin hinzufügen
- Wir suchen nach der heruntergeladenen Datei mit der Erweiterung nbm.
VERGRÖSSERN
Nach der Installation können wir die Komponenten aus der HTML-Tools-Palette verwenden.
Wir erstellen ein HTML5-Projekt, um seine Funktionen und Komponenten zu sehen.
Wir gehen zu:
- Datei
- Neues Projekt
- Wir wählen HTML5-Anwendung, um ein leeres oder leeres Projekt zu erstellen
Auf dem nächsten Bildschirm werden wir aufgefordert, unserem Projekt einen Namen und ein Verzeichnis zuzuweisen, in dem es gespeichert werden soll, und klicken dann auf die Schaltfläche Weiter. Hier haben wir zum Beispiel mehrere Optionen: Keine Vorlage verwenden (Keine Site-Vorlage)
Wenn Sie eine Vorlage auswählen (Vorlage auswählen), können Sie aus einer Vorlage auswählen, die sich in einem Verzeichnis auf dem Computer befindet, oder den Speicherort einer ZIP-Datei einer Vorlage in einer URL angeben. Sie können die URL der ZIP-Datei eingeben oder auf Durchsuchen klicken, um einen Speicherort auf Ihrem lokalen System anzugeben. Wenn Sie ein Projekt basierend auf einer Site-Vorlage erstellen, werden die Dateien, Bibliotheken und die Projektstruktur in das Projektverzeichnis kopiert, beispielsweise eine kostenlose Vorlagen-Website.
VERGRÖSSERN
Wir nehmen die erste Vorlage, deren Link zur Zip-Datei wie folgt lautet:
http: //cdn.freehtml5… imcreatives.zip
Wir wählen die Option
Vorlage auswählen und kopieren Sie den Link in das Textfeld Vorlage. Dann klicken wir auf Weiter.
VERGRÖSSERN
Auf dem nächsten Bildschirm können wir dann Bibliotheken hinzufügen, wenn wir sie für unsere Entwicklung benötigen, und Netbeans wird sie an unser Projekt anhängen.
VERGRÖSSERN
Wir können sehen, dass es mehrere Javascript-Bibliotheken erkannt hat und wir auch Jquery selbst hinzugefügt haben.
Dann klicken wir auf Fertig stellen und Netbeans kümmert sich um das Entpacken der Vorlage und das Ordnen aller Projektdateien.
VERGRÖSSERN
In der Symbolleiste haben wir einen Dropdown-Selektor, um die Anwendung auf verschiedenen Geräten wie Browsern, Mobilgeräten, SmartTV und Emulatoren wie Apache Cordoba für Android zu testen. Dazu müssen wir das Android SDK und den AVD Manager installiert haben. Der AVD Manager bietet eine grafische Benutzeroberfläche, in der Sie Android Virtual Devices (AVDS) erstellen und verwalten können, die vom Android-Emulator benötigt werden.
VERGRÖSSERN
In diesem Fall wählen wir Firefox aus, klicken dann auf den grünen Pfeil, um das Projekt auszuführen und das Ergebnis ist die lokal funktionierende Vorlage.
VERGRÖSSERN
Eine andere Möglichkeit, ein Projekt mit Vorlagen zu erstellen, besteht darin, Vorlagen von der Website www.initializr.com zu verwenden. Initializr ist ein HTML5-Vorlagengenerator, der Ihnen den Einstieg in ein neues HTML5-basiertes Projekt erleichtert. Es generiert eine anpassbare Vorlage mit einem sauberen und leicht verständlichen Code, es enthält auch alle notwendigen Grundelemente und Komponenten.
VERGRÖSSERN
Von Netbeans müssen wir nur den Vorlagentyp auswählen, den wir verwenden möchten, und es wird automatisch der Code und die Struktur des Projekts generiert.
Zum Beispiel wählen wir eine Boostrap-Typvorlage für ein neues Projekt aus.
VERGRÖSSERN
Wir klicken auf Weiter und ermöglichen es uns erneut, weitere Jquery-Bibliotheken auszuwählen und hinzuzufügen, wenn wir sie benötigen, und klicken dann auf Fertig stellen.
Wir sehen, wie die Struktur des HTML5-Projekts erstellt wurde und rechts sehen wir die Palette mit den Komponenten des zuvor installierten Plugins.
VERGRÖSSERN
Wir führen das Projekt wie zuvor oder auch durch Drücken der F6-Taste aus. Das Ergebnis wird eine einfache Vorlage sein, um unser Projekt zu starten.
VERGRÖSSERN
Als nächstes testen wir die Vorlage
Antwortet von Initializr mit den gleichen vorherigen Schritten und wir werden das Ergebnis sehen, wenn es im Browser ausgeführt wird.
VERGRÖSSERN
Wenn wir unsere Anwendung im Google Chrome-Browser testen möchten, müssen wir ein Plugin installieren, das Netbeans mit Chome verbindet.
VERGRÖSSERN
Wir müssen mit unserem Gmail auf unser Google-Konto zugreifen, um die Installation des Plugins in Google Chrome zu autorisieren, dann können wir die Anwendung ohne Probleme ausführen und anzeigen.
Einer der Vorteile der Verwendung von Google Chrome besteht darin, dass wir durch Rechtsklick auf den Bildschirm auf den Element Inspector zugreifen können und wir viele Dienstprogramme haben, um unsere Anwendung zu überprüfen, von denen eines die Anwendung auf verschiedenen mobilen Geräten und Auflösungen simuliert.
VERGRÖSSERN
Durch den Zugriff über dieses Symbol können wir unsere Anwendung auf Mobiltelefonen und Laptops wie Ipad, Iphone, LG, Samsumg, Notebook simulieren.
Zum Beispiel simulieren wir unsere Anwendung, die auf einem Iphone 6 mit einer 30 Mbit/s Wi-Fi-Verbindung läuft
Sehen wir uns als Nächstes die Komponenten der HTML5-Palette an. Lassen Sie uns ein leeres oder leeres HTML5-Projekt erstellen. Wir fügen die Bibliothek Jquery 2.0.3 hinzu und erstellen die Projektstruktur. Die Komponentenpalette, wenn wir sie nicht auf dem Bildschirm haben, wird über das Windows-Menü> Ide-Tools-Palette aktiviert
In unserer index.html-Datei im Codeabschnitt
Wir ziehen die Komponente Datenliste und legen sie ab. Wir werden sehen, dass als Beispiel automatisch ein Codeblock erstellt wirdLand:
Wenn wir unsere Anwendung ausführen, sehen wir, wie das Dropdown-Menü funktioniert, es ist sogar erlaubt, beim Schreiben empfindlich zu filtern, es wird automatisch die Liste filtern, die das Dropdown-Menü enthält
Lassen Sie uns den von Netbeans generierten Code ändern und die ausgewählten Daten aus der Datenliste extrahieren, wobei sich Jquery auf die ID jedes Elements bezieht
Land: Siehe Land
Wir führen die Anwendung aus und sehen, dass das Ergebnis mit dem Namen des ausgewählten Landes zurückgegeben wird:
Wir können auch eine DataList mit einem Formular senden und die ausgewählten Daten erfassen und in einer Datenbank speichern
Die erforderliche Komponente der Palette ermöglicht es uns, ein Element als erforderlich in einem Formular hinzuzufügen, wie z. B. den folgenden Code mit zwei obligatorischen Pflichtfeldern:
Name: E-Mail
Wenn wir diesen Code ausführen, sehen wir, dass das Formular nicht gesendet werden kann, wenn beide Felder nicht ausgefüllt sind.
FazitWir haben in diesem Tutorial einige Tools gesehen, die uns helfen, Anwendungen in HTML5 und Jquery schneller zu entwickeln und zu testen, auch ohne fast irgendeinen komplexen Code programmiert zu haben. In zukünftigen Tutorials werden wir die Entwicklung von HTML5- und Jquery-Anwendungen, sowohl traditionell als auch mobil, weiter vorantreiben.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
