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 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.
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:
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:
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):
Let’s take the dropdown list in our navigation bar, for example:
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.
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.
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.