I am developing a coupon based website which would give our customers an opportunity to design and submit their coupons seamlessly from this site.
Now I want the coupon creation process to be simple and straight forward, because I can not expect my customers to be a computer techy.
The tool will have left hand area (where tool box will be placed) and right hand area (which is working area). Left hand section would be a toolbox to perform various activities like :
(a) Tool box should have a button to create a text based div (this div should be editable), every time user clicks this button, one text div (with some predefined width n height) will be created in the working area.
(b) If user wants to delete a text based div (Which has been created from the above process), it should be as simple as selecting that div (which is to be deleted) and pressing the delete button on the keyboard. Another way to delete the div should be to select it n right click on it, and the selecting delete option from the right click pop up.
(c) Tool box should have a button to open up a color platte which should be able to change the color of the selected text.
(d) Tool box should have a button to open up a font platte which should be able to change the font type, font size, making text italic/bold underlined etc of the selected text.
(e) Text based div which has been created from the above process, should be dragable, droppable, resizable (I know this is pretty easy to do using JQuery)
(e) Tool box should have a button to create a image based div (there should be a way/UI to browse local machine to
select the image and place it in the image div. Again similar to text div, image div should also be dragable,droppable and resizable.
(f) Tool box should have a button for image manipulation like image crop, changing the image color etc, (you can take help from here [url removed, login to view] I don't want all of this tools full fledged functionality).
(g) These divs (text and image) can be rearranged ( in the work area by dragging/dropping n resizing)... once they have
been appropriately placed in the work area, there should be a mechanism to save all the divs as an image (lets say .jpg/png/gig etc). Now this image is what I call as a coupon. We can have a button (lets call this button as save as Image) on the toolbox to save this image as an image. We can make a Ajax DB call (we can use [url removed, login to view] file here for ajax DB hits) to save this image in the DB directly.
(h) So in this way, customers can create the coupon on the fly and saving them in the DB.
(i) Coupon will be retrieved from the DB later on for the presentation purposes.
JQuery would be preferred to code this functionality, but I am still keeping my options open if you have something better to suggest.
I am developing the application using PHP (Zend Framework) + MySQL