So erstellen Sie ein einfaches HTML5-Projekt in Ubuntu mit Netbeans

In dieser aus 4 Artikeln bestehenden Reihe zur Entwicklung mobiler Websites führen wir Sie durch die Einrichtung von Netbeans als IDE (auch bekannt als Integrierte Entwicklungsumgebung ) in Ubuntu um mit der Entwicklung mobilfreundlicher und responsiver HTML5-Webanwendungen zu beginnen.

Im Folgenden finden Sie die 4-teilige Artikelserie über HTML5 Mobile Web Development :

Teil 1 :So erstellen Sie ein einfaches HTML5-Projekt in Ubuntu mit Netbeans Teil 2 :Hinzufügen von jQuery- und Bootstrap-Komponenten, um HTML5-Anwendungen reaktionsschnell und mobilfreundlich zu machenTeil 3 :HTML5-Anwendung dynamisch gestalten und auf einem LAMP-Server mit Filezilla bereitstellenTeil 4 :Optimieren von dynamischen HTML5-Web-Apps mithilfe von Open-Source-Dienstprogrammen

Eine ausgefeilte Arbeitsumgebung (wie wir später sehen werden), automatische Vervollständigung für unterstützte Sprachen und die nahtlose Integration mit Webbrowsern sind unserer Meinung nach einige der herausragendsten Merkmale von Netbean.

Denken wir auch daran, dass die HTML 5 Spezifikation brachte viele Vorteile für Entwickler – um nur einige Beispiele zu nennen:saubererer Code dank vieler neuer Elemente), integrierte Video- und Audiowiedergabefunktionen (die die Notwendigkeit von Flash ersetzen), Kreuzkompatibilität mit den wichtigsten Browsern und Optimierung für Mobilgeräte Geräte.

Obwohl wir unsere Anwendungen zunächst auf unserem lokalen Entwicklungscomputer testen, werden wir unsere Website schließlich auf einen LAMP-Server verschieben und sie in ein dynamisches Tool verwandeln.

Dabei werden wir jQuery verwenden (eine bekannte plattformübergreifende Javascript-Bibliothek, die die clientseitige Skripterstellung erheblich vereinfacht) und Bootstrap (das beliebte HTML-, CSS- und JavaScript-Framework für die Entwicklung responsiver Websites). Sie werden sehen, wie einfach es ist, mit diesen HTML 5-Tools eine für Mobilgeräte optimierte Anwendung einzurichten.

Nachdem Sie diese kurze Serie durchgearbeitet haben, können Sie:

1. die hier beschriebenen Tools verwenden, um grundlegende dynamische HTML5-Anwendungen zu erstellen, und
2. erfahren Sie weiter, um fortgeschrittenere Webentwicklungsfähigkeiten zu erlernen.

Bitte beachten Sie jedoch, dass wir Ubuntu verwenden, obwohl wir es verwenden werden Für diese Serie gelten die Anweisungen und Verfahren auch für andere Desktop-Distributionen (Linux Mint , Debian , CentOS , Fedora , nennen Sie es).

Zu diesem Zweck haben wir uns entschieden, die erforderliche Software (Netbeans und das Java JDK , wie Sie gleich sehen werden) mit einem generischen Tarball (.tar.gz ) als Installationsmethode.

Davon abgesehen – beginnen wir mit Teil 1 .

Installieren von Java JDK in Ubuntu

Dieses Tutorial geht davon aus, dass Sie bereits eine Ubuntu-Desktop-Installation haben. Wenn nicht, lesen Sie bitte den Artikel Ubuntu Desktop Installation, der von unserem Kollegen Matei Cezar geschrieben wurde, bevor Sie fortfahren.

Da die Netbeans Version, die von den offiziellen Ubuntu-Repositories heruntergeladen werden kann, etwas veraltet ist, werden wir das Paket von der Oracle-Website herunterladen, um eine neuere Version zu erhalten.

Dazu haben Sie zwei Möglichkeiten:

• Auswahl 1 :Laden Sie das Paket herunter, das Netbeans + JDK enthält, oder
• Auswahl 2 :Installieren Sie beide Dienstprogramme separat.

In diesem Artikel werden wir #2 wählen denn das bedeutet nicht nur einen etwas kleineren Download (da wir nur Netbeans mit Unterstützung für HTML5 und PHP installieren), sondern ermöglicht uns auch einen eigenständigen JDK-Installer, falls wir ihn für ein anderes Set benötigen, das weder Netbeans noch benötigt beinhalten Webentwicklung (meistens im Zusammenhang mit anderen Oracle-Produkten).

So laden Sie JDK herunter , rufen Sie die Oracle Technology Network-Site auf und navigieren Sie zu Java → Java SE → Downloads Abschnitt.

