Jinsi ya Kuunda Mradi wa Msingi wa HTML5 katika Ubuntu Kwa Kutumia Netbeans
Katika mfululizo huu wa makala 4 wa ukuzaji wa wavuti ya rununu, tutakuongoza kusanidi Netbeans kama IDE (pia inajulikana kama Mazingira Jumuishi ya Maendeleo) katika Ubuntu ili kuanza kutengeneza programu za wavuti za HTML5 zinazofaa kwa simu na zinazoitikia.
Ufuatao ni mfululizo wa makala 4 kuhusu HTML5 Mobile Web Development:
Mazingira ya kazi yaliyoboreshwa vizuri (kama tutakavyoona baadaye), ukamilishaji kiotomatiki kwa lugha zinazotumika, na muunganisho wake usio na mshono na vivinjari vya wavuti ni, kwa maoni yetu, baadhi ya Netbeans, vipengele bainifu zaidi.
Tukumbuke pia kwamba vipimo vya HTML 5 vilileta faida nyingi kwa watengenezaji - kutaja mifano michache: msimbo safi shukrani kwa vipengele vingi vipya), uwezo wa uchezaji wa video na sauti (ambao unachukua nafasi ya hitaji la Flash), utangamano mtambuka. na vivinjari vikuu, na uboreshaji wa vifaa vya rununu.
Ingawa tutajaribu programu zetu mwanzoni kwenye mashine yetu ya ukuzaji wa ndani, hatimaye tutahamisha tovuti yetu hadi kwenye seva ya LAMP na kuigeuza kuwa zana inayobadilika.
Kwa njia hii, tutafanya matumizi ya jQuery (maktaba maarufu ya Javascript ya jukwaa ambalo hurahisisha pakubwa uandishi wa upande wa mteja), na Bootstrap (mfumo maarufu wa HTML, CSS, na JavaScript wa kuunda tovuti zinazojibu). Utaona makala zinazoingia jinsi ilivyo rahisi kusanidi programu-tumizi ya rununu kwa kutumia zana hizi za HTML 5.
Baada ya kupitia mfululizo huu mfupi, utaweza:
tumia zana zilizofafanuliwa humu kuunda programu msingi za HTML5, na
endelea kujifunza ujuzi wa hali ya juu zaidi wa ukuzaji wavuti.
Walakini, tafadhali kumbuka kuwa ingawa tutatumia Ubuntu kwa safu hii, maagizo na taratibu ni halali kwa usambazaji mwingine wa eneo-kazi pia (Linux Mint, Debian, CentOS, Fedora, unaipa jina).
Kwa ajili hiyo, tumechagua kusakinisha programu muhimu (Netbeans na Java JDK, kama utakavyoona baada ya dakika moja) kwa kutumia tarball ya kawaida (.tar.gz) kama njia ya usakinishaji.
Hiyo inasemwa - wacha tuanze na Sehemu ya 1.
Kufunga Java JDK katika Ubuntu
Mafunzo haya yanachukulia kuwa tayari unayo usakinishaji wa eneo-kazi la Ubuntu mahali pake. Ikiwa hutafanya hivyo, tafadhali rejelea Matei Cezar kabla ya kuendelea zaidi.
Kwa kuwa toleo la Netbeans ambalo linapatikana kwa kupakuliwa kutoka kwa hazina rasmi za Ubuntu limepitwa na wakati kidogo, tutapakua kifurushi kutoka kwa tovuti ya Oracle ili kupata toleo jipya zaidi.
Ili kufanya hivyo, una chaguzi mbili:
Chaguo la 1: Pakua kifurushi kinachojumuisha Netbeans + JDK, au
Chaguo la 2: Sakinisha huduma zote mbili tofauti.
Katika nakala hii tutachagua #2 kwa sababu hiyo haimaanishi tu upakuaji ambao ni mdogo kidogo (kwani tutasakinisha Netbeans tu kwa usaidizi wa HTML5 na PHP) lakini pia itaturuhusu kuwa na kisakinishi cha JDK cha pekee iwapo tutakihitaji. seti nyingine ambayo haihitaji Netbeans wala kuhusisha ukuzaji wa wavuti (zaidi inahusiana na bidhaa zingine za Oracle).
Ili kupakua JDK, nenda kwenye tovuti ya Mtandao wa Teknolojia ya Oracle na uende kwenye sehemu ya Java → Java SE → Vipakuliwa.
Unapobofya kwenye picha iliyoonyeshwa hapa chini, utaulizwa kukubali makubaliano ya leseni na kisha utaweza kupakua toleo la lazima la JDK (ambalo kwa upande wetu ni tarball kwa mashine 64-bit). Unapoombwa na kivinjari chako cha wavuti, chagua kuhifadhi faili badala ya kuifungua.
Upakuaji ukikamilika, nenda kwa ~/Downloads na utoe tarball kwenye /usr/local/bin:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Kufunga Netbeans katika Ubuntu
Ili kusakinisha Netbeans kwa usaidizi wa HTML5 na PHP, nenda kwa wget amri ili kupakua kama inavyoonyeshwa.
Kuanzia wakati huo na kuendelea, fuata maagizo kwenye skrini ili kukamilisha usakinishaji ukiacha maadili chaguomsingi:
na subiri usakinishaji ukamilike.
Kuunda Mradi wa Msingi wa HTML5 huko Ubuntu
Ili kufungua Netbeans, ichague kutoka kwa menyu ya Dashi:
Ili kuunda mradi mpya wa HTML5 kwa kutumia kiolezo msingi kilichotolewa na Netbeans, nenda kwenye Faili → Mradi mpya → HTML5 → HTML5 Application. Chagua jina la ufafanuzi la mradi wako na hatimaye ubofye Maliza (usijumuishe kiolezo cha tovuti ya nje au maktaba ya javascript kwa wakati huu):
Kisha tutapelekwa kwenye Kiolesura cha Netbeans, ambapo tunaweza kuongeza folda na faili kwenye Tovuti yetu ya Mizizi inapohitajika. Kwa upande wetu, hii itamaanisha kuongeza folda za fonti, picha, faili za Javascript (hati), na laha za mtindo wa kuachia (mitindo) ili kutusaidia kupanga vyema maudhui yetu katika makala zijazo.
Ili kuongeza folda au faili, bofya kulia kwenye Mizizi ya Tovuti kisha uchague Mpya → Folda au faili ya HTML.
Sasa hebu tutambulishe baadhi ya vipengele vipya vya HTML5 na kurekebisha muundo wa ukurasa:
na
inawakilisha maudhui kuu ya hati, ambapo mada kuu au utendaji unaonyeshwa.
hutumika kwa nyenzo zinazojitosheleza, kama vile picha au msimbo, kutaja mifano michache.
huonyesha manukuu ya kipengele cha , na kwa hivyo ni lazima kiwekwe ndani ya lebo za .
. Sasa nakili kijisehemu kifuatacho cha msimbo kwenye faili yako ya index.html katika Netbeans.
KIDOKEZO: Usiinakili na kubandika tu kutoka kwa dirisha hili hadi kwenye mazingira yako ya usanidi, lakini chukua muda wa kuandika kila lebo ili kuibua vipengele vya ukamilishaji kiotomatiki vya Netbeans, ambavyo vitakufaa baadaye.
!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>
Unaweza kutazama ukurasa kwa kuchagua kivinjari (ikiwezekana Firefox, kama kwenye picha iliyo hapa chini) na kubofya ikoni ya Cheza:
Sasa unaweza kuona maendeleo ya maendeleo yako hadi sasa:
Muhtasari
Katika makala haya, tumepitia baadhi ya faida za kuandika programu zako za wavuti kwa kutumia HTML 5 na kuweka mazingira ya ukuzaji na Netbeans huko Ubuntu.
Tulijifunza kuwa vipimo hivi vya lugha vilianzisha vipengele vipya na hivyo kutupa uwezekano wa kuandika msimbo safi zaidi na kubadilisha vipengele vinavyohitaji rasilimali kama vile Filamu za Flash na vidhibiti vilivyojengewa ndani.
Katika makala zijazo, tutakuletea jQuery na Bootstrap ili sio tu kwamba unaweza kutumia vidhibiti hivi na kutazama kurasa zako zikipakia haraka, lakini pia kuzifanya zitumike kwenye rununu.
Wakati huo huo, jisikie huru kujaribu vidhibiti vingine katika Netbeans, na utufahamishe ikiwa una maswali au maoni yoyote kwa kutumia fomu iliyo hapa chini.
