Wéi erstellen ech e Basis HTML5 Projet an Ubuntu Mat Netbeans


An dëser 4-Artikel mobil Webentwécklungsserie wäerte mir Iech duerch d'Opstellung vun Netbeans als IDE (och bekannt als Integréiert Entwécklungsëmfeld) an Ubuntu féieren fir mobilfrëndlech a reaktiounsfäeg HTML5 Webapplikatiounen z'entwéckelen.

Folgend sinn déi 4-Artikel Serie iwwer HTML5 Mobile Web Entwécklung:

E gutt ausgeräiften Aarbechtsëmfeld (wéi mir spéider wäerte gesinn), Autocompletion fir ënnerstëtzt Sproochen, a seng nahtlos Integratioun mat Webbrowser sinn, eiser Meenung no, e puer vun Netbeans, déi meescht ënnerscheedend Features.

Loosst eis och drun erënneren datt d'HTML 5 Spezifizéierung vill Virdeeler fir Entwéckler bruecht huet - fir e puer Beispiller ze nennen: méi propper Code dank villen neien Elementer), agebaute Video- an Audio-Playback-Fäegkeeten (wat de Besoin fir Flash ersetzt), Cross-Kompatibilitéit mat grousse Browser, an Optimisatioun fir mobilen Apparater.

Och wa mir am Ufank eis Uwendungen op eiser lokaler Entwécklungsmaschinn testen, wäerte mir eis Websäit schliisslech op e LAMP-Server réckelen an en an en dynamescht Tool ëmsetzen.

Ënnerwee wäerte mir jQuery benotzen (eng bekannt Cross-Plattform Javascript Bibliothéik déi vill Client-Säit Scripting vereinfacht), a Bootstrap (de populäre HTML, CSS a JavaScript Kader fir reaktiounsfäeg Websäiten z'entwéckelen). Dir gesitt erakommen Artikelen wéi einfach et ass eng mobilfrëndlech Applikatioun opzestellen mat dësen HTML 5 Tools.

Nodeems Dir dës kuerz Serie duerchgaang sidd, kënnt Dir fäeg sinn:

  1. benotzt d'Tools, déi hei beschriwwe ginn, fir Basis HTML5 dynamesch Uwendungen ze kreéieren, an
  2. fuert weider fir méi fortgeschratt Webentwécklungsfäegkeeten ze léieren.

Wéi och ëmmer, notéiert w.e.g. datt och wa mir Ubuntu fir dës Serie benotzen, d'Instruktioune a Prozedure si perfekt valabel fir aner Desktop-Verdeelungen och (Linux Mint, Debian, CentOS, Fedora, Dir nennt et).

Dofir hu mir gewielt fir déi néideg Software ze installéieren (Netbeans an d'Java JDK, wéi Dir an enger Minutt gesitt) mat engem generesche Tarball (.tar.gz) als Installatiounsmethod.

Wann dat gesot gëtt - loosst eis mam Deel 1 ufänken.

Java JDK an Ubuntu installéieren

Dësen Tutorial gëtt ugeholl datt Dir schonn eng Ubuntu Desktop Installatioun op der Plaz hutt. Wann Dir net, kuckt w.e.g. op de Matei Cezar ier Dir weider geet.

Zënter datt d'Netbeans Versioun déi verfügbar ass fir erofzelueden vun den offiziellen Ubuntu Repositories ass e bëssen veroudert, wäerte mir de Package vun der Oracle Websäit eroflueden fir eng méi nei Versioun ze kréien.

Fir dëst ze maachen, hutt Dir zwee Choixen:

  • Wiel 1: Luet de Bündel erof deen Netbeans + JDK enthält, oder
  • Wiel 2: Installéiert béid Utilities separat.

An dësem Artikel wäerte mir #2 wielen well dat heescht net nëmmen en Download deen e bësse méi kleng ass (well mir nëmmen Netbeans mat Ënnerstëtzung fir HTML5 a PHP installéieren), awer och eis erlaabt e Standalone JDK Installateur ze hunn wa mir et brauchen fir en anere Set deen net Netbeans erfuerdert an och net Webentwécklung involvéiert (meeschtens am Zesummenhang mat aneren Oracle Produkter).

Fir JDK erofzelueden, gitt op d'Oracle Technology Network Site a navigéiert op d'Java → Java SE → Downloads Sektioun.

Wann Dir op d'Bild hei drënner markéiert klickt, gitt Dir gefrot fir de Lizenzvertrag ze akzeptéieren an da kënnt Dir déi néideg JDK Versioun eroflueden (wat an eisem Fall den Tarball fir 64-Bit Maschinnen ass). Wann Dir vun Ärem Webbrowser gefrot gëtt, wielt d'Datei ze späicheren anstatt se opzemaachen.

Wann den Download fäerdeg ass, gitt op ~/Downloads an extrahéiert den Tarball op /usr/local/bin:

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

Installéiere vun Netbeans an Ubuntu

Fir Netbeans mat Ënnerstëtzung fir HTML5 a PHP z'installéieren, gitt op wget Kommando fir erofzelueden wéi gewisen.

$ 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

Vun dann un, befollegt d'Instruktioune um Bildschierm fir d'Installatioun ofzeschléissen andeems d'Standardwäerter hannerlooss:

a waart bis d'Installatioun fäerdeg ass.

E Basis HTML5 Projet an Ubuntu erstellen

Fir Netbeans opzemaachen, wielt se aus dem Dash Menu:

Fir en neien HTML5-Projet ze kreéieren mat der Basisschabloun, déi vun Netbeans geliwwert gëtt, gitt op Datei → Neie Projet → HTML5 → HTML5 Applikatioun. Wielt en deskriptiven Numm fir Äre Projet a klickt schlussendlech op Finish (net eng extern Site Schabloun oder JavaScript Bibliothéiken op dëser Zäit enthalen):

Mir ginn dann op d'Netbeans UI geholl, wou mir Classeure a Dateien op eise Site Root addéiere kënnen wéi néideg. An eisem Fall bedeit dat Dossier fir Schrëften, Biller, Javascript Dateien (Skripten) a Kaskadesstilblieder (Stiler) fir eis ze hëllefen eisen Inhalt an de kommende Artikelen besser ze organiséieren.

Fir en Dossier oder eng Datei derbäizefügen, klickt op de Site Root a wielt dann Nei → Dossier oder HTML Datei.

Loosst eis elo e puer nei HTML5 Elementer aféieren an de Kierper vum Säit änneren:

  1. an
    definéieren en Header oder e Fousszeil, respektiv, fir en Dokument oder eng Sektioun.
  2. stellt den Haaptinhalt vun engem Dokument duer, wou dat zentralt Thema oder Funktionalitéit ugewise gëtt.
  3. gëtt fir selbstännegt Material benotzt, wéi Biller oder Code, fir e puer Beispiller ze nennen.
  4. weist en Iwwerschrëft fir en
    Element, an dofir muss en an den
    Tags gesat ginn.

.
Elo kopéiert de folgende Code Snippet op Är index.html Datei an Netbeans.

TIP: Kopéiert a paste net nëmmen aus dëser Fënster an Äert Entwécklungsëmfeld, awer huelt d'Zäit fir all Tag anzeschreiwen fir d'Auto-Fäerdegstellungsfeatures vun Netbeans ze visualiséieren, déi spéider praktesch kommen.

!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>

Dir kënnt d'Säit kucken andeems Dir e Webbrowser auswielen (virun allem Firefox, wéi am Bild hei ënnen) a klickt op d'Play Ikon:

Dir kënnt elo de Fortschrëtt vun Ärer Entwécklung bis elo kucken:

Resumé

An dësem Artikel hu mir e puer vun de Virdeeler iwwerpréift fir Är Webapplikatiounen mat HTML 5 ze schreiwen an en Entwécklungsëmfeld mat Netbeans an Ubuntu opzestellen.

Mir hunn geléiert datt dës Spezifizéierung vun der Sprooch nei Elementer agefouert huet an eis domat d'Méiglechkeet gëtt fir méi propper Code ze schreiwen an d'Ressource-hongereg Komponente wéi Flash Filmer mat agebaute Kontrollen ze ersetzen.

An den nächsten Artikelen wäerte mir jQuery a Bootstrap virstellen, fir datt Dir net nëmmen dës Kontrollen benotze kënnt an Är Säiten méi séier lueden, awer och mobilfrëndlech maachen.

An der Tëschenzäit, fillt Iech gratis mat anere Kontrollen an Netbeans ze experimentéieren, a loosst eis wëssen ob Dir Froen oder Kommentarer hutt andeems Dir de Formulaire hei drënner benotzt.