Tuning af dynamiske HTML5-webapps ved hjælp af Open Source Online-værktøjer

Da jeg begynder med den sidste artikel i denne serie, er det mit håb, at du har været i stand til at forstå vigtigheden af HTML 5 og mobilvenlig/responsiv webudvikling. Uanset din valgte desktopfordeling er Netbeans en stærk IDE, og når den bruges sammen med grundlæggende Linux-kommandolinjefærdigheder og de værktøjer, der er diskuteret i del 3, kan det hjælpe dig med at oprette fremragende applikationer uden meget besvær.

Bemærk dog, at vi kun har dækket det grundlæggende i HTML 5 og webudvikling i denne serie og antaget, at du er noget fortrolig med HTML, men WWW er fuld af store ressourcer - nogle af dem er FOSS - for at udvide det, vi har delt her.

I denne sidste guide vil vi tale om nogle af disse værktøjer og vise dig, hvordan du bruger dem til at føje til den eksisterende side, vi har arbejdet med at forskønne vores brugergrænseflade (brugergrænseflade).

Du vil huske fra del 2 i denne serie ("Tilføjelse af jQuery og Bootstrap for at skrive et HTML5-webapplikation"), at Bootstrap-zip-filen leveres med et bibliotek, der hedder skrifttyper. Vi gemte dets indhold i en mappe med samme navn inde i vores projekts SiteRoot:

Som du sandsynligvis kan fortælle fra ovenstående billede, indeholder Bootstrap et sæt elementer kaldet glyphicons, som ikke er mere eller ikke mindre de indbyggede komponenter, der giver flotte ikoner til knapper og menuer i dine applikationer. Den komplette liste over glyphicons inkluderet i Bootstrap er tilgængelig på http://getbootstrap.com/components/.

For at illustrere brugen af glyphicons, lad os tilføje nogle til navigationslinjen på vores hovedside. Rediger navigationslinjemenuerne som følger. Vær opmærksom på mellemrummet mellem hvert lukkende spændtag og menuteksten:

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

(forresten bruges tags span her for at forhindre ikonerne i at blive blandet med andre komponenter).

Og her er resultatet:

Selvom glyphicons er nyttige, er de også begrænsede. Og her kommer Font Awesome ind på scenen. Font Awesome er et ikon/font/css komplet værktøjssæt, der har potentiale til problemfrit at integrere med Bootstrap.

Ikke kun kan du tilføje en hel masse andre ikoner til dine sider, men kan også ændre størrelsen på dem, kaste skygger, ændre farve og mange andre muligheder ved hjælp af CSS. Men da håndtering af CSS ikke er omfattet af denne serie, vil vi kun beskæftige mig med standardstørrelsesikonerne, men opfordrer dig samtidig til at "grave lidt dybere" for at finde ud af, hvor langt dette værktøj kan tage dig.

For at downloade Font Awesome og inkorporere den i dit projekt skal du udføre følgende kommandoer (eller du er velkommen til at gå direkte til projektets websted og downloade zip-filen gennem din browser og dekomprimere den ved hjælp af GUI-værktøjer):

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

(ja, domænenavnet er faktisk FortAwesome med en R, så det er ikke en skrivefejl).

# 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

Og tilføj .css -filen til referencelisten øverst på vores side, ligesom vi gjorde med jQuery og Bootstrap tidligere (husk at du ikke behøver at skrive alt - bare træk filen fra fanen Projekter i kodevinduet):

Lad os tage rullelisten i vores navigationslinje, for eksempel:

Dejligt, ikke? Alt, hvad der kræves, er at erstatte indholdet af den eksisterende ul-klasse med navnet dropdown-menu i bunden af 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 mig - at investere din tid i at lære at bruge disse værktøjer vil være en meget givende oplevelse.

Som it-person skal du være fortrolig med de mange ressourcer til hjælp, som Internettet har stillet til rådighed. Da webudvikling ikke er en undtagelse, er der et par ressourcer, som vi er sikre på, at du finder nyttige, når du indstiller dine applikationer.

Når du beskæftiger dig med Javascript-kode (for eksempel når du arbejder med jQuery som vi gjorde i del 2), vil du bruge JSHint, en online Javascript-kvalitetskodekontrol, der har til formål at hjælpe udviklere med at opdage fejl og potentielle problemer. Når disse faldgruber findes, angiver JSHint linienummeret, hvor de er placeret, og giver dig tip til at rette dem:

Det ser helt sikkert godt ud, men selv med dette fantastiske automatiserede værktøj vil der være tidspunkter, hvor du har brug for en anden til at se på din kode og fortælle dig, hvordan du løser det eller på anden måde forbedrer det, hvilket indebærer at dele det på en eller anden måde.

JSFiddle (en online Javascript/CSS/HTML-kodetester) og Bootply (samme som JSFiddle men specialiseret i Bootstrap-kode) giver dig mulighed for at gemme kodestykker (også kendt som fiddles) og give dig et link til at dele dem meget let over internettet (enten via e-mail med dine venner, ved hjælp af dine sociale netværksprofiler eller i fora).

Resumé

I denne artikel har vi givet dig et par tip til at indstille dine webapplikationer og delt nogle ressourcer, der vil være nyttige, hvis du sidder fast eller ønsker et andet par øjne (og ikke kun en, men mange) for at se på din kode for at se, hvordan den kan forbedres.

Chancerne er, at du måske også kender til andre ressourcer. I så fald er du velkommen til at dele dem med resten af Tecmint-samfundet ved hjælp af nedenstående kommentarformular - og forresten, tøv ikke med at fortælle os, hvis du har spørgsmål om indholdet i denne artikel.

Vi håber, at denne serie har givet dig et glimt af de store muligheder for mobilvenlig og lydhør webudvikling.