Kif Isebbaħ Dynamic HTML5 Web App billi tuża Għodod Online

Hekk kif nibda l-aħħar artiklu f'din is-serje, hija t-tama tiegħi li kont kapaċi taqbad l-importanza tal-HTML 5 u l-iżvilupp tal-web li jiffavorixxi l-mowbajl/li jirrispondu.

Irrispettivament mid-distribuzzjoni tad-desktop tal-għażla tiegħek, Parti 3, tista 'tgħinek toħloq applikazzjonijiet pendenti mingħajr ħafna battikata.

Madankollu, jekk jogħġbok innota li koprejna biss il-baŜi tal-HTML 5 u l-iżvilupp tal-web f'din is-serje u assumijna li int kemmxejn familjari mal-HTML, iżda l-WWW hija mimlija riżorsi kbar - xi wħud minnhom huma FOSS - biex tespandi dak li aħna. Qsamt hawn.

F'din l-aħħar gwida, aħna se nitkellmu dwar xi wħud minn dawk l-għodod u nuruk kif tużahom biex iżżid mal-paġna eżistenti li ilna naħdmu fuq Tisbiħ l-UI tagħna (user interface).

Tisbiħ Interface tal-Utent tal-Websajt

Font Awesome hija sett ta' għodda kompluta ta' ikona/font/css li għandha l-potenzjal li tintegra bla xkiel ma' Bootstrap. Mhux biss tista 'żżid ħafna ikoni oħra mal-paġni tiegħek, iżda tista' wkoll tibdel id-daqs tagħhom, titfa' dellijiet, tibdel il-kulur, u ħafna għażliet oħra billi tuża CSS.

Madankollu, peress li t-trattament tas-CSS huwa barra mill-ambitu ta 'din is-serje, aħna se nittrattaw biss l-ikoni ta' daqs default imma nħeġġuk fl-istess ħin biex tħaffer ftit aktar fil-fond biex tiskopri kemm din l-għodda tista 'teħodkom.

Biex tniżżel Font Awesome u tinkorporaha fil-proġett tiegħek, eżegwixxi l-kmandi li ġejjin (jew tħossok liberu li tmur direttament fil-Github tal-proġett u tniżżel il-fajl zip fontawesome permezz tal-browser tiegħek u ddekompressah billi tuża għodod GUI):

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

(iva, l-isem tad-dominju huwa fil-fatt FortAwesome, b'R, u għalhekk mhux 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

U żid il-fajl .css mal-lista ta’ referenzi fil-quċċata tal-paġna tagħna, bħalma għamilna ma’ jQuery u Bootstrap qabel (ftakar li m’għandekx għalfejn ittajpja kollox – sempliċement drag il-fajl minn it-tab Proġetti fit-tieqa tal-kodiċi):

Ejja nieħdu l-lista dropdown fil-bar tan-navigazzjoni tagħna, pereżempju:

Nizza, hux? Kulma hemm bżonn huwa li tissostitwixxi l-kontenut tal-ul class eżistenti msemmi dropdown-menu fil-qiegħ ta’ index.php bi:

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

Believe me – l-investiment tal-ħin tiegħek biex titgħallem kif tuża dawn l-għodod se tkun esperjenza ta’ sodisfazzjon kbir.

Bħala persuna tal-IT, trid tkun familjari sew mal-ħafna riżorsi għall-għajnuna li l-Internet għamel disponibbli. Peress li l-iżvilupp tal-web mhuwiex eċċezzjoni, hawn ftit riżorsi li aħna żgur li ssibu utli waqt li tirfina l-applikazzjonijiet tiegħek.

Meta tkun qed tittratta kodiċi Javascript (pereżempju, meta taħdem ma jQuery kif għamilna fil-Parti 2), trid tuża JSHint, kontrollur tal-kodiċi tal-kwalità Javascript onlajn li għandu l-għan li jgħin lill-iżviluppaturi biex jiskopru żbalji u problemi potenzjali. Meta jinstabu dawk l-iżvantaġġi, JSHint jindika n-numru tal-linja fejn jinsabu u jagħtik ħjiel biex tirranġahom:

Li żgur jidher kbir, iżda anke b'din l-għodda awtomatizzata kbira, se jkun hemm żminijiet meta jkollok bżonn xi ħadd ieħor biex jagħti ħarsa lejn il-kodiċi tiegħek u jgħidlek kif tiffissa jew ittejjeb b'xi mod ieħor, li jimplika li taqsamha b'xi mod.

JSFiddle (tester tal-kodiċi Javascript/CSS/HTML onlajn) u Bootply (l-istess bħal JSFiddle iżda speċjalizzati fil-kodiċi Bootstrap) iħalluk issalva snippets tal-kodiċi (magħrufa wkoll bħala fiddles) u jagħtuk link biex taqsamhom faċilment fuq l-Internet (jew permezz tal-email mal-ħbieb tiegħek, billi tuża l-profili tan-netwerk soċjali tiegħek, jew fil-fora).

Sommarju

F'dan l-artikolu, ipprovdejna ftit suġġerimenti biex tirranġa l-applikazzjonijiet tal-web tiegħek u qsamna xi riżorsi li se jkunu utli jekk teħel jew trid par għajnejn ieħor (u mhux waħda biss, iżda ħafna) biex tagħti ħarsa lejn kodiċi tiegħek biex tara kif jista 'jitjieb.

Ċansijiet huma li tista 'tkun taf b'riżorsi oħra wkoll. Jekk iva, tħossok liberu li taqsamhom mal-bqija tal-komunità Tecmint billi tuża l-formola tal-kummenti hawn taħt - u bil-mod, toqgħodx lura milli tgħarrafna jekk għandek xi mistoqsijiet dwar il-kontenut ippreżentat f'dan l-artikolu.

Nittamaw li din is-serje tatk idea tal-possibbiltajiet vasti ta 'żvilupp tal-web li jiffavorixxi l-mowbajl u li jirrispondu.