Kif toħloq Proġett HTML5 Bażiku f'Ubuntu billi tuża Netbeans
F'din is-serje ta 'żvilupp tal-web mobbli ta' 4 artikoli, aħna ser nimxuk fit-twaqqif ta 'Netbeans bħala IDE (magħruf ukoll bħala Ambjent ta' Żvilupp Integrat) f'Ubuntu biex tibda tiżviluppa applikazzjonijiet tal-web HTML5 li jiffavorixxu l-mowbajl u li jirrispondu.
Dawn li ġejjin huma s-serje ta' 4 artikoli dwar l-Iżvilupp tal-Web Mobbli HTML5:
Ambjent tax-xogħol illustrat sew (kif ser naraw aktar tard), awtokompletazzjoni għal lingwi appoġġjati, u l-integrazzjoni bla xkiel tiegħu mal-web browsers huma, fl-opinjoni tagħna, xi wħud minn Netbeans, l-aktar karatteristiċi distintivi.
Ejja niftakru wkoll li l-ispeċifikazzjoni HTML 5 ġabet ħafna vantaġġi għall-iżviluppaturi – biex insemmu xi ftit eżempji: kodiċi aktar nadif bis-saħħa ta’ ħafna elementi ġodda), kapaċitajiet ta’ daqq ta’ vidjo u awdjo integrati (li jissostitwixxu l-ħtieġa għal Flash), kompatibilità inkroċjata ma 'browsers ewlenin, u ottimizzazzjoni għal apparat mobbli.
Għalkemm inizjalment se nittestjaw l-applikazzjonijiet tagħna fuq il-magna tal-iżvilupp lokali tagħna, eventwalment se nċaqalqu l-websajt tagħna għal server LAMP u nbiddluh f'għodda dinamika.
Tul it-triq, se nagħmlu użu minn jQuery (librerija ta’ Javascript bejn pjattaformi magħrufa li tissimplifika bil-kbir l-iskripts min-naħa tal-klijent), u Bootstrap (il-qafas popolari HTML, CSS, u JavaScript għall-iżvilupp ta’ websajts li jirrispondu). Se tara artikli deħlin kemm huwa faċli li twaqqaf applikazzjoni li tiffavorixxi l-mowbajl billi tuża dawn l-għodod HTML 5.
Wara li tgħaddi minn din is-serje qasira, tkun tista':
uża l-għodod deskritti hawnhekk biex toħloq applikazzjonijiet dinamiċi HTML5 bażiċi, u
kompli titgħallem ħiliet ta' żvilupp tal-web aktar avvanzati.
Madankollu, jekk jogħġbok innota li minkejja li se nkunu qed nużaw Ubuntu għal din is-serje, l-istruzzjonijiet u l-proċeduri huma perfettament validi għal distribuzzjonijiet oħra tad-desktop ukoll (Linux Mint, Debian, CentOS, Fedora, isemmuha).
Għal dak il-għan, għażilna li ninstallaw is-softwer meħtieġ (Netbeans u l-Java JDK, kif se taraw f'minuta) bl-użu ta' tarball ġeneriku (.tar.gz) bħala metodu ta' installazzjoni.
That being said - ejja nibdew bil-Parti 1.
Installazzjoni ta' Java JDK f'Ubuntu
Dan it-tutorja jassumi li diġà għandek installazzjoni tad-desktop Ubuntu f'postha. Jekk ma tagħmilx hekk, jekk jogħġbok irreferi għall-Matei Cezar qabel ma tkompli.
Peress li l-verżjoni Netbeans li hija disponibbli biex titniżżel mir-repożitorji uffiċjali ta 'Ubuntu hija ftit skaduta, aħna se tniżżel il-pakkett mill-websajt Oracle biex tikseb verżjoni aktar ġdida.
Biex tagħmel dan, għandek żewġ għażliet:
Għażla 1: Niżżel il-pakkett li jinkludi Netbeans + JDK, jew
Għażla 2: Installa ż-żewġ utilitajiet separatament.
F'dan l-artikolu se nagħżlu #2 għaliex dan mhux biss ifisser tniżżil li huwa daqsxejn iżgħar (billi se ninstallaw Netbeans biss b'appoġġ għal HTML5 u PHP) iżda wkoll se jippermettilna li jkollna installatur JDK waħdu jekk ikollna bżonnha għal sett ieħor li ma jeħtieġx Netbeans u lanqas jinvolvi żvilupp tal-web (l-aktar relatati ma' prodotti Oracle oħra).
Biex tniżżel JDK, mur fis-sit tan-Netwerk tat-Teknoloġija tal-Oracle u naviga lejn is-sezzjoni Java → Java SE → Downloads.
Meta tikklikkja fuq l-immaġni enfasizzata hawn taħt, tintalab taċċetta l-ftehim tal-liċenzja u mbagħad tkun tista’ tniżżel il-verżjoni JDK meħtieġa (li fil-każ tagħna hija t-tarball għal magni 64-bit). Meta tintalab mill-web browser tiegħek, agħżel li tissejvja l-fajl minflok tiftaħ.
Meta t-tniżżil tkun kompluta, mur ~/Downloads u iġbed it-tarball għal /usr/local/bin:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Installazzjoni ta' Netbeans f'Ubuntu
Biex tinstalla Netbeans b'appoġġ għal HTML5 u PHP, mur fil-kmand wget biex tniżżel kif muri.
Minn hemm 'il quddiem, segwi l-istruzzjonijiet fuq l-iskrin biex tlesti l-installazzjoni u tħalli l-valuri awtomatiċi:
u stenna li l-installazzjoni titlesta.
Ħolqien ta 'Proġett HTML5 Bażiku f'Ubuntu
Biex tiftaħ Netbeans, agħżelha mill-menu Dash:
Biex toħloq proġett HTML5 ġdid billi tuża l-mudell bażiku pprovdut minn Netbeans, mur File → Proġett ġdid → HTML5 → Applikazzjoni HTML5. Agħżel isem deskrittiv għall-proġett tiegħek u fl-aħħar ikklikkja Finish (ma tinkludix mudell ta' sit estern jew libreriji javascript f'dan il-ħin):
Imbagħad se nittieħdu fl-UI Netbeans, fejn nistgħu nżidu folders u fajls mas-Sit Root tagħna kif meħtieġ. Fil-każ tagħna, dan se jfisser li żżid folders għal fonts, stampi, fajls Javascript (skripts), u folji tal-istil cascading (stili) biex tgħinna norganizzaw aħjar il-kontenut tagħna fl-artikoli li ġejjin.
Biex iżżid folder jew fajl, ikklikkja bil-lemin fuq l-Għerq tas-Sit u mbagħad agħżel Ġdid → Folder jew fajl HTML.
Issa ejja nintroduċu xi elementi HTML5 ġodda u nimmodifikaw il-korp tal-paġna:
u
jirrappreżenta l-kontenut ewlieni ta' dokument, fejn jintwera s-suġġett ċentrali jew il-funzjonalità.
tintuża għal materjal li fih innifsu, bħal immaġini jew kodiċi, biex insemmu ftit eżempji.
turi caption għal element , u għalhekk għandu jitqiegħed fit-tags .
. Issa kkopja s-snippet tal-kodiċi li ġej fil-fajl index.html tiegħek f'Netbeans.
TIP: Tikkupjax u tippejstx minn din it-tieqa għall-ambjent tal-iżvilupp tiegħek, imma ħu l-ħin biex tikteb kull tag sabiex tara l-karatteristiċi ta 'awto-tlestija ta' Netbeans, li se jkunu utli aktar tard.
!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>
Tista' tara l-paġna billi tagħżel web browser (preferibbilment Firefox, bħal fl-immaġni hawn taħt) u tikklikkja l-ikona Play:
Issa tista' tara l-progress tal-iżvilupp tiegħek s'issa:
Sommarju
F'dan l-artikolu, irrevejna xi wħud mill-vantaġġi tal-kitba tal-applikazzjonijiet tal-web tiegħek billi tuża HTML 5 u waqqafna ambjent ta 'żvilupp b'Netbeans f'Ubuntu.
Tgħallimna li din l-ispeċifikazzjoni tal-lingwa introduċiet elementi ġodda u b’hekk ipprovdietna l-possibbiltà li niktbu kodiċi aktar nadif u nissostitwixxu komponenti li jieħdu r-riżorsi bħal films Flash b’kontrolli integrati.
Fl-artikoli li ġejjin, se nintroduċu jQuery u Bootstrap sabiex tkun tista' mhux biss tuża dawn il-kontrolli u tara l-paġni tiegħek jitgħabbew aktar malajr, iżda wkoll tagħmilhom faċli għall-mowbajl.
Sadanittant, tħossok liberu li tesperimenta b'kontrolli oħra f'Netbeans, u għarrafna jekk għandek xi mistoqsijiet jew kummenti billi tuża l-formola hawn taħt.
