Otu esi emepụta ihe bụ isi HTML5 Project na Ubuntu Iji Netbeans


N'ime usoro mmepe weebụ mkpanaaka nke 4 a, anyị ga-ejegharị gị site na ịtọlite Netbeans dị ka IDE (nke a makwaara dị ka Integrated Development Environment) na Ubuntu ka ịmalite ịmepụta ngwa weebụ HTML5 enyi na enyi na nke na-anabata ya.

Ndị a bụ usoro edemede edemede 4 gbasara HTML5 Mobile Web Development:

Ebe ọrụ mara mma nke ọma (dị ka anyị ga-emecha hụ), mmecha akpaaka maka asụsụ ndị akwadoro, yana njikọta ya na ihe nchọgharị weebụ bụ, n'echiche anyị, ụfọdụ n'ime Netbeans, njirimara kachasị.

Ka anyị chetakwa na nkọwapụta HTML 5 wetara ọtụtụ uru maka ndị mmepe - ịkpọ aha ole na ole: koodu dị ọcha ekele maka ọtụtụ ihe ọhụrụ), vidiyo arụnyere na ike ịkpọghachi ọdịyo (nke na-edochi mkpa Flash), ndakọrịta cross. nwere nnukwu ihe nchọgharị, yana nkwalite maka ngwaọrụ mkpanaka.

Agbanyeghị na anyị ga-anwale ngwa anyị na igwe mmepe mpaghara anyị, anyị ga-emecha bugharịa webụsaịtị anyị na sava LAMP wee tụgharịa ya ka ọ bụrụ ngwa ọrụ siri ike.

Ka anyị na-aga, anyị ga-eji jQuery (ọbá akwụkwọ Javascript a ma ama nke na-eme ka ederede akụkụ ndị ahịa dị mfe), yana Bootstrap ( HTML, CSS, na JavaScript na-ewu ewu maka ịmepụta ebe nrụọrụ weebụ na-anabata). Ị ga-ahụ akụkọ na-abata ka ọ dị mfe ịtọlite ngwa enyi na enyi na-eji ngwa HTML 5 ndị a.

Mgbe ịmechara usoro a dị mkpirikpi, ị ga-enwe ike:

  1. jiri ngwaọrụ akọwara ebe a mepụta ngwa HTML5 bụ isi, yana
  2. ga n'ihu mụta nka mmepe webụ dị elu.

Agbanyeghị, biko mara na n'agbanyeghị na anyị ga-eji Ubuntu maka usoro isiokwu a, ntuziaka na usoro dabara adaba maka nkesa desktọpụ ndị ọzọ (Linux Mint, Debian, CentOS, Fedora, ị kpọrọ ya aha).

Iji mezuo nke ahụ, anyị ahọrọla ịwụnye ngwanrọ dị mkpa (Netbeans na Java JDK, dị ka ị ga-ahụ na nkeji) site na iji tarball generic (.tar.gz) dị ka usoro ntinye.

Nke a na-ekwu - ka anyị malite na Nkebi 1.

Ịwụnye Java JDK na Ubuntu

Nkuzi a na-eche na ị nweelarị nrụnye desktọpụ Ubuntu n'ebe. Ọ bụrụ na ịmeghị, biko rụtụ aka na Matei Cezar tupu ịga n'ihu.

Ebe ọ bụ na ụdị Netbeans dị maka nbudata site na ụlọ ọrụ gọọmentị Ubuntu adịchaghị emezigharị, anyị ga-ebudata ngwugwu ahụ na webụsaịtị Oracle iji nweta ụdị ọhụrụ.

Iji mee nke a, ị nwere nhọrọ abụọ:

  • Nhọrọ 1: Budata ngwugwu ahụ gụnyere Netbeans + JDK, ma ọ bụ
  • Nhọrọ 2: Wụnye akụrụngwa abụọ a iche iche.

N'isiokwu a, anyị ga-ahọrọ #2 n'ihi na ọ bụghị nanị na ọ pụtara nbudata nke dị ntakịrị (dịka anyị ga-etinye Netbeans na nkwado maka HTML5 na PHP) kamakwa ọ ga-enye anyị ohere ịnweta ihe nkwụnye JDK kwụ ọtọ ma ọ bụrụ na anyị chọrọ ya maka ya. Ntọala ọzọ nke na-achọghị Netbeans ma ọ bụ tinye aka na mmepe weebụ (nke metụtara ngwaahịa Oracle ndị ọzọ).

Iji budata JDK, gaa na saịtị Oracle Technology Network wee gaa na ngalaba Java → Java SE → nbudata.

