I am looking to add in some ajax/js features into my existing site. This will be implemented my already existing web-html editor.
Things include drag/drop images/links, and drag/editing things inside the html editor
=================
This is for my site send [login to view URL] - this site is an email marketing site that allows members to create, send, and track email newsletters. people can use it to help market their sites/products/services, etc.. The part i want changed is the creation of their newsletters. Check it out currently by going to send [login to view URL], and up top logging in with demo1(at)send [login to view URL]
Then go to the "Newsletters" tab on top, and click 'Create new newsletter". Right now there are 2 pages do create a newsletter. The first is what you see now on the site, you pick what type, and an optional template. On the second page they can design the actual newsletter, and input any custom fields/links/feedback forms/surveys.
I want to make this into a 1 page format only. Check out the attached picture to see what i mean. Everything they should be able to do on this one page.
--------------------
all features are either on the right side of the editor, or below it. This wll be very ajax/web2.0 style, where members can drag/drop items in, edit them inidividually there, and change entire structures/colors/themes/
templates/
For a small example: Take a look at [login to view URL] and login with timebuzz(at)[login to view URL] / timebuzz - then click the left side "Compose" button
------------------
I think it is best to develop it on a test page until it is done. You can see in the screenshot the layout it will take. I am thinking iframes for the editor itself, the right frame, and the bottom frame.
I also think it is best to develop the layout before any of the individual coding for each part. For the editor, i have edited the top bar (only one bar, keeping bold, italics, etc..), moving the "name your editor" box there, and adding a "Preview" button
The right side should be a fluid iframe/ajax thing where when someone clicks one of the tabs on top (images, links, etc..), then the contents of that tab show below.
The same thing applies to the bottom frame, where each 'tab''s contents (section, theme, etc..) will show in the frame above
The bottom right corner will be 3 buttons, and you can read what they do there.
------------------------------
The side panel has 6 tabs to choose from. Links, Fields, Surveys, and Feedback are already coded in the site, just not the way they will be used here. Links, Surveys, and Feedback have their own sections under "Features" tab on top. This is where they can add new ones. When these tabs are clicked in here, their contents will be shown before. From there, they can add them directly into their newsletter by clicking a little icon next to each link, survey, or feedback.
For the image section. members will be able to upload images right inside the iframe. They are uplaoded, we will show a thumbnail version of them inside that iframe. If they want to add that image into their newsletter, it would be great if all they had to do was drag and drop it in.
Widgets frame will just ask 2 questions with radio boxes next to each one. These will be things that will automatically be added to the top of a newsletter if chosen. First one asking "View this email on the web here " - this will generate a webpage with the exact HTML coding of that newsletter to be made on send [login to view URL] with a generated URL. And this URL will be a link above their newsletter when sent out. Second question will ask "Be sure to add (sender email address) to your address book".
When they are checked, will appear above start of newsletter like this (if both checked)
"View this email on the web here - Be sure to add (sender email address) to your address book" Likewise if only one is selected, only show that one, or if none selected, they none of them show.
--------------------------------------------------------
The bottom frame has 4 elements. If you could refer back to that last email where i talked about similiaries to [login to view URL], you can see what 'segments' and themes' will look like. I will provide more detail on them both, as well as graphics and color schemes. For "My Templates" if clicked, the frame above will show any of their templates (by name), that they made themselves. For "Send n Templates", we can show the pre-made templates (these are already made and HTML code for them already created, can be seen on first "Create new newsletter page" now.
If using 'my template' or 'send n template', then anything currently in html editor is removed (lets add a 'are you sure you want to use this template, everything currently will be deleted).
Segments and themes work off one another. See madmimi to see how segments and themes would work. They are heavy ajax
-----
And after this si all made, we will need a public version of this, where people not signed up and (test) it out, and even send a version of it to their emeail addresses.