Hvernig á að búa til grunn HTML5 verkefni í Ubuntu með því að nota Netbeans
Í þessari 4-greina farsímavefþróunarröð munum við leiða þig í gegnum uppsetningu Netbeans sem IDE (einnig þekkt sem Integrated Development Environment) í Ubuntu til að byrja að þróa farsímavæn og móttækileg HTML5 vefforrit.
Eftirfarandi eru 4 greina röð um HTML5 farsímavefþróun:
Vel fágað vinnuumhverfi (eins og við munum sjá síðar), sjálfvirk útfylling fyrir studd tungumál og óaðfinnanlegur samþætting þess við vafra eru að okkar mati sumir af Netbeans, mest áberandi eiginleikar.
Við skulum líka muna að HTML 5 forskriftin hafði marga kosti fyrir þróunaraðila - svo nokkur dæmi séu nefnd: hreinni kóða þökk sé mörgum nýjum þáttum), innbyggður mynd- og hljóðspilunarmöguleiki (sem kemur í stað Flash-þarfarinnar), krosssamhæfni. með helstu vöfrum og fínstillingu fyrir farsíma.
Þó að við munum í upphafi prófa forritin okkar á staðbundinni þróunarvél, munum við að lokum færa vefsíðuna okkar á LAMP-þjón og breyta henni í kraftmikið tæki.
Í leiðinni munum við nýta okkur jQuery (velþekkt Javascript bókasafn á milli vettvanga sem einfaldar til muna forskriftarforskriftir viðskiptavina) og Bootstrap (vinsæla HTML, CSS og JavaScript ramma til að þróa móttækilegar vefsíður). Þú munt sjá innkomnar greinar hversu auðvelt það er að setja upp farsímavænt forrit með þessum HTML 5 verkfærum.
Eftir að þú hefur farið í gegnum þessa stuttu röð muntu geta:
notaðu verkfærin sem lýst er hér til að búa til grunn HTML5 kraftmikil forrit, og
farðu áfram til að læra fullkomnari færni í vefþróun.
Hins vegar, vinsamlegast hafðu í huga að jafnvel þó að við munum nota Ubuntu fyrir þessa seríu, eru leiðbeiningarnar og verklagsreglurnar fullkomlega gildar fyrir aðrar skrifborðsdreifingar líka (Linux Mint, Debian, CentOS, Fedora, þú nefnir það).
Í því skyni höfum við valið að setja upp nauðsynlegan hugbúnað (Netbeans og Java JDK, eins og þú munt sjá eftir eina mínútu) með því að nota almenna tarball (.tar.gz) sem uppsetningaraðferð.
Sem sagt - við skulum byrja með hluta 1.
Uppsetning Java JDK í Ubuntu
Þessi kennsla gerir ráð fyrir að þú hafir nú þegar Ubuntu skrifborðsuppsetningu á sínum stað. Ef þú gerir það ekki, vinsamlegast hafðu samband við Matei Cezar áður en þú heldur áfram.
Þar sem Netbeans útgáfan sem hægt er að hlaða niður frá opinberu geymslum Ubuntu er svolítið úrelt munum við hlaða niður pakkanum af Oracle vefsíðunni til að fá nýrri útgáfu.
Til að gera þetta hefur þú tvo kosti:
Valur 1: Sæktu pakkann sem inniheldur Netbeans + JDK, eða
Val 2: Settu upp bæði tólin sérstaklega.
Í þessari grein munum við velja #2 vegna þess að það þýðir ekki aðeins niðurhal sem er aðeins minna (þar sem við munum aðeins setja upp Netbeans með stuðningi fyrir HTML5 og PHP) heldur mun það einnig gera okkur kleift að hafa sjálfstæðan JDK uppsetningarforrit ef við þurfum á því að halda annað sett sem krefst hvorki Netbeans né felur í sér vefþróun (aðallega tengt öðrum Oracle vörum).
Til að hlaða niður JDK skaltu fara á Oracle Technology Network síðuna og fara í Java → Java SE → Niðurhal hluta.
Þegar þú smellir á myndina sem er auðkennd hér að neðan verður þú beðinn um að samþykkja leyfissamninginn og þá muntu geta halað niður nauðsynlegri JDK útgáfu (sem í okkar tilfelli er tarball fyrir 64-bita vélar). Þegar vafrinn þinn biður um það skaltu velja að vista skrána í stað þess að opna hana.
Þegar niðurhalinu er lokið, farðu í ~/Downloads og dragðu út tarballið í /usr/local/bin:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Að setja upp Netbeans í Ubuntu
Til að setja upp Netbeans með stuðningi fyrir HTML5 og PHP, farðu í wget skipunina til að hlaða niður eins og sýnt er.
Þaðan í frá skaltu fylgja leiðbeiningunum á skjánum til að ljúka uppsetningunni og skilja eftir sjálfgefin gildi:
og bíddu eftir að uppsetningunni lýkur.
Að búa til grunn HTML5 verkefni í Ubuntu
Til að opna Netbeans skaltu velja það úr Dash valmyndinni:
Til að búa til nýtt HTML5 verkefni með því að nota grunnsniðmátið sem Netbeans býður upp á, farðu í File → New project → HTML5 → HTML5 Application. Veldu lýsandi heiti fyrir verkefnið þitt og smelltu að lokum á Ljúka (ekki láta utanaðkomandi vefsniðmát eða javascript bókasöfn fylgja með í augnablikinu):
Síðan verður farið í Netbeans notendaviðmótið, þar sem við getum bætt möppum og skrám við vefsvæðið okkar eftir þörfum. Í okkar tilviki mun þetta þýða að bæta við möppum fyrir leturgerðir, myndir, Javascript skrár (forskriftir) og fallandi stílblöð (stílar) til að hjálpa okkur að skipuleggja innihald okkar betur í næstu greinum.
Til að bæta við möppu eða skrá skaltu hægrismella á Site Root og velja síðan Nýtt → Mappa eða HTML skrá.
Nú skulum við kynna nokkra nýja HTML5 þætti og breyta meginmáli síðunnar:
og
táknar meginefni skjalsins, þar sem aðalefnið eða virknin er sýnd.
er notað fyrir sjálfstætt efni, svo sem myndir eða kóða, svo nokkur dæmi séu nefnd.
sýnir myndatexta fyrir frumefni og því verður að setja hann innan merkjanna.
. Afritaðu nú eftirfarandi kóðabút í index.html skrána þína í Netbeans.
ÁBENDING: Ekki bara afrita og líma úr þessum glugga í þróunarumhverfið þitt, heldur gefðu þér tíma til að slá inn hvert merki til að sjá sjálfvirka útfyllingareiginleika Netbeans, sem munu koma sér vel síðar.
!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>
Þú getur skoðað síðuna með því að velja vafra (helst Firefox, eins og á myndinni hér að neðan) og smella á Play táknið:
Þú getur nú skoðað framvindu þróunar þinnar hingað til:
Samantekt
Í þessari grein höfum við farið yfir nokkra af kostum þess að skrifa vefforrit með HTML 5 og setja upp þróunarumhverfi með Netbeans í Ubuntu.
Við komumst að því að þessi forskrift tungumálsins kynnti nýja þætti og gaf okkur þannig möguleika á að skrifa hreinni kóða og skipta um auðlindaþunga hluti eins og Flash-kvikmyndir með innbyggðum stjórntækjum.
Í næstu greinum munum við kynna jQuery og Bootstrap þannig að þú getur ekki aðeins notað þessar stýringar og horft á síðurnar þínar hlaðast hraðar, heldur einnig gert þær farsímavænar.
Á meðan, ekki hika við að gera tilraunir með aðrar stýringar í Netbeans, og láttu okkur vita ef þú hefur einhverjar spurningar eða athugasemdir með því að nota eyðublaðið hér að neðan.
