Giunsa Paghimo usa ka Basic HTML5 Project sa Ubuntu Gamit ang Netbeans
Niining 4-artikulo nga serye sa pagpalambo sa web sa mobile, giyahan ka namo pinaagi sa pag-set up sa Netbeans isip IDE (nailhan usab nga Integrated Development Environment) sa Ubuntu aron magsugod sa pag-ugmad sa mobile-friendly ug responsive nga HTML5 nga mga aplikasyon sa web.
Ang mosunod mao ang 4-artikulo nga serye mahitungod sa HTML5 Mobile Web Development:
Ang usa ka maayo nga gipasinaw nga palibot sa trabaho (ingon sa atong makita sa ulahi), autocompletion alang sa gisuportahan nga mga lengguwahe, ug ang hapsay nga panagsama niini sa mga web browser, sa among opinyon, ang pipila sa mga Netbeans, ang labing lahi nga mga bahin.
Atong hinumdoman usab nga ang HTML 5 nga espesipikasyon nagdala og daghang mga bentaha alang sa mga developers - sa paghingalan sa pipila ka mga pananglitan: mas limpyo nga code salamat sa daghang mga bag-ong elemento), built-in nga video ug audio playback nga kapabilidad (nga mipuli sa panginahanglan alang sa Flash), cross-compatibility uban sa dagkong mga browser, ug pag-optimize alang sa mga mobile device.
Bisan tuod nga una namong sulayan ang among mga aplikasyon sa among lokal nga makina sa pagpalambo, sa kadugayan among ibalhin ang among website ngadto sa LAMP server ug himoon kini nga dinamikong himan.
Sa dalan, atong gamiton ang jQuery (usa ka ilado nga cross-platform nga Javascript library nga nagpayano pag-ayo sa client-side scripting), ug Bootstrap (ang popular nga HTML, CSS, ug JavaScript nga gambalay alang sa pagpalambo sa responsive nga mga website). Makita nimo ang umaabot nga mga artikulo kung unsa kadali ang pag-set up sa usa ka mobile-friendly nga aplikasyon gamit kini nga HTML 5 nga mga himan.
Human nimo masinati kining mubo nga serye, mahimo nimong:
gamita ang mga himan nga gihulagway dinhi sa paghimo og batakang HTML5 nga dinamikong aplikasyon, ug
pagpadayon sa pagkat-on og mas abante nga kahanas sa pagpalambo sa web.
Bisan pa, palihug timan-i nga bisan kung gamiton namon ang Ubuntu para sa kini nga serye, ang mga panudlo ug mga pamaagi hingpit nga balido alang usab sa ubang mga pag-apod-apod sa desktop (Linux Mint, Debian, CentOS, Fedora, ngalan nimo kini).
Alang niana, gipili namo nga i-install ang gikinahanglan nga software (Netbeans ug ang Java JDK, ingon sa imong makita sa usa ka minuto) gamit ang generic nga tarball (.tar.gz) isip pamaagi sa pag-instalar.
Ingon niana - magsugod kita sa Bahin 1.
Pag-instalar sa Java JDK sa Ubuntu
Kini nga panudlo nagdahum nga ikaw adunay usa ka pag-install sa desktop sa Ubuntu sa lugar. Kung dili nimo buhaton, palihug tan-awa ang Matei Cezar sa dili pa magpadayon.
Tungod kay ang bersyon sa Netbeans nga magamit alang sa pag-download gikan sa opisyal nga mga repositoryo sa Ubuntu medyo karaan na, among i-download ang package gikan sa website sa Oracle aron makakuha usa ka bag-ong bersyon.
Aron mahimo kini, adunay ka duha nga kapilian:
Pagpili 1: I-download ang bundle nga naglakip sa Netbeans + JDK, o
Pagpili 2: I-install ang duha ka utilities nga gilain.
Niini nga artikulo atong pilion ang #2 tungod kay dili lamang kana nagpasabut nga usa ka pag-download nga gamay ra (tungod kay mag-install ra kami sa mga Netbeans nga adunay suporta alang sa HTML5 ug PHP) apan tugutan usab kami nga adunay usa ka standalone nga installer sa JDK kung kinahanglan namon kini. laing set nga wala magkinahanglan og mga Netbeans ni naglakip sa web development (kasagaran may kalabutan sa ubang mga produkto sa Oracle).
Aron ma-download ang JDK, adto sa Oracle Technology Network site ug navigate sa Java → Java SE → Downloads section.
Kung nag-klik ka sa imahe nga gipasiugda sa ubos, hangyoon ka nga dawaton ang kasabutan sa lisensya ug mahimo nimong ma-download ang kinahanglan nga bersyon sa JDK (nga sa among kaso mao ang tarball alang sa 64-bit nga mga makina). Kung giaghat sa imong web browser, pilia nga i-save ang file imbis nga ablihan kini.
Kung kompleto na ang pag-download, adto sa ~/Downloads ug i-extract ang tarball sa /usr/local/bin:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Pag-instalar sa Netbeans sa Ubuntu
Aron ma-install ang Netbeans nga adunay suporta sa HTML5 ug PHP, adto sa wget command aron ma-download sama sa gipakita.
Sukad niadto, sunda ang mga instruksyon sa screen aron makompleto ang pag-install nga gibiyaan ang mga default nga kantidad:
ug maghulat nga makompleto ang pag-install.
Paghimo og Basic HTML5 Project sa Ubuntu
Aron maablihan ang Netbeans, pilia kini gikan sa Dash menu:
Aron makahimo ug bag-ong proyekto sa HTML5 gamit ang batakang template nga gihatag sa Netbeans, adto sa File → Bag-ong proyekto → HTML5 → HTML5 Application. Pagpili og usa ka deskriptibo nga ngalan alang sa imong proyekto ug sa katapusan i-klik ang Finish (ayaw iapil ang usa ka eksternal nga template sa site o javascript nga mga librarya niining panahona):
Dayon kita dad-on ngadto sa Netbeans UI, diin kita makadugang sa mga folder ug mga file sa atong Site Root kon gikinahanglan. Sa among kaso, kini magpasabot sa pagdugang og mga folder para sa mga font, mga hulagway, Javascript files (scripts), ug cascading style sheets (estilo) aron matabangan kami nga mas maorganisar ang among sulod sa umaabot nga mga artikulo.
Aron makadugang og folder o file, i-right-click ang Site Root ug dayon pilia ang New → Folder o HTML file.
Karon atong ipaila ang pipila ka bag-ong mga elemento sa HTML5 ug usbon ang lawas sa panid:
ug
Ang
nagrepresentar sa nag-unang sulod sa usa ka dokumento, diin ang sentro nga hilisgutan o gamit gipakita.
Ang
gigamit alang sa materyal nga adunay kaugalingon, sama sa mga imahe o code, aron hinganlan ang pipila ka mga pananglitan.
Ang
nagpakita ug kapsyon para sa usa ka nga elemento, ug busa kinahanglan kining ibutang sulod sa tag.
Ang
. Karon kopyaha ang mosunod nga code snippet sa imong index.html file sa Netbeans.
TIP: Ayaw lang pagkopya ug pag-paste gikan niini nga bintana ngadto sa imong development environment, apan paggahin ug panahon sa pag-type sa matag tag aron mahanduraw ang auto-completion features sa Netbeans, nga magamit sa ulahi.
!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>
Mahimo nimong tan-awon ang panid pinaagi sa pagpili sa usa ka web browser (mas maayo nga Firefox, sama sa ubos nga hulagway) ug pag-klik sa Play icon:
Mahimo nimong tan-awon ang pag-uswag sa imong pag-uswag hangtod karon:
Summary
Niini nga artikulo, among gisusi ang pipila ka mga bentaha sa pagsulat sa imong mga web application gamit ang HTML 5 ug pag-set up ug development environment uban sa Netbeans sa Ubuntu.
Among nakat-unan nga kini nga espesipikasyon sa pinulongan nagpaila sa bag-ong mga elemento ug sa ingon naghatag kanamo sa posibilidad sa pagsulat sa mas limpyo nga code ug pag-ilis sa mga sangkap nga gigutom sa kapanguhaan sama sa mga salida sa Flash nga adunay mga built-in nga kontrol.
Sa umaabot nga mga artikulo, among ipaila ang jQuery ug Bootstrap aron dili lang nimo magamit kini nga mga kontrol ug tan-awon nga mas paspas ang pagkarga sa imong mga panid, apan mahimo usab kini nga mobile-friendly.
Sa kasamtangan, mobati nga gawasnon nga mag-eksperimento sa ubang mga kontrol sa Netbeans, ug ipahibalo kanamo kung naa kay mga pangutana o komento gamit ang porma sa ubos.
