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/
Related
I have been learning a bit of jQuery and .Net in VB. I have created a product customize tool of sorts that basically layers up divs and add's text, images etc on top of a tshirt.
I'm stuck on an important stage!
I need to be able to convert the content of the div that wraps all these divs of text and images to one flat image taking into account any CSS that has been applied to it also.
I have heard of things that I could use to screen capture the content of a browser on the server which could be possible for low res thumbs etc, but it sounds a little troublesome! and it would really be nice to create an image of high res.
I have also heard to converting the html to html5 canvas then writing that out... but looks too complicated for me to fathom and browser support is an issue.
Is this possible in .NET?
Perhaps something with javascript could be done?
Any help or guidance in the correct direction would be appreciated!
EDIT:
I'm thinking perhaps I could do with two solutions for this. Ideally I would end up with a normal res jpg/png etc for displaying on the website, But also a print ready high res file would be very desirable as well.
PostScript Printer - I have heard of it but I'm struggling to find a good resource to understand it for a beginner (especially with wiki black out). Perhaps I could create a html page from my div content and send it to print to a EPS file. Anyone know any good tutorials for this?
We did this... about 10 years ago. Interestingly, the tech available really hasn't changed too much.
update - Best Answer
Spreadshirt licenses their product: http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/
Just license it. Don't do this yourself, unless you have real graphics manipulating and print production experience. I'd say in today's world you're looking at somewhere around 4,000 to 5,000 hours of dev time to duplicate what they did... And that's if you have two top tier people working on it.
Short answer: you can't do it in html.
Slightly longer answer:
It doesn't work in part because you can't screen cap the client side and get the level of resolution needed for production type printing. Modern screen resolution is usually on the order of 100 ppi. For a decent print you really need something between 3 and 6 times that density. Otherwise you'll have lots of pixelation and it will generally look like crap when it comes out.
A different Answer:
Your best bet is to leverage something like SVG (scalable vector graphics) and provide a type of drawing surface to the browser. There are several ways of doing this using Flash (Spreadshirt.com uses this) or Silverlight (not recommended). We used flash and it was pretty good.
You might be able to get away with using HTML 5. Regardless, whatever path you pick is going to be complicated.
Once the user is happy with their drawing and wants to print it out, you create the final file and run a process to convert it to Postscript or whatever format your t-shirt provider needs. The converter (aka RIP software) is going to either take a long time to develop or cost a bunch of money... pick one. (helpful hint: buy it. Back then, we spent around $20k US and it was far cheaper than trying to develop).
Of course, this ignores issues such as color matching and calibration. This was actually our primary problem. Everyone's monitor is slightly different and what looks like red on one machine is pink on another.
And for a little background, we were doing customized wrapping paper. The user added text, selected images from our library or uploaded their own, and picked a pattern. Our prints came out on large-format HP Inkjet printers (36" and 60" wide). Ultimately we spent between $200k and $300k just on dev resources to make it happen... and it did, unfortunately, the price point we had to sell at was too high for the market.
If you can use some server-side tool, check phantomjs. This is a headless webkit browser (with no gui) which can take a page's screenshot, an uses a javascript api. It should do the trick.
Send the whole div with user generated content back to server using ajax call.
Generate an HTML Document on server using 'HtmlTextWriter' class.
Then you can convert that HTML file using external tools like
(1) http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot
(2) http://html-to-image.acasystems.com/faq-html-to-picture.htm
which are not free tools, but you can use them by creating new Process on server.
The best option I came across is wkhtmltopdf. It comes with a tool called wkhtmltoimage. It uses QtWebKit (A Qt port of the WebKit rendering engine) to render a web page, and converts the result to PDF or image format of your choice, all done at server side.
Because it uses WebKit, it renders everything (images, css and even javascript) just like a modern browser does. In my use case, the results have been very satisfying and are almost identical to what browsers would render.
To start, you may want to look at how to run external tools in .NET:
Execute an external EXE with C#.NET
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'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.
I need to make a light-weight application for video editing and viewing.
I was thinking of either writing an executable program written in Python, or a light-weight web app using JavaScript and HTML5. Flash, as a third option, is pretty much out of the question, since it's too fat and has many security flaws.
EDIT: The video serving itself (read: the "heavy-weight stuff") will be done by a dedicated fast library or service. Thus, the Python/Web-app questions is pretty much related only to the GUI and some very basic video manipulation, like jumping to a specific frame and such.
What is the preferable platform, considering speed and ease of use (for the user)? Should I just use Python, or maybe just build a small web-app for my task?
Thanks in advace,
Ory
Python.
Really, while you can do some fancy tricks with HTML5 Video e.g. apply effects to it and render it on a canvas, rotate the player etc. I don't know of any encoder that's written in JavaScript.
So unless you want to write your own version of FFMPEG for JavaScript, which will probably be the slowest thing on earth and take 400k lines of code (talk about "lightweight") so I'd suggest that you go with Python.
There are things like PyFFMPEG or PyMedia out there, which are sure worth a look, but keep in mind Video editing is hard.
I wouldn't use any of those: Browsers can't handle the weight of an application like that, python would take ages to render. If you want to make the frontends in python and/or HTML/JS feel free but you will need a compiled (Preferably C/C++) application to handle the heavy lifting in the background (For HTML, especially if you plan on making it actually have a working preview)
You'd have more luck with flash than with HTML for this...
I don't think writing a web based video editing system would be a small endeavor. Flash and Silverlight would be the technologies of choice for something like this. They are both designed to handle video very well and I think an RIA interface would be ideal.
Sure they may be 'fat' but you got to use the right tool for the job :]
I think Kaltura uses a Flash based system.
You can use Python behind the scenes to do encoding, and connecting video snippets together, but doing the front end with HTML 5 seems masochistic. It is probably possibly to do it with HTML 5 / Canvas, but still pretty crazy!
I eventually developed a web-app - HTML5 & CSS. Developing a GUI in HTML is a breeze. And the Chromium (Open-source Google Chrome) handles HTML5 pretty well.
Unlike what people have said here, it is not heavy.
My company has some software which we use to acquire data and interact with some hardware. If we wanted to put a mockup on a website which allows the user to get a feel for the UI (gather some data, change some settings etc.), what are some good methods to do so?
I'm thinking either some clever javascript or flash. I've done some JS before but only to style elements of a page. I did some stuff with flash about 8 years ago and found it really fiddly.
So my questions; Are javascript/flash reasonable solutions for this or is there something better. What is likely to be the simpler/quicker route? Is there a better way to achieve the end result?
[Edit] The demo doesn't need real data, just some fake/dummy example stuff is fine.
I believe you dont require actual backend connectivity and just need some dummy data. Few days back I participated in a session on Flash Catalyst. By using flash catalyst, you can create functional UIs. More details you can find in their site.
If you want a demo app with actual backend connectivity, then , I think, flex/flash is good selection. If its javascript, you need to take pain of testing it in all browsers.
Javascript/Ajax. Flash based sites and demos I find very clunky. This would be more than adequate to create a demo, it would even be possible to have it non-ajax based and have local test data within Javascript files. Although creating such a demo interface might be challenging as you have only changed the styling of the page with Javascript, as you say.
The other simpler option is just to create a video, with a voiceover, showing the system and its different features. Not only is this a nice option because it would be easy to produce, but it will also aid in tutoring the user into how to use the system and discovering useful features.
I dont want to sound like an evangelist, but with Adobe Flex you can create awesome UIs practically right out of the box, and cross-platform. Check the Flex Sample Applications page on the Adobe website and see if it's something like that what you're looking for.
Designing an GUI in Flash might get too cumbersome, so if you don't need all the graphic/animations, that's what Flex is there for!