ഓൺലൈൻ ടൂളുകൾ ഉപയോഗിച്ച് ഡൈനാമിക് HTML5 വെബ് ആപ്പ് എങ്ങനെ മനോഹരമാക്കാം

ഈ പരമ്പരയിലെ അവസാന ലേഖനം ഞാൻ ആരംഭിക്കുമ്പോൾ, HTML 5-ന്റെയും മൊബൈൽ-സൗഹൃദ/പ്രതികരണാത്മകമായ വെബ് ഡെവലപ്uമെന്റിന്റെയും പ്രാധാന്യം നിങ്ങൾക്ക് മനസ്സിലാക്കാൻ കഴിഞ്ഞിട്ടുണ്ടെന്നാണ് എന്റെ പ്രതീക്ഷ.

നിങ്ങളുടെ ഡെസ്uക്uടോപ്പ് ഡിസ്ട്രിബ്യൂഷൻ പരിഗണിക്കാതെ തന്നെ, കൂടുതൽ പ്രശ്uനങ്ങളില്ലാതെ മികച്ച ആപ്ലിക്കേഷനുകൾ സൃഷ്uടിക്കാൻ ഭാഗം 3 നിങ്ങളെ സഹായിക്കും.

എന്നിരുന്നാലും, ഈ സീരീസിൽ ഞങ്ങൾ HTML 5-ന്റെയും വെബ് ഡെവലപ്uമെന്റിന്റെയും അടിസ്ഥാനകാര്യങ്ങൾ മാത്രമേ ഉൾപ്പെടുത്തിയിട്ടുള്ളൂ, നിങ്ങൾക്ക് HTML-നെ കുറച്ച് പരിചിതമാണെന്ന് അനുമാനിക്കുന്നു, പക്ഷേ WWW മികച്ച ഉറവിടങ്ങളാൽ നിറഞ്ഞിരിക്കുന്നു - അവയിൽ ചിലത് FOSS ആണ് - ഞങ്ങൾ എന്താണെന്ന് വിപുലീകരിക്കാൻ. ഇവിടെ പങ്കിട്ടു.

ഈ അവസാന ഗൈഡിൽ, ഞങ്ങൾ അത്തരം ചില ടൂളുകളെ കുറിച്ച് സംസാരിക്കുകയും ഞങ്ങളുടെ UI (ഉപയോക്തൃ ഇന്റർഫേസ്) മനോഹരമാക്കുന്നതിൽ ഞങ്ങൾ പ്രവർത്തിക്കുന്ന നിലവിലുള്ള പേജിലേക്ക് ചേർക്കുന്നതിന് അവ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് കാണിക്കുകയും ചെയ്യും.

വെബ്uസൈറ്റിന്റെ യൂസർ ഇന്റർഫേസ് മനോഹരമാക്കുന്നു

ബൂട്ട്uസ്uട്രാപ്പുമായി സുഗമമായി സംയോജിപ്പിക്കാൻ സാധ്യതയുള്ള ഒരു ഐക്കൺ/ഫോണ്ട്/css പൂർണ്ണ ടൂൾകിറ്റാണ് ഫോണ്ട് ആകർഷണീയം. നിങ്ങളുടെ പേജുകളിലേക്ക് നിങ്ങൾക്ക് മറ്റ് നിരവധി ഐക്കണുകൾ ചേർക്കാൻ മാത്രമല്ല, CSS ഉപയോഗിച്ച് അവയുടെ വലുപ്പം മാറ്റാനും നിഴലുകൾ ഇടാനും നിറം മാറ്റാനും മറ്റ് നിരവധി ഓപ്ഷനുകൾ ചെയ്യാനും കഴിയും.

എന്നിരുന്നാലും, CSS കൈകാര്യം ചെയ്യുന്നത് ഈ സീരീസിന്റെ പരിധിക്ക് പുറത്തായതിനാൽ, ഞങ്ങൾ ഡിഫോൾട്ട് വലുപ്പത്തിലുള്ള ഐക്കണുകൾ മാത്രമേ കൈകാര്യം ചെയ്യുകയുള്ളൂ, എന്നാൽ ഈ ടൂൾ നിങ്ങളെ എത്രത്തോളം കൊണ്ടുപോകുമെന്ന് കണ്ടെത്താൻ അൽപ്പം ആഴത്തിൽ കുഴിക്കാൻ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു.

