Kako ustvariti osnovni projekt HTML5 v Ubuntuju z uporabo Netbeans
V tej seriji mobilnega spletnega razvoja s 4 členi vas bomo vodili skozi nastavitev Netbeans kot IDE (znanega tudi kot integrirano razvojno okolje) v Ubuntuju, da začnete razvijati mobilnem prijazne in odzivne spletne aplikacije HTML5.
Sledi serija 4 člankov o HTML5 Mobile Web Development:
Dobro izbrušeno delovno okolje (kot bomo videli kasneje), samodokončanje za podprte jezike in njegova brezhibna integracija s spletnimi brskalniki so po našem mnenju nekatere od najbolj prepoznavnih lastnosti Netbeana.
Spomnimo se tudi, da je specifikacija HTML 5 prinesla številne prednosti za razvijalce – če naštejemo nekaj primerov: čistejša koda zahvaljujoč številnim novim elementom), vgrajene zmogljivosti predvajanja videa in zvoka (ki nadomešča potrebo po Flashu), navzkrižna združljivost z glavnimi brskalniki in optimizacijo za mobilne naprave.
Čeprav bomo naše aplikacije sprva testirali na našem lokalnem razvojnem stroju, bomo sčasoma naše spletno mesto premaknili na strežnik LAMP in ga spremenili v dinamično orodje.
Ob tem bomo uporabljali jQuery (znana večplatformska knjižnica Javascript, ki močno poenostavi skriptiranje na strani odjemalca) in Bootstrap (priljubljeni okvir HTML, CSS in JavaScript za razvoj odzivnih spletnih mest). V prihajajočih člankih boste videli, kako enostavno je s temi orodji HTML 5 nastaviti aplikacijo, prijazno do mobilnih naprav.
Ko boste šli skozi to kratko serijo, boste lahko:
uporabite tukaj opisana orodja za ustvarjanje osnovnih dinamičnih aplikacij HTML5 in
nadaljujte z učenjem naprednejših veščin spletnega razvoja.
Upoštevajte pa, da čeprav bomo za to serijo uporabljali Ubuntu, so navodila in postopki popolnoma veljavni tudi za druge namizne distribucije (Linux Mint, Debian, CentOS, Fedora, karkoli).
V ta namen smo se odločili za namestitev potrebne programske opreme (Netbeans in Java JDK, kot boste videli čez minuto) z uporabo splošnega tarballa (.tar.gz) kot namestitvenega načina.
Kot rečeno – začnimo s 1. delom.
Namestitev Java JDK v Ubuntu
Ta vadnica predvideva, da že imate nameščeno namizno namestitev Ubuntu. Če ne, se obrnite na Matei Cezar, preden nadaljujete.
Ker je različica Netbeans, ki je na voljo za prenos iz uradnih repozitorijev Ubuntuja, nekoliko zastarela, bomo paket prenesli s spletnega mesta Oracle, da dobimo novejšo različico.
Če želite to narediti, imate dve možnosti:
1. možnost: prenesite paket, ki vključuje Netbeans + JDK, ali
2. možnost: oba pripomočka namestite ločeno.
V tem članku bomo izbrali #2, ker to ne pomeni samo malo manjšega prenosa (ker bomo namestili samo Netbeans s podporo za HTML5 in PHP), ampak nam bo omogočilo tudi samostojen namestitveni program JDK, če ga potrebujemo za še en niz, ki ne zahteva Netbeans in ne vključuje spletnega razvoja (večinoma povezan z drugimi izdelki Oracle).
Če želite prenesti JDK, pojdite na spletno mesto Oracle Technology Network in se pomaknite do razdelka Java → Java SE → Prenosi.
Ko kliknete na spodnjo označeno sliko, boste pozvani, da sprejmete licenčno pogodbo, nato pa boste lahko prenesli potrebno različico JDK (ki je v našem primeru tarball za 64-bitne stroje). Ko vas spletni brskalnik pozove, izberite, da shranite datoteko, namesto da jo odprete.
Ko je prenos končan, pojdite na ~/Downloads in izvlecite tarball v /usr/local/bin:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Namestitev Netbeans v Ubuntu
Če želite namestiti Netbeans s podporo za HTML5 in PHP, pojdite na ukaz wget za prenos, kot je prikazano.
Od takrat naprej sledite navodilom na zaslonu, da dokončate namestitev, pri čemer pustite privzete vrednosti:
in počakajte, da se namestitev zaključi.
Ustvarjanje osnovnega projekta HTML5 v Ubuntuju
Če želite odpreti Netbeans, ga izberite v meniju Dash:
Če želite ustvariti nov projekt HTML5 z uporabo osnovne predloge, ki jo ponuja Netbeans, pojdite na Datoteka → Nov projekt → HTML5 → Aplikacija HTML5. Izberite opisno ime za svoj projekt in na koncu kliknite Dokončaj (trenutno ne vključujte zunanje predloge spletnega mesta ali knjižnic javascript):
Nato bomo preusmerjeni v uporabniški vmesnik Netbeans, kjer lahko po potrebi dodajamo mape in datoteke v naš koren spletnega mesta. V našem primeru bo to pomenilo dodajanje map za pisave, slike, datoteke Javascript (skripte) in kaskadne slogovne liste (sloge), ki nam bodo pomagale bolje organizirati našo vsebino v prihodnjih člankih.
Če želite dodati mapo ali datoteko, z desno tipko miške kliknite koren mesta in nato izberite Novo → Mapa ali datoteka HTML.
Zdaj pa predstavimo nekaj novih elementov HTML5 in spremenimo telo strani:
in
predstavlja glavno vsebino dokumenta, kjer je prikazana osrednja tema ali funkcionalnost.
se uporablja za samostojen material, kot so slike ali koda, če naštejemo nekaj primerov.
prikazuje napis za element , zato ga je treba postaviti v oznake .
. Zdaj kopirajte naslednji delček kode v datoteko index.html v Netbeans.
NAMIG: Ne samo kopirajte in prilepite iz tega okna v svoje razvojno okolje, ampak si vzemite čas, da vnesete vsako oznako, da si boste lahko vizualizirali funkcije samodokončanja Netbeansa, ki vam bodo kasneje prišle prav.
!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>
Stran si lahko ogledate tako, da izberete spletni brskalnik (po možnosti Firefox, kot je na spodnji sliki) in kliknete ikono Predvajaj:
Zdaj si lahko ogledate napredek vašega dosedanjega razvoja:
Povzetek
V tem članku smo pregledali nekatere prednosti pisanja spletnih aplikacij z uporabo HTML 5 in nastavili razvojno okolje z Netbeans v Ubuntuju.
Izvedeli smo, da je ta specifikacija jezika uvedla nove elemente in nam tako omogočila pisanje čistejše kode in zamenjavo komponent, ki potrebujejo vire, kot so filmi Flash z vgrajenimi kontrolami.
V prihodnjih člankih bomo predstavili jQuery in Bootstrap, da ne boste lahko uporabljali le teh kontrolnikov in opazovali hitrejše nalaganje strani, temveč jih boste tudi naredili prijazne do mobilnih naprav.
Medtem lahko eksperimentirate z drugimi kontrolniki v Netbeansu in nam sporočite, če imate kakršna koli vprašanja ali pripombe s spodnjim obrazcem.
