നെറ്റ്ബീൻസ് ഉപയോഗിച്ച് ഉബുണ്ടുവിൽ ഒരു അടിസ്ഥാന HTML5 പ്രോജക്റ്റ് എങ്ങനെ സൃഷ്ടിക്കാം

ഈ 4-ലേഖന മൊബൈൽ വെബ് ഡെവലപ്uമെന്റ് സീരീസിൽ, മൊബൈൽ-സൗഹൃദവും പ്രതികരിക്കുന്നതുമായ HTML5 വെബ് ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കാൻ ഉബുണ്ടുവിൽ Netbeans ഒരു IDE (ഇന്റഗ്രേറ്റഡ് ഡെവലപ്uമെന്റ് എൻവയോൺമെന്റ് എന്നും അറിയപ്പെടുന്നു) ആയി സജ്ജീകരിക്കുന്നതിലൂടെ ഞങ്ങൾ നിങ്ങളെ നയിക്കും.

HTML5 മൊബൈൽ വെബ് വികസനത്തെക്കുറിച്ചുള്ള 4-ലേഖന പരമ്പരകൾ താഴെ കൊടുക്കുന്നു:

നന്നായി മിനുക്കിയ തൊഴിൽ അന്തരീക്ഷം (നമ്മൾ പിന്നീട് കാണും പോലെ), പിന്തുണയ്uക്കുന്ന ഭാഷകൾക്കായുള്ള സ്വയമേവ പൂർത്തീകരണം, വെബ് ബ്രൗസറുകളുമായുള്ള അതിന്റെ തടസ്സമില്ലാത്ത സംയോജനം എന്നിവയാണ് ഞങ്ങളുടെ അഭിപ്രായത്തിൽ, നെറ്റ്ബീനുകളിൽ ചിലത്, ഏറ്റവും വ്യതിരിക്തമായ സവിശേഷതകൾ.

HTML 5 സ്uപെസിഫിക്കേഷൻ ഡെവലപ്പർമാർക്ക് നിരവധി നേട്ടങ്ങൾ കൊണ്ടുവന്നുവെന്നതും നമുക്ക് ഓർമ്മിക്കാം - കുറച്ച് ഉദാഹരണങ്ങൾക്ക് പേരിടാൻ: നിരവധി പുതിയ ഘടകങ്ങൾക്ക് ക്ലീനർ കോഡ് നന്ദി), ബിൽറ്റ്-ഇൻ വീഡിയോ, ഓഡിയോ പ്ലേബാക്ക് കഴിവുകൾ (ഫ്ലാഷിന്റെ ആവശ്യകതയെ മാറ്റിസ്ഥാപിക്കുന്നു), ക്രോസ്-കമ്പാറ്റിബിലിറ്റി പ്രധാന ബ്രൗസറുകൾക്കൊപ്പം, മൊബൈൽ ഉപകരണങ്ങൾക്കുള്ള ഒപ്റ്റിമൈസേഷനും.

ഞങ്ങളുടെ ലോക്കൽ ഡെവലപ്uമെന്റ് മെഷീനിൽ ഞങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ ഞങ്ങൾ ആദ്യം പരിശോധിക്കുമെങ്കിലും, ഒടുവിൽ ഞങ്ങളുടെ വെബ്uസൈറ്റ് ഒരു LAMP സെർവറിലേക്ക് മാറ്റുകയും അതിനെ ഒരു ഡൈനാമിക് ടൂളാക്കി മാറ്റുകയും ചെയ്യും.