Font Awesome ഡൗൺലോഡ് ചെയ്uത് നിങ്ങളുടെ പ്രോജക്uറ്റിൽ ഉൾപ്പെടുത്തുന്നതിന്, ഇനിപ്പറയുന്ന കമാൻഡുകൾ എക്uസിക്യൂട്ട് ചെയ്യുക (അല്ലെങ്കിൽ പ്രൊജക്റ്റിന്റെ Github-ലേക്ക് നേരിട്ട് പോയി നിങ്ങളുടെ ബ്രൗസറിലൂടെ fontawesome zip ഫയൽ ഡൗൺലോഡ് ചെയ്ത് GUI ടൂളുകൾ ഉപയോഗിച്ച് ഡീകംപ്രസ് ചെയ്യുക):

$ wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(അതെ, ഡൊമെയ്ൻ നാമം യഥാർത്ഥത്തിൽ FortAwesome ആണ്, R ഉള്ളതാണ്, അതിനാൽ അത് അക്ഷരത്തെറ്റല്ല).

$ unzip fontawesome-free-5.15.4-web.zip
$ cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
$ cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts

കൂടാതെ ഞങ്ങളുടെ പേജിന്റെ മുകളിലുള്ള റഫറൻസ് ലിസ്റ്റിലേക്ക് .css ഫയൽ ചേർക്കുക, ഞങ്ങൾ മുമ്പ് jQuery, Bootstrap എന്നിവയിൽ ചെയ്തതുപോലെ (നിങ്ങൾ എല്ലാം ടൈപ്പ് ചെയ്യേണ്ടതില്ല - അതിൽ നിന്ന് ഫയൽ വലിച്ചിടുക. കോഡ് വിൻഡോയിലേക്ക് പ്രോജക്റ്റ് ടാബ്):

നമ്മുടെ നാവിഗേഷൻ ബാറിലെ ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് എടുക്കാം, ഉദാഹരണത്തിന്:

കൊള്ളാം, അല്ലേ? index.php-ന്റെ ചുവടെയുള്ള ഡ്രോപ്പ്ഡൗൺ മെനു എന്ന് പേരിട്ടിരിക്കുന്ന നിലവിലുള്ള ul class ന്റെ ഉള്ളടക്കങ്ങൾ മാറ്റിസ്ഥാപിച്ചാൽ മതി:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

എന്നെ വിശ്വസിക്കൂ - ഈ ടൂളുകൾ എങ്ങനെ ഉപയോഗിക്കണമെന്ന് പഠിക്കാൻ നിങ്ങളുടെ സമയം നിക്ഷേപിക്കുന്നത് വളരെ പ്രതിഫലദായകമായ അനുഭവമായിരിക്കും.

ഒരു ഐടി വ്യക്തിയെന്ന നിലയിൽ, ഇന്റർനെറ്റ് ലഭ്യമാക്കിയിരിക്കുന്ന സഹായത്തിനായുള്ള നിരവധി ഉറവിടങ്ങൾ നിങ്ങൾ നന്നായി അറിഞ്ഞിരിക്കണം. വെബ് ഡെവലപ്മെന്റ് ചെയ്യുന്നത് ഒരു അപവാദമല്ല എന്നതിനാൽ, നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ ട്യൂൺ ചെയ്യുമ്പോൾ നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകുമെന്ന് ഞങ്ങൾക്ക് ഉറപ്പുള്ള കുറച്ച് ഉറവിടങ്ങൾ ഇതാ.

Javascript കോഡ് കൈകാര്യം ചെയ്യുമ്പോൾ (ഉദാഹരണത്തിന്, ഞങ്ങൾ ഭാഗം 2-ൽ ചെയ്തതുപോലെ jQuery-യിൽ പ്രവർത്തിക്കുമ്പോൾ), പിശകുകളും സാധ്യമായ പ്രശ്നങ്ങളും കണ്ടെത്താൻ ഡവലപ്പർമാരെ സഹായിക്കുന്നതിന് ലക്ഷ്യമിടുന്ന ഒരു ഓൺലൈൻ Javascript ഗുണനിലവാര കോഡ് ചെക്കറായ JSHint ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. ആ പോരായ്മകൾ കണ്ടെത്തുമ്പോൾ, JSHint അവ സ്ഥിതിചെയ്യുന്ന ലൈൻ നമ്പർ സൂചിപ്പിക്കുകയും അവ പരിഹരിക്കുന്നതിനുള്ള സൂചനകൾ നൽകുകയും ചെയ്യുന്നു:

അത് തീർച്ചയായും മികച്ചതായി തോന്നുന്നു, എന്നാൽ ഈ മികച്ച ഓട്ടോമേറ്റഡ് ടൂൾ ഉപയോഗിച്ച് പോലും, നിങ്ങളുടെ കോഡ് പരിശോധിച്ച് അത് എങ്ങനെ ശരിയാക്കാം അല്ലെങ്കിൽ എങ്ങനെ മെച്ചപ്പെടുത്താം എന്ന് നിങ്ങളോട് പറയാൻ മറ്റാരെങ്കിലും ആവശ്യമായി വരും, അത് എങ്ങനെയെങ്കിലും പങ്കിടുന്നത് സൂചിപ്പിക്കുന്നു.

JSFiddle (ഒരു ഓൺലൈൻ Javascript/CSS/HTML കോഡ് ടെസ്റ്റർ), Bootply (JSFiddle പോലെ തന്നെ എന്നാൽ ബൂട്ട്uസ്uട്രാപ്പ് കോഡിൽ പ്രത്യേകം) നിങ്ങളെ കോഡ് സ്uനിപ്പെറ്റുകൾ (ഫിഡിൽസ് എന്നും അറിയപ്പെടുന്നു) സേവ് ചെയ്യാനും ഇൻറർനെറ്റിലൂടെ വളരെ എളുപ്പത്തിൽ പങ്കിടാനുള്ള ലിങ്ക് നൽകാനും നിങ്ങളെ അനുവദിക്കുന്നു (ഒന്നുകിൽ. നിങ്ങളുടെ സുഹൃത്തുക്കളുമായി ഇമെയിൽ വഴി, നിങ്ങളുടെ സോഷ്യൽ നെറ്റ്uവർക്ക് പ്രൊഫൈലുകൾ ഉപയോഗിച്ച് അല്ലെങ്കിൽ ഫോറങ്ങളിൽ).

സംഗ്രഹം

ഈ ലേഖനത്തിൽ, നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകൾ ട്യൂൺ ചെയ്യുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഞങ്ങൾ നിങ്ങൾക്ക് നൽകിയിട്ടുണ്ട് കൂടാതെ നിങ്ങൾ കുടുങ്ങിപ്പോകുകയോ മറ്റൊരു ജോടി കണ്ണുകൾ (ഒന്നല്ല, പലതും) നോക്കാൻ ആഗ്രഹിക്കുകയോ ചെയ്താൽ ഉപയോഗപ്രദമാകുന്ന ചില ഉറവിടങ്ങൾ പങ്കിടുകയും ചെയ്തു. ഇത് എങ്ങനെ മെച്ചപ്പെടുത്താം എന്നറിയാൻ നിങ്ങളുടെ കോഡ്.

മറ്റ് വിഭവങ്ങളെക്കുറിച്ചും നിങ്ങൾക്ക് അറിയാൻ സാധ്യതയുണ്ട്. അങ്ങനെയാണെങ്കിൽ, ചുവടെയുള്ള കമന്റ് ഫോം ഉപയോഗിച്ച് അവ Tecmint കമ്മ്യൂണിറ്റിയിലെ ബാക്കിയുള്ളവരുമായി പങ്കിടാൻ മടിക്കേണ്ടതില്ല - കൂടാതെ, ഈ ലേഖനത്തിൽ അവതരിപ്പിച്ചിരിക്കുന്ന ഉള്ളടക്കത്തെക്കുറിച്ച് നിങ്ങൾക്ക് എന്തെങ്കിലും ചോദ്യങ്ങളുണ്ടെങ്കിൽ ഞങ്ങളെ അറിയിക്കാൻ മടിക്കരുത്.

ഈ സീരീസ് നിങ്ങൾക്ക് മൊബൈൽ-സൗഹൃദവും പ്രതികരിക്കുന്നതുമായ വെബ് ഡെവലപ്uമെന്റിന്റെ വിശാലമായ സാധ്യതകളുടെ ഒരു കാഴ്ച്ച നൽകുമെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു.