Nastavitev dinamičnih spletnih programov HTML5 z uporabo odprtokodnih spletnih orodij


Ko začnem z zadnjim člankom v tej seriji, upam, da ste lahko razumeli pomen HTML 5 in mobilnemu okolju prijaznega/odzivnega spletnega razvoja. Ne glede na izbiro vaše namizne distribucije je Netbeans zmogljiv IDE in vam lahko skupaj z osnovnimi znanji ukazne vrstice Linux in orodji, obravnavanimi v 3. delu, pomaga ustvariti izjemne aplikacije brez večjih težav.

Vendar upoštevajte, da smo v tej seriji zajeli le osnove HTML 5 in spletnega razvoja ter domnevali, da HTML dobro poznate, vendar je WWW poln odličnih virov - med njimi tudi FOSS -, da razširimo na to, ste delili tukaj.

V tem zadnjem vodniku bomo govorili o nekaterih od teh orodij in vam pokazali, kako jih uporabiti za dodajanje na obstoječo stran, na kateri smo delali Olepšanje našega uporabniškega vmesnika.

Iz 2. dela te serije (»Dodajanje jQuery in Bootstrap za pisanje spletne aplikacije HTML5«) se spomnite, da je datoteka zip Bootstrap opremljena z imenikom z imeni pisave. Vsebino smo shranili v mapo z istim imenom znotraj SiteRoot našega projekta:

Kot verjetno vidite na zgornji sliki, Bootstrap vključuje nabor elementov, imenovanih glifikoni, ki niso nič manj in manj vgrajene komponente, ki zagotavljajo lepo videti ikone za gumbe in menije v vaših aplikacijah. Celoten seznam glifikonov, vključenih v Bootstrap, je na voljo na spletni strani http://getbootstrap.com/components/.

Za ponazoritev uporabe glifikonov dodajte nekaj v navigacijsko vrstico na naši glavni strani. Spremenite menije vrstice za krmarjenje na naslednji način. Prosimo, upoštevajte presledek med vsako zapiralno oznako span in besedilom menija:

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

(mimogrede, tukaj se uporabljajo oznake span , ki preprečujejo mešanje ikon z drugimi komponentami).

In tukaj je rezultat:

Čeprav so uporabni glifikoni, so omejeni. In tu na sceno stopi Font Awesome. Font Awesome je popoln komplet orodij icon/font/css, ki se lahko brez težav integrira z Bootstrapom.

Ne samo, da lahko svojim stranem dodate celo vrsto drugih ikon, temveč jih lahko s pomočjo CSS spremenite tudi v velikost, oddate sence, spremenite barvo in številne druge možnosti. Ker pa obravnavanje CSS ne spada v obseg te serije, se bomo ukvarjali le s privzeto velikimi ikonami, vendar vas hkrati spodbujamo, da "poglobite malo globlje" in odkrijete, kako daleč vas lahko pripelje to orodje.

Če želite prenesti Font Awesome in ga vključiti v svoj projekt, izvedite naslednje ukaze (ali pa pojdite neposredno na spletno mesto projekta in prek brskalnika prenesite datoteko zip ter jo z orodji GUI razpakirajte):

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

(da, ime domene je pravzaprav FortAwesome, z R, tako da to ni tiskarska napaka).

# 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

In dodajte datoteko .css na seznam referenc na vrhu naše strani, tako kot smo to že storili z jQuery in Bootstrap (ne pozabite, da vam ni treba vnašati vsega - samo povlecite datoteko iz zavihek Projekti v okno kode):

Vzemimo spustni seznam v naši navigacijski vrstici, na primer:

Lepo, kajne? Vse, kar potrebujete, je zamenjava vsebine obstoječega ul class z imenom spustnega menija na dnu index.php z:

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

Verjemite mi - vlaganje časa v učenje uporabe teh orodij bo zelo koristna izkušnja.

Kot IT-delavec morate dobro poznati številne vire za pomoč, ki jih ima na voljo internet. Ker razvoj spletnih strani ni izjema, tukaj je nekaj virov, za katere smo prepričani, da se vam bodo med prilagajanjem aplikacij zdeli koristni.

Pri obravnavi kode Javascript (na primer pri delu z jQuery, kot smo to storili v 2. delu), boste želeli uporabiti JSHint, spletni pregledovalnik kode kakovosti Javascript, katerega namen je razvijalcem pomagati pri odkrivanju napak in morebitnih težav. Ko najdejo te pasti, JSHint navede številko vrstice, kjer se nahajajo, in vam da nasvete, kako jih popraviti:

To se zagotovo zdi čudovito, toda tudi s tem odličnim avtomatiziranim orodjem boste včasih potrebovali nekoga drugega, ki si bo ogledal kodo in vam povedal, kako jo popraviti ali kako drugače izboljšati, kar pomeni, da jo nekako delite.

JSFiddle (spletni preizkuševalnik kode Javascript/CSS/HTML) in Bootply (enako kot JSFiddle, vendar specializiran za kodo Bootstrap) vam omogočata, da shranite delčke kode (znane tudi kot gesla) in vam zagotovite povezavo za njihovo enostavno izmenjavo prek interneta po e-pošti s prijatelji, prek profilov v družabnih omrežjih ali na forumih).

Povzetek

V tem članku smo vam ponudili nekaj nasvetov za nastavitev spletnih aplikacij in si delili nekaj virov, ki vam bodo prišli prav, če se zataknete ali želite, da si še en par oči (in ne le enega, ampak več) ogleda vaše kodo, da vidite, kako jo je mogoče izboljšati.

Obstajajo možnosti, da poznate tudi druge vire. V tem primeru jih lahko delite z ostalimi člani skupnosti Tecmint s pomočjo spodnjega obrazca za komentar - in mimogrede, ne oklevajte in nam sporočite, če imate kakršna koli vprašanja o vsebini, predstavljeni v tem članku.

Upamo, da ste s to serijo dobili vpogled v velike možnosti mobilnega in odzivnega spletnega razvoja.