വഴിയിൽ, ഞങ്ങൾ jQuery (ക്ലയന്റ്-സൈഡ് സ്uക്രിപ്റ്റിംഗ് വളരെ ലളിതമാക്കുന്ന ഒരു അറിയപ്പെടുന്ന ക്രോസ്-പ്ലാറ്റ്uഫോം Javascript ലൈബ്രറി), ബൂട്ട്uസ്uട്രാപ്പ് (പ്രതികരണാത്മക വെബ്uസൈറ്റുകൾ വികസിപ്പിക്കുന്നതിനുള്ള ജനപ്രിയ HTML, CSS, JavaScript ഫ്രെയിംവർക്ക്) എന്നിവ ഉപയോഗിക്കും. ഈ HTML 5 ടൂളുകൾ ഉപയോഗിച്ച് മൊബൈൽ-സൗഹൃദ ആപ്ലിക്കേഷൻ സജ്ജീകരിക്കുന്നത് എത്ര എളുപ്പമാണെന്ന് ഇൻകമിംഗ് ലേഖനങ്ങൾ നിങ്ങൾ കാണും.

ഈ ഹ്രസ്വ പരമ്പരയിലൂടെ കടന്നുപോയ ശേഷം, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും:

  1. അടിസ്ഥാന HTML5 ഡൈനാമിക് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കാൻ ഇവിടെ വിവരിച്ചിരിക്കുന്ന ടൂളുകൾ ഉപയോഗിക്കുക, ഒപ്പം
  2. കൂടുതൽ വിപുലമായ വെബ് ഡെവലപ്uമെന്റ് സ്uകില്ലുകൾ പഠിക്കാൻ പോകുക.

എന്നിരുന്നാലും, ഈ സീരീസിനായി ഞങ്ങൾ ഉബുണ്ടു ഉപയോഗിക്കുന്നുണ്ടെങ്കിലും, മറ്റ് ഡെസ്uക്uടോപ്പ് വിതരണങ്ങൾക്കും നിർദ്ദേശങ്ങളും നടപടിക്രമങ്ങളും തികച്ചും സാധുതയുള്ളതാണെന്ന് ദയവായി ശ്രദ്ധിക്കുക (ലിനക്uസ് മിന്റ്, ഡെബിയൻ, സെന്റോസ്, ഫെഡോറ, നിങ്ങൾ ഇത് വിളിക്കുക).

അതിനായി, ഒരു ഇൻസ്റ്റാളേഷൻ രീതിയായി ഒരു സാധാരണ ടാർബോൾ (.tar.gz) ഉപയോഗിച്ച് ആവശ്യമായ സോഫ്uറ്റ്uവെയർ (നെറ്റ്ബീൻസും ജാവ ജെഡികെയും, നിങ്ങൾ ഒരു മിനിറ്റിനുള്ളിൽ കാണും) ഇൻസ്റ്റാൾ ചെയ്യാൻ ഞങ്ങൾ തിരഞ്ഞെടുത്തു.

പറഞ്ഞുവരുന്നത് - നമുക്ക് ഭാഗം 1-ൽ നിന്ന് ആരംഭിക്കാം.

ഉബുണ്ടുവിൽ Java JDK ഇൻസ്റ്റാൾ ചെയ്യുന്നു

നിങ്ങൾക്ക് ഇതിനകം ഒരു ഉബുണ്ടു ഡെസ്ക്ടോപ്പ് ഇൻസ്റ്റാളേഷൻ ഉണ്ടെന്ന് ഈ ട്യൂട്ടോറിയൽ അനുമാനിക്കുന്നു. നിങ്ങൾ അങ്ങനെ ചെയ്യുന്നില്ലെങ്കിൽ, തുടരുന്നതിന് മുമ്പ് ദയവായി മത്തേയ് സെസാറിനെ പരിശോധിക്കുക.

ഉബുണ്ടു ഔദ്യോഗിക ശേഖരണങ്ങളിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യാൻ ലഭ്യമായ നെറ്റ്ബീൻസ് പതിപ്പ് അൽപ്പം കാലഹരണപ്പെട്ടതിനാൽ, പുതിയ പതിപ്പ് ലഭിക്കുന്നതിന് ഞങ്ങൾ ഒറാക്കിൾ വെബ്സൈറ്റിൽ നിന്ന് പാക്കേജ് ഡൗൺലോഡ് ചെയ്യും.

ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് രണ്ട് തിരഞ്ഞെടുപ്പുകൾ ഉണ്ട്:

  • Choice 1: Netbeans + JDK അല്ലെങ്കിൽ
    • ഉൾപ്പെടുന്ന ബണ്ടിൽ ഡൗൺലോഡ് ചെയ്യുക
  • ചോയ്uസ് 2: രണ്ട് യൂട്ടിലിറ്റികളും വെവ്വേറെ ഇൻസ്റ്റാൾ ചെയ്യുക.

