Website-Suche

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

In dieser 4-teiligen Serie zur Entwicklung des mobilen Webs führen wir Sie durch die Einrichtung von Netbeans als IDE (auch bekannt als Integrated Development Environment) in Ubuntu, um mit der Entwicklung mobilfreundlicher und reaktionsschneller HTML5-Webanwendungen zu beginnen.

Im Folgenden finden Sie die 4-Artikel-Serie über HTML5 Mobile Web Development:

Eine gut ausgefeilte Arbeitsumgebung (wie wir später sehen werden), die Autovervollständigung für unterstützte Sprachen und die nahtlose Integration in Webbrowser sind unserer Meinung nach einige der wichtigsten Unterscheidungsmerkmale von Netbeans.

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

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

Auf dem Weg dorthin werden wir jQuery (eine bekannte plattformübergreifende Javascript-Bibliothek, die clientseitiges Scripting erheblich vereinfacht) und Bootstrap (das beliebte HTML-, CSS- und JavaScript-Framework für die Entwicklung responsiver Websites) verwenden. Sie werden sehen, wie einfach es ist, mit diesen HTML 5-Tools eine mobilfreundliche Anwendung einzurichten.

Nachdem Sie diese kurze Serie durchgearbeitet haben, werden Sie in der Lage sein:

  1. die hier beschriebenen Tools zu verwenden, um grundlegende dynamische HTML5-Anwendungen zu erstellen, und
  2. Erlernen Sie weitere fortgeschrittene Fähigkeiten in der Webentwicklung.

Bitte beachten Sie jedoch, dass, obwohl wir Ubuntu für diese Serie verwenden werden, die Anweisungen und Verfahren auch für andere Desktop-Distributionen (Linux Mint, Debian, CentOS, Fedora, was auch immer) gültig sind.

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

Davon abgesehen – fangen wir mit Teil 1 an.

Installieren des Java JDK in Ubuntu

In diesem Tutorial wird davon ausgegangen, dass Sie bereits über eine Ubuntu-Desktopinstallation verfügen. Wenn Sie dies nicht tun, lesen Sie bitte den Artikel Ubuntu Desktop Installation, der von unserem Kollegen Matei Cezar geschrieben wurde, bevor Sie fortfahren.

Da die Netbeans-Version, die in den offiziellen Ubuntu-Repositories zum Download zur Verfügung steht, etwas veraltet ist, werden wir das Paket von der Oracle-Website herunterladen, um eine neuere Version zu erhalten.

Dazu haben Sie zwei Möglichkeiten:

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

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

Um das JDK herunterzuladen, rufen Sie die Oracle Technology Network-Website auf, und navigieren Sie zum Abschnitt Java → Java SE → Downloads.

Wenn Sie auf das unten hervorgehobene Bild klicken, werden Sie aufgefordert, die Lizenzvereinbarung zu akzeptieren, und dann können Sie die erforderliche JDK-Version herunterladen (in unserem Fall der Tarball für 64-Bit-Maschinen). Wenn Sie von Ihrem Webbrowser dazu aufgefordert werden, wählen Sie aus, ob die Datei gespeichert werden soll, 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

Installation von Netbeans in Ubuntu

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

$ cd ~/Downloadswget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.shchmod 755 Apache-NetBeans-12.5-bin-linux-x64.shsudo ./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 grundlegenden HTML5-Projekts in Ubuntu

Um Netbeans zu öffnen, wählen Sie es aus dem 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 aus, und klicken Sie schließlich auf Fertig stellen (fügen Sie zu diesem Zeitpunkt keine externe Websitevorlage oder JavaScript-Bibliotheken hinzu):

Wir werden dann zur Netbeans-Benutzeroberfläche weitergeleitet, wo wir bei Bedarf Ordner und Dateien zu unserem Site-Root hinzufügen können. In unserem Fall bedeutet dies, Ordner für Schriftarten, Bilder, Javascript-Dateien (Skripte) und Cascading Stylesheets (Styles) hinzuzufügen, 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 aus.

Lassen Sie uns nun einige neue HTML5-Elemente einführen und den Seitenkörper ändern:

  1. <Kopfzeile> und <Fußzeile> definieren eine Kopf- bzw. Fußzeile für ein Dokument oder einen Abschnitt.
  2. <main> stellt den Hauptinhalt eines Dokuments dar, in dem das zentrale Thema oder die zentrale Funktionalität angezeigt wird.
  3. <Abbildung> wird für in sich geschlossenes Material wie Bilder oder Code verwendet, um nur einige Beispiele zu nennen.
  4. <figcaption> zeigt eine Beschriftung für ein <figure>-Element an und muss daher innerhalb der <figure>-Tags platziert werden.
  5. <Neben> ist für Inhalte reserviert, die in irgendeiner Weise mit dem Seiteninhalt zusammenhängen, normalerweise in Verbindung mit ihm. Es kann mit Hilfe von CSS als Seitenleiste platziert werden (mehr dazu in den kommenden Artikeln).

Kopieren Sie nun den folgenden Codeausschnitt in Ihre index.html Datei in Netbeans.

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

!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 style="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 linux-console.net</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 style="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 in der Abbildung unten) und auf das Play-Symbol klicken:

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

Zusammenfassung

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

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

In den kommenden Artikeln werden wir jQuery und Bootstrap vorstellen, damit Sie diese Steuerelemente nicht nur verwenden und beobachten können, wie Ihre Seiten schneller geladen werden, sondern sie auch mobilfreundlich gestalten.

In der Zwischenzeit können Sie mit anderen Steuerelementen in Netbeans experimentieren und uns über das untenstehende Formular mitteilen, wenn Sie Fragen oder Kommentare haben.

Verwandte Artikel: