Kako kreirati osnovni HTML5 projekat u Ubuntu koristeći Netbeans

U ovoj seriji mobilnog web razvoja od 4 članka, provest ćemo vas kroz postavljanje Netbeans-a kao IDE (također poznatog kao Integrirano razvojno okruženje) u Ubuntu za početak razvoja HTML5 web aplikacija prilagođenih mobilnim uređajima.

Slijedi serija od 4 članka o HTML5 Mobile Web Development:

Dobro uglađeno radno okruženje (kao što ćemo kasnije videti), automatsko dovršavanje za podržane jezike i njegova besprekorna integracija sa veb pretraživačima su, po našem mišljenju, neke od karakteristika Netbeana koje se najviše razlikuju.

Podsjetimo također da je specifikacija HTML 5 donijela mnoge prednosti za programere – da navedemo nekoliko primjera: čistiji kod zahvaljujući mnogim novim elementima), ugrađene mogućnosti reprodukcije videa i zvuka (što zamjenjuje potrebu za Flash), unakrsna kompatibilnost sa glavnim pretraživačima i optimizacija za mobilne uređaje.

Iako ćemo u početku testirati naše aplikacije na našoj lokalnoj razvojnoj mašini, na kraju ćemo premjestiti našu web stranicu na LAMP server i pretvoriti je u dinamički alat.

Usput ćemo koristiti jQuery (poznatu međuplatformsku Javascript biblioteku koja uvelike pojednostavljuje skriptiranje na strani klijenta) i Bootstrap (popularni HTML, CSS i JavaScript okvir za razvoj responzivnih web stranica). Vidjet ćete dolazeće članke kako je lako postaviti aplikaciju prilagođenu mobilnim uređajima pomoću ovih HTML 5 alata.

Nakon što prođete kroz ovu kratku seriju, moći ćete:

  1. koristiti ovdje opisane alate za kreiranje osnovnih HTML5 dinamičkih aplikacija, i
  2. nastavite da naučite naprednije vještine web razvoja.

Međutim, imajte na umu da iako ćemo koristiti Ubuntu za ovu seriju, upute i procedure savršeno vrijede i za druge desktop distribucije (Linux Mint, Debian, CentOS, Fedora, samo ime).

U tu svrhu, odabrali smo da instaliramo potreban softver (Netbeans i Java JDK, kao što ćete vidjeti za minut) koristeći generički tarball (. tar.gz) kao metod instalacije.

S obzirom na to – počnimo s 1. dijelom.

Instaliranje Java JDK u Ubuntu

Ovaj vodič pretpostavlja da već imate instaliranu Ubuntu desktop instalaciju. Ako to ne učinite, pogledajte članak o instalaciji Ubuntu Desktopa, koji je napisao naš kolega Matei Cezar prije nego što nastavite.

Budući da je Netbeans verzija koja je dostupna za preuzimanje iz zvaničnih Ubuntu repozitorija malo zastarjela, mi ćemo preuzeti paket sa Oracle web stranice kako bismo dobili noviju verziju.

Da biste to učinili, imate dva izbora:

  • Izbor 1: Preuzmite paket koji uključuje Netbeans + JDK, ili
  • Izbor 2: Instalirajte oba uslužna programa odvojeno.

U ovom članku ćemo izabrati #2 jer to ne samo da znači preuzimanje koje je malo manje (pošto ćemo instalirati samo Netbeans s podrškom za HTML5 i PHP), već će nam omogućiti i samostalnu JDK instalacijski program treba li nam za drugi set koji ne zahtijeva Netbeans niti uključuje web razvoj (uglavnom se odnosi na druge Oracle proizvode).

Da preuzmete JDK, idite na stranicu Oracle Technology Network i idite na odjeljak Java → Java SE → Preuzimanja .

Kada kliknete na sliku istaknutu ispod, od vas će se tražiti da prihvatite licencni ugovor i tada ćete moći preuzeti potrebnu JDK verziju (koja je u našem slučaju tarball za 64 -bitmašine). Kada vaš web pretraživač to zatraži, odaberite da sačuvate datoteku umjesto da je otvarate.

Kada se preuzimanje završi, idite na ~/Downloads i raspakirajte tarball u /usr/local/bin:

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

Instaliranje Netbeans-a u Ubuntu

Da instalirate Netbeans s podrškom za HTML5 i PHP, idite na https://netbeans.org/downloads/ i kliknite na Preuzmi< ili koristite sljedeću naredbu wget za preuzimanje kao što je prikazano.

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

Od tada slijedite upute na ekranu da dovršite instalaciju ostavljajući zadane vrijednosti:

i sačekajte da se instalacija završi.

Kreiranje osnovnog HTML5 projekta u Ubuntu

Da otvorite Netbeans, odaberite ga iz Dash menija:

Da kreirate novi HTML5 projekat koristeći osnovni šablon koji obezbeđuje Netbeans, idite na Datoteka → Novi projekat → HTML5 → HTML5 aplikacija<. Odaberite opisni naziv za svoj projekat i na kraju kliknite Završi (trenutno nemojte uključivati vanjski predložak web-mjesta ili javascript biblioteke):

Zatim ćemo biti odvedeni na Netbeans korisničko sučelje, gdje možemo dodati foldere i fajlove u naš korijen web stranice po potrebi. U našem slučaju, to će značiti dodavanje foldera za fontove, slike, Javascript datoteke (skripte) i kaskadne stilove (stilove) kako bi nam pomogli da bolje organiziramo naš sadržaj u narednim člancima.

Da dodate folder ili fajl, kliknite desnim tasterom miša na Korijen web stranice, a zatim odaberite Novo → Folder ili HTML fajl.

Sada ćemo predstaviti neke nove HTML5 elemente i izmijeniti tijelo stranice:

  1. i
    definiraju zaglavlje ili podnožje za dokument ili odjeljak.
  2. predstavlja glavni sadržaj dokumenta, gdje je prikazana središnja tema ili funkcionalnost.
  3. se koristi za samostalni materijal, kao što su slike ili kod, da navedemo nekoliko primjera.
  4. prikazuje natpis za
    element, i stoga se mora postaviti unutar oznaka
    .

Sada kopirajte sljedeći isječak koda u vaš index.html fajl u Netbeans-u.

SAVJET: Nemojte samo kopirati i zalijepiti iz ovog prozora u svoje razvojno okruženje, već odvojite vrijeme da unesete svaku oznaku kako biste vizualizirali funkcije automatskog dovršavanja Netbeans-a, koji će vam kasnije dobro doći.

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

Stranicu možete pogledati odabirom web preglednika (po mogućnosti Firefox, kao na slici ispod) i klikom na ikonu Reproduciraj:

Sada možete vidjeti napredak vašeg razvoja do sada:

Sažetak

U ovom članku smo pregledali neke od prednosti pisanja vaših web aplikacija koristeći HTML 5 i postavili razvojno okruženje sa Netbeansom u Ubuntu .

Saznali smo da je ova specifikacija jezika uvela nove elemente i tako nam pružila mogućnost pisanja čistijeg koda i zamjene komponenti koje zahtijevaju resurse kao što su Flash filmovi sa ugrađenim kontrolama.

U narednim člancima predstavit ćemo jQuery i Bootstrap tako da ne samo da možete koristiti ove kontrole i gledati svoje stranice kako se brže učitavaju, već ih i učiniti prilagođenim mobilnim uređajima.

U međuvremenu, slobodno eksperimentirajte s drugim kontrolama u Netbeans-u i javite nam ako imate pitanja ili komentara koristeći obrazac ispod.