I'd like to build a proof-of-concept web-based database manager (such as the desktop version in the screenshot below) that has the following features.
The schema will be provided initially through a flat file.
It seems like HTML5 might be an option. What about non-HTML? What about processing.js? Are there any libraries I could/should take advantage? Is there already a service I can tap into?
Any opinions or advice would be appreciated!
Edit
Primary goal of the project is the build a protoype of the UI.
For the events that you will need to control everything, I would suggest using jQuery. It can cut you javascript in half. Canvas/SVG would be easy enough to use to create the diagram above (could even pull it off in straight html using some creative css and a judicious application of div's). I've never used flash but I also don't see anything in your image here that couldn't be done in Canvas/SVG. If you do go with Canvas you will want to look into using a lib called ex_canvas which will make it all work fairly nicely on IE (my company has some canvas items that work in IE6 using ex_canvas). Also you will want to look at css-sprites (in case you haven't heard of them before) as they can aid in the load performance of your page.
I've decided to use http://raphaeljs.com for the project. This SVG library supports older browsers and given this application is highly interactive with the user, it makes sense for me in this project to use SVG over Canvas.
Related
A (possible) client has a multipart questionnaire that they want coded in HTML5 (for responsiveness). I was thinking Bootstrap 3, combined with HTML and a bit o' javascript. However, I don't know what their options are regarding tracking the answers.
I'm new to HTML5, coming from the Flash world. What are my options? It seems a job for a backend DB, and I know enough Django to get into trouble, so perhaps that would be the best bet? I have done basic Django sites, but when something goes wrong, oh, it's a bit of a pain! (I haven't found Django as user friendly as I might like)
Is there anything new and funky in HTML5 (I'm not sure how they'd get the data out of local storage)? I'm good at HTML, but don't know all the tricky tricks in HTML5.
Thanks
Use ViewModel with Knockout.js for responsiveness. Its pretty fast.
You can see this sample Knockout.js project here.
Have you taken a look at the Django HTML5 Boilerplate (DH5BP) project1 on GitHub?
From the Readme.md
The Django HTML5 Boilerplate...incorporat[es] the HTML5 Boilerplate (H5BP) project into an easy to consume Django-friendly Python package.
Find out...about HTML5 Boilerplate at https://github.com/h5bp/html5-boilerplate
This project differentiates itself from other H5BP to Django ports, by
including Fabric scripts that automatically convert new versions of
H5BP into a Django-friendly Python module. Ideally, this will make
keeping up-to-date with the latest version of H5BP trivial.
Your best bet is probably to work with a CMS. It would greatly reduce your development time and it would help you avoid common pit-falls.
I would recommend using WordPress with some sort of plugin as in my experience it has been the easiest to work with for small projects.
HTML5 has some new elements and a simplified syntax. Some elements have had their definitions changed (what the tags intended usage is).
Update:
Four years later, WordPress now has a REST API. A good way to store user input could be to check if they are logged in and then post information via AJAX to the API.
I'd like to build a webapp with a real rich user interface. (think graphs that can be manipulated with mouse gestures).
In order to be nice to environments that don't support java script (crawlers, other computers), the application should work without javascript just as well. I mean it should offer all the features but in a low fidelity kind of way. Just forms and links that is.
How do I go about this? Are there libraries available for something like this?
For the java script UI I'm currently considering extJS, but that isn't fixed at all.
Start with something that works with plain links and forms (e.g. where values are typed instead of pointed at), then layer JS based drag and drop on top of it.
See:
Progressive enhancement
Unobtrusive JavaScript
Flash but perhaps thats cheating, SVG is another good idea as a fallback as no-script browsers are unlikely to be webkit ones.
Also perhaps making image on the fly through the server using ImageMagick or GDLIB so images/graphs etc are made when the page is requested. It's kinda old school, but so is expecting no-script browsers ;-)
One thing I'd say about EXT: It's great but it's heavy and it takes a long time to get your head around as it really doesn't feel 'open' more like a bunch of components that you can configure but not alter.
If you want SVG and javascript perhaps look at Raphael and it's graphing/charting brother gRaphael :
http://g.raphaeljs.com/
http://raphaeljs.com/
Here's a link to their demo. Basically, it's an online tool that implements a lot of the visio functionality.
I'm building an app that would require similar type of user interaction, dropping, moving, editing, resizing objects, interacting with grids and guides, etc.
Since the project is for my own learning purposes, I was wondering what are some of the things I should focus on or learn to be able to develop such high quality interfaces
Cheers
There's draw.io, a very similar tool, but with the source on github.
To build such a rich user interface is a big task.
Which is why there are lots of frameworks and libraries which have already developed rich user interface stuff such as:
Sproutcore
Cappuccino
ExtJS
Dojo
jQuery UI
Sproutcore and Cappuccino are for developing desktop style applications for the web and include very good user interface components. As well as maintaing application states and data models. ExtJS has a lot of these features and a very nice UI toolkit, as does Dojo.
Lucidchart I notice uses the Canvas drawing API as well so thats something you would need to look into for shape manipulation and creating flexible connections. Mozilla Developer Center has some good stuff on the canvas API.
I would start off by taking a look at the Raphael library.
It allows you to write pretty simple Javascript code to draw graphic elements in the browser, including pretty straightforward animations and draggable/clickable interfaces.
In all honesty, it's not going to be quick and easy to write something as complex as the site you linked to, but Raphael is the quickest way to get started with the basics.
And best of all, Raphael is even compatible with older versions of IE, so you don't have to worry about only being able to support the latest browsers (though of course you may want to do other stuff that does need other new features).
Hope that helps.
I need to implement a moderately simple Powerpoint-like tool for the web. The user should be able to draw text boxes on a grid, drag & drop or resize them and save the result. Several options for formatting the text should be available (font, size, allignment, etc.). Also, the application should have an undo function (crl+z) to undo recent actions.
All the saved templates can be edited, deleted and printed. Additionaly, the user should be able to drag predefined textfields and images to the grid.
On the server side, I need to use Microsoft Technology. My first idea was to do all the functionality in javascript and use ASP.NET MVC server side. But as more and more requirements were assembled, the idea doesn't sound as good anymore.
My question is: What technology would you choose? Would Silverlight be the way to go? Or are there any Javascript libraries or open source projects I could use?
Any suggestion is appreciated!
Cheers,
Chris
EDIT: The web application is going to be accessed exclusively via thin clients with IE pre-installed. So compatibility with mobile phones or tablets won't be necessary.
Silverlight is DEFINITELY the way to go especially considering that you are 100% guaranteed that all of your users will have it installed. Moreover, you'll have access to the .net framework which will significantly improve the coding experience.
However, that being said, this is not going to be a small task. You are essentially trying to build a mini-PowerPoint creator with quite a bit of functionality. There is going to be quite a bit of work involved at every step so plan your schedule accordingly and leave a lot of extra time for tweaking at the end.
The technology depends on the finer requirements I guess, Google managed to make an OK presentation tool in Google Docs with HTML / JavaScript, but if you need custom fonts or don't want to bother with browser incompatibility you could go for Silverlight. I'm pretty sure the latter will be much easier to develop, but for example won't work on mobile phones and tablets.
I have a psd version of a UI Kit that I would like to implement into the forms, etc, on my website. It's similar to the one below - which is "Chutzpah" by Morgan Allan Knutson (#rnorgan)...I'd show mine, but I don't have a screenshot. This will demonstrate the same concept, though.
image from http://designmoo.com/2435/chutzpah-user-interface-kit/, where you can download his kit.
What tools do I need to utilize to do this? Can I do it simply with CSS, or do I need to use some client side scripting? Or, is this something that is really just for mobile applications?
Essentially, the design part will be done in CSS; some of the elements you show can't be fully styled in their native browser represenations however (like <select>), so you will need the assistance of JavaScript-powered widgets that allow for more design freedom.
Maybe jQuery UI (which is a set of jQuery-powered widgets and surely one of the best UI tools around) is interesting for you. It is completely themable and even has a tool for building your own themes, ThemeRoller. It will not be enough for every aspect of your implementation, but may provide a good starting point.
Note that using jQuery UI comes with dependencies (jQuery) and limitations (no other JS library should be used on the site).
Whichever road you take, be prepared for a lot of fiddly work.