HTML5-perusprojektin luominen Ubuntussa Netbeansin avulla

Tässä neljän artikkelin mobiiliverkkokehityssarjassa opastamme sinut määrittämään Netbeansin IDE:ksi (tunnetaan myös nimellä Integrated Development Environment) Ubuntussa, jotta voit aloittaa mobiiliystävällisten ja reagoivien HTML5-verkkosovellusten kehittämisen.

Seuraavassa on neljän artikkelin sarja HTML5-mobiiliverkkokehityksestä:

Hyvin hiottu työympäristö (kuten tulemme myöhemmin näkemään), tuettujen kielten automaattinen täydennys ja sen saumaton integrointi verkkoselaimiin ovat mielestämme eräitä Netbeanin erottuvia ominaisuuksia.

Muistakaamme myös, että HTML 5 -spesifikaatio toi monia etuja kehittäjille – muutamia esimerkkejä mainitakseni: puhtaampi koodi monien uusien elementtien ansiosta, sisäänrakennetut videon ja äänen toistoominaisuudet (joka korvaa Flashin tarpeen), ristiinyhteensopivuus. yleisimmillä selaimilla ja optimoinnilla mobiililaitteille.

Vaikka testaamme aluksi sovelluksiamme paikallisella kehityskoneellamme, siirrämme lopulta verkkosivustomme LAMP-palvelimelle ja teemme siitä dynaamisen työkalun.

Matkan varrella hyödynnämme jQueryä (tuttu monialustainen Javascript-kirjasto, joka yksinkertaistaa huomattavasti asiakaspuolen komentosarjaa) ja Bootstrapia (suosittu HTML-, CSS- ja JavaScript-kehys responsiivisten verkkosivustojen kehittämiseen). Näet saapuvista artikkeleista, kuinka helppoa on luoda mobiiliystävällinen sovellus näiden HTML 5 -työkalujen avulla.

Kun olet käynyt läpi tämän lyhyen sarjan, pystyt:

1. käytä tässä kuvattuja työkaluja luodaksesi dynaamisia HTML5-perussovelluksia ja
2. jatka oppimaan edistyneempiä verkkokehitystaitoja.

Huomaa kuitenkin, että vaikka aiomme käyttää Ubuntua tässä sarjassa, ohjeet ja menettelyt ovat täysin voimassa myös muille työpöytäjakeluille (Linux Mint, Debian, CentOS, Fedora, sinä nimeät sen).

Tätä tarkoitusta varten olemme päättäneet asentaa tarvittavat ohjelmistot (Netbeans ja Java JDK, kuten näet hetken kuluttua) käyttämällä yleistä tarballia (.tar.gz) asennusmenetelmänä.

Tästä huolimatta aloitetaan osasta 1.

Java JDK:n asentaminen Ubuntuun

Tämä opetusohjelma olettaa, että sinulla on jo Ubuntu-työpöytäasennus. Jos et, ota yhteyttä Matei Cezariin ennen kuin jatkat.

Koska Ubuntun virallisista arkistoista ladattavissa oleva Netbeans-versio on hieman vanhentunut, lataamme paketin Oraclen verkkosivustolta saadaksemme uudemman version.

Voit tehdä tämän kahdella tavalla:

• Vaihtoehto 1: Lataa paketti, joka sisältää Netbeansin + JDK:n tai
• Vaihtoehto 2: Asenna molemmat apuohjelmat erikseen.

Tässä artikkelissa valitsemme numeron 2, koska se ei tarkoita vain latausta, joka on hieman pienempi (koska asennamme vain Netbeansin HTML5- ja PHP-tuella), vaan myös mahdollistaa erillisen JDK-asennusohjelman, jos tarvitsemme sitä. toinen sarja, joka ei vaadi Netbeansia eikä sisällä web-kehitystä (liittyy enimmäkseen muihin Oraclen tuotteisiin).

Lataa JDK siirtymällä Oracle Technology Network -sivustolle ja siirtymällä kohtaan Java → Java SE → Lataukset.