Wenn Sie auf das unten hervorgehobene Bild klicken, werden Sie aufgefordert, die Lizenzvereinbarung zu akzeptieren, und dann können Sie das erforderliche JDK herunterladen Version (in unserem Fall der Tarball für 64-Bit). Maschinen). Wenn Sie von Ihrem Webbrowser dazu aufgefordert werden, speichern Sie die Datei, anstatt sie zu öffnen.

Wenn der Download abgeschlossen ist, gehen Sie zu ~/Downloads und extrahieren Sie den Tarball nach /usr/local/bin :

$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin

Netbeans unter Ubuntu installieren

Um Netbeans zu installieren mit Unterstützung für HTML5 und PHP , gehen Sie zu https://netbeans.org/downloads/ und klicken Sie auf Herunterladen oder verwenden Sie den folgenden wget-Befehl, um wie gezeigt herunterzuladen.

$ cd ~/Downloads
$ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
$ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
$ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1

Befolgen Sie von da an die Anweisungen auf dem Bildschirm, um die Installation abzuschließen und die Standardwerte beizubehalten:

und warten Sie, bis die Installation abgeschlossen ist.

Erstellen eines einfachen HTML5-Projekts in Ubuntu

Um Netbeans zu öffnen , wählen Sie es im Dash-Menü aus :

Um ein neues HTML5-Projekt mit der von Netbeans bereitgestellten Basisvorlage zu erstellen, gehen Sie zu Datei → Neues Projekt → HTML5 → HTML5-Anwendung . Wählen Sie einen aussagekräftigen Namen für Ihr Projekt und klicken Sie abschließend auf Fertig stellen (Zu diesem Zeitpunkt keine externen Website-Vorlagen oder JavaScript-Bibliotheken einschließen):

Wir werden dann zur Netbeans-Benutzeroberfläche weitergeleitet , wo wir Ordner und Dateien zu unserem Site Root hinzufügen können wie benötigt. In unserem Fall bedeutet dies das Hinzufügen von Ordnern für Schriftarten, Bilder, Javascript-Dateien (Skripte) und Cascading Style Sheets (Stile), um uns zu helfen, unsere Inhalte in kommenden Artikeln besser zu organisieren.

Um einen Ordner oder eine Datei hinzuzufügen, klicken Sie mit der rechten Maustaste auf Site Root und wählen Sie dann Neu → Ordner oder HTML Datei.

Lassen Sie uns nun etwas neues HTML5 vorstellen Elemente und ändern Sie den Seitentext:

1. und
2. stellt den Hauptinhalt eines Dokuments dar, in dem das zentrale Thema oder die Funktionalität gezeigt wird.
3. wird für eigenständiges Material wie Bilder oder Code verwendet, um nur einige Beispiele zu nennen.
5. ist für Inhalte reserviert, die irgendwie mit dem Seiteninhalt zusammenhängen, normalerweise damit zusammenhängen. Es kann mit Hilfe von CSS als Seitenleiste platziert werden (mehr dazu in den kommenden Artikeln).

.
Kopieren Sie nun das folgende Code-Snippet in Ihre index.html Datei in Netbeans.

TIPP :Kopieren Sie nicht einfach aus diesem Fenster und fügen Sie es in Ihre Entwicklungsumgebung ein, sondern nehmen Sie sich die Zeit, jeden Tag einzugeben, um die Autovervollständigungsfunktionen von Netbeans zu visualisieren, was sich später als nützlich erweisen wird.

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at Tecmint.com</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

Sie können die Seite anzeigen, indem Sie einen Webbrowser auswählen (vorzugsweise Firefox , wie im Bild unten) und klicken Sie auf Play Symbol:

Sie können nun den bisherigen Fortschritt Ihrer Entwicklung einsehen:

Zusammenfassung

In diesem Artikel haben wir einige der Vorteile des Schreibens Ihrer Webanwendungen mit HTML 5 besprochen und eine Entwicklungsumgebung mit Netbeans einrichten in Ubuntu .

Wir haben gelernt, dass diese Spezifikation der Sprache neue Elemente einführt und uns somit die Möglichkeit bietet, saubereren Code zu schreiben und ressourcenhungrige Komponenten wie Flash-Filme durch integrierte Steuerelemente zu ersetzen.

In den kommenden Artikeln werden wir jQuery vorstellen und Bootstrap damit Sie diese Steuerelemente nicht nur verwenden und Ihre Seiten schneller laden können, sondern sie auch für Mobilgeräte optimiert haben.

In der Zwischenzeit können Sie gerne mit anderen Steuerelementen in Netbeans experimentieren , und lassen Sie uns wissen, wenn Sie Fragen oder Kommentare haben, indem Sie das untenstehende Formular verwenden.