ഈ ലേഖനത്തിൽ ഞങ്ങൾ #2 തിരഞ്ഞെടുക്കും, കാരണം അതിനർത്ഥം അൽപ്പം ചെറുതായ ഒരു ഡൗൺലോഡ് മാത്രമല്ല (ഞങ്ങൾ HTML5, PHP എന്നിവയ്uക്കുള്ള പിന്തുണയോടെ മാത്രമേ നെറ്റ്uബീൻസ് ഇൻസ്റ്റാൾ ചെയ്യുകയുള്ളൂ) മാത്രമല്ല, ഞങ്ങൾക്ക് ആവശ്യമുള്ളപ്പോൾ ഒരു സ്വതന്ത്ര ജെഡികെ ഇൻസ്റ്റാളർ ഉണ്ടായിരിക്കാൻ ഞങ്ങളെ അനുവദിക്കുകയും ചെയ്യും. Netbeans ആവശ്യമില്ലാത്ത അല്ലെങ്കിൽ വെബ് ഡെവലപ്uമെന്റ് ഉൾപ്പെടാത്ത മറ്റൊരു സെറ്റ് (മറ്റ് Oracle ഉൽപ്പന്നങ്ങളുമായി ബന്ധപ്പെട്ടതാണ്).

JDK ഡൗൺലോഡ് ചെയ്യാൻ, Oracle ടെക്uനോളജി നെറ്റ്uവർക്ക് സൈറ്റിലേക്ക് പോയി Java → Java SE → Downloads വിഭാഗത്തിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക.

ചുവടെ ഹൈലൈറ്റ് ചെയ്uതിരിക്കുന്ന ചിത്രത്തിൽ നിങ്ങൾ ക്ലിക്കുചെയ്യുമ്പോൾ, ലൈസൻസ് കരാർ അംഗീകരിക്കാൻ നിങ്ങളോട് ആവശ്യപ്പെടും, തുടർന്ന് നിങ്ങൾക്ക് ആവശ്യമായ JDK പതിപ്പ് ഡൗൺലോഡ് ചെയ്യാൻ കഴിയും (ഞങ്ങളുടെ കാര്യത്തിൽ ഇത് 64-ബിറ്റ് മെഷീനുകൾക്കുള്ള ടാർബോൾ ആണ്). നിങ്ങളുടെ വെബ് ബ്രൗസർ ആവശ്യപ്പെടുമ്പോൾ, ഫയൽ തുറക്കുന്നതിന് പകരം അത് സംരക്ഷിക്കാൻ തിരഞ്ഞെടുക്കുക.

ഡൗൺലോഡ് പൂർത്തിയാകുമ്പോൾ, ~/ഡൗൺലോഡുകളിലേക്ക് പോയി ടാർബോൾ /usr/local/bin എന്നതിലേക്ക് എക്uസ്uട്രാക്uറ്റ് ചെയ്യുക:

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

ഉബുണ്ടുവിൽ നെറ്റ്ബീൻസ് ഇൻസ്റ്റാൾ ചെയ്യുന്നു

HTML5, PHP എന്നിവയുടെ പിന്തുണയോടെ Netbeans ഇൻസ്റ്റാൾ ചെയ്യാൻ, കാണിച്ചിരിക്കുന്നതുപോലെ ഡൗൺലോഡ് ചെയ്യാൻ wget കമാൻഡിലേക്ക് പോകുക.

$ 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

അതിനുശേഷം, സ്ഥിരസ്ഥിതി മൂല്യങ്ങൾ ഉപേക്ഷിച്ച് ഇൻസ്റ്റാളേഷൻ പൂർത്തിയാക്കാൻ ഓൺ-സ്ക്രീൻ നിർദ്ദേശങ്ങൾ പാലിക്കുക:

