We are deploying some small web apps.
UI design is quite hard if done right, so lacking resources, we are now looking for a simple way to bring the casual user up to speed (with our bad design ;)).
Are there jQuery plugins that could be used to create a demo? (fire events, move dialogs, etc. etc. ?)
Should we use a totally different approach?
I prefer to do mockups using something like balsamiq - that way the customer doesn't think it's further along than it actually is.
Related
I've played a great many MMORTS games such as Evony, Dragons of Atlantis and Kingdoms of Camelot. They all have some great features and a great many not so great problems. Simply for my own interest I wanted to try my hand at writing something similar. I don't intend to even try to compete with the big boys but I wanted to write it in a professional and scalable manner as if it was intended for eventual commercial release.
So that's the background that leads into the question. I have been looking at various frameworks and libraries that would be suited to this style of game. However there is such a plethora of options that my head is now spinning. I would like to get some input as to what other people think are the best options. I want to try and write this as a cross-platform / cross-browser webapp that can later be converted to a "Native" app using something like MoSync. I want to stick with HTML5, CSS3 and JavaScript technology.
Some of the things I am sure I want are:
It must be scalable (ie able to handle a significant number of simultaneous users)
I prefer to work with some sort of MVC framework (I am used to working with Joomla MVC and have been considering backbone.js for this aspect)
I am no JavaScript guru but will most likely want to work with jQuery (mostly in relation to client side views)
I like templates but am completely lost which template system to go with (ie mustache, handlebars, dust etc). I think my choice in this area will ultimately come down to which framework I end up with.
Chat is an important aspect of MMORTS games and I am thinking of using Node.JS and Socket.io (or NowJS) for this.
I have also been looking at Redis for key-value store.
At this stage I have abandoned the idea of using jQuery Mobile as initial tests have caused more headaches than they have solved.
So my front runners are Node.JS for server side JavaScript (possibly with NowJS to implement chat), Redis for key-value store, backbone.js for the MVC framework, mustache (or maybe LinkedIns fork of dust) for templating and Jquery of course.
I would greatly appreciate any input to help me make my final decision on what frameworks and libraries to use.
This is not a framework, but you may find Mozilla's Browser Quest implementation interesting. The whole thing is open source and they use HTML5 Canvas and Node.js (socket.io is a big player here) and it is entirely cross-platform
I'm working with a team on exactly this. Our research and experience suggests that a Node.js backend is definitely a good idea. What to use with Node.js? We've come up with two good possibilities:
Use websockets for communication and a front-end engine like Phaser for your rendering.
Use Isogenic Game Engine for everything.
(http://html5gameengine.com/ may help you to compare the feature-sets of the top HTML5 game engines including the ones I've just mentioned.)
I'm interested in how to develop Web-GUIs using test-driven-development.
Especially I'd like to know if there are any guidelines/hints/best-practises on how to design Web-Frontends (i.e. the HTML) in order to be (automatically, of course...) testable? (in classical UI-developement there are patterns such as MVVC which support TDD and automated testing)
The are very similar patterns for web development as there are in desktop development. But, and it is a big one, the web is stateless. This sounds obvious but I think it clearly defines the boundaries for testing.
There are many, many popular incarnations of MVC for the web. However, in some web technologies it is hard to separate out pure UI (HTML, CSS etc) from code. You can always fall back on more of an MVP approach, which is like MVVM except the view is passive (won't respond to events and rebind). These patterns should cover you for the main UI logic of the application. All of these patterns can be used with TDD.
If you want to then go up a level, you are into tools like Selenium. These tools allow record/playback of user interactions with the web ui. However, if used casually, they can lead to brittle tests that break when the layout changes.
Hope this helps.
I don't know of any specific guidelines, but writing clean, semantic HTML and making appropriate use of CSS class and IDs is normally sufficient.
I have been using Dojo and Dijit for more than a year to develop a browser-based IDE. Dojo is a great framework. But creating an IDE-like interface using Dojo is cumbersome and wastes a lot of time unless you are a CSS superman. I have a good understanding of HTML5, JavaScript, and CSS. Building the UI I needed required several CSS hacking that I found by trial and error. There was no systematic way to get from the UI design to the implementation and I am afraid to change the UI layout because any simple change can break the UI, mostly by adding irrelevant scroll-bars to Dijit panes where I do not need them. (the complex UI has 4-5 levels of nested panes including mostly border containers and content panes)
Recently I have come across SproutCore and Cappuccino, which have great demoes and their look and feel is more desktop-based. There has been several discussions comparing these two with each other. But none of them talk about how systematic and quick is it to get from UI design to implementation? Ideally, I should be able to implement the UI I want not more than a couple of days (Assuming that I know the framework), and changing them in the future should be easy.
The other difficulty with Dojo is that I have to work directly with DOM, to append and remove dijit widgets. While I do like to keep this flexibility, I wish I could use a higher level of abstraction to define the application UI. I have read about MVC in SproutCore and Cappuccino, but I am wondering if in practice the provided abstraction layer speeds up the UI development? or the provided layer is a fancy architecture that only increases the readability of the code? Will I lose the direct access to DOM if I build my UI using these abstractions?
Cheers,
Navid
Cappuccino is much higher-level. You write in Objective-J, not HTML/CSS/JavaScript. I personally do not recommend it as Objective-J is a niche language and you'd be stuck with something not widely-understood by everybody. You'll find it more difficult to look for answers to problems, and other people will have more difficulty in maintaining your code.
However, due to it being high level, it does shield you from the drudgery of programming in "standards" (i.e. HTML/CSS/JavaScript). Therefore, you should be able to develop UI's faster and easier, but you'll have to instead learn the ins-and-outs of Objective-J. All-in-all, not much to gain here, I suppose.
SproutCore, on the other hand, is HTML/CSS/JavaScript based, so you don't really have to relearn the basics. It follows the MVC model of separating UI and data concerns, so programming UI's should be easier.
My personal recommendation is to stick with Dojo -- 1.6 has come out, which has change-tracking, state-tracking and bining support. 1.7 is around the corner. The MVC module is improving fast. The next version, 2.0, will be quite awesome. It is being actively developed on, and so you won't be left behind.
Dojo can also be used with the Closure Compiler's Advanced Mode to make highly-compact, highly-optimized, fully-obfuscated builds for deployment. Other JavaScript-based frameworks are not as adaptable.
Cappuccino most definitely goes beyond just improving readability. If you don't want something to have a scrollbar in Cappuccino, don't give it one. That's pretty much the end of the story and one of the great advantages of using such a framework. In my experience, HTML and CSS is just an endless troubleshooting session. With Cappuccino things go where you say they should and stay there. And this is true across browsers as well (most of the time).
Furthermore you can, if you choose to, build your user interface using Interface Builder and Cappuccino's nib2cib utility. This makes it trivial both to initially lay out and to then later shuffle buttons and controls around.
Have you considered jQuery and the jQuery UI?
I am planning on working on an interactive application that graphically animates the various sorting algorithms in action. Most of the examples of this kind on the web seems to be using java applets. I was wondering what other software/tools would be well suited to develop an application like this. It may or may not be web-based. Any help would be greatly appreciated.
Thanks
Dinesh
Do you mean like this? http://sorting-algorithms.com I guess flash would be an obvious candidate, but is bulky. That website uses gifs! I personally like it
Flash and Silverlight are well-suited for showing such showing animations. It's should be easier to create a nice animation than with Java.
With recent advancements in client-side web application development technologies, it's pretty easy to make something like that using Javascript and HTML5 features like <canvas>, that most of the browsers already implement. Even if they don't, there are fallback mechanisms, like explorercanvas aimed at Internet Explorer browsers.
And because it takes a simple option of "view source", the code behind the animations is much more accessible than Flash or Java, which would require to provide the source code separately.
Done.
2nd result for Google: sorting algorithms
I really want to create a stunning-looking GUI desktop application that looks like, for example:
Mac OS X interface
Picasa desktop client on windows
IPhone apps
Office 2007
I've mostly been programming GUI using Qt/Swing/WinForm
and I'm tired of creating so plain looking GUI, lol.
So I was thinking about diving into stuff like:
jQuery
WPF/C#
iPhone SDK
Silverlight
Adobe Air/Flex
Just to get some ideas on how to create really cool looking UI.
Does that sound like a good list? Any developers here that could share what platform they use to create very cool looking desktop app?
On a sidenote, I really wonder what developers at Apple / Microsoft use to develop their own cool-looking software.
EDIT
A lot of responses talk about the importance of usability over "cool-looking"..
I totally agree that usability and simplicity are the most important aspects of user interface design. I've been doing GUI development for a while now (> 3 years), so that I understand.
But using cool-looking UI also improves user experience + it could make big difference on whether or not your software sells.
I mean, otherwise why would Microsoft/Apple try to make their OS UI look "cooler" everytime there's a new version? Why would websites like pragprog.com, or versionsapp.com. make their websites look like that? Basically you kill 2 birds with one stone: stunnning-looking UI + super usability (because it looks simple and intuitive).
That is what I'm striving for. And as far as I know, I cannot achieve that using Qt/Winform. Most of the books I have read just show you how to make average-looking (read: 1990's) UI. I want to learn how to create cool-looking UI. And the only place I see cool-looking UIs these days are the technology I list above. I'm not enamored with any technology; but I just want to know how things are done in other technology to see if I could apply them to the technology I'm using, or see if I could use those technology in my line of work.
An example: if I were to pick between this UI and this UI, I probably would pick the latter, if just based on looks alone.
Functionally, they are just the same UI; they both allow you to keep track of your time. They both contain buttons and textboxes, etc. But the fact that they look different, also differentiate them in terms of attractiveness.
So in all, I think the "ice on the cake" is very important. I would say it's the thing you strive for after you are certain you have a totally intuitive, usable UI.
I think that the major reason many people suck at designing interfaces is that they consider them to be graphic design. It is not. The core of creating a good user interface is a bit like creating a good API – the interface has to be conceptually consistent, hard to misuse, easy for common tasks.
Wanting to design something cool because you are “tired of plain GUI” is a perfect recipe for disaster. If for nothing else then because consistency is a crucial part of a good UI. If each application wanted to stay out of the crowd, the whole thing would be an unusable mess.
It is almost unfortunate that Mac OS X looks that good, because then people start to think you can create a good interface by animating it or sprinkling some graphics on the top of it. The graphical part, the “cool” of the design is just the icing on the cake. If you really want to design good interfaces, stay true to the environment, respect local human interface guidelines. And maybe read Apple’s Human Interface Guidelines to get a feeling where the problems are and what can be done to solve them.
I know this sounds much more boring than filling gradients in Photoshop, but it’s the only right approach to take if you really want to create a top-notch interface.
the key to a stunning graphical user interface is twofold:
it still has to be useful to the users, and that involves a lot of hard work, study, paper prototypes, user interviews, usability testing, et al.
hire a really really good graphic artist
Neither step is optional. If you -the programmer- also happen to be a really good graphic artist, that's fine - but the vast majority are not, and no amount of fancy tools and photoshop tutorials will replace the talent and training that real artists bring to the table.
I don't mean to sound harsh, but most programmers are terrible GUI designers. Myself included. It's ok to leave art to the pros. ;-)
I'm all for WPF/Silverlight, but it really about the platform that you need to support.
The real deal is your own talent, as WPF is a powerful tool, if you ain't got the talent to use it, it will look like improved winforms. (Also check out the Expression Studio from MS - which enhance what you can get out of WPF).
If you want to know more about UI you can read this books:
About Face 3: The Essentials of Interaction Design
The Inmates Are Running the Asylum
UI development is not about technologies. In some cases console is the best solution.
We can get commercial GUI add-ons like Telerik which also supports Mono as well.
Regardless of the UI technology, you will of course be well-served to adopt a programming style where the look and logic of the app are as decoupled as possible. This allows you maximal flexibility to design and evolve the look of your application (the View) while potentially requiring very few code changes in the back-end (the Model or ViewModel).
While possible using all UI technologies, it's particularly easy to execute this in the case of WPF/Silverlight/Moonlight via the MVVM programming style, due to the succinctness of databinding (very little boilerplate "glue" code).