Improving the usability of TSW WebCoder 2013 part 2: Web Standards and the Statusbar
May 29, 2012
For many versions of WebCoder, you have been able to change the HTML definition used by WebCoder from the Functions menu. Unfortunately, some users didn't realize this, and after validation was added, having the correct definition for your document became increasingly important.
During most of these years, CSS 2.1 was the dominant standard, so it didn't make a whole of sense to make this configurable. However, with the rise of HTML5 and especially CSS3, I felt that there was a need for more focus on which standard was used for your current document. At the same time, I wanted to put more focus on the built-in HTML and CSS validators, because it's very fast at detecting a lot of common errors and general problems.
At the same time, WebCoder 2010 introduced JavaScript frameworks, allowing you to have constant IntelliSense support for one or several JavaScript frameworks. This was also available from the Functions menu and I fear that some users overlooked it as well.
Now, in WebCoder 2010, you could always see the total amount of validation errors in the document in the statusbar. It looked like this:
But as I said, I wanted to do more with this for WebCoder 2012, so after some thinking, I combined the web standard information with the validation information and put it directly in the statusbar, so that you can always see and reach it. It looks like this:
- Validation errors are now shown separately (16 HTML and 1 CSS issue)
- The JavaScript framework selector has been included, showing you the active framework(s)
- Each item is a button which can be clicked for more options, like selecting the current definition
When clicking one of the buttons, you will be presented with options corresponding to the button you clicked. Here's how it currently looks when you click the CSS button:
As you can see, this gives you instant access to changing the currently used definition for the document you're working on.
For shortcuts, you can hold down Ctrl key and click on the button to navigate to the next validation issue. If you instead hold down the Shift key, the Tool window for showing validation messages will be activated.
This is all a part of my plan to make the important features easier available and give you a better overview of your work and I think that this is another step in the right direction. Hopefully you will agree :)