ഇൻസ്റ്റലേഷൻ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കുക.

ഉബുണ്ടുവിൽ ഒരു അടിസ്ഥാന HTML5 പ്രോജക്റ്റ് സൃഷ്ടിക്കുന്നു

Netbeans തുറക്കാൻ, Dash മെനുവിൽ നിന്ന് അത് തിരഞ്ഞെടുക്കുക:

Netbeans നൽകുന്ന അടിസ്ഥാന ടെംപ്ലേറ്റ് ഉപയോഗിച്ച് ഒരു പുതിയ HTML5 പ്രോജക്റ്റ് സൃഷ്uടിക്കുന്നതിന്, ഫയൽ → പുതിയ പ്രോജക്റ്റ് → HTML5 → HTML5 ആപ്ലിക്കേഷനിലേക്ക് പോകുക. നിങ്ങളുടെ പ്രോജക്റ്റിനായി ഒരു വിവരണാത്മക നാമം തിരഞ്ഞെടുത്ത് അവസാനം ക്ലിക്ക് ചെയ്യുക പൂർത്തിയാക്കുക (ഇപ്പോൾ ഒരു ബാഹ്യ സൈറ്റ് ടെംപ്ലേറ്റോ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളോ ഉൾപ്പെടുത്തരുത്):

തുടർന്ന് ഞങ്ങളെ നെറ്റ്ബീൻസ് യുഐയിലേക്ക് കൊണ്ടുപോകും, അവിടെ ആവശ്യാനുസരണം ഞങ്ങളുടെ സൈറ്റ് റൂട്ടിലേക്ക് ഫോൾഡറുകളും ഫയലുകളും ചേർക്കാനാകും. ഞങ്ങളുടെ കാര്യത്തിൽ, വരാനിരിക്കുന്ന ലേഖനങ്ങളിൽ ഞങ്ങളുടെ ഉള്ളടക്കം മികച്ച രീതിയിൽ ക്രമീകരിക്കാൻ ഞങ്ങളെ സഹായിക്കുന്നതിന് ഫോണ്ടുകൾ, ഇമേജുകൾ, Javascript ഫയലുകൾ (സ്ക്രിപ്റ്റുകൾ), കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (സ്റ്റൈലുകൾ) എന്നിവയ്uക്കായി ഫോൾഡറുകൾ ചേർക്കുന്നത് അർത്ഥമാക്കും.

ഒരു ഫോൾഡറോ ഫയലോ ചേർക്കുന്നതിന്, സൈറ്റ് റൂട്ടിൽ വലത്-ക്ലിക്കുചെയ്യുക, തുടർന്ന് പുതിയ → ഫോൾഡർ അല്ലെങ്കിൽ HTML ഫയൽ തിരഞ്ഞെടുക്കുക.

ഇപ്പോൾ നമുക്ക് ചില പുതിയ HTML5 ഘടകങ്ങൾ അവതരിപ്പിക്കുകയും പേജ് ബോഡി പരിഷ്കരിക്കുകയും ചെയ്യാം:

    ഒരു പ്രമാണത്തിനോ വിഭാഗത്തിനോ വേണ്ടി യഥാക്രമം
  1. ഉം
    ഒരു തലക്കെട്ട് അല്ലെങ്കിൽ അടിക്കുറിപ്പ് നിർവ്വചിക്കുന്നു.
  2. ഒരു ഡോക്യുമെന്റിന്റെ പ്രധാന ഉള്ളടക്കത്തെ പ്രതിനിധീകരിക്കുന്നു, അവിടെ കേന്ദ്ര വിഷയമോ പ്രവർത്തനമോ കാണിക്കുന്നു.
  3. കുറച്ച് ഉദാഹരണങ്ങൾക്ക് പേരിടാൻ ഇമേജുകൾ അല്ലെങ്കിൽ കോഡ് പോലുള്ള സ്വയം ഉൾക്കൊള്ളുന്ന മെറ്റീരിയലിനായി ഉപയോഗിക്കുന്നു.
  4. ഒരു
    മൂലകത്തിന് ഒരു അടിക്കുറിപ്പ് കാണിക്കുന്നു, അതിനാൽ അത്
    ടാഗുകൾക്കുള്ളിൽ സ്ഥാപിക്കണം.