Kun napsautat alla korostettua kuvaa, sinua pyydetään hyväksymään lisenssisopimus ja sitten voit ladata tarvittavan JDK-version (joka meidän tapauksessamme on 64-bittisten koneiden tarball). Kun verkkoselaimesi niin pyytää, valitse tiedosto tallentaminen sen avaamisen sijaan.

Kun lataus on valmis, siirry kohtaan ~/Downloads ja pura tarball tiedostoon /usr/local/bin:

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

Netbeansin asentaminen Ubuntuun

Asenna Netbeans HTML5- ja PHP-tuella lataamalla kuvan osoittamalla tavalla wget-komento.

$ 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

Suorita siitä lähtien asennus loppuun seuraamalla näytön ohjeita jättäen oletusarvot:

ja odota asennuksen valmistumista.

HTML5-perusprojektin luominen Ubuntussa

Avaa Netbeans valitsemalla se Dash-valikosta:

Voit luoda uuden HTML5-projektin Netbeansin perusmallilla valitsemalla Tiedosto → Uusi projekti → HTML5 → HTML5-sovellus. Valitse projektillesi kuvaava nimi ja napsauta lopuksi Valmis (älä käytä ulkoista sivustomallia tai JavaScript-kirjastoja tällä hetkellä):

Tämän jälkeen meidät ohjataan Netbeans-käyttöliittymään, jossa voimme tarvittaessa lisätä kansioita ja tiedostoja sivuston juureen. Meidän tapauksessamme tämä tarkoittaa kansioiden lisäämistä fonteille, kuville, Javascript-tiedostoille (skripteille) ja peräkkäisten tyylisivujen (tyylien) lisäämiseksi, jotta voimme paremmin järjestää sisältömme tulevissa artikkeleissa.

Jos haluat lisätä kansion tai tiedoston, napsauta hiiren kakkospainikkeella Site Root ja valitse sitten Uusi → Kansio tai HTML-tiedosto.

Otetaan nyt käyttöön joitain uusia HTML5-elementtejä ja muokataan sivun runkoa:

1. ja
2. edustaa asiakirjan pääsisältöä, jossa näkyy keskeinen aihe tai toiminto.

3. käytetään itsenäiseen materiaaliin, kuten kuviin tai koodiin, muutamia esimerkkejä mainitakseni.

.
Kopioi nyt seuraava koodinpätkä index.html-tiedostoosi Netbeansissa.

VINKKI: Älä vain kopioi ja liitä tästä ikkunasta kehitysympäristöösi, vaan käytä aikaa jokaisen tagin kirjoittamiseen, jotta voit visualisoida Netbeansin automaattisen täydennyksen ominaisuudet, joista on hyötyä myöhemmin.

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

Voit tarkastella sivua valitsemalla verkkoselaimen (mieluiten Firefox, kuten alla olevassa kuvassa) ja napsauttamalla Play-kuvaketta:

Nyt voit seurata kehitystyösi tähänastista edistymistä:

Yhteenveto

Tässä artikkelissa olemme tarkastelleet joitain etuja, jotka liittyvät verkkosovellustesi kirjoittamiseen HTML 5:llä ja kehitysympäristön luomiseen Netbeansilla Ubuntussa.

Saimme tietää, että tämä kielen määrittely toi uusia elementtejä ja tarjosi siten meille mahdollisuuden kirjoittaa puhtaampaa koodia ja korvata resursseja vaativat komponentit, kuten Flash-elokuvat, sisäänrakennetuilla ohjaimilla.

Tulevissa artikkeleissa esittelemme jQueryn ja Bootstrapin, jotta voit paitsi käyttää näitä säätimiä ja katsella sivujesi latautumista nopeammin, myös tehdä niistä mobiiliystävällisiä.

Sillä välin voit kokeilla muita Netbeansin säätimiä ja ilmoita meille, jos sinulla on kysyttävää tai kommentteja alla olevalla lomakkeella.