We have a requirements to create a Website (ASP.NET v4.0) which displays a Graph. It should be able to do:
Display nodes (with names and colours)
Display links between the nodes, with text on the link (e.g. '85%')
Interact with nodes/links to drag/move/select
Layouts out the nodes in a clear manner automatically
Can add/remove nodes (asynchronously) and link/unlink easily
Javascript interaction with events (onClick, onDrag)
Events must provide identification of selected nodes/links (Javascript).
Ability to zoom in/out (ideally)
Updates Asynchronously (rather than full postbacks)
Responsive when displaying >100 nodes
Flash is not supported
MUST support IE6 (just don't ask...!)
Development is Visual Studio 2010 on .Net Framework v4.0
We were currently using the Syncfusion Diagram tool (v. 6.1.0.34) running on v2.0, but recently upgraded to v4.0 and a breaking change in System.Web ViewState management means we need to find an alternative. Its possible the latest version (v8.3) is much better, but we're reclutant to fork out a few thousand pounds for the licenses if its just as bad.
We found the Syncfusion tool ok, but it was very difficult to code against (without manual hacks) and it performed quite badly with large graphs when it loads 200 images from the server.
Really looking for some inspiration from your guys. Any suggestions or experiences shared would be most helpful.
Thanks in advance.
mxGraph is designed for this type of functionality (disclaimer - I do work for them). It does support IE 6 and is entirely written in JavaScript. It comes with .NET backend server classes to perform comms with the JavaScript client. In order to get responsive behaviour with over 100 nodes on IE 6, you need to switch to using a server side image over about 50-60 nodes, since IE 6 does perform very badly. We include an example to demonstrate how to do this. Give it a try, if you require evaluation support, there is a forum for that.
Related
I need to parse some information from a website.
I know there are some testing tools that do that, but I need it to be done in real time, from ASP.NET webpage code. So I guess, I need a .NET library.
Previously I was just able to generate a specific URL and parse the HTML but now I have to get information from a page that is generated by AJAX calls after form clicks. So I have to generate those clicks, right?
BTW I only have (limited) experience with server side ASP.NET. Maybe the optimal solution is quite different to what I suspect?
You may take a look at WatiN.
From the homepage:
Automate all major HTML elements with ease
Find elements by multiple attributes
Native support for Page and Control model.
Supports AJAX website testing
Supports creating screenshots of webpages
Supports frames (cross domain) and iframes
Handles popup dialogs like alert, confirm, login etc..
Supports HTML dialogs (modal and modeless)
Easy to integrate with your favorit (unit) test tool
Works with Internet Explorer 6, 7, 8, 9 and FireFox 2 and 3
Can be used with any .Net Language
Licensed under the Apache License 2.0
Downloaded more than 120.000 times.
And since its open source you can add and contribute new features yourself!
Take a look at Coypu. It wraps WatiN and Selenium giving you helper methods that make this kind of work a lot easier.
I am more of a server side programmer so bear with me on this. How exactly are user interfaces for websites designed? I mean which tools are usually used? Lets say for example, stackoverflow.com which has lot of dynamic content. How are the various areas designed? I am pretty sure its not in Visual studio. Probably the server side code is in asp.net but what about the actual UI? (layout, images, tables, buttons etc)
What is the usual workflow for an activity like this? Say, I have a design on paper. Where do I go from there? How do you wire in the code after the interface design is complete?
How do you handle the fact that in a page, some of the stuff is static and some areas are dynamic? (like the ask question page I am on now)
As you said, It boils down to the requirement of the webpage.
For a professional (fairly big) website, many teams are involved for example, creative team to do the paper work and design of UI elements and controls, graphics team to actually design images, UI Developers for placing the contents appropriately and CSS, architects to decide on performance for various items (and taking a call on static/dynamic nature of controls)
Generally designers use some external tools for designing HTML pages to provide templates and same can be used later in visual studio to make actual pages. There are many such tools available in the market such as Dreamweaver There are many freeware also available in the market for designing client and CSS rich websites. You can search on Google for these.
If your website requirement is not very client rich, you can still design using visual studio or use new Microsoft product Webmatrix which gives you user friendly tools to make a website look fabulous.
The paper design is the first correct step.
How to continue:
You can get the 960 grid system from http://960.gs/ and start from this one. Its a nice trick that have ready to use css templates that you can build on them your design.
The image effects:
The shadow and borders and other thinks that you ask is usually make on Photoshop, but now the new browsers support many of them using css. For example: http://css-tricks.com/snippets/css/css-box-shadow/
Software that can help on design:
- MS Expression
- DreamWeaver
Is there a formal standard I can use to to rate the accessibility, especially for visually impaired people, of my MVC3 web application? If there are various standards, as I suspect, which should I give preference to for a web application primarily targeted at people with no or minimal visual impairment, but strongly wanting to offer as much as possible to visually impaired people? This is a learning management application, so wide accessibility is important.
I am trying to stick to best practices in terms of HTML and CSS semantics and such like things, documented in the handful of books I have, and I am using HTML5 validation in Visual Studio for my Razor views. What other tools can I use, preferably on the development side, before I deploy and can use the various online validators? Are the any online rating tools?
Standard (and reference list)
The W3C standard is WCAG 2.0.
The WCAG 2.0 Recommendation tries to be technologically agnostic and to apply to all kinds of websites, even web apps but the consequence is that it's rather unspecific. HTML/CSS/Script Techniques (as well as the Failure ones and Flash/Pdf/Smil if you use them) and the Understanding part are good reads.
For daily auditing I prefer to use:
AccessiWeb 2.2 reference
list,
"a methodology to verify conformance to WCAG 2.0" that "facilitates
(its) understanding and implementation".
There are references to WCAG 2.0 Success Criteria and Techniques but alas no links. Hyperlinks exist on the french version but weren't added on the english one, alas (I'll try to fix it with them this month).
The script part, essential to webapps, is again partly unspecific but that's because it's hard to be so without having 10x as tests! There are thousands of things to do with JS when there are a hundred of HTML elements.
EDIT 2014: this checklist has been updated to new techniques in HTML5/ARIA (an awesome work imho) but only in french. AccessWeb HTML5/ARIA (in french) May be translated in english in 2014 or 2015 or try an online translation service ;) 70% of tests are common with AccessiWeb 2.2 and the new tests are up to date HTML5/ARIA techniques already working in modern websites with the browsers and screen readers quoted in Annexes.
ARIA, as in Accessible RIA, is another work from W3C-WAI:
(ARIA) especially helps with dynamic content and advanced user
interface controls developed with Ajax, HTML, JavaScript, and related
technologies.
No doubt this is the future of accessible web apps but its support is a work in progress in browsers and assistive technologies. Also old screen readers'll never be compatible with ARIA and they're very slowly being replaced for newer versions because they cost A LOT (thousand(s) of USD/EUR for JAWS).
Thus webdevs must always create apps compatible with both old plain techniques (using tab key and space to access information and interact with it) and new ones (manipulating a tree with arrow keys, being informed of changes in a Live region while reading another part of the page).
ARIA is complicated, needs time and experience, etc
ARIA doesn't replace WCAG 2.0; huge improvements'll be seen with WCAG 2.0 only.
not everything is as complicated as a tree implementation. Landmark roles are very easy to add in any website for example.
If you use jQuery UI, there exists an accessible version of popular modules/scripts: http://hanshillen.github.com/jqtest/
It isn't perfect yet but it's far better than the original. In my experience, you can't mix the legacy jQuery UI scripts and these ones (though I didn't try for too long, I could easily be wrong).
Testing
I wrote about 2 useful services, Opquast and Tanaguru, in another answer. The other answer from BrendanMcK related to automated tests is a must read.
WAVE (fluffmyboner already wrote about it in the other answer) both exist as a toolbar and as a webservice. Main difference afaik: the WAVE toolbar'll analyze the DOM of your page while the webservice'll analyze the HTML+CSS sent but won't execute any JS
TAW (select inglès than WCAG 2.0) is another service for analyzing a few criteria
Wave is my go-to for accessibility validation, although I'm not too sure about what you can use to check pre-deployment.
I know similar questions have been closed for it being "impossible to answer objectively", but stick with me here.
I built a prototype in Adobe Flex, they (customers) liked it. Everything was fine until they later told me that iPads / iOS needs to be supported too.
I checked out Adobe's Packager for iPhone. We're evaluating that and we will know if it works out in a couple of days. (We need to get through Apple's red tape and certificates raj so this angle is delayed by a few days!)
There is a growing voice for using HTML5/Canvas as a technology platform itself. And despite being quite proficient in Flex, I think this makes sense.
I'm in need of a HTML5 library that can:
Render "widgets" i.e. containers with forms and components (this should be easy and possible using POHJC - Plain old HTML, JavaScript and CSS ;-) )
Provide a Tree like control for laying out some data
Provide a Canvas where data structures can be represented as basic shapes
Provide drag and drop capabilities between Trees, Buttons and Canvas
Provide some sort of Tab Navigator container (I guess JQuery works here)
Interact with back-end services (JSON/XML calls will be okay, but mapping directly with back-end entities will be awesome!)
Renders on latest versions of major browsers, Android OS and iOS (WebKit for mobile?)
Am I asking for too much?
I'm ready to give JQuery & JQuery UI a try.
I looked at Sencha / ExtJS but it seems we need to maintain two code bases one for normal browsers and the other for mobiles (is that correct?)
Are there any other JS libraries worth trying out?
My concerns areas are
Single code base, I don't want to suggest to them that multiple code bases for the client need to be maintained. That's a last resort option and would lead to complete ruling out of HTML5 with Flash apps and native apps being developed.
Canvas capabilities - I don't want to work with raw canvas and shape tags. This too is a last resort option. Is there any abstraction available?
Integration with back-end services, obviously I need some capability here!
Help me out. Communitywikify this if required.
Thanks,
Sri
How about trying Vaadin?
http://vaadin.com/comparison
I do construe its irrelevant to your question, but still this framework can help in great deal. I still use Flex and PHP as main base for many application, but actually fell in love with Vaadin and started using it for my new projects.
Grant Skinner the flash guru is working on a html5 libary. It has some features you requested. It is still in development.
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
The libary is called easeljs, you can find it here : http://easeljs.com/
For the normal html and css manipulations without html canvas JQuery is very easy to learn.
I'm building a Bridge game.
The main page, where you play the game, boast some 200 controls, like buttons that represents the 52 cards, 26 others for won / lost tricks, plenty of text fields... You name it, total some 200.
Actually its been already built and runs under Winforms model, but with the unavoidable question of implementing .NET 4.0 onto user's machine that must run Windows, and installing the software.
Hence I'm considering creating an ASP version (no PHP please, since I'm fluent in VB, and ignorant in C, Java, PHP and the likes).
Is that a "real" option or am I dreaming?
Will it run smoothly for users with a 2MB DSL connection?
Oh, by the way, no MVC please, I'm too old for that sort of sh...t :->
Can it be done? Sure.
The problem for you might be that to do it effectivly you will need to use HTML, CSS, Javascript and the like.
What most likely would be a good idea for you here would be to go the route of Silverlight. It will give you a more rich UI experience and will allow you to code in VB entirely.
I don't see using ASP.BET directly as a good option here. To make it look smooth, you would have to use javascript heavily. I thing you would be better off with Flash.
If you prefer to use pure HTML/Javascript/CSS you can create rich Web UI's by modifying the Document's Object Model (DOM). With little knowledge of Javascript and the usage of some library like: scriptaculus, prototype, sarissa, jquery, you can get rich interfaces. You should take a look at some of these libraries mainly scriptaculus because the set of animations it provides. Another javascript library made for game development is gameQuery.
With that many controls on an ASP.NET page your view state will be gigantic. If you plan on only serving up a couple of games at once then it shouldn't be a problem but you have to actually start thinking about bandwidth with that large of a viewstate. You would be better off with a DOM/jQuery type interface which displayed static images for the cards. All interaction can be handled client side and validated with a server side call.
This might be the perfect opportunity to learn javascript :). Remember each language you learn is another tool in your toolbox. The engineer with the most tools usually wins :).