.
ഇപ്പോൾ താഴെ പറയുന്ന കോഡ് സ്uനിപ്പെറ്റ് Netbeans-ലെ നിങ്ങളുടെ index.html ഫയലിലേക്ക് പകർത്തുക.

നുറുങ്ങ്: ഈ വിൻഡോയിൽ നിന്ന് നിങ്ങളുടെ വികസന പരിതസ്ഥിതിയിലേക്ക് പകർത്തി ഒട്ടിക്കുക മാത്രമല്ല, Netbeans-ന്റെ സ്വയമേവ പൂർത്തിയാക്കൽ സവിശേഷതകൾ ദൃശ്യവൽക്കരിക്കുന്നതിന് ഓരോ ടാഗിലും ടൈപ്പ് ചെയ്യാൻ സമയമെടുക്കുക, അത് പിന്നീട് ഉപയോഗപ്രദമാകും.

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

ഒരു വെബ് ബ്രൗസർ തിരഞ്ഞെടുത്ത് നിങ്ങൾക്ക് പേജ് കാണാൻ കഴിയും (വെയിലത്ത് ഫയർഫോക്സ്, ചുവടെയുള്ള ചിത്രത്തിലെന്നപോലെ) പ്ലേ ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുക:

ഇതുവരെയുള്ള നിങ്ങളുടെ വികസനത്തിന്റെ പുരോഗതി നിങ്ങൾക്ക് ഇപ്പോൾ കാണാൻ കഴിയും:

സംഗ്രഹം

ഈ ലേഖനത്തിൽ, HTML 5 ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകൾ എഴുതുന്നതിന്റെയും ഉബുണ്ടുവിൽ Netbeans ഉപയോഗിച്ച് ഒരു വികസന അന്തരീക്ഷം സജ്ജമാക്കുന്നതിന്റെയും ചില ഗുണങ്ങൾ ഞങ്ങൾ അവലോകനം ചെയ്തിട്ടുണ്ട്.

ഭാഷയുടെ ഈ സ്പെസിഫിക്കേഷൻ പുതിയ ഘടകങ്ങൾ അവതരിപ്പിച്ചുവെന്നും അങ്ങനെ ക്ലീനർ കോഡ് എഴുതാനും Flash മൂവികൾ പോലെയുള്ള റിസോഴ്സ്-ഹംഗറി ഘടകങ്ങൾ ബിൽറ്റ്-ഇൻ കൺട്രോളുകൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാനും ഞങ്ങൾക്ക് അവസരമൊരുക്കിയെന്നും ഞങ്ങൾ മനസ്സിലാക്കി.

വരുന്ന ലേഖനങ്ങളിൽ, ഞങ്ങൾ jQuery, Bootstrap എന്നിവ അവതരിപ്പിക്കും, അതുവഴി നിങ്ങൾക്ക് ഈ നിയന്ത്രണങ്ങൾ ഉപയോഗിക്കാനും നിങ്ങളുടെ പേജുകൾ വേഗത്തിൽ ലോഡ് ചെയ്യുന്നത് കാണാനും മാത്രമല്ല, അവയെ മൊബൈൽ-സൗഹൃദമാക്കാനും കഴിയും.

അതിനിടയിൽ, Netbeans-ൽ മറ്റ് നിയന്ത്രണങ്ങൾ പരീക്ഷിക്കാൻ മടിക്കേണ്ടതില്ല, താഴെയുള്ള ഫോം ഉപയോഗിച്ച് നിങ്ങൾക്ക് എന്തെങ്കിലും ചോദ്യങ്ങളോ അഭിപ്രായങ്ങളോ ഉണ്ടെങ്കിൽ ഞങ്ങളെ അറിയിക്കുക.