Hvordan forskjønne Dynamic HTML5 Web App ved hjelp av onlineverktøy

Når jeg begynner på den siste artikkelen i denne serien, er det mitt håp at du har klart å forstå viktigheten av HTML 5 og mobilvennlig/responsiv nettutvikling.

Uansett hvilken desktopdistribusjon du velger, kan del 3 hjelpe deg med å lage enestående applikasjoner uten mye problemer.

Vær imidlertid oppmerksom på at vi bare har dekket det grunnleggende om HTML 5 og webutvikling i denne serien og antatt at du er litt kjent med HTML, men WWW er full av flotte ressurser – noen av dem er FOSS – for å utvide det vi har delt her.

I denne siste guiden vil vi snakke om noen av disse verktøyene og vise deg hvordan du bruker dem til å legge til den eksisterende siden vi har jobbet med. Forskjønne brukergrensesnittet vårt (brukergrensesnitt).

Forskjønnende brukergrensesnitt på nettstedet

Font Awesome er et komplett verktøysett for ikon/font/css som har potensial til å integreres sømløst med Bootstrap. Ikke bare kan du legge til en rekke andre ikoner på sidene dine, men du kan også endre størrelsen på dem, kaste skygger, endre farge og mange andre alternativer ved å bruke CSS.

Men siden håndtering av CSS er utenfor omfanget av denne serien, vil vi kun ta for oss ikonene i standardstørrelse, men oppfordrer deg samtidig til å grave litt dypere for å finne ut hvor langt dette verktøyet kan ta deg.

For å laste ned Font Awesome og inkorporere den i prosjektet ditt, utfør følgende kommandoer (eller gå gjerne direkte til prosjektets Github og last ned fontawesome zip-filen gjennom nettleseren din og dekomprimer den ved hjelp av GUI-verktøy):

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

(ja, domenenavnet er faktisk FortAwesome, med en R, så det er ikke en skrivefeil).

$ 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

Og legg til .css-filen til referanselisten øverst på siden vår, akkurat som vi gjorde med jQuery og Bootstrap tidligere (husk at du ikke trenger å skrive alt – bare dra filen fra Prosjekter-fanen i kodevinduet):

La oss ta rullegardinlisten i navigasjonslinjen vår, for eksempel:

Fint, ikke sant? Alt som trengs er å erstatte innholdet i den eksisterende ul-klassen-navngitte rullegardinmenyen nederst i index.php med:

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

Tro meg – å investere tiden din i å lære hvordan du bruker disse verktøyene vil være en veldig givende opplevelse.

Som IT-person må du være godt kjent med de mange ressursene for hjelp Internett har gjort tilgjengelig. Siden webutvikling ikke er et unntak, er her noen ressurser som vi er sikre på at du vil finne nyttige når du justerer applikasjonene dine.

Når du arbeider med Javascript-kode (for eksempel når du arbeider med jQuery som vi gjorde i del 2), vil du ønske å bruke JSHint, en online Javascript-kvalitetskodekontroll som tar sikte på å hjelpe utviklere med å oppdage feil og potensielle problemer. Når disse fallgruvene blir funnet, indikerer JSHint linjenummeret der de er plassert og gir deg tips for å fikse dem:

Det ser sikkert bra ut, men selv med dette flotte automatiserte verktøyet vil det være tider når du trenger noen andre til å ta en titt på koden din og fortelle deg hvordan du kan fikse den eller på annen måte forbedre den, noe som innebærer at du deler den på en eller annen måte.

JSFiddle (en online Javascript/CSS/HTML-kodetester) og Bootply (samme som JSFiddle, men spesialisert på Bootstrap-kode) lar deg lagre kodebiter (også kjent som feler) og gir deg en lenke for å dele dem veldig enkelt over Internett (enten via e-post med vennene dine, ved å bruke profiler på sosiale nettverk eller i fora).

Sammendrag

I denne artikkelen har vi gitt deg noen tips for å finjustere nettapplikasjonene dine og delt noen ressurser som vil komme godt med hvis du blir sittende fast eller vil ha enda et par øyne (og ikke bare ett, men mange) å ta en titt på koden din for å se hvordan den kan forbedres.

Sjansen er stor for at du også kjenner til andre ressurser. I så fall, del dem gjerne med resten av Tecmint-fellesskapet ved å bruke kommentarskjemaet nedenfor - og forresten, ikke nøl med å gi oss beskjed hvis du har spørsmål om innholdet som presenteres i denne artikkelen.

Vi håper at denne serien har gitt deg et glimt av de enorme mulighetene for mobilvennlig og responsiv nettutvikling.