Mgbe ị pịrị na onyonyo a kapịrị ọnụ n'okpuru, a ga-agwa gị ka ị nabata nkwekọrịta ikike wee nwee ike ibudata ụdị JDK dị mkpa (nke n'ọnọdụ anyị bụ tarball maka igwe 64-bit). Mgbe ihe nchọgharị weebụ gị kpaliri, họrọ ịchekwa faịlụ ahụ kama imepe ya.

Mgbe nbudata ahụ gwụchara, gaa na ~/budata wee wepụ bọọlụ ahụ gaa na /usr/local/bin:

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

Wụnye Netbeans na Ubuntu

Iji tinye Netbeans na nkwado maka HTML5 na PHP, gaa na wget iwu ibudata dị ka egosiri.

$ 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

Site na mgbe ahụ gaa n'ihu, soro ntuziaka na ihuenyo iji mezue nrụnye na-ahapụ ụkpụrụ ndabara:

ma chere ka echichi mechaa.

Ịmepụta ihe bụ isi HTML5 Project na Ubuntu

Iji mepee Netbeans, họrọ ya na menu Dash:

Iji mepụta HTML5 ọhụrụ site na iji ndebiri bụ isi nke Netbeans nyere, gaa na Faịlụ → Ọrụ ọhụrụ → HTML5 → Ngwa HTML5. Họrọ aha nkọwa maka ọrụ gị wee pịa N'ikpeazụ (e tinyela ndebiri saịtị dị na mpụga ma ọ bụ ọba akwụkwọ javascript n'oge a):

A ga-akpọrọ anyị gaa na Netbeans UI, ebe anyị nwere ike itinye nchekwa na faịlụ na mgbọrọgwụ saịtị anyị dịka ọ dị mkpa. N'ọnọdụ anyị, nke a ga-apụta ịgbakwunye folda maka mkpụrụedemede, onyonyo, faịlụ Javascript (edemede), yana ụdị mpempe akwụkwọ (ụdị) iji nyere anyị aka ịhazi ọdịnaya anyị nke ọma na akụkọ na-abịa.

Ka ịgbakwunye nchekwa ma ọ bụ faịlụ, pịa aka nri na mgbọrọgwụ saịtị wee họrọ New → Folda ma ọ bụ HTML faịlụ.

Ugbu a, ka anyị webata ụfọdụ HTML5 ọhụrụ wee gbanwee ahụ ibe:

  1. na
    kọwapụta nkụnye eji isi mee ma ọ bụ n'ụkwụ, n'otu n'otu, maka akwụkwọ ma ọ bụ ngalaba.
  2. na-anọchite anya ọdịnaya bụ isi nke akwụkwọ, ebe egosiri isi isiokwu ma ọ bụ ọrụ ya.
  3. A na-eji
  4. maka ihe nwere onwe ya, dị ka onyonyo ma ọ bụ koodu, ịkpọ aha ole na ole.
  5. na-egosi akara edemede maka ihe
    , yabụ a ga-edobe ya n'ime mkpado
    .

.
Ugbu a detuo snippet koodu ndị a na faịlụ index.html gị na Netbeans.

NDỤMỌDỤ: Emela naanị detuo na mado site na mpio a gaa na gburugburu mmepe gị, kama wepụta oge iji pịnye mkpado ọ bụla ka ị were anya nke uche na njirimara mmecha nke Netbeans, nke ga-aba uru ma emechaa.

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

Ị nwere ike ịlele ibe ahụ site na ịhọrọ ihe nchọgharị weebụ (ọkacha mma Firefox, dị ka ọ dị na foto dị n'okpuru) wee pịa akara ngosi Play:

Ị nwere ike ịhụ ọganihu mmepe gị ugbu a:

Nchịkọta

N'ime edemede a, anyị enyochala ụfọdụ uru dị na iji HTML 5 dee ngwa weebụ gị wee guzobe ebe mmepe na Netbeans na Ubuntu.

Anyị mụtara na nkọwapụta asụsụ a webatara ihe ọhụrụ wee si otú ahụ nye anyị ohere nke ide koodu dị ọcha na iji njikwa arụnyere dochie ihe ndị na-agụ agụụ ihe onwunwe dị ka ihe nkiri Flash.

N'ime edemede ndị na-abịa, anyị ga-ewebata jQuery na Bootstrap ka ị nwee ike ọ bụghị naanị iji njikwa ndị a wee lelee ibe gị ngwa ngwa, kamakwa mee ka ha nwee enyi na enyi.

Ka ọ dị ugbu a, nweere onwe gị ịnwale njikwa ndị ọzọ na Netbeans, wee mee ka anyị mara ma ị nwere ajụjụ ọ bụla ma ọ bụ kwuo okwu site na iji ụdị dị n'okpuru.