Tuning Dynamic HTML5 Web Apps Using Open Source Online Tools

As I begin the last article in this series, it is my hope that you have been able to grasp the importance of HTML 5 and mobile-friendly / responsive web development. Regardless of your...

Spread the love

As I begin the last article in this series, it is my hope that you have been able to grasp the importance of HTML 5 and mobile-friendly / responsive web development. Regardless of your desktop distribution of choice, Netbeans is a powerful IDE and when used together with basic Linux command-line skills and the tools discussed in Part 3, can help you to create outstanding applications without much hassle.

Tuning Dynamic HTML5 Web Apps

Tuning Dynamic HTML5 Web Apps – Part 4

However, please note that we have only covered the basics of HTML 5 and web development in this series and assumed that you are somewhat familiar with HTML, but the WWW is full of great resources – some of them are FOSS – to expand on what we’ve shared here.

In this last guide we will talk about some of those tools and show you how to use them to add to the existing page we have been working on Beautifying our UI (user interface).

You will recall from Part 2 of this series (“Adding jQuery and Bootstrap to Write a HTML5 Web Application“) that the Bootstrap zip file comes with a directory named fonts. We saved its contents into a folder with the same name inside our project’s SiteRoot:

Bootstrap Fonts

Bootstrap Fonts


As you probably can tell from the above image, Bootstrap includes a set of elements called glyphicons, which are no more and no less the built-in components that provide nice-looking icons for buttons and menus in your applications. The complete list of glyphicons included in Bootstrap is available at http://getbootstrap.com/components/.

To illustrate the use of glyphicons, let’s add some to the navigation bar in our main page. Modify the navigation bar menus as follows. Please note the space between each closing span tag and the menu text:

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

(by the way, the span tags are used here to prevent the icons from getting mixed with other components).

And here’s the result:

Add Navigation Menu

Add Navigation Menu

Glyphicons, though useful, are also limited. And here’s where Font Awesome enters the scene. Font Awesome is an icon / font / css complete toolkit that has the potential to seamlessly integrate with Bootstrap.

Not only you can add a whole lot of other icons to your pages, but can also resize them, cast shadows, change color, and a many other options using CSS. However, since dealing with CSS is out of the scope of this series, we will only deal with the default-sized icons but encourage you at the same time to “dig a little deeper” to discover how far this tool can take you.

To download Font Awesome and incorporate it into your project, execute the following commands (or feel free to go directly to the project’s web site and download the zip file through your browser and decompress it using GUI tools):

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

(yes, the domain name is actually FortAwesome, with an R, so that is not a typo).

# 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

And add the .css file to the references list at the top of our page, just like we did with jQuery and Bootstrap earlier (remember that you don’t have to type everything – just drag the file from the Projects tab into the code window):

Add Font Awesome

Add Font Awesome

Let’s take the dropdown list in our navigation bar, for example:

Dropdown List

Dropdown List

Nice, right? All it takes is replacing the contents of the existing ul class named dropdown-menu at the bottom of index.php with:

<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 – investing your time in learning how to use these tools will be a very rewarding experience.

Where to Ask for Help

As an IT person, you must be well acquainted with the many resources for help the Internet has made available. Since doing web development is not an exception, here are a few resources that we’re sure you will find useful while tuning your applications.

When dealing with Javascript code (for example, when working with jQuery as we did in Part 2), you will want to use JSHint, an online Javascript quality code checker that aims at helping developers to detect errors and potential problems. When those pitfalls are found, JSHint indicates the line number where they are located and gives you hints to fix them:

JSHint Tool to Detect Errors

JSHint Tool to Detect Errors

That surely looks great, but even with this great automated tool, there will be times when you will need someone else to take a look at your code and tell you how to fix it or otherwise improve it, which implies sharing it somehow.

JSFiddle (an online Javascript / CSS / HTML code tester) and Bootply (same as JSFiddle but specialized in Bootstrap code) let you save code snippets (also known as fiddles) and provide you a link to share them very easily over the Internet (either via email with your friends, using your social network profiles, or in forums).

Summary

In this article we have provided you with a few tips to tune your web applications and shared some resources that will come in handy if you get stuck or want another pair of eyes (and not just one, but many) to take a look at your code to see how it can be improved.

Chances are that you may know of other resources as well. If so, feel free to share them with the rest of the Tecmint community using the comment form below – and by the way, don’t hesitate to let us know if you have any questions about the content presented in this article.

We hope that this series have given you a glimpse of the vast possibilities of mobile-friendly and responsive web development.

Facebook Comments
Spread the love

Posted by News Monkey