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

Improving the usability of TSW WebCoder 2013 part 1: Inline feature help

May 5, 2012

In WebCoder, there are quite a few Tool windows, which are the dockable/floatable areas to the left, the right and in the bottom of the screen. The most of them are pretty self-explanatory, like "FTP", which are for working with your FTP servers, "Projects" for dealing with your projects and so on. These have toolbars in the top that allows you to connect to an FTP server or create a new project. However, a couple of the Tool windows might not be that obvious, a good example being the "Database result" Tool window. It's connected to the "Database" Tool window, but that might not be obvious if you're new to WebCoder. Here's what it looks like in WebCoder 2010:

database_result_2010

I got to thinking that if you meet this Tool window for the first time, it might not be very obvious what to do. Therefore, I decided to replace the grey area (where the results are shown once a query is executed) with a short but helpful introduction. It looks like this:

database_result_2012

The blue links that you see are actually interactive - click them, and WebCoder will show you the area of interest using animations and arrows! Hopefully this will make it easier for new users to get started with some of the less-obvious, but very useful features of WebCoder.

Another example is the WebDebug Tool window, which is nothing but a toolbar and some empty windows until you actually activate the function - but how exactly is that even done? WebCoder 2012 will help you get started with this very powerful feature as soon as you gain an interest in that Tool window marked "WebDebug":

webdebug_window_2012

Hopefully this will help even more people get a great start with WebCoder. As always, let me know what you think and stay tuned for even more usability improvements :)

 

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

Kasper (TSW) @ 2:46 pm in TSW,WebCoder