Netbeans ulanyp, Ubuntu-da esasy HTML5 taslamasyny nädip döretmeli


4 makalaly ykjam web ösüş seriýasynda, ykjam amatly we täsirli HTML5 web programmalaryny ösdürip başlamak üçin Ubuntu-da IDE (Integrirlenen Ösüş gurşawy diýlip hem atlandyrylýar) hökmünde Netbeans-y gurmak arkaly size ýol açarys.

HTML5 ykjam web ösüşi barada 4 makalaly seriýa:

Gowy işlenip düzülen iş gurşawy (soňrak görşümiz ýaly), goldanýan diller üçin awtomatiki gutarmak we web brauzerleri bilen üznüksiz birleşmegi, biziň pikirimizçe, Netbeansyň käbir aýratynlyklary.

Şeýle hem, HTML 5 spesifikasiýasynyň işläp düzüjiler üçin köp artykmaçlyk getirendigini ýadyňyzdan çykarmaň - birnäçe mysal getirmek üçin: köp sanly täze elementiň kömegi bilen has arassa kod), içerki wideo we ses oýnamak mümkinçilikleri (“Flash” -iň zerurlygynyň ornuny tutýar), biri-biri bilen sazlaşykly esasy brauzerler we ykjam enjamlar üçin optimizasiýa bilen.

Ilki bilen ýerli ösüş enjamymyzda programmalarymyzy synap görsek-de, ahyrynda web sahypamyzy LAMP serwerine geçireris we ony dinamiki gurala öwreris.

Wayolda jQuery (müşderi tarapyndan ýazuwy ep-esli aňsatlaşdyrýan meşhur platforma Javascript kitaphanasy) we Bootstrap (täsirli web sahypalaryny ösdürmek üçin meşhur HTML, CSS we JavaScript çarçuwasy) ulanarys. Bu HTML 5 gurallaryny ulanyp, ykjam amatly programma gurmagyň nähili aňsatdygyny gelýän makalalary görersiňiz.

Bu gysga seriýany öwreneniňizden soň başararsyňyz:

  1. esasy HTML5 dinamiki programmalary döretmek üçin şu ýerde beýan edilen gurallary ulanyň we
  2. has ösen web ösüş endiklerini öwrenmäge dowam ediň.

Şeýle-de bolsa, bu seriýa üçin Ubuntu ulansak-da, görkezmeler we proseduralar beýleki iş stoly paýlanyşlary üçin hem ygtybarlydyr (Linux Mint, Debian, CentOS, Fedora, adyny göterýärsiňiz).

Şol maksat bilen, gurnama usuly hökmünde umumy tarbol (.tar.gz) ulanyp, zerur programma üpjünçiligini (Netbeans we Java JDK, bir minutda görşüňiz ýaly) gurmagy saýladyk.

Bu aýdylýar - geliň 1-nji bölümden başlalyň.

Ubuntu-da Java JDK gurmak

Bu gollanma, eýýäm “Ubuntu” iş stoly gurnamagyňyzy göz öňünde tutýar. Başarmaýan bolsaňyz, dowam etmezden ozal Matei Cezar-a ýüz tutmagyňyzy haýyş edýäris.

Ubuntu resmi ammarlaryndan göçürip alyp bolýan Netbeans wersiýasy birneme köne bolansoň, has täze wersiýa almak üçin bukjany Oracle web sahypasyndan göçürip alarys.

Munuň üçin iki saýlawyňyz bar:

  • 1-nji saýlaw : Netbeans + JDK ýa-da
  • öz içine alýan bukjany göçürip alyň
  • 2-nji saýlama : Iki hyzmaty hem aýratyn guruň.

Bu makalada # 2-ni saýlarys, sebäbi bu diňe bir kiçi göwrümli göçürmäni aňlatmaýar (diňe HTML5 we PHP goldawy bilen Netbeans-y gurarys), zerur bolsa özbaşdak JDK gurnawçysyna eýe bolmaga mümkinçilik berer. Netbeans-y talap etmeýän ýa-da web ösüşini öz içine almaýan başga bir toplum (esasanam beýleki Oracle önümleri bilen baglanyşykly).

JDK-ny göçürip almak üçin Oracle Technology Network sahypasyna giriň we Java → Java SE → süklemeler bölümine geçiň.

