I tried to sum up all the work I have done in the past few months in as little time as possible, which was incredibly hard to do due to the complexity of Snowsuit. I found it hard not to under sell myself but had to bite the bullet and not cover the technical side of Snowsuit due to it being well documented in my blog. Looking back I am extremely happy with how the application has turned out, it all worked out very nicely in the end and I believe I achieved what i was looking to do from the beginning. Here’s some great feedback I got from a fellow twitterer:

Great Twitter Feedback

But do not fear, I am not going to simply give up on the application because my deadline is over. I will continue to work on Snowsuit to improve it and take it further, there is still some room for improvement. The code needs some re factoring so that it is all classed based and more efficient. I could also do with re factoring my JavaScript so that I can get better performance from my scripts as it can get a bit slow if you have a large amount of content in the gallery area. I would also like to add the ability to add different media types to projects such as audio files and pdfs as the content types are slightly limited at present. Another nice feature to add would be to paginate content in the upload page when you have over a certain amount of content so that loading times are smaller, this could also be done in the gallery area which would allow for huge amounts of content to be added to projects.

The next step for me is to test the application further by releasing some private beta login details, and then i can begin getting everything ready for public release. I will keep anyone interested updated via this blog but do not worry, i will now go back to normal posting and stop spamming my own blog with Snowsuit content. Here’s some useful links to catch up with Snowsuit:

Vimeo Channel

Twitter Feed

If you have any comments on Snowsuit or any improvements you want to suggest, you can use the contact form on this site or simply head over to the Snowsuit site and use the contact form over there!

Here’s a summary of final amendments:

Fixed issues with loading times not allowing scripts to run in a live environment
Fixed bugs when adding notes
Fixed bugs when adding shapes
Fixed bugs when navigating back to content without saving
Added contact form
Removed drag handles and other elements from share page

I will now record a quick promotional video for the application to highlight it’s features and post it here in my blog, i will also be writing a conclusion to summarize the process and let you know my thought’s on building the application!

And here is a summary of new updates:

Users can now add as many shapes as they wish
Drag handles are now above content instead of below
Gallery page automatically saves when you navigate to add content page or add a note
Users can share gallery pages via email

I am very close to getting to a completed stage of the application with a few loose ends to tye up, i hope to reach a stage in which it is ready to hand in as my extended major project before the weekend is over.

The purpose for my user testing is to find bugs i may have missed in the development process, and to evaluate how to interface can be improved upon and features improved. I feel this is a very important stage of any web applications development as good user interaction can make or break an application.

My first stage of user testing proved to be very helpful in finding a lot of bugs and features i have missed while developing the application, i have uploaded an example of my user testing to Vimeo so you can see the process i went through. I basically recorded users using Snowsuit and encouraged them to find bugs and suggest improvements they could think of, here is Carl Tierney testing the application:

So far my user testing has highlighted the following problems and suggestions for fixing and improving the application, fix’s made or marked with (done):

Make text resizable
Drag handles at top not bottom (done)
Shapes not limited (done)
Resize stage
Save when you go back to add content (done)
Save when you add note (done)
Fix bug which sometimes saves wrong content to wrong project (done)

As you can see I have already implemented a lot of these requests and will soon commence in testing the new and improved features to see if users can think of anything else they would like to see in the application. After i am happy with the next stage of testing i will be giving out a limited number of passwords for users to begin alpha testing the application. This basically allows users to put the application through it paces on a larger scale, it will also be conducted online and not on my local server, this allows me to test load times and the overall performance of the application.

I will record a new screencast this evening explaining the fix’s i have implemented and showcasing new features i have been able to complete.

As you can see Snowsuit is getting really close to a point where i can release a private beta and get some real user testing and bug reporting down so that it can reach a state suitable for public release. I have conducted some small user testing, allowing some university students to use the application while i recorded the screen. Although the screen capture software i used managed to let me down with a very poor framerate, i will be doing some more testing with diffrent software to ensure i can analyze it and report on this properly.

Here’s a summary of new features:

