Otu esi eme ngwa webụsaịtị HTML5 mara mma site na iji Ngwa ọnlaịnụ


Ka m na-amalite akụkọ ikpeazụ na usoro isiokwu a, ọ bụ olile anya m na ị nweela ike ịghọta mkpa HTML 5 na mmepe weebụ enyi na enyi/na-anabata.

N'agbanyeghị oke nkesa desktọpụ gị, Nkebi nke 3, nwere ike inyere gị aka ịmepụta ngwa pụtara ìhè na-enweghị nnukwu nsogbu.

Otú ọ dị, biko rịba ama na anyị kpuchiri naanị isi HTML 5 na mmepe weebụ na usoro a ma chee na ị maara HTML nke ọma, mana WWW jupụtara na nnukwu ihe onwunwe - ụfọdụ n'ime ha bụ FOSS - iji gbasaa na ihe anyị. 'ekekọrịtala ebe a.

N'ime ntuziaka ikpeazụ a, anyị ga-ekwu maka ụfọdụ n'ime ngwaọrụ ndị ahụ wee gosi gị otu esi eji ha gbakwunye na ibe dị adị anyị na-arụ ọrụ na Mma UI (onye ọrụ interface).

Ịma mma Onye ọrụ interface nke weebụsaịtị

Font Awesome bụ akara ngosi/font/css ngwa ngwa zuru oke nke nwere ike ijikọ na Bootstrap n'enweghị nsogbu. Ọbụghị naanị na ị nwere ike itinye ọtụtụ akara ngosi ndị ọzọ na ibe gị, mana ị nwekwara ike megharia nha ha, mee onyinyo, gbanwee agba, na ọtụtụ nhọrọ ndị ọzọ site na iji CSS.

Agbanyeghị, ebe ọ bụ na ịmekọrịta CSS esighị na usoro usoro a, anyị ga-emeso naanị akara ngosi ndị nwere oke mana anyị na-agba gị ume n'otu oge ka “gwuo ntakịrị miri emi” iji chọpụta ebe ngwa a nwere ike iburu gị.

Iji budata Font Awesome wee tinye ya na ọrụ gị, mebie iwu ndị a (ma ọ bụ nweere onwe gị ịga na Github nke ọrụ ahụ ozugbo wee budata faịlụ zip nke ọma site na ihe nchọgharị gị wee mebie ya site na iji ngwaọrụ GUI):

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

(ee, ngalaba aha bụ n'ezie FortAwesome, nwere R, nke mere na ọ bụghị typo).

$ 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

Tinye faịlụ .css na ndepụta ntụaka dị n'elu ibe anyị, dị ka anyị mere jQuery na Bootstrap na mbụ (cheta na ịkwesighi pịnye ihe niile - naanị dọrọ faịlụ ahụ na mbụ. taabụ Projects n'ime mpio koodu):

Ka anyị were ndepụta ndọpụta n'ime mmanya igodo anyị, dịka ọmụmaatụ:

Ọ dị mma, nri? Naanị ihe ọ na-ewe bụ iji dochie ọdịnaya nke ul class dị ugbu a akpọrọ dropdown-menu na ala nke index.php na:

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

Kwere m - itinye oge gị n'ịmụ ka esi eji ngwaọrụ ndị a ga-abụ ahụmahụ na-enye afọ ojuju.

Dịka onye IT, ị ga-abụrịrị onye maara nke ọma maka ọtụtụ ihe enyemaka maka ịntanetị ewepụtara. Ebe ọ bụ na ime mmepe weebụ abụghị ihe dị iche, ebe a bụ ihe ole na ole anyị ji n'aka na ị ga-ahụta uru mgbe ị na-emegharị ngwa gị.

Mgbe ị na-emeso koodu Javascript (dịka ọmụmaatụ, mgbe ị na-arụ ọrụ na jQuery dị ka anyị mere na Part 2), ị ga-achọ iji JSHint, ihe nleba anya koodu àgwà Javascript n'ịntanetị nke na-achọ inyere ndị mmepe aka ịchọpụta njehie na nsogbu ndị nwere ike ime. Mgbe achọtara ọnyà ndị ahụ, JSHint na-egosi akara ahịrị ebe ha dị wee nye gị ntụnye iji dozie ha:

Nke ahụ na-adị oke mma, mana ọbụlagodi na ngwa ngwa a na-akpaghị aka, a ga-enwe oge mgbe ị ga-achọ onye ọzọ ka ọ lelee koodu gị wee gwa gị otu esi edozi ya ma ọ bụ meziwanye ya, nke pụtara ịkekọrịta ya n'ụzọ ụfọdụ.

JSFiddle (ihe nleba anya Javascript/CSS/HTML dị n'ịntanetị) na Bootply (dị ka JSFiddle mana ọpụrụiche na koodu Bootstrap) ka ị chekwaa snippets koodu (nke a makwaara dị ka fiddles) wee nye gị njikọ iji kesaa ha n'ụzọ dị mfe na ịntanetị site na email na ndị enyi gị, na-eji profaịlụ netwọk mmekọrịta gị, ma ọ bụ na forums).

Nchịkọta

N'isiokwu a, anyị enyela gị ndụmọdụ ole na ole iji dozie ngwa weebụ gị ma kesaa ụfọdụ ihe onwunwe ga-aba uru ma ọ bụrụ na ị rapaara ma ọ bụ chọọ anya ọzọ (ọ bụghị naanị otu, ma ọtụtụ) ileba anya. koodu gị ka ịhụ ka ọ ga-esi melite.

Ohere bụ na ị nwekwara ike ịma akụrụngwa ndị ọzọ. Ọ bụrụ otu a, nweere onwe gị ịkọrọ ha ndị obodo Tecmint ndị ọzọ site na iji ụdị nkọwa dị n'okpuru - na n'ụzọ, egbula oge ime ka anyị mara ma ị nwere ajụjụ ọ bụla gbasara ọdịnaya ewepụtara n'isiokwu a.

Anyị na-atụ anya na usoro isiokwu a enyela gị nhụpeta nke ohere dị ukwuu nke mmepe weebụ enyi na enyi na nke na-anabata ya.