Aşakda görkezilen surata basanyňyzda, ygtyýarnama şertnamasyny kabul etmegiňiz soralar we zerur JDK wersiýasyny göçürip alyp bilersiňiz (bu biziň ýagdaýymyzda 64 bitli maşynlar üçin niýetlenen). Web brauzeriňiz sorasa, faýly açmagyň ýerine ýazdyrmagy saýlaň.

Göçürip alanyňyzdan soň ~/süklemelere gidiň we tarboly /usr/local/bin -e çykaryň:

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

Ubuntu-da Netbeans gurmak

Netbeans-y HTML5 we PHP goldawy bilen gurmak üçin, görkezilişi ýaly göçürip almak üçin wget buýrugyna geçiň.

$ 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

Şondan başlap, deslapky bahalary goýup, gurnamany tamamlamak üçin ekrandaky görkezmelere eýeriň:

we gurnamagyň tamamlanmagyna garaşyň.

Ubuntu-da esasy HTML5 taslamasyny döretmek

Netbeans-y açmak üçin Dash menýusyndan saýlaň:

Netbeans tarapyndan üpjün edilen esasy şablony ulanyp, täze HTML5 taslamasyny döretmek üçin Faýl → Täze taslama → HTML5 → HTML5 goýmasyna gidiň. Taslamaňyz üçin düşündirişli at saýlaň we ahyrynda “Finish” -e basyň (şu wagt daşarky sahypa şablonyny ýa-da javascript kitaphanalaryny goşmaň):

Soňra Netbeans UI-e äkideris, şol ýerde zerur bolanda Saýt köküne bukjalar we faýllar goşup bileris. Biziň ýagdaýymyzda, bu geljekki makalalarda mazmunymyzy has gowy tertipleşdirmäge kömek etmek üçin şriftler, suratlar, Javascript faýllary (skriptler) we kaskadly stil sahypalary (stilleri) üçin bukjalar goşmagy aňladýar.

Papka ýa-da faýl goşmak üçin Saýt köküne sag basyň we Täze → Papka ýa-da HTML faýly saýlaň.

Indi käbir täze HTML5 elementleri bilen tanyşdyralyň we sahypanyň göwrümini üýtgedeliň:

  1. we
    resminama ýa-da bölüm üçin degişlilikde sözbaşy ýa-da aşaky sözbaşy kesgitleýär.
  2. resminamanyň esasy mazmunyny görkezýär, bu ýerde merkezi mowzuk ýa-da işleýiş görkezilýär.
  3. birnäçe mysal görkezmek üçin şekil ýa-da kod ýaly öz-özüne degişli material üçin ulanylýar.
  4. elementiniň ýazgysyny görkezýär we şeýlelik bilen
    bellikleriniň içinde bolmaly.

.
Indi Netbeans-daky index.html faýlyňyza aşakdaky kod parçasyny göçüriň.

Maslahat: Diňe şu penjireden ösüş gurşawyňyza göçürmäň we goýmaň, soňra Netbeans-yň awtomatiki usulda tamamlanmagyny göz öňüne getirmek üçin her belligi ýazmaga wagt sarp ediň.

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

Sahypany web brauzerini (has gowusy aşakdaky suratdaky ýaly Firefox) saýlap we Play nyşanyna basyp görüp bilersiňiz:

Ösüşiňiziň gidişini şu wagta çenli görüp bilersiňiz:

Gysgaça mazmun

Bu makalada web programmalaryňyzy HTML 5 ulanyp ýazmagyň käbir artykmaçlyklaryny gözden geçirdik we Ubuntu-da Netbeans bilen ösüş gurşawyny gurduk.

Diliň bu spesifikasiýasynyň täze elementleri döredendigini we şeýlelik bilen has arassa kod ýazmak we Flash filmleri ýaly çeşme aç komponentleri içerki dolandyryşlar bilen çalyşmak mümkinçiligini üpjün etdik.

Geljekki makalalarda diňe bir bu dolandyryşlary ulanyp, sahypalaryňyzyň has çalt ýüklenmegine tomaşa edip bilmän, ykjam amatly edip bilersiňiz, jQuery we Bootstrap bilen tanyşdyrarys.

Şol bir wagtyň özünde, Netbeans-daky beýleki dolandyryşlar bilen synag edip görüň we aşakdaky formany ulanyp soraglaryňyz ýa-da teswirleriňiz bar bolsa bize habar beriň.