Dinamisko HTML5 tīmekļa lietotņu noskaņošana, izmantojot atvērtā koda tiešsaistes rīkus

Sākot šīs sērijas pēdējo rakstu, es ceru, ka jūs varējāt saprast HTML 5 un mobilajām ierīcēm draudzīgas/atsaucīgas tīmekļa izstrādes nozīmi. Neatkarīgi no izvēlētā darbvirsmas izplatīšanas, Netbeans ir spēcīgs IDE, un, lietojot to kopā ar Linux komandrindas pamatprasmēm un 3. daļā apskatītajiem rīkiem, tas var palīdzēt jums izveidot izcilas lietojumprogrammas bez lielām problēmām.

Tomēr, lūdzu, ņemiet vērā, ka šajā sērijā mēs esam apskatījuši tikai HTML 5 pamatus un tīmekļa izstrādi un pieņēmuši, ka jūs zināmā mērā pārzināt HTML, bet WWW ir pilns ar lieliskiem resursiem - daži no tiem ir FOSS - lai paplašinātu to, ko mēs šeit esat kopīgojuši.

Šajā pēdējā rokasgrāmatā mēs runāsim par dažiem no šiem rīkiem un parādīsim, kā tos izmantot, lai pievienotu esošajai lapai, kurā mēs strādājām, lai uzlabotu mūsu lietotāja interfeisu (lietotāja saskarni).

No šīs sērijas 2. daļas (“jQuery un Bootstrap pievienošana HTML5 tīmekļa lietojumprogrammas rakstīšanai”) jūs atceraties, ka Bootstrap zip failam ir direktorijs ar nosaukumu fonti. Mēs saglabājām tā saturu mapē ar tādu pašu nosaukumu mūsu projekta vietnē SiteRoot:

Kā jūs droši vien varat saprast no iepriekš minētā attēla, Bootstrap ietver elementu kopumu, ko sauc par glifikoniem, kas ir ne mazāk un ne mazāk iebūvēti komponenti, kas nodrošina jaukas izskata ikonas pogām un izvēlnēm jūsu lietojumprogrammās. Pilns Bootstrap iekļauto glifikonu saraksts ir pieejams vietnē http://getbootstrap.com/components/.

Lai ilustrētu glifikonu lietošanu, pievienosim dažus navigācijas joslai mūsu galvenajā lapā. Pārveidojiet navigācijas joslas izvēlnes šādi. Lūdzu, ņemiet vērā atstarpi starp katru noslēguma posma tagu un izvēlnes tekstu:

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li>

(starp citu, tagi span šeit tiek izmantoti, lai novērstu ikonu sajaukšanos ar citiem komponentiem).

Un šeit ir rezultāts:

Lai gan glifikoni ir noderīgi, tie ir arī ierobežoti. Šeit ir redzams Font Awesome. Fonts Awesome ir pilnīgs ikonu/fontu/css rīku komplekts, kas var netraucēti integrēties ar Bootstrap.

Jūs varat ne tikai pievienot savām lapām daudz citu ikonu, bet arī mainīt to izmērus, mest ēnas, mainīt krāsu un daudzas citas opcijas, izmantojot CSS. Tomēr, tā kā nodarbošanās ar CSS ir ārpus šīs sērijas darbības jomas, mēs nodarbosimies tikai ar noklusējuma lieluma ikonām, bet vienlaikus aicināsim jūs “rakt mazliet dziļāk”, lai uzzinātu, cik tālu šis rīks var jūs aizvest.

Lai lejupielādētu Fonts Awesome un iekļautu to projektā, izpildiet šādas komandas (vai dodieties tieši uz projekta vietni un lejupielādējiet zip failu caur pārlūku un atspiest to, izmantojot GUI rīkus):

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

(jā, domēna vārds faktiski ir FortAwesome, ar R, tāpēc tas nav drukas kļūda).

# unzip font-awesome-4.3.0.zip
# cp font-awesome-4.3.0/css/font-awesome.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp font-awesome-4.3.0/fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts

Un pievienojiet failu .css atsauču sarakstam mūsu lapas augšpusē, tāpat kā iepriekš ar jQuery un Bootstrap (atcerieties, ka jums nav viss jāievada - vienkārši velciet failu no cilni Projekti koda logā):

Ņemsim navigācijas joslas nolaižamo sarakstu, piemēram:

Jauki, vai ne? Viss, kas nepieciešams, ir aizstāt esošās ul klases nosaukto nolaižamo izvēlni index.php apakšdaļā ar:

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

Ticiet man - ieguldīt savu laiku, iemācoties izmantot šos rīkus, būs ļoti noderīga pieredze.

Kā IT personālam jums ir labi jāpārzina daudzie resursi, kas pieejami internetā. Tā kā tīmekļa izstrāde nav izņēmums, šeit ir daži resursi, kas, protams, jums būs noderīgi, pielāgojot lietojumprogrammas.

Strādājot ar Javascript kodu (piemēram, strādājot ar jQuery, kā mēs to darījām 2. daļā), jūs vēlaties izmantot JSHint, tiešsaistes Javascript kvalitātes kodu pārbaudītāju, kura mērķis ir palīdzēt izstrādātājiem atklāt kļūdas un iespējamās problēmas. Kad šīs nepilnības ir atrastas, JSHint norāda līnijas numuru, kur tās atrodas, un dod jums padomus to novēršanai:

Tas, protams, izskatās lieliski, taču pat ar šo lielisko automatizēto rīku būs reizes, kad jums būs nepieciešams kāds cits, kurš ieskatīsies jūsu kodā un pateiks, kā to labot vai kā citādi uzlabot, kas nozīmē kaut kā koplietošanu.

JSFiddle (tiešsaistes Javascript/CSS/HTML kodu testeris) un Bootply (tāds pats kā JSFiddle, bet specializējies Bootstrap kodā) ļauj saglabāt koda fragmentus (pazīstamus arī kā vijoles) un nodrošina saiti, lai tos ļoti viegli koplietotu internetā (vai nu pa e-pastu ar draugiem, izmantojot sociālā tīkla profilus vai forumos).

Kopsavilkums

Šajā rakstā mēs esam snieguši dažus padomus, lai pielāgotu jūsu tīmekļa lietojumprogrammas, un dalījāmies ar dažiem resursiem, kas noderēs, ja iestrēgsiet vai vēlaties, lai cits acu pāris (un ne tikai viens, bet daudzi) apskatītu jūsu kodu, lai redzētu, kā to var uzlabot.

Iespējams, ka jūs, iespējams, zināt arī citus resursus. Ja tā, nekautrējieties tos kopīgot ar pārējo Tecmint kopienu, izmantojot zemāk esošo komentāru veidlapu - un, starp citu, nevilcinieties informēt mūs, ja jums ir kādi jautājumi par šajā rakstā sniegto saturu.

Mēs ceram, ka šī sērija ļāva jums ieskatīties plašajās mobilajām ierīcēm draudzīgas un atsaucīgas tīmekļa izstrādes iespējām.