Gallery area layout redesigned
Users can add quick notes to projects from the gallery page
Users can add shapes to projects to create diagrams
Reset now reset’s all content positions without page refresh
When user creates project shapes are automatically added to the project

The deadline for university is May 8th, although i plan to continue working on Snowsuit after this date, so do not fear i will continue to add updates and improve Snowsuit after this date, although recording these screencasts will stop as i am using them to document progress for my report.

First thing’s first I headed over to w3schools and their article on PHP Functions which has some great examples on how to use custom Functions within PHP. Once my brain was up to scratch I could begin creating my function! As i explain in the screencast below my function takes six parameters which it uses to add content to the database in its respective table, here’s the full function:

1
2
3
4
5
6
7
8

function addContent($table,$row1,$row2,$value1,$value2,$rid){
 
	$query = "INSERT INTO $table (rprojectid,$row1,$row2) VALUES ('$rid','$value1','$value2')";
 
	if(isset($query)){
		$result = mysql_query($query) or die(mysql_error());
	}
}

This function then allowed me to significantly reduce the amount of files needed on my server to add content to projects, i could now simply call the function every time content was being added. Heres an example of my function in use as displayed in my screencast:

1
2
3
4
5
6
7
8
9
10

	if((isset($_POST["tN"])) && (isset($_POST["text"]))){
 
		$textname = mysql_real_escape_string($_POST["tN"]);
		$textname = str_replace("\n", "<br />", $textname);
		$text = mysql_real_escape_string($_POST["text"]);
 
		addContent(text,name,text,$textname,$text,$rid);
 
		echo('Added Text!');
	}

I have recorded a fifteen minute screencast explaining my function further and take you through me using it step by step, so check out the screencast below for a full explanation of the above code:

Functions are awesome and i wish i brushed up my knowledge of them before i begun coding Snowsuit, but that is the purpose of this project, to learn! So i guess my £3000 tuituon fee for university this year is starting to finally pay for itself a little bit as it is giving me the opportunity to have fun with some code and continue advancing my programming knowledge. Snowsuit’s deadline is nearing the two week mark so i shall be continue to work very hard on the project to get it polished streamlined and finished, keep your eyes peeled on my blog for more Snowsuit based screencasts.

Here’s a summary of progress:

Users can now save the position and size of dragged and re sized content
Save button has fade in and out prompting user they have saved successfully
Reset button resets the position and size of all dragged content allowing users to start again

And that pretty much sums up everything for screencast number eleven. Next stage is to add more security to the application and continue working on the Gallery area!

Version 0.1.2 is now out with IE6 support!

If you remember my post from a while ago which was a tutorial on how to create an accordion menu with fade in and out effects then you’ll immediately recognize where this plugin has come from. I have decided to take the tutorial a step further and turn the functionality into a fully fledged jQuery Plugin:

jQuery Fade Menu Plugin:

The Fade Menu plugin allows users to easily turn a definition list with nested unordered lists into an accordion menu which uses fades between transitions.

Demo

Installation

To install the plugin simply drag the jQuery.fademenu.js file as well as the latest release of jQuery into your desired location, as an example we will presume the user has a /js folder to contain all javascript files. Then include the required files in the head of your html page:

1
2

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.fademenu.js"></script>

Markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    <dl>
        <dt><a href="#">Parent</a></dt>
        <dd id="open">
            <ul>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
            </ul>
        </dd>
        <dt><a href="#">Parent</a></dt>
        <dd>
            <ul>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
            </ul>
        </dd>
        <dt><a href="#">Parent</a></dt>
        <dd>
        <ul>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
        </ul>
        </dd>
    </dl>

The dd with the id of open will be open on load, so if you wish the second menu tree to be open on load simply move id=”open” to the second dd.

jQuery Markup

To use the plugin the following jQuery is required:

1
2
3
4
5

$(document).ready(function(){
 
	$('dl').fademenu();
 
});

Options

It is possible to pass the following options to control the speeds of the transitions:

slideup

This setting controls the speed menu trees slide up when the user selects a new menu title. You can pass it speeds built into jQuery such as “slow” “fast” or “def”. Or if you prefer an integer for more control, for example, for a slideup of one second:

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
 
	$('dl').fademenu({
 
		slideup: 1000
 
	});
 
});

slidedown

This setting controls the speed menu trees slide down when the user selects a new menu title. You can pass it speeds built into jQuery such as “slow” “fast” or “def”. Or if you prefer an integer for more control, for example, for a slidedown with the speed of “fast”:

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
 
	$('dl').fademenu({
 
		slidedown: "fast"
 
	});
 
});

fadein

This option controls the speed in which new menu trees fade in. You can pass it speeds built into jQuery such as “slow” “fast” or “def”, Or if you prefer an integer for more control.

fadeout

This option controls the speed in which new menu trees fade out. You can pass it speeds built into jQuery such as “slow” “fast” or “def”, Or if you prefer an integer for more control.

Download

jQuery 3.1.2

Fade Menu Plugin

In the tenth screencast of my series i am showcasing a number of new features, this week i have been concentrating on usability and getting the site up to scratch with web standards. I have also begun building the gallery page which allows users to resize and arrange there content, check out the screencast for a full explanation of all new features:

Here’s a summary of new features and progress:

Text now formatted as the user inputs it when viewing in dialog
Users can now delete text from projects
Users are prompted with dialogs which explain what happens if they delete content/project
UI components are themed better to match site
Gallery page build begun
Can drag content into gallery area to resize and arrange
If content is dragged outside of gallery area it reverts back to original position

And that sums everything up for this screencast, i will now begin concetrating fully on the gallery page. The main feature i want to get working is being able to save your gallery area so that you can arrange content, save it and then come back later to play with or inspect it further, be on the look out for another screencast soon!

So what are web standards?

Web standards are a set of guidelines and recommendations by W3C (the World Wide Web Consortium) to ensure websites are as accessible, efficient and maintainable as possible. It is important to note that although these standards are only “recommendations”, these recommendations come from a very reputable source, in the words of W3C:

A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.

Another organization worth a note is WaSP (The Web Standards Project), who are working alongside browser companies, authoring tool creators and a large proportion of the active web community to teach and spread the word of web standards.

What do i do to follow web standards?

In a nutshell, i follow the following rules to ensure i am meeting web standards to the best of my ability:

Valid XHTML and CSS
Semantically sound and accessible code
Separation of HTML, CSS and JavaScript

Why bother?

Valid XHTML and CSS ensures your page renders how you want it too across all browsers and platforms, because the page is valid you are not relying on browsers to do the guess work for you with there own error handling. Validating code also irons out any problems you may be experiencing with your layout, which are more than likely caused by using an incorrect markup and doc type. Valid code is much more likely to display correctly across a wider range of browsers and platforms.

Good semantic markup can save you a world of pain when it comes to maintaining your site, the faster you can get to and find what you want the better. With good semantic markup not only can you read and find parts of your site faster, so can search engines. Good semantics mean search engines can read and index code to ensure better search engine results. Here is a great article to find out more about good and bad semantics.

Separating your your HTML, CSS and JavaScript can have a number of advantages, the main being the performance gains this can have for your users. External files such as .css and .js are stored in a users browsers cache the first time they visit a page, because of this every time they come back to the page the browser doesn’t have to load these files again, greatly increasing performance. Another great advantage of separating these files is maintenance, locating and including extra files becomes alot easier when they are well separated and placed with folders such as, css/mycssfile.css and js/myscript.js.

In Conclusion

I will be taking all of these points into account when building Snowsuit and have to the best of my ability when building this very site. Web standards can seem pointless and a waste of time and effort at first glance. But when you add up all the advantages and growth in potential viewers or customers to your site, the extra bit of effort definitively pays off! If all this talk of standards tickles your fancy i highly recommend checking out the following books which have helped me to write better and more accessible code:

If you don’t feel like shelling out money on some books you can always head over the WaSP site and read some great information about web standards and how to follow them!