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 that we can work with throughout the use of this book.
We've 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.htmlAt 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>
Tip
Note that we add ../ to each dependency. This is essentially telling the page to go up one level and retrieve the appropriate files. We also need to do this for the apple-touch-icon-precomposed links, shortcut icon, and the scripts at the bottom of the page.
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.