Dünaamiliste HTML5-veebirakenduste häälestamine avatud lähtekoodiga veebitööriistade abil

Alustades selle sarja viimast artiklit, loodan, et olete suutnud mõista HTML 5 ja mobiilisõbraliku/reageeriva veebiarenduse olulisust. Sõltumata teie töölauavalikust, on Netbeans võimas IDE ja kui seda kasutatakse koos Linuxi käsurea põhioskuste ja 3. osas käsitletud tööriistadega, aitab see teil suurema vaevata luua silmapaistvaid rakendusi.

Pange siiski tähele, et oleme selles seerias käsitlenud ainult HTML 5 ja veebiarenduse põhitõdesid ning eeldanud, et olete HTML-iga mõnevõrra tuttav, kuid WWW on täis suuri ressursse - mõned neist on FOSS-id - laiendamaks seda, mida me olete siin jaganud.

Selles viimases juhendis räägime mõnest neist tööriistadest ja näitame, kuidas neid kasutada olemasoleva lehe lisamiseks, millega oleme töötanud oma kasutajaliidese (kasutajaliidese) kaunistamiseks.

Selle seeria 2. osast („jQuery ja Bootstrapi lisamine HTML5 veebirakenduse kirjutamiseks“) tuletate meelde, et Bootstrapi zip-failiga kaasneb kataloog nimega fondid. Salvestasime selle sisu sama nimega kausta meie projekti SiteRoot sisse:

Nagu võite ilmselt ülaltoodud pildi põhjal öelda, sisaldab Bootstrap komplekti elemente, mida nimetatakse glüfikonideks, mis pole enam vähem kui sisseehitatud komponendid, mis pakuvad teie rakendustes nuppude ja menüüde jaoks kena välimusega ikoone. Bootstrapi lisatud glüfikoonide täielik loetelu on saadaval aadressil http://getbootstrap.com/components/.

Glüfikonide kasutamise illustreerimiseks lisage mõned meie põhilehe navigeerimisribale. Muutke navigeerimisriba menüüsid järgmiselt. Pange tähele iga sulgemisvahemärgendi ja menüü teksti vahelist ruumi:

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

(muide, siin kasutatakse span silte, et vältida ikoonide segunemist teiste komponentidega).

Ja siin on tulemus:

Glüfoonid, ehkki kasulikud, on samuti piiratud. Ja siin astub stseenile Font Awesome. Font Awesome on ikooni/font/css täielik tööriistakomplekt, millel on potentsiaal sujuvalt Bootstrapiga integreeruda.

Lisaks sellele, et saate oma lehtedele lisada palju muid ikoone, saate ka nende suurust muuta, varje heita, värvi muuta ja paljusid muid suvandeid CSS-i abil. Kuna aga CSSiga tegelemine jääb selle seeria reguleerimisalast välja, tegeleme ainult vaikimisi suurusega ikoonidega, kuid soovitame teil samal ajal "veidi süveneda", et teada saada, kui kaugele see tööriist teid võib viia.

Font Awesome'i allalaadimiseks ja projekti kaasamiseks täitke järgmised käsud (või minge julgelt otse projekti veebisaidile, laadige oma brauseri kaudu alla ZIP-fail ja dekompresseerige see GUI-tööriistade abil):

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

(jah, domeeninimi on tegelikult FortAwesome, R-ga, nii et see pole kirjaviga).

# 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

Ja lisage fail .css meie lehe ülaosas olevasse viidete loendisse, nagu me varem tegime jQuery ja Bootstrapiga (pidage meeles, et te ei pea kõike tippima - lihtsalt lohistage fail vahekaardil Projektid koodiaknasse):

Võtame näiteks navigeerimisribal oleva rippmenüü:

Tore, eks? Piisab sellest, kui asendada olemasoleva ul class nimega rippmenüü sisu index.php allosas järgmisega:

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

Uskuge mind - oma aja investeerimine nende tööriistade kasutamise õppimisse on väga kasulik kogemus.

IT-inimesena peate olema hästi kursis paljude Internetis kättesaadavaks tehtud ressurssidega. Kuna veebiarenduse tegemine pole erand, siis siin on mõned ressursid, mis on teie rakenduste häälestamisel kasulikud.

Javascripti koodiga tegelemisel (näiteks kui töötate jQueryga, nagu me tegime 2. osas), peate kasutama JSHinti, veebipõhist Javascripti kvaliteedikoodi kontrollijat, mille eesmärk on aidata arendajatel vigu ja võimalikke probleeme tuvastada. Kui need lõkked on leitud, näitab JSHint rea numbrit, kus need asuvad, ja annab vihjeid nende parandamiseks:

See näeb kindlasti hea välja, kuid isegi selle suurepärase automatiseeritud tööriista kasutamisel tuleb mõnikord ette võtta keegi teine, kes vaataks teie koodi üle ja ütleks teile, kuidas seda parandada või muul viisil parandada, mis tähendab selle kuidagi jagamist.

JSFiddle (veebipõhine Javascripti/CSS/HTML-koodi tester) ja Bootply (sama mis JSFiddle, kuid on spetsialiseerunud Bootstrapi koodile) võimaldavad teil salvestada koodijuppe (tuntud ka kui viiulid) ja pakkuda linki, et neid Interneti kaudu väga hõlpsalt jagada (kas e-posti teel oma sõpradega, kasutades oma suhtlusvõrgustiku profiile või foorumites).

Kokkuvõte

Selles artiklis oleme andnud teile mõned näpunäited oma veebirakenduste häälestamiseks ja jaganud ressursse, mis on kasulikud, kui jääte ummikusse või soovite, et mõni teine silmapaar (ja mitte ainult üks, vaid palju) vaataks teie pilku kood, et näha, kuidas seda saab parandada.

Võimalik, et võite teada ka muid ressursse. Kui jah, siis jagage neid julgelt ülejäänud Tecminti kogukonnaga, kasutades allolevat kommentaarivormi - ja muide, andke teada, kui teil on selles artiklis esitatud sisu kohta küsimusi.

Loodame, et see sari on andnud teile ülevaate mobiilisõbraliku ja tundliku veebiarenduse suurtest võimalustest.