Customizing our framework

It's critical for developers to establish a framework for each project they are working on, no matter how small or big the project may be. Of course, your framework should adjust to the requirements that the project demands as well. In this section, we'll establish a simple framework.

We have gone through and cleaned up the boilerplate for our needs, now we'll go through and expand upon the boilerplate to include the files that are critical to the applications we will build.

The first application will be based on the HTML5 Video specification (http://dev.w3.org/html5/spec-author-view/video.html). In that application we'll create a specific functionality for our video player that includes play, pause, and fullscreen functionalities. So let's create a directory specific to this application; we'll call this directory video.

In this directory, we'll create an index.html file and copy the contents from the homepage of the index.html file.

Now that we have our video section created, let's create the video.css file inside of our css directory.

Then, create an App directory within our /js folder. Within the /js/App directory, let's create an App.js file. Later, we'll explain in detail what this file is, but for now it will be our main application namespace that will essentially encapsulate global functionality for our application.

Finally, let's create an App.Video.js file that will contain our video application functionality within the /js/App directory.

You will now repeat the previous steps for each of our applications; including Video, Audio, Touch, Forms, Location, Single Page, and Offline. In the end, your directory structure should have the following new directories and files:

/audio
    index.html
/css
    audio.css
    forms.css
    location.css
    main.css
    normalize.css
    singlepage.css
    touch.css
    video.css
/forms
    index.html
/js
    /App/App.Audio.js
    /App/App.Forms.js
    /App/App.js
    /App/App.Location.js
    /App/App.SinglePage.js
    /App/App.Touch.js
    /App/App.Video.js
/location
    index.html
/offline
    index.html
/singlepage
    index.html
/touch
    index.html
/video
    .index.html

At this point, we should fix the references to our dependencies, such as our JavaScript and stylesheet. So let's open up /video/index.html.

Let's modify the following lines:

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>

Change the previous markup to the following:

<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.6.1.min.js"></script>

Our framework is now almost complete, except that they aren't connected yet. So now that we've got everything organized, let's start hooking up everything to one another. It won't look pretty, but at least it will be working and moving towards a fully functional application.

Let's start with the main index.html file, /ourapp/index.html. Once we've opened up the main index.html file, let's create a basic site structure inside our <body> element. We'll give it a class of "site-wrapper" and put it right below the comment Add your site or application content here:

<body>
    <!-- Add your site or application content here -->
    <div class="site-wrapper">

    </div>
    <script src="js/vendor/zepto.min.js"></script>
    <script src="js/helper.js"></script>
</body>

Within the wrapper containing our site, let's use the new HTML5 <nav> element to semantically describe the main navigation bar that will exist across all our apps:

<div class="site-wrapper">
<nav>
</nav>
</div>

Nothing too special yet, but now we'll go ahead and use the unordered list element and create a navigation bar with no styling:

<nav>
    <ul>
	<li>
	    <a href="./index.html">Application Architecture</a>
	</li>
	<li>
	    <a href="./video/index.html">HTML5 Video</a>
	</li>
	<li>
	    <a href="./audio/index.html">HTML5 Audio</a>
	</li>
	<li>
	    <a href="./touch/index.html">Touch and Gesture Events</a>
	</li>
	<li>
	    <a href="./forms/index.html">HTML5 Forms</a>
	</li>
	<li>
	    <a href="./location/index.html">Location Aware Applications</a>
	</li>
	<li>
	<a href="./singlepage/index.html">Single Page Applications</a>
	</li>
     </ul>
</nav>

If we copy the code that we have created in /video/index.html and test the page, you see that it will not work correctly. For all subdirectories, like video and audio, we'll need to change the relative path from ./ to ../ so that we can go up one folder. With this in mind, the nav element would look like the following within the other applications:

<nav>
    <ul>
	<li>
	    <a href="../index.html">Application Architecture</a>
	</li>
	<li>
	    <a href="../video/index.html">HTML5 Video</a>
	</li>
	<li>
	    <a href="../audio/index.html">HTML5 Audio</a>
	</li>
	<li>
	    <a href="../touch/index.html">Touch and Gesture Events</a>
	</li>
	<li>
	    <a href="../forms/index.html">HTML5 Forms</a>
	</li>
	<li>
	    <a href="../location/index.html">Location Aware Applications</a>
	</li>
	<li>
	    >a href="../singlepage/index.html">Single Page Applications</a>
	</li>
    </ul>
</nav>

Now, we can copy the navigation from /video/index.html to the rest of the application files or to the index.html files we created previously. Once this is done, we will have a single site that now connects well with each other.

Believe it or not, we have a very simple website going on here. Our pages are set up with basic markup and general styles. At this point, we need a navigation that brings our pages together. However, we've barely touched on some important aspects, including semantic markup for applications, which we'll discuss next.

[Previous] [Contents] [Next]

Customizing our framework

In this tutorial: