RSSThe TSW Blog

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:

webcoder2010_statusbar

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:

webcoder2012_statusbar_standards

  • 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:

webcoder2012_statusbar_popupmenu

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 :)

Kasper (TSW) @ 8:12 am in TSW,WebCoder

4 Responses to “Improving the usability of TSW WebCoder 2013 part 2: Web Standards and the Statusbar”

  1. Hi Kasper,

    is there a way to become a beta-tester of Webcoder 2012?

    KR,
    Michael Kjeldsen

  2. Kasper (TSW) says:

    Hi Michael,

    There will be a public beta test, announced right here on the blog, as soon as I have WebCoder ready for testing. I’m still working hard on getting there :)

  3. […] status bar that shows you standards and validation information and lets you see and change the document […]

  4. […] The improved status bar […]

